arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 14:31:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(DropdownMenu): new component (#37)

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-29 13:42:02 +01:00
committed by GitHub
parent 2fbf47e1fc
commit 44033508a7
25 changed files with 735 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/theme/accordion.ts
View File

@@ -5,8 +5,8 @@ export default {
header: 'flex',
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0',
content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none',
leadingIcon: 'shrink-0 w-5 h-5',
trailingIcon: 'ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
leadingIcon: 'shrink-0 size-5',
trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
label: 'truncate'
}
}

27
src/theme/dropdownMenu.ts Normal file
View File

@@ -0,0 +1,27 @@
export default {
slots: {
content: 'min-w-48 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 will-change-[transform,opacity] data-[state=open]:animate-[dropdown-menu-open_100ms_ease-out] data-[state=closed]:animate-[dropdown-menu-closed_100ms_ease-in]',
arrow: 'fill-gray-200 dark:fill-gray-800',
group: 'p-1',
label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-medium select-none',
item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
itemLeadingIcon: 'shrink-0 size-5',
itemLeadingAvatar: 'shrink-0',
itemTrailing: 'ms-auto inline-flex',
itemTrailingIcon: 'shrink-0 size-5',
itemTrailingShortcuts: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
itemLabel: 'truncate'
},
variants: {
active: {
true: {
item: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
},
false: {
item: 'text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50',
itemLeadingIcon: 'text-gray-400 dark:text-gray-500 group-data-[highlighted]:text-gray-700 dark:group-data-[highlighted]:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200'
}
}
}
}

1
src/theme/index.ts
View File

@@ -7,6 +7,7 @@ export { default as checkbox } from './checkbox'
export { default as chip } from './chip'
export { default as collapsible } from './collapsible'
export { default as container } from './container'
export { default as dropdownMenu } from './dropdownMenu'
export { default as form } from './form'
export { default as formField } from './formField'
export { default as icons } from './icons'

35
src/theme/navigationMenu.ts
View File

@@ -3,11 +3,12 @@ export default {
root: 'relative',
list: '',
item: '',
base: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
icon: 'shrink-0 w-5 h-5 relative',
avatar: 'shrink-0 relative',
label: 'truncate relative',
badge: 'shrink-0 ms-auto relative rounded'
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto',
linkTrailingBadge: 'shrink-0 rounded'
},
variants: {
orientation: {
@@ -15,35 +16,41 @@ export default {
root: 'w-full flex items-center justify-between',
list: 'flex items-center min-w-0',
item: 'min-w-0',
base: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full'
link: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full'
},
vertical: {
root: 'flex flex-col *:py-1.5 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200 dark:divide-gray-800',
base: 'px-2.5 py-1.5 before:inset-px'
link: 'px-2.5 py-1.5 before:inset-px'
}
},
active: {
true: {
base: 'text-gray-900 dark:text-white',
icon: 'text-gray-700 dark:text-gray-200'
link: 'text-gray-900 dark:text-white',
linkLeadingIcon: 'text-gray-700 dark:text-gray-200'
},
false: {
base: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
icon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
link: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
linkLeadingIcon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
}
}
},
compoundVariants: [{
orientation: 'horizontal',
active: true,
class: 'after:bg-primary-500 dark:after:bg-primary-400'
class: {
link: 'after:bg-primary-500 dark:after:bg-primary-400'
}
}, {
orientation: 'vertical',
active: true,
class: 'before:bg-gray-100 dark:before:bg-gray-800'
class: {
link: 'before:bg-gray-100 dark:before:bg-gray-800'
}
}, {
orientation: 'vertical',
active: false,
class: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
class: {
link: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
}
}]
}