@varlet/ui 3.15.2 → 3.16.0-alpha.1778310023051

package/README.md

@@ -14,7 +14,6 @@
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
     <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
 </div>
 

package/README.zh-CN.md

@@ -15,7 +15,6 @@
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
     <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
 </div>
 

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/index.bundle.mjs

@@ -56,6 +56,7 @@ import Menu from './menu/index.mjs'
 import MenuOption from './menu-option/index.mjs'
 import MenuSelect from './menu-select/index.mjs'
 import Option from './option/index.mjs'
+import OtpInput from './otp-input/index.mjs'
 import Overlay from './overlay/index.mjs'
 import Pagination from './pagination/index.mjs'
 import Paper from './paper/index.mjs'
@@ -151,6 +152,7 @@ export * from './menu/index.mjs'
 export * from './menu-option/index.mjs'
 export * from './menu-select/index.mjs'
 export * from './option/index.mjs'
+export * from './otp-input/index.mjs'
 export * from './overlay/index.mjs'
 export * from './pagination/index.mjs'
 export * from './paper/index.mjs'
@@ -246,6 +248,7 @@ import './menu/style/index.mjs'
 import './menu-option/style/index.mjs'
 import './menu-select/style/index.mjs'
 import './option/style/index.mjs'
+import './otp-input/style/index.mjs'
 import './overlay/style/index.mjs'
 import './pagination/style/index.mjs'
 import './paper/style/index.mjs'
