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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
src/runtime/components/overlays/Tooltip.vue
View File

@@ -11,7 +11,7 @@
{{ text }} {{ text }}
</slot> </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> <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"> <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 }} {{ shortcut }}
@@ -84,6 +84,10 @@ const props = defineProps({
type: Object as PropType<PopperOptions>, type: Object as PropType<PopperOptions>,
default: () => ({}) default: () => ({})
}, },
shortcutsClass: {
type: Object,
default: () => $ui.tooltip.shortcuts
},
openDelay: { openDelay: {
type: Number, type: Number,
default: 0 default: 0

6
src/runtime/presets/default.ts
View File

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