From 513cca25f6c179414af1400bce7249e1decb1f2d Mon Sep 17 00:00:00 2001
From: J-Michalek <71264422+J-Michalek@users.noreply.github.com>
Date: Tue, 8 Jul 2025 12:43:49 +0200
Subject: [PATCH] docs(input-menu/select-menu/select): add example with full
 item width (#4419)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../carousel/CarouselOrientationExample.vue   |  2 +-
 .../InputMenuContentWidthExample.vue          | 31 ++++++++++++++++
 .../InputMenuItemsAvatarExample.vue           |  1 +
 .../InputPasswordStrengthIndicatorExample.vue |  2 +-
 .../NavigationMenuContentSlotExample.vue      |  2 +-
 .../SelectMenuContentWidthExample.vue         | 32 +++++++++++++++++
 .../SelectMenuItemsAvatarExample.vue          |  1 +
 .../SelectMenuItemsChipExample.vue            |  1 +
 .../SelectMenuItemsIconExample.vue            |  1 +
 .../select/SelectContentWidthExample.vue      | 35 +++++++++++++++++++
 .../examples/select/SelectFetchExample.vue    |  2 +-
 .../select/SelectItemsAvatarExample.vue       |  1 +
 .../select/SelectItemsIconExample.vue         |  1 +
 .../examples/tabs/TabsCustomSlotExample.vue   |  2 +-
 .../TimelineAlternatingLayoutExample.vue      |  2 +-
 .../timeline/TimelineSlotsExample.vue         |  2 +-
 .../toaster/ToasterDurationExample.vue        |  2 +-
 .../examples/toaster/ToasterExpandExample.vue |  2 +-
 .../toaster/ToasterPositionExample.vue        |  2 +-
 docs/content/3.components/input-menu.md       | 27 ++++++++++++++
 docs/content/3.components/select-menu.md      | 29 +++++++++++++++
 docs/content/3.components/select.md           | 27 ++++++++++++++
 22 files changed, 197 insertions(+), 10 deletions(-)
 create mode 100644 docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue
 create mode 100644 docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue
 create mode 100644 docs/app/components/content/examples/select/SelectContentWidthExample.vue

diff --git a/docs/app/components/content/examples/carousel/CarouselOrientationExample.vue b/docs/app/components/content/examples/carousel/CarouselOrientationExample.vue
index 38ae34fc..cbc614da 100644
--- a/docs/app/components/content/examples/carousel/CarouselOrientationExample.vue
+++ b/docs/app/components/content/examples/carousel/CarouselOrientationExample.vue
@@ -14,8 +14,8 @@ const items = [
     v-slot="{ item }"
     orientation="vertical"
     :items="items"
-    class="w-full max-w-xs mx-auto"
     :ui="{ container: 'h-[336px]' }"
+    class="w-full max-w-xs mx-auto"
   >
     <img :src="item" width="320" height="320" class="rounded-lg">
   </UCarousel>
diff --git a/docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue b/docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue
new file mode 100644
index 00000000..89cba9ab
--- /dev/null
+++ b/docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      value: String(user.id),
+      email: user.email,
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <UInputMenu
+    :items="users"
+    icon="i-lucide-user"
+    placeholder="Select user"
+    :ui="{ content: 'min-w-fit' }"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </UInputMenu>
+</template>
diff --git a/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue b/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
index 8c7f0d84..a383b211 100644
--- a/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
@@ -35,6 +35,7 @@ const items = ref([
     }
   }
 ] satisfies InputMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 
diff --git a/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue b/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
index 16d5c532..f5a568cd 100644
--- a/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
+++ b/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
@@ -40,9 +40,9 @@ const text = computed(() => {
         placeholder="Password"
         :color="color"
         :type="show ? 'text' : 'password'"
-        :ui="{ trailing: 'pe-1' }"
         :aria-invalid="score < 4"
         aria-describedby="password-strength"
+        :ui="{ trailing: 'pe-1' }"
         class="w-full"
       >
         <template #trailing>
diff --git a/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue b/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
index 8ec2ec6d..96c8fc10 100644
--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
@@ -62,13 +62,13 @@ const items = [
 <template>
   <UNavigationMenu
     :items="items"
-    class="w-full justify-center"
     :ui="{
       viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
       content: 'sm:w-auto',
       childList: 'sm:w-96',
       childLinkDescription: 'text-balance line-clamp-2'
     }"
+    class="w-full justify-center"
   >
     <template #docs-content="{ item }">
       <ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue
new file mode 100644
index 00000000..ce179392
--- /dev/null
+++ b/docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      value: String(user.id),
+      email: user.email,
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <USelectMenu
+    :items="users"
+    icon="i-lucide-user"
+    placeholder="Select user"
+    :ui="{ content: 'min-w-fit' }"
+    class="w-48"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </USelectMenu>
+</template>
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
index 34d3bc7b..a4cbdf3e 100644
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
@@ -35,6 +35,7 @@ const items = ref([
     }
   }
 ] satisfies SelectMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
index 0c0ff1db..c7f8d53b 100644
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
@@ -24,6 +24,7 @@ const items = ref([
     }
   }
 ] satisfies SelectMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 
diff --git a/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue b/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
index b933ca73..b2254381 100644
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
@@ -23,6 +23,7 @@ const items = ref([
     icon: 'i-lucide-circle-check'
   }
 ] satisfies SelectMenuItem[])
