feat(Input/InputMenu/Select/SelectMenu): handle avatar prop

nuxt · Oct 17, 2024 · 53a3796 · 53a3796
1 parent df2013c
commit 53a3796
Show file tree

Hide file tree

Showing 42 changed files with 604 additions and 828 deletions.
diff --git a/docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue b/docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue
@@ -17,14 +17,13 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     :loading="status === 'pending'"
     icon="i-heroicons-user"
     placeholder="Select user"
-    class="w-48"
   >
     <template #leading="{ modelValue, ui }">
       <UAvatar
         v-if="modelValue"
         v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
   </UInputMenu>

diff --git a/docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue b/docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue
@@ -23,14 +23,13 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     :filter="false"
     icon="i-heroicons-user"
     placeholder="Select user"
-    class="w-48"
   >
     <template #leading="{ modelValue, ui }">
       <UAvatar
         v-if="modelValue"
         v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
   </UInputMenu>

diff --git a/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue b/docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
@@ -25,8 +25,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
       <UAvatar
         v-if="modelValue"
         v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
 

diff --git a/docs/app/components/content/examples/input-menu/InputMenuIconExample.vue b/docs/app/components/content/examples/input-menu/InputMenuIconExample.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
-const selected = ref('Backlog')
+const value = ref('Backlog')
 </script>
 
 <template>
   <UInputMenu
-    v-model="selected"
+    v-model="value"
     :items="items"
     :ui="{
       trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'

diff --git a/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue b/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
@@ -25,18 +25,9 @@ const items = ref([
     }
   }
 ])
-const selected = ref(items.value[0])
+const value = ref(items.value[0])
 </script>
 
 <template>
-  <UInputMenu v-model="selected" :items="items" class="w-40">
-    <template #leading="{ modelValue, ui }">
-      <UAvatar
-        v-if="modelValue"
-        v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
-      />
-    </template>
-  </UInputMenu>
+  <UInputMenu v-model="value" :avatar="value?.avatar" :items="items" />
 </template>
diff --git a/docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue b/docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue
@@ -22,11 +22,11 @@ const items = ref([
     }
   }
 ])
-const selected = ref(items.value[0])
+const value = ref(items.value[0])
 </script>
 
 <template>
-  <UInputMenu v-model="selected" :items="items" class="w-40">
+  <UInputMenu v-model="value" :items="items">
     <template #leading="{ modelValue, ui }">
       <UChip
         v-if="modelValue"

diff --git a/docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue b/docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue
@@ -21,9 +21,9 @@ const items = ref([
     icon: 'i-heroicons-check-circle'
   }
 ])
-const selected = ref(items.value[0])
+const value = ref(items.value[0])
 </script>
 
 <template>
-  <UInputMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
+  <UInputMenu v-model="value" :icon="value?.icon" :items="items" />
 </template>
diff --git a/docs/app/components/content/examples/input-menu/InputMenuOpenExample.vue b/docs/app/components/content/examples/input-menu/InputMenuOpenExample.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const open = ref(false)
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
-const selected = ref('Backlog')
+const value = ref('Backlog')
 
 defineShortcuts({
   o: () => open.value = !open.value
 })
 </script>
 
 <template>
-  <UInputMenu v-model="selected" v-model:open="open" :items="items" />
+  <UInputMenu v-model="value" v-model:open="open" :items="items" />
 </template>
diff --git a/docs/app/components/content/examples/input-menu/InputMenuSearchTermExample.vue b/docs/app/components/content/examples/input-menu/InputMenuSearchTermExample.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 const searchTerm = ref('D')
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
-const selected = ref('Backlog')
+const value = ref('Backlog')
 </script>
 
 <template>
-  <UInputMenu v-model="selected" v-model:search-term="searchTerm" :items="items" />
+  <UInputMenu v-model="value" v-model:search-term="searchTerm" :items="items" />
 </template>
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuFetchExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuFetchExample.vue
@@ -23,8 +23,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
       <UAvatar
         v-if="modelValue"
         v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
   </USelectMenu>

diff --git a/docs/app/components/content/examples/select-menu/SelectMenuFilterExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuFilterExample.vue
@@ -29,8 +29,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
       <UAvatar
         v-if="modelValue"
         v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
   </USelectMenu>

diff --git a/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
@@ -25,8 +25,8 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
       <UAvatar
         v-if="modelValue"
         v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
 

diff --git a/docs/app/components/content/examples/select-menu/SelectMenuIconExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuIconExample.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
-const selected = ref('Backlog')
+const value = ref('Backlog')
 </script>
 
 <template>
   <USelectMenu
-    v-model="selected"
+    v-model="value"
     :items="items"
     :ui="{
       trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
     }"
-    class="w-40"
+    class="w-48"
   />
 </template>
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
@@ -25,18 +25,9 @@ const items = ref([
     }
   }
 ])
-const selected = ref(items.value[0])
+const value = ref(items.value[0])
 </script>
 
 <template>
-  <USelectMenu v-model="selected" :items="items" class="w-48">
-    <template #leading="{ modelValue, ui }">
-      <UAvatar
-        v-if="modelValue"
-        v-bind="modelValue.avatar"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
-      />
-    </template>
-  </USelectMenu>
+  <USelectMenu v-model="value" :avatar="value?.avatar" :items="items" class="w-48" />
 </template>
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
@@ -22,11 +22,11 @@ const items = ref([
     }
   }
 ])
