mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-26 18:00:43 +01:00
feat: rewrite to use app config and rework docs (#143)
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
GitHub
@@ -7,24 +7,22 @@
|
||||
:nullable="nullable"
|
||||
@update:model-value="onSelect"
|
||||
>
|
||||
<div :class="$ui.commandPalette.wrapper">
|
||||
<div v-show="searchable" class="relative flex items-center">
|
||||
<Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
|
||||
<div :class="ui.wrapper">
|
||||
<div v-if="searchable" :class="ui.input.wrapper">
|
||||
<Icon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
|
||||
<ComboboxInput
|
||||
ref="comboboxInput"
|
||||
:value="query"
|
||||
:class="$ui.commandPalette.input.base"
|
||||
:placeholder="inputPlaceholder"
|
||||
:class="[ui.input.base, icon && ui.input.spacing]"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
@change="query = $event.target.value"
|
||||
/>
|
||||
|
||||
<Button
|
||||
v-if="inputCloseIcon"
|
||||
:icon="inputCloseIcon"
|
||||
:class="$ui.commandPalette.input.close.base"
|
||||
:size="$ui.commandPalette.input.close.size"
|
||||
:variant="$ui.commandPalette.input.close.variant"
|
||||
v-if="close"
|
||||
v-bind="close"
|
||||
:class="ui.input.close"
|
||||
aria-label="Close"
|
||||
@click="onClear"
|
||||
/>
|
||||
@@ -36,7 +34,7 @@
|
||||
hold
|
||||
as="div"
|
||||
aria-label="Commands"
|
||||
class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"
|
||||
:class="ui.container"
|
||||
>
|
||||
<CommandPaletteGroup
|
||||
v-for="group of groups"
|
||||
@@ -45,6 +43,8 @@
|
||||
:group="group"
|
||||
:group-attribute="groupAttribute"
|
||||
:command-attribute="commandAttribute"
|
||||
:selected-icon="selectedIcon"
|
||||
:ui="ui"
|
||||
>
|
||||
<template v-for="(_, name) in $slots" #[name]="slotData">
|
||||
<slot :name="name" v-bind="slotData" />
|
||||
@@ -52,18 +52,18 @@
|
||||
</CommandPaletteGroup>
|
||||
</ComboboxOptions>
|
||||
|
||||
<div v-else-if="placeholder" class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
|
||||
<Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
|
||||
<p class="text-sm text-center u-text-gray-900">
|
||||
{{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
|
||||
<div v-else-if="empty" :class="ui.empty.wrapper">
|
||||
<Icon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
|
||||
<p :class="query ? ui.empty.queryLabel : ui.empty.label">
|
||||
{{ query ? empty.queryLabel : empty.label }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
<script lang="ts">
|
||||
import { ref, computed, watch, onMounted, defineComponent } from 'vue'
|
||||
import { Combobox, ComboboxInput, ComboboxOptions } from '@headlessui/vue'
|
||||
import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
@@ -74,196 +74,228 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
|
||||
import type { Group, Command } from '../../types/command-palette'
|
||||
import Icon from '../elements/Icon.vue'
|
||||
import Button from '../elements/Button.vue'
|
||||
import type { Button as ButtonType } from '../../types/button'
|
||||
import CommandPaletteGroup from './CommandPaletteGroup.vue'
|
||||
import $ui from '#build/ui'
|
||||
import { useAppConfig } from '#imports'
|
||||
// TODO: Remove
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String, Number, Object, Array],
|
||||
default: null
|
||||
},
|
||||
by: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nullable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
groups: {
|
||||
type: Array as PropType<Group[]>,
|
||||
default: () => []
|
||||
},
|
||||
inputIcon: {
|
||||
type: String,
|
||||
default: () => $ui.commandPalette.input.icon.name
|
||||
},
|
||||
inputCloseIcon: {
|
||||
type: String,
|
||||
default: () => $ui.commandPalette.input.close.icon.name
|
||||
},
|
||||
inputPlaceholder: {
|
||||
type: String,
|
||||
default: 'Search...'
|
||||
},
|
||||
emptyIcon: {
|
||||
type: String,
|
||||
default: () => $ui.commandPalette.empty.icon.name
|
||||
},
|
||||
groupAttribute: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
commandAttribute: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
options: {
|
||||
type: Object as PropType<Partial<UseFuseOptions<Command>>>,
|
||||
default: () => ({})
|
||||
},
|
||||
autoselect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoclear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 200
|
||||
}
|
||||
})
|
||||
// const appConfig = useAppConfig()
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'close'])
|
||||
|
||||
const query = ref('')
|
||||
const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
|
||||
const comboboxApi = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autoselect) {
|
||||
activateFirstOption()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
// @ts-expect-error internals
|
||||
const popoverProvides = comboboxInput.value?.$.provides
|
||||
if (!popoverProvides) {
|
||||
return
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Combobox,
|
||||
ComboboxInput,
|
||||
ComboboxOptions,
|
||||
Icon,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Button,
|
||||
CommandPaletteGroup
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [String, Number, Object, Array],
|
||||
default: null
|
||||
},
|
||||
by: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nullable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
groups: {
|
||||
type: Array as PropType<Group[]>,
|
||||
default: () => []
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: () => appConfig.ui.commandPalette.default.icon
|
||||
},
|
||||
selectedIcon: {
|
||||
type: String,
|
||||
default: () => appConfig.ui.commandPalette.default.selectedIcon
|
||||
},
|
||||
close: {
|
||||
type: Object as PropType<Partial<ButtonType>>,
|
||||
default: () => appConfig.ui.commandPalette.default.close
|
||||
},
|
||||
empty: {
|
||||
type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
|
||||
default: () => appConfig.ui.commandPalette.default.empty
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Search...'
|
||||
},
|
||||
groupAttribute: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
commandAttribute: {
|
||||
type: String,
|
||||
default: 'label'
|
||||
},
|
||||
autoselect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoclear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
fuse: {
|
||||
type: Object as PropType<Partial<UseFuseOptions<Command>>>,
|
||||
default: () => ({})
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
|
||||
default: () => appConfig.ui.commandPalette
|
||||
}
|
||||
const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
|
||||
comboboxApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
|
||||
}, 200)
|
||||
})
|
||||
|
||||
const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, props.options, {
|
||||
fuseOptions: {
|
||||
keys: [props.commandAttribute]
|
||||
},
|
||||
resultLimit: 12,
|
||||
matchAllWhenSearchEmpty: true
|
||||
}))
|
||||
emits: ['update:modelValue', 'close'],
|
||||
setup (props, { emit, expose }) {
|
||||
// TODO: Remove
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
|
||||
return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
|
||||
}, [] as Command[]))
|
||||
const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defu({}, props.ui, appConfig.ui.commandPalette))
|
||||
|
||||
const searchResults = ref<{ [key: string]: any }>({})
|
||||
const query = ref('')
|
||||
const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
|
||||
const comboboxApi = ref(null)
|
||||
|
||||
const { results } = useFuse(query, commands, options)
|
||||
|
||||
const groups = computed(() => ([
|
||||
...map(groupBy(results.value, command => command.item.group), (results, key) => {
|
||||
const commands = results.map((result) => {
|
||||
const { item, ...data } = result
|
||||
|
||||
return {
|
||||
...item,
|
||||
...data
|
||||
onMounted(() => {
|
||||
if (props.autoselect) {
|
||||
activateFirstOption()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
// @ts-expect-error internals
|
||||
const popoverProvides = comboboxInput.value?.$.provides
|
||||
if (!popoverProvides) {
|
||||
return
|
||||
}
|
||||
const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
|
||||
comboboxApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
|
||||
}, 200)
|
||||
})
|
||||
|
||||
const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, props.fuse, {
|
||||
fuseOptions: {
|
||||
keys: [props.commandAttribute]
|
||||
},
|
||||
resultLimit: 12,
|
||||
matchAllWhenSearchEmpty: true
|
||||
}))
|
||||
|
||||
const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
|
||||
return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
|
||||
}, [] as Command[]))
|
||||
|
||||
const searchResults = ref<{ [key: string]: any }>({})
|
||||
|
||||
const { results } = useFuse(query, commands, options)
|
||||
|
||||
const groups = computed(() => ([
|
||||
...map(groupBy(results.value, command => command.item.group), (results, key) => {
|
||||
const commands = results.map((result) => {
|
||||
const { item, ...data } = result
|
||||
|
||||
return {
|
||||
...item,
|
||||
...data
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
...props.groups.find(group => group.key === key),
|
||||
commands: commands.slice(0, options.value.resultLimit)
|
||||
} as Group
|
||||
}),
|
||||
...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length)
|
||||
]))
|
||||
|
||||
const debouncedSearch = useDebounceFn(async () => {
|
||||
const searchableGroups = props.groups.filter(group => !!group.search)
|
||||
|
||||
await Promise.all(searchableGroups.map(async (group) => {
|
||||
searchResults.value[group.key] = await group.search(query.value)
|
||||
}))
|
||||
}, props.debounce)
|
||||
|
||||
watch(query, () => {
|
||||
debouncedSearch()
|
||||
|
||||
// Select first item on search changes
|
||||
setTimeout(() => {
|
||||
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
|
||||
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
|
||||
}, 0)
|
||||
})
|
||||
|
||||
// Methods
|
||||
|
||||
function activateFirstOption () {
|
||||
// hack combobox by using keyboard event
|
||||
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
|
||||
setTimeout(() => {
|
||||
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}, 0)
|
||||
}
|
||||
|
||||
function onSelect (option: Command | Command[]) {
|
||||
emit('update:modelValue', option, { query: query.value })
|
||||
|
||||
// Clear input after selection
|
||||
if (props.autoclear) {
|
||||
setTimeout(() => {
|
||||
query.value = ''
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
function onClear () {
|
||||
if (query.value) {
|
||||
query.value = ''
|
||||
} else {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
expose({
|
||||
query,
|
||||
updateQuery: (q: string) => {
|
||||
query.value = q
|
||||
},
|
||||
comboboxApi,
|
||||
results
|
||||
})
|
||||
|
||||
return {
|
||||
...props.groups.find(group => group.key === key),
|
||||
commands: commands.slice(0, options.value.resultLimit)
|
||||
} as Group
|
||||
}),
|
||||
...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length)
|
||||
]))
|
||||
|
||||
const debouncedSearch = useDebounceFn(async () => {
|
||||
const searchableGroups = props.groups.filter(group => !!group.search)
|
||||
|
||||
await Promise.all(searchableGroups.map(async (group) => {
|
||||
searchResults.value[group.key] = await group.search(query.value)
|
||||
}))
|
||||
}, props.debounce)
|
||||
|
||||
watch(query, () => {
|
||||
debouncedSearch()
|
||||
|
||||
// Select first item on search changes
|
||||
setTimeout(() => {
|
||||
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
|
||||
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
|
||||
}, 0)
|
||||
})
|
||||
|
||||
// Methods
|
||||
|
||||
function activateFirstOption () {
|
||||
// hack combobox by using keyboard event
|
||||
// https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
|
||||
setTimeout(() => {
|
||||
comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}, 0)
|
||||
}
|
||||
|
||||
function onSelect (option: Command | Command[]) {
|
||||
emit('update:modelValue', option, { query: query.value })
|
||||
|
||||
// Clear input after selection
|
||||
if (props.autoclear) {
|
||||
setTimeout(() => {
|
||||
query.value = ''
|
||||
}, 0)
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
ui,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
groups,
|
||||
query,
|
||||
onSelect,
|
||||
onClear
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onClear () {
|
||||
if (query.value) {
|
||||
query.value = ''
|
||||
} else {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
query,
|
||||
updateQuery: (q: string) => {
|
||||
query.value = q
|
||||
},
|
||||
comboboxApi,
|
||||
results
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default { name: 'UCommandPalette' }
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user