+
 const value = ref(items.value[0])
 </script>
 
diff --git a/docs/app/components/content/examples/select/SelectContentWidthExample.vue b/docs/app/components/content/examples/select/SelectContentWidthExample.vue
new file mode 100644
index 00000000..94a479c1
--- /dev/null
+++ b/docs/app/components/content/examples/select/SelectContentWidthExample.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const value = ref<string>()
+
+const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      email: user.email,
+      value: String(user.id),
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <USelect
+    v-model="value"
+    :items="users"
+    placeholder="Select user"
+    value-key="value"
+    :ui="{ content: 'min-w-fit' }"
+    class="w-48"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </USelect>
+</template>
diff --git a/docs/app/components/content/examples/select/SelectFetchExample.vue b/docs/app/components/content/examples/select/SelectFetchExample.vue
index b16ceb1f..caa8cc4d 100644
--- a/docs/app/components/content/examples/select/SelectFetchExample.vue
+++ b/docs/app/components/content/examples/select/SelectFetchExample.vue
@@ -24,8 +24,8 @@ function getUserAvatar(value: string) {
     :loading="status === 'pending'"
     icon="i-lucide-user"
     placeholder="Select user"
-    class="w-48"
     value-key="value"
+    class="w-48"
   >
     <template #leading="{ modelValue, ui }">
       <UAvatar
diff --git a/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue b/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
index 3261258c..9ad8258f 100644
--- a/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
@@ -35,6 +35,7 @@ const items = ref([
     }
   }
 ] satisfies SelectItem[])
+
 const value = ref(items.value[0]?.value)
 
 const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
diff --git a/docs/app/components/content/examples/select/SelectItemsIconExample.vue b/docs/app/components/content/examples/select/SelectItemsIconExample.vue
index faef558b..208376c0 100644
--- a/docs/app/components/content/examples/select/SelectItemsIconExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsIconExample.vue
@@ -23,6 +23,7 @@ const items = ref([
     icon: 'i-lucide-circle-check'
   }
 ] satisfies SelectItem[])
+
 const value = ref(items.value[0]?.value)
 
 const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
