From 03987ed2fdadac5e51bd069b8db4ccbfda8be5c4 Mon Sep 17 00:00:00 2001 From: ATAKAN TEPE Date: Wed, 18 Oct 2023 09:58:43 +0300 Subject: [PATCH] Update TW demos for the new fixes --- doc/button/theming/TailwindDoc.vue | 80 +++++++++++++++--------- doc/confirmpopup/theming/TailwindDoc.vue | 16 +++-- doc/datatable/theming/TailwindDoc.vue | 4 -- doc/dialog/theming/TailwindDoc.vue | 23 ++++--- doc/dropdown/theming/TailwindDoc.vue | 26 +++++--- doc/listbox/theming/TailwindDoc.vue | 24 ++++--- doc/menubar/theming/TailwindDoc.vue | 19 +++--- doc/multiselect/theming/TailwindDoc.vue | 46 +++++++++----- doc/overlaypanel/theming/TailwindDoc.vue | 6 +- doc/tabview/theming/TailwindDoc.vue | 18 +++--- 10 files changed, 168 insertions(+), 94 deletions(-) diff --git a/doc/button/theming/TailwindDoc.vue b/doc/button/theming/TailwindDoc.vue index 51cd43a7b..22afe9b07 100644 --- a/doc/button/theming/TailwindDoc.vue +++ b/doc/button/theming/TailwindDoc.vue @@ -20,48 +20,71 @@ export default { button: { root: ({ props, context }) => ({ 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', - '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-blue-600 bg-transparent border-transparent': props.link + '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)]': + !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, - '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, - '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, - '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, - '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, - '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 + '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)]': + props.severity === 'secondary', + '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)]': + props.severity === 'success', + '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.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 }, { 'rounded-md': !props.rounded, 'rounded-full': props.rounded }, { '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-gray-500 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-orange-500 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-red-500 hover:bg-red-300/20': props.text && props.severity === 'danger' && !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 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, + 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, + 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !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 }, { - '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-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !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-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, - 'text-blue-500 border border-blue-500 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-green-500 border border-green-500 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-purple-500 border border-purple-500 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-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 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 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 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 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 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' }, + { 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' }, { 'opacity-60 pointer-events-none cursor-default': context.disabled } ] }), @@ -72,7 +95,8 @@ export default { 'font-bold', { 'hover:underline': props.link - } + }, + { 'invisible w-0': props.label == null } ] }), icon: ({ props }) => ({ @@ -80,9 +104,9 @@ export default { 'mx-0', { '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, - 'mt-2': props.iconPos == 'bottom' && props.label != null + 'mt-2 order-2': props.iconPos == 'bottom' && props.label != null } ] }), diff --git a/doc/confirmpopup/theming/TailwindDoc.vue b/doc/confirmpopup/theming/TailwindDoc.vue index 1e3cc8199..437f3276d 100644 --- a/doc/confirmpopup/theming/TailwindDoc.vue +++ b/doc/confirmpopup/theming/TailwindDoc.vue @@ -35,10 +35,18 @@ export default { 'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' ] }, - content: 'p-5 items-center flex', - icon: 'text-2xl', - message: 'ml-4', - footer: 'text-right px-5 py-5 pt-0 ', + content: { + class: 'p-5 items-center flex' + }, + 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 } } diff --git a/doc/datatable/theming/TailwindDoc.vue b/doc/datatable/theming/TailwindDoc.vue index d068e35e6..4047bc839 100644 --- a/doc/datatable/theming/TailwindDoc.vue +++ b/doc/datatable/theming/TailwindDoc.vue @@ -331,10 +331,6 @@ export default { diff --git a/doc/dialog/theming/TailwindDoc.vue b/doc/dialog/theming/TailwindDoc.vue index ad70bcb5c..b39a3131b 100644 --- a/doc/dialog/theming/TailwindDoc.vue +++ b/doc/dialog/theming/TailwindDoc.vue @@ -32,8 +32,12 @@ export default { 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'] }, - headerTitle: 'font-bold text-lg', - headerIcons: 'flex items-center', + headerTitle: { + class: 'font-bold text-lg' + }, + headerIcons: { + class: 'flex items-center' + }, closeButton: { class: [ '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)]' ] }, - closeButtonIcon: 'w-4 h-4 inline-block', - content: ({ state }) => ({ + closeButtonIcon: { + class: 'w-4 h-4 inline-block' + }, + content: ({ state, instance }) => ({ class: [ 'overflow-y-auto', '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 + }, + { + 'rounded-bl-lg rounded-br-lg': !instance.$slots.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 }) => ({ class: ['transition duration-200', { 'bg-black/40': props.modal }] diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/dropdown/theming/TailwindDoc.vue index afa71e936..7a254153a 100644 --- a/doc/dropdown/theming/TailwindDoc.vue +++ b/doc/dropdown/theming/TailwindDoc.vue @@ -39,7 +39,7 @@ export default { }), input: ({ props }) => ({ 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', 'dark:text-white/80', 'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base', @@ -53,17 +53,17 @@ export default { 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 } ] @@ -74,7 +74,9 @@ export default { 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'] }, - filtercontainer: 'relative', + filtercontainer: { + class: 'relative' + }, filterinput: { class: [ '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)]' ] }, - 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 } } diff --git a/doc/listbox/theming/TailwindDoc.vue b/doc/listbox/theming/TailwindDoc.vue index 791f5a903..19287fa2a 100644 --- a/doc/listbox/theming/TailwindDoc.vue +++ b/doc/listbox/theming/TailwindDoc.vue @@ -21,18 +21,20 @@ export default { 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'] }, - wrapper: 'overflow-auto', - list: 'py-3 list-none m-0', + wrapper: { + class: 'overflow-auto' + }, + 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 } ] @@ -43,7 +45,9 @@ export default { 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'] }, - filtercontainer: 'relative', + filtercontainer: { + class: 'relative' + }, filterinput: { class: [ '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)]' ] }, - filtericon: '-mt-2 absolute top-1/2' + filtericon: { + class: '-mt-2 absolute top-1/2' + } } } ` diff --git a/doc/menubar/theming/TailwindDoc.vue b/doc/menubar/theming/TailwindDoc.vue index 2e6906f4b..89c7342c5 100644 --- a/doc/menubar/theming/TailwindDoc.vue +++ b/doc/menubar/theming/TailwindDoc.vue @@ -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 }) => ({ class: [ ' transition-shadow duration-200', @@ -58,17 +60,18 @@ export default { 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none', { - 'max-[960px]:pl-9': context.level === 1, - 'max-[960px]:pl-14': context.level === 2 + 'pl-9 sm:pl-5': context.level === 1, + 'pl-14 sm:pl-5': context.level === 2 } ] }), - icon: 'mr-2', + icon: { + class: 'mr-2' + }, submenuicon: ({ props }) => ({ class: [ - 'max-[960px]:ml-auto', { - 'ml-2': props.root, + 'ml-auto sm:ml-2': 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: { class: [ 'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out', diff --git a/doc/multiselect/theming/TailwindDoc.vue b/doc/multiselect/theming/TailwindDoc.vue index 7d2cf674b..ff88079fd 100644 --- a/doc/multiselect/theming/TailwindDoc.vue +++ b/doc/multiselect/theming/TailwindDoc.vue @@ -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 } } diff --git a/doc/overlaypanel/theming/TailwindDoc.vue b/doc/overlaypanel/theming/TailwindDoc.vue index ea095aea6..b60d825c7 100644 --- a/doc/overlaypanel/theming/TailwindDoc.vue +++ b/doc/overlaypanel/theming/TailwindDoc.vue @@ -30,12 +30,14 @@ export default { class: [ 'bg-white text-gray-700 border-0 rounded-md shadow-lg', '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', '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 } } diff --git a/doc/tabview/theming/TailwindDoc.vue b/doc/tabview/theming/TailwindDoc.vue index f209cb6c2..ad5c8bea8 100644 --- a/doc/tabview/theming/TailwindDoc.vue +++ b/doc/tabview/theming/TailwindDoc.vue @@ -24,24 +24,26 @@ export default { { '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: { - 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: { - 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: { - 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: { 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 }) => ({ class: [ - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-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. + '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-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. '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. { @@ -56,7 +58,7 @@ export default { class: ['leading-none whitespace-nowrap'] // Leading and whitespace styles. }, 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. } } }