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

docs: improve command palettes

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-11 15:24:26 +02:00
parent 82adedf764
commit 3ded73194d
5 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/components/content/examples/CommandPaletteExampleBasic.vue
View File

@@ -20,7 +20,8 @@ const selected = ref([people[3]])
v-model="selected" v-model="selected"
multiple multiple
nullable nullable
:autoselect="false"
:groups="[{ key: 'people', commands: people }]" :groups="[{ key: 'people', commands: people }]"
:fuse="{ resultLimit: 6 }" :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
/> />
</template> </template>

2
docs/components/content/examples/CommandPaletteExampleGroups.vue
View File

@@ -42,5 +42,5 @@ function onSelect (option) {
</script> </script>
<template> <template>
<UCommandPalette ref="commandPaletteRef" :groups="groups" @update:model-value="onSelect" /> <UCommandPalette ref="commandPaletteRef" :groups="groups" :autoselect="false" @update:model-value="onSelect" />
</template> </template>

11
docs/components/content/themes/CommandPaletteThemeAlgolia.vue
View File

@@ -24,8 +24,14 @@ const ui = {
wrapper: 'flex flex-col flex-1 min-h-0 bg-gray-50 dark:bg-gray-800', wrapper: 'flex flex-col flex-1 min-h-0 bg-gray-50 dark:bg-gray-800',
input: { input: {
wrapper: 'relative flex items-center mx-3 py-3', wrapper: 'relative flex items-center mx-3 py-3',
base: 'w-full rounded border-2 border-primary-500 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-0 h-14 text-lg bg-white dark:bg-gray-900', base: 'w-full rounded border-2 border-primary-500 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-0 bg-white dark:bg-gray-900',
icon: 'pointer-events-none absolute left-3 h-6 w-6 text-primary-500 dark:text-primary-400' padding: 'px-4',
height: 'h-14',
size: 'text-lg',
icon: {
base: 'pointer-events-none absolute left-3 text-primary-500 dark:text-primary-400',
size: 'h-6 w-6'
}
}, },
group: { group: {
wrapper: 'p-3 relative', wrapper: 'p-3 relative',
@@ -60,6 +66,7 @@ const ui = {
:ui="ui" :ui="ui"
:close="close" :close="close"
:empty="empty" :empty="empty"
:autoselect="false"
command-attribute="title" command-attribute="title"
:fuse="{ :fuse="{
fuseOptions: { keys: ['title', 'category'] }, fuseOptions: { keys: ['title', 'category'] },

9
docs/components/content/themes/CommandPaletteThemeRaycast.vue
View File

@@ -53,5 +53,12 @@ const ui = {
</script> </script>
<template> <template>
<UCommandPalette ref="commandPaletteRef" :groups="groups" icon="" :ui="ui" placeholder="Search for apps and commands" /> <UCommandPalette
ref="commandPaletteRef"
:groups="groups"
icon=""
:ui="ui"
:autoselect="false"
placeholder="Search for apps and commands"
/>
</template> </template>

2
docs/content/4.navigation/2.command-palette.md
View File

@@ -42,7 +42,7 @@ const selected = ref([people[3]])
multiple multiple
nullable nullable
:groups="[{ key: 'people', commands: people }]" :groups="[{ key: 'people', commands: people }]"
:fuse="{ resultLimit: 6 }" :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
/> />
</template> </template>
``` ```