naive-ui 2.35.0 → 2.37.0

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

@@ -1,97 +0,0 @@
-import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
-// vars:
-// --n-bezier
-// --n-border-radius
-// --n-border
-// --n-close-icon-color
-// --n-close-icon-color-hover
-// --n-close-icon-color-pressed
-// --n-close-margin
-// --n-close-size
-// --n-color
-// --n-color-checkable
-// --n-color-checked
-// --n-color-checked-hover
-// --n-color-checked-pressed
-// --n-color-hover-checkable
-// --n-color-pressed-checkable
-// --n-font-size
-// --n-height
-// --n-opacity-disabled
-// --n-padding
-// --n-text-color
-// --n-text-color-checkable
-// --n-text-color-checked
-// --n-text-color-hover-checkable
-// --n-text-color-pressed-checkable
-// --n-font-weight-strong
-export default cB('tag', `
- white-space: nowrap;
- position: relative;
- box-sizing: border-box;
- cursor: default;
- display: inline-flex;
- align-items: center;
- flex-wrap: nowrap;
- padding: var(--n-padding);
- border-radius: var(--n-border-radius);
- color: var(--n-text-color);
- background-color: var(--n-color);
- transition: 
- border-color .3s var(--n-bezier),
- background-color .3s var(--n-bezier),
- color .3s var(--n-bezier),
- box-shadow .3s var(--n-bezier),
- opacity .3s var(--n-bezier);
- line-height: 1;
- height: var(--n-height);
- font-size: var(--n-font-size);
-`, [cM('strong', `
- font-weight: var(--n-font-weight-strong);
- `), cE('border', `
- pointer-events: none;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- border-radius: inherit;
- border: var(--n-border);
- transition: border-color .3s var(--n-bezier);
- `), cE('icon', `
- display: flex;
- margin: 0 4px 0 0;
- color: var(--n-text-color);
- transition: color .3s var(--n-bezier);
- font-size: var(--n-avatar-size-override);
- `), cE('avatar', `
- display: flex;
- margin: 0 6px 0 0;
- `), cE('close', `
- margin: var(--n-close-margin);
- transition:
- background-color .3s var(--n-bezier),
- color .3s var(--n-bezier);
- `), cM('round', `
- padding: 0 calc(var(--n-height) / 3);
- border-radius: calc(var(--n-height) / 2);
- `, [cE('icon', `
- margin: 0 4px 0 calc((var(--n-height) - 8px) / -2);
- `), cE('avatar', `
- margin: 0 6px 0 calc((var(--n-height) - 8px) / -2);
- `), cM('closable', `
- padding: 0 calc(var(--n-height) / 4) 0 calc(var(--n-height) / 3);
- `)]), cM('icon, avatar', [cM('round', `
- padding: 0 calc(var(--n-height) / 3) 0 calc(var(--n-height) / 2);
- `)]), cM('disabled', `
- cursor: not-allowed !important;
- opacity: var(--n-opacity-disabled);
- `), cM('checkable', `
- cursor: pointer;
- box-shadow: none;
- color: var(--n-text-color-checkable);
- background-color: var(--n-color-checkable);
- `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-hover-checkable);', [cNotM('checked', 'color: var(--n-text-color-hover-checkable);')]), c('&:active', 'background-color: var(--n-color-pressed-checkable);', [cNotM('checked', 'color: var(--n-text-color-pressed-checkable);')])]), cM('checked', `
- color: var(--n-text-color-checked);
- background-color: var(--n-color-checked);
- `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-checked-hover);'), c('&:active', 'background-color: var(--n-color-checked-pressed);')])])])]);

package/es/tag/src/styles/rtl.cssr.js

@@ -1,18 +0,0 @@
-import { cB, cM, cE } from '../../../_utils/cssr';
-export default cB('tag', [cM('rtl', `
- direction: rtl;
- `, [cE('close', `
- margin: var(--n-close-margin-rtl);
- `), cE('icon', `
- margin: 0 0 0 4px;
- `), cE('avatar', `
- margin: 0 0 0 6px;
- `), cM('round', [cE('icon', `
- margin: 0 calc((var(--n-height) - 8px) / -2) 0 4px;
- `), cE('avatar', `
- margin: 0 calc((var(--n-height) - 8px) / -2) 0 6px;
- `), cM('closable', `
- padding: 0 calc(var(--n-height) / 3) 0 calc(var(--n-height) / 4);
- `)]), cM('icon, avatar', [cM('round', `
- padding: 0 calc(var(--n-height) / 2) 0 calc(var(--n-height) / 3);
- `)])])]);

package/es/tag/styles/_common.js

@@ -1,13 +0,0 @@
-export default {
-    closeIconSizeTiny: '12px',
-    closeIconSizeSmall: '12px',
-    closeIconSizeMedium: '14px',
-    closeIconSizeLarge: '14px',
-    closeSizeTiny: '16px',
-    closeSizeSmall: '16px',
-    closeSizeMedium: '18px',
-    closeSizeLarge: '18px',
-    padding: '0 7px',
-    closeMargin: '0 0 0 4px',
-    closeMarginRtl: '0 4px 0 0'
-};

package/es/tag/styles/dark.js

@@ -1,23 +0,0 @@
-import commonVariables from './_common';
-import { changeColor, scaleColor } from 'seemly';
-import { commonDark } from '../../_styles/common';
-const tagDark = {
-    name: 'Tag',
-    common: commonDark,
-    self(vars) {
-        const { textColor2, primaryColorHover, primaryColorPressed, primaryColor, infoColor, successColor, warningColor, errorColor, baseColor, borderColor, tagColor, opacityDisabled, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, borderRadiusSmall: borderRadius, fontSizeMini, fontSizeTiny, fontSizeSmall, fontSizeMedium, heightMini, heightTiny, heightSmall, heightMedium, buttonColor2Hover, buttonColor2Pressed, fontWeightStrong } = vars;
-        return Object.assign(Object.assign({}, commonVariables), { closeBorderRadius: borderRadius, heightTiny: heightMini, heightSmall: heightTiny, heightMedium: heightSmall, heightLarge: heightMedium, borderRadius,
-            opacityDisabled, fontSizeTiny: fontSizeMini, fontSizeSmall: fontSizeTiny, fontSizeMedium: fontSizeSmall, fontSizeLarge: fontSizeMedium, fontWeightStrong, 
-            // checked
-            textColorCheckable: textColor2, textColorHoverCheckable: textColor2, textColorPressedCheckable: textColor2, textColorChecked: baseColor, colorCheckable: '#0000', colorHoverCheckable: buttonColor2Hover, colorPressedCheckable: buttonColor2Pressed, colorChecked: primaryColor, colorCheckedHover: primaryColorHover, colorCheckedPressed: primaryColorPressed, 
-            // default
-            border: `1px solid ${borderColor}`, textColor: textColor2, color: tagColor, colorBordered: '#0000', closeIconColor,
-            closeIconColorHover,
-            closeIconColorPressed,
-            closeColorHover,
-            closeColorPressed, borderPrimary: `1px solid ${changeColor(primaryColor, { alpha: 0.3 })}`, textColorPrimary: primaryColor, colorPrimary: changeColor(primaryColor, { alpha: 0.16 }), colorBorderedPrimary: '#0000', closeIconColorPrimary: scaleColor(primaryColor, { lightness: 0.7 }), closeIconColorHoverPrimary: scaleColor(primaryColor, { lightness: 0.7 }), closeIconColorPressedPrimary: scaleColor(primaryColor, {
-                lightness: 0.7
-            }), closeColorHoverPrimary: changeColor(primaryColor, { alpha: 0.16 }), closeColorPressedPrimary: changeColor(primaryColor, { alpha: 0.12 }), borderInfo: `1px solid ${changeColor(infoColor, { alpha: 0.3 })}`, textColorInfo: infoColor, colorInfo: changeColor(infoColor, { alpha: 0.16 }), colorBorderedInfo: '#0000', closeIconColorInfo: scaleColor(infoColor, { alpha: 0.7 }), closeIconColorHoverInfo: scaleColor(infoColor, { alpha: 0.7 }), closeIconColorPressedInfo: scaleColor(infoColor, { alpha: 0.7 }), closeColorHoverInfo: changeColor(infoColor, { alpha: 0.16 }), closeColorPressedInfo: changeColor(infoColor, { alpha: 0.12 }), borderSuccess: `1px solid ${changeColor(successColor, { alpha: 0.3 })}`, textColorSuccess: successColor, colorSuccess: changeColor(successColor, { alpha: 0.16 }), colorBorderedSuccess: '#0000', closeIconColorSuccess: scaleColor(successColor, { alpha: 0.7 }), closeIconColorHoverSuccess: scaleColor(successColor, { alpha: 0.7 }), closeIconColorPressedSuccess: scaleColor(successColor, { alpha: 0.7 }), closeColorHoverSuccess: changeColor(successColor, { alpha: 0.16 }), closeColorPressedSuccess: changeColor(successColor, { alpha: 0.12 }), borderWarning: `1px solid ${changeColor(warningColor, { alpha: 0.3 })}`, textColorWarning: warningColor, colorWarning: changeColor(warningColor, { alpha: 0.16 }), colorBorderedWarning: '#0000', closeIconColorWarning: scaleColor(warningColor, { alpha: 0.7 }), closeIconColorHoverWarning: scaleColor(warningColor, { alpha: 0.7 }), closeIconColorPressedWarning: scaleColor(warningColor, { alpha: 0.7 }), closeColorHoverWarning: changeColor(warningColor, { alpha: 0.16 }), closeColorPressedWarning: changeColor(warningColor, { alpha: 0.11 }), borderError: `1px solid ${changeColor(errorColor, { alpha: 0.3 })}`, textColorError: errorColor, colorError: changeColor(errorColor, { alpha: 0.16 }), colorBorderedError: '#0000', closeIconColorError: scaleColor(errorColor, { alpha: 0.7 }), closeIconColorHoverError: scaleColor(errorColor, { alpha: 0.7 }), closeIconColorPressedError: scaleColor(errorColor, { alpha: 0.7 }), closeColorHoverError: changeColor(errorColor, { alpha: 0.16 }), closeColorPressedError: changeColor(errorColor, { alpha: 0.12 }) });
-    }
-};
-export default tagDark;

package/es/tag/styles/index.js

@@ -1,3 +0,0 @@
-export { default as tagDark } from './dark';
-export { default as tagLight } from './light';
-export { tagRtl } from './rtl';

package/es/tag/styles/light.js

@@ -1,22 +0,0 @@
-import commonVariables from './_common';
-import { changeColor } from 'seemly';
-import { commonLight } from '../../_styles/common';
-const self = (vars) => {
-    const { textColor2, primaryColorHover, primaryColorPressed, primaryColor, infoColor, successColor, warningColor, errorColor, baseColor, borderColor, opacityDisabled, tagColor, closeIconColor, closeIconColorHover, closeIconColorPressed, borderRadiusSmall: borderRadius, fontSizeMini, fontSizeTiny, fontSizeSmall, fontSizeMedium, heightMini, heightTiny, heightSmall, heightMedium, closeColorHover, closeColorPressed, buttonColor2Hover, buttonColor2Pressed, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { closeBorderRadius: borderRadius, heightTiny: heightMini, heightSmall: heightTiny, heightMedium: heightSmall, heightLarge: heightMedium, borderRadius,
-        opacityDisabled, fontSizeTiny: fontSizeMini, fontSizeSmall: fontSizeTiny, fontSizeMedium: fontSizeSmall, fontSizeLarge: fontSizeMedium, fontWeightStrong, 
-        // checked
-        textColorCheckable: textColor2, textColorHoverCheckable: textColor2, textColorPressedCheckable: textColor2, textColorChecked: baseColor, colorCheckable: '#0000', colorHoverCheckable: buttonColor2Hover, colorPressedCheckable: buttonColor2Pressed, colorChecked: primaryColor, colorCheckedHover: primaryColorHover, colorCheckedPressed: primaryColorPressed, 
-        // default
-        border: `1px solid ${borderColor}`, textColor: textColor2, color: tagColor, colorBordered: 'rgb(250, 250, 252)', closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed,
-        closeColorHover,
-        closeColorPressed, borderPrimary: `1px solid ${changeColor(primaryColor, { alpha: 0.3 })}`, textColorPrimary: primaryColor, colorPrimary: changeColor(primaryColor, { alpha: 0.12 }), colorBorderedPrimary: changeColor(primaryColor, { alpha: 0.1 }), closeIconColorPrimary: primaryColor, closeIconColorHoverPrimary: primaryColor, closeIconColorPressedPrimary: primaryColor, closeColorHoverPrimary: changeColor(primaryColor, { alpha: 0.12 }), closeColorPressedPrimary: changeColor(primaryColor, { alpha: 0.18 }), borderInfo: `1px solid ${changeColor(infoColor, { alpha: 0.3 })}`, textColorInfo: infoColor, colorInfo: changeColor(infoColor, { alpha: 0.12 }), colorBorderedInfo: changeColor(infoColor, { alpha: 0.1 }), closeIconColorInfo: infoColor, closeIconColorHoverInfo: infoColor, closeIconColorPressedInfo: infoColor, closeColorHoverInfo: changeColor(infoColor, { alpha: 0.12 }), closeColorPressedInfo: changeColor(infoColor, { alpha: 0.18 }), borderSuccess: `1px solid ${changeColor(successColor, { alpha: 0.3 })}`, textColorSuccess: successColor, colorSuccess: changeColor(successColor, { alpha: 0.12 }), colorBorderedSuccess: changeColor(successColor, { alpha: 0.1 }), closeIconColorSuccess: successColor, closeIconColorHoverSuccess: successColor, closeIconColorPressedSuccess: successColor, closeColorHoverSuccess: changeColor(successColor, { alpha: 0.12 }), closeColorPressedSuccess: changeColor(successColor, { alpha: 0.18 }), borderWarning: `1px solid ${changeColor(warningColor, { alpha: 0.35 })}`, textColorWarning: warningColor, colorWarning: changeColor(warningColor, { alpha: 0.15 }), colorBorderedWarning: changeColor(warningColor, { alpha: 0.12 }), closeIconColorWarning: warningColor, closeIconColorHoverWarning: warningColor, closeIconColorPressedWarning: warningColor, closeColorHoverWarning: changeColor(warningColor, { alpha: 0.12 }), closeColorPressedWarning: changeColor(warningColor, { alpha: 0.18 }), borderError: `1px solid ${changeColor(errorColor, { alpha: 0.23 })}`, textColorError: errorColor, colorError: changeColor(errorColor, { alpha: 0.1 }), colorBorderedError: changeColor(errorColor, { alpha: 0.08 }), closeIconColorError: errorColor, closeIconColorHoverError: errorColor, closeIconColorPressedError: errorColor, closeColorHoverError: changeColor(errorColor, { alpha: 0.12 }), closeColorPressedError: changeColor(errorColor, { alpha: 0.18 }) });
-};
-const tagLight = {
-    name: 'Tag',
-    common: commonLight,
-    self
-};
-export default tagLight;

package/es/tag/styles/rtl.js

@@ -1,5 +0,0 @@
-import rtlStyle from '../src/styles/rtl.cssr';
-export const tagRtl = {
-    name: 'Tag',
-    style: rtlStyle
-};

package/es/theme-editor/index.js

@@ -1 +0,0 @@
-export { default as NThemeEditor } from './src/ThemeEditor';

package/es/theme-editor/src/MaximizeIcon.js

@@ -1,8 +0,0 @@
-import { h, defineComponent } from 'vue';
-export const MaximizeIcon = defineComponent({
-    render() {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
-            h("g", { fill: "none" },
-                h("path", { d: "M8.5 2a.5.5 0 0 0 0 1h3.793L3 12.293V8.5a.5.5 0 0 0-1 0v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H3.707L13 3.707V7.5a.5.5 0 0 0 1 0V2.6a.6.6 0 0 0-.6-.6H8.5z", fill: "currentColor" }))));
-    }
-});

package/es/theme-editor/src/MinimizeIcon.js

@@ -1,8 +0,0 @@
-import { h, defineComponent } from 'vue';
-export const MinimizeIcon = defineComponent({
-    render() {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
-            h("path", { d: "M4 18v2h6.586L2 28.582L3.414 30L12 21.414V28h2V18H4z", fill: "currentColor" }),
-            h("path", { d: "M30 3.416L28.592 2L20 10.586V4h-2v10h10v-2h-6.586L30 3.416z", fill: "currentColor" })));
-    }
-});

package/es/theme-editor/src/ThemeEditor.js

@@ -1,332 +0,0 @@
-import { h, computed, defineComponent, ref, Fragment, toRaw, watch, inject } from 'vue';
-import { cloneDeep, merge } from 'lodash-es';
-import { configProviderInjectionKey } from '../../config-provider/src/context';
-import { lightTheme } from '../../themes/light';
-import { NConfigProvider } from '../../config-provider';
-import { NPopover } from '../../popover';
-import { NCollapse, NCollapseItem } from '../../collapse';
-import { NInput } from '../../input';
-import { NSpace } from '../../space';
-import { NGrid, NGi } from '../../grid';
-import { useLocale } from '../../_mixins';
-import { NElement } from '../../element';
-import { NDivider } from '../../divider';
-import { NButton } from '../../button';
-import { NColorPicker } from '../../color-picker';
-import { NEmpty } from '../../empty';
-import { lockHtmlScrollRightCompensationRef } from '../../_utils';
-import { NIcon } from '../../icon';
-import { MaximizeIcon } from './MaximizeIcon';
-import { MinimizeIcon } from './MinimizeIcon';
-const ColorWandIcon = (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { width: '1em', height: '1em', color: 'currentColor' } },
-    h("path", { d: "M13.5 1C13.7761 1 14 1.22386 14 1.5V2H14.5C14.7761 2 15 2.22386 15 2.5C15 2.77614 14.7761 3 14.5 3H14V3.5C14 3.77614 13.7761 4 13.5 4C13.2239 4 13 3.77614 13 3.5V3H12.5C12.2239 3 12 2.77614 12 2.5C12 2.22386 12.2239 2 12.5 2H13V1.5C13 1.22386 13.2239 1 13.5 1Z", fill: "currentColor" }),
-    h("path", { d: "M3.5 3C3.77615 3 4 3.22386 4 3.5V4H4.5C4.77615 4 5 4.22386 5 4.5C5 4.77614 4.77615 5 4.5 5H4V5.5C4 5.77614 3.77615 6 3.5 6C3.22386 6 3 5.77614 3 5.5V5H2.5C2.22386 5 2 4.77614 2 4.5C2 4.22386 2.22386 4 2.5 4H3V3.5C3 3.22386 3.22386 3 3.5 3Z", fill: "currentColor" }),
-    h("path", { d: "M12.5 12C12.7761 12 13 11.7761 13 11.5C13 11.2239 12.7761 11 12.5 11H12V10.5C12 10.2239 11.7761 10 11.5 10C11.2239 10 11 10.2239 11 10.5V11H10.5C10.2239 11 10 11.2239 10 11.5C10 11.7761 10.2239 12 10.5 12H11V12.5C11 12.7761 11.2239 13 11.5 13C11.7761 13 12 12.7761 12 12.5V12H12.5Z", fill: "currentColor" }),
-    h("path", { d: "M8.72956 4.56346C9.4771 3.81592 10.6891 3.81592 11.4367 4.56347C12.1842 5.31102 12.1842 6.52303 11.4367 7.27058L4.26679 14.4404C3.51924 15.1879 2.30723 15.1879 1.55968 14.4404C0.812134 13.6928 0.812138 12.4808 1.55969 11.7333L8.72956 4.56346ZM8.25002 6.4572L2.26679 12.4404C1.90977 12.7974 1.90977 13.3763 2.26679 13.7333C2.62381 14.0903 3.20266 14.0903 3.55968 13.7333L9.54292 7.75009L8.25002 6.4572ZM10.25 7.04299L10.7295 6.56347C11.0866 6.20645 11.0866 5.6276 10.7296 5.27057C10.3725 4.91355 9.79368 4.91355 9.43666 5.27057L8.95713 5.7501L10.25 7.04299Z", fill: "currentColor" })));
-// button colorOpacitySecondary var is not color
-const showColorPicker = (key) => {
-    if (key.includes('pacity'))
-        return false;
-    if (key.includes('color') || key.includes('Color'))
-        return true;
-    return false;
-};
-export default defineComponent({
-    name: 'ThemeEditor',
-    inheritAttrs: false,
-    setup() {
-        const isMaximized = ref(false);
-        const fileInputRef = ref(null);
-        const NConfigProvider = inject(configProviderInjectionKey, null);
-        const theme = computed(() => {
-            var _a, _b, _c, _d;
-            const mergedTheme = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value) || lightTheme;
-            const mergedThemeOverrides = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeOverridesRef.value;
-            const common = merge({}, mergedTheme.common || lightTheme.common, mergedThemeOverrides === null || mergedThemeOverrides === void 0 ? void 0 : mergedThemeOverrides.common, overridesRef.value.common || {});
-            const overrides = {
-                common
-            };
-            for (const key of Object.keys(lightTheme)) {
-                if (key === 'common')
-                    continue;
-                overrides[key] = (((_b = (_a = mergedTheme[key]) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.call(_a, common)) ||
-                    ((_d = (_c = lightTheme[key]).self) === null || _d === void 0 ? void 0 : _d.call(_c, common)));
-                // There (last line) we must use as any, nor ts 2590 will be raised since the union
-                // is too complex
-                if (mergedThemeOverrides && overrides[key]) {
-                    merge(overrides[key], mergedThemeOverrides[key]);
-                }
-            }
-            return overrides;
-        });
-        const themeCommonDefaultRef = computed(() => {
-            var _a;
-            return ((_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value) === null || _a === void 0 ? void 0 : _a.common) || lightTheme.common;
-        });
-        const showPanelRef = ref(false);
-        const overridesRef = ref(JSON.parse(localStorage['naive-ui-theme-overrides'] || '{}'));
-        const tempOverridesRef = ref(JSON.parse(localStorage['naive-ui-theme-overrides'] || '{}'));
-        const varNamePatternRef = ref('');
-        const compNamePatternRef = ref('');
-        const tempVarNamePatternRef = ref('');
-        const tempCompNamePatternRef = ref('');
-        function applyTempOverrides() {
-            overridesRef.value = cloneDeep(toRaw(tempOverridesRef.value));
-        }
-        function setTempOverrides(compName, varName, value) {
-            const { value: tempOverrides } = tempOverridesRef;
-            if (!(compName in tempOverrides))
-                tempOverrides[compName] = {};
-            const compOverrides = tempOverrides[compName];
-            if (value) {
-                compOverrides[varName] = value;
-            }
-            else {
-                // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-                delete compOverrides[varName];
-            }
-        }
-        function handleClearAllClick() {
-            tempOverridesRef.value = {};
-            overridesRef.value = {};
-        }
-        function handleImportClick() {
-            const { value: fileInput } = fileInputRef;
-            if (!fileInput)
-                return;
-            fileInput.click();
-        }
-        function toggleMaximized() {
-            isMaximized.value = !isMaximized.value;
-        }
-        function handleInputFileChange() {
-            const { value: fileInput } = fileInputRef;
-            if (!fileInput)
-                return;
-            const fileList = fileInput.files;
-            const file = fileList === null || fileList === void 0 ? void 0 : fileList[0];
-            if (!file)
-                return;
-            file
-                .text()
-                .then((value) => {
-                overridesRef.value = JSON.parse(value);
-                tempOverridesRef.value = JSON.parse(value);
-            })
-                .catch((e) => {
-                alert('Imported File is Invalid');
-                console.error(e);
-            })
-                .finally(() => {
-                fileInput.value = '';
-            });
-        }
-        function handleExportClick() {
-            const url = URL.createObjectURL(new Blob([JSON.stringify(overridesRef.value, undefined, 2)]));
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'naive-ui-theme-overrides.json';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        }
-        watch(overridesRef, (value) => {
-            localStorage['naive-ui-theme-overrides'] = JSON.stringify(value);
-        });
-        return {
-            locale: useLocale('ThemeEditor').localeRef,
-            themeCommonDefault: themeCommonDefaultRef,
-            theme,
-            showPanel: showPanelRef,
-            tempOverrides: tempOverridesRef,
-            overrides: overridesRef,
-            compNamePattern: compNamePatternRef,
-            tempCompNamePattern: tempCompNamePatternRef,
-            varNamePattern: varNamePatternRef,
-            tempVarNamePattern: tempVarNamePatternRef,
-            fileInputRef,
-            applyTempOverrides,
-            setTempOverrides,
-            handleClearAllClick,
-            handleExportClick,
-            handleImportClick,
-            handleInputFileChange,
-            toggleMaximized,
-            isMaximized
-        };
-    },
-    render() {
-        return (h(NConfigProvider, { themeOverrides: this.overrides }, {
-            default: () => {
-                var _a, _b;
-                return [
-                    h(NPopover, { scrollable: true, arrowPointToCenter: true, trigger: "manual", show: this.showPanel, displayDirective: "show", placement: "top-end", style: {
-                            width: this.isMaximized ? 'calc(100vw - 80px)' : '288px',
-                            height: 'calc(100vh - 200px)',
-                            padding: 0
-                        } }, {
-                        trigger: () => (h(NElement, { style: [
-                                {
-                                    position: 'fixed',
-                                    zIndex: 10,
-                                    bottom: '40px',
-                                    right: `calc(40px + ${lockHtmlScrollRightCompensationRef.value})`,
-                                    width: '44px',
-                                    height: '44px',
-                                    fontSize: '26px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    borderRadius: '50%',
-                                    backgroundColor: 'var(--popover-color)',
-                                    color: 'var(--text-color-2)',
-                                    transition: 'color .3s var(--cubic-bezier-ease-in-out), background-color .3s var(--cubic-bezier-ease-in-out), box-shadow .3s var(--cubic-bezier-ease-in-out)',
-                                    boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
-                                    cursor: 'pointer'
-                                },
-                                this.$attrs.style
-                            ], 
-                            // We use ts-ignore for vue-tsc, since it seems to patch
-                            // native event for vue components
-                            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
-                            onClick: () => {
-                                this.showPanel = !this.showPanel;
-                            } }, { default: () => ColorWandIcon })),
-                        default: () => (h(Fragment, null,
-                            h("input", { type: "file", ref: "fileInputRef", style: {
-                                    display: 'block',
-                                    width: 0,
-                                    height: 0,
-                                    visibility: 'hidden'
-                                }, onChange: this.handleInputFileChange }),
-                            h(NSpace, { vertical: true }, {
-                                default: () => [
-                                    h(NSpace, { align: "center", justify: "space-between", style: {
-                                            marginBottom: '8px',
-                                            fontSize: '18px',
-                                            fontWeight: 500
-                                        } }, {
-                                        default: () => (h(Fragment, null,
-                                            h("span", null, this.locale.title),
-                                            h(NButton, { onClick: this.toggleMaximized, secondary: true, circle: true, size: "tiny" }, {
-                                                icon: () => (h(NIcon, { component: this.isMaximized
-                                                        ? MinimizeIcon
-                                                        : MaximizeIcon }))
-                                            })))
-                                    }),
-                                    this.locale.filterCompName,
-                                    h(NInput, { onChange: () => {
-                                            this.compNamePattern = this.tempCompNamePattern;
-                                        }, onInput: (value) => {
-                                            this.tempCompNamePattern = value;
-                                        }, value: this.tempCompNamePattern, placeholder: this.locale.filterCompName }),
-                                    this.locale.filterVarName,
-                                    h(NInput, { onChange: (value) => {
-                                            this.varNamePattern = value;
-                                        }, onInput: (value) => {
-                                            this.tempVarNamePattern = value;
-                                        }, value: this.tempVarNamePattern, placeholder: this.locale.filterVarName }),
-                                    h(NButton, { size: "small", onClick: () => {
-                                            this.compNamePattern = '';
-                                            this.varNamePattern = '';
-                                            this.tempCompNamePattern = '';
-                                            this.tempVarNamePattern = '';
-                                        }, block: true }, { default: () => this.locale.clearSearch }),
-                                    h(NButton, { size: "small", onClick: this.handleClearAllClick, block: true }, {
-                                        default: () => this.locale.clearAllVars
-                                    }),
-                                    h(NSpace, { itemStyle: { flex: 1 } }, {
-                                        default: () => (h(Fragment, null,
-                                            h(NButton, { block: true, size: "small", onClick: this.handleImportClick }, {
-                                                default: () => this.locale.import
-                                            }),
-                                            h(NButton, { block: true, size: "small", onClick: this.handleExportClick }, {
-                                                default: () => this.locale.export
-                                            })))
-                                    })
-                                ]
-                            }),
-                            h(NDivider, null),
-                            h(NCollapse, null, {
-                                default: () => {
-                                    const { theme, compNamePattern, varNamePattern } = this;
-                                    const themeKeys = Object.keys(theme);
-                                    const compNamePatternLower = compNamePattern.toLowerCase();
-                                    const varNamePatternLower = varNamePattern.toLowerCase();
-                                    let filteredItemsCount = 0;
-                                    const collapsedItems = themeKeys
-                                        .filter((themeKey) => {
-                                        return themeKey
-                                            .toLowerCase()
-                                            .includes(compNamePatternLower);
-                                    })
-                                        .map((themeKey) => {
-                                        const componentTheme = themeKey === 'common'
-                                            ? this.themeCommonDefault
-                                            : theme[themeKey];
-                                        if (componentTheme === undefined) {
-                                            return null;
-                                        }
-                                        const varKeys = Object.keys(componentTheme).filter((key) => {
-                                            return (key !== 'name' &&
-                                                key
-                                                    .toLowerCase()
-                                                    .includes(varNamePatternLower));
-                                        });
-                                        if (!varKeys.length) {
-                                            return null;
-                                        }
-                                        filteredItemsCount += 1;
-                                        return (h(NCollapseItem, { title: themeKey, name: themeKey }, {
-                                            default: () => (h(NGrid, { xGap: 32, yGap: 16, responsive: "screen", cols: this.isMaximized
-                                                    ? '1 xs:1 s:2 m:3 l:4'
-                                                    : 1 }, {
-                                                default: () => varKeys.map((varKey) => (h(NGi, null, {
-                                                    default: () => {
-                                                        var _a, _b, _c, _d;
-                                                        return (h(Fragment, null,
-                                                            h("div", { key: `${varKey}Label`, style: {
-                                                                    wordBreak: 'break-word'
-                                                                } }, varKey),
-                                                            showColorPicker(varKey) ? (h(NColorPicker, { key: varKey, modes: ['rgb', 'hex'], value: ((_b = (_a = this
-                                                                    .tempOverrides) === null || _a === void 0 ? void 0 : _a[themeKey]) === null || _b === void 0 ? void 0 : _b[varKey]) ||
-                                                                    componentTheme[varKey], onComplete: this
-                                                                    .applyTempOverrides, onUpdateValue: (value) => {
-                                                                    this.setTempOverrides(themeKey, varKey, value);
-                                                                } }, {
-                                                                action: () => {
-                                                                    var _a, _b;
-                                                                    return (h(NButton, { size: "small", disabled: componentTheme[varKey] ===
-                                                                            ((_b = (_a = this
-                                                                                .tempOverrides) === null || _a === void 0 ? void 0 : _a[themeKey]) === null || _b === void 0 ? void 0 : _b[varKey]), onClick: () => {
-                                                                            this.setTempOverrides(themeKey, varKey, componentTheme[varKey]);
-                                                                            this.applyTempOverrides();
-                                                                        } }, {
-                                                                        default: () => this.locale
-                                                                            .restore
-                                                                    }));
-                                                                }
-                                                            })) : (h(NInput, { key: varKey, onChange: this
-                                                                    .applyTempOverrides, onUpdateValue: (value) => {
-                                                                    this.setTempOverrides(themeKey, varKey, value);
-                                                                }, value: ((_d = (_c = this
-                                                                    .tempOverrides) === null || _c === void 0 ? void 0 : _c[themeKey]) === null || _d === void 0 ? void 0 : _d[varKey]) || '', placeholder: componentTheme[varKey] }))));
-                                                    }
-                                                })))
-                                            }))
-                                        }));
-                                    });
-                                    if (!filteredItemsCount)
-                                        return h(NEmpty, null);
-                                    return collapsedItems;
-                                }
-                            })))
-                    }),
-                    (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)
-                ];
-            }
-        }));
-    }
-});