diff --git a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
index 5fb97359..bab6d7c0 100644
--- a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
@@ -26,7 +26,7 @@ const state = reactive({
 </script>
 
 <template>
-  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
+  <UTabs :items="items" variant="link" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
     <template #account="{ item }">
       <p class="text-muted mb-4">
         {{ item.description }}
diff --git a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
index c977f36d..b37352be 100644
--- a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
+++ b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
@@ -27,8 +27,8 @@ const items: TimelineItem[] = [{
 <template>
   <UTimeline
     :items="items"
-    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
     :default-value="2"
+    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
     class="translate-x-[calc(50%-1rem)]"
   />
 </template>
diff --git a/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue b/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue
index 6eaa5590..a401c6ea 100644
--- a/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue
+++ b/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue
@@ -42,11 +42,11 @@ const items = [{
   <UTimeline
     :items="items"
     size="xs"
-    class="w-96"
     :ui="{
       date: 'float-end ms-1',
       description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
     }"
+    class="w-96"
   >
     <template #title="{ item }">
       <span>{{ item.username }}</span>
diff --git a/docs/app/components/content/examples/toaster/ToasterDurationExample.vue b/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
index 5ffbfbe6..460eb607 100644
--- a/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
+++ b/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.duration"
       size="sm"
-      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
         wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
         label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
+      class="inline-flex ring ring-accented rounded-sm"
     >
       <UInput
         v-model="appConfig.toaster.duration"
diff --git a/docs/app/components/content/examples/toaster/ToasterExpandExample.vue b/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
index 260b71f7..d327a9f9 100644
--- a/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
+++ b/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.expand"
       size="sm"
-      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
         wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
         label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
+      class="inline-flex ring ring-accented rounded-sm"
     >
       <USelectMenu
         v-model="appConfig.toaster.expand"
diff --git a/docs/app/components/content/examples/toaster/ToasterPositionExample.vue b/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
index 5c12ba2a..3e63db30 100644
--- a/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
+++ b/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
@@ -10,12 +10,12 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.position"
       size="sm"
-      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
         wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
         label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
+      class="inline-flex ring ring-accented rounded-sm"
     >
       <USelectMenu
         v-model="appConfig.toaster.position"
diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md
index f678e561..6c387758 100644
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -757,6 +757,33 @@ name: 'input-menu-filter-fields-example'
 ---
 ::
 
+### With full content width
+
+You can expand the content to the full width of its items by using the `ui.content` key.
+
+::component-example
+---
+name: 'input-menu-content-width-example'
+collapse: true
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    inputMenu: {
+      slots: {
+        content: 'min-w-fit'
+      }
+    }
+  }
+})
+```
+::
+
 ### As a CountryPicker
 
 This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
diff --git a/docs/content/3.components/select-menu.md b/docs/content/3.components/select-menu.md
index f68aad1e..9baefc36 100644
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -790,6 +790,33 @@ name: 'select-menu-filter-fields-example'
 ---
 ::
 
+### With full content width
+
+You can expand the content to the full width of its items by using the `ui.content` key.
+
+::component-example
+---
+name: 'select-menu-content-width-example'
+collapse: true
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    selectMenu: {
+      slots: {
+        content: 'min-w-fit'
+      }
+    }
+  }
+})
+```
+::
+
 ### As a CountryPicker
 
 This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
@@ -801,6 +828,8 @@ name: 'select-menu-countries-example'
 ---
 ::
 
+
+
 ## API
 
 ### Props
diff --git a/docs/content/3.components/select.md b/docs/content/3.components/select.md
index d7e59ffc..43016b4d 100644
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -695,6 +695,33 @@ collapse: true
 ---
 ::
 
+### With full content width
+
+You can expand the content to the full width of its items by using the `ui.content` key.
+
+::component-example
+---
+name: 'select-content-width-example'
+collapse: true
+---
+::
+
+::tip
+You can also change the content width globally in your `app.config.ts`:
+
+```
+export default defineAppConfig({
+  ui: {
+    select: {
+      slots: {
+        content: 'min-w-fit'
+      }
+    }
+  }
+})
+```
+::
+
 ## API
 
 ### Props