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

chore(CommandPalette): support by prop and highlight

Browse Source
This commit is contained in:
Benjamin Canac
2022-10-09 13:31:11 +02:00
parent f0e482cf01
commit d29377f614
3 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/runtime/components/navigation/CommandPaletteGroup.vue
View File

@@ -26,7 +26,8 @@
<div class="flex items-center gap-1.5 min-w-0" :class="{ 'opacity-50': command.disabled }">
<slot :name="`${group.key}-command`" :group="group" :command="command">
<span v-if="command.prefix" class="u-text-gray-400">{{ command.prefix }}</span>
<span class="truncate" :class="{ 'flex-none': command.suffix }">{{ command[commandAttribute] }}</span>
<span v-if="command.matches?.length" class="truncate" :class="{ 'flex-none': command.suffix }" v-html="highlight(command.matches[0])" />
<span v-else class="truncate" :class="{ 'flex-none': command.suffix }">{{ command[commandAttribute] }}</span>
<span v-if="command.suffix" class="u-text-gray-400 truncate">{{ command.suffix }}</span>
</slot>
</div>
@@ -69,6 +70,15 @@ defineProps({
required: true
}
})
function highlight ({ indices, value }, i = 1) {
const pair = indices[indices.length - i]
if (!pair) {
return value
}
return `${highlight({ indices, value: value.substring(0, pair[0]) }, i + 1)}<mark>${value.substring(pair[0], pair[1] + 1)}</mark>${value.substring(pair[1] + 1)}`
}
</script>
<script lang="ts">