mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-27 18:30:35 +01:00
chore: add local module for better development dx (#2)
* chore: add local module for better dx developing nuxt/ui * up * up * up * feat(Kbd): new * chore(Badge): update * chore(Collapsible): remove content prop * chore(Container): clean * chore(Avatar): update root bg * chore(Link): clean * feat(Tooltip): handle shortcuts * playground(collapsible): update --------- Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
36
src/runtime/components/Kbd.vue
Normal file
36
src/runtime/components/Kbd.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { tv, type VariantProps } from 'tailwind-variants'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/kbd'
|
||||
|
||||
const appConfig = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
|
||||
|
||||
const kbd = tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) })
|
||||
|
||||
type KbdVariants = VariantProps<typeof kbd>
|
||||
|
||||
export interface KbdProps {
|
||||
as?: string
|
||||
value?: string
|
||||
size?: KbdVariants['size']
|
||||
class?: any
|
||||
}
|
||||
|
||||
export interface KbdSlots {
|
||||
default(): any
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<KbdProps>(), { as: 'kbd' })
|
||||
defineSlots<KbdSlots>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="as" :class="kbd({ size, class: props.class })">
|
||||
<slot>
|
||||
{{ value }}
|
||||
</slot>
|
||||
</component>
|
||||
</template>
|
||||
Reference in New Issue
Block a user