feat(InputMenu): new component (#1095)

docs/components/content/examples/FormExampleElements.vue

@@ -10,6 +10,7 @@ const options = [
 
 const state = reactive({
   input: undefined,
+  inputMenu: undefined,
   textarea: undefined,
   select: undefined,
   selectMenu: undefined,
@@ -23,6 +24,9 @@ const state = reactive({
 
 const schema = z.object({
   input: z.string().min(10),
+  inputMenu: z.any().refine(option => option?.value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   textarea: z.string().min(10),
   select: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
@@ -61,6 +65,10 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
       <UInput v-model="state.input" />
     </UFormGroup>
 
+    <UFormGroup name="inputMenu" label="Input Menu">
+      <UInputMenu v-model="state.inputMenu" :options="options" />
+    </UFormGroup>
+
     <UFormGroup name="textarea" label="Textarea">
       <UTextarea v-model="state.textarea" />
     </UFormGroup>

docs/components/content/examples/InputMenuExampleBasic.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" />
+</template>

docs/components/content/examples/InputMenuExampleEmptySlot.vue

@@ -0,0 +1,13 @@
+<script setup>
+const people = []
+
+const selected = ref()
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people">
+    <template #empty>
+      No people
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleObjects.vue

@@ -0,0 +1,36 @@
+<script setup>
+const people = [{
+  id: 'benjamincanac',
+  label: 'benjamincanac',
+  href: 'https://github.com/benjamincanac',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+}, {
+  id: 'Atinux',
+  label: 'Atinux',
+  href: 'https://github.com/Atinux',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
+}, {
+  id: 'smarroufin',
+  label: 'smarroufin',
+  href: 'https://github.com/smarroufin',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
+}, {
+  id: 'nobody',
+  label: 'Nobody',
+  icon: 'i-heroicons-user-circle'
+}]
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people">
+    <template #leading>
+      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue

@@ -0,0 +1,26 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Wade Cooper'
+}, {
+  id: 2,
+  name: 'Arlene Mccoy'
+}, {
+  id: 3,
+  name: 'Devon Webb'
+}, {
+  id: 4,
+  name: 'Tom Cook'
+}]
+
+const selected = ref(people[0].name)
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    :options="people"
+    value-attribute="name"
+    option-attribute="name"
+  />
+</template>

docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue

@@ -0,0 +1,13 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" searchable>
+    <template #option-empty="{ query }">
+      <q>{{ query }}</q> not found
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExampleOptionSlot.vue

@@ -0,0 +1,25 @@
+<script setup>
+const people = [
+  { name: 'Wade Cooper', online: true },
+  { name: 'Arlene Mccoy', online: false },
+  { name: 'Devon Webb', online: false },
+  { name: 'Tom Cook', online: true },
+  { name: 'Tanya Fox', online: false },
+  { name: 'Hellen Schmidt', online: true },
+  { name: 'Caroline Schultz', online: true },
+  { name: 'Mason Heaney', online: false },
+  { name: 'Claudie Smitham', online: true },
+  { name: 'Emil Schaefer', online: false }
+]
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" option-attribute="name">
+    <template #option="{ option: person }">
+      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
+      <span class="truncate">{{ person.name }}</span>
+    </template>
+  </UInputMenu>
+</template>

docs/components/content/examples/InputMenuExamplePopperArrow.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" :popper="{ arrow: true }" />
+</template>

docs/components/content/examples/InputMenuExamplePopperOffset.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" :popper="{ offsetDistance: 0 }" />
+</template>

docs/components/content/examples/InputMenuExamplePopperPlacement.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :options="people" :popper="{ placement: 'right-start' }" />
+</template>

docs/components/content/examples/InputMenuExampleSearchAttributes.vue

@@ -0,0 +1,28 @@
+<script setup>
+const options = [
+  { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
+  { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
+  { id: 3, name: 'Devon Webb', colors: ['green', 'blue'] },
+  { id: 4, name: 'Tom Cook', colors: ['blue', 'red'] },
+  { id: 5, name: 'Tanya Fox', colors: ['green', 'red'] },
+  { id: 5, name: 'Hellen Schmidt', colors: ['green', 'yellow'] }
+]
+
+const selected = ref(options[1])
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    :options="options"
+    placeholder="Select a person"
+    by="id"
+    option-attribute="name"
+    :search-attributes="['name', 'colors']"
+  >
+    <template #option="{ option: person }">
+      <span v-for="color in person.colors" :key="color.id" class="h-2 w-2 rounded-full" :class="`bg-${color}-500 dark:bg-${color}-400`" />
+      <span class="truncate">{{ person.name }}</span>
+    </template>
+  </UInputMenu>
+</template>

docs/content/3.forms/1.input.md

@@ -172,13 +172,13 @@ Use the `#leading` slot to set the content of the leading icon.
 ::component-card
 ---
 slots:
-  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
+  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mx-0.5" />
 baseProps:
   placeholder: 'Search...'
 ---
 
 #leading
-  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mx-0.5"}
 ::
 
 ### `trailing`