From dba00a6d9be0dc782e776522f56afc0ff98933e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Sun, 30 Jul 2023 21:20:52 +0300 Subject: [PATCH 01/40] Update theming tab render condition --- components/doc/DocComponent.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/DocComponent.vue b/components/doc/DocComponent.vue index a5bf8746c..4067dcd42 100644 --- a/components/doc/DocComponent.vue +++ b/components/doc/DocComponent.vue @@ -12,7 +12,7 @@
    • -
  • +
  • From 8047671b39f5ff586a5f536ce31d1d938ef69a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Sun, 30 Jul 2023 21:22:49 +0300 Subject: [PATCH 02/40] Refactor #4211 - For Button --- components/lib/button/Button.d.ts | 1 + components/lib/button/Button.vue | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/components/lib/button/Button.d.ts b/components/lib/button/Button.d.ts index eefbbc294..7b69e3243 100755 --- a/components/lib/button/Button.d.ts +++ b/components/lib/button/Button.d.ts @@ -20,6 +20,7 @@ export interface ButtonPassThroughMethodOptions { instance: any; props: ButtonProps; context: ButtonContext; + parent: any; } /** diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue index ddc6062e5..bf7e50a8f 100755 --- a/components/lib/button/Button.vue +++ b/components/lib/button/Button.vue @@ -26,6 +26,10 @@ export default { methods: { getPTOptions(key) { return this.ptm(key, { + parent: { + props: this.$parent?.$props, + state: this.$parent?.$data + }, context: { disabled: this.disabled } From b435070ee8a75c25cf6d06ff9ffa2529575370d2 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Sun, 30 Jul 2023 18:23:38 +0000 Subject: [PATCH 03/40] Update API doc --- doc/common/apidoc/index.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 3bfdb23ce..f3e698e41 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -5148,6 +5148,13 @@ "readonly": false, "type": "ButtonContext", "default": "" + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "any", + "default": "" } ], "methods": [] From 63dd7d7f830a397adcaeb95c065cb08458e06e6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 31 Jul 2023 09:18:21 +0300 Subject: [PATCH 04/40] Refactor #4211 - For Calendar --- components/lib/calendar/Calendar.d.ts | 70 +++++++++++++++++++++++++++ components/lib/calendar/Calendar.vue | 53 +++++++++++++++++--- 2 files changed, 117 insertions(+), 6 deletions(-) diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts index b5f9bf05d..7387dc47d 100755 --- a/components/lib/calendar/Calendar.d.ts +++ b/components/lib/calendar/Calendar.d.ts @@ -21,6 +21,7 @@ export interface CalendarPassThroughMethodOptions { instance: any; props: CalendarProps; state: CalendarState; + context: CalendarContext; } /** @@ -344,6 +345,75 @@ export interface CalendarState { currentView: string; } +/** + * Defines current options in Calendar component. + */ +export interface CalendarContext { + /** + * Current date. + */ + date: string | Date | string[] | Date[] | undefined | null; + /** + * Current today state of the calendar's day. + * @defaultValue false + */ + today: boolean; + /** + * Current other month state of the calendar's day. + */ + otherMonth: boolean; + /** + * Current selected state of the calendar's day or month or year. + * @defaultValue false + */ + selected: boolean; + /** + * Current disabled state of the calendar's day or month or year. + * @defaultValue false + */ + disabled: boolean; + /** + * Current month state. + */ + month: CalendarMonthOptions; + /** + * Current month index state. + */ + monthIndex: number; + /** + * Current year state. + */ + year: CalendarYearOptions; +} + +/** + * Defines cuurent month options. + */ +export interface CalendarMonthOptions { + /** + * Month value. + */ + value: string; + /** + * Selectable state of the month. + */ + selectable: boolean; +} + +/** + * Defines current year options. + */ +export interface CalendarYearOptions { + /** + * Year value. + */ + value: number; + /** + * Selectable state of the month. + */ + selectable: boolean; +} + /** * Defines valid properties in Calendar component. */ diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue index e261c13e8..83d70e695 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -134,7 +134,7 @@ - -
    + {{ weekHeaderLabel }} @@ -145,12 +145,28 @@
    - + 0 {{ month.weekNumbers[i] }} + @@ -183,7 +207,16 @@ @click="onMonthSelect($event, { month: m, index: i })" @keydown="onMonthCellKeydown($event, { month: m, index: i })" :class="cx('month', { month: m, index: i })" - v-bind="ptm('month')" + v-bind=" + ptm('month', { + context: { + month: m, + monthIndex: i, + selected: isMonthSelected(i), + disabled: !m.selectable + } + }) + " :data-p-disabled="!m.selectable" :data-p-highlight="isMonthSelected(i)" > @@ -201,7 +234,15 @@ @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event, y)" :class="cx('year', { year: y })" - v-bind="ptm('year')" + v-bind=" + ptm('year', { + context: { + year: y, + selected: isYearSelected(y.value), + disabled: !y.selectable + } + }) + " :data-p-disabled="!y.selectable" :data-p-highlight="isYearSelected(y.value)" > From 9bc19994296134b5efca65eab01299c9b026bdea Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 31 Jul 2023 06:33:38 +0000 Subject: [PATCH 05/40] Update API doc --- doc/common/apidoc/index.json | 124 +++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index f3e698e41..41c6120b9 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -5507,6 +5507,13 @@ "readonly": false, "type": "CalendarState", "default": "" + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "CalendarContext", + "default": "" } ], "methods": [] @@ -6094,6 +6101,123 @@ ], "methods": [] }, + "CalendarContext": { + "description": "Defines current options in Calendar component.", + "relatedProp": "", + "props": [ + { + "name": "date", + "optional": false, + "readonly": false, + "type": "undefined | null | string | string[] | Date | Date[]", + "default": "", + "description": "Current date." + }, + { + "name": "today", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Current today state of the calendar's day." + }, + { + "name": "otherMonth", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current other month state of the calendar's day." + }, + { + "name": "selected", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Current selected state of the calendar's day or month or year." + }, + { + "name": "disabled", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Current disabled state of the calendar's day or month or year." + }, + { + "name": "month", + "optional": false, + "readonly": false, + "type": "CalendarMonthOptions", + "default": "", + "description": "Current month state." + }, + { + "name": "monthIndex", + "optional": false, + "readonly": false, + "type": "number", + "default": "", + "description": "Current month index state." + }, + { + "name": "year", + "optional": false, + "readonly": false, + "type": "CalendarYearOptions", + "default": "", + "description": "Current year state." + } + ], + "methods": [] + }, + "CalendarMonthOptions": { + "description": "Defines cuurent month options.", + "relatedProp": "", + "props": [ + { + "name": "value", + "optional": false, + "readonly": false, + "type": "string", + "default": "", + "description": "Month value." + }, + { + "name": "selectable", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Selectable state of the month." + } + ], + "methods": [] + }, + "CalendarYearOptions": { + "description": "Defines current year options.", + "relatedProp": "", + "props": [ + { + "name": "value", + "optional": false, + "readonly": false, + "type": "number", + "default": "", + "description": "Year value." + }, + { + "name": "selectable", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Selectable state of the month." + } + ], + "methods": [] + }, "CalendarProps": { "description": "Defines valid properties in Calendar component.", "relatedProp": "", From d993b4f6f31d78f423995d03d75bfbd9967e12f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 31 Jul 2023 10:47:30 +0300 Subject: [PATCH 06/40] Refactor #4211 - For Tooltip --- components/lib/tooltip/BaseTooltip.js | 12 ++--------- components/lib/tooltip/Tooltip.d.ts | 31 ++++++++++++++++++++++++++- components/lib/tooltip/Tooltip.js | 20 ++++++++++++++--- 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/components/lib/tooltip/BaseTooltip.js b/components/lib/tooltip/BaseTooltip.js index ff533b35e..edf448477 100644 --- a/components/lib/tooltip/BaseTooltip.js +++ b/components/lib/tooltip/BaseTooltip.js @@ -20,8 +20,8 @@ const styles = ` } .p-tooltip .p-tooltip-text { - white-space: pre-line; - word-break: break-word; + white-space: pre-line; + word-break: break-word; } .p-tooltip-arrow { @@ -33,15 +33,11 @@ const styles = ` } .p-tooltip-right .p-tooltip-arrow { - top: 50%; - left: 0; margin-top: -.25rem; border-width: .25em .25em .25em 0; } .p-tooltip-left .p-tooltip-arrow { - top: 50%; - right: 0; margin-top: -.25rem; border-width: .25em 0 .25em .25rem; } @@ -51,15 +47,11 @@ const styles = ` } .p-tooltip-top .p-tooltip-arrow { - bottom: 0; - left: 50%; margin-left: -.25rem; border-width: .25em .25em 0; } .p-tooltip-bottom .p-tooltip-arrow { - top: 0; - left: 50%; margin-left: -.25rem; border-width: 0 .25em .25rem; } diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts index 59a591838..1920f63e5 100755 --- a/components/lib/tooltip/Tooltip.d.ts +++ b/components/lib/tooltip/Tooltip.d.ts @@ -10,7 +10,14 @@ import { DirectiveBinding, ObjectDirective } from 'vue'; import { DirectiveHooks } from '../basedirective'; -export declare type TooltipDirectivePassThroughOptionType = TooltipDirectivePassThroughAttributes | null | undefined; +export declare type TooltipDirectivePassThroughOptionType = TooltipDirectivePassThroughAttributes | ((options: TooltipPassThroughMethodOptions) => TooltipDirectivePassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TooltipPassThroughMethodOptions { + context: TooltipContext; +} /** * Defines options of Tooltip. @@ -96,6 +103,28 @@ export interface TooltipDirectivePassThroughAttributes { [key: string]: any; } +/** + * Defines current options in Tooltip directive. + */ +export interface TooltipContext { + /** + * Current top position state as a boolean. + */ + top: boolean; + /** + * Current right position state as a boolean. + */ + right: boolean; + /** + * Current bottom position state as a boolean. + */ + bottom: boolean; + /** + * Current left position state as a boolean. + */ + left: boolean; +} + /** * Defines modifiers of Tooltip. */ diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 2a44a3465..31668a6dd 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -225,14 +225,26 @@ const Tooltip = BaseTooltip.extend('tooltip', { return document.getElementById(el.$_ptooltipId); }, create(el, options) { + const modifiers = el.$_ptooltipModifiers; + const tooltipArrow = DomHandler.createElement('div', { class: !el.unstyled && this.cx('arrow'), - 'p-bind': this.ptm('arrow') + style: { + top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null, + bottom: modifiers?.top ? '0' : null, + left: modifiers?.right || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '0' : modifiers?.top || modifiers?.bottom ? '50%' : null, + right: modifiers?.left ? '0' : null + }, + 'p-bind': this.ptm('arrow', { + context: modifiers + }) }); const tooltipText = DomHandler.createElement('div', { class: !el.unstyled && this.cx('text'), - 'p-bind': this.ptm('text') + 'p-bind': this.ptm('text', { + context: modifiers + }) }); if (el.$_ptooltipEscape) { @@ -252,7 +264,9 @@ const Tooltip = BaseTooltip.extend('tooltip', { width: el.$_ptooltipFitContent ? 'fit-content' : undefined }, class: [!el.unstyled && this.cx('root'), el.$_ptooltipClass], - 'p-bind': this.ptm('root') + 'p-bind': this.ptm('root', { + context: modifiers + }) }, tooltipArrow, tooltipText From 6b8766f22e8de1544a08f203710fdde755cd8b05 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 31 Jul 2023 07:48:10 +0000 Subject: [PATCH 07/40] Update API doc --- doc/common/apidoc/index.json | 55 +++++++++++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 41c6120b9..871e2eebe 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -42895,6 +42895,20 @@ "methodDescription": "Defines methods that can be accessed by the component's reference.", "typeDescription": "Defines the custom types used by the module.", "values": { + "TooltipPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "context", + "optional": false, + "readonly": false, + "type": "TooltipContext", + "default": "" + } + ], + "methods": [] + }, "TooltipOptions": { "description": "Defines options of Tooltip.", "relatedProp": "", @@ -43034,6 +43048,45 @@ ], "methods": [] }, + "TooltipContext": { + "description": "Defines current options in Tooltip directive.", + "relatedProp": "", + "props": [ + { + "name": "top", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current top position state as a boolean." + }, + { + "name": "right", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current right position state as a boolean." + }, + { + "name": "bottom", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current bottom position state as a boolean." + }, + { + "name": "left", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current left position state as a boolean." + } + ], + "methods": [] + }, "TooltipDirectiveModifiers": { "description": "Defines modifiers of Tooltip.", "relatedProp": "", @@ -43111,7 +43164,7 @@ "description": "Defines the custom types used by the module.", "values": { "TooltipDirectivePassThroughOptionType": { - "values": "TooltipDirectivePassThroughAttributes | null | undefined" + "values": "TooltipDirectivePassThroughAttributes | (options: TooltipPassThroughMethodOptions) => TooltipDirectivePassThroughAttributes | null | undefined" } } } From 616c3c9356dcced9392c2ca565e92bf49911354e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 31 Jul 2023 13:21:32 +0300 Subject: [PATCH 08/40] PrimeOne version updates for UI Kit page --- pages/uikit/index.vue | 55 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue index 66a4c4240..232d5574f 100644 --- a/pages/uikit/index.vue +++ b/pages/uikit/index.vue @@ -37,10 +37,14 @@ Interactive Components -
  • +
  • Boolean, Instance Swap and Text Properties
    • +
  • + + Nested Instances +
    • @@ -73,7 +77,7 @@ PrimeVue Designer -
    +
    PrimeVue Designer
    @@ -94,24 +98,49 @@
    +
    +
    +
    TOKENS STUDIO
    +
    Tokens Support
    +

    Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.

    + +
      +
    • + + Countless Design Tokens +
      • +
    • + + Light and Dark Sets +
      • +
    • + + Well Documented +
      • +
    +
    +
    + Tokens Support +
    +
    Preview Light - PrimeVue Designer + Figma Light Preview Dark - PrimeVue Designer + Figma Dark
    @@ -144,6 +173,10 @@ Interactive Components +
  • + + Tokens Studio Support +
  • Lifetime Support @@ -184,6 +217,10 @@ Interactive Components
    • +
  • + + Tokens Studio Support +
  • Lifetime Support @@ -224,6 +261,10 @@ Interactive Components
    • +
  • + + Tokens Studio Support +
  • Lifetime Support @@ -299,7 +340,7 @@ export default { }, computed: { coverImage() { - const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpg' : 'images/uikit/primeone-cover-light.jpg'; + const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg'; return 'https://primefaces.org/cdn/primevue/' + image; } From f8bffa473dccbf582482d116fbe81b460aa933d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 31 Jul 2023 14:24:02 +0300 Subject: [PATCH 09/40] Refactor #4211 - For Badge Directive --- .../lib/badgedirective/BadgeDirective.d.ts | 32 ++++++++++++++++++- .../lib/badgedirective/BadgeDirective.js | 4 ++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/components/lib/badgedirective/BadgeDirective.d.ts b/components/lib/badgedirective/BadgeDirective.d.ts index 518e3144a..b86c7baee 100644 --- a/components/lib/badgedirective/BadgeDirective.d.ts +++ b/components/lib/badgedirective/BadgeDirective.d.ts @@ -9,7 +9,14 @@ import { DirectiveBinding, ObjectDirective } from 'vue'; import { DirectiveHooks } from '../basedirective'; -export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | null | undefined; +export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgeDirectivePassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface BadgePassThroughMethodOptions { + context: BadgeContext; +} /** * Defines options of Badge. @@ -50,6 +57,29 @@ export interface BadgeDirectivePassThroughAttributes { [key: string]: any; } +/** + * Defines current options in Badge directive. + */ +export interface BadgeContext { + /** + * Current info state as a boolean. + * @defaultValue true + */ + info: boolean; + /** + * Current success state as a boolean. + */ + success: boolean; + /** + * Current warning state as a boolean. + */ + warning: boolean; + /** + * Current danger state as a boolean. + */ + danger: boolean; +} + /** * Defines modifiers of Badge directive. */ diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js index dbc1bf433..c30a4d454 100644 --- a/components/lib/badgedirective/BadgeDirective.js +++ b/components/lib/badgedirective/BadgeDirective.js @@ -10,7 +10,9 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { const badge = DomHandler.createElement('span', { id, class: !el.unstyled && this.cx('root'), - 'p-bind': this.ptm('root') + 'p-bind': this.ptm('root', { + context: binding.modifiers + }) }); el.$_pbadgeId = badge.getAttribute('id'); From f37a0a783e4e11ff0dedf771931f6c261d256d94 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 31 Jul 2023 11:24:40 +0000 Subject: [PATCH 10/40] Update API doc --- doc/common/apidoc/index.json | 55 +++++++++++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 871e2eebe..c96f13cc1 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -4231,6 +4231,20 @@ "methodDescription": "Defines methods that can be accessed by the component's reference.", "typeDescription": "Defines the custom types used by the module.", "values": { + "BadgePassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "context", + "optional": false, + "readonly": false, + "type": "BadgeContext", + "default": "" + } + ], + "methods": [] + }, "BadgeDirectiveOptions": { "description": "Defines options of Badge.", "relatedProp": "", @@ -4290,6 +4304,45 @@ ], "methods": [] }, + "BadgeContext": { + "description": "Defines current options in Badge directive.", + "relatedProp": "", + "props": [ + { + "name": "info", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Current info state as a boolean." + }, + { + "name": "success", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current success state as a boolean." + }, + { + "name": "warning", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current warning state as a boolean." + }, + { + "name": "danger", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current danger state as a boolean." + } + ], + "methods": [] + }, "BadgeDirectiveModifiers": { "description": "Defines modifiers of Badge directive.", "relatedProp": "", @@ -4359,7 +4412,7 @@ "description": "Defines the custom types used by the module.", "values": { "BadgeDirectivePassThroughOptionType": { - "values": "BadgeDirectivePassThroughAttributes | null | undefined" + "values": "BadgeDirectivePassThroughAttributes | (options: BadgePassThroughMethodOptions) => BadgeDirectivePassThroughAttributes | null | undefined" } } } From 392f1476f0beb946162083c92a6b9e4f3c9129af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 31 Jul 2023 15:12:50 +0300 Subject: [PATCH 11/40] Refactor #4211 - For Badge Directive --- components/lib/badgedirective/BadgeDirective.d.ts | 11 +++++++++++ components/lib/badgedirective/BadgeDirective.js | 6 +++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/components/lib/badgedirective/BadgeDirective.d.ts b/components/lib/badgedirective/BadgeDirective.d.ts index b86c7baee..96d2296b0 100644 --- a/components/lib/badgedirective/BadgeDirective.d.ts +++ b/components/lib/badgedirective/BadgeDirective.d.ts @@ -68,16 +68,27 @@ export interface BadgeContext { info: boolean; /** * Current success state as a boolean. + * @defaultValue false */ success: boolean; /** * Current warning state as a boolean. + * @defaultValue false */ warning: boolean; /** * Current danger state as a boolean. + * @defaultValue false */ danger: boolean; + /** + * Current gutter state as a boolean. + */ + nogutter: boolean; + /** + * Current dot state as a boolean. + */ + dot: boolean; } /** diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js index c30a4d454..b032fb191 100644 --- a/components/lib/badgedirective/BadgeDirective.js +++ b/components/lib/badgedirective/BadgeDirective.js @@ -11,7 +11,11 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { id, class: !el.unstyled && this.cx('root'), 'p-bind': this.ptm('root', { - context: binding.modifiers + context: { + ...binding.modifiers, + nogutter: String(binding.value).length === 1, + dot: binding.value == null + } }) }); From ea94a658b3805a41930ff379fd5daccbac8e60be Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 31 Jul 2023 12:13:28 +0000 Subject: [PATCH 12/40] Update API doc --- doc/common/apidoc/index.json | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index c96f13cc1..c68e472f0 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -4321,7 +4321,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "", + "default": "false", "description": "Current success state as a boolean." }, { @@ -4329,7 +4329,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "", + "default": "false", "description": "Current warning state as a boolean." }, { @@ -4337,8 +4337,24 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "", + "default": "false", "description": "Current danger state as a boolean." + }, + { + "name": "nogutter", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current gutter state as a boolean." + }, + { + "name": "dot", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Current dot state as a boolean." } ], "methods": [] From ac11444e3c8cb96ad7c14b506e8ed7d34f51b581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 31 Jul 2023 16:02:48 +0300 Subject: [PATCH 13/40] Toast and InlineMessage unstyled demo updates --- .../{StyleDoc.vue => theming/StyledDoc.vue} | 0 doc/inlinemessage/theming/UnstyledDoc.vue | 29 +++++++++++ doc/inlinemessage/theming/index.vue | 33 ++++++++++++ .../{StyleDoc.vue => theming/StyledDoc.vue} | 0 doc/toast/theming/UnstyledDoc.vue | 50 +++++++++++++++++++ doc/toast/theming/index.vue | 33 ++++++++++++ pages/inlinemessage/index.vue | 11 ++-- pages/toast/index.vue | 12 ++--- 8 files changed, 153 insertions(+), 15 deletions(-) rename doc/inlinemessage/{StyleDoc.vue => theming/StyledDoc.vue} (100%) create mode 100644 doc/inlinemessage/theming/UnstyledDoc.vue create mode 100644 doc/inlinemessage/theming/index.vue rename doc/toast/{StyleDoc.vue => theming/StyledDoc.vue} (100%) create mode 100644 doc/toast/theming/UnstyledDoc.vue create mode 100644 doc/toast/theming/index.vue diff --git a/doc/inlinemessage/StyleDoc.vue b/doc/inlinemessage/theming/StyledDoc.vue similarity index 100% rename from doc/inlinemessage/StyleDoc.vue rename to doc/inlinemessage/theming/StyledDoc.vue diff --git a/doc/inlinemessage/theming/UnstyledDoc.vue b/doc/inlinemessage/theming/UnstyledDoc.vue new file mode 100644 index 000000000..69d6fea67 --- /dev/null +++ b/doc/inlinemessage/theming/UnstyledDoc.vue @@ -0,0 +1,29 @@ + + + diff --git a/doc/inlinemessage/theming/index.vue b/doc/inlinemessage/theming/index.vue new file mode 100644 index 000000000..326acc008 --- /dev/null +++ b/doc/inlinemessage/theming/index.vue @@ -0,0 +1,33 @@ + + + diff --git a/doc/toast/StyleDoc.vue b/doc/toast/theming/StyledDoc.vue similarity index 100% rename from doc/toast/StyleDoc.vue rename to doc/toast/theming/StyledDoc.vue diff --git a/doc/toast/theming/UnstyledDoc.vue b/doc/toast/theming/UnstyledDoc.vue new file mode 100644 index 000000000..079e9d726 --- /dev/null +++ b/doc/toast/theming/UnstyledDoc.vue @@ -0,0 +1,50 @@ + + + diff --git a/doc/toast/theming/index.vue b/doc/toast/theming/index.vue new file mode 100644 index 000000000..7e1b782ec --- /dev/null +++ b/doc/toast/theming/index.vue @@ -0,0 +1,33 @@ + + + diff --git a/pages/inlinemessage/index.vue b/pages/inlinemessage/index.vue index fd5bc404d..74f7b5e65 100644 --- a/pages/inlinemessage/index.vue +++ b/pages/inlinemessage/index.vue @@ -6,6 +6,7 @@ :componentDocs="docs" :apiDocs="['InlineMessage']" :ptTabComponent="ptComponent" + :themingDocs="themingDoc" /> @@ -15,9 +16,9 @@ import BasicDoc from '@/doc/inlinemessage/BasicDoc.vue'; import FormDoc from '@/doc/inlinemessage/FormDoc.vue'; import ImportDoc from '@/doc/inlinemessage/ImportDoc.vue'; import SeverityDoc from '@/doc/inlinemessage/SeverityDoc.vue'; -import StyleDoc from '@/doc/inlinemessage/StyleDoc.vue'; import TemplateDoc from '@/doc/inlinemessage/TemplateDoc.vue'; import PTComponent from '@/doc/inlinemessage/pt/index.vue'; +import ThemingDoc from '@/doc/inlinemessage/theming/index.vue'; export default { data() { @@ -48,18 +49,14 @@ export default { label: 'Template', component: TemplateDoc }, - { - id: 'style', - label: 'Style', - component: StyleDoc - }, { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc } ], - ptComponent: PTComponent + ptComponent: PTComponent, + themingDoc: ThemingDoc }; } }; diff --git a/pages/toast/index.vue b/pages/toast/index.vue index c05ef233b..65aaecb30 100755 --- a/pages/toast/index.vue +++ b/pages/toast/index.vue @@ -1,5 +1,5 @@ diff --git a/doc/dataview/theming/UnstyledDoc.vue b/doc/dataview/theming/UnstyledDoc.vue index 7147f4a26..7cdc43fbe 100644 --- a/doc/dataview/theming/UnstyledDoc.vue +++ b/doc/dataview/theming/UnstyledDoc.vue @@ -19,31 +19,31 @@ export default {
    diff --git a/doc/picklist/theming/UnstyledDoc.vue b/doc/picklist/theming/UnstyledDoc.vue index f9e89aea1..6bcff37fc 100644 --- a/doc/picklist/theming/UnstyledDoc.vue +++ b/doc/picklist/theming/UnstyledDoc.vue @@ -21,15 +21,15 @@ export default { From 23695acd2b352813c280a79a8327d99fe4b96b7b Mon Sep 17 00:00:00 2001 From: ATAKAN TEPE Date: Tue, 1 Aug 2023 07:54:51 +0300 Subject: [PATCH 16/40] update TW theme --- components/lib/tailwind/Tailwind.js | 229 +++++++++++++++++++++++----- 1 file changed, 193 insertions(+), 36 deletions(-) diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js index 3e7fcb211..b2f9ffe47 100644 --- a/components/lib/tailwind/Tailwind.js +++ b/components/lib/tailwind/Tailwind.js @@ -480,6 +480,7 @@ export default { class: [ '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_4px_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_4px_rgba(147,197,253,0.5)]', { '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 @@ -580,14 +581,100 @@ export default { } }, splitbutton: { - root: { - class: ['inline-flex relative', 'rounded-md'] + root: ({ props }) => ({ + class: ['inline-flex relative', 'rounded-md', { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }] + }), + button: { + root: ({ parent }) => ({ + class: [ + console.log(parent.props.plain), + 'min-[0px]:rounded-r-none', + { 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.severity == 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': parent.props.severity == 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': parent.props.severity == 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': parent.props.severity == 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': parent.props.severity == 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + { 'shadow-lg': parent.props.raised }, + { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, + { + 'bg-transparent border-transparent': parent.props.text && !parent.props.plain, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == null && !parent.props.plain, + 'text-gray-500 hover:bg-gray-300/20': parent.props.text && parent.props.severity == 'secondary' && !parent.props.plain, + 'text-green-500 hover:bg-green-300/20': parent.props.text && parent.props.severity == 'success' && !parent.props.plain, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == 'info' && !parent.props.plain, + 'text-orange-500 hover:bg-orange-300/20': parent.props.text && parent.props.severity == 'warning' && !parent.props.plain, + 'text-purple-500 hover:bg-purple-300/20': parent.props.text && parent.props.severity == 'help' && !parent.props.plain, + 'text-red-500 hover:bg-red-300/20': parent.props.text && parent.props.severity == 'danger' && !parent.props.plain + }, + { 'shadow-lg': parent.props.raised && parent.props.text }, + { + 'text-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.text, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.outlined, + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.plain & !parent.props.outlined & !parent.props.text + }, + { + 'bg-transparent border': parent.props.outlined && !parent.props.plain, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == null && !parent.props.plain, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined && parent.props.severity == 'secondary' && !parent.props.plain, + 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity == 'success' && !parent.props.plain, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == 'info' && !parent.props.plain, + 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity == 'warning' && !parent.props.plain, + 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity == 'help' && !parent.props.plain, + 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity == 'danger' && !parent.props.plain + }, + { 'px-4 py-3 text-base': parent.props.size == null, 'text-xs py-2 px-3': parent.props.size == 'small', 'text-xl py-3 px-4': parent.props.size == 'large' } + ] + }) }, - button: ({ props, context }) => ({ - root: { - class: ['first:flex-1 first:rounded-r-none first:border-r-0', 'border-r-0'] - } - }) + menubutton: { + root: ({ parent }) => ({ + class: [ + 'min-[0px]:rounded-l-none', + { 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.severity == 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': parent.props.severity == 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': parent.props.severity == 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': parent.props.severity == 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': parent.props.severity == 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + { 'shadow-lg': parent.props.raised }, + { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, + { + 'bg-transparent border-transparent': parent.props.text && !parent.props.plain, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == null && !parent.props.plain, + 'text-gray-500 hover:bg-gray-300/20': parent.props.text && parent.props.severity == 'secondary' && !parent.props.plain, + 'text-green-500 hover:bg-green-300/20': parent.props.text && parent.props.severity == 'success' && !parent.props.plain, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == 'info' && !parent.props.plain, + 'text-orange-500 hover:bg-orange-300/20': parent.props.text && parent.props.severity == 'warning' && !parent.props.plain, + 'text-purple-500 hover:bg-purple-300/20': parent.props.text && parent.props.severity == 'help' && !parent.props.plain, + 'text-red-500 hover:bg-red-300/20': parent.props.text && parent.props.severity == 'danger' && !parent.props.plain + }, + { 'shadow-lg': parent.props.raised && parent.props.text }, + { + 'text-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.text, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.outlined, + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.plain & !parent.props.outlined & !parent.props.text + }, + { + 'bg-transparent border': parent.props.outlined && !parent.props.plain, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == null && !parent.props.plain, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined && parent.props.severity == 'secondary' && !parent.props.plain, + 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity == 'success' && !parent.props.plain, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == 'info' && !parent.props.plain, + 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity == 'warning' && !parent.props.plain, + 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity == 'help' && !parent.props.plain, + 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity == 'danger' && !parent.props.plain + }, + { 'px-4 py-3 text-base': parent.props.size == null, 'text-xs py-2 px-3': parent.props.size == 'small', 'text-xl py-3 px-4': parent.props.size == 'large' } + ] + }) + } }, //FORMS @@ -806,7 +893,7 @@ export default { class: [ 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', - { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue }, + { 'border-gray-300 bg-white dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue }, { 'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[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)]': !props.disabled, 'cursor-default opacity-60': props.disabled @@ -886,39 +973,39 @@ export default { } }, calendar: { - root: { - class: ['inline-flex max-w-full relative'] - }, + root: ({ props }) => ({ + class: ['inline-flex max-w-full relative', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }] + }), input: { - class: ['font-sans text-base text-gray-600 bg-white p-3 border border-gray-300 transition-colors duration-200 appearance-none rounded-lg', 'hover:border-blue-500 '] - }, - panel: { - class: ['bg-white border-0 shadow-md', 'absolute min-w-[350px]'] + class: ['font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg', 'hover:border-blue-500 '] }, + panel: ({ props }) => ({ + class: ['bg-white dark:bg-gray-900', 'min-w-[350px]', { 'shadow-md border-0 absolute': !props.inline, 'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline }] + }), header: { - class: ['flex items-center justify-between', 'p-2 text-gray-700 bg-white font-semibold m-0 border-b border-gray-300 rounded-t-lg'] + class: ['flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg'] }, previousbutton: { class: [ 'flex items-center justify-center cursor-pointer overflow-hidden relative', - 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', - 'hover:text-gray-700 hover:border-transparent hover:bg-gray-200' + 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', + 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ] }, title: { class: ['leading-8 mx-auto'] }, monthTitle: { - class: ['text-gray-700 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500'] + class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500'] }, yearTitle: { - class: ['text-gray-700 transition duration-200 font-semibold p-2', 'hover:text-blue-500'] + class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500'] }, nextbutton: { class: [ 'flex items-center justify-center cursor-pointer overflow-hidden relative', - 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', - 'hover:text-gray-700 hover:border-transparent hover:bg-gray-200' + 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', + 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ] }, table: { @@ -927,11 +1014,81 @@ export default { tableheadercell: { class: ['p-2'] }, + weekday: { + class: ['text-gray-600 dark:text-white/70'] + }, day: { class: ['p-2'] }, - daylabel: { - class: ['w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', 'flex items-center cursor-pointer justify-center mx-auto overflow-hidden relative'] + daylabel: ({ context }) => ({ + class: [ + console.log(context.disabled), + 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', + 'flex items-center cursor-pointer justify-center mx-auto overflow-hidden relative', + '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)]', + { 'opacity-60 cursor-default': context.disabled, 'cursor-pointer': !context.disabled }, + { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } + ] + }), + monthpicker: { + class: ['my-2'] + }, + month: ({ context }) => ({ + class: [ + 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', + 'p-2 transition-shadow duration-200 rounded-lg', + '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)]', + { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } + ] + }), + yearpicker: { + class: ['my-2'] + }, + year: ({ context }) => ({ + class: [ + 'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', + 'p-2 transition-shadow duration-200 rounded-lg', + '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)]', + { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } + ] + }), + timepicker: { + class: ['flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2'] + }, + separatorcontainer: { + class: ['flex items-center flex-col px-2'] + }, + separator: { + class: ['text-xl'] + }, + hourpicker: { + class: ['flex items-center flex-col px-2'] + }, + minutepicker: { + class: ['flex items-center flex-col px-2'] + }, + ampmpicker: { + class: ['flex items-center flex-col px-2'] + }, + incrementbutton: { + class: [ + 'flex items-center justify-center cursor-pointer overflow-hidden relative', + 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', + 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' + ] + }, + decrementbutton: { + class: [ + 'flex items-center justify-center cursor-pointer overflow-hidden relative', + 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', + 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' + ] + }, + groupcontainer: { + class: ['flex'] + }, + group: { + class: ['flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0'] } }, listbox: { @@ -1369,7 +1526,7 @@ export default { }, inplace: { display: ({ props }) => ({ - class: ['p-3 rounded-md transition duration-200 ', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80'] + class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80'] }) }, scrolltop: { @@ -1886,21 +2043,21 @@ export default { content: { class: ['flex flex-col overflow-auto'] }, - container: { - class: ['flex flex-row'] - }, + container: ({ props, context }) => ({ + class: ['flex', { 'flex-row': props.orientation !== 'vertical', 'flex-col': props.orientation == 'vertical' }] + }), previousbutton: ({ props, context }) => ({ class: ['flex justify-center items-center self-center overflow-hidden relative flex-shrink-0 flex-grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2'] }), itemscontent: { class: ['overflow-hidden w-full'] }, - itemscontainer: { - class: ['flex flex-row'] - }, - item: { - class: ['flex-1'] - } + itemscontainer: ({ props, context }) => ({ + class: [console.log(props), 'flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }] + }), + item: ({ props, context }) => ({ + class: ['flex flex-shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }] + }) }, tree: { root: { @@ -2045,14 +2202,14 @@ export default { content: { class: [ 'bg-white blue-gray-700 border-0 p-0 text-gray-700', - 'bg-gray-900 dark:text-white/80' // Dark Mode + 'dark:bg-gray-900 dark:text-white/80' // Dark Mode ] }, grid: { class: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900' }, header: { - class: 'bg-gray-100 dark:bg-gray-800 text-blue-gray-800 text-gray-700 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold' + class: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold' } }, dataviewlayoutoptions: { From ebe2592793ada41a8194aa0e8f76a21b54b0d63f Mon Sep 17 00:00:00 2001 From: naved Date: Tue, 1 Aug 2023 10:59:19 +0530 Subject: [PATCH 17/40] Fixes incorrect prop types --- components/lib/dropdown/BaseDropdown.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue index bf768b8ea..ceecc6cc1 100644 --- a/components/lib/dropdown/BaseDropdown.vue +++ b/components/lib/dropdown/BaseDropdown.vue @@ -153,11 +153,11 @@ export default { props: { modelValue: null, options: Array, - optionLabel: String || Function, - optionValue: String || Function, - optionDisabled: String || Function, - optionGroupLabel: String || Function, - optionGroupChildren: String || Function, + optionLabel: [String, Function], + optionValue: [String, Function], + optionDisabled: [String, Function], + optionGroupLabel: [String, Function], + optionGroupChildren: [String, Function], scrollHeight: { type: String, default: '200px' From 4efe728964ffd8a898965ce32560d8483d9dee0c Mon Sep 17 00:00:00 2001 From: ATAKAN TEPE Date: Tue, 1 Aug 2023 09:22:06 +0300 Subject: [PATCH 18/40] update TW theme add indicators --- components/lib/tailwind/Tailwind.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js index b2f9ffe47..f48ac070d 100644 --- a/components/lib/tailwind/Tailwind.js +++ b/components/lib/tailwind/Tailwind.js @@ -587,7 +587,6 @@ export default { button: { root: ({ parent }) => ({ class: [ - console.log(parent.props.plain), 'min-[0px]:rounded-r-none', { 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, { @@ -1022,7 +1021,6 @@ export default { }, daylabel: ({ context }) => ({ class: [ - console.log(context.disabled), 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', 'flex items-center cursor-pointer justify-center mx-auto overflow-hidden relative', '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)]', @@ -1998,6 +1996,12 @@ export default { indicator: { class: ['mr-2'] }, + indicatorbutton: ({ props, context }) => ({ + class: [ + 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 w-4 h-4 transition duration-200 rounded-full', + '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)]' + ] + }), mask: { class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90'] }, @@ -2053,10 +2057,22 @@ export default { class: ['overflow-hidden w-full'] }, itemscontainer: ({ props, context }) => ({ - class: [console.log(props), 'flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }] + class: ['flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }] }), item: ({ props, context }) => ({ class: ['flex flex-shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }] + }), + indicators: { + class: ['flex flex-row justify-center flex-wrap'] + }, + indicator: { + class: ['mr-2 mb-2'] + }, + indicatorbutton: ({ props, context }) => ({ + class: [ + 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 w-8 h-2 transition duration-200 rounded-0', + '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)]' + ] }) }, tree: { From 8fb986b786343246ba50a3b03870709191c0c3de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Tue, 1 Aug 2023 09:39:02 +0300 Subject: [PATCH 19/40] Update Tailwind theme --- components/lib/tailwind/Tailwind.js | 487 +++++++++++++++++----------- 1 file changed, 304 insertions(+), 183 deletions(-) diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js index f48ac070d..f213b1cbe 100644 --- a/components/lib/tailwind/Tailwind.js +++ b/components/lib/tailwind/Tailwind.js @@ -4,6 +4,52 @@ export default { root: { class: ['block absolute bg-white bg-opacity-50 rounded-full transform scale-0 pointer-events-none'] } + }, + badge: { + root: ({ context }) => ({ + class: [ + 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0', + 'text-xs leading-6 flex items-center justify-center', + 'text-center text-white font-bold', + { + 'rounded-full p-0': context.nogutter || context.dot, + 'rounded-[10px] px-2': !context.nogutter && !context.dot, + 'min-w-[0.5rem] w-2 h-2': context.dot, + 'min-w-[1.5rem] h-6': !context.dot + }, + { + 'bg-blue-500 ': context.info || (!context.info && !context.success && !context.warning && !context.danger), + 'bg-green-500 ': context.success, + 'bg-orange-500 ': context.warning, + 'bg-red-500 ': context.danger + } + ] + }) + }, + tooltip: { + root: ({ context }) => ({ + class: [ + 'absolute shadow-md', + { + 'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom), + 'py-1 px-0': context?.top || context?.bottom + } + ] + }), + arrow: ({ context }) => ({ + class: [ + 'absolute w-0 h-0 border-transparent border-solid', + { + '-m-t-1 border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-gray-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom), + '-m-t-1 border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-gray-600': context?.left, + '-m-l-1 border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-gray-600': context?.top, + '-m-l-1 border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-gray-600': context?.bottom + } + ] + }), + text: { + class: 'p-3 bg-gray-600 text-white rounded-md whitespace-pre-line break-words' + } } }, //PANELS @@ -41,13 +87,16 @@ export default { root: { class: ['mb-1'] }, - tab: { + accordiontab: { + root: { + class: ['mb-1'] + }, header: ({ props }) => ({ class: [ { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled } // Condition ] }), - headerAction: ({ tab }) => ({ + headerAction: ({ context }) => ({ class: [ 'flex items-center cursor-pointer relative no-underline select-none', // Alignments 'p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200', // Padding and transition @@ -55,7 +104,7 @@ export default { 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode 'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus - { 'rounded-br-md rounded-bl-md': !tab.context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': tab.context.active } // Condition + { 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': context.active } // Condition ] }), headerIcon: { @@ -159,16 +208,16 @@ export default { }, scrollpanel: { wrapper: { - class: 'float-left h-full overflow-hidden relative w-full z-10' + class: 'overflow-hidden relative float-left h-full w-full z-[1]' }, content: { - class: 'box-border h-[calc(100% + 18px)] overflow-scroll pr-18 pb-18 relative scrollbar-none w-[calc(100% + 18px)] [&::-webkit-scrollbar]:hidden' + class: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden' }, barX: { - class: 'bg-gray-50 border-0 transition-none invisible absolute bottom-0 h-3 z-2 rounded cursor-pointer opacity-0 relative' + class: ['relative bg-gray-100 invisible rounded cursor-pointer h-[9px] bottom-0 z-[2]', 'transition duration-[250ms] ease-linear'] }, barY: { - class: 'bg-gray-50 border-0 transition-none top-0 w-3 h-full z-2 rounded cursor-pointer opacity-0 relative' + class: ['relative bg-gray-100 rounded cursor-pointer w-[9px] top-0 z-[2]', 'transition duration-[250ms] ease-linear'] } }, tabview: { @@ -190,11 +239,11 @@ export default { 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. }, - tab: { - header: ({ tab }) => ({ - class: ['mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': tab.props?.disabled }] // Margin and condition-based 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. }), - headerAction: ({ tab }) => ({ + 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. @@ -202,8 +251,8 @@ export default { '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. { 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': - tab.parent.state.d_activeIndex !== tab.context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': tab.parent.state.d_activeIndex === tab.context.index // Condition-based active styles. + parent.state.d_activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.d_activeIndex === context.index // Condition-based active styles. } ], style: 'margin-bottom:-2px' // Negative margin style. @@ -480,7 +529,6 @@ export default { class: [ '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_4px_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_4px_rgba(147,197,253,0.5)]', { '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 @@ -538,7 +586,7 @@ export default { }) }, speeddial: { - root: ({ props, state }) => ({ + root: ({ props }) => ({ class: [ 'absolute flex', { @@ -551,10 +599,13 @@ export default { }), button: { root: { - class: ['w-16 h-16'] + class: ['w-16 h-16 min-[0px]:rounded-[50%]'] + }, + label: { + class: 'min-[0px]:hidden' } }, - menu: ({ props, context }) => ({ + menu: ({ props }) => ({ class: [ 'm-0 p-0 list-none flex items-center justify-center transition delay-200 pointer-events-none z-2', { @@ -567,7 +618,8 @@ export default { }), menuitem: ({ props, context }) => ({ class: [ - 'transform scale-0 opacity-0 transition-transform duration-200 ease-out delay-0 transition-opacity duration-800', + 'transform transition-transform duration-200 ease-out transition-opacity duration-800', + context.hidden ? 'opacity-0 scale-0' : 'opacity-1 scale-100', { 'my-1 first:mb-2': props.direction == 'up', 'my-1 first:mt-2': props.direction == 'down', @@ -581,98 +633,57 @@ export default { } }, splitbutton: { - root: ({ props }) => ({ - class: ['inline-flex relative', 'rounded-md', { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }] - }), + root: { + class: ['inline-flex relative', 'rounded-md'] + }, button: { root: ({ parent }) => ({ class: [ 'min-[0px]:rounded-r-none', - { 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, { - 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.severity == 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': parent.props.severity == 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': parent.props.severity == 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': parent.props.severity == 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': parent.props.severity == 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.severity == 'secondary' && !parent.props.text && !parent.props.outlined, + 'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': parent.props.severity == 'success' && !parent.props.text && !parent.props.outlined, + 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == 'info' && !parent.props.text && !parent.props.outlined, + 'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': parent.props.severity == 'warning' && !parent.props.text && !parent.props.outlined, + 'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': parent.props.severity == 'help' && !parent.props.text && !parent.props.outlined, + 'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': parent.props.severity == 'danger' && !parent.props.text && !parent.props.outlined }, { 'shadow-lg': parent.props.raised }, { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, { - 'bg-transparent border-transparent': parent.props.text && !parent.props.plain, - 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == null && !parent.props.plain, - 'text-gray-500 hover:bg-gray-300/20': parent.props.text && parent.props.severity == 'secondary' && !parent.props.plain, - 'text-green-500 hover:bg-green-300/20': parent.props.text && parent.props.severity == 'success' && !parent.props.plain, - 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == 'info' && !parent.props.plain, - 'text-orange-500 hover:bg-orange-300/20': parent.props.text && parent.props.severity == 'warning' && !parent.props.plain, - 'text-purple-500 hover:bg-purple-300/20': parent.props.text && parent.props.severity == 'help' && !parent.props.plain, - 'text-red-500 hover:bg-red-300/20': parent.props.text && parent.props.severity == 'danger' && !parent.props.plain + 'bg-transparent border-transparent': parent.props.text, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == null, + 'text-gray-500 hover:bg-gray-300/20': parent.props.text && parent.props.severity == 'secondary', + 'text-green-500 hover:bg-green-300/20': parent.props.text && parent.props.severity == 'success', + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == 'info', + 'text-orange-500 hover:bg-orange-300/20': parent.props.text && parent.props.severity == 'warning', + 'text-purple-500 hover:bg-purple-300/20': parent.props.text && parent.props.severity == 'help', + 'text-red-500 hover:bg-red-300/20': parent.props.text && parent.props.severity == 'danger' }, { 'shadow-lg': parent.props.raised && parent.props.text }, { - 'text-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.text, - 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.outlined, - 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.plain & !parent.props.outlined & !parent.props.text + 'text-gray-500 hover:bg-gray-300/20': parent.props.text, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined, + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': !parent.props.outlined & !parent.props.text }, { - 'bg-transparent border': parent.props.outlined && !parent.props.plain, - 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == null && !parent.props.plain, - 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined && parent.props.severity == 'secondary' && !parent.props.plain, - 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity == 'success' && !parent.props.plain, - 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == 'info' && !parent.props.plain, - 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity == 'warning' && !parent.props.plain, - 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity == 'help' && !parent.props.plain, - 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity == 'danger' && !parent.props.plain + 'bg-transparent border': parent.props.outlined, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == null, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined && parent.props.severity == 'secondary', + 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity == 'success', + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == 'info', + 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity == 'warning', + 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity == 'help', + 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity == 'danger' }, { 'px-4 py-3 text-base': parent.props.size == null, 'text-xs py-2 px-3': parent.props.size == 'small', 'text-xl py-3 px-4': parent.props.size == 'large' } ] }) }, menubutton: { - root: ({ parent }) => ({ - class: [ - 'min-[0px]:rounded-l-none', - { 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, - { - 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.severity == 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': parent.props.severity == 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': parent.props.severity == 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': parent.props.severity == 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, - 'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': parent.props.severity == 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain - }, - { 'shadow-lg': parent.props.raised }, - { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, - { - 'bg-transparent border-transparent': parent.props.text && !parent.props.plain, - 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == null && !parent.props.plain, - 'text-gray-500 hover:bg-gray-300/20': parent.props.text && parent.props.severity == 'secondary' && !parent.props.plain, - 'text-green-500 hover:bg-green-300/20': parent.props.text && parent.props.severity == 'success' && !parent.props.plain, - 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == 'info' && !parent.props.plain, - 'text-orange-500 hover:bg-orange-300/20': parent.props.text && parent.props.severity == 'warning' && !parent.props.plain, - 'text-purple-500 hover:bg-purple-300/20': parent.props.text && parent.props.severity == 'help' && !parent.props.plain, - 'text-red-500 hover:bg-red-300/20': parent.props.text && parent.props.severity == 'danger' && !parent.props.plain - }, - { 'shadow-lg': parent.props.raised && parent.props.text }, - { - 'text-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.text, - 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.outlined, - 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.plain & !parent.props.outlined & !parent.props.text - }, - { - 'bg-transparent border': parent.props.outlined && !parent.props.plain, - 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == null && !parent.props.plain, - 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined && parent.props.severity == 'secondary' && !parent.props.plain, - 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity == 'success' && !parent.props.plain, - 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == 'info' && !parent.props.plain, - 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity == 'warning' && !parent.props.plain, - 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity == 'help' && !parent.props.plain, - 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity == 'danger' && !parent.props.plain - }, - { 'px-4 py-3 text-base': parent.props.size == null, 'text-xs py-2 px-3': parent.props.size == 'small', 'text-xl py-3 px-4': parent.props.size == 'large' } - ] - }) + root: { + class: 'min-[0px]:rounded-l-none' + } } }, //FORMS @@ -690,6 +701,26 @@ export default { ] }) }, + inputnumber: { + root: ({ props, context }) => ({ + class: ['w-full inline-flex'] + }), + input: ({ props, context }) => ({ + class: ['', { 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }] + }), + buttongroup: ({ props, context }) => ({ + class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }] + }), + incrementbutton: ({ props, context }) => ({ + class: ['flex !items-center !justify-center', { 'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked' }] + }), + label: { + class: ['hidden'] + }, + decrementbutton: ({ props, context }) => ({ + class: ['flex !items-center !justify-center', { 'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked' }] + }) + }, knob: { root: ({ props }) => ({ class: ['focus:outline-none focus:outline-offset-0 focus:shadow-0', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }] @@ -718,6 +749,55 @@ export default { ] }) }, + cascadeselect: { + root: ({ props }) => ({ + class: [ + 'inline-flex cursor-pointer select-none relative', + 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out rounded-lg', + { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled } + ] + }), + label: { + class: ['block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md'] + }, + dropdownbutton: { + class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6'] + }, + panel: { + class: ['absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md'] + }, + list: { + class: ['m-0 sm:p-0 list-none'] + }, + item: ({ props }) => ({ + class: [ + 'cursor-pointer font-normal whitespace-nowrap', + 'm-0 border-0 bg-transparent transition-shadow rounded-none', + 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80' + ] + }), + content: { + class: ['flex items-center overflow-hidden relative', 'py-3 px-5'] + }, + groupicon: { + class: ['ml-auto'] + }, + sublist: { + class: ['block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md'] + } + }, + inputgroup: { + root: { + class: ['flex items-stretch w-full flex-1'] + } + }, + inputmask: { + root: ({ props, context }) => ({ + class: [ + 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 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)] transition duration-200 ease-in-out appearance-none rounded-md' + ] + }) + }, rating: { root: ({ props }) => ({ class: ['relative flex items-center', 'gap-2', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }] @@ -854,10 +934,7 @@ export default { class: [ 'flex items-center justify-center', 'border-2 w-6 h-6 rounded-lg transition-colors duration-200', - { - 'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue, - 'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null - }, + { 'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue, 'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null }, { 'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[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)]': !props.disabled, 'cursor-default opacity-60': props.disabled @@ -892,7 +969,7 @@ export default { class: [ 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', - { 'border-gray-300 bg-white dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue }, + { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue }, { 'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[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)]': !props.disabled, 'cursor-default opacity-60': props.disabled @@ -943,7 +1020,12 @@ export default { '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 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected } + { + '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, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected + } ] }), itemgroup: { @@ -1019,37 +1101,33 @@ export default { day: { class: ['p-2'] }, - daylabel: ({ context }) => ({ + daylabel: ({ props }) => ({ class: [ - 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', + 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border dark:text-white/80', 'flex items-center cursor-pointer justify-center mx-auto overflow-hidden relative', - '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)]', - { 'opacity-60 cursor-default': context.disabled, 'cursor-pointer': !context.disabled }, - { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } + 'hover:bg-gray-200 dark:hover:bg-gray-800/80 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)]' ] }), monthpicker: { class: ['my-2'] }, - month: ({ context }) => ({ + month: { class: [ - 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', + 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative dark:text-white/80', 'p-2 transition-shadow duration-200 rounded-lg', - '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)]', - { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } + 'hover:bg-gray-200 dark:hover:bg-gray-800/80 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)]' ] - }), + }, yearpicker: { class: ['my-2'] }, - year: ({ context }) => ({ + year: { class: [ - 'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', + 'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative dark:text-white/80', 'p-2 transition-shadow duration-200 rounded-lg', - '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)]', - { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } + 'hover:bg-gray-200 dark:hover:bg-gray-800/80 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)]' ] - }), + }, timepicker: { class: ['flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2'] }, @@ -1105,7 +1183,12 @@ export default { '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 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected } + { + '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, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected + } ] }), itemgroup: { @@ -1206,7 +1289,12 @@ export default { '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 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected } + { + '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, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected + } ] }), checkboxContainer: { @@ -1328,7 +1416,12 @@ export default { '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 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected } + { + '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-500 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 + } ] }), itemgroup: { @@ -1524,7 +1617,7 @@ export default { }, inplace: { display: ({ props }) => ({ - class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80'] + class: ['p-3 rounded-md transition duration-200 ', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80'] }) }, scrolltop: { @@ -1579,9 +1672,18 @@ export default { menuitem: { class: ['relative'] }, - content: { - class: ['text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none', 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80'] - }, + content: ({ context }) => ({ + class: [ + 'transition-shadow duration-200 rounded-none', + 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover + { + 'text-gray-700': !context.focused && !context.active, + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active, + 'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active + } + ] + }), action: { class: ['cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none'] }, @@ -1640,14 +1742,20 @@ export default { menu: { class: ['m-0 p-0 list-none', 'outline-none'] }, - content: { - class: ['text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none', 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80'] - }, + content: ({ context }) => ({ + class: [ + 'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none', + 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover + { + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused + } + ] + }), action: { class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative'] }, icon: { - class: ['text-gray-600 dark:text-white/70 mr-2"'] + class: ['text-gray-600 dark:text-white/70 mr-2'] }, submenuheader: { class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none'] @@ -1656,7 +1764,7 @@ export default { menubar: { root: { - class: ['p-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative'] + class: ['p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative'] }, menu: ({ props, context }) => ({ class: [ @@ -1675,21 +1783,24 @@ export default { content: ({ props, context }) => ({ class: [ ' transition-shadow duration-200', + 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', { 'rounded-md': props.root, '': !props.root }, - { 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active, 'text-blue-600 bg-blue-100': context.active } + { + 'text-gray-700 dark:text-white/80': !context.focused && !context.active, + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active, + 'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active + } ] }), action: ({ props, context }) => ({ class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none'] }), - icon: ({ props, context }) => ({ - class: ['mr-2', { 'text-gray-600 dark:text-white/70': !context.active, 'text-blue-600': context.active }] - }), + icon: { + class: 'mr-2' + }, submenuicon: ({ props, context }) => ({ - class: [ - { 'text-gray-600 dark:text-white/70': !context.active, 'text-blue-600': context.active }, - { 'ml-2': props.root, 'ml-auto': !props.root } - ] + class: [{ 'ml-2': props.root, 'ml-auto': !props.root }] }), submenu: ({ props, context }) => ({ class: ['py-1 bg-white dark:bg-gray-900 border-0 sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }] @@ -1708,11 +1819,7 @@ export default { }, megamenu: { root: ({ props, context }) => ({ - class: [ - 'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md', - 'flex relative', - { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' } - ] + class: ['bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex relative', { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' }] }), menu: ({ props, context }) => ({ class: ['m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto'] @@ -1723,16 +1830,22 @@ export default { content: ({ props, context }) => ({ class: [ 'transition-shadow duration-200', + 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', //Hover { 'rounded-md': props.level < 1 && props.horizontal }, - { 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active, 'text-blue-600 bg-blue-100': context.active } + { + 'text-gray-700 dark:text-white/80': !context.focused && !context.active, + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active, + 'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active + } ] }), action: ({ props, context }) => ({ class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none'] }), - icon: ({ props, context }) => ({ - class: ['mr-2', { 'text-gray-600 dark:text-white/70': !context.active, 'text-blue-600': context.active }] - }), + icon: { + class: 'mr-2' + }, submenuicon: ({ props, context }) => ({ class: [{ 'ml-2': props.horizontal, 'ml-auto': !props.horizontal }] }), @@ -1759,14 +1872,16 @@ export default { panel: { class: ['mb-1'] }, - header: { - class: ['outline-none'] - }, + header: ({ context }) => ({ + class: [ + 'outline-none', + '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 + ] + }), headercontent: { class: [ 'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200', - 'hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-700 dark:hover:text-white/80', - '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:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-700 dark:hover:text-white/80' ] }, headeraction: { @@ -1784,9 +1899,15 @@ export default { menu: { class: ['outline-none', 'm-0 p-0 list-none'] }, - content: { - class: ['text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none', 'hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-700 dark:hover:text-white/80'] - }, + content: ({ context }) => ({ + class: [ + 'text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none', + 'hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-700 dark:hover:text-white/80', // Hover + { + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused + } + ] + }), action: { class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden'] }, @@ -1821,6 +1942,7 @@ export default { class: ['block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60'] } }, + tabmenu: { root: { class: ['overflow-x-auto'] @@ -1831,8 +1953,16 @@ export default { menuitem: { class: ['mr-0'] }, - action: ({ props, context }) => ({ - class: ['cursor-pointer select-none flex items-center relative no-underline overflow-hidden', 'border-b-2 border-gray-300 bg-white text-gray-600 p-5 font-bold rounded-t-lg ', 'hover:bg-white hover:border-gray-400 hover:text-gray-600'], + action: ({ context, state }) => ({ + class: [ + 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden', + 'border-b-2 p-5 font-bold rounded-t-lg ', + '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)]', + { + 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.d_activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.d_activeIndex === context.index // Condition-based active styles. + } + ], style: 'top:2px' }), icon: { @@ -1849,10 +1979,19 @@ export default { menuitem: { class: ['relative'] }, - content: ({ props, context }) => ({ - class: ['transition-shadow duration-200 border-none rounded-none', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80'] + content: ({ context }) => ({ + class: [ + 'transition-shadow duration-200 border-none rounded-none', + 'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80', //Hover + { + 'text-gray-700': !context.focused && !context.active, + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active, + 'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active + } + ] }), - action: ({ props, context }) => ({ + action: ({ context }) => ({ class: [ 'py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden', @@ -1996,12 +2135,6 @@ export default { indicator: { class: ['mr-2'] }, - indicatorbutton: ({ props, context }) => ({ - class: [ - 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 w-4 h-4 transition duration-200 rounded-full', - '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)]' - ] - }), mask: { class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90'] }, @@ -2047,33 +2180,21 @@ export default { content: { class: ['flex flex-col overflow-auto'] }, - container: ({ props, context }) => ({ - class: ['flex', { 'flex-row': props.orientation !== 'vertical', 'flex-col': props.orientation == 'vertical' }] - }), + container: { + class: ['flex flex-row'] + }, previousbutton: ({ props, context }) => ({ class: ['flex justify-center items-center self-center overflow-hidden relative flex-shrink-0 flex-grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2'] }), itemscontent: { class: ['overflow-hidden w-full'] }, - itemscontainer: ({ props, context }) => ({ - class: ['flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }] - }), - item: ({ props, context }) => ({ - class: ['flex flex-shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }] - }), - indicators: { - class: ['flex flex-row justify-center flex-wrap'] + itemscontainer: { + class: ['flex flex-row'] }, - indicator: { - class: ['mr-2 mb-2'] - }, - indicatorbutton: ({ props, context }) => ({ - class: [ - 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 w-8 h-2 transition duration-200 rounded-0', - '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)]' - ] - }) + item: { + class: ['flex-1'] + } }, tree: { root: { @@ -2217,15 +2338,15 @@ export default { dataview: { content: { class: [ - 'bg-white blue-gray-700 border-0 p-0 text-gray-700', - 'dark:bg-gray-900 dark:text-white/80' // Dark Mode + 'bg-white blue-gray-700 border-0 p-0', + 'bg-gray-900 dark:text-white/80' // Dark Mode ] }, grid: { - class: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900' + class: 'flex flex-wrap ml-0 mr-0 mt-0' }, header: { - class: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold' + class: 'bg-gray-100 text-blue-gray-800 border-gray-200 border-t border-b p-4 font-bold' } }, dataviewlayoutoptions: { From 0cbad344939c5aad25431ba281122be62fc0f010 Mon Sep 17 00:00:00 2001 From: ATAKAN TEPE Date: Tue, 1 Aug 2023 09:47:54 +0300 Subject: [PATCH 20/40] update TW theme --- components/lib/tailwind/Tailwind.js | 119 +++++++++++++++++++++------- 1 file changed, 91 insertions(+), 28 deletions(-) diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js index f213b1cbe..68ee7e293 100644 --- a/components/lib/tailwind/Tailwind.js +++ b/components/lib/tailwind/Tailwind.js @@ -529,6 +529,7 @@ export default { class: [ '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_4px_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_4px_rgba(147,197,253,0.5)]', { '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 @@ -681,9 +682,49 @@ export default { }) }, menubutton: { - root: { - class: 'min-[0px]:rounded-l-none' - } + root: ({ parent }) => ({ + class: [ + 'min-[0px]:rounded-l-none', + { 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == null && !parent.props.text && !parent.props.outlined && !parent.props.plain }, + { + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.severity == 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': parent.props.severity == 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': parent.props.severity == 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': parent.props.severity == 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': parent.props.severity == 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain, + 'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': parent.props.severity == 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain + }, + { 'shadow-lg': parent.props.raised }, + { 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded }, + { + 'bg-transparent border-transparent': parent.props.text && !parent.props.plain, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == null && !parent.props.plain, + 'text-gray-500 hover:bg-gray-300/20': parent.props.text && parent.props.severity == 'secondary' && !parent.props.plain, + 'text-green-500 hover:bg-green-300/20': parent.props.text && parent.props.severity == 'success' && !parent.props.plain, + 'text-blue-500 hover:bg-blue-300/20': parent.props.text && parent.props.severity == 'info' && !parent.props.plain, + 'text-orange-500 hover:bg-orange-300/20': parent.props.text && parent.props.severity == 'warning' && !parent.props.plain, + 'text-purple-500 hover:bg-purple-300/20': parent.props.text && parent.props.severity == 'help' && !parent.props.plain, + 'text-red-500 hover:bg-red-300/20': parent.props.text && parent.props.severity == 'danger' && !parent.props.plain + }, + { 'shadow-lg': parent.props.raised && parent.props.text }, + { + 'text-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.text, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.plain & parent.props.outlined, + 'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': parent.props.plain & !parent.props.outlined & !parent.props.text + }, + { + 'bg-transparent border': parent.props.outlined && !parent.props.plain, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == null && !parent.props.plain, + 'text-gray-500 border border-gray-500 hover:bg-gray-300/20': parent.props.outlined && parent.props.severity == 'secondary' && !parent.props.plain, + 'text-green-500 border border-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity == 'success' && !parent.props.plain, + 'text-blue-500 border border-blue-500 hover:bg-blue-300/20': parent.props.outlined && parent.props.severity == 'info' && !parent.props.plain, + 'text-orange-500 border border-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity == 'warning' && !parent.props.plain, + 'text-purple-500 border border-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity == 'help' && !parent.props.plain, + 'text-red-500 border border-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity == 'danger' && !parent.props.plain + }, + { 'px-4 py-3 text-base': parent.props.size == null, 'text-xs py-2 px-3': parent.props.size == 'small', 'text-xl py-3 px-4': parent.props.size == 'large' } + ] + }) } }, //FORMS @@ -969,7 +1010,7 @@ export default { class: [ 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', - { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue }, + { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue }, { 'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[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)]': !props.disabled, 'cursor-default opacity-60': props.disabled @@ -1101,33 +1142,37 @@ export default { day: { class: ['p-2'] }, - daylabel: ({ props }) => ({ + daylabel: ({ context }) => ({ class: [ - 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border dark:text-white/80', - 'flex items-center cursor-pointer justify-center mx-auto overflow-hidden relative', - 'hover:bg-gray-200 dark:hover:bg-gray-800/80 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)]' + 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', + 'flex items-center justify-center mx-auto overflow-hidden relative', + '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)]', + { 'opacity-60 cursor-default': context.disabled, 'cursor-pointer': !context.disabled }, + { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } ] }), monthpicker: { class: ['my-2'] }, - month: { + month: ({ context }) => ({ class: [ - 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative dark:text-white/80', + 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', 'p-2 transition-shadow duration-200 rounded-lg', - 'hover:bg-gray-200 dark:hover:bg-gray-800/80 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)]', + { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } ] - }, + }), yearpicker: { class: ['my-2'] }, - year: { + year: ({ context }) => ({ class: [ - 'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative dark:text-white/80', + 'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', 'p-2 transition-shadow duration-200 rounded-lg', - 'hover:bg-gray-200 dark:hover:bg-gray-800/80 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)]', + { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } ] - }, + }), timepicker: { class: ['flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2'] }, @@ -1617,7 +1662,7 @@ export default { }, inplace: { display: ({ props }) => ({ - class: ['p-3 rounded-md transition duration-200 ', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80'] + class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80'] }) }, scrolltop: { @@ -2135,6 +2180,12 @@ export default { indicator: { class: ['mr-2'] }, + indicatorbutton: ({ props, context }) => ({ + class: [ + 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 w-4 h-4 transition duration-200 rounded-full', + '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)]' + ] + }), mask: { class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90'] }, @@ -2180,21 +2231,33 @@ export default { content: { class: ['flex flex-col overflow-auto'] }, - container: { - class: ['flex flex-row'] - }, + container: ({ props, context }) => ({ + class: ['flex', { 'flex-row': props.orientation !== 'vertical', 'flex-col': props.orientation == 'vertical' }] + }), previousbutton: ({ props, context }) => ({ class: ['flex justify-center items-center self-center overflow-hidden relative flex-shrink-0 flex-grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2'] }), itemscontent: { class: ['overflow-hidden w-full'] }, - itemscontainer: { - class: ['flex flex-row'] + itemscontainer: ({ props, context }) => ({ + class: ['flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }] + }), + item: ({ props, context }) => ({ + class: ['flex flex-shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }] + }), + indicators: { + class: ['flex flex-row justify-center flex-wrap'] }, - item: { - class: ['flex-1'] - } + indicator: { + class: ['mr-2 mb-2'] + }, + indicatorbutton: ({ props, instance }) => ({ + class: [ + 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 w-8 h-2 transition duration-200 rounded-0', + '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)]' + ] + }) }, tree: { root: { @@ -2339,14 +2402,14 @@ export default { content: { class: [ 'bg-white blue-gray-700 border-0 p-0', - 'bg-gray-900 dark:text-white/80' // Dark Mode + 'dark:bg-gray-900 dark:text-white/80' // Dark Mode ] }, grid: { - class: 'flex flex-wrap ml-0 mr-0 mt-0' + class: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900' }, header: { - class: 'bg-gray-100 text-blue-gray-800 border-gray-200 border-t border-b p-4 font-bold' + class: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold' } }, dataviewlayoutoptions: { From b5a0a46f33b8d49346a433ce50eddc1f0745ac36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Tue, 1 Aug 2023 10:35:36 +0300 Subject: [PATCH 21/40] ScrollPanel unstyled demo added --- .../{StyleDoc.vue => theming/StyledDoc.vue} | 0 doc/scrollpanel/theming/UnstyledDoc.vue | 39 +++++++++++++++++++ doc/scrollpanel/theming/index.vue | 33 ++++++++++++++++ pages/scrollpanel/index.vue | 11 ++---- 4 files changed, 76 insertions(+), 7 deletions(-) rename doc/scrollpanel/{StyleDoc.vue => theming/StyledDoc.vue} (100%) create mode 100644 doc/scrollpanel/theming/UnstyledDoc.vue create mode 100644 doc/scrollpanel/theming/index.vue diff --git a/doc/scrollpanel/StyleDoc.vue b/doc/scrollpanel/theming/StyledDoc.vue similarity index 100% rename from doc/scrollpanel/StyleDoc.vue rename to doc/scrollpanel/theming/StyledDoc.vue diff --git a/doc/scrollpanel/theming/UnstyledDoc.vue b/doc/scrollpanel/theming/UnstyledDoc.vue new file mode 100644 index 000000000..dec1e3bdd --- /dev/null +++ b/doc/scrollpanel/theming/UnstyledDoc.vue @@ -0,0 +1,39 @@ + + + diff --git a/doc/scrollpanel/theming/index.vue b/doc/scrollpanel/theming/index.vue new file mode 100644 index 000000000..e8d576787 --- /dev/null +++ b/doc/scrollpanel/theming/index.vue @@ -0,0 +1,33 @@ + + + diff --git a/pages/scrollpanel/index.vue b/pages/scrollpanel/index.vue index 7c70f463d..2e5d4051d 100644 --- a/pages/scrollpanel/index.vue +++ b/pages/scrollpanel/index.vue @@ -6,6 +6,7 @@ :componentDocs="docs" :apiDocs="['ScrollPanel']" :ptTabComponent="ptComponent" + :themingDocs="themingDoc" /> diff --git a/doc/tailwind/CustomizationDoc.vue b/doc/tailwind/CustomizationDoc.vue new file mode 100644 index 000000000..76cd31e60 --- /dev/null +++ b/doc/tailwind/CustomizationDoc.vue @@ -0,0 +1,67 @@ + + + diff --git a/doc/tailwind/ExampleDoc.vue b/doc/tailwind/ExampleDoc.vue index 58229d9d9..13871bcd2 100644 --- a/doc/tailwind/ExampleDoc.vue +++ b/doc/tailwind/ExampleDoc.vue @@ -1,6 +1,9 @@