chore(VSelect): clean-up docs page and examples

packages/docs/src/examples/v-select/prop-chips.vue

@@ -9,10 +9,10 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const items = ref(['foo', 'bar', 'fizz', 'buzz'])
-  const value = ref(['foo', 'bar', 'fizz', 'buzz'])
+  const items = shallowRef(['foo', 'bar', 'fizz', 'buzz'])
+  const value = shallowRef(['foo', 'bar', 'fizz', 'buzz'])
 </script>
 
 <script>

packages/docs/src/examples/v-select/prop-custom-title-and-value.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const select = ref({ state: 'Florida', abbr: 'FL' })
+  const select = shallowRef({ state: 'Florida', abbr: 'FL' })
 
   const items = [
     { state: 'Florida', abbr: 'FL' },

packages/docs/src/examples/v-select/prop-dense.vue

@@ -1,22 +1,20 @@
 <template>
-  <div>
-    <v-select
-      :items="items"
-      density="compact"
-      label="Compact"
-    ></v-select>
+  <v-select
+    :items="items"
+    density="compact"
+    label="Compact"
+  ></v-select>
 
-    <v-select
-      :items="items"
-      density="comfortable"
-      label="Comfortable"
-    ></v-select>
+  <v-select
+    :items="items"
+    density="comfortable"
+    label="Comfortable"
+  ></v-select>
 
-    <v-select
-      :items="items"
-      label="Default"
-    ></v-select>
-  </div>
+  <v-select
+    :items="items"
+    label="Default"
+  ></v-select>
 </template>
 
 <script setup>

packages/docs/src/examples/v-select/prop-item-props.vue

@@ -1,5 +1,9 @@
 <template>
-  <v-select :item-props="itemProps" :items="items" label="User"></v-select>
+  <v-select
+    :item-props="itemProps"
+    :items="items"
+    label="User"
+  ></v-select>
 </template>
 
 <script setup>

packages/docs/src/examples/v-select/prop-menu-props.vue

@@ -1,7 +1,7 @@
 <template>
   <v-select
     :items="items"
-    :menu-props="{ top: true, offsetY: true }"
+    :menu-props="{ scrim: true, scrollStrategy: 'close' }"
     label="Label"
   ></v-select>
 </template>

packages/docs/src/examples/v-select/prop-multiple.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const favorites = ref([])
+  const favorites = shallowRef([])
 
   const states = [
     'Alabama',

packages/docs/src/examples/v-select/prop-readonly.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
+  const model = shallowRef('Foo')
   const items = ['Foo', 'Bar', 'Fizz', 'Buzz']
-  const model = ref('Foo')
 </script>
 
 <script>

packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-  import { computed, ref } from 'vue'
+  import { computed, shallowRef } from 'vue'
 
   const fruits = [
     'Apples',
@@ -90,7 +90,7 @@
     'Zucchini',
   ]
 
-  const selectedFruits = ref([])
+  const selectedFruits = shallowRef([])
 
   const likesAllFruit = computed(() => {
     return selectedFruits.value.length === fruits.length

packages/docs/src/examples/v-select/slot-item.vue

@@ -1,7 +1,7 @@
 <template>
   <v-select :items="items" item-title="name" label="User">
-    <template v-slot:item="{ props, item }">
-      <v-list-item v-bind="props" :subtitle="item.raw.department"></v-list-item>
+    <template v-slot:item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :subtitle="item.raw.department"></v-list-item>
     </template>
   </v-select>
 </template>

packages/docs/src/examples/v-select/slot-selection.vue

@@ -6,9 +6,8 @@
     multiple
   >
     <template v-slot:selection="{ item, index }">
-      <v-chip v-if="index < 2">
-        <span>{{ item.title }}</span>
-      </v-chip>
+      <v-chip v-if="index < 2" :text="item.title"></v-chip>
+
       <span
         v-if="index === 2"
         class="text-grey text-caption align-self-center"
@@ -20,18 +19,17 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
+  const value = shallowRef(['foo', 'bar', 'fizz'])
   const items = ['foo', 'bar', 'fizz', 'buzz', 'fizzbuzz', 'foobar']
-
-  const value = ref(['foo', 'bar', 'fizz'])
 </script>
 
 <script>
   export default {
     data: () => ({
-      items: ['foo', 'bar', 'fizz', 'buzz', 'fizzbuzz', 'foobar'],
       value: ['foo', 'bar', 'fizz'],
+      items: ['foo', 'bar', 'fizz', 'buzz', 'fizzbuzz', 'foobar'],
     }),
   }
 </script>

packages/docs/src/examples/v-select/usage.vue

@@ -21,10 +21,10 @@
 
 <script setup>
   const name = 'v-select'
-  const model = ref('default')
-  const clear = ref(false)
-  const chips = ref(false)
-  const multiple = ref(false)
+  const model = shallowRef('default')
+  const clear = shallowRef(false)
+  const chips = shallowRef(false)
+  const multiple = shallowRef(false)
   const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
   const props = computed(() => {
     return {

packages/docs/src/pages/en/components/selects.md

@@ -89,11 +89,11 @@ You can specify the specific properties within your items array that correspond
 
 <ExamplesExample file="v-select/prop-custom-title-and-value" />
 
-<!-- #### Menu props
+#### Menu props
 
-Custom props can be passed directly to `v-menu` using **menuProps** prop. In this example menu is force directed to top and shifted to top.
+Custom props can be passed directly to `v-menu` using **menu-props** prop. In this example a scrim as added to the select and the menu closes when you scroll.
 
-<ExamplesExample file="v-select/prop-menu-props" /> -->
+<ExamplesExample file="v-select/prop-menu-props" />
 
 #### Custom item props