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

feat(Kbd): add color prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-05 15:43:41 +02:00
parent 06ea029ef6
commit 2cc41dedcf
5 changed files with 50 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
playground/pages/kbd.vue
View File

@@ -1,6 +1,28 @@
<script setup lang="ts">
import theme from '#build/ui/kbd'
const sizes = Object.keys(theme.variants.size)
</script>
<template>
<div class="flex items-center gap-1">
<UKbd value="⌘" />
<UKbd value="K" />
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1">
<UKbd value="⌘" />
<UKbd value="K" />
</div>
<div class="flex items-center gap-1">
<UKbd value="⌘" color="gray" />
<UKbd value="K" color="gray" />
</div>
<div class="flex items-center gap-1">
<UKbd value="⌘" color="black" />
<UKbd value="K" color="black" />
</div>
<div class="flex items-center gap-1 -ml-[41px]">
<template v-for="size in sizes" :key="size">
<UKbd value="⌘" :size="(size as any)" />
<UKbd value="K" :size="(size as any)" />
</template>
</div>
</div>
</template>

3
src/runtime/components/Kbd.vue
View File

@@ -13,6 +13,7 @@ type KbdVariants = VariantProps<typeof kbd>
export interface KbdProps extends Omit<PrimitiveProps, 'asChild'> {
value?: string
color?: KbdVariants['color']
size?: KbdVariants['size']
class?: any
}
@@ -30,7 +31,7 @@ defineSlots<KbdSlots>()
</script>
<template>
<Primitive :as="as" :class="kbd({ size, class: props.class })">
<Primitive :as="as" :class="kbd({ color, size, class: props.class })">
<slot>
{{ value }}
</slot>

8
src/theme/kbd.ts
View File

@@ -1,6 +1,11 @@
export default {
base: 'inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset',
base: 'inline-flex items-center justify-center px-1 rounded font-medium font-sans',
variants: {
color: {
white: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700',
gray: 'bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700',
black: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
},
size: {
xs: 'h-4 min-w-[16px] text-[10px]',
sm: 'h-5 min-w-[20px] text-[11px]',
@@ -8,6 +13,7 @@ export default {
}
},
defaultVariants: {
color: 'white',
size: 'sm'
}
}

3
test/components/Kbd.spec.ts
View File

@@ -10,6 +10,9 @@ describe('Kbd', () => {
['with size xs', { props: { value: 'K', size: 'xs' as const } }],
['with size sm', { props: { value: 'K', size: 'sm' as const } }],
['with size md', { props: { value: 'K', size: 'md' as const } }],
['with color white', { props: { value: 'K', color: 'white' as const } }],
['with color gray', { props: { value: 'K', color: 'gray' as const } }],
['with color black', { props: { value: 'K', color: 'black' as const } }],
['with default slot', { slots: { default: () => 'Default slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: KbdProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Kbd)

20
test/components/__snapshots__/Kbd.spec.ts.snap
View File

@@ -1,15 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</span>"`;
exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</span>"`;
exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
exports[`Kbd > renders with color black correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-900 dark:bg-white text-white dark:text-gray-900 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-6 min-w-[24px] text-[12px]">K</kbd>"`;
exports[`Kbd > renders with color gray correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with color white correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with size xs correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-4 min-w-[16px] text-[10px]">K</kbd>"`;
exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-6 min-w-[24px] text-[12px]">K</kbd>"`;
exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with size xs correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-4 min-w-[16px] text-[10px]">K</kbd>"`;
exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;