@varlet/ui 3.15.1 → 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/date-picker/DatePicker.mjs

@@ -76,9 +76,9 @@ function __render__(_ctx, _cache) {
                   onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
                 },
                 [
-                  _renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
+                  _renderSlot(_ctx.$slots, "year", { year: _ctx.displayYear }, () => [
                     _createTextVNode(
-                      _toDisplayString(_ctx.chooseYear),
+                      _toDisplayString(_ctx.displayYear),
                       1
                       /* TEXT */
                     )
@@ -337,6 +337,7 @@ const __sfc__ = defineComponent({
       previewMonth: previewMonth.value,
       previewYear: previewYear.value
     }));
+    const displayYear = computed(() => previewYear.value || chooseYear.value || "");
     const getYearTitle = computed(() => {
       var _a;
       const { multiple, range } = props2;
@@ -416,7 +417,7 @@ const __sfc__ = defineComponent({
     watch(
       () => props2.modelValue,
       (value) => {
-        if (!checkValue() || invalidFormatDate(value)) {
+        if (!checkValue()) {
           return;
         }
         if (props2.range) {
@@ -431,7 +432,7 @@ const __sfc__ = defineComponent({
           }
           multipleInit(value, props2.type);
         } else {
-          dateInit(value);
+          dateInit(getSingleDate(value));
         }
       },
       { immediate: true }
@@ -626,28 +627,47 @@ const __sfc__ = defineComponent({
       }
       return false;
     }
+    function getFallbackDate() {
+      if (props2.fallbackViewDate) {
+        const formatDate = dayjs(props2.fallbackViewDate).format("YYYY-MM-D");
+        if (formatDate !== "Invalid Date") {
+          return props2.fallbackViewDate;
+        }
+      }
+      return dayjs().format("YYYY-MM-D");
+    }
+    function getSingleDate(value) {
+      if (value && !invalidFormatDate(dayjs(value).format("YYYY-MM-D"))) {
+        return value;
+      }
+      return getFallbackDate();
+    }
+    function getFirstValidDate(value, type) {
+      const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
+      return value.find((choose) => !invalidFormatDate(dayjs(choose).format(formatType)));
+    }
     function rangeInit(value, type) {
+      var _a;
       const rangeDate = type === "year" ? chooseRangeYear : type === "month" ? chooseRangeMonth : chooseRangeDay;
       const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
-      const formatDateList = value.map((choose) => dayjs(choose).format(formatType)).slice(0, 2);
-      const isValid = rangeDate.value.some((date) => invalidFormatDate(date));
-      if (isValid) {
-        return;
-      }
+      const formatDateList = value.map((choose) => dayjs(choose).format(formatType)).filter((date) => !invalidFormatDate(date)).slice(0, 2);
       rangeDate.value = formatDateList;
       const isChangeOrder = dayjs(rangeDate.value[0]).isAfter(rangeDate.value[1]);
       if (rangeDate.value.length === 2 && isChangeOrder) {
         rangeDate.value = [rangeDate.value[1], rangeDate.value[0]];
       }
+      previewInit((_a = getFirstValidDate(value, type)) != null ? _a : getFallbackDate());
     }
     function multipleInit(value, type) {
+      var _a;
       const rangeDate = type === "year" ? chooseYears : type === "month" ? chooseMonths : chooseDays;
       const formatType = type === "year" ? "YYYY" : type === "month" ? "YYYY-MM" : "YYYY-MM-D";
       const formatDateList = Array.from(new Set(value.map((choose) => dayjs(choose).format(formatType))));
       rangeDate.value = formatDateList.filter((date) => date !== "Invalid Date");
+      previewInit((_a = getFirstValidDate(value, type)) != null ? _a : getFallbackDate());
     }
     function dateInit(value) {
-      const handleValue = value ? dayjs(value) : dayjs();
+      const handleValue = value ? dayjs(value) : dayjs(getFallbackDate());
       const formatDate = handleValue.format("YYYY-MM-D");
       if (invalidFormatDate(formatDate)) {
         return;
@@ -657,6 +677,16 @@ const __sfc__ = defineComponent({
       chooseMonth.value = monthDes2;
       chooseYear.value = yearValue;
       chooseDay.value = dayValue;
+      previewInit(formatDate);
+    }
+    function previewInit(value) {
+      const handleValue = value ? dayjs(value) : dayjs(getFallbackDate());
+      const formatDate = handleValue.format("YYYY-MM-D");
+      if (invalidFormatDate(formatDate)) {
+        return;
+      }
+      const [yearValue, monthValue] = formatDate.split("-");
+      const monthDes2 = MONTH_LIST.find((month) => month === monthValue);
       previewMonth.value = monthDes2;
       previewYear.value = yearValue;
     }
@@ -676,6 +706,7 @@ const __sfc__ = defineComponent({
       chooseYear,
       chooseDay,
       previewYear,
+      displayYear,
       isYearPanel,
       isMonthPanel,
       getMonthTitle,

package/es/date-picker/props.mjs

@@ -8,6 +8,7 @@ const props = {
     default: "date"
   },
   hint: String,
+  fallbackViewDate: String,
   allowedDates: Function,
   color: String,
   titleColor: String,

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.1'
+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.1'
+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
+};