mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 23:40:39 +01:00
feat(InputMenu): new component (#86)
This commit is contained in:
Benjamin Canac
GitHub
@@ -2,26 +2,26 @@ export default {
|
||||
slots: {
|
||||
root: 'relative min-w-0',
|
||||
list: 'flex items-center gap-1.5',
|
||||
item: 'flex min-w-0',
|
||||
link: 'group relative flex items-center gap-1.5 font-medium text-sm min-w-0',
|
||||
linkLeadingIcon: 'shrink-0 size-5',
|
||||
linkLeadingAvatar: 'shrink-0',
|
||||
linkLabel: 'truncate',
|
||||
itemWrapper: 'flex min-w-0',
|
||||
item: 'group relative flex items-center gap-1.5 font-medium text-sm min-w-0',
|
||||
itemLeadingIcon: 'shrink-0 size-5',
|
||||
itemLeadingAvatar: 'shrink-0',
|
||||
itemLabel: 'truncate',
|
||||
separator: 'flex',
|
||||
separatorIcon: 'shrink-0 size-5 text-gray-500 dark:text-gray-400'
|
||||
},
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
link: 'text-primary-500 dark:text-primary-400'
|
||||
item: 'text-primary-500 dark:text-primary-400'
|
||||
},
|
||||
false: {
|
||||
link: 'text-gray-500 dark:text-gray-400'
|
||||
item: 'text-gray-500 dark:text-gray-400'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
true: {
|
||||
link: 'cursor-not-allowed opacity-75'
|
||||
item: 'cursor-not-allowed opacity-75'
|
||||
}
|
||||
},
|
||||
to: {
|
||||
@@ -33,7 +33,7 @@ export default {
|
||||
active: false,
|
||||
to: true,
|
||||
class: {
|
||||
link: 'hover:text-gray-900 dark:hover:text-white'
|
||||
item: 'hover:text-gray-900 dark:hover:text-white'
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ export default (config: { colors: string[] }) => ({
|
||||
base: 'rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
|
||||
label: '',
|
||||
leadingIcon: 'shrink-0',
|
||||
leadingAvatar: 'shrink-0',
|
||||
trailingIcon: 'shrink-0'
|
||||
},
|
||||
variants: {
|
||||
@@ -42,9 +43,9 @@ export default (config: { colors: string[] }) => ({
|
||||
trailingIcon: 'size-5'
|
||||
},
|
||||
xl: {
|
||||
base: 'px-3.5 py-2.5 text-sm gap-2.5',
|
||||
leadingIcon: 'size-5',
|
||||
trailingIcon: 'size-5'
|
||||
base: 'px-3 py-2 text-base gap-2',
|
||||
leadingIcon: 'size-6',
|
||||
trailingIcon: 'size-6'
|
||||
}
|
||||
},
|
||||
truncate: {
|
||||
@@ -142,7 +143,7 @@ export default (config: { colors: string[] }) => ({
|
||||
}, {
|
||||
size: 'xl',
|
||||
square: true,
|
||||
class: 'p-2.5'
|
||||
class: 'p-2'
|
||||
}, {
|
||||
loading: true,
|
||||
leading: true,
|
||||
|
||||
@@ -2,25 +2,25 @@ export default {
|
||||
slots: {
|
||||
content: 'min-w-32 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 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
|
||||
group: 'p-1 isolate',
|
||||
label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-medium select-none',
|
||||
label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-semibold text-gray-900 dark:text-white',
|
||||
separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
|
||||
link: '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 data-disabled:cursor-not-allowed data-disabled:opacity-75',
|
||||
linkLeadingIcon: 'shrink-0 size-5',
|
||||
linkLeadingAvatar: 'shrink-0',
|
||||
linkTrailing: 'ms-auto inline-flex',
|
||||
linkTrailingIcon: 'shrink-0 size-5',
|
||||
linkTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
|
||||
linkLabel: 'truncate'
|
||||
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 data-disabled:cursor-not-allowed data-disabled:opacity-75',
|
||||
itemLeadingIcon: 'shrink-0 size-5',
|
||||
itemLeadingAvatar: 'shrink-0',
|
||||
itemTrailing: 'ms-auto inline-flex',
|
||||
itemTrailingIcon: 'shrink-0 size-5',
|
||||
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
|
||||
itemLabel: 'truncate'
|
||||
},
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
link: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
|
||||
linkLeadingIcon: 'text-gray-700 dark:text-gray-200'
|
||||
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: {
|
||||
link: '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',
|
||||
linkLeadingIcon: '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'
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,25 +3,25 @@ export default {
|
||||
content: 'min-w-32 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 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
|
||||
arrow: 'fill-gray-200 dark:fill-gray-800',
|
||||
group: 'p-1 isolate',
|
||||
label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-medium select-none',
|
||||
label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-semibold text-gray-900 dark:text-white',
|
||||
separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
|
||||
link: '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 data-disabled:cursor-not-allowed data-disabled:opacity-75',
|
||||
linkLeadingIcon: 'shrink-0 size-5',
|
||||
linkLeadingAvatar: 'shrink-0',
|
||||
linkTrailing: 'ms-auto inline-flex',
|
||||
linkTrailingIcon: 'shrink-0 size-5',
|
||||
linkTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
|
||||
linkLabel: 'truncate'
|
||||
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 data-disabled:cursor-not-allowed data-disabled:opacity-75',
|
||||
itemLeadingIcon: 'shrink-0 size-5',
|
||||
itemLeadingAvatar: 'shrink-0',
|
||||
itemTrailing: 'ms-auto inline-flex',
|
||||
itemTrailingIcon: 'shrink-0 size-5',
|
||||
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
|
||||
itemLabel: 'truncate'
|
||||
},
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
link: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
|
||||
linkLeadingIcon: 'text-gray-700 dark:text-gray-200'
|
||||
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: {
|
||||
link: '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',
|
||||
linkLeadingIcon: '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'
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ export { default as dropdownMenu } from './dropdown-menu'
|
||||
export { default as form } from './form'
|
||||
export { default as formField } from './form-field'
|
||||
export { default as input } from './input'
|
||||
export { default as inputMenu } from './input-menu'
|
||||
export { default as kbd } from './kbd'
|
||||
export { default as link } from './link'
|
||||
export { default as modal } from './modal'
|
||||
|
||||
21
src/theme/input-menu.ts
Normal file
21
src/theme/input-menu.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
slots: {
|
||||
root: 'relative',
|
||||
input: '',
|
||||
trigger: 'inline-flex items-center',
|
||||
arrow: 'fill-gray-200 dark:fill-gray-800',
|
||||
content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
|
||||
viewport: 'divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1',
|
||||
group: 'p-1 isolate',
|
||||
empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
|
||||
label: 'p-1.5 text-xs font-semibold text-gray-900 dark:text-white',
|
||||
separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
|
||||
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 data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
|
||||
itemLeadingIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
|
||||
itemLeadingAvatar: 'shrink-0',
|
||||
itemLeadingChip: 'shrink-0 mx-1.5',
|
||||
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
||||
itemTrailingSelectedIcon: 'shrink-0 size-5',
|
||||
itemLabel: 'truncate'
|
||||
}
|
||||
}
|
||||
@@ -5,45 +5,46 @@ export default (config: { colors: string[] }) => {
|
||||
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500',
|
||||
leading: 'absolute inset-y-0 start-0 flex items-center',
|
||||
leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
|
||||
leadingAvatar: 'shrink-0',
|
||||
trailing: 'absolute inset-y-0 end-0 flex items-center',
|
||||
trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500'
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
xs: {
|
||||
base: 'text-xs px-2 py-1',
|
||||
base: 'px-2 py-1 text-xs',
|
||||
leading: 'pl-2',
|
||||
trailing: 'pr-2',
|
||||
leadingIcon: 'size-4',
|
||||
trailingIcon: 'size-4'
|
||||
},
|
||||
sm: {
|
||||
base: 'text-sm px-2.5 py-1',
|
||||
base: 'px-2.5 py-1.5 text-xs',
|
||||
leading: 'pl-2.5',
|
||||
trailing: 'pr-2.5',
|
||||
leadingIcon: 'size-4',
|
||||
trailingIcon: 'size-4'
|
||||
},
|
||||
md: {
|
||||
base: 'text-sm px-2.5 py-1.5',
|
||||
base: 'px-2.5 py-1.5 text-sm',
|
||||
leading: 'pl-2.5',
|
||||
trailing: 'pr-2.5',
|
||||
leadingIcon: 'size-5',
|
||||
trailingIcon: 'size-5'
|
||||
},
|
||||
lg: {
|
||||
base: 'text-sm px-3 py-2',
|
||||
base: 'px-3 py-2 text-sm',
|
||||
leading: 'pl-3',
|
||||
trailing: 'pr-3',
|
||||
leadingIcon: 'size-5',
|
||||
trailingIcon: 'size-5'
|
||||
},
|
||||
xl: {
|
||||
base: 'text-sm px-3.5 py-2.5',
|
||||
leading: 'pl-3.5',
|
||||
trailing: 'pr-3.5',
|
||||
leadingIcon: 'size-5',
|
||||
trailingIcon: 'size-5'
|
||||
base: 'px-3 py-2 text-base',
|
||||
leading: 'pl-3',
|
||||
trailing: 'pr-3',
|
||||
leadingIcon: 'size-6',
|
||||
trailingIcon: 'size-6'
|
||||
}
|
||||
},
|
||||
variant: {
|
||||
|
||||
@@ -2,13 +2,13 @@ export default {
|
||||
slots: {
|
||||
root: 'relative flex gap-1.5',
|
||||
list: 'isolate min-w-0',
|
||||
item: 'min-w-0',
|
||||
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',
|
||||
linkLeadingIcon: 'shrink-0 size-5',
|
||||
linkLeadingAvatar: 'shrink-0',
|
||||
linkLabel: 'truncate',
|
||||
linkTrailing: 'ms-auto',
|
||||
linkTrailingBadge: 'shrink-0 rounded',
|
||||
itemWrapper: 'min-w-0',
|
||||
item: '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',
|
||||
itemLeadingIcon: 'shrink-0 size-5',
|
||||
itemLeadingAvatar: 'shrink-0',
|
||||
itemLabel: 'truncate',
|
||||
itemTrailing: 'ms-auto',
|
||||
itemTrailingBadge: 'shrink-0 rounded',
|
||||
separator: 'px-2'
|
||||
},
|
||||
variants: {
|
||||
@@ -16,26 +16,26 @@ export default {
|
||||
horizontal: {
|
||||
root: 'w-full items-center justify-between',
|
||||
list: 'flex items-center',
|
||||
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-0.5 after:mt-2 after:rounded-full'
|
||||
item: '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-0.5 after:mt-2 after:rounded-full'
|
||||
},
|
||||
vertical: {
|
||||
root: 'flex-col',
|
||||
link: 'px-2.5 py-1.5 before:inset-px'
|
||||
item: 'px-2.5 py-1.5 before:inset-px'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
true: {
|
||||
link: 'text-gray-900 dark:text-white',
|
||||
linkLeadingIcon: 'text-gray-700 dark:text-gray-200'
|
||||
item: 'text-gray-900 dark:text-white',
|
||||
itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
|
||||
},
|
||||
false: {
|
||||
link: 'text-gray-500 dark:text-gray-400',
|
||||
linkLeadingIcon: 'text-gray-400 dark:text-gray-500'
|
||||
item: 'text-gray-500 dark:text-gray-400',
|
||||
itemLeadingIcon: 'text-gray-400 dark:text-gray-500'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
true: {
|
||||
link: 'cursor-not-allowed opacity-75'
|
||||
item: 'cursor-not-allowed opacity-75'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -43,26 +43,26 @@ export default {
|
||||
disabled: false,
|
||||
active: false,
|
||||
class: {
|
||||
link: 'hover:text-gray-900 dark:hover:text-white',
|
||||
linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200'
|
||||
item: 'hover:text-gray-900 dark:hover:text-white',
|
||||
itemLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200'
|
||||
}
|
||||
}, {
|
||||
orientation: 'horizontal',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'after:bg-primary-500 dark:after:bg-primary-400'
|
||||
item: 'after:bg-primary-500 dark:after:bg-primary-400'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'before:bg-gray-100 dark:before:bg-gray-800'
|
||||
item: 'before:bg-gray-100 dark:before:bg-gray-800'
|
||||
}
|
||||
}, {
|
||||
orientation: 'vertical',
|
||||
active: false,
|
||||
class: {
|
||||
link: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
|
||||
item: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user