naive-ui 2.23.1 → 2.23.2

package/lib/layout/src/styles/layout-sider.cssr.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --color
-// --text-color
-// --border-color
-// --toggle-button-color
-// --toggle-bar-color
-// --toggle-bar-color-hover
+// --n-bezier
+// --n-color
+// --n-text-color
+// --n-border-color
+// --n-toggle-button-color
+// --n-toggle-bar-color
+// --n-toggle-bar-color-hover
 
 
 exports.default = (0, cssr_1.cB)('layout-sider', `
@@ -19,22 +19,22 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  box-sizing: border-box;
  position: relative;
  z-index: 1;
- color: var(--text-color);
+ color: var(--n-text-color);
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- min-width .3s var(--bezier),
- max-width .3s var(--bezier),
- transform .3s var(--bezier),
- background-color .3s var(--bezier);
- background-color: var(--color);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ min-width .3s var(--n-bezier),
+ max-width .3s var(--n-bezier),
+ transform .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ background-color: var(--n-color);
  display: flex;
  justify-content: flex-end;
 `, [(0, cssr_1.cM)('right-placement', `
  justify-content: flex-start;
  `, [(0, cssr_1.cM)('bordered', `
  border-right: none;
- border-left: 1px solid var(--border-color);
+ border-left: 1px solid var(--n-border-color);
  `), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('layout-toggle-button', [(0, cssr_1.cB)('base-icon', `
  transform: rotate(180deg);
  `)]), (0, cssr_1.cB)('layout-toggle-bar', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('top', {
@@ -61,11 +61,11 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  transform: rotate(0);
  `)])]), (0, cssr_1.cB)('layout-toggle-button', `
  transition:
- color .3s var(--bezier),
- right .3s var(--bezier),
- left .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ right .3s var(--n-bezier),
+ left .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  cursor: pointer;
  width: 24px;
  height: 24px;
@@ -77,13 +77,13 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  align-items: center;
  justify-content: center;
  font-size: 18px;
- color: var(--toggle-button-icon-color);
- border: var(--toggle-button-border);
- background-color: var(--toggle-button-color);
+ color: var(--n-toggle-button-icon-color);
+ border: var(--n-toggle-button-border);
+ background-color: var(--n-toggle-button-color);
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
  transform: translateX(50%) translateY(-50%);
  `, [(0, cssr_1.cB)('base-icon', `
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  transform: rotate(180deg);
  `)]), (0, cssr_1.cB)('layout-toggle-bar', `
  cursor: pointer;
@@ -99,8 +99,8 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  height: 38px;
  left: 14px;
  transition: 
- background-color .3s var(--bezier),
- transform .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ transform .3s var(--n-bezier);
  `), (0, cssr_1.cE)('bottom', `
  position: absolute;
  top: 34px;
@@ -109,23 +109,23 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
 }), (0, cssr_1.cE)('bottom', {
   transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
 })]), (0, cssr_1.cE)('top, bottom', {
-  backgroundColor: 'var(--toggle-bar-color)'
+  backgroundColor: 'var(--n-toggle-bar-color)'
 }), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('top, bottom', {
-  backgroundColor: 'var(--toggle-bar-color-hover)'
+  backgroundColor: 'var(--n-toggle-bar-color-hover)'
 })])]), (0, cssr_1.cE)('border', `
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('layout-sider-scroll-container', `
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  opacity: 0;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  max-width: 100%;
  `), (0, cssr_1.cM)('show-content', [(0, cssr_1.cB)('layout-sider-scroll-container', {
   opacity: 1
@@ -135,5 +135,5 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  top: 0;
  bottom: 0;
  `), (0, cssr_1.cM)('bordered', `
- border-right: 1px solid var(--border-color);
+ border-right: 1px solid var(--n-border-color);
  `)]);

