Usage
Use the v-model directive to control the value of the InputMenu or the default-value prop to set the initial value when you do not need to control its state.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" :items="items" />
</template>
Input to take advantage of Akar's ACombobox component that offers autocomplete capabilities.SelectMenu but it's using an Input instead of a Select.Items
Use the items prop as an array of strings, numbers or booleans:
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" :items="items" />
</template>
You can also pass an array of objects with the following properties:
label?: stringtype?: "label" | "separator" | "item"icon?: stringavatar?: AvatarPropschip?: ChipPropsdisabled?: booleanonSelect?: (e: Event) => voidclass?: anypohon?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }
<script setup lang="ts">
import type { InputMenuItem } from 'pohon-ui'
const items = ref<InputMenuItem[]>([
{
label: 'Backlog'
},
{
label: 'Todo'
},
{
label: 'In Progress'
},
{
label: 'Done'
}
])
const value = ref({
label: 'Todo'
})
</script>
<template>
<PInputMenu v-model="value" :items="items" />
</template>
You can also pass an array of arrays to the items prop to display separated groups of items.
<script setup lang="ts">
const items = ref([
['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple'],
['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
])
const value = ref('Apple')
</script>
<template>
<PInputMenu v-model="value" :items="items" />
</template>
Value Key
You can choose to bind a single property of the object rather than the whole object by using the value-key prop. Defaults to undefined.
<script setup lang="ts">
import type { InputMenuItem } from 'pohon-ui'
const items = ref<InputMenuItem[]>([
{
label: 'Backlog',
id: 'backlog'
},
{
label: 'Todo',
id: 'todo'
},
{
label: 'In Progress',
id: 'in_progress'
},
{
label: 'Done',
id: 'done'
}
])
const value = ref('todo')
</script>
<template>
<PInputMenu v-model="value" value-key="id" :items="items" />
</template>
Multiple
Use the multiple prop to allow multiple selections, the selected items will be displayed as tags.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref(['Backlog', 'Todo'])
</script>
<template>
<PInputMenu v-model="value" multiple :items="items" />
</template>
default-value prop or the v-model directive.Delete Icon
With multiple, use the delete-icon prop to customize the delete Icon in the tags. Defaults to i-lucide:x.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref(['Backlog', 'Todo'])
</script>
<template>
<PInputMenu v-model="value" multiple delete-icon="i-lucide:trash" :items="items" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>
<template>
<PInputMenu placeholder="Select status" :items="items" />
</template>
Content
Use the content prop to control how the InputMenu content is rendered, like its align or side for example.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu
v-model="value"
:content="{
align: 'center',
side: 'bottom',
sideOffset: 8
}"
:items="items"
/>
</template>
Arrow
Use the arrow prop to display an arrow on the InputMenu.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" arrow :items="items" />
</template>
Color
Use the color prop to change the ring color when the InputMenu is focused.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" color="neutral" highlight :items="items" />
</template>
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Variant
Use the variant prop to change the variant of the InputMenu.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" color="neutral" variant="subtle" :items="items" />
</template>
Size
Use the size prop to change the size of the InputMenu.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" size="xl" :items="items" />
</template>
Icon
Use the icon prop to show an Icon inside the InputMenu.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" icon="i-lucide:search" size="md" :items="items" />
</template>
Trailing Icon
Use the trailing-icon prop to customize the trailing Icon. Defaults to i-lucide:chevron-down.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" trailing-icon="i-lucide:arrow-down" size="md" :items="items" />
</template>
Selected Icon
Use the selected-icon prop to customize the icon when an item is selected. Defaults to i-lucide:check.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" selected-icon="i-lucide:flame" size="md" :items="items" />
</template>
Clear
Use the clear-icon prop to customize the clear button Icon. Defaults to i-lucide-x.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" clear clear-icon="i-lucide-trash" :items="items" />
</template>
Clear Icon
Use the clear-icon prop to customize the clear button Icon. Defaults to i-lucide-x.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" clear clear-icon="i-lucide-trash" :items="items" />
</template>
Avatar
Use the avatar prop to show an Avatar inside the InputMenu.
<script setup lang="ts">
const items = ref(['Nuxt', 'NuxtHub', 'NuxtLabs', 'Nuxt Modules', 'Nuxt Community'])
const value = ref('Nuxt')
</script>
<template>
<PInputMenu
v-model="value"
:avatar="{
src: 'https://github.com/nuxt.png'
}"
:items="items"
/>
</template>
Loading
Use the loading prop to show a loading icon on the InputMenu.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" loading :items="items" />
</template>
Loading Icon
Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>
<template>
<PInputMenu v-model="value" loading loading-icon="i-lucide:loader" :items="items" />
</template>
Disabled
Use the disabled prop to disable the InputMenu.
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>
<template>
<PInputMenu disabled placeholder="Select status" :items="items" />
</template>
Examples
With items type
You can use the type property with separator to display a separator between items or label to display a label.
<script setup lang="ts">
import type { InputMenuItem } from 'pohon-ui'
const items = ref<InputMenuItem[]>([
{
type: 'label',
label: 'Fruits'
},
'Apple',
'Banana',
'Blueberry',
'Grapes',
'Pineapple',
{
type: 'separator'
},
{
type: 'label',
label: 'Vegetables'
},
'Aubergine',
'Broccoli',
'Carrot',
'Courgette',
'Leek'
])
const value = ref('Apple')
</script>
<template>
<PInputMenu v-model="value" :items="items" />
</template>
With icon in items
You can use the icon property to display an Icon inside the items.
<script setup lang="ts">
import type { PInputMenuItem } from 'pohon-ui';
import { ref } from 'vue';
const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-lucide:circle-help',
},
{
label: 'Todo',
value: 'todo',
icon: 'i-lucide:circle-plus',
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-lucide:circle-arrow-up',
},
{
label: 'Done',
value: 'done',
icon: 'i-lucide:circle-check',
},
] satisfies Array<PInputMenuItem>);
const value = ref(items.value[0]);
</script>
<template>
<PInputMenu
v-model="value"
:icon="value?.icon"
:items="items"
/>
</template>
#leading slot to display the selected icon.With avatar in items
You can use the avatar property to display an Avatar inside the items.
<script setup lang="ts">
import type { PInputMenuItem } from 'pohon-ui';
import { ref } from 'vue';
const items = ref([
{
label: 'praburangki',
value: 'praburangki',
avatar: {
src: 'https://github.com/praburangki.png',
alt: 'praburangki',
},
},
{
label: 'wahyu-ivan',
value: 'wahyu-ivan',
avatar: {
src: 'https://github.com/wahyu-ivan.png',
alt: 'wahyu-ivan',
},
},
{
label: 'GunawanAhmad',
value: 'GunawanAhmad',
avatar: {
src: 'https://github.com/GunawanAhmad.png',
alt: 'GunawanAhmad',
},
},
{
label: 'sandros94',
value: 'sandros94',
avatar: {
src: 'https://github.com/sandros94.png',
alt: 'sandros94',
},
},
] satisfies Array<PInputMenuItem>);
const value = ref(items.value[0]);
</script>
<template>
<PInputMenu
v-model="value"
:avatar="value?.avatar"
:items="items"
/>
</template>
#leading slot to display the selected avatar.With chip in items
You can use the chip property to display a Chip inside the items.
<script setup lang="ts">
import type { PChipProps, PInputMenuItem } from 'pohon-ui';
import { ref } from 'vue';
const items = ref([
{
label: 'bug',
value: 'bug',
chip: {
color: 'error',
},
},
{
label: 'feature',
value: 'feature',
chip: {
color: 'success',
},
},
{
label: 'enhancement',
value: 'enhancement',
chip: {
color: 'info',
},
},
] satisfies Array<PInputMenuItem>);
const value = ref(items.value[0]);
</script>
<template>
<PInputMenu
v-model="value"
:items="items"
>
<template #leading="{ modelValue, pohon }">
<PChip
v-if="modelValue"
v-bind="modelValue.chip"
inset
standalone
:size="(pohon.itemLeadingChipSize() as PChipProps['size'])"
:class="pohon.itemLeadingChip()"
/>
</template>
</PInputMenu>
</template>
#leading slot is used to display the selected chip.Control open state
You can control the open state by using the default-open prop or the v-model:open directive.
<script setup lang="ts">
import { defineShortcuts } from '#imports';
import { ref } from 'vue';
const open = ref(false);
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done']);
const value = ref('Backlog');
defineShortcuts({
o: () => {
open.value = !open.value;
},
});
</script>
<template>
<PInputMenu
v-model="value"
v-model:open="open"
:items="items"
/>
</template>
defineShortcuts, you can toggle the InputMenu by pressing O.Control open state on focus
You can use the open-on-focus or open-on-click props to open the menu when the input is focused or clicked.
<script setup lang="ts">
import { ref } from 'vue';
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done']);
const selected = ref('Backlog');
</script>
<template>
<PInputMenu
v-model="selected"
:items="items"
open-on-focus
/>
</template>
Control search term
Use the v-model:search-term directive to control the search term.
<script setup lang="ts">
import { ref } from 'vue';
const searchTerm = ref('D');
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done']);
const value = ref('Backlog');
</script>
<template>
<PInputMenu
v-model="value"
v-model:search-term="searchTerm"
:items="items"
/>
</template>
With rotating icon
Here is an example with a rotating icon that indicates the open state of the InputMenu.
<script setup lang="ts">
import { ref } from 'vue';
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done']);
const value = ref('Backlog');
</script>
<template>
<PInputMenu
v-model="value"
:items="items"
:pohon="{
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform-280',
}"
/>
</template>
With create item
Use the create-item prop to enable users to add custom values that aren't in the predefined options.
<script setup lang="ts">
import { ref } from 'vue';
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done']);
const value = ref('Backlog');
function onCreate(item: string) {
items.value.push(item);
value.value = item;
}
</script>
<template>
<PInputMenu
v-model="value"
create-item
:items="items"
class="w-48"
@create="onCreate"
/>
</template>
always to show it even when similar values exist.@create event to handle the creation of the item. You will receive the event and the item as arguments.With fetched items
You can fetch items from an API and use them in the InputMenu.
<script setup lang="ts">
import type { PAvatarProps } from 'pohon-ui';
import { useFetch } from '#app';
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users',
transform: (data: Array<{ id: number; name: string }>) => {
return data?.map((user) => ({
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
}));
},
lazy: true,
});
</script>
<template>
<PInputMenu
:items="users"
:loading="status === 'pending'"
icon="i-lucide:user"
placeholder="Select user"
>
<template #leading="{ modelValue, pohon }">
<PAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="(pohon.leadingAvatarSize() as PAvatarProps['size'])"
:class="pohon.leadingAvatar()"
/>
</template>
</PInputMenu>
</template>
With ignore filter
Set the ignore-filter prop to true to disable the internal search and use your own search logic.
<script setup lang="ts">
import type { PAvatarProps } from 'pohon-ui';
import { useFetch } from '#app';
import { refDebounced } from '@vueuse/core';
import { ref } from 'vue';
const searchTerm = ref('');
const searchTermDebounced = refDebounced(searchTerm, 200);
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
params: { q: searchTermDebounced },
transform: (data: Array<{ id: number; name: string }>) => {
return data?.map((user) => ({
label: user.name,
value: String(user.id),
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
}));
},
lazy: true,
});
</script>
<template>
<PInputMenu
v-model:search-term="searchTerm"
:items="users"
:loading="status === 'pending'"
ignore-filter
icon="i-lucide:user"
placeholder="Select user"
>
<template #leading="{ modelValue, pohon }">
<PAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="(pohon.leadingAvatarSize() as PAvatarProps['size'])"
:class="pohon.leadingAvatar()"
/>
</template>
</PInputMenu>
</template>
refDebounced to debounce the API calls.With filter fields
Use the filter-fields prop with an array of fields to filter on. Defaults to [labelKey].
<script setup lang="ts">
import type { PAvatarProps } from 'pohon-ui';
import { useFetch } from '#app';
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users-email',
transform: (data: Array<{ 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>
<PInputMenu
:items="users"
:loading="status === 'pending'"
:filter-fields="['label', 'email']"
icon="i-lucide:user"
placeholder="Select user"
class="w-80"
>
<template #leading="{ modelValue, pohon }">
<PAvatar
v-if="modelValue"
v-bind="modelValue.avatar"
:size="(pohon.leadingAvatarSize() as PAvatarProps['size'])"
:class="pohon.leadingAvatar()"
/>
</template>
<template #item-label="{ item }">
{{ item.label }}
<span class="color-text-muted">
{{ item.email }}
</span>
</template>
</PInputMenu>
</template>
With virtualization
Use the virtualize prop to enable virtualization for large lists as a boolean or an object with options like { estimateSize: 32, overscan: 12 }.
When enabled, all groups are flattened into a single list due to a limitation of Akar.
<script setup lang="ts">
import type { PInputMenuItem } from 'pohon-ui'
const items: Array<PInputMenuItem> = Array(1000)
.fill(0)
.map((_, i) => ({
label: `item-${i}`,
value: i
}))
</script>
<template>
<PInputMenu virtualize :items="items" class="w-48" />
</template>
With infinite scroll
You can use the useInfiniteScroll composable to load more data as the user scrolls.
<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core'
type User = {
firstName: string
}
type UserResponse = {
users: Array<User>
total: number
skip: number
limit: number
}
const skip = ref(0)
const { data, status, execute } = await useFetch(
'https://dummyjson.com/users?limit=10&select=firstName',
{
key: 'select-menu-users-infinite-scroll',
params: { skip },
transform: (data?: UserResponse) => {
return data?.users.map((user) => user.firstName)
},
lazy: true,
immediate: false
}
)
const users = ref<Array<string>>([])
watch(data, () => {
users.value = [...users.value, ...(data.value || [])]
})
execute()
const inputMenu = useTemplateRef('inputMenu')
onMounted(() => {
useInfiniteScroll(
() => inputMenu.value?.viewportRef,
() => {
skip.value += 10
},
{
canLoadMore: () => {
return status.value !== 'pending'
}
}
)
})
</script>
<template>
<PInputMenu ref="inputMenu" placeholder="Select user" :items="users" />
</template>
With full content width
You can expand the content to the full width of its items by adding the min-w-fit class on the pohon.content slot.
<script setup lang="ts">
import { useFetch } from '#app';
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'typicode-users-email',
transform: (data: Array<{ 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>
<PInputMenu
:items="users"
icon="i-lucide:user"
placeholder="Select user"
:pohon="{ content: 'min-w-fit' }"
>
<template #item-label="{ item }">
{{ item.label }}
<span class="color-text-muted">
{{ item.email }}
</span>
</template>
</PInputMenu>
</template>
app.config.ts:export default defineAppConfig({
pohon: {
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.
<script setup lang="ts">
import { useLazyFetch } from '#app';
const { data: countries, status, execute } = await useLazyFetch<Array<{
name: string;
code: string;
emoji: string;
}>>('/api/countries.json', {
immediate: false,
});
function onOpen() {
if (!countries.value?.length) {
execute();
}
}
</script>
<template>
<PInputMenu
:items="countries"
:loading="status === 'pending'"
label-key="name"
:search-input="{ icon: 'i-lucide:search' }"
placeholder="Select country"
class="w-48"
@update:open="onOpen"
>
<template #leading="{ modelValue, pohon }">
<span
v-if="modelValue"
class="text-center size-5"
>
{{ modelValue?.emoji }}
</span>
<PIcon
v-else
name="i-lucide:earth"
:class="pohon.leadingIcon()"
/>
</template>
<template #item-leading="{ item }">
<span class="text-center size-5">
{{ item.emoji }}
</span>
</template>
</PInputMenu>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
id | string | |
type | 'text' | "number" | "search" | "image" | "text" | "button" | "time" | "color" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "radio" | "range" | "reset" | "submit" | "tel" | "url" | "week" | string & {}
|
placeholder | stringThe placeholder text when the input is empty. | |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'outline' | "outline" | "soft" | "subtle" | "ghost" | "none" |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
autofocusDelay | 0 | number |
trailingIcon | appConfig.pohon.icons.chevronDown | string | objectThe icon displayed to open the menu. |
selectedIcon | appConfig.pohon.icons.check | string | objectThe icon displayed when an item is selected. |
deleteIcon | appConfig.pohon.icons.close | string | objectThe icon displayed to delete a tag.
Works only when |
clear | false | C & false | C & true | C & Partial<Omit<PButtonProps, PLinkPropsKeys>>Display a clear button to reset the model value. Can be an object to pass additional props to the Button.
|
clearIcon | appConfig.pohon.icons.close | string | objectThe icon displayed in the clear button. |
content | { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' } | Omit<AAutocompleteContentProps, "asChild" | "as" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>The content of the menu.
|
arrow | false | boolean | Omit<AAutocompleteArrowProps, "asChild" | "as">Display an arrow alongside the menu. |
portal | true | string | false | true | HTMLElementRender the menu in a portal.
|
virtualize | false | boolean | { overscan?: number; estimateSize?: number | ((index: number) => number); }Enable virtualization for large lists.
|
valueKey | undefined | VKWhen |
labelKey | 'label' | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>When
|
descriptionKey | 'description' | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>When
|
items | T | |
defaultValue | _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. | |
modelValue | _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>The controlled value of the InputMenu. Can be binded-with with | |
modelModifiers | Mod | |
multiple | MWhether multiple options can be selected or not. | |
createItem | false | boolean | "always" | { position?: "top" | "bottom"; when?: "always" | "empty"; }Determines if custom user input that does not exist in options can be added.
|
filterFields | [labelKey] | string[]Fields to filter items by. |
name | stringThe name of the field. Submitted with its owning form as part of a name/value pair. | |
by | string | (a: T, b: T): booleanUse this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. | |
icon | string | objectDisplay an icon based on the | |
avatar | PAvatarPropsDisplay an avatar on the left side.
| |
leadingIcon | string | objectDisplay an icon on the left side. | |
loadingIcon | appConfig.pohon.icons.loading | string | objectThe icon when the |
list | string | |
readonly | false | true | "true" | "false" | |
autocomplete | string & {} | "on" | "off"
| |
searchTerm | '' | string |
required | boolean | |
autofocus | boolean | |
highlight | booleanHighlight the ring color like a focus state. | |
ignoreFilter | false | booleanWhen |
disabled | booleanWhen | |
open | booleanThe controlled open state of the Combobox. Can be binded with | |
defaultOpen | booleanThe open state of the combobox when it is initially rendered. | |
resetSearchTermOnBlur | true | booleanWhether to reset the searchTerm when the Combobox input blurred |
resetSearchTermOnSelect | true | booleanWhether to reset the searchTerm when the Combobox value is selected |
resetModelValueOnClear | true | booleanWhen |
highlightOnHover | booleanWhen | |
openOnClick | `false` | booleanWhether to open the combobox when the input is clicked |
openOnFocus | `false` | booleanWhether to open the combobox when the input is focused |
leading | booleanWhen | |
trailing | booleanWhen | |
loading | booleanWhen | |
pohon | { root?: ClassValue; base?: ClassValue; leading?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailing?: ClassValue; trailingIcon?: ClassValue; trailingClear?: ClassValue; arrow?: ClassValue; content?: ClassValue; viewport?: ClassValue; group?: ClassValue; empty?: ClassValue; label?: ClassValue; separator?: ClassValue; item?: ClassValue; itemLeadingIcon?: ClassValue; itemLeadingAvatar?: ClassValue; itemLeadingAvatarSize?: ClassValue; itemLeadingChip?: ClassValue; itemLeadingChipSize?: ClassValue; itemTrailing?: ClassValue; itemTrailingIcon?: ClassValue; itemWrapper?: ClassValue; itemLabel?: ClassValue; itemDescription?: ClassValue; tagsItem?: ClassValue; tagsItemText?: ClassValue; tagsItemDelete?: ClassValue; tagsItemDeleteIcon?: ClassValue; tagsInput?: ClassValue; } |
Slots
| Slot | Type |
|---|---|
leading | { modelValue?: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>; open: boolean; pohon: object; } |
trailing | { modelValue?: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>; open: boolean; pohon: object; } |
empty | { searchTerm?: string; } |
item | { item: NestedItem<T>; index: number; pohon: object; } |
item-leading | { item: NestedItem<T>; index: number; pohon: object; } |
item-label | { item: NestedItem<T>; index: number; } |
item-description | { item: NestedItem<T>; index: number; } |
item-trailing | { item: NestedItem<T>; index: number; pohon: object; } |
tags-item-text | { item: NestedItem<T>; index: number; } |
tags-item-delete | { item: NestedItem<T>; index: number; pohon: object; } |
content-top | object |
content-bottom | object |
create-item-label | { item: string; } |
Emits
| Event | Type |
|---|---|
update:open | [value: boolean] |
change | [event: Event] |
blur | [event: FocusEvent] |
focus | [event: FocusEvent] |
create | [item: string] |
clear | [] |
highlight | [payload: { ref: HTMLElement; value: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>; }] |
removeTag | [item: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>] |
update:modelValue | [value: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>] |
update:searchTerm | [value: string] |
Expose
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
inputRef | Ref<HTMLInputElement | null> |
viewportRef | Ref<HTMLDivElement | null> |
Theme
Below is the theme configuration skeleton for the PInputMenu. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
inputMenu: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
trailingClear: '',
arrow: '',
content: '',
viewport: '',
group: '',
empty: '',
label: '',
separator: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatar: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailing: '',
itemTrailingIcon: '',
itemWrapper: '',
itemLabel: '',
itemDescription: '',
tagsItem: '',
tagsItemText: '',
tagsItemDelete: '',
tagsItemDeleteIcon: '',
tagsInput: ''
},
variants: {
fieldGroup: {
horizontal: {
root: '',
base: ''
},
vertical: {
root: '',
base: ''
}
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
},
virtualize: {
true: {
viewport: ''
},
false: {
viewport: ''
}
},
multiple: {
true: {
root: ''
},
false: {
base: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
inputMenu: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
trailingClear: '',
arrow: '',
content: '',
viewport: '',
group: '',
empty: '',
label: '',
separator: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatar: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailing: '',
itemTrailingIcon: '',
itemWrapper: '',
itemLabel: '',
itemDescription: '',
tagsItem: '',
tagsItemText: '',
tagsItemDelete: '',
tagsItemDeleteIcon: '',
tagsInput: ''
},
variants: {
fieldGroup: {
horizontal: {
root: '',
base: ''
},
vertical: {
root: '',
base: ''
}
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
label: '',
item: '',
itemLeadingIcon: '',
itemLeadingAvatarSize: '',
itemLeadingChip: '',
itemLeadingChipSize: '',
itemTrailingIcon: '',
tagsItem: '',
tagsItemDeleteIcon: '',
empty: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
},
virtualize: {
true: {
viewport: ''
},
false: {
viewport: ''
}
},
multiple: {
true: {
root: ''
},
false: {
base: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.