naive-ui 2.24.6 → 2.25.2

package/es/input/src/Input.js

@@ -6,7 +6,7 @@ import { off, on } from 'evtd';
 import { EyeIcon, EyeOffIcon } from '../../_internal/icons';
 import { NBaseClear, NBaseIcon, NBaseSuffix, NScrollbar } from '../../_internal';
 import { useTheme, useLocale, useFormItem, useConfig } from '../../_mixins';
-import { call, createKey, warnOnce } from '../../_utils';
+import { call, createKey, resolveSlot, resolveWrappedSlot, warnOnce } from '../../_utils';
 import { inputLight } from '../styles';
 import { inputInjectionKey } from './interface';
 import { isEmptyValue } from './utils';
@@ -42,7 +42,7 @@ const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered:
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     /** private */
     textDecoration: [String, Array], attrSize: {
         type: Number,
@@ -62,7 +62,7 @@ export default defineComponent({
             });
         }
         const { mergedClsPrefixRef, mergedBorderedRef } = useConfig(props);
-        const themeRef = useTheme('Input', 'Input', style, inputLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Input', '-input', style, inputLight, props, mergedClsPrefixRef);
         // dom refs
         const wrapperElRef = ref(null);
         const textareaElRef = ref(null);
@@ -79,7 +79,7 @@ export default defineComponent({
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
         // form-item
         const formItem = useFormItem(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         // states
         const focusedRef = ref(false);
         const hoverRef = ref(false);
@@ -330,7 +330,6 @@ export default defineComponent({
             }
             // force update to sync input's view with value
             // if not set, after input, input value won't sync with dom input value
-            ;
             vm.$forceUpdate();
         }
         function handleInputBlur(e) {
@@ -639,7 +638,7 @@ export default defineComponent({
             textareaMirrorElRef,
             textareaScrollbarInstRef, 
             // value
-            uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, passwordVisible: passwordVisibleRef, mergedPlaceholder: mergedPlaceholderRef, showPlaceholder1: showPlaceholder1Ref, showPlaceholder2: showPlaceholder2Ref, mergedFocus: mergedFocusRef, isComposing: isComposingRef, activated: activatedRef, showClearButton, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, textDecorationStyle: textDecorationStyleRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, mergedShowPasswordOn: mergedShowPasswordOnRef, placeholderStyle: placeholderStyleRef, 
+            uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, passwordVisible: passwordVisibleRef, mergedPlaceholder: mergedPlaceholderRef, showPlaceholder1: showPlaceholder1Ref, showPlaceholder2: showPlaceholder2Ref, mergedFocus: mergedFocusRef, isComposing: isComposingRef, activated: activatedRef, showClearButton, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, textDecorationStyle: textDecorationStyleRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, mergedShowPasswordOn: mergedShowPasswordOnRef, placeholderStyle: placeholderStyleRef, mergedStatus: mergedStatusRef, 
             // methods
             handleTextAreaScroll,
             handleCompositionStart,
@@ -719,10 +718,11 @@ export default defineComponent({
             }) });
     },
     render() {
-        var _a, _b, _c, _d;
-        const { mergedClsPrefix, $slots } = this;
+        var _a, _b, _c;
+        const { mergedClsPrefix, mergedStatus, $slots } = this;
         return (h("div", { ref: "wrapperElRef", class: [
                 `${mergedClsPrefix}-input`,
+                mergedStatus && `${mergedClsPrefix}-input--${mergedStatus}-status`,
                 {
                     [`${mergedClsPrefix}-input--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-input--textarea`]: this.type === 'textarea',
@@ -737,7 +737,9 @@ export default defineComponent({
                 ? 0
                 : undefined, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.onKeyup, onKeydown: this.handleWrapperKeyDown },
             h("div", { class: `${mergedClsPrefix}-input-wrapper` },
-                $slots.affix || $slots.prefix ? (h("div", { class: `${mergedClsPrefix}-input__prefix` }, (_a = ($slots.affix || $slots.prefix)) === null || _a === void 0 ? void 0 : _a())) : null,
+                resolveWrappedSlot($slots.prefix, (children) => [
+                    h("div", { class: `${mergedClsPrefix}-input__prefix` }, children)
+                ]),
                 this.type === 'textarea' ? (h(NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
                     default: () => {
                         return (h(Fragment, null,
@@ -766,16 +768,18 @@ export default defineComponent({
                         this.showCount ||
                         this.mergedShowPasswordOn ||
                         this.loading !== undefined) ? (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || $slots.clear ? (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: $slots.clear })) : null,
-                    !this.internalLoadingBeforeSuffix ? (_b = $slots.suffix) === null || _b === void 0 ? void 0 : _b.call($slots) : null,
+                    this.clearable || $slots.clear ? (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })) : null,
+                    !this.internalLoadingBeforeSuffix ? (_a = $slots.suffix) === null || _a === void 0 ? void 0 : _a.call($slots) : null,
                     this.loading !== undefined ? (h(NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
-                    this.internalLoadingBeforeSuffix ? (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots) : null,
-                    this.showCount && this.type !== 'textarea' ? (h(WordCount, null, { default: $slots.count })) : null,
+                    this.internalLoadingBeforeSuffix ? (_b = $slots.suffix) === null || _b === void 0 ? void 0 : _b.call($slots) : null,
+                    this.showCount && this.type !== 'textarea' ? (h(WordCount, null, {
+                        default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); }
+                    })) : null,
                     this.mergedShowPasswordOn && this.type === 'password' ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
                         default: () => this.passwordVisible ? h(EyeIcon, null) : h(EyeOffIcon, null)
                     })) : null
                 ])) : null),
-            this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, $slots.separator ? $slots.separator() : this.separator)) : null,
+            this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, resolveSlot($slots.separator, () => [this.separator]))) : null,
             this.pair ? (h("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 h("div", { class: `${mergedClsPrefix}-input__input` },
                     h("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
@@ -784,11 +788,11 @@ export default defineComponent({
                     this.showPlaceholder2 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         h("span", null, this.mergedPlaceholder[1]))) : null),
                 h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || $slots.clear ? (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: $slots.clear })) : null,
-                    (_d = $slots.suffix) === null || _d === void 0 ? void 0 : _d.call($slots)
+                    this.clearable && (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })),
+                    (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots)
                 ]))) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
