naive-ui 2.40.4 → 2.41.1

package/lib/input-otp/src/InputOtp.js

@@ -0,0 +1,242 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOtpProps = void 0;
+const seemly_1 = require("seemly");
+const vooks_1 = require("vooks");
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const input_1 = require("../../input");
+const light_1 = __importDefault(require("../styles/light"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.inputOtpProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { defaultValue: { type: Array, default: [] }, value: Array, length: {
+        type: Number,
+        default: 6
+    }, size: String, disabled: Boolean, mask: Boolean, readonly: Boolean, status: String, gap: [String, Number], placeholder: { type: String, default: '' }, allowInput: Function, onBlur: [Function, Array], onFocus: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFinish: [Function, Array] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'InputOtp',
+    props: exports.inputOtpProps,
+    slots: Object,
+    setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('InputOtp', '-input-otp', index_cssr_1.default, light_1.default, props, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('InputOtp', mergedRtlRef, mergedClsPrefixRef);
+        // form-item
+        const formItem = (0, _mixins_1.useFormItem)(props);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = mergedSizeRef;
+            const { gap: propGap } = props;
+            const { self: { [(0, _utils_1.createKey)('inputWidth', size)]: inputWidth, [(0, _utils_1.createKey)('gap', size)]: gap } } = themeRef.value;
+            return {
+                '--n-gap': propGap === undefined
+                    ? gap
+                    : typeof propGap === 'number'
+                        ? (0, seemly_1.pxfy)(propGap)
+                        : propGap,
+                '--n-input-width': inputWidth
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('input-otp', (0, vue_1.computed)(() => {
+                const { value: size } = mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
+            : undefined;
+        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
+        const controlledValueRef = (0, vue_1.toRef)(props, 'value');
+        const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        const inputRefList = (0, vue_1.ref)([]);
+        const inputTypeRef = (0, vue_1.computed)(() => props.mask ? 'password' : 'text');
+        const handleFocus = (e, index) => {
+            // If it's focused from other input element inside the component, returns
+            if (inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value.some(inputInst => inputInst.inputElRef === e.relatedTarget)) {
+                return;
+            }
+            const { onFocus } = props;
+            if (onFocus) {
+                (0, _utils_1.call)(onFocus, e, index);
+            }
+            const { nTriggerFormFocus } = formItem;
+            nTriggerFormFocus();
+        };
+        const handleBlur = (e, index) => {
+            // If it's blured to other input element inside the component, returns
+            if (inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value.some(inputInst => inputInst.inputElRef === e.relatedTarget)) {
+                return;
+            }
+            const { onBlur } = props;
+            const { nTriggerFormBlur } = formItem;
+            if (onBlur)
+                (0, _utils_1.call)(onBlur, e, index);
+            nTriggerFormBlur();
+        };
+        const focusOnChar = (charIndex) => {
+            if (charIndex >= props.length)
+                return;
+            if (charIndex < 0)
+                return;
+            inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[charIndex].focus();
+            inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[charIndex].select();
+        };
+        const focusOnNextChar = (currentIndex) => {
+            if (currentIndex >= props.length - 1) {
+                return;
+            }
+            focusOnChar(currentIndex + 1);
+        };
+        const focusOnPrevChar = (currentIndex) => {
+            if (currentIndex <= 0) {
+                return;
+            }
+            focusOnChar(currentIndex - 1);
+        };
+        const justifyValue = (value) => {
+            const justifiedValue = value ? Array.from(value) : [];
+            const length = props.length;
+            while (justifiedValue.length > length) {
+                justifiedValue.pop();
+            }
+            while (justifiedValue.length < length) {
+                justifiedValue.push('');
+            }
+            return justifiedValue;
+        };
+        function doUpdateValue(value, meta) {
+            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            if ((0, _utils_1.isArrayShallowEqual)(value, mergedValueRef.value)) {
+                nTriggerFormInput();
+                return;
+            }
+            const { 'onUpdate:value': _onUpdateValue, onUpdateValue, length, onFinish } = props;
+            if (_onUpdateValue)
+                (0, _utils_1.call)(_onUpdateValue, value, meta);
+            if (onUpdateValue)
+                (0, _utils_1.call)(onUpdateValue, value, meta);
+            if (value.filter(v => v).length === length && onFinish) {
+                (0, _utils_1.call)(onFinish, value);
+            }
+            uncontrolledValueRef.value = value;
+            nTriggerFormInput();
+            nTriggerFormChange();
+        }
+        const handlePaste = (e, index) => {
+            e.preventDefault();
+            const { clipboardData } = e;
+            const text = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text');
+            if (!text)
+                return;
+            const currentValue = justifyValue(mergedValueRef.value);
+            let startIndex = index;
+            const allowInput = props.allowInput;
+            let pasteApplied = false;
+            let appendedText = '';
+            for (let i = 0; i < text.length; ++i) {
+                if (allowInput && !allowInput(text[i], startIndex, currentValue)) {
+                    continue;
+                }
+                pasteApplied = true;
+                currentValue[startIndex] = text[i];
+                appendedText += text[i];
+                startIndex++;
+                if (startIndex >= currentValue.length) {
+                    break;
+                }
+            }
+            if (pasteApplied) {
+                focusOnChar(startIndex);
+                doUpdateValue(currentValue, {
+                    diff: appendedText,
+                    index: startIndex,
+                    source: 'paste'
+                });
+            }
+        };
+        const handleKeydown = (e, index) => {
+            const keyCode = e.code || e.key;
+            const currentValue = justifyValue(mergedValueRef.value);
+            if (keyCode === 'Backspace') {
+                e.preventDefault();
+                currentValue[Math.max(index, 0)] = '';
+                doUpdateValue(currentValue, { diff: '', index, source: 'delete' });
+                focusOnPrevChar(index);
+            }
+            else if (keyCode === 'ArrowLeft') {
+                e.preventDefault();
+                focusOnPrevChar(index);
+            }
+            else if (keyCode === 'ArrowRight') {
+                e.preventDefault();
+                focusOnNextChar(index);
+            }
+        };
+        const handleInput = (value, index) => {
+            const currentValue = justifyValue(mergedValueRef.value);
+            const currentValueAtIndex = currentValue[index];
+            const diff = value.replace(currentValueAtIndex, '');
+            const char = diff[diff.length - 1] || value[value.length - 1] || '';
+            const allowInput = props.allowInput;
+            if (allowInput && !allowInput(char, index, currentValue)) {
+                return;
+            }
+            currentValue[index] = char;
+            doUpdateValue(currentValue, { diff: char, index, source: 'input' });
+            focusOnNextChar(index);
+        };
+        const getTemplateEvents = (index) => {
+            return {
+                onInput: (value) => handleInput(value, index),
+                onPaste: (event) => handlePaste(event, index),
+                onKeydown: (event) => handleKeydown(event, index),
+                onFocus: (event) => handleFocus(event, index),
+                onBlur: (event) => handleBlur(event, index)
+            };
+        };
+        return {
+            mergedTheme: themeRef,
+            perItemValueArray: (0, vue_1.computed)(() => justifyValue(mergedValueRef.value)),
+            mergedClsPrefix: mergedClsPrefixRef,
+            inputRefList,
+            inputType: inputTypeRef,
+            rtlEnabled: rtlEnabledRef,
+            mergedStatus: mergedStatusRef,
+            mergedDisabled: mergedDisabledRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            getTemplateEvents,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { mergedTheme, mergedClsPrefix, perItemValueArray, size, placeholder, mergedDisabled, mergedStatus, readonly, inputType, $slots, getTemplateEvents, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { style: this.cssVars, class: [
+                `${mergedClsPrefix}-input-otp`,
+                themeClass,
+                this.rtlEnabled && `${mergedClsPrefix}-input-otp--rtl`
+            ] }, (0, seemly_1.repeat)(this.length, undefined).map((_, index) => (0, _utils_1.resolveSlotWithTypedProps)($slots.default, Object.assign({ index, value: perItemValueArray[index], type: inputType, size,
+            placeholder, disabled: mergedDisabled, readonly, status: mergedStatus, builtinThemeOverrides: {
+                paddingTiny: '0',
+                paddingSmall: '0',
+                paddingMedium: '0',
+                paddingLarge: '0'
+            }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, ref: (el) => (this.inputRefList[index] = el) }, getTemplateEvents(index)), (_a) => {
+            var { index } = _a, restProps = __rest(_a, ["index"]);
+            return [(0, vue_1.h)(input_1.NInput, Object.assign({}, restProps, { key: index }))];
+        }))));
+    }
+});

package/lib/input-otp/src/public-types.d.ts

@@ -0,0 +1,24 @@
+import type { VNode } from 'vue';
+import type { InputInst } from '../../components';
+import type { InputProps } from '../../input/src/Input';
+export type InputOtpAllowInput = (char: string, index: number, currentValue: string[]) => boolean;
+export type InputOtpSize = 'small' | 'medium' | 'large';
+export type InputOtpOnUpdateValue = (value: string[], meta: InputOtpOnUpdateValueMeta) => void;
+export type InputOtpOnFocus = (e: FocusEvent, index: number) => void;
+export type InputOtpOnBlur = (e: FocusEvent, index: number) => void;
+export interface InputOtpSlots {
+    default?: InputOtpDefaultSlot;
+}
+export type InputOtpDefaultSlot = (props: InputProps & {
+    index: number;
+    ref: (inst: InputInst) => void;
+}) => VNode[];
+export type InputOtpOnFinish = (value: string[]) => void;
+export interface InputOtpOnUpdateValueMeta {
+    diff: string;
+    index: number;
+    source: InputOtpOnUpdateValueMetaSource;
+}
+export type InputOtpOnUpdateValueMetaSource = 'paste' | 'input' | 'delete';
+export interface InputOtpInst {
+}

package/lib/input-otp/src/public-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/input-otp/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/input-otp/src/styles/index.cssr.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// --n-input-width
+// --n-gap
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input-otp', `
+ display: flex;
+ align-items: center;
+ gap: var(--n-gap);
+ `, [(0, cssr_1.cB)('input', `
+ width: var(--n-input-width);
+ text-align: center;
+ `)])]);

package/lib/input-otp/src/styles/input-otp-rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/input-otp/src/styles/input-otp-rtl.cssr.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// --n-gap
+exports.default = (0, cssr_1.cB)('input-otp', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

package/lib/input-otp/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { InputOtpTheme } from './light';
+declare const inputOtpDark: InputOtpTheme;
+export default inputOtpDark;

package/lib/input-otp/styles/dark.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const styles_1 = require("../../styles");
+const light_1 = require("./light");
+const inputOtpDark = {
+    name: 'InputOtp',
+    common: common_1.commonDark,
+    peers: {
+        Input: styles_1.inputDark
+    },
+    self: light_1.self
+};
+exports.default = inputOtpDark;

package/lib/input-otp/styles/index.d.ts

@@ -0,0 +1,4 @@
+export { default as inputOtpDark } from './dark';
+export { default as inputOtpLight } from './light';
+export type { InputOtpTheme } from './light';
+export { inputOtpRtl } from './rtl';

package/lib/input-otp/styles/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOtpRtl = exports.inputOtpLight = exports.inputOtpDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "inputOtpDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "inputOtpLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "inputOtpRtl", { enumerable: true, get: function () { return rtl_1.inputOtpRtl; } });

package/lib/input-otp/styles/light.d.ts

@@ -0,0 +1,81 @@
+export declare function self(): {
+    inputWidthSmall: string;
+    inputWidthMedium: string;
+    inputWidthLarge: string;
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+};
+declare const inputOtpLight: import("../../_mixins").Theme<"InputOtp", {
+    inputWidthSmall: string;
+    inputWidthMedium: string;
+    inputWidthLarge: string;
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+}, {
+    Input: import("../../_mixins").Theme<"Input", {
+        fontWeight: string;
+        countTextColorDisabled: string;
+        countTextColor: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        lineHeight: string;
+        lineHeightTextarea: string;
+        borderRadius: string;
+        iconSize: string;
+        groupLabelColor: string;
+        groupLabelTextColor: string;
+        textColor: string;
+        textColorDisabled: string;
+        textDecorationColor: string;
+        caretColor: string;
+        placeholderColor: string;
+        placeholderColorDisabled: string;
+        color: string;
+        colorDisabled: string;
+        colorFocus: string;
+        groupLabelBorder: string;
+        border: string;
+        borderHover: string;
+        borderDisabled: string;
+        borderFocus: string;
+        boxShadowFocus: string;
+        loadingColor: string;
+        loadingColorWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        colorFocusWarning: string;
+        borderFocusWarning: string;
+        boxShadowFocusWarning: string;
+        caretColorWarning: string;
+        loadingColorError: string;
+        borderError: string;
+        borderHoverError: string;
+        colorFocusError: string;
+        borderFocusError: string;
+        boxShadowFocusError: string;
+        caretColorError: string;
+        clearColor: string;
+        clearColorHover: string;
+        clearColorPressed: string;
+        iconColor: string;
+        iconColorDisabled: string;
+        iconColorHover: string;
+        iconColorPressed: string;
+        suffixTextColor: string;
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        clearSize: string;
+    }, any>;
+}>;
+export default inputOtpLight;
+export type InputOtpTheme = typeof inputOtpLight;

package/lib/input-otp/styles/light.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = self;
+const _mixins_1 = require("../../_mixins");
+const common_1 = require("../../_styles/common");
+const styles_1 = require("../../input/styles");
+function self() {
+    return {
+        inputWidthSmall: '24px',
+        inputWidthMedium: '30px',
+        inputWidthLarge: '36px',
+        gapSmall: '8px',
+        gapMedium: '8px',
+        gapLarge: '8px'
+    };
+}
+const inputOtpLight = (0, _mixins_1.createTheme)({
+    name: 'InputOtp',
+    common: common_1.commonLight,
+    peers: {
+        Input: styles_1.inputLight
+    },
+    self
+});
+exports.default = inputOtpLight;

package/lib/input-otp/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const inputOtpRtl: RtlItem;

package/lib/input-otp/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOtpRtl = void 0;
+const input_otp_rtl_cssr_1 = __importDefault(require("../src/styles/input-otp-rtl.cssr"));
+exports.inputOtpRtl = {
+    name: 'InputOtp',
+    style: input_otp_rtl_cssr_1.default
+};

package/lib/list/index.d.ts

@@ -1,3 +1,4 @@
 export { listProps, default as NList } from './src/List';
-export type { ListProps } from './src/List';
+export type { ListProps, ListSlots } from './src/List';
 export { default as NListItem } from './src/ListItem';
+export type { ListItemSlots } from './src/ListItem';

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

@@ -1,4 +1,4 @@
-import type { PropType, Ref } from 'vue';
+import type { PropType, Ref, SlotsType, VNode } from 'vue';
 import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const listProps: {
     size: {
@@ -56,6 +56,11 @@ export declare const listProps: {
     }, any>>>;
 };
 export type ListProps = ExtractPublicPropTypes<typeof listProps>;
+export interface ListSlots {
+    default?: () => VNode[];
+    footer?: () => VNode[];
+    header?: () => VNode[];
+}
 interface ListInjection {
     showDividerRef: Ref<boolean>;
     mergedClsPrefixRef: Ref<string>;
@@ -195,5 +200,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     clickable: boolean;
     hoverable: boolean;
     showDivider: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<ListSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/list/src/List.js

@@ -20,6 +20,7 @@ exports.listInjectionKey = (0, _utils_1.createInjectionKey)('n-list');
 exports.default = (0, vue_1.defineComponent)({
     name: 'List',
     props: exports.listProps,
+    slots: Object,
     setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const rtlEnabledRef = (0, _mixins_1.useRtl)('List', mergedRtlRef, mergedClsPrefixRef);

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

@@ -1,5 +1,11 @@
+import type { SlotsType, VNode } from 'vue';
+export interface ListItemSlots {
+    default?: () => VNode[];
+    prefix?: () => VNode[];
+    suffix?: () => VNode[];
+}
 declare const _default: import("vue").DefineComponent<{}, {
     showDivider: import("vue").Ref<boolean, boolean>;
     mergedClsPrefix: import("vue").Ref<string, string>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<ListItemSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/list/src/ListItem.js

@@ -5,6 +5,7 @@ const _utils_1 = require("../../_utils");
 const List_1 = require("./List");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ListItem',
+    slots: Object,
     setup() {
         const listInjection = (0, vue_1.inject)(List_1.listInjectionKey, null);
         if (!listInjection) {

package/lib/locales/common/kmKH.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const kmKH: NLocale;
+export default kmKH;