package/lib/layout/src/styles/layout.cssr.js

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --color
-// --text-color
+// --n-bezier
+// --n-color
+// --n-text-color
 
 
 exports.default = (0, cssr_1.cB)('layout', `
- color: var(--text-color);
- background-color: var(--color);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  box-sizing: border-box;
  position: relative;
  z-index: auto;
  flex: auto;
  overflow: hidden;
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
 `, [(0, cssr_1.cB)('layout-scroll-container', `
  overflow-x: hidden;
  box-sizing: border-box;

package/lib/list/src/List.d.ts

@@ -93,16 +93,16 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--color': string;
-        '--border-radius': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--color-modal': string;
-        '--color-popover': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-color': string;
+        '--n-border-radius': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-color-modal': string;
+        '--n-color-popover': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/lib/list/src/List.js

@@ -30,16 +30,16 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--color': color,
-                    '--border-radius': borderRadius,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--color-modal': colorModal,
-                    '--color-popover': colorPopover
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-color': color,
+                    '--n-border-radius': borderRadius,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-color-modal': colorModal,
+                    '--n-color-popover': colorPopover
                 };
             })
         };

package/lib/list/src/styles/index.cssr.js

@@ -5,54 +5,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --bezier
-// --text-color
-// --color
-// --border-radius
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --color-modal
-// --color-popover
+// --n-font-size
+// --n-bezier
+// --n-text-color
+// --n-color
+// --n-border-radius
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-color-modal
+// --n-color-popover
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
- --merged-border-color: var(--border-color);
- --merged-color: var(--color)
- font-size: var(--font-size);
+ --n-merged-border-color: var(--n-border-color);
+ --n-merged-color: var(--n-color)
+ font-size: var(--n-font-size);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  padding: 0;
  list-style-type: none;
- color: var(--text-color);
- background-color: var(--merged-color);
+ color: var(--n-text-color);
+ background-color: var(--n-merged-color);
  `, [(0, cssr_1.cM)('bordered', `
- border-radius: var(--border-radius);
- border: 1px solid var(--merged-border-color);
+ border-radius: var(--n-border-radius);
+ border: 1px solid var(--n-merged-border-color);
  `, [(0, cssr_1.cB)('list-item', `
  padding: 12px 20px;
  `, [(0, cssr_1.c)('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)]), (0, cssr_1.cE)('header, footer', `
  padding: 12px 20px;
  `, [(0, cssr_1.c)('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)])]), (0, cssr_1.cE)('header, footer', `
  padding: 12px 0;
  box-sizing: border-box;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  `, [(0, cssr_1.c)('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)]), (0, cssr_1.cB)('list-item', `
  padding: 12px 0; 
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('prefix', `
  margin-right: 20px;
  flex: 0;
@@ -62,11 +62,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
  `), (0, cssr_1.cE)('main', `
  flex: 1;
  `), (0, cssr_1.c)('&:not(:last-child)', `
- border-bottom: 1px solid var(--merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `)])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('list', `
- --merged-color: var(--color-modal);
- --merged-border-color: var(--border-color-modal);
+ --merged-color: var(--n-color-modal);
+ --merged-border-color: var(--n-border-color-modal);
  `)), (0, cssr_1.insidePopover)((0, cssr_1.cB)('list', `
- --merged-color: var(--color-popover);
- --merged-border-color: var(--border-color-popover);
+ --merged-color: var(--n-color-popover);
+ --merged-border-color: var(--n-border-color-popover);
  `))]);

package/lib/loading-bar/src/LoadingBar.d.ts

@@ -13,9 +13,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleAfterLeave: () => Promise<void>;
     mergedLoadingBarStyle: import("vue").ComputedRef<string | import("vue").CSSProperties | undefined>;
     cssVars: import("vue").ComputedRef<{
-        '--height': string;
-        '--color-loading': string;
-        '--color-error': string;
+        '--n-height': string;
+        '--n-color-loading': string;
+        '--n-color-error': string;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 export default _default;

package/lib/loading-bar/src/LoadingBar.js

@@ -133,9 +133,9 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { height, colorError, colorLoading } } = themeRef.value;
                 return {
-                    '--height': height,
-                    '--color-loading': colorLoading,
-                    '--color-error': colorError
+                    '--n-height': height,
+                    '--n-color-loading': colorLoading,
+                    '--n-color-error': colorError
                 };
             })
         };

package/lib/loading-bar/src/styles/index.cssr.js

@@ -13,9 +13,9 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr")); // vars:
-// --height
-// --color-loading
-// --color-error
+// --n-height
+// --n-color-loading
+// --n-color-error
 
 
 exports.default = (0, cssr_1.cB)('loading-bar-container', `
@@ -33,16 +33,16 @@ exports.default = (0, cssr_1.cB)('loading-bar-container', `
  transition:
  max-width 4s linear,
  background .2s linear;
- height: var(--height);
+ height: var(--n-height);
  `, [(0, cssr_1.cM)('starting', `
- background: var(--color-loading);
+ background: var(--n-color-loading);
  `), (0, cssr_1.cM)('finishing', `
- background: var(--color-loading);
+ background: var(--n-color-loading);
  transition:
  max-width .2s linear,
  background .2s linear;
  `), (0, cssr_1.cM)('error', `
- background: var(--color-error);
+ background: var(--n-color-error);
  transition:
  max-width .2s linear,
  background .2s linear;

package/lib/locales/common/frFR.js

@@ -17,18 +17,18 @@ const frFR = {
         loadingRequiredMessage: (label) => `Charger tous les enfants de ${label} avant de le sélectionner`
     },
     Time: {
-        dateFormat: 'dd-MM-yyyy',
-        dateTimeFormat: 'dd-MM-yyyy HH:mm:ss'
+        dateFormat: 'dd/MM/yyyy',
+        dateTimeFormat: 'dd/MM/yyyy HH:mm:ss'
     },
     DatePicker: {
         yearFormat: 'yyyy',
         monthFormat: 'MMM',
         dayFormat: 'eeeeee',
         yearTypeFormat: 'yyyy',
-        monthTypeFormat: 'MM-yyyy',
-        dateFormat: 'dd-MM-yyyy',
-        dateTimeFormat: 'dd-MM-yyyy HH:mm:ss',
-        quarterFormat: 'yyyy-qqq',
+        monthTypeFormat: 'MM/yyyy',
+        dateFormat: 'dd/MM/yyyy',
+        dateTimeFormat: 'dd/MM/yyyy HH:mm:ss',
+        quarterFormat: 'qqq yyyy',
         clear: 'Effacer',
         now: 'Maintenant',
         confirm: 'Confirmer',
@@ -38,8 +38,7 @@ const frFR = {
         datetimePlaceholder: "Sélectionner la date et l'heure",
         monthPlaceholder: 'Sélectionner le mois',
         yearPlaceholder: "Sélectionner l'année",
-        // FIXME: translation needed
-        quarterPlaceholder: 'Select Quarter',
+        quarterPlaceholder: 'Sélectionner le trimestre',
         startDatePlaceholder: 'Date de début',
         endDatePlaceholder: 'Date de fin',
         startDatetimePlaceholder: 'Date et heure de début',

package/lib/mention/src/Mention.d.ts

@@ -1093,7 +1093,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void;
     blur: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
+        '--n-menu-box-shadow': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;

package/lib/mention/src/Mention.js

@@ -305,7 +305,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { menuBoxShadow } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow
+                    '--n-menu-box-shadow': menuBoxShadow
                 };
             })
         };