@@ -283,7 +286,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.15.2'
+const version = '3.16.0-alpha.1778310023051'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -344,6 +347,7 @@ function install(app) {
   MenuOption.install && app.use(MenuOption)
   MenuSelect.install && app.use(MenuSelect)
   Option.install && app.use(Option)
+  OtpInput.install && app.use(OtpInput)
   Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
   Paper.install && app.use(Paper)
@@ -443,6 +447,7 @@ export {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,
@@ -542,6 +547,7 @@ export default {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,

package/es/index.mjs

@@ -56,6 +56,7 @@ import Menu from './menu/index.mjs'
 import MenuOption from './menu-option/index.mjs'
 import MenuSelect from './menu-select/index.mjs'
 import Option from './option/index.mjs'
+import OtpInput from './otp-input/index.mjs'
 import Overlay from './overlay/index.mjs'
 import Pagination from './pagination/index.mjs'
 import Paper from './paper/index.mjs'
@@ -151,6 +152,7 @@ export * from './menu/index.mjs'
 export * from './menu-option/index.mjs'
 export * from './menu-select/index.mjs'
 export * from './option/index.mjs'
+export * from './otp-input/index.mjs'
 export * from './overlay/index.mjs'
 export * from './pagination/index.mjs'
 export * from './paper/index.mjs'
@@ -188,7 +190,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.15.2'
+const version = '3.16.0-alpha.1778310023051'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -249,6 +251,7 @@ function install(app) {
   MenuOption.install && app.use(MenuOption)
   MenuSelect.install && app.use(MenuSelect)
   Option.install && app.use(Option)
+  OtpInput.install && app.use(OtpInput)
   Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
   Paper.install && app.use(Paper)
@@ -348,6 +351,7 @@ export {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,
@@ -447,6 +451,7 @@ export default {
   MenuOption,
   MenuSelect,
   Option,
+  OtpInput,
   Overlay,
   Pagination,
   Paper,

package/es/otp-input/OtpInput.mjs

@@ -0,0 +1,424 @@
+import { call, clamp, toNumber } from "@varlet/shared";
+import { onSmartMounted } from "@varlet/use";
+import { computed, defineComponent, nextTick, ref, useSlots } from "vue";
+import VarFormDetails from "../form-details/index.mjs";
+import { useForm } from "../form/provide.mjs";
+import VarInput from "../input/Input.mjs";
+import { createNamespace, flatFragment, useValidation } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+const { name, n, classes } = createNamespace("otp-input");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle } from "vue";
+const _hoisted_1 = ["data-index"];
+function __render__(_ctx, _cache) {
+  const _component_var_input = _resolveComponent("var-input");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "rootEl",
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      style: _normalizeStyle({
+        "--otp-input-gutter": _ctx.gutterStyle,
+        "--otp-input-cell-height": _ctx.cellHeightStyle,
+        "--otp-input-cell-max-width": _ctx.cellMaxWidthStyle
+      }),
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+      onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
+      onPaste: _cache[3] || (_cache[3] = (...args) => _ctx.handlePaste && _ctx.handlePaste(...args))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("cells"))
+        },
+        [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.cellIndexes, (_, index) => {
+              return _openBlock(), _createElementBlock(
+                _Fragment,
+                { key: index },
+                [
+                  _createElementVNode("div", {
+                    class: _normalizeClass(_ctx.n("cell")),
+                    "data-index": index
+                  }, [
+                    _createVNode(_component_var_input, {
+                      ref_for: true,
+                      ref: (el) => _ctx.setInputRef(el, index),
+                      "model-value": _ctx.getDisplayChar(index),
+                      type: _ctx.nativeInputType,
+                      maxlength: 1,
+                      autocomplete: "one-time-code",
+                      placeholder: "",
+                      hint: false,
+                      variant: _ctx.variant,
+                      "text-color": _ctx.textColor,
+                      "focus-color": _ctx.focusColor,
+                      "blur-color": _ctx.blurColor,
+                      disabled: _ctx.formDisabled || _ctx.disabled,
+                      readonly: _ctx.formReadonly || _ctx.readonly,
+                      inputmode: _ctx.resolvedInputmode,
+                      "is-force-focusing-effect": _ctx.activeIndex === index,
+                      "is-force-error-effect": !!_ctx.errorMessage,
+                      "is-show-form-details": false,
+                      onFocus: () => _ctx.handleFocus(index),
+                      onBlur: _cache[0] || (_cache[0] = (event) => _ctx.handleBlur(event)),
+                      onInput: (value) => _ctx.handleCellInput(index, value)
+                    }, null, 8, ["model-value", "type", "variant", "text-color", "focus-color", "blur-color", "disabled", "readonly", "inputmode", "is-force-focusing-effect", "is-force-error-effect", "onFocus", "onInput"])
+                  ], 10, _hoisted_1),
+                  _ctx.shouldRenderSeparator(index) ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("separator"))
+                    },
+                    [
+                      _renderSlot(_ctx.$slots, "separator", { index })
+                    ],
+                    2
+                    /* CLASS */
+                  )) : _createCommentVNode("v-if", true)
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_form_details, {
+        class: _normalizeClass(_ctx.n("details")),
+        "var-otp-input-cover": "",
+        "error-message": _ctx.errorMessage
+      }, null, 8, ["class", "error-message"])
+    ],
+    38
+    /* CLASS, STYLE, NEED_HYDRATION */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarFormDetails,
+    VarInput
+  },
+  props,
+  setup(props2) {
+    const slots = useSlots();
+    const rootEl = ref(null);
+    const inputRefs = ref([]);
+    const activeIndex = ref(-1);
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
+    const { bindForm, form } = useForm();
+    const normalizedLength = computed(() => toNumber(props2.length));
+    const normalizedMaskSymbol = computed(() => {
+      var _a;
+      return (_a = splitChars(props2.maskSymbol)[0]) != null ? _a : "\u2022";
+    });
+    const normalizedValue = computed(() => normalizeValue(props2.modelValue));
+    const cellIndexes = computed(() => Array.from({ length: normalizedLength.value }));
+    const gutterStyle = computed(() => toSizeUnit(props2.gutter));
+    const cellHeightStyle = computed(() => toSizeUnit(props2.cellHeight));
+    const cellMaxWidthStyle = computed(() => toSizeUnit(props2.cellMaxWidth));
+    const resolvedInputmode = computed(() => props2.type === "digit" ? "numeric" : void 0);
+    const nativeInputType = computed(() => props2.type === "digit" ? "tel" : "text");
+    const formDisabled = computed(() => {
+      var _a;
+      return (_a = form == null ? void 0 : form.disabled.value) != null ? _a : false;
+    });
+    const formReadonly = computed(() => {
+      var _a;
+      return (_a = form == null ? void 0 : form.readonly.value) != null ? _a : false;
+    });
+    let pendingFocusIndex = null;
+    let focusEffectQueued = false;
+    bindForm == null ? void 0 : bindForm({ validate, resetValidation, reset });
+    onSmartMounted(() => {
+      if (props2.autofocus) {
+        focus();
+      }
+    });
+    function splitChars(value) {
+      return Array.from(value);
+    }
+    function normalizeValue(value) {
+      return transformByType(value).slice(0, normalizedLength.value);
+    }
+    function transformByType(value) {
+      switch (props2.type) {
+        case "digit":
+          return value.replace(/\D+/g, "");
+        case "alphanumeric":
+          return splitChars(value).filter((char) => /[A-Za-z0-9]/.test(char)).join("");
+        default:
+          return value;
+      }
+    }
+    function getValueChars() {
+      return splitChars(normalizedValue.value);
+    }
+    function getDisplayChar(index) {
+      var _a;
+      const char = (_a = getValueChars()[index]) != null ? _a : "";
+      if (!char) {
+        return "";
+      }
+      return props2.mask ? normalizedMaskSymbol.value : char;
+    }
+    function setInputRef(el, index) {
+      inputRefs.value[index] = el && "$" in el ? el : null;
+    }
+    function shouldRenderSeparator(index) {
+      if (index >= normalizedLength.value - 1 || !slots.separator) {
+        return false;
+      }
+      const vNodes = slots.separator({ index });
+      return flatFragment(vNodes).length > 0;
+    }
+    function validateWithTrigger(trigger, value = normalizedValue.value) {
+      nextTick(() => {
+        vt(props2.validateTrigger, trigger, props2.rules, value);
+      });
+    }
+    function maybeEmitComplete(value) {
+      if (splitChars(value).length !== normalizedLength.value) {
+        return;
+      }
+      call(props2.onComplete, value);
+      validateWithTrigger("onComplete", value);
+    }
+    function updateValue(value, index) {
+      if (value === normalizedValue.value) {
+        syncCellDisplayValue(index);
+        return;
+      }
+      call(props2["onUpdate:modelValue"], value);
+      call(props2.onInput, value);
+      validateWithTrigger("onInput", value);
+      maybeEmitComplete(value);
+    }
+    function focusCell(index) {
+      var _a, _b;
+      const targetIndex = clamp(index, 0, normalizedLength.value - 1);
+      (_b = (_a = inputRefs.value[targetIndex]) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    }
+    function focus(index) {
+      const targetIndex = index == null ? Math.min(getValueChars().length, normalizedLength.value - 1) : index;
+      focusCell(targetIndex);
+    }
+    function blur() {
+      inputRefs.value.forEach((inputRef) => {
+        var _a;
+        (_a = inputRef == null ? void 0 : inputRef.blur) == null ? void 0 : _a.call(inputRef);
+      });
+    }
+    function validate() {
+      return v(props2.rules, normalizedValue.value);
+    }
+    function reset() {
+      if (normalizedValue.value !== "") {
+        call(props2["onUpdate:modelValue"], "");
+      }
+      resetValidation();
+    }
+    function syncCellDisplayValue(index) {
+      var _a;
+      const inputEl = (_a = inputRefs.value[index]) == null ? void 0 : _a.el;
+      if (inputEl) {
+        inputEl.value = getDisplayChar(index);
+      }
+    }
+    function syncAllCellDisplayValues() {
+      cellIndexes.value.forEach((_, index) => {
+        syncCellDisplayValue(index);
+      });
+    }
+    function scheduleFocusEffect(index) {
+      pendingFocusIndex = index;
+      if (focusEffectQueued) {
+        return;
+      }
+      focusEffectQueued = true;
+      nextTick(() => {
+        focusEffectQueued = false;
+        if (pendingFocusIndex == null) {
+          return;
+        }
+        activeIndex.value = pendingFocusIndex;
+        focusCell(pendingFocusIndex);
+        pendingFocusIndex = null;
+      });
+    }
+    function replaceChars(index, chars) {
+      const valueChars = getValueChars();
+      const targetIndex = clamp(index, 0, valueChars.length);
+      const nextChars = [...valueChars];
+      const processedChars = chars.slice(0, normalizedLength.value - targetIndex);
+      processedChars.forEach((char, offset) => {
+        nextChars[targetIndex + offset] = char;
+      });
+      const nextValue = nextChars.join("").slice(0, normalizedLength.value);
+      updateValue(nextValue, targetIndex);
+      const nextFocusIndex = clamp(targetIndex + processedChars.length, 0, normalizedLength.value - 1);
+      scheduleFocusEffect(nextFocusIndex);
+    }
+    function removeAt(index, focusIndex = clamp(index, 0, normalizedLength.value - 1)) {
+      const valueChars = getValueChars();
+      valueChars.splice(index, 1);
+      const nextValue = valueChars.join("");
+      updateValue(nextValue, index);
+      scheduleFocusEffect(focusIndex);
+    }
+    function removeWithBackspace(index) {
+      const valueChars = getValueChars();
+      if (!valueChars[index]) {
+        if (index <= 0) {
+          syncAllCellDisplayValues();
+          return;
+        }
+        removeAt(index - 1, index - 1);
+        return;
+      }
+      const isLastCell = index === valueChars.length - 1;
+      const nextFocusIndex = !isLastCell && index > 0 ? index - 1 : clamp(index, 0, normalizedLength.value - 1);
+      removeAt(index, nextFocusIndex);
+    }
+    function handleClick(event) {
+      if (props2.disabled || formDisabled.value) {
+        return;
+      }
+      call(props2.onClick, event);
+      validateWithTrigger("onClick");
+    }
+    function handleFocus(index) {
+      const valueChars = getValueChars();
+      activeIndex.value = index;
+      if (valueChars[index]) {
+        nextTick(() => {
+          var _a, _b;
+          (_b = (_a = inputRefs.value[index]) == null ? void 0 : _a.select) == null ? void 0 : _b.call(_a);
+        });
+      }
+    }
+    function handleBlur(event) {
+      var _a;
+      const relatedTarget = event.relatedTarget;
+      const isLeavingComponent = !relatedTarget || !((_a = rootEl.value) == null ? void 0 : _a.contains(relatedTarget));
+      if (isLeavingComponent) {
+        activeIndex.value = -1;
+      }
+    }
+    function handleCellInput(index, value) {
+      const inputChars = splitChars(transformByType(value));
+      const valueChars = getValueChars();
+      const crossTargetIndex = index > valueChars.length;
+      if (inputChars.length === 0) {
+        if (crossTargetIndex) {
+          scheduleFocusEffect(valueChars.length);
+          syncCellDisplayValue(index);
+          return;
+        }
+        if (value === "") {
+          removeAt(index);
+        } else {
+          syncCellDisplayValue(index);
+        }
+        return;
+      }
+      if (crossTargetIndex) {
+        replaceChars(valueChars.length, inputChars);
+        return;
+      }
+      replaceChars(index, inputChars);
+    }
+    function handlePaste(event) {
+      var _a, _b;
+      if (!props2.allowPaste || formDisabled.value || formReadonly.value || props2.disabled || props2.readonly) {
+        return;
+      }
+      const text = (_b = (_a = event.clipboardData) == null ? void 0 : _a.getData("text")) != null ? _b : "";
+      if (!text) {
+        return;
+      }
+      event.preventDefault();
+      const transformedValue = props2.pasteTransform ? props2.pasteTransform(text) : text;
+      const result = transformByType(transformedValue);
+      call(props2.onPaste, result, event);
+      validateWithTrigger("onPaste", result);
+      if (!result) {
+        syncAllCellDisplayValues();
+        return;
+      }
+      replaceChars(0, splitChars(result));
+    }
+    function handleKeydown(event) {
+      if (formDisabled.value || formReadonly.value || props2.disabled || props2.readonly) {
+        return;
+      }
+      const target = event.target;
+      const cell = target == null ? void 0 : target.closest(`.${n("cell")}`);
+      const indexAttr = cell == null ? void 0 : cell.dataset.index;
+      if (indexAttr == null) {
+        return;
+      }
+      const index = Number(indexAttr);
+      if (event.key === "Backspace" && getValueChars().length > 0) {
+        event.preventDefault();
+        removeWithBackspace(index);
+        return;
+      }
+      if (event.key === "ArrowLeft" && index > 0) {
+        event.preventDefault();
+        focusCell(index - 1);
+        return;
+      }
+      if (event.key === "ArrowRight" && index < normalizedLength.value - 1) {
+        event.preventDefault();
+        focusCell(index + 1);
+        return;
+      }
+    }
+    return {
+      rootEl,
+      activeIndex,
+      errorMessage,
+      formDisabled,
+      formReadonly,
+      cellIndexes,
+      gutterStyle,
+      cellHeightStyle,
+      cellMaxWidthStyle,
+      resolvedInputmode,
+      nativeInputType,
+      n,
+      classes,
+      setInputRef,
+      getDisplayChar,
+      shouldRenderSeparator,
+      handleClick,
+      handleFocus,
+      handleBlur,
+      handleCellInput,
+      handleKeydown,
+      handlePaste,
+      focus,
+      blur,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/otp-input/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import OtpInput from "./OtpInput.mjs";
+import { props as otpInputProps } from "./props.mjs";
+withInstall(OtpInput);
+withPropsDefaultsSetter(OtpInput, otpInputProps);
+const _OtpInputComponent = OtpInput;
+var stdin_default = OtpInput;
+export {
+  _OtpInputComponent,
+  stdin_default as default,
+  otpInputProps
+};

package/es/otp-input/otpInput.css

@@ -0,0 +1 @@
+:root { --otp-input-gutter: 8px; --otp-input-cell-height: 48px; --otp-input-cell-max-width: 48px; --otp-input-input-font-size: 20px; --otp-input-separator-color: var(--color-text-disabled);}.var-otp-input { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%;}.var-otp-input__cells { display: flex; align-items: center; justify-content: center; gap: var(--otp-input-gutter); width: 100%; max-width: 100%;}.var-otp-input__cell { flex: 1 1 0; min-width: 0; height: var(--otp-input-cell-height); max-width: var(--otp-input-cell-max-width);}.var-otp-input__separator { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--otp-input-separator-color); white-space: nowrap;}.var-otp-input__details { width: 100%;}.var-otp-input .var-input__input { text-align: center; font-size: var(--otp-input-input-font-size); text-transform: none; height: 100%;}.var-otp-input .var-field-decorator__middle { justify-content: center;}.var-otp-input .var-field-decorator--standard .var-field-decorator__controller,.var-otp-input .var-field-decorator--standard .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--standard .var-field-decorator__middle,.var-otp-input .var-field-decorator--standard .var-field-decorator__icon,.var-otp-input .var-field-decorator--standard .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--standard .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle,.var-otp-input .var-field-decorator--outlined .var-field-decorator__icon { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--filled .var-field-decorator__middle,.var-otp-input .var-field-decorator--filled .var-field-decorator__icon,.var-otp-input .var-field-decorator--filled .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--filled .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-input,.var-otp-input .var-field-decorator,.var-otp-input .var-field-decorator__container,.var-otp-input .var-field-decorator__main,.var-otp-input .var-field-decorator__body { height: 100%;}

package/es/otp-input/props.mjs

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { fieldDecoratorProps } from "../field-decorator/index.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = __spreadProps(__spreadValues({
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  length: {
+    type: [String, Number],
+    default: 6
+  },
+  type: {
+    type: String,
+    default: "digit"
+  },
+  mask: Boolean,
+  maskSymbol: {
+    type: String,
+    default: "\u2022"
+  },
+  cellHeight: {
+    type: [String, Number],
+    default: 48
+  },
+  cellMaxWidth: {
+    type: [String, Number],
+    default: 48
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  autofocus: Boolean,
+  gutter: {
+    type: [String, Number],
+    default: 8
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onInput", "onComplete"]
+  },
+  rules: [Array, Function, Object],
+  allowPaste: {
+    type: Boolean,
+    default: true
+  },
+  pasteTransform: Function,
+  onInput: defineListenerProp(),
+  onClick: defineListenerProp(),
+  onPaste: defineListenerProp(),
+  onComplete: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(fieldDecoratorProps, ["textColor", "focusColor", "blurColor"])), {
+  variant: {
+    type: String,
+    default: "outlined"
+  }
+});
+export {
+  props
+};

package/es/otp-input/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../../field-decorator/fieldDecorator.css'
+import '../../form-details/formDetails.css'
+import '../../input/input.css'
+import '../otpInput.css'
+import '../OtpInputSfc.css'

package/es/style.mjs

@@ -56,6 +56,7 @@ import './menu/style/index.mjs'
 import './menu-option/style/index.mjs'
 import './menu-select/style/index.mjs'
 import './option/style/index.mjs'
+import './otp-input/style/index.mjs'
 import './overlay/style/index.mjs'
 import './pagination/style/index.mjs'
 import './paper/style/index.mjs'