-const selected = ref(items.value[0])
+const value = ref(items.value[0])
 </script>
 
 <template>
-  <USelectMenu v-model="selected" :items="items" class="w-40">
+  <USelectMenu v-model="value" :items="items" class="w-48">
     <template #leading="{ modelValue, ui }">
       <UChip
         v-if="modelValue"

diff --git a/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
@@ -21,9 +21,9 @@ const items = ref([
     icon: 'i-heroicons-check-circle'
   }
 ])
-const selected = ref(items.value[0])
+const value = ref(items.value[0])
 </script>
 
 <template>
-  <USelectMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
+  <USelectMenu v-model="value" :icon="value?.icon" :items="items" class="w-48" />
 </template>
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuOpenExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuOpenExample.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const open = ref(false)
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
-const selected = ref('Backlog')
+const value = ref('Backlog')
 
 defineShortcuts({
   o: () => open.value = !open.value
 })
 </script>
 
 <template>
-  <USelectMenu v-model="selected" v-model:open="open" :items="items" class="w-40" />
+  <USelectMenu v-model="value" v-model:open="open" :items="items" class="w-48" />
 </template>
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuSearchTermExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuSearchTermExample.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 const searchTerm = ref('D')
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
-const selected = ref('Backlog')
+const value = ref('Backlog')
 </script>
 
 <template>
-  <USelectMenu v-model="selected" v-model:search-term="searchTerm" :items="items" class="w-40" />
+  <USelectMenu v-model="value" v-model:search-term="searchTerm" :items="items" class="w-48" />
 </template>
diff --git a/docs/app/components/content/examples/select/SelectFetchExample.vue b/docs/app/components/content/examples/select/SelectFetchExample.vue
@@ -27,8 +27,8 @@ function getUserAvatar(value: string) {
       <UAvatar
         v-if="modelValue"
         v-bind="getUserAvatar(modelValue)"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
+        :size="ui.leadingAvatarSize()"
+        :class="ui.leadingAvatar()"
       />
     </template>
   </USelect>

diff --git a/docs/app/components/content/examples/select/SelectIconExample.vue b/docs/app/components/content/examples/select/SelectIconExample.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+const value = ref('Backlog')
 </script>
 
 <template>
   <USelect
-    default-value="Backlog"
+    v-model="value"
     :items="items"
     :ui="{
       trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
     }"
-    class="w-40"
+    class="w-48"
   />
 </template>
diff --git a/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue b/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
@@ -25,21 +25,11 @@ const items = ref([
     }
   }
 ])
+const value = ref(items.value[0]?.value)
 
-function getAvatar(value: string) {
-  return items.value.find(item => item.value === value)?.avatar
-}
+const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
 </script>
 
 <template>
-  <USelect default-value="benjamincanac" :items="items" class="w-48">
-    <template #leading="{ modelValue, ui }">
-      <UAvatar
-        v-if="modelValue"
-        v-bind="getAvatar(modelValue)"
-        :size="ui.itemLeadingAvatarSize()"
-        :class="ui.itemLeadingAvatar()"
-      />
-    </template>
-  </USelect>
+  <USelect v-model="value" :avatar="avatar" :items="items" class="w-48" />
 </template>
diff --git a/docs/app/components/content/examples/select/SelectItemsChipExample.vue b/docs/app/components/content/examples/select/SelectItemsChipExample.vue
@@ -22,14 +22,15 @@ const items = ref([
     }
   }
 ])
+const value = ref(items.value[0]?.value)
 
 function getChip(value: string) {
   return items.value.find(item => item.value === value)?.chip
 }
 </script>
 
 <template>
-  <USelect default-value="bug" :items="items" class="w-40">
+  <USelect v-model="value" :items="items" class="w-48">
     <template #leading="{ modelValue, ui }">
       <UChip
         v-if="modelValue"

diff --git a/docs/app/components/content/examples/select/SelectItemsIconExample.vue b/docs/app/components/content/examples/select/SelectItemsIconExample.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const selected = ref('backlog')
 const items = ref([
   {
     label: 'Backlog',
@@ -22,10 +21,11 @@ const items = ref([
     icon: 'i-heroicons-check-circle'
   }
 ])
+const value = ref(items.value[0]?.value)
 
-const icon = computed(() => items.value.find(item => item.value === selected.value)?.icon)
+const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
 </script>
 
 <template>
-  <USelect v-model="selected" :icon="icon" :items="items" class="w-40" />
+  <USelect v-model="value" :icon="icon" :items="items" class="w-48" />
 </template>
diff --git a/docs/app/components/content/examples/select/SelectOpenExample.vue b/docs/app/components/content/examples/select/SelectOpenExample.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 const open = ref(false)
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+const value = ref('Backlog')
 
 defineShortcuts({
   o: () => open.value = !open.value
 })
 </script>
 
 <template>
-  <USelect v-model:open="open" default-value="Backlog" :items="items" class="w-40" />
+  <USelect v-model="value" v-model:open="open" :items="items" class="w-48" />
 </template>