vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update TW demos for the new fixes

pull/4649/head
ATAKAN TEPE 2023-10-18 09:58:43 +03:00
parent 67f80538b4
commit 03987ed2fd
10 changed files with 168 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
doc/button/theming/TailwindDoc.vue
View File

@ -20,48 +20,71 @@ export default {
button: { button: {
root: ({ props, context }) => ({ root: ({ props, context }) => ({
class: [ class: [
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full', 'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom',
'transition duration-200 ease-in-out', 'transition duration-200 ease-in-out',
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]', // Primary button focus 'focus:outline-none focus:outline-offset-0',
{ {
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain, 'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
'text-blue-600 bg-transparent border-transparent': props.link !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.link
}, },
{ {
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain, 'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': props.severity === 'success' && !props.text && !props.outlined && !props.plain, props.severity === 'secondary',
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': props.severity === 'info' && !props.text && !props.outlined && !props.plain, 'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': props.severity === 'warning' && !props.text && !props.outlined && !props.plain, props.severity === 'success',
'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': props.severity === 'help' && !props.text && !props.outlined && !props.plain, 'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': props.severity === 'danger' && !props.text && !props.outlined && !props.plain props.severity === 'info',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'warning',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'help',
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
props.severity === 'danger'
},
{
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
}, },
{ 'shadow-lg': props.raised }, { 'shadow-lg': props.raised },
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded }, { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
{ {
'bg-transparent border-transparent': props.text && !props.plain, 'bg-transparent border-transparent': props.text && !props.plain,
'text-blue-500 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
'text-green-500 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
'text-orange-500 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
'text-purple-500 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
'text-red-500 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain 'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
}, },
{ 'shadow-lg': props.raised && props.text }, { 'shadow-lg': props.raised && props.text },
{ {
'text-gray-500 hover:bg-gray-300/20': props.plain & props.text, 'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined, 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
}, },
{ {
'bg-transparent border': props.outlined && !props.plain, 'bg-transparent border': props.outlined && !props.plain,
'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain, 'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain, 'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain, 'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain, 'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain, 'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain 'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
}, },
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }, { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
{ 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
{ 'opacity-60 pointer-events-none cursor-default': context.disabled } { 'opacity-60 pointer-events-none cursor-default': context.disabled }
] ]
}), }),
@ -72,7 +95,8 @@ export default {
'font-bold', 'font-bold',
{ {
'hover:underline': props.link 'hover:underline': props.link
} },
{ 'invisible w-0': props.label == null }
] ]
}), }),
icon: ({ props }) => ({ icon: ({ props }) => ({
@ -80,9 +104,9 @@ export default {
'mx-0', 'mx-0',
{ {
'mr-2': props.iconPos == 'left' && props.label != null, 'mr-2': props.iconPos == 'left' && props.label != null,
'ml-2': props.iconPos == 'right' && props.label != null, 'ml-2 order-1': props.iconPos == 'right' && props.label != null,
'mb-2': props.iconPos == 'top' && props.label != null, 'mb-2': props.iconPos == 'top' && props.label != null,
'mt-2': props.iconPos == 'bottom' && props.label != null 'mt-2 order-2': props.iconPos == 'bottom' && props.label != null
} }
] ]
}), }),

16
doc/confirmpopup/theming/TailwindDoc.vue
View File

@ -35,10 +35,18 @@ export default {
'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' 'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
] ]
}, },
content: 'p-5 items-center flex', content: {
icon: 'text-2xl', class: 'p-5 items-center flex'
message: 'ml-4', },
footer: 'text-right px-5 py-5 pt-0 ', icon: {
class: 'text-2xl'
},
message: {
class: 'ml-4'
},
footer: {
class: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0'
},
transition: TRANSITIONS.overlay transition: TRANSITIONS.overlay
} }
} }

4
doc/datatable/theming/TailwindDoc.vue
View File

