16 lines
1.1 KiB
JSON
16 lines
1.1 KiB
JSON
{
|
|
"name": "kbd",
|
|
"dependencies": [],
|
|
"registryDependencies": [],
|
|
"files": [
|
|
{
|
|
"name": "Kbd.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n as?: string\n size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n as: 'kbd',\n size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n return cva(\n 'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n {\n variants: {\n size: {\n xs: 'min-h-[16px] text-[10px] h-4 px-1',\n sm: 'min-h-[20px] text-[11px] h-5 px-1',\n md: 'min-h-[24px] text-[12px] h-6 px-1.5',\n },\n },\n },\n )({\n size: props.size,\n })\n})\n</script>\n\n<template>\n <component :is=\"props.as\" :class=\"kbdClass\">\n <slot />\n </component>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "index.ts",
|
|
"content": "export { default as Kbd } from './Kbd.vue'\n"
|
|
}
|
|
],
|
|
"type": "components:ui"
|
|
} |