package/lib/mention/src/styles/index.cssr.js

@@ -12,9 +12,9 @@ Object.defineProperty(exports, "__esModule", {
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr"));
 
-const cssr_1 = require("../../../_utils/cssr"); // --menu-box-shadow
+const cssr_1 = require("../../../_utils/cssr"); // --n-menu-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('mention', 'width: 100%; z-index: auto; position: relative;'), (0, cssr_1.cB)('mention-menu', `
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [(0, fade_in_scale_up_cssr_1.default)()])]);

package/lib/menu/src/Menu.js

@@ -210,55 +210,58 @@ exports.default = (0, vue_1.defineComponent)({
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const { borderRadius, borderColorHorizontal, fontSize, itemHeight, dividerColor } = self;
                 const vars = {
-                    '--divider-color': dividerColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--border-color-horizontal': borderColorHorizontal,
-                    '--border-radius': borderRadius,
-                    '--item-height': itemHeight
+                    '--n-divider-color': dividerColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-border-color-horizontal': borderColorHorizontal,
+                    '--n-border-radius': borderRadius,
+                    '--n-item-height': itemHeight
                 };
                 if (inverted) {
-                    vars['--group-text-color'] = self.groupTextColorInverted;
-                    vars['--color'] = self.colorInverted;
-                    vars['--item-text-color'] = self.itemTextColorInverted;
-                    vars['--arrow-color'] = self.arrowColorInverted;
-                    vars['--arrow-color-hover'] = self.arrowColorHoverInverted;
-                    vars['--arrow-color-active'] = self.arrowColorActiveInverted;
-                    vars['--arrow-color-child-active'] =
+                    vars['--n-group-text-color'] = self.groupTextColorInverted;
+                    vars['--n-color'] = self.colorInverted;
+                    vars['--n-item-text-color'] = self.itemTextColorInverted;
+                    vars['--n-arrow-color'] = self.arrowColorInverted;
+                    vars['--n-arrow-color-hover'] = self.arrowColorHoverInverted;
+                    vars['--n-arrow-color-active'] = self.arrowColorActiveInverted;
+                    vars['--n-arrow-color-child-active'] =
                         self.arrowColorChildActiveInverted;
-                    vars['--item-icon-color'] = self.itemIconColorInverted;
-                    vars['--item-text-color-hover'] = self.itemTextColorHoverInverted;
-                    vars['--item-icon-color-hover'] = self.itemIconColorHoverInverted;
-                    vars['--item-text-color-active'] = self.itemTextColorActiveInverted;
-                    vars['--item-icon-color-active'] = self.itemIconColorActiveInverted;
-                    vars['--item-icon-color-collapsed'] =
+                    vars['--n-item-icon-color'] = self.itemIconColorInverted;
+                    vars['--n-item-text-color-hover'] = self.itemTextColorHoverInverted;
+                    vars['--n-item-icon-color-hover'] = self.itemIconColorHoverInverted;
+                    vars['--n-item-text-color-active'] = self.itemTextColorActiveInverted;
+                    vars['--n-item-icon-color-active'] = self.itemIconColorActiveInverted;
+                    vars['--n-item-icon-color-collapsed'] =
                         self.itemIconColorCollapsedInverted;
-                    vars['--item-color-active'] = self.itemColorActiveInverted;
-                    vars['--item-color-active-collapsed'] =
+                    vars['--n-item-color-active'] = self.itemColorActiveInverted;
+                    vars['--n-item-color-active-collapsed'] =
                         self.itemColorActiveCollapsedInverted;
-                    vars['--item-text-color-child-active'] =
+                    vars['--n-item-text-color-child-active'] =
                         self.itemTextColorChildActiveInverted;
-                    vars['--item-icon-color-child-active'] =
+                    vars['--n-item-icon-color-child-active'] =
                         self.itemIconColorChildActiveInverted;
                 }
                 else {
-                    vars['--group-text-color'] = self.groupTextColor;
-                    vars['--color'] = self.color;
-                    vars['--item-text-color'] = self.itemTextColor;
-                    vars['--arrow-color'] = self.arrowColor;
-                    vars['--arrow-color-hover'] = self.arrowColorHover;
-                    vars['--arrow-color-active'] = self.arrowColorActive;
-                    vars['--arrow-color-child-active'] = self.arrowColorChildActive;
-                    vars['--item-icon-color'] = self.itemIconColor;
-                    vars['--item-text-color-hover'] = self.itemTextColorHover;
-                    vars['--item-icon-color-hover'] = self.itemIconColorHover;
-                    vars['--item-text-color-active'] = self.itemTextColorActive;
-                    vars['--item-icon-color-active'] = self.itemIconColorActive;
-                    vars['--item-icon-color-collapsed'] = self.itemIconColorCollapsed;
-                    vars['--item-color-active'] = self.itemColorActive;
-                    vars['--item-color-active-collapsed'] = self.itemColorActiveCollapsed;
-                    vars['--item-text-color-child-active'] = self.itemTextColorChildActive;
-                    vars['--item-icon-color-child-active'] = self.itemIconColorChildActive;
+                    vars['--n-group-text-color'] = self.groupTextColor;
+                    vars['--n-color'] = self.color;
+                    vars['--n-item-text-color'] = self.itemTextColor;
+                    vars['--n-arrow-color'] = self.arrowColor;
+                    vars['--n-arrow-color-hover'] = self.arrowColorHover;
+                    vars['--n-arrow-color-active'] = self.arrowColorActive;
+                    vars['--n-arrow-color-child-active'] = self.arrowColorChildActive;
+                    vars['--n-item-icon-color'] = self.itemIconColor;
+                    vars['--n-item-text-color-hover'] = self.itemTextColorHover;
+                    vars['--n-item-icon-color-hover'] = self.itemIconColorHover;
+                    vars['--n-item-text-color-active'] = self.itemTextColorActive;
+                    vars['--n-item-icon-color-active'] = self.itemIconColorActive;
+                    vars['--n-item-icon-color-collapsed'] = self.itemIconColorCollapsed;
+                    vars['--n-item-color-active'] = self.itemColorActive;
+                    vars['--n-item-color-active-collapsed'] =
+                        self.itemColorActiveCollapsed;
+                    vars['--n-item-text-color-child-active'] =
+                        self.itemTextColorChildActive;
+                    vars['--n-item-icon-color-child-active'] =
+                        self.itemIconColorChildActive;
                 }
                 return vars;
             })