naive-ui 2.40.4 → 2.41.1

package/es/input-otp/src/InputOtp.mjs

@@ -0,0 +1,317 @@
+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;
+};
+import { pxfy, repeat } from 'seemly';
+import { useMergedState } from 'vooks';
+import { computed, defineComponent, h, ref, toRef } from 'vue';
+import { useConfig, useFormItem, useRtl, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { call, createKey, isArrayShallowEqual, resolveSlotWithTypedProps } from "../../_utils/index.mjs";
+import { NInput } from "../../input/index.mjs";
+import inputOtpLight from "../styles/light.mjs";
+import style from "./styles/index.cssr.mjs";
+export const inputOtpProps = Object.assign(Object.assign({}, 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]
+});
+export default defineComponent({
+  name: 'InputOtp',
+  props: inputOtpProps,
+  slots: Object,
+  setup(props) {
+    const {
+      mergedClsPrefixRef,
+      mergedRtlRef,
+      inlineThemeDisabled
+    } = useConfig(props);
+    const themeRef = useTheme('InputOtp', '-input-otp', style, inputOtpLight, props, mergedClsPrefixRef);
+    const rtlEnabledRef = useRtl('InputOtp', mergedRtlRef, mergedClsPrefixRef);
+    // form-item
+    const formItem = useFormItem(props);
+    const {
+      mergedSizeRef,
+      mergedDisabledRef,
+      mergedStatusRef
+    } = formItem;
+    const cssVarsRef = computed(() => {
+      const {
+        value: size
+      } = mergedSizeRef;
+      const {
+        gap: propGap
+      } = props;
+      const {
+        self: {
+          [createKey('inputWidth', size)]: inputWidth,
+          [createKey('gap', size)]: gap
+        }
+      } = themeRef.value;
+      return {
+        '--n-gap': propGap === undefined ? gap : typeof propGap === 'number' ? pxfy(propGap) : propGap,
+        '--n-input-width': inputWidth
+      };
+    });
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('input-otp', computed(() => {
+      const {
+        value: size
+      } = mergedSizeRef;
+      return size[0];
+    }), cssVarsRef, props) : undefined;
+    const uncontrolledValueRef = ref(props.defaultValue);
+    const controlledValueRef = toRef(props, 'value');
+    const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+    const inputRefList = ref([]);
+    const inputTypeRef = 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) {
+        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) 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 (isArrayShallowEqual(value, mergedValueRef.value)) {
+        nTriggerFormInput();
+        return;
+      }
+      const {
+        'onUpdate:value': _onUpdateValue,
+        onUpdateValue,
+        length,
+        onFinish
+      } = props;
+      if (_onUpdateValue) call(_onUpdateValue, value, meta);
+      if (onUpdateValue) call(onUpdateValue, value, meta);
+      if (value.filter(v => v).length === length && onFinish) {
+        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: 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 h("div", {
+      style: this.cssVars,
+      class: [`${mergedClsPrefix}-input-otp`, themeClass, this.rtlEnabled && `${mergedClsPrefix}-input-otp--rtl`]
+    }, repeat(this.length, undefined).map((_, index) => 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 [h(NInput, Object.assign({}, restProps, {
+        key: index
+      }))];
+    })));
+  }
+});

package/es/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/es/input-otp/src/public-types.mjs

@@ -0,0 +1 @@
+export {};

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

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

package/es/input-otp/src/styles/index.cssr.mjs

@@ -0,0 +1,11 @@
+import { c, cB } from "../../../_utils/cssr/index.mjs";
+// --n-input-width
+// --n-gap
+export default c([cB('input-otp', `
+ display: flex;
+ align-items: center;
+ gap: var(--n-gap);
+ `, [cB('input', `
+ width: var(--n-input-width);
+ text-align: center;
+ `)])]);

package/es/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/es/input-otp/src/styles/input-otp-rtl.cssr.mjs

@@ -0,0 +1,5 @@
+import { cB, cM } from "../../../_utils/cssr/index.mjs";
+// --n-gap
+export default cB('input-otp', [cM('rtl', `
+ direction: rtl;
+ `)]);

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

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

package/es/input-otp/styles/dark.mjs

@@ -0,0 +1,12 @@
+import { commonDark } from "../../_styles/common/index.mjs";
+import { inputDark } from "../../styles.mjs";
+import { self } from "./light.mjs";
+const inputOtpDark = {
+  name: 'InputOtp',
+  common: commonDark,
+  peers: {
+    Input: inputDark
+  },
+  self
+};
+export default inputOtpDark;

package/es/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/es/input-otp/styles/index.mjs

@@ -0,0 +1,3 @@
+export { default as inputOtpDark } from "./dark.mjs";
+export { default as inputOtpLight } from "./light.mjs";
+export { inputOtpRtl } from "./rtl.mjs";

package/es/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/es/input-otp/styles/light.mjs

@@ -0,0 +1,22 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonLight } from "../../_styles/common/index.mjs";
+import { inputLight } from "../../input/styles/index.mjs";
+export function self() {
+  return {
+    inputWidthSmall: '24px',
+    inputWidthMedium: '30px',
+    inputWidthLarge: '36px',
+    gapSmall: '8px',
+    gapMedium: '8px',
+    gapLarge: '8px'
+  };
+}
+const inputOtpLight = createTheme({
+  name: 'InputOtp',
+  common: commonLight,
+  peers: {
+    Input: inputLight
+  },
+  self
+});
+export default inputOtpLight;

package/es/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/es/input-otp/styles/rtl.mjs

@@ -0,0 +1,5 @@
+import rtlStyle from "../src/styles/input-otp-rtl.cssr.mjs";
+export const inputOtpRtl = {
+  name: 'InputOtp',
+  style: rtlStyle
+};

package/es/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/es/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/es/list/src/List.mjs

@@ -20,6 +20,7 @@ export const listInjectionKey = createInjectionKey('n-list');
 export default defineComponent({
   name: 'List',
   props: listProps,
+  slots: Object,
   setup(props) {
     const {
       mergedClsPrefixRef,

package/es/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/es/list/src/ListItem.mjs

@@ -3,6 +3,7 @@ import { throwError } from "../../_utils/index.mjs";
 import { listInjectionKey } from "./List.mjs";
 export default defineComponent({
   name: 'ListItem',
+  slots: Object,
   setup() {
     const listInjection = inject(listInjectionKey, null);
     if (!listInjection) {

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

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