feat(WheelPicker): add WheelPicker and WheelPickerGroup components

docs/app/components/content/examples/wheel-picker/WheelPickerCountriesExample.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { WheelPickerItem } from '@nuxt/ui'
+
+const items = ref([
+  { label: 'France', value: 'fr', icon: 'i-circle-flags-fr' },
+  { label: 'Germany', value: 'de', icon: 'i-circle-flags-de' },
+  { label: 'Italy', value: 'it', icon: 'i-circle-flags-it' },
+  { label: 'Japan', value: 'jp', icon: 'i-circle-flags-jp' },
+  { label: 'Spain', value: 'es', icon: 'i-circle-flags-es' },
+  { label: 'United Kingdom', value: 'gb', icon: 'i-circle-flags-gb' },
+  { label: 'United States', value: 'us', icon: 'i-circle-flags-us' }
+] satisfies WheelPickerItem[])
+
+const value = ref('jp')
+</script>
+
+<template>
+  <UWheelPicker v-model="value" :items="items" class="w-56" aria-label="Country" />
+</template>

docs/app/components/content/examples/wheel-picker/WheelPickerDateExample.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const months = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+]
+
+const years = Array.from({ length: 60 }, (_, i) => 1980 + i)
+
+const month = ref('June')
+const day = ref(15)
+const year = ref(2000)
+
+// Derive the valid days from the selected month and year (handles leap years).
+const daysInMonth = computed(() => new Date(year.value, months.indexOf(month.value) + 1, 0).getDate())
+const days = computed(() => Array.from({ length: daysInMonth.value }, (_, i) => i + 1))
+
+// Clamp the day when switching to a shorter month.
+watch(daysInMonth, (max) => {
+  if (day.value > max) day.value = max
+})
+
+const date = computed(() => `${month.value} ${day.value}, ${year.value}`)
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <UWheelPickerGroup>
+      <UWheelPicker v-model="month" :items="months" class="w-32" aria-label="Month" />
+      <UWheelPicker v-model="day" :items="days" class="w-16" aria-label="Day" loop />
+      <UWheelPicker v-model="year" :items="years" class="w-20" aria-label="Year" />
+    </UWheelPickerGroup>
+
+    <p class="text-sm text-muted">
+      {{ date }}
+    </p>
+  </div>
+</template>

docs/app/components/content/examples/wheel-picker/WheelPickerFormExample.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const schema = z.object({
+  size: z.enum(['S', 'M', 'L', 'XL'], { message: 'Select a valid size' })
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  size: undefined
+})
+
+const toast = useToast()
+
+function onSubmit(event: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Success', description: `Size: ${event.data.size}`, color: 'success' })
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="flex flex-col items-center gap-4" @submit="onSubmit">
+    <UFormField name="size" label="Size">
+      <UWheelPicker v-model="state.size" :items="['S', 'M', 'L', 'XL']" class="w-24" />
+    </UFormField>
+
+    <UButton type="submit" label="Submit" />
+  </UForm>
+</template>

docs/app/components/content/examples/wheel-picker/WheelPickerSlotExample.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WheelPickerItem } from '@nuxt/ui'
+
+const items = ref([
+  { label: 'Free', value: 'free', price: '$0', icon: 'i-lucide-sprout' },
+  { label: 'Starter', value: 'starter', price: '$9', icon: 'i-lucide-rocket' },
+  { label: 'Pro', value: 'pro', price: '$29', icon: 'i-lucide-crown' },
+  { label: 'Enterprise', value: 'enterprise', price: '$99', icon: 'i-lucide-building-2' }
+] satisfies WheelPickerItem[])
+
+const value = ref('pro')
+
+const prices = computed(() => Object.fromEntries(items.value.map(item => [item.value, item.price])))
+</script>
+
+<template>
+  <UWheelPicker v-model="value" :items="items" :item-height="44" class="w-64" aria-label="Plan">
+    <template #item="{ item, active }">
+      <UIcon v-if="item.icon" :name="item.icon" class="size-5 shrink-0" />
+      <span class="flex-1 text-start truncate">{{ item.label }}</span>
+      <span class="text-sm" :class="active ? 'text-primary' : 'text-dimmed'">{{ prices[String(item.value)] }}</span>
+    </template>
+  </UWheelPicker>
+</template>

docs/app/components/content/examples/wheel-picker/WheelPickerTimeExample.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const hours = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'))
+const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
+const periods = ['AM', 'PM']
+
+const hour = ref('09')
+const minute = ref('30')
+const period = ref('AM')
+
+const time = computed(() => `${hour.value}:${minute.value} ${period.value}`)
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <UWheelPickerGroup color="primary">
+      <UWheelPicker v-model="hour" :items="hours" class="w-16" aria-label="Hour" loop />
+      <UWheelPicker v-model="minute" :items="minutes" class="w-16" aria-label="Minute" loop />
+      <UWheelPicker v-model="period" :items="periods" class="w-16" aria-label="Period" />
+    </UWheelPickerGroup>
+
+    <p class="text-sm text-muted">
+      {{ time }}
+    </p>
+  </div>
+</template>