@ -331,10 +331,6 @@ export default {
<template #header> <template #header>
<div class="flex justify-between"> <div class="flex justify-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
</div> </div>
</template> </template>
<template #empty> No customers found. </template> <template #empty> No customers found. </template>

23
doc/dialog/theming/TailwindDoc.vue
View File

@ -32,8 +32,12 @@ export default {
header: { header: {
class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0 rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900 dark:text-white/80'] class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0 rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900 dark:text-white/80']
}, },
headerTitle: 'font-bold text-lg', headerTitle: {
headerIcons: 'flex items-center', class: 'font-bold text-lg'
},
headerIcons: {
class: 'flex items-center'
},
closeButton: { closeButton: {
class: [ class: [
'flex items-center justify-center overflow-hidden relative', 'flex items-center justify-center overflow-hidden relative',
@ -43,20 +47,25 @@ export default {
'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]' 'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
] ]
}, },
closeButtonIcon: 'w-4 h-4 inline-block', closeButtonIcon: {
content: ({ state }) => ({ class: 'w-4 h-4 inline-block'
},
content: ({ state, instance }) => ({
class: [ class: [
'overflow-y-auto', 'overflow-y-auto',
'bg-white text-gray-700 px-6 pb-8 pt-0', 'bg-white text-gray-700 px-6 pb-8 pt-0',
'rounded-bl-lg rounded-br-lg', ,
'dark:bg-gray-900 dark:text-white/80 ', 'dark:bg-gray-900 dark:text-white/80',
{ {
grow: state.maximized grow: state.maximized
},
{
'rounded-bl-lg rounded-br-lg': !instance.$slots.footer
} }
] ]
}), }),
footer: { footer: {
class: ['shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80'] class: ['flex gap-2 shrink-0 justify-end align-center', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80']
}, },
mask: ({ props }) => ({ mask: ({ props }) => ({
class: ['transition duration-200', { 'bg-black/40': props.modal }] class: ['transition duration-200', { 'bg-black/40': props.modal }]

26
doc/dropdown/theming/TailwindDoc.vue
View File

@ -39,7 +39,7 @@ export default {
}), }),
input: ({ props }) => ({ input: ({ props }) => ({
class: [ class: [
'cursor-pointer block flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative', 'cursor-pointer block flex flex-auto overflow-hidden text-ellipsis whitespace-nowrap relative',
'bg-transparent border-0 text-gray-800', 'bg-transparent border-0 text-gray-800',
'dark:text-white/80', 'dark:text-white/80',
'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base', 'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
@ -53,17 +53,17 @@ export default {
wrapper: { 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'] 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 }) => ({ item: ({ context }) => ({
class: [ class: [
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', '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, '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': 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-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': 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 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
} }
] ]
@ -74,7 +74,9 @@ export default {
header: { header: {
class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40'] class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
}, },
filtercontainer: 'relative', filtercontainer: {
class: 'relative'
},
filterinput: { filterinput: {
class: [ class: [
'pr-7 -mr-7', 'pr-7 -mr-7',
@ -84,8 +86,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)]' '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', filtericon: {
clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2', class: '-mt-2 absolute top-1/2'
},
clearicon: {
class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
},
transition: TRANSITIONS.overlay transition: TRANSITIONS.overlay
} }
} }

24
doc/listbox/theming/TailwindDoc.vue
View File

@ -21,18 +21,20 @@ export default {
root: { root: {
class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56'] class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56']
}, },
wrapper: 'overflow-auto', wrapper: {
list: 'py-3 list-none m-0', class: 'overflow-auto'
},
list: {
class: 'py-3 list-none m-0'
},
item: ({ context }) => ({ item: ({ context }) => ({
class: [ class: [
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', '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, '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': 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-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': 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 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
} }
] ]
@ -43,7 +45,9 @@ export default {
header: { header: {
class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40'] class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
}, },
filtercontainer: 'relative', filtercontainer: {
class: 'relative'
},
filterinput: { filterinput: {
class: [ class: [
'pr-7 -mr-7', 'pr-7 -mr-7',
@ -53,7 +57,9 @@ 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)]' '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' filtericon: {
class: '-mt-2 absolute top-1/2'
}
} }
} }
` `

19
doc/menubar/theming/TailwindDoc.vue
View File

@ -34,7 +34,9 @@ export default {
} }
] ]
}), }),
menuitem: 'sm:relative sm:w-auto w-full static', menuitem: {
class: 'sm:relative sm:w-auto w-full static'
},
content: ({ props, context }) => ({ content: ({ props, context }) => ({
class: [ class: [
' transition-shadow duration-200', ' transition-shadow duration-200',
@ -58,17 +60,18 @@ export default {
'cursor-pointer flex items-center no-underline overflow-hidden relative', 'cursor-pointer flex items-center no-underline overflow-hidden relative',
'py-3 px-5 select-none', 'py-3 px-5 select-none',
{ {
'max-[960px]:pl-9': context.level === 1, 'pl-9 sm:pl-5': context.level === 1,
'max-[960px]:pl-14': context.level === 2 'pl-14 sm:pl-5': context.level === 2
} }
] ]
}), }),
icon: 'mr-2', icon: {
class: 'mr-2'
},
submenuicon: ({ props }) => ({ submenuicon: ({ props }) => ({
class: [ class: [
'max-[960px]:ml-auto',
{ {
'ml-2': props.root, 'ml-auto sm:ml-2': props.root,
'ml-auto': !props.root 'ml-auto': !props.root
} }
] ]
@ -84,7 +87,9 @@ export default {
} }
] ]
}), }),
separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1', separator: {
class: 'border-t border-gray-300 dark:border-blue-900/40 my-1'
},
button: { button: {
class: [ class: [
'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out', 'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',

46
doc/multiselect/theming/TailwindDoc.vue
View File

@ -35,10 +35,12 @@ export default {
{ 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled } { '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 }) => ({ label: ({ props }) => ({
class: [ 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', 'text-gray-800 dark:text-white/80',
'p-3 transition duration-200', 'p-3 transition duration-200',
{ {
@ -51,7 +53,9 @@ export default {
token: { 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'] 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: { 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'] 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: { closeButton: {
class: [ class: [
'flex items-center justify-center overflow-hidden relative', '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)]' '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: { 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'] 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 }) => ({ item: ({ context }) => ({
class: [ class: [
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', '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, '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': 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-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': 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 '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: { itemgroup: {
class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto'] 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: { filterinput: {
class: [ class: [
'pr-7 -mr-7', '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)]' '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', filtericon: {
clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2', class: '-mt-2 absolute top-1/2'
},
clearicon: {
class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
},
transition: TRANSITIONS.overlay transition: TRANSITIONS.overlay
} }
} }

6
doc/overlaypanel/theming/TailwindDoc.vue
View File

@ -30,12 +30,14 @@ export default {
class: [ class: [
'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'bg-white text-gray-700 border-0 rounded-md shadow-lg',
'z-40 transform origin-center', 'z-40 transform origin-center',
'absolute left-0 top-0', 'absolute left-0 top-0 mt-3',
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900', 'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' 'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
] ]
}, },
content: 'p-5 items-center flex', content: {
class: 'p-5 items-center flex'
},
transition: TRANSITIONS.overlay transition: TRANSITIONS.overlay
} }
} }

18
doc/tabview/theming/TailwindDoc.vue
View File

@ -24,24 +24,26 @@ export default {
{ 'overflow-hidden': props.scrollable } // Overflow condition. { 'overflow-hidden': props.scrollable } // Overflow condition.
] ]
}), }),
navContent: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden', // Overflow and scrollbar styles. navContent: {
class: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden' // Overflow and scrollbar styles.
},
previousButton: { previousButton: {
class: ['h-full flex items-center justify-center absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ]'] // Flex and absolute positioning styles. class: ['h-full flex items-center justify-center !absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ]'] // Flex and absolute positioning styles.
}, },
nextButton: { nextButton: {
class: ['h-full flex items-center justify-center absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex and absolute positioning styles. class: ['h-full flex items-center justify-center !absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex and absolute positioning styles.
}, },
nav: { nav: {
class: ['flex flex-1 list-none m-0 p-0', 'bg-white border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex, list, margin, padding, and border styles. class: ['flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:border-blue-900/40 dark:text-white/80 '] // Flex, list, margin, padding, and border styles.
}, },
tabpanel: { tabpanel: {
header: ({ props }) => ({ header: ({ props }) => ({
class: ['mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }] // Margin and condition-based styles. class: ['mr-0', { 'cursor-default pointer-events-none select-none select-none opacity-60': props?.disabled }] // Margin and condition-based styles.
}), }),
headerAction: ({ parent, context }) => ({ headerAction: ({ parent, context }) => ({
class: [ class: [
'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none select-none', // Flex and overflow styles.
'border-b-2 p-5 font-bold rounded-t-lg transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles.
'transition-colors duration-200', // Transition duration style. 'transition-colors duration-200', // Transition duration style.
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles.
{ {
@ -56,7 +58,7 @@ export default {
class: ['leading-none whitespace-nowrap'] // Leading and whitespace styles. class: ['leading-none whitespace-nowrap'] // Leading and whitespace styles.
}, },
content: { content: {
class: ['bg-white p-5 border-0 text-gray-700 rounded-bl-2xl rounded-br-2xl', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'] // Background, padding, border, and text styles. class: ['bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'] // Background, padding, border, and text styles.
} }
} }
} }