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()" />

src/templates.ts

@@ -34,21 +34,23 @@ export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
   nuxt.options.css.push(template.dst)
 
   for (const component in theme) {
-    const template = (theme as any)[component]
-    const result = typeof template === 'function' ? template({ colors: options.colors }) : template
-
-    const variants = Object.keys(result.variants || {})
-
-    let json = JSON.stringify(result, null, 2)
-
-    for (const variant of variants) {
-      json = json.replaceAll(new RegExp(`("${variant}": "[0-9a-z]+")`, 'g'), '$1 as const')
-    }
-
     addTemplate({
       filename: `ui/${component}.ts`,
       write: true,
-      getContents: () => `export default ${json}`
+      getContents: async () => {
+        const template = (theme as any)[component]
+        const result = typeof template === 'function' ? template({ colors: options.colors }) : template
+
+        const variants = Object.keys(result.variants || {})
+
+        let json = JSON.stringify(result, null, 2)
+
+        for (const variant of variants) {
+          json = json.replaceAll(new RegExp(`("${variant}": "[0-9a-z]+")`, 'g'), '$1 as const')
+        }
+
+        return `export default ${json}`
+      }
     })
   }
 

src/theme/avatar.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
-    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800',
+    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800',
     image: 'h-full w-full rounded-[inherit] object-cover',
     fallback: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
     icon: 'text-gray-500 dark:text-gray-400 shrink-0'

src/theme/index.ts

@@ -4,4 +4,5 @@ export { default as button } from './button'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
 export { default as icons } from './icons'
+export { default as kbd } from './kbd'
 export { default as tooltip } from './tooltip'

src/theme/kbd.ts

@@ -0,0 +1,13 @@
+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',
+  variants: {
+    size: {
+      xs: 'h-4 min-w-[16px] text-[10px]',
+      sm: 'h-5 min-w-[20px] text-[11px]',
+      md: 'h-6 min-w-[24px] text-[12px]'
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  }
+}

src/theme/tooltip.ts

@@ -1,6 +1,9 @@
 export default {
   slots: {
-    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]',
-    arrow: 'fill-white dark:fill-gray-700'
+    content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none max-w-48 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]',
+    arrow: 'fill-gray-200 dark:fill-gray-800',
+    text: 'truncate',
+    // eslint-disable-next-line quotes
+    shortcuts: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`
   }
 }