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:
Daniel Roe
2024-03-12 04:12:17 -07:00
committed by GitHub
parent 44d0ceccba
commit 4446531d04
27 changed files with 652 additions and 143 deletions

View File

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

View File

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

13
src/theme/kbd.ts Normal file
View File

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

View File

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