-            this.showCount && this.type === 'textarea' ? (h(WordCount, null, { default: $slots.count })) : null));
+            this.showCount && this.type === 'textarea' ? (h(WordCount, null, { default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); } })) : null));
     }
 });

package/es/input/src/InputGroup.js

@@ -7,7 +7,7 @@ export default defineComponent({
     props: inputGroupProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle('InputGroup', style, mergedClsPrefixRef);
+        useStyle('-input-group', style, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef
         };

package/es/input/src/InputGroupLabel.js

@@ -15,7 +15,7 @@ export default defineComponent({
     props: inputGroupLabelProps,
     setup(props) {
         const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Input', 'InputGroupLabel', style, inputLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Input', '-input-group-label', style, inputLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedBordered: mergedBorderedRef,

package/es/input/src/WordCount.js

@@ -1,4 +1,5 @@
 import { defineComponent, inject, h, computed } from 'vue';
+import { resolveSlotWithProps } from '../../_utils';
 import { inputInjectionKey } from './interface';
 import { len } from './utils';
 export default defineComponent({
@@ -16,15 +17,15 @@ export default defineComponent({
         return () => {
             const { value: maxlength } = maxlengthRef;
             const { value: mergedValue } = mergedValueRef;
-            return (h("span", { class: `${mergedClsPrefixRef.value}-input-word-count` }, slots.default
-                ? slots.default({
-                    value: mergedValue === null || Array.isArray(mergedValue)
-                        ? ''
-                        : mergedValue
-                })
-                : maxlength === undefined
+            return (h("span", { class: `${mergedClsPrefixRef.value}-input-word-count` }, resolveSlotWithProps(slots.default, {
+                value: mergedValue === null || Array.isArray(mergedValue)
+                    ? ''
+                    : mergedValue
+            }, () => [
+                maxlength === undefined
                     ? wordCountRef.value
-                    : `${wordCountRef.value} / ${maxlength}`));
+                    : `${wordCountRef.value} / ${maxlength}`
+            ])));
         };
     }
 });

package/es/input/src/styles/input.cssr.js

@@ -1,4 +1,4 @@
-import { cB, c, cE, cM, cNotM, insideFormItem } from '../../../_utils/cssr'; // vars:
+import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
 // --n-bezier
 // --n-color
 // --n-font-size
@@ -33,7 +33,7 @@ import { cB, c, cE, cM, cNotM, insideFormItem } from '../../../_utils/cssr'; //
 // --n-loading-color
 // ...form item vars
 
-export default c([cB('input', `
+export default cB('input', `
  max-width: 100%;
  cursor: text;
  line-height: 1.5;
@@ -47,7 +47,7 @@ export default c([cB('input', `
  transition: background-color .3s var(--n-bezier);
  font-size: var(--n-font-size);
  --n-padding-vertical: calc((var(--n-height) - 1.5 * var(--n-font-size)) / 2);
- `, [// common
+`, [// common
 cE('input, textarea', `
  overflow: hidden;
  flex-grow: 1;
@@ -241,7 +241,7 @@ cM('pair', [cE('input-el, placeholder', 'text-align: center;'), cE('separator',
  transition: color .3s var(--n-bezier);
  margin-left: 4px;
  font-variant: tabular-nums;
- `)]), ['warning', 'error'].map(status => insideFormItem(status, cB('input', [cNotM('disabled', [cB('base-loading', `
+ `), ['warning', 'error'].map(status => cM(`${status}-status`, [cNotM('disabled', [cB('base-loading', `
  color: var(--n-loading-color-${status})
  `), cE('input-el, textarea-el', `
  caret-color: var(--n-caret-color-${status});
@@ -259,4 +259,4 @@ cM('pair', [cE('input-el, placeholder', 'text-align: center;'), cE('separator',
  `, [cE('state-border', `
  box-shadow: var(--n-box-shadow-focus-${status});
  border: var(--n-border-focus-${status});
- `)])])])))]);
+ `)])])]))]);

package/es/input-number/src/InputNumber.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const inputNumberProps: {
     loading: {
@@ -1748,6 +1748,7 @@ declare const _default: import("vue").DefineComponent<{
     displayedValue: import("vue").Ref<string>;
     addable: import("vue").ComputedRef<boolean>;
     minusable: import("vue").ComputedRef<boolean>;
+    mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     handleFocus: (e: FocusEvent) => void;
     handleBlur: (e: FocusEvent) => void;
     handleClear: (e: MouseEvent) => void;

package/es/input-number/src/InputNumber.js

@@ -51,10 +51,10 @@ export default defineComponent({
     props: inputNumberProps,
     setup(props) {
         const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('InputNumber', 'InputNumber', style, inputNumberLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('InputNumber', '-input-number', style, inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('InputNumber');
         const formItem = useFormItem(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         // dom ref
         const inputInstRef = ref(null);
         const minusButtonInstRef = ref(null);
@@ -343,7 +343,7 @@ export default defineComponent({
         };
         return Object.assign(Object.assign({}, exposedMethods), { inputInstRef,
             minusButtonInstRef,
-            addButtonInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, mergedPlaceholder: mergedPlaceholderRef, displayedValueInvalid: displayedValueInvalidRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, displayedValue: displayedValueRef, addable: addableRef, minusable: minusableRef, handleFocus,
+            addButtonInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, mergedPlaceholder: mergedPlaceholderRef, displayedValueInvalid: displayedValueInvalidRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, displayedValue: displayedValueRef, addable: addableRef, minusable: minusableRef, mergedStatus: mergedStatusRef, handleFocus,
             handleBlur,
             handleClear,
             handleMouseDown,
@@ -368,24 +368,26 @@ export default defineComponent({
     render() {
         const { mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-input-number` },
-            h(NInput, { ref: "inputInstRef", bordered: this.mergedBordered, loading: this.loading, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable, internalLoadingBeforeSuffix: true }, {
-                _: 2,
-                prefix: this.$slots.prefix,
-                suffix: this.showButton
-                    ? () => [
-                        this.$slots.suffix && (h("span", { class: `${mergedClsPrefix}-input-number-suffix` }, { default: this.$slots.suffix })),
-                        h(NButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
-                            default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                                default: () => h(RemoveIcon, null)
-                            }))
-                        }),
-                        h(NButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
-                            default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                                default: () => h(AddIcon, null)
-                            }))
-                        })
-                    ]
-                    : this.$slots.suffix
+            h(NInput, { ref: "inputInstRef", status: this.mergedStatus, bordered: this.mergedBordered, loading: this.loading, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable, internalLoadingBeforeSuffix: true }, {
+                prefix: () => { var _a, _b; return (_b = (_a = this.$slots).prefix) === null || _b === void 0 ? void 0 : _b.call(_a); },
+                suffix: () => {
+                    var _a, _b;
+                    return this.showButton
+                        ? [
+                            this.$slots.suffix && (h("span", { class: `${mergedClsPrefix}-input-number-suffix` }, { default: this.$slots.suffix })),
+                            h(NButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
+                                default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                    default: () => h(RemoveIcon, null)
+                                }))
+                            }),
+                            h(NButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
+                                default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                    default: () => h(AddIcon, null)
+                                }))
+                            })
+                        ]
+                        : (_b = (_a = this.$slots).suffix) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
             })));
     }
 });

package/es/layout/src/Layout.js

@@ -34,7 +34,7 @@ export function createLayoutComponent(isContent) {
             const scrollableElRef = ref(null);
             const scrollbarInstRef = ref(null);
             const { mergedClsPrefixRef } = useConfig(props);
-            const themeRef = useTheme('Layout', 'Layout', style, layoutLight, props, mergedClsPrefixRef);
+            const themeRef = useTheme('Layout', '-layout', style, layoutLight, props, mergedClsPrefixRef);
             function scrollTo(options, y) {
                 if (props.nativeScrollbar) {
                     const { value: scrollableEl } = scrollableElRef;

package/es/layout/src/LayoutFooter.js

@@ -9,7 +9,7 @@ export default defineComponent({
     props: layoutFooterProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Layout', 'LayoutFooter', style, layoutLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Layout', '-layout-footer', style, layoutLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {

package/es/layout/src/LayoutHeader.js

@@ -16,7 +16,7 @@ export default defineComponent({
     props: Object.assign(Object.assign({}, useTheme.props), headerProps),
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Layout', 'LayoutHeader', style, layoutLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Layout', '-layout-header', style, layoutLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {

package/es/layout/src/LayoutSider.js

@@ -135,7 +135,7 @@ export default defineComponent({
             collapseModeRef: toRef(props, 'collapseMode')
         });
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Layout', 'LayoutSider', style, layoutLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Layout', '-layout-sider', style, layoutLight, props, mergedClsPrefixRef);
         function handleTransitionend(e) {
             var _a, _b;
             if (e.propertyName === 'max-width') {

package/es/legacy-grid/src/Col.js

@@ -1,8 +1,6 @@
 import { h, computed, defineComponent, inject } from 'vue';
 import { formatLength, keysOf, throwError } from '../../_utils';
-import { useStyle } from '../../_mixins';
 import { rowInjectionKey } from './Row';
-import style from './styles/index.cssr';
 export const colProps = {
     span: {
         type: [String, Number],
@@ -26,7 +24,6 @@ export default defineComponent({
     name: 'Col',
     props: colProps,
     setup(props) {
-        useStyle('Grid', style);
         const NRow = inject(rowInjectionKey, null);
         if (!NRow)
             throwError('col', '`n-col` must be placed inside `n-row`.');

package/es/legacy-grid/src/Row.js

@@ -18,7 +18,7 @@ export default defineComponent({
     props: rowProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle('LegacyGrid', style, mergedClsPrefixRef);
+        useStyle('-legacy-grid', style, mergedClsPrefixRef);
         const verticalGutterRef = useMemo(() => {
             const { gutter } = props;
             if (Array.isArray(gutter)) {

package/es/list/src/List.js

@@ -16,7 +16,7 @@ export default defineComponent({
     props: listProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('List', 'List', style, listLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('List', '-list', style, listLight, props, mergedClsPrefixRef);
         provide(listInjectionKey, {
             mergedClsPrefixRef
         });

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { h, Transition, computed, defineComponent, inject, withDirectives, vShow, ref, nextTick } from 'vue';
 import { useTheme } from '../../_mixins';
 import { loadingBarLight } from '../styles';
-import { loadingBarProviderInjectionKey } from './LoadingBarProvider';
+import { loadingBarProviderInjectionKey } from './context';
 import style from './styles/index.cssr';
 function createClassName(status, clsPrefix) {
     return `${clsPrefix}-loading-bar ${clsPrefix}-loading-bar--${status}`;
@@ -110,7 +110,7 @@ export default defineComponent({
                 yield init();
             });
         }
-        const themeRef = useTheme('LoadingBar', 'LoadingBar', style, loadingBarLight, providerProps, mergedClsPrefixRef);
+        const themeRef = useTheme('LoadingBar', '-loading-bar', style, loadingBarLight, providerProps, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             loadingBarRef,

package/es/loading-bar/src/LoadingBarProvider.d.ts

@@ -1,6 +1,6 @@
-import { PropType, ExtractPropTypes, Ref, CSSProperties } from 'vue';
+import { PropType, ExtractPropTypes, CSSProperties } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
-interface LoadingBarInst {
+export interface LoadingBarInst {
     start: () => void;
     error: () => void;
     finish: () => void;
@@ -36,11 +36,6 @@ declare const loadingBarProps: {
 };
 export declare type LoadingBarProviderProps = ExtractPublicPropTypes<typeof loadingBarProps>;
 export declare type LoadingBarProviderSetupProps = ExtractPropTypes<typeof loadingBarProps>;
-export declare const loadingBarProviderInjectionKey: import("vue").InjectionKey<{
-    props: LoadingBarProviderSetupProps;
-    mergedClsPrefixRef: Ref<string>;
-}>;
-export declare const loadingBarApiInjectionKey: import("vue").InjectionKey<LoadingBarInst>;
 declare const _default: import("vue").DefineComponent<{
     to: {
         type: PropType<string | HTMLElement>;
@@ -68,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
         height: string;
     }, any>>>;
 }, LoadingBarInst & {
-    loadingBarRef: Ref<{
+    loadingBarRef: import("vue").Ref<{
         start: () => void;
         error: () => void;
         finish: () => void;

package/es/loading-bar/src/LoadingBarProvider.js

@@ -2,15 +2,13 @@ import { Fragment, h, ref, Teleport, defineComponent, provide, nextTick } from '
 import { useIsMounted } from 'vooks';
 import { useConfig, useTheme } from '../../_mixins';
 import NLoadingBar from './LoadingBar';
-import { createInjectionKey } from '../../_utils';
+import { loadingBarApiInjectionKey, loadingBarProviderInjectionKey } from './context';
 const loadingBarProps = Object.assign(Object.assign({}, useTheme.props), { to: {
         type: [String, Object],
         default: undefined
     }, loadingBarStyle: {
         type: Object
     } });
-export const loadingBarProviderInjectionKey = createInjectionKey('n-loading-bar');
-export const loadingBarApiInjectionKey = createInjectionKey('n-loading-bar-api');
 export default defineComponent({
     name: 'LoadingBarProvider',
     props: loadingBarProps,

package/es/loading-bar/src/context.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import type { LoadingBarProviderSetupProps } from './LoadingBarProvider';
+export declare const loadingBarProviderInjectionKey: import("vue").InjectionKey<{
+    props: LoadingBarProviderSetupProps;
+    mergedClsPrefixRef: Ref<string>;
+}>;
+export declare const loadingBarApiInjectionKey: import("vue").InjectionKey<import("./LoadingBarProvider").LoadingBarInst>;

package/es/loading-bar/src/context.js

@@ -0,0 +1,3 @@
+import { createInjectionKey } from '../../_utils';
+export const loadingBarProviderInjectionKey = createInjectionKey('n-loading-bar');
+export const loadingBarApiInjectionKey = createInjectionKey('n-loading-bar-api');

package/es/loading-bar/src/use-loading-bar.js

@@ -1,5 +1,5 @@
 import { inject } from 'vue';
-import { loadingBarApiInjectionKey } from './LoadingBarProvider';
+import { loadingBarApiInjectionKey } from './context';
 import { throwError } from '../../_utils';
 export function useLoadingBar() {
     const loadingBar = inject(loadingBarApiInjectionKey, null);

package/es/locales/common/deDE.js

@@ -15,8 +15,8 @@ const deDE = {
         loadingRequiredMessage: (label) => `Bitte laden Sie alle Unterpunkte von ${label}, bevor Sie es auswählen.`
     },
     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',
@@ -24,8 +24,8 @@ const deDE = {
         dayFormat: 'eeeeee',
         yearTypeFormat: 'yyyy',
         monthTypeFormat: 'MM-yyyy',
-        dateFormat: 'dd-MM-yyyy',
-        dateTimeFormat: 'dd-MM-yyyy HH:mm:ss',
+        dateFormat: 'dd.MM.yyyy',
+        dateTimeFormat: 'dd.MM.yyyy HH:mm:ss',
         quarterFormat: 'yyyy-qqq',
         clear: 'Löschen',
         now: 'Jetzt',
@@ -35,9 +35,8 @@ const deDE = {
         datePlaceholder: 'Datum auswählen',
         datetimePlaceholder: 'Datum und Uhrzeit auswählen',
         monthPlaceholder: 'Monat auswählen',
-        // FIXME: translation needed
-        yearPlaceholder: 'Select Year',
-        quarterPlaceholder: 'Select Quarter',
+        yearPlaceholder: 'Jahr auswählen',
+        quarterPlaceholder: 'Quartal auswählen',
         startDatePlaceholder: 'Anfangsdatum',
         endDatePlaceholder: 'Enddatum',
         startDatetimePlaceholder: 'Anfangsdatum und Uhrzeit',
@@ -97,15 +96,14 @@ const deDE = {
         export: 'Exportieren',
         restore: 'Auf Standard zurücksetzen'
     },
-    // TODO: translation
     Image: {
-        tipPrevious: 'Previous picture (←)',
-        tipNext: 'Next picture (→)',
-        tipCounterclockwise: 'Counterclockwise',
-        tipClockwise: 'Clockwise',
-        tipZoomOut: 'Zoom out',
-        tipZoomIn: 'Zoom in',
-        tipClose: 'Close (Esc)'
+        tipPrevious: 'Vorheriges Bild (←)',
+        tipNext: 'Nächstes Bild (→)',
+        tipCounterclockwise: 'Gegen Uhrzeigersinn',
+        tipClockwise: 'Uhrzeigersinn',
+        tipZoomOut: 'Rauszoomen',
+        tipZoomIn: 'Reinzoomen',
+        tipClose: 'Schließen (Esc)'
     }
 };
 export default deDE;

package/es/locales/common/enGB.d.ts

@@ -0,0 +1,109 @@
+declare const enGB: {
+    name: string;
+    global: {
+        undo: string;
+        redo: string;
+        confirm: string;
+    };
+    Popconfirm: {
+        positiveText: string;
+        negativeText: string;
+    };
+    Cascader: {
+        placeholder: string;
+        loading: string;
+        loadingRequiredMessage: (label: string) => string;
+    };
+    Time: {
+        dateFormat: string;
+        dateTimeFormat: string;
+    };
+    DatePicker: {
+        yearFormat: string;
+        monthFormat: string;
+        dayFormat: string;
+        yearTypeFormat: string;
+        monthTypeFormat: string;
+        dateFormat: string;
+        dateTimeFormat: string;
+        quarterFormat: string;
+        clear: string;
+        now: string;
+        confirm: string;
+        selectTime: string;
+        selectDate: string;
+        datePlaceholder: string;
+        datetimePlaceholder: string;
+        monthPlaceholder: string;
+        yearPlaceholder: string;
+        quarterPlaceholder: string;
+        startDatePlaceholder: string;
+        endDatePlaceholder: string;
+        startDatetimePlaceholder: string;
+        endDatetimePlaceholder: string;
+        monthBeforeYear: boolean;
+        firstDayOfWeek: 0 | 2 | 1 | 3 | 4 | 5 | 6;
+        today: string;
+    };
+    DataTable: {
+        checkTableAll: string;
+        uncheckTableAll: string;
+        confirm: string;
+        clear: string;
+    };
+    Transfer: {
+        sourceTitle: string;
+        targetTitle: string;
+    };
+    Empty: {
+        description: string;
+    };
+    Select: {
+        placeholder: string;
+    };
+    TimePicker: {
+        placeholder: string;
+        positiveText: string;
+        negativeText: string;
+        now: string;
+    };
+    Pagination: {
+        goto: string;
+        selectionSuffix: string;
+    };
+    DynamicTags: {
+        add: string;
+    };
+    Log: {
+        loading: string;
+    };
+    Input: {
+        placeholder: string;
+    };
+    InputNumber: {
+        placeholder: string;
+    };
+    DynamicInput: {
+        create: string;
+    };
+    ThemeEditor: {
+        title: string;
+        clearAllVars: string;
+        clearSearch: string;
+        filterCompName: string;
+        filterVarName: string;
+        import: string;
+        export: string;
+        restore: string;
+    };
+    Image: {
+        tipPrevious: string;
+        tipNext: string;
+        tipCounterclockwise: string;
+        tipClockwise: string;
+        tipZoomOut: string;
+        tipZoomIn: string;
+        tipClose: string;
+    };
+};
+export default enGB;