Update TW demos for the new fixes

This commit is contained in:
ATAKAN TEPE 2023-10-18 09:58:43 +03:00
parent 67f80538b4
commit 03987ed2fd
10 changed files with 168 additions and 94 deletions

View file

@ -35,10 +35,12 @@ export default {
{ 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
]
}),
labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
labelContainer: {
class: 'overflow-hidden flex flex-auto cursor-pointer'
},
label: ({ props }) => ({
class: [
'block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
'block overflow-hidden whitespace-nowrap cursor-pointer text-ellipsis',
'text-gray-800 dark:text-white/80',
'p-3 transition duration-200',
{
@ -51,7 +53,9 @@ export default {
token: {
class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
},
removeTokenIcon: 'ml-2',
removeTokenIcon: {
class: 'ml-2'
},
trigger: {
class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
},
@ -75,7 +79,9 @@ export default {
}
]
}),
headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
headercheckboxicon: {
class: 'w-4 h-4 transition-all duration-200 text-white text-base'
},
closeButton: {
class: [
'flex items-center justify-center overflow-hidden relative',
@ -84,21 +90,23 @@ export default {
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
]
},
closeButtonIcon: 'w-4 h-4 inline-block',
closeButtonIcon: {
class: 'w-4 h-4 inline-block'
},
wrapper: {
class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
},
list: 'py-3 list-none m-0',
list: {
class: 'py-3 list-none m-0'
},
item: ({ context }) => ({
class: [
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none',
'dark:text-white/80 dark:hover:bg-gray-800',
'hover:text-gray-700 hover:bg-gray-200',
{
'text-gray-700': !context.focused && !context.selected,
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
'bg-blue-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
}
]
@ -117,11 +125,15 @@ export default {
}
]
}),
checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
checkboxicon: {
class: 'w-4 h-4 transition-all duration-200 text-white text-base'
},
itemgroup: {
class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
},
filtercontainer: 'relative',
filtercontainer: {
class: 'relative'
},
filterinput: {
class: [
'pr-7 -mr-7',
@ -131,8 +143,12 @@ export default {
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
]
},
filtericon: '-mt-2 absolute top-1/2',
clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
filtericon: {
class: '-mt-2 absolute top-1/2'
},
clearicon: {
class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
},
transition: TRANSITIONS.overlay
}
}