naive-ui 2.21.5 → 2.23.2

package/es/cascader/src/styles/index.cssr.js

@@ -1,20 +1,20 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-height
-// --menu-color
-// --menu-divider-color
-// --option-height
-// --option-font-size
-// --option-text-color
-// --option-text-color-disabled
-// --option-text-color-active
-// --option-color-hover
-// --option-check-mark-color
-// --option-arrow-color
-// --menu-mask-color
-// --loading-color
+// --n-menu-border-radius
+// --n-menu-box-shadow
+// --n-menu-height
+// --n-menu-color
+// --n-menu-divider-color
+// --n-option-height
+// --n-option-font-size
+// --n-option-text-color
+// --n-option-text-color-disabled
+// --n-option-text-color-active
+// --n-option-color-hover
+// --n-option-check-mark-color
+// --n-option-arrow-color
+// --n-menu-mask-color
+// --n-loading-color
 
 export default c([cB('cascader-menu', `
  outline: none;
@@ -22,11 +22,11 @@ export default c([cB('cascader-menu', `
  margin: 4px 0;
  display: flex;
  flex-flow: column nowrap;
- border-radius: var(--menu-border-radius);
+ border-radius: var(--n-menu-border-radius);
  overflow: hidden;
- box-shadow: var(--menu-box-shadow);
- color: var(--option-text-color);
- background-color: var(--menu-color);
+ box-shadow: var(--n-menu-box-shadow);
+ color: var(--n-option-text-color);
+ background-color: var(--n-menu-color);
  `, [fadeInScaleUpTransition({
   transformOrigin: 'inherit',
   duration: '0.2s'
@@ -40,37 +40,37 @@ export default c([cB('cascader-menu', `
   // not correct, which won't change after select menu width is set
   width: '100%'
 }), cB('base-menu-mask', {
-  backgroundColor: 'var(--menu-mask-color)'
+  backgroundColor: 'var(--n-menu-mask-color)'
 }), cB('base-loading', {
-  color: 'var(--loading-color)'
+  color: 'var(--n-loading-color)'
 }), cB('cascader-submenu-wrapper', `
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  `), cB('cascader-submenu', `
- height: var(--menu-height);
- min-width: var(--column-width);
+ height: var(--n-menu-height);
+ min-width: var(--n-column-width);
  position: relative;
  `, [cM('virtual', `
- width: var(--column-width);
+ width: var(--n-column-width);
  `), cB('scrollbar-content', {
   position: 'relative'
 }), c('&:first-child', `
- border-top-left-radius: var(--menu-border-radius);
- border-bottom-left-radius: var(--menu-border-radius);
+ border-top-left-radius: var(--n-menu-border-radius);
+ border-bottom-left-radius: var(--n-menu-border-radius);
  `), c('&:last-child', `
- border-top-right-radius: var(--menu-border-radius);
- border-bottom-right-radius: var(--menu-border-radius);
+ border-top-right-radius: var(--n-menu-border-radius);
+ border-bottom-right-radius: var(--n-menu-border-radius);
  `), c('&:not(:first-child)', `
- border-left: 1px solid var(--menu-divider-color);
+ border-left: 1px solid var(--n-menu-divider-color);
  `)]), cB('cascader-menu-action', `
  box-sizing: border-box;
  padding: 8px;
- border-top: 1px solid var(--menu-divider-color);
+ border-top: 1px solid var(--n-menu-divider-color);
  `), cB('cascader-option', `
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--option-font-size);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-option-font-size);
  padding: 0 0 0 18px;
  box-sizing: border-box;
  min-width: 182px;
@@ -81,8 +81,8 @@ export default c([cB('cascader-menu', `
  position: relative;
  cursor: pointer;
  transition:
- background-color .2s var(--bezier),
- color 0.2s var(--bezier);
+ background-color .2s var(--n-bezier),
+ color 0.2s var(--n-bezier);
  `, [cM('show-prefix', {
   paddingLeft: 0
 }), cE('label', `
@@ -106,24 +106,24 @@ export default c([cB('cascader-menu', `
   height: '16px',
   fontSize: '16px'
 }, [cB('cascader-option-icon', [cM('checkmark', {
-  color: 'var(--option-check-mark-color)'
+  color: 'var(--n-option-check-mark-color)'
 }, [fadeInScaleUpTransition()]), cM('arrow', {
-  color: 'var(--option-arrow-color)'
+  color: 'var(--n-option-arrow-color)'
 })])]), cM('selected', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 }), cM('active', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), cM('pending', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), c('&:hover', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), cM('disabled', `
- color: var(--option-text-color-disabled);
+ color: var(--n-option-text-color-disabled);
  background-color: #0000;
  cursor: not-allowed;
  `, [cB('cascader-option-icon', [cM('arrow', {
-  color: 'var(--option-text-color-disabled)'
+  color: 'var(--n-option-text-color-disabled)'
 })])])])]), cB('cascader', `
  z-index: auto;
  position: relative;

package/es/cascader/styles/dark.js

@@ -4,6 +4,7 @@ import { scrollbarDark } from '../../_internal/scrollbar/styles';
 import { checkboxDark } from '../../checkbox/styles';
 import { commonDark } from '../../_styles/common';
 import { self } from './light';
+import { emptyLight } from '../../empty/styles';
 const cascaderDark = {
     name: 'Cascader',
     common: commonDark,
@@ -11,7 +12,8 @@ const cascaderDark = {
         InternalSelectMenu: internalSelectMenuDark,
         InternalSelection: internalSelectionDark,
         Scrollbar: scrollbarDark,
-        Checkbox: checkboxDark
+        Checkbox: checkboxDark,
+        Empty: emptyLight
     },
     self
 };

package/es/cascader/styles/light.d.ts

@@ -186,6 +186,19 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         sizeLarge: string;
         labelPadding: string;
     }, any>;
+    Empty: import("../../_mixins").Theme<"Empty", {
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        textColor: string;
+        iconColor: string;
+        extraTextColor: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconSizeHuge: string;
+    }, any>;
 }>;
 export default cascaderLight;
 export declare type CascaderTheme = typeof cascaderLight;

package/es/cascader/styles/light.js

@@ -4,6 +4,7 @@ import { scrollbarLight } from '../../_internal/scrollbar/styles';
 import { checkboxLight } from '../../checkbox/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
+import { emptyLight } from '../../empty/styles';
 export const self = (vars) => {
     const { borderRadius, boxShadow2, popoverColor, textColor2, textColor3, primaryColor, textColorDisabled, dividerColor, hoverColor, fontSizeMedium, heightMedium } = vars;
     return {
@@ -11,7 +12,7 @@ export const self = (vars) => {
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuDividerColor: dividerColor,
-        menuHeight: 'calc(var(--option-height) * 6.6)',
+        menuHeight: 'calc(var(--n-option-height) * 6.6)',
         optionArrowColor: textColor3,
         optionHeight: heightMedium,
         optionFontSize: fontSizeMedium,
@@ -31,7 +32,8 @@ const cascaderLight = createTheme({
         InternalSelectMenu: internalSelectMenuLight,
         InternalSelection: internalSelectionLight,
         Scrollbar: scrollbarLight,
-        Checkbox: checkboxLight
+        Checkbox: checkboxLight,
+        Empty: emptyLight
     },
     self
 });

package/es/checkbox/src/Checkbox.d.ts

@@ -383,29 +383,29 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyUp: (e: KeyboardEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--size': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--border-checked': string;
-        '--border-focus': string;
-        '--border-disabled': string;
-        '--border-disabled-checked': string;
-        '--box-shadow-focus': string;
-        '--color': string;
-        '--color-checked': string;
-        '--color-table-header': string;
-        '--color-table-header-modal': string;
-        '--color-table-header-popover': string;
-        '--color-disabled': string;
-        '--color-disabled-checked': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--check-mark-color': string;
-        '--check-mark-color-disabled': string;
-        '--check-mark-color-disabled-checked': string;
-        '--font-size': string;
-        '--label-padding': string;
+        '--n-size': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-border-checked': string;
+        '--n-border-focus': string;
+        '--n-border-disabled': string;
+        '--n-border-disabled-checked': string;
+        '--n-box-shadow-focus': string;
+        '--n-color': string;
+        '--n-color-checked': string;
+        '--n-color-table-header': string;
+        '--n-color-table-header-modal': string;
+        '--n-color-table-header-popover': string;
+        '--n-color-disabled': string;
+        '--n-color-disabled-checked': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-check-mark-color': string;
+        '--n-check-mark-color-disabled': string;
+        '--n-check-mark-color-disabled-checked': string;
+        '--n-font-size': string;
+        '--n-label-padding': 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/es/checkbox/src/Checkbox.js

@@ -164,29 +164,29 @@ export default defineComponent({
                 const { value: mergedSize } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value;
                 return {
-                    '--size': size,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--border-checked': borderChecked,
-                    '--border-focus': borderFocus,
-                    '--border-disabled': borderDisabled,
-                    '--border-disabled-checked': borderDisabledChecked,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--color': color,
-                    '--color-checked': colorChecked,
-                    '--color-table-header': colorTableHeader,
-                    '--color-table-header-modal': colorTableHeaderModal,
-                    '--color-table-header-popover': colorTableHeaderPopover,
-                    '--color-disabled': colorDisabled,
-                    '--color-disabled-checked': colorDisabledChecked,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--check-mark-color': checkMarkColor,
-                    '--check-mark-color-disabled': checkMarkColorDisabled,
-                    '--check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
-                    '--font-size': fontSize,
-                    '--label-padding': labelPadding
+                    '--n-size': size,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--n-border-checked': borderChecked,
+                    '--n-border-focus': borderFocus,
+                    '--n-border-disabled': borderDisabled,
+                    '--n-border-disabled-checked': borderDisabledChecked,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-color': color,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-table-header': colorTableHeader,
+                    '--n-color-table-header-modal': colorTableHeaderModal,
+                    '--n-color-table-header-popover': colorTableHeaderPopover,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-color-disabled-checked': colorDisabledChecked,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-check-mark-color': checkMarkColor,
+                    '--n-check-mark-color-disabled': checkMarkColorDisabled,
+                    '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
+                    '--n-font-size': fontSize,
+                    '--n-label-padding': labelPadding
                 };
             })
         });

package/es/checkbox/src/styles/index.cssr.js

@@ -1,47 +1,47 @@
 import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'; // vars:
-// --bezier
-// --size
-// --border
-// --border-focus
-// --border-checked
-// --border-disabled
-// --border-disabled-checked
-// --box-shadow-focus
-// --color
-// --color-checked
-// --color-table-header
-// --color-table-header-modal
-// --color-disabled
-// --color-disabled-checked
-// --text-color
-// --text-color-disabled
-// --check-mark-color
-// --check-mark-color-disabled
-// --check-mark-color-disabled-checked
-// --border-radius
-// --font-size
-// --label-padding
+// --n-bezier
+// --n-size
+// --n-border
+// --n-border-focus
+// --n-border-checked
+// --n-border-disabled
+// --n-border-disabled-checked
+// --n-box-shadow-focus
+// --n-color
+// --n-color-checked
+// --n-color-table-header
+// --n-color-table-header-modal
+// --n-color-disabled
+// --n-color-disabled-checked
+// --n-text-color
+// --n-text-color-disabled
+// --n-check-mark-color
+// --n-check-mark-color-disabled
+// --n-check-mark-color-disabled-checked
+// --n-border-radius
+// --n-font-size
+// --n-label-padding
 
 export default c([cB('checkbox', `
  line-height: 1;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
- --merged-color-table-header: var(--color-table-header);
+ --n-merged-color-table-header: var(--n-color-table-header);
  `, [c('&:hover', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-focus)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-focus)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), cM('table-header', [cB('checkbox-box', {
-  backgroundColor: 'var(--merged-color-table-header)'
+  backgroundColor: 'var(--n-merged-color-table-header)'
 })]), cM('checked', [cB('checkbox-box', {
-  backgroundColor: 'var(--color-checked)'
+  backgroundColor: 'var(--n-color-checked)'
 }, [cB('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
 c('.check-icon', `
  width: 100%;
@@ -54,51 +54,51 @@ c('.check-icon', `
  opacity: 1;
  transform: scale(1);
  `)])])]), cM('checked, indeterminate', [c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-checked)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-checked)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), cB('checkbox-box', `
- background-color: var(--color-checked);
+ background-color: var(--n-color-checked);
  border-left: 0;
  border-top: 0;
  `, [cE('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), cM('disabled', {
   cursor: 'not-allowed'
 }, [cM('checked', [cB('checkbox-box', `
- background-color: var(--color-disabled-checked);
+ background-color: var(--n-color-disabled-checked);
  `, [cE('border', {
-  border: 'var(--border-disabled-checked)'
+  border: 'var(--n-border-disabled-checked)'
 }), cB('checkbox-icon', [c('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled-checked)'
+  fill: 'var(--n-check-mark-color-disabled-checked)'
 })])])]), cB('checkbox-box', `
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `, [cE('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 }), cB('checkbox-icon', [c('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled)'
+  fill: 'var(--n-check-mark-color-disabled)'
 })])]), cE('label', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 })]), cB('checkbox-box', `
- height: var(--size);
- width: var(--size);
+ height: var(--n-size);
+ width: var(--n-size);
  display: inline-block;
  box-sizing: border-box;
- border-radius: var(--border-radius);
- background-color: var(--color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
  position: relative;
  transition:
- background-color 0.3s var(--bezier);
+ background-color 0.3s var(--n-bezier);
  `, [cE('border', `
  transition:
- border-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  border-radius: inherit;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
- border: var(--border);
+ border: var(--n-border);
  `), cB('checkbox-icon', `
  display: flex;
  align-items: center;
@@ -109,29 +109,29 @@ c('.check-icon', `
  top: 1px;
  bottom: 1px;
  `, [c('.check-icon, .line-icon', `
- fill: var(--check-mark-color);
+ fill: var(--n-check-mark-color);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition:
- fill 0.3s var(--bezier),
- transform 0.3s var(--bezier),
- opacity 0.3s var(--bezier),
- border-color 0.3s var(--bezier);
+ fill 0.3s var(--n-bezier),
+ transform 0.3s var(--n-bezier),
+ opacity 0.3s var(--n-bezier),
+ border-color 0.3s var(--n-bezier);
  `), iconSwitchTransition({
   left: '1px',
   top: '1px'
 })])]), cE('label', `
- color: var(--text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
  user-select: none;
- padding: var(--label-padding);
+ padding: var(--n-label-padding);
  `, [c('&:empty', {
   display: 'none'
 })])]), // modal table header checkbox
 insideModal(cB('checkbox', `
- --merged-color-table-header: var(--color-table-header-modal);
+ --n-merged-color-table-header: var(--n-color-table-header-modal);
  `)), // popover table header checkbox
 insidePopover(cB('checkbox', `
- --merged-color-table-header: var(--color-table-header-popover);
+ --n-merged-color-table-header: var(--n-color-table-header-popover);
  `))]);

package/es/code/src/Code.d.ts

@@ -121,20 +121,20 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     codeRef: import("vue").Ref<HTMLElement | null>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--font-family': string;
-        '--font-weight-strong': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--mono-3': string;
-        '--hue-1': string;
-        '--hue-2': string;
-        '--hue-3': string;
-        '--hue-4': string;
-        '--hue-5': string;
-        '--hue-5-2': string;
-        '--hue-6': string;
-        '--hue-6-2': string;
+        '--n-font-size': string;
+        '--n-font-family': string;
+        '--n-font-weight-strong': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-mono-3': string;
+        '--n-hue-1': string;
+        '--n-hue-2': string;
+        '--n-hue-3': string;
+        '--n-hue-4': string;
+        '--n-hue-5': string;
+        '--n-hue-5-2': string;
+        '--n-hue-6': string;
+        '--n-hue-6-2': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     language?: unknown;

package/es/code/src/Code.js

@@ -52,9 +52,16 @@ export default defineComponent({
                 codeEl.textContent = code;
                 return;
             }
-            const warp = document.createElement('pre');
-            warp.textContent = code;
-            codeEl.appendChild(warp);
+            const maybePreEl = codeEl.children[0];
+            if (maybePreEl && maybePreEl.tagName === 'PRE') {
+                maybePreEl.textContent = code;
+            }
+            else {
+                const warp = document.createElement('pre');
+                warp.textContent = code;
+                codeEl.innerHTML = '';
+                codeEl.appendChild(warp);
+            }
         };
         onMounted(setCode);
         watch(toRef(props, 'language'), setCode);
@@ -71,20 +78,22 @@ export default defineComponent({
                 'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
                 const { internalFontSize } = props;
                 return {
-                    '--font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
-                    '--font-family': fontFamilyMono,
-                    '--font-weight-strong': fontWeightStrong,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--mono-3': $1,
-                    '--hue-1': $2,
-                    '--hue-2': $3,
-                    '--hue-3': $4,
-                    '--hue-4': $5,
-                    '--hue-5': $6,
-                    '--hue-5-2': $7,
-                    '--hue-6': $8,
-                    '--hue-6-2': $9
+                    '--n-font-size': internalFontSize
+                        ? `${internalFontSize}px`
+                        : fontSize,
+                    '--n-font-family': fontFamilyMono,
+                    '--n-font-weight-strong': fontWeightStrong,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-mono-3': $1,
+                    '--n-hue-1': $2,
+                    '--n-hue-2': $3,
+                    '--n-hue-3': $4,
+                    '--n-hue-4': $5,
+                    '--n-hue-5': $6,
+                    '--n-hue-5-2': $7,
+                    '--n-hue-6': $8,
+                    '--n-hue-6-2': $9
                 };
             })
         };