arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 19:00:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(InputMenu): handle multiple

Browse Source 
Resolves #91
This commit is contained in:
Benjamin Canac
2024-05-14 12:37:51 +02:00
parent 27ffb8d8ab
commit fe3ab652b4
16 changed files with 324 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
playground/pages/input-menu.vue
View File

@@ -9,6 +9,7 @@ const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
const selectedItems = ref([fruits[0], vegetables[0]])
const statuses = [{
label: 'Backlog',
@@ -48,11 +49,11 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
<UInputMenu :items="items" placeholder="Search..." variant="none" />
<UInputMenu :items="items" placeholder="Disabled" disabled />
<UInputMenu :items="items" placeholder="Required" required />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
<UInputMenu :items="items" loading placeholder="Search..." />
<UInputMenu :items="items" loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<UInputMenu :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid">
<template #leading="{ modelValue }">
<UIcon v-if="modelValue" :name="modelValue.icon" class="size-5" />
<UIcon v-if="modelValue?.icon" :name="modelValue.icon" class="size-5" />
</template>
</UInputMenu>
<UInputMenu
@@ -101,5 +102,18 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
class="w-60"
/>
</div>
<div class="flex items-center gap-4">
<UInputMenu
v-for="size in sizes"
:key="size"
:items="items"
:model-value="[fruits[0]]"
multiple
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="(size as any)"
class="w-60"
/>
</div>
</div>
</template>

3
playground/pages/input.vue
View File

@@ -18,9 +18,8 @@ const sizes = Object.keys(theme.variants.size)
<UInput icon="i-heroicons-calendar" type="date" :model-value="new Date().toISOString().substring(0, 10)" />
<UInput icon="i-heroicons-lock-closed" type="password" model-value="password" />
<UInput loading placeholder="Search..." />
<UInput loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<UInput loading trailing placeholder="Search..." />
<UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<UInput loading icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-down" placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
<UInput

4
playground/pages/select-menu.vue
View File

@@ -9,6 +9,7 @@ const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
const selectedItems = ref([fruits[0], vegetables[0]])
const statuses = [{
label: 'Backlog',
@@ -53,9 +54,8 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
<USelectMenu :items="items" placeholder="Search..." variant="none" />
<USelectMenu :items="items" placeholder="Disabled" disabled />
<USelectMenu :items="items" placeholder="Required" required />
<USelectMenu :items="items" placeholder="Multiple" multiple />
<USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
<USelectMenu :items="items" loading placeholder="Search..." />
<USelectMenu :items="items" loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<USelectMenu :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid">
<template #leading="{ modelValue }">
<UIcon v-if="modelValue" :name="modelValue.icon" class="size-5" />

1
playground/pages/select.vue
View File

@@ -49,7 +49,6 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
<USelect :items="items" placeholder="Disabled" disabled />
<USelect :items="items" placeholder="Required" required />
<USelect :items="items" loading placeholder="Search..." />
<USelect :items="items" loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
<USelect :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid" />
<USelect :items="users || []" :loading="pending" icon="i-heroicons-user" placeholder="Search users..." />
</div>