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

feat(Kbd): add color prop & soft variant (#4549)

Browse Source
This commit is contained in:
Alex
2025-07-21 17:22:07 +05:00
committed by GitHub
parent 657ec228b5
commit f33660035f
15 changed files with 479 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
playground/app/pages/components/kbd.vue
View File

@@ -3,20 +3,16 @@ import theme from '#build/ui/kbd'
import { kbdKeysMap } from '@nuxt/ui/composables/useKbd.js'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
const kbdKeys = Object.keys(kbdKeysMap)
</script>
<template>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1">
<UKbd value="meta" />
</div>
<div class="flex items-center gap-1">
<UKbd value="meta" variant="subtle" />
</div>
<div class="flex items-center gap-1">
<UKbd value="meta" variant="solid" />
<div v-for="color in colors" :key="color" class="flex items-center gap-1 ms-[-22px]">
<UKbd v-for="variant in variants" :key="`${color}-${variant}`" value="meta" :variant="variant" :color="color" />
</div>
<div class="flex items-center gap-1 ms-[-220px]">
<UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />