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>

src/runtime/components/Badge.vue

@@ -3,7 +3,6 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
-import type { LinkProps } from '#ui/components/Link.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
 
@@ -11,7 +10,7 @@ const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps extends LinkProps {
+export interface BadgeProps {
   as?: string
   label?: string
   color?: BadgeVariants['color']
@@ -26,9 +25,7 @@ export interface BadgeSlots {
 </script>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<BadgeProps>(), {
-  as: 'span'
-})
+const props = withDefaults(defineProps<BadgeProps>(), { as: 'span' })
 defineSlots<BadgeSlots>()
 </script>
 

src/runtime/components/Collapsible.vue

@@ -10,7 +10,6 @@ const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof
 const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
 
 export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'asChild'> {
-  content?: string
   class?: any
   ui?: Partial<typeof collapsible.slots>
 }
@@ -44,9 +43,7 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
     </CollapsibleTrigger>
 
     <CollapsibleContent :class="ui.content()">
-      <slot name="content">
-        {{ content }}
-      </slot>
+      <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>
 </template>

src/runtime/components/Container.vue

@@ -15,9 +15,7 @@ export interface ContainerProps {
 </script>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<ContainerProps>(), {
-  as: 'div'
-})
+const props = withDefaults(defineProps<ContainerProps>(), { as: 'div' })
 </script>
 
 <template>

src/runtime/components/Kbd.vue

@@ -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>

src/runtime/components/Link.vue

@@ -21,10 +21,7 @@ import type { RouteLocation } from '#vue-router'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<LinkProps>(), {
-  as: 'button',
-  type: 'button'
-})
+const props = withDefaults(defineProps<LinkProps>(), { as: 'button', type: 'button' })
 
 const forward = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'inactiveClass'))
 

src/runtime/components/Tooltip.vue

@@ -4,6 +4,7 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipAr
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
+import type { KbdProps } from '#ui/components/Kbd.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
 
@@ -11,6 +12,7 @@ const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps {
   text?: string
+  shortcuts?: string[] | KbdProps[]
   content?: Omit<TooltipContentProps, 'as' | 'asChild'>
   arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
   portal?: boolean
@@ -22,7 +24,7 @@ export interface TooltipEmits extends TooltipRootEmits {}
 
 export interface TooltipSlots {
   default(): any
-  text(): any
+  content(): any
 }
 </script>
 
@@ -31,6 +33,7 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import UKbd from './Kbd.vue'
 
 const props = defineProps<TooltipProps>()
 const emits = defineEmits<TooltipEmits>()
@@ -51,8 +54,12 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
 
     <TooltipPortal :disabled="!portal">
       <TooltipContent v-bind="contentProps" :class="ui.content({ class: props.class })">
-        <slot name="text">
-          {{ text }}
+        <slot name="content">
+          <span :class="ui.text()">{{ text }}</span>
+
+          <span v-if="shortcuts?.length" :class="ui.shortcuts()">
+            <UKbd v-for="(shortcut, index) in shortcuts" :key="index" v-bind="typeof shortcut === 'string' ? { value: shortcut, size: 'xs' } : { size: 'xs', ...shortcut }" />
+          </span>
         </slot>
 
         <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow()" />