chore: allow preset override of components shortcuts (#139)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sylvain Marroufin
2023-03-09 11:40:04 +01:00
committed by GitHub
parent 0826ef8d59
commit fef93f3198
3 changed files with 10 additions and 4 deletions

View File

@@ -42,7 +42,7 @@
<span v-if="group.active" class="flex-shrink-0 u-text-gray-500">{{ group.active }}</span>
</slot>
<slot v-else :name="`${group.key}-inactive`" :group="group" :command="command">
<span v-if="command.shortcuts?.length" class="flex-shrink-0 text-xs font-semibold u-text-gray-500">
<span v-if="command.shortcuts?.length" :class="$ui.commandPalette.option.shortcuts">
<kbd v-for="shortcut of command.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
</span>
<span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>

View File

@@ -11,7 +11,7 @@
{{ text }}
</slot>
<span v-if="shortcuts?.length" class="inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1">
<span v-if="shortcuts?.length" :class="shortcutsClass">
<span class="mr-1 u-text-gray-700">&middot;</span>
<kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 min-w-[16px] text-[10px] u-bg-gray-100 rounded u-text-gray-900">
{{ shortcut }}
@@ -84,6 +84,10 @@ const props = defineProps({
type: Object as PropType<PopperOptions>,
default: () => ({})
},
shortcutsClass: {
type: Object,
default: () => $ui.tooltip.shortcuts
},
openDelay: {
type: Number,
default: 0

View File

@@ -380,7 +380,7 @@ export default function defaultPreset (variantColors: string[]) {
disabled: 'cursor-not-allowed opacity-50',
icon: 'h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500 flex-shrink-0',
avatar: '-m-0.5 group-hover:u-bg-gray-200 flex-shrink-0',
shortcuts: 'flex-shrink-0 text-xs font-semibold u-text-gray-500 ml-auto'
shortcuts: 'hidden md:inline-flex flex-shrink-0 text-xs font-semibold u-text-gray-500 ml-auto'
},
transition: {
enterActiveClass: 'transition duration-100 ease-out',
@@ -526,6 +526,7 @@ export default function defaultPreset (variantColors: string[]) {
rounded: 'rounded',
ring: 'ring-1 u-ring-gray-200',
base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal truncate',
shortcuts: 'hidden md:inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1',
transition: {
enterActiveClass: 'transition ease-out duration-200',
enterFromClass: 'opacity-0 translate-y-1',
@@ -611,7 +612,8 @@ export default function defaultPreset (variantColors: string[]) {
icon: {
name: 'i-heroicons-check-20-solid'
}
}
},
shortcuts: 'hidden md:inline-flex flex-shrink-0 text-xs font-semibold u-text-gray-500'
}
}