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

feat(InputMenu): handle multiple

Browse Source 
Resolves #91
This commit is contained in:
Benjamin Canac
2024-05-14 12:37:51 +02:00
parent 27ffb8d8ab
commit fe3ab652b4
16 changed files with 324 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/theme/input-menu.ts
View File

@@ -17,11 +17,50 @@ export default (config: { colors: string[] }) => {
itemLeadingChip: 'shrink-0 mx-1.5',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
itemTrailingSelectedIcon: 'shrink-0 size-5',
itemLabel: 'truncate'
itemLabel: 'truncate',
tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
tagsItemText: 'truncate',
tagsItemDelete: 'inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none transition-colors',
tagsItemDeleteIcon: '',
tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
}
}, {
slots: {
base: 'rounded-md',
trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75'
},
variants: {
multiple: {
true: {
root: 'flex-wrap',
base: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-500 dark:has-[:focus-visible]:ring-primary-400'
},
false: {
base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
}
},
size: {
xs: {
tagsItem: 'text-[10px]/3',
tagsItemDeleteIcon: 'size-3'
},
sm: {
tagsItem: 'text-[10px]/3',
tagsItemDeleteIcon: 'size-3'
},
md: {
tagsItem: 'text-xs',
tagsItemDeleteIcon: 'size-3.5'
},
lg: {
tagsItem: 'text-xs',
tagsItemDeleteIcon: 'size-3.5'
},
xl: {
tagsItem: 'text-sm',
tagsItemDeleteIcon: 'size-4'
}
}
}
}, input(config))
}

10
src/theme/input.ts
View File

@@ -15,35 +15,35 @@ export default (config: { colors: string[] }) => {
...buttonGroupVariantWithRoot,
size: {
xs: {
base: 'px-2 py-1 text-xs',
base: 'px-2 py-1 text-xs gap-1',
leading: 'pl-2',
trailing: 'pr-2',
leadingIcon: 'size-4',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs',
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leadingIcon: 'size-4',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm',
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm',
base: 'px-3 py-2 text-sm gap-2',
leading: 'pl-3',
trailing: 'pr-3',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base',
base: 'px-3 py-2 text-base gap-2',
leading: 'pl-3',
trailing: 'pr-3',
leadingIcon: 'size-6',