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

chore(CommandPalette): improve customization options (#71)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sylvain Marroufin
2022-07-21 15:46:05 +02:00
committed by GitHub
parent 1ff9fd4f69
commit ce28b04187
4 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/pages/examples.vue
View File

@@ -176,7 +176,7 @@
</div>
<UCard body-class="">
<UCommandPalette v-model="form.persons" multiple :groups="[{ key: 'persons', commands: people }]" />
<UCommandPalette v-model="form.persons" multiple :groups="[{ key: 'persons', commands: people, customQuery, options: { fuseOptions: { useExtendedSearch: true, keys: ['name', 'static'] } } }]" command-attribute="name" />
</UCard>
</div>
@@ -208,7 +208,7 @@
</UFormGroup>
<UFormGroup label="People" name="people" required>
<USelectCustom v-model="form.person" name="people" :options="people" text-attribute="label" searchable />
<USelectCustom v-model="form.person" name="people" :options="people" text-attribute="name" searchable />
</UFormGroup>
<UFormGroup label="Toggle" name="toggle">
@@ -251,11 +251,11 @@
const isModalOpen = ref(false)
const people = [
{ id: 1, label: 'Durward Reynolds', disabled: false },
{ id: 2, label: 'Kenton Towne', disabled: false },
{ id: 3, label: 'Therese Wunsch', disabled: false },
{ id: 4, label: 'Benedict Kessler', disabled: true },
{ id: 5, label: 'Katelyn Rohan', disabled: false }
{ id: 1, name: 'Durward Reynolds', disabled: false },
{ id: 2, name: 'Kenton Towne', disabled: false },
{ id: 3, name: 'Therese Wunsch', disabled: false },
{ id: 4, name: 'Benedict Kessler', disabled: true },
{ id: 5, name: 'Katelyn Rohan', disabled: false, static: '1' }
]
const form = reactive({
email: '',
@@ -271,6 +271,8 @@ const form = reactive({
const { $toast } = useNuxtApp()
const customQuery = query => computed(() => query.value ? `${query.value} | =1` : '')
function toggleModalIsOpen () {
isModalOpen.value = !isModalOpen.value
}