feat(VSelect/Autocomplete/Combobox): rename item to internalItem

closes #18354
vuetifyjs · Feb 5, 2025 · 2023e13 · 2023e13
1 parent f92ae7a
commit 2023e13
Show file tree

Hide file tree

Showing 15 changed files with 50 additions and 47 deletions.
diff --git a/packages/docs/src/components/doc/Explorer.vue b/packages/docs/src/components/doc/Explorer.vue
@@ -19,7 +19,7 @@
       <template #chip="{ props, item }">
         <v-chip
           v-bind="props"
-          :prepend-icon="item.props.prependIcon"
+          :prepend-icon="item.prependIcon"
           color="primary"
           variant="flat"
           label

diff --git a/packages/docs/src/components/doc/IconList.vue b/packages/docs/src/components/doc/IconList.vue
@@ -23,14 +23,14 @@
     </template>
 
     <template #item="{ props, item }">
-      <v-list-item v-bind="props" :prepend-icon="'svg:' + item.raw.path">
+      <v-list-item v-bind="props" :prepend-icon="'svg:' + item.path">
         <template #append>
           <v-btn
             icon="mdi-content-copy"
             size="small"
             tabindex="-1"
             variant="plain"
-            @click.stop="copy(item.raw.name)"
+            @click.stop="copy(item.name)"
           />
         </template>
       </v-list-item>

diff --git a/packages/docs/src/components/doc/Releases.vue b/packages/docs/src/components/doc/Releases.vue
@@ -40,11 +40,11 @@
 
       <template #item="{ item, props: itemProps }">
         <v-list-item
-          v-if="item?.title"
+          v-if="item.title"
           v-bind="itemProps"
         >
-          <template v-if="item.raw?.reactions" #append>
-            {{ genEmoji(item.raw.reactions.total_count) }}
+          <template v-if="item.reactions" #append>
+            {{ genEmoji(item.reactions.total_count) }}
           </template>
         </v-list-item>
 

diff --git a/packages/docs/src/examples/accessibility/select-list-item.vue b/packages/docs/src/examples/accessibility/select-list-item.vue
@@ -6,7 +6,7 @@
     <template v-slot:item="{ item, props }">
       <v-list-item v-bind="props">
         <template v-slot:title>
-          {{ item.raw }}
+          {{ item }}
         </template>
       </v-list-item>
     </template>

diff --git a/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue b/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue
@@ -91,17 +91,17 @@
               <template v-slot:chip="{ props, item }">
                 <v-chip
                   v-bind="props"
-                  :prepend-avatar="item.raw.avatar"
-                  :text="item.raw.name"
+                  :prepend-avatar="item.avatar"
+                  :text="item.name"
                 ></v-chip>
               </template>
 
               <template v-slot:item="{ props, item }">
                 <v-list-item
                   v-bind="props"
-                  :prepend-avatar="item.raw.avatar"
-                  :subtitle="item.raw.group"
-                  :title="item.raw.name"
+                  :prepend-avatar="item.avatar"
+                  :subtitle="item.group"
+                  :title="item.name"
                 ></v-list-item>
               </template>
             </v-autocomplete>

diff --git a/packages/docs/src/examples/v-chip/misc-in-selects.vue b/packages/docs/src/examples/v-chip/misc-in-selects.vue
@@ -12,7 +12,7 @@
   >
     <template v-slot:chip="{ props, item }">
       <v-chip v-bind="props">
-        <strong>{{ item.raw }}</strong>&nbsp;
+        <strong>{{ item }}</strong>&nbsp;
         <span>(interest)</span>
       </v-chip>
     </template>

diff --git a/packages/docs/src/examples/v-combobox/misc-advanced.vue b/packages/docs/src/examples/v-combobox/misc-advanced.vue
@@ -13,7 +13,7 @@
       <template v-slot:selection="{ item, index }">
         <v-chip
           v-if="item === Object(item)"
-          :color="`${item.raw.color}-lighten-3`"
+          :color="`${item.color}-lighten-3`"
           :text="item.title"
           size="small"
           variant="flat"
@@ -23,7 +23,7 @@
         ></v-chip>
       </template>
       <template v-slot:item="{ props, item }">
-        <v-list-item v-if="item.raw.header && search">
+        <v-list-item v-if="item.header && search">
           <span class="mr-3">Create</span>
           <v-chip
             :color="`${colors[nonce - 1]}-lighten-3`"
@@ -34,10 +34,10 @@
             {{ search }}
           </v-chip>
         </v-list-item>
-        <v-list-subheader v-else-if="item.raw.header" :title="item.title"></v-list-subheader>
+        <v-list-subheader v-else-if="item.header" :title="item.title"></v-list-subheader>
         <v-list-item v-else @click="props.onClick">
           <v-text-field
-            v-if="editingItem === item.raw"
+            v-if="editingItem === item"
             v-model="editingItem.title"
             bg-color="transparent"
             class="mr-3"
@@ -47,22 +47,22 @@
             hide-details
             @click.stop
             @keydown.stop
-            @keyup.enter="edit(item.raw)"
+            @keyup.enter="edit(item)"
           ></v-text-field>
           <v-chip
             v-else
-            :color="`${item.raw.color}-lighten-3`"
-            :text="item.raw.title"
+            :color="`${item.color}-lighten-3`"
+            :text="item.title"
             variant="flat"
             label
           ></v-chip>
           <template v-slot:append>
             <v-btn
-              :color="editingItem !== item.raw ? 'primary' : 'success'"
-              :icon="editingItem !== item.raw ? 'mdi-pencil' : 'mdi-check'"
+              :color="editingItem !== item ? 'primary' : 'success'"
+              :icon="editingItem !== item ? 'mdi-pencil' : 'mdi-check'"
               size="small"
               variant="text"
-              @click.stop.prevent="edit(item.raw)"
+              @click.stop.prevent="edit(item)"
             ></v-btn>
           </template>
         </v-list-item>

diff --git a/packages/docs/src/examples/v-select/slot-item.vue b/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>
+      <v-list-item v-bind="props" :subtitle="item.department"></v-list-item>
     </template>
   </v-select>
 </template>

diff --git a/packages/docs/src/examples/v-select/slot-selection.vue b/packages/docs/src/examples/v-select/slot-selection.vue
@@ -7,7 +7,7 @@
   >
     <template v-slot:selection="{ item, index }">
       <v-chip v-if="index < 2">
-        <span>{{ item.title }}</span>
+        <span>{{ item }}</span>
       </v-chip>
       <span
         v-if="index === 2"

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -111,9 +111,9 @@ export const VAutocomplete = genericComponent<new <
     'onUpdate:modelValue'?: (value: V) => void
   },
   slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
-    item: { item: ListItem<Item>, index: number, props: Record<string, unknown> }
-    chip: { item: ListItem<Item>, index: number, props: Record<string, unknown> }
-    selection: { item: ListItem<Item>, index: number }
+    item: { item: Item, internalItem: ListItem<Item>, index: number, props: Record<string, unknown> }
+    chip: { item: Item, internalItem: ListItem<Item>, index: number, props: Record<string, unknown> }
+    selection: { item: Item, internalItem: ListItem<Item>, index: number }
     'prepend-item': never
     'append-item': never
     'no-data': never
@@ -514,7 +514,8 @@ export const VAutocomplete = genericComponent<new <
                           })
 
                           return slots.item?.({
-                            item,
+                            item: item.raw,
+                            internalItem: item,
                             index,
                             props: itemProps,
                           }) ?? (
@@ -586,8 +587,8 @@ export const VAutocomplete = genericComponent<new <
                   const slotContent = hasSlot
                     ? ensureValidVNode(
                       hasChips.value
-                        ? slots.chip!({ item, index, props: slotProps })
-                        : slots.selection!({ item, index })
+                        ? slots.chip!({ item: item.raw, internalItem: item, index, props: slotProps })
+                        : slots.selection!({ item: item.raw, internalItem: item, index })
                     )
                     : undefined
 

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx
@@ -34,7 +34,7 @@ const stories = Object.fromEntries(Object.entries({
             { ...v.props }
           >{{
             selection: ({ item }) => {
-              return item.title
+              return item
             },
           }}
           </VAutocomplete>

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -115,9 +115,9 @@ export const VCombobox = genericComponent<new <
     'onUpdate:modelValue'?: (value: V) => void
   },
   slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
-    item: { item: ListItem<Item>, index: number, props: Record<string, unknown> }
-    chip: { item: ListItem<Item>, index: number, props: Record<string, unknown> }
-    selection: { item: ListItem<Item>, index: number }
+    item: { item: Item, internalItem: ListItem<Item>, index: number, props: Record<string, unknown> }
+    chip: { item: Item, internalItem: ListItem<Item>, index: number, props: Record<string, unknown> }
+    selection: { item: Item, internalItem: ListItem<Item>, index: number }
     'prepend-item': never
     'append-item': never
     'no-data': never
@@ -559,7 +559,8 @@ export const VCombobox = genericComponent<new <
                           })
 
                           return slots.item?.({
-                            item,
+                            item: item.raw,
+                            internalItem: item,
                             index,
                             props: itemProps,
                           }) ?? (
@@ -631,8 +632,8 @@ export const VCombobox = genericComponent<new <
                   const slotContent = hasSlot
                     ? ensureValidVNode(
                       hasChips.value
-                        ? slots.chip!({ item, index, props: slotProps })
-                        : slots.selection!({ item, index })
+                        ? slots.chip!({ item: item.raw, internalItem: item, index, props: slotProps })
+                        : slots.selection!({ item: item.raw, internalItem: item, index })
                     )
                     : undefined
 

diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx
@@ -33,7 +33,7 @@ const stories = Object.fromEntries(Object.entries({
             { ...v.props }
           >{{
             selection: ({ item }) => {
-              return item.title
+              return item
             },
           }}
           </VCombobox>

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -121,9 +121,9 @@ export const VSelect = genericComponent<new <
     'onUpdate:modelValue'?: (value: V) => void
   },
   slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
-    item: { item: ListItem<Item>, index: number, props: Record<string, unknown> }
-    chip: { item: ListItem<Item>, index: number, props: Record<string, unknown> }
-    selection: { item: ListItem<Item>, index: number }
+    item: { item: Item, internalItem: ListItem<Item>, index: number, props: Record<string, unknown> }
+    chip: { item: Item, internalItem: ListItem<Item>, index: number, props: Record<string, unknown> }
+    selection: { item: Item, internalItem: ListItem<Item>, index: number }
     'prepend-item': never
     'append-item': never
     'no-data': never
@@ -428,7 +428,8 @@ export const VSelect = genericComponent<new <
                           })
 
                           return slots.item?.({
-                            item,
+                            item: item.raw,
+                            internalItem: item,
                             index,
                             props: itemProps,
                           }) ?? (
@@ -495,8 +496,8 @@ export const VSelect = genericComponent<new <
                   const slotContent = hasSlot
                     ? ensureValidVNode(
                       hasChips
-                        ? slots.chip!({ item, index, props: slotProps })
-                        : slots.selection!({ item, index })
+                        ? slots.chip!({ item: item.raw, internalItem: item, index, props: slotProps })
+                        : slots.selection!({ item: item.raw, internalItem: item, index })
                     )
                     : undefined
 

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.browser.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.browser.tsx
@@ -35,7 +35,7 @@ const stories = Object.fromEntries(Object.entries({
             { ...v.props }
           >{{
             selection: ({ item }) => {
-              return item.title
+              return item
             },
           }}
           </VSelect>
@@ -64,7 +64,7 @@ describe('VSelect', () => {
       >
         {{
           selection: ({ item, index }) => {
-            return item.raw.title.toUpperCase()
+            return item.title.toUpperCase()
           },
         }}
       </VSelect>