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

feat(SelectMenu): new component (#103)

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-13 14:26:01 +02:00
committed by GitHub
parent 8baee1292f
commit 7a376b5e49
23 changed files with 2318 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/theme/index.ts
View File

@@ -27,6 +27,7 @@ export { default as pagination } from './pagination'
export { default as popover } from './popover'
export { default as radioGroup } from './radio-group'
export { default as select } from './select'
export { default as selectMenu } from './select-menu'
export { default as separator } from './separator'
export { default as skeleton } from './skeleton'
export { default as slideover } from './slideover'

8
src/theme/input.ts
View File

@@ -52,7 +52,7 @@ export default (config: { colors: string[] }) => {
},
variant: {
outline: '',
none: 'bg-transparent focus:ring-0 focus:shadow-none'
none: 'bg-transparent'
},
color: {
...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
@@ -75,15 +75,15 @@ export default (config: { colors: string[] }) => {
compoundVariants: [...config.colors.map((color: string) => ({
color,
variant: 'outline',
class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus:ring-2 focus:ring-${color}-500 dark:focus:ring-${color}-400`
class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), {
color: 'white',
variant: 'outline',
class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'gray',
variant: 'outline',
class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
leading: true,
size: 'xs',

12
src/theme/select-menu.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defu } from 'defu'
import select from './select'
export default (config: { colors: string[] }) => {
return defu({
slots: {
value: 'truncate',
placeholder: 'truncate text-current/50',
input: 'text-sm px-2.5 py-1.5 placeholder-gray-400 dark:placeholder-gray-500 border-0 border-b border-gray-200 dark:border-gray-800 focus:outline-none'
}
}, select(config))
}