@leaflink/stash 48.16.2 → 48.18.0

package/dist/AppSidebar.js

@@ -1,85 +1,85 @@
-import { defineComponent as E, useSlots as B, computed as h, ref as C, watchEffect as O, openBlock as s, createElementBlock as a, normalizeClass as V, createVNode as o, Transition as w, withCtx as b, withDirectives as g, withModifiers as $, vShow as y, createElementVNode as d, unref as c, renderSlot as i, createCommentVNode as u } from "vue";
+import { defineComponent as B, useSlots as C, computed as h, ref as O, watchEffect as V, openBlock as s, createElementBlock as a, normalizeClass as w, createVNode as o, Transition as b, withCtx as g, withDirectives as x, withModifiers as $, vShow as y, createElementVNode as d, unref as c, renderSlot as i, createCommentVNode as u } from "vue";
 import z from "./useMediaQuery.js";
 import A from "./Backdrop.js";
 import N from "./Divider.js";
 import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
 const D = {
-  class: "stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500",
-  "data-test": "stash-app-sidebar__aside"
-}, M = {
   key: 0,
   class: "tw-px-3 tw-pt-6"
-}, P = {
+}, M = {
   key: 1,
   class: "tw-px-3 tw-pt-6"
-}, I = {
+}, P = {
   key: 2,
   class: "tw-pt-6"
-}, L = {
+}, I = {
   role: "menubar",
   "aria-orientation": "vertical"
-}, Q = /* @__PURE__ */ E({
+}, L = /* @__PURE__ */ B({
   __name: "AppSidebar",
   props: {
     isOpen: { type: Boolean, default: !1 }
   },
   emits: ["dismiss", "update:is-open"],
-  setup(x, { emit: k }) {
-    const v = x, n = B(), m = k, r = z("screen and (min-width: 1321px)"), e = h(() => v.isOpen && !r.value), l = C({ height: "", overflow: "" }), f = h(() => v.isOpen || r.value);
-    function S() {
+  setup(k, { emit: S }) {
+    const v = k, n = C(), m = S, l = z("screen and (min-width: 1321px)"), e = h(() => v.isOpen && !l.value), r = O({ height: "", overflow: "" }), f = h(() => v.isOpen || l.value);
+    function E() {
       m("dismiss"), m("update:is-open", !1);
     }
     function p() {
       return document.scrollingElement || document.body;
     }
-    return O(() => {
-      r.value || (e.value && Object.assign(l.value, {
+    return V(() => {
+      l.value || (e.value && Object.assign(r.value, {
         overflow: p().style.overflow,
         height: p().style.height
       }), Object.assign(p().style, {
-        overflow: e.value ? "hidden" : l.value.overflow,
+        overflow: e.value ? "hidden" : r.value.overflow,
         // Prevents page from scrolling when AppSidebar is open
-        height: e.value ? "100%" : l.value.height
+        height: e.value ? "100%" : r.value.height
         // Ensures the backdrop covers the entire page when AppSidebar is open
       }));
     }), (t, _) => (s(), a("div", {
       id: "stash-app-sidebar",
-      class: V(["stash-app-sidebar tw-relative", {
+      class: w(["stash-app-sidebar tw-relative", {
         "stash-app-sidebar--is-open": f.value,
         "tw-z-modal": e.value,
         "tw-z-[301]": !e.value
       }]),
       "data-test": "stash-app-sidebar"
     }, [
-      o(w, { name: "backdrop" }, {
-        default: b(() => [
-          g(o(A, {
+      o(b, { name: "backdrop" }, {
+        default: g(() => [
+          x(o(A, {
             class: "stash-app-sidebar__backdrop",
-            onClick: $(S, ["stop"])
+            onClick: $(E, ["stop"])
           }, null, 512), [
             [y, e.value]
           ])
         ]),
         _: 1
       }),
-      o(w, { name: "aside" }, {
-        default: b(() => [
-          g(d("aside", D, [
+      o(b, { name: "aside" }, {
+        default: g(() => [
+          x(d("aside", {
+            class: w(["stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500", { "tw-shadow-3xl": e.value }]),
+            "data-test": "stash-app-sidebar__aside"
+          }, [
             o(N, { class: "stash-app-sidebar__divider" }),
-            c(n)["app-context"] ? (s(), a("div", M, [
+            c(n)["app-context"] ? (s(), a("div", D, [
               i(t.$slots, "app-context", {}, void 0, !0)
             ])) : u("", !0),
-            c(n)["company-context"] ? (s(), a("div", P, [
+            c(n)["company-context"] ? (s(), a("div", M, [
               i(t.$slots, "company-context", {}, void 0, !0)
             ])) : u("", !0),
-            c(n).navigation ? (s(), a("nav", I, [
-              d("ul", L, [
+            c(n).navigation ? (s(), a("nav", P, [
+              d("ul", I, [
                 i(t.$slots, "navigation", {}, void 0, !0)
               ])
             ])) : u("", !0),
             _[0] || (_[0] = d("div", { class: "tw-flex-1" }, null, -1)),
             i(t.$slots, "footer", {}, void 0, !0)
-          ], 512), [
+          ], 2), [
             [y, f.value]
           ])
         ]),
@@ -88,8 +88,8 @@ const D = {
     ], 2));
   }
 });
-const J = /* @__PURE__ */ j(Q, [["__scopeId", "data-v-f666b942"]]);
+const H = /* @__PURE__ */ j(L, [["__scopeId", "data-v-8ae19347"]]);
 export {
-  J as default
+  H as default
 };
 //# sourceMappingURL=AppSidebar.js.map

package/dist/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('width.sidebar');\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,KAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        :class=\"{ 'tw-shadow-3xl': isBackdropVisible }\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('width.sidebar');\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,KAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ConfirmationCodeInput.js

@@ -1,125 +1,148 @@
-import { defineComponent as C, useCssModule as y, ref as m, watch as E, openBlock as c, createElementBlock as i, createElementVNode as I, Fragment as N, renderList as T, withDirectives as D, normalizeClass as p, unref as f, vModelText as S, toDisplayString as v, createCommentVNode as _ } from "vue";
-import { _ as z } from "./_plugin-vue_export-helper-dad06003.js";
-const q = { class: "tw-mb-3 tw-flex tw-gap-6" }, B = ["onUpdate:modelValue", "onPaste", "onKeyup", "onClick"], M = /* @__PURE__ */ C({
+import { defineComponent as I, useCssVars as v, useCssModule as E, ref as V, onMounted as B, watch as P, openBlock as a, createElementBlock as r, normalizeClass as x, unref as l, createElementVNode as z, Fragment as A, renderList as M, toDisplayString as p, createCommentVNode as f } from "vue";
+import { _ as F } from "./_plugin-vue_export-helper-dad06003.js";
+const K = { class: "tw-mb-3 tw-flex tw-gap-6" }, S = ["value", "onInput"], U = {
+  key: 0,
+  class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-red-500",
+  "data-test": "field-error"
+}, j = {
+  key: 1,
+  class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-green-500",
+  "data-test": "field-success"
+}, L = {
+  key: 2,
+  class: "tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-ice-700",
+  "data-test": "field-hint"
+}, R = /* @__PURE__ */ I({
   __name: "ConfirmationCodeInput",
   props: {
     digitCount: { default: 6 },
     errorText: { default: void 0 },
-    successText: { default: void 0 }
+    successText: { default: void 0 },
+    hintText: { default: void 0 },
+    modelValue: { default: void 0 }
   },
-  emits: ["update:model-value"],
-  setup(x, { emit: g }) {
-    const l = y(), a = x, d = g, s = m([]), n = m();
-    function h(e) {
-      e.data && e.target.nextElementSibling ? e.target.nextElementSibling.focus() : e.data == null && e.target.previousElementSibling && e.target.previousElementSibling.focus();
+  emits: ["update:model-value", "change", "focus", "blur"],
+  setup(g, { emit: b }) {
+    v((t) => ({
+      b1b2f1d6: t.digitCount
+    }));
+    const c = E(), o = g, i = b, s = V([]);
+    B(() => {
+      var t;
+      o.modelValue && (s.value = (t = o.modelValue) == null ? void 0 : t.split(""));
+    });
+    function k(t, e) {
+      var n;
+      s.value[e] = (n = t.target) == null ? void 0 : n.value, m(t), t.inputType === "deleteContentBackward" ? d(t) : (t.inputType === "insertText" || t.inputType === "deleteContentForward") && w(t);
     }
-    function w(e, o) {
-      if (e.preventDefault(), s.value[o]) {
-        n.value[o].focus();
-        return;
-      }
-      let t = 0;
-      s.value.forEach((u, r) => {
-        u && (t = r + 1);
-      }), n.value[t].focus();
+    function m(t) {
+      const e = s.value.join("");
+      i("update:model-value", e), i("change", { originalEvent: t, value: e });
     }
-    function b(e, o) {
-      if (e.key !== "Backspace" && !new RegExp("^([0-9])$").test(e.key)) {
-        e.preventDefault();
-        return;
-      }
-      let t = 0;
-      if (o !== 0 ? t = o - 1 : t = 0, e.key === "Backspace") {
-        if (o + 1 === s.value.length - 1 && s.value[o]) {
-          n.value[o + 1].focus();
-          return;
+    function d(t) {
+      const e = h(t.target);
+      e && (e.focus(), e.select());
+    }
+    function w(t) {
+      const e = _(t.target);
+      e && (e.focus(), e.select());
+    }
+    function h(t) {
+      const e = t.previousElementSibling;
+      if (e)
+        return e.nodeName === "INPUT" ? e : h(e);
+    }
+    function _(t) {
+      const e = t.nextElementSibling;
+      if (e)
+        return e.nodeName === "INPUT" ? e : _(e);
+    }
+    function T(t) {
+      t.target.select(), i("focus", t);
+    }
+    function y(t) {
+      i("blur", t);
+    }
+    function C(t) {
+      var e;
+      if (!(t.ctrlKey || t.metaKey))
+        switch (t.code) {
+          case "ArrowLeft":
+            d(t), t.preventDefault();
+            break;
+          case "ArrowUp":
+          case "ArrowDown":
+            t.preventDefault();
+            break;
+          case "Backspace":
+            ((e = t.target) == null ? void 0 : e.value.length) === 0 && (d(t), t.preventDefault());
+            break;
+          case "ArrowRight":
+            w(t), t.preventDefault();
+            break;
+          case "Enter":
+          case "NumpadEnter":
+          case "Tab":
+            break;
+          default:
+            (!(t.code !== "Space" && Number(t.key) >= 0 && Number(t.key) <= 9) || s.value.join("").length >= o.digitCount && t.code !== "Delete") && t.preventDefault();
+            break;
         }
-        if (s.value[o])
-          return;
-        s.value[t] = "", n.value[t].focus();
-        return;
-      }
-      if (!new RegExp("^([0-9])$").test(e.key) && !s.value[o]) {
-        s.value[t] = "", n.value[t].focus();
-        return;
-      }
     }
-    function k(e) {
-      var u;
-      const o = (u = e.clipboardData) == null ? void 0 : u.getData("text");
-      if (isNaN(Number(o))) {
-        n.value[0].focus();
-        return;
+    function N(t) {
+      var n;
+      const e = (n = t.clipboardData) == null ? void 0 : n.getData("text");
+      if (e != null && e.length) {
+        const u = e == null ? void 0 : e.substring(0, o.digitCount), D = parseInt(u);
+        isNaN(D) || (s.value = u.split(""), m(t));
       }
-      let t = n.value[0].nextElementSibling;
-      if (o)
-        for (let r = 1; r < o.length; r++)
-          t && (s.value[r] = o[r], t = t.nextElementSibling);
+      t.preventDefault();
     }
-    return E(
-      () => s,
-      (e) => {
-        if (e.value.join("") === "")
-          d("update:model-value", null);
-        else {
-          if (isNaN(Number(e.value[0]))) {
-            s.value[0] = "";
-            return;
-          }
-          d("update:model-value", Number(e.value.join("")));
-        }
-      },
-      { deep: !0 }
-    ), (e, o) => (c(), i("form", {
-      ref: "otpCont",
-      class: "stash-confirmation-code-input tw-inline-block",
-      "data-test": "stash-confirmation-code-input",
-      onInput: h
+    return P(
+      () => o.modelValue,
+      (t) => {
+        s.value = t ? t.split("") : new Array(o.digitCount);
+      }
+    ), (t, e) => (a(), r("div", {
+      class: x(["stash-confirmation-code-input tw-inline-block", [l(c)["stash-confirmation-code-input-container"]]]),
+      "data-test": "stash-confirmation-code-input"
     }, [
-      I("div", q, [
-        (c(!0), i(N, null, T(a.digitCount, (t, u) => D((c(), i("input", {
-          key: t,
-          ref_for: !0,
-          ref_key: "inputEl",
-          ref: n,
-          "onUpdate:modelValue": (r) => s.value[t - 1] = r,
+      z("div", K, [
+        (a(!0), r(A, null, M(o.digitCount, (n) => (a(), r("input", {
+          key: n,
           "data-test": "stash-confirmation-code-input__otp",
-          type: "text",
-          maxlength: "1",
-          class: p(["tw-border tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500", [
-            f(l).otpCodeInput,
-            { [f(l)["has-error"]]: !!a.errorText },
-            { [f(l)["has-success"]]: !!a.successText }
+          class: x(["tw-border tw-bg-white tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500", [
+            l(c)["otp-code-input"],
+            { [l(c)["has-error"]]: !!o.errorText },
+            { [l(c)["has-success"]]: !!o.successText }
           ]]),
+          type: "text",
           inputmode: "numeric",
-          onPaste: (r) => t === 1 && k(r),
-          onKeyup: (r) => b(r, u),
-          onClick: (r) => w(r, u)
-        }, null, 42, B)), [
-          [S, s.value[t - 1]]
-        ])), 128))
+          maxlength: "1",
+          value: s.value[n - 1],
+          pattern: "[0-9]",
+          autocomplete: "one-time-code",
+          onInput: (u) => k(u, n - 1),
+          onKeydown: C,
+          onPaste: N,
+          onFocus: T,
+          onBlur: y
+        }, null, 42, S))), 128))
       ]),
-      a.errorText ? (c(), i("small", {
-        key: 0,
-        class: p(["tw-block tw-text-center tw-text-red-500", f(l).error]),
-        "data-test": "field-error"
-      }, v(a.errorText), 3)) : _("", !0),
-      a.successText ? (c(), i("small", {
-        key: 1,
-        class: p(["tw-block tw-text-center tw-text-green-500", f(l).error]),
-        "data-test": "field-error"
-      }, v(a.successText), 3)) : _("", !0)
-    ], 544));
+      o.errorText ? (a(), r("small", U, p(o.errorText), 1)) : f("", !0),
+      o.successText ? (a(), r("small", j, p(o.successText), 1)) : f("", !0),
+      o.hintText ? (a(), r("small", L, p(o.hintText), 1)) : f("", !0)
+    ], 2));
   }
-}), K = "_otpCodeInput_1qtz8_2", P = "_error_1qtz8_21", U = {
-  otpCodeInput: K,
-  "has-error": "_has-error_1qtz8_9",
-  "has-success": "_has-success_1qtz8_13",
-  error: P
-}, $ = {
-  $style: U
-}, R = /* @__PURE__ */ z(M, [["__cssModules", $]]);
+}), $ = {
+  "stash-confirmation-code-input-container": "_stash-confirmation-code-input-container_kwgaz_2",
+  "otp-code-input": "_otp-code-input_kwgaz_9",
+  "has-error": "_has-error_kwgaz_16",
+  "has-success": "_has-success_kwgaz_20"
+}, q = {
+  $style: $
+}, J = /* @__PURE__ */ F(R, [["__cssModules", q]]);
 export {
-  R as default
+  J as default
 };
 //# sourceMappingURL=ConfirmationCodeInput.js.map

package/dist/ConfirmationCodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update:model-value', value: number | null): void;\n  }>();\n\n  const data: Ref<Array<string>> = ref([]);\n  const inputEl = ref();\n\n  function handleOtpInput(e) {\n    if (e.data && e.target.nextElementSibling) {\n      e.target.nextElementSibling.focus();\n    } else if (e.data == null && e.target.previousElementSibling) {\n      e.target.previousElementSibling.focus();\n    }\n  }\n\n  function handleFocus(event, elementIndex: number) {\n    event.preventDefault();\n\n    if (data.value[elementIndex]) {\n      inputEl.value[elementIndex].focus();\n\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    data.value.forEach((value, index) => {\n      if (value) {\n        focusedIndex = index + 1;\n      }\n    });\n\n    inputEl.value[focusedIndex].focus();\n  }\n\n  function handleKeyUp(e: KeyboardEvent, index: number) {\n    if (e.key !== 'Backspace' && !new RegExp('^([0-9])$').test(e.key)) {\n      e.preventDefault();\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    if (index !== 0) {\n      focusedIndex = index - 1;\n    } else {\n      focusedIndex = 0;\n    }\n\n    if (e.key === 'Backspace') {\n      if (index + 1 === data.value.length - 1 && data.value[index]) {\n        inputEl.value[index + 1].focus();\n        return;\n      }\n\n      if (data.value[index]) {\n        return;\n      }\n\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n\n      return;\n    }\n\n    if (!new RegExp('^([0-9])$').test(e.key) && !data.value[index]) {\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n      return;\n    }\n  }\n\n  function handlePaste(e: ClipboardEvent) {\n    const pasteData = e.clipboardData?.getData('text');\n\n    if (isNaN(Number(pasteData))) {\n      inputEl.value[0].focus();\n      return;\n    }\n\n    let nextEl = inputEl.value[0].nextElementSibling;\n    if (pasteData) {\n      for (let i = 1; i < pasteData.length; i++) {\n        if (nextEl) {\n          data.value[i] = pasteData[i];\n          nextEl = nextEl.nextElementSibling;\n        }\n      }\n    }\n  }\n\n  watch(\n    () => data,\n    (newVal) => {\n      if (newVal.value.join('') === '') {\n        emit('update:model-value', null);\n      } else {\n        if (isNaN(Number(newVal.value[0]))) {\n          data.value[0] = '';\n          return;\n        }\n        emit('update:model-value', Number(newVal.value.join('')));\n      }\n    },\n    { deep: true },\n  );\n</script>\n\n<template>\n  <form\n    ref=\"otpCont\"\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    @input=\"handleOtpInput\"\n  >\n    <div class=\"tw-mb-3 tw-flex tw-gap-6\">\n      <template v-for=\"(field, index) in props.digitCount\" :key=\"field\">\n        <input\n          ref=\"inputEl\"\n          v-model=\"data[field - 1]\"\n          data-test=\"stash-confirmation-code-input__otp\"\n          type=\"text\"\n          maxlength=\"1\"\n          class=\"tw-border tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500\"\n          :class=\"[\n            classes.otpCodeInput,\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          inputmode=\"numeric\"\n          @paste=\"field === 1 && handlePaste($event)\"\n          @keyup=\"handleKeyUp($event, index)\"\n          @click=\"(evt) => handleFocus(evt, index)\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-block tw-text-center tw-text-red-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-block tw-text-center tw-text-green-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.successText }}\n    </small>\n  </form>\n</template>\n\n<style module>\n  .otpCodeInput {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otpCodeInput.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: var(--color-green-500);\n  }\n\n  .otpCodeInput:focus {\n    outline: none;\n  }\n\n  .error {\n    margin-top: 4px;\n    white-space: pre-line;\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","emit","__emit","data","ref","inputEl","handleOtpInput","handleFocus","event","elementIndex","focusedIndex","value","index","handleKeyUp","handlePaste","pasteData","_a","nextEl","i","watch","newVal"],"mappings":";;;;;;;;;;;AAGE,UAAMA,IAAUC,KAcVC,IAAQC,GAMRC,IAAOC,GAIPC,IAA2BC,EAAI,CAAA,CAAE,GACjCC,IAAUD;AAEhB,aAASE,EAAe,GAAG;AACzB,MAAI,EAAE,QAAQ,EAAE,OAAO,qBACnB,EAAA,OAAO,mBAAmB,UACnB,EAAE,QAAQ,QAAQ,EAAE,OAAO,0BAClC,EAAA,OAAO,uBAAuB;IAEpC;AAES,aAAAC,EAAYC,GAAOC,GAAsB;AAG5C,UAFJD,EAAM,eAAe,GAEjBL,EAAK,MAAMM,CAAY,GAAG;AACpB,QAAAJ,EAAA,MAAMI,CAAY,EAAE,MAAM;AAElC;AAAA;AAGF,UAAIC,IAAe;AAEnB,MAAAP,EAAK,MAAM,QAAQ,CAACQ,GAAOC,MAAU;AACnC,QAAID,MACFD,IAAeE,IAAQ;AAAA,MACzB,CACD,GAEOP,EAAA,MAAMK,CAAY,EAAE,MAAM;AAAA,IACpC;AAES,aAAAG,EAAY,GAAkBD,GAAe;AAChD,UAAA,EAAE,QAAQ,eAAe,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,GAAG;AACjE,UAAE,eAAe;AACjB;AAAA;AAGF,UAAIF,IAAe;AAQf,UANAE,MAAU,IACZF,IAAeE,IAAQ,IAERF,IAAA,GAGb,EAAE,QAAQ,aAAa;AACrB,YAAAE,IAAQ,MAAMT,EAAK,MAAM,SAAS,KAAKA,EAAK,MAAMS,CAAK,GAAG;AAC5D,UAAAP,EAAQ,MAAMO,IAAQ,CAAC,EAAE,MAAM;AAC/B;AAAA;AAGE,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA;AAGF,UAAI,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAACP,EAAK,MAAMS,CAAK,GAAG;AACzD,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAClC;AAAA;AAAA,IAEJ;AAEA,aAASI,EAAY,GAAmB;;AACtC,YAAMC,KAAYC,IAAA,EAAE,kBAAF,gBAAAA,EAAiB,QAAQ;AAE3C,UAAI,MAAM,OAAOD,CAAS,CAAC,GAAG;AACpB,QAAAV,EAAA,MAAM,CAAC,EAAE,MAAM;AACvB;AAAA;AAGF,UAAIY,IAASZ,EAAQ,MAAM,CAAC,EAAE;AAC9B,UAAIU;AACF,iBAASG,IAAI,GAAGA,IAAIH,EAAU,QAAQG;AACpC,UAAID,MACFd,EAAK,MAAMe,CAAC,IAAIH,EAAUG,CAAC,GAC3BD,IAASA,EAAO;AAAA,IAIxB;AAEA,WAAAE;AAAA,MACE,MAAMhB;AAAA,MACN,CAACiB,MAAW;AACV,YAAIA,EAAO,MAAM,KAAK,EAAE,MAAM;AAC5B,UAAAnB,EAAK,sBAAsB,IAAI;AAAA,aAC1B;AACL,cAAI,MAAM,OAAOmB,EAAO,MAAM,CAAC,CAAC,CAAC,GAAG;AAC7B,YAAAjB,EAAA,MAAM,CAAC,IAAI;AAChB;AAAA;AAEF,UAAAF,EAAK,sBAAsB,OAAOmB,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA;AAAA,MAE5D;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n    /**\n     * Hint text to display.\n     */\n    hintText?: string;\n    /**\n     * One time password/code\n     */\n    modelValue?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n    hintText: undefined,\n    modelValue: undefined,\n  });\n\n  const emit = defineEmits<{\n    (e: 'update:model-value', value: string | null): void;\n    (e: 'change', params: { originalEvent: Event; value: string | null }): void;\n    (e: 'focus', params: Event): void;\n    (e: 'blur', params: Event): void;\n  }>();\n\n  const data: Ref<Array<string>> = ref([]);\n\n  onMounted(() => {\n    if (props.modelValue) {\n      data.value = props.modelValue?.split('');\n    }\n  });\n\n  function handleInput(event: InputEvent, index) {\n    data.value[index] = event.target?.['value'];\n    updateModel(event);\n\n    if (event.inputType === 'deleteContentBackward') {\n      moveToPrev(event);\n    } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {\n      moveToNext(event);\n    }\n  }\n\n  function updateModel(event: Event) {\n    const newValue = data.value.join('');\n    emit('update:model-value', newValue);\n    emit('change', { originalEvent: event, value: newValue });\n  }\n\n  function moveToPrev(event: InputEvent | KeyboardEvent) {\n    const prevInput: HTMLInputElement = findPrevInput(event.target as HTMLInputElement);\n\n    if (prevInput) {\n      prevInput.focus();\n      prevInput.select();\n    }\n  }\n\n  function moveToNext(event: InputEvent | KeyboardEvent) {\n    const nextInput: HTMLInputElement = findNextInput(event.target as HTMLInputElement);\n\n    if (nextInput) {\n      nextInput.focus();\n      nextInput.select();\n    }\n  }\n\n  function findPrevInput(element: HTMLInputElement) {\n    const prevElement = element.previousElementSibling;\n\n    if (!prevElement) return;\n\n    return prevElement.nodeName === 'INPUT' ? prevElement : findPrevInput(prevElement as HTMLInputElement);\n  }\n\n  function findNextInput(element: HTMLInputElement) {\n    const nextElement = element.nextElementSibling;\n\n    if (!nextElement) return;\n\n    return nextElement.nodeName === 'INPUT' ? nextElement : findNextInput(nextElement as HTMLInputElement);\n  }\n\n  function handleFocus(event) {\n    event.target.select();\n    emit('focus', event);\n  }\n\n  function handleBlur(event: Event) {\n    emit('blur', event);\n  }\n\n  function handleKeyDown(event: KeyboardEvent) {\n    if (event.ctrlKey || event.metaKey) {\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowLeft':\n        moveToPrev(event);\n        event.preventDefault();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n\n      case 'Backspace':\n        if (event.target?.['value'].length === 0) {\n          moveToPrev(event);\n          event.preventDefault();\n        }\n        break;\n\n      case 'ArrowRight':\n        moveToNext(event);\n        event.preventDefault();\n\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n      case 'Tab':\n        break;\n\n      default:\n        if (\n          !(event.code !== 'Space' && Number(event.key) >= 0 && Number(event.key) <= 9) ||\n          (data.value.join('').length >= props.digitCount && event.code !== 'Delete')\n        ) {\n          event.preventDefault();\n        }\n\n        break;\n    }\n  }\n\n  function handlePaste(event: ClipboardEvent) {\n    const paste = event.clipboardData?.getData('text');\n\n    if (paste?.length) {\n      const pastedCode = paste?.substring(0, props.digitCount);\n\n      const parsed = parseInt(pastedCode);\n\n      if (!isNaN(parsed)) {\n        data.value = pastedCode.split('');\n        updateModel(event);\n      }\n    }\n\n    event.preventDefault();\n  }\n\n  watch(\n    () => props.modelValue,\n    (newValue) => {\n      data.value = newValue ? newValue.split('') : new Array(props.digitCount);\n    },\n  );\n</script>\n\n<template>\n  <div\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    :class=\"[classes['stash-confirmation-code-input-container']]\"\n  >\n    <div class=\"tw-mb-3 tw-flex tw-gap-6\">\n      <template v-for=\"field in props.digitCount\" :key=\"field\">\n        <input\n          data-test=\"stash-confirmation-code-input__otp\"\n          class=\"tw-border tw-bg-white tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500\"\n          :class=\"[\n            classes['otp-code-input'],\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          maxlength=\"1\"\n          :value=\"data[field - 1]\"\n          pattern=\"[0-9]\"\n          autocomplete=\"one-time-code\"\n          @input=\"handleInput($event as InputEvent, field - 1)\"\n          @keydown=\"handleKeyDown\"\n          @paste=\"handlePaste\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-green-500\"\n      data-test=\"field-success\"\n    >\n      {{ props.successText }}\n    </small>\n    <small\n      v-if=\"props.hintText\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-pr-6 tw-text-center tw-text-ice-700\"\n      data-test=\"field-hint\"\n    >\n      {{ props.hintText }}\n    </small>\n  </div>\n</template>\n\n<style module>\n  .stash-confirmation-code-input-container {\n    --otp-digits: v-bind(digitCount);\n    --otp-container-width: calc(var(--otp-digits) * 60px);\n\n    width: var(--otp-container-width);\n  }\n\n  .otp-code-input {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otp-code-input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .otp-code-input.has-success:not(:focus) {\n    border-color: var(--color-green-500);\n  }\n\n  .otp-code-input:focus {\n    box-shadow: 0 0 0 3px rgb(0 114 240 / 15%);\n    outline: none;\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","emit","__emit","data","ref","onMounted","_a","handleInput","event","index","updateModel","moveToPrev","moveToNext","newValue","prevInput","findPrevInput","nextInput","findNextInput","element","prevElement","nextElement","handleFocus","handleBlur","handleKeyDown","handlePaste","paste","pastedCode","parsed","watch"],"mappings":"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"}

package/dist/ConfirmationCodeInput.vue.d.ts

@@ -30,16 +30,34 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
     digitCount: number;
     errorText: undefined;
     successText: undefined;
+    hintText: undefined;
+    modelValue: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:model-value": (value: number | null) => void;
+    "update:model-value": (value: string | null) => void;
+    change: (params: {
+        originalEvent: Event;
+        value: string | null;
+    }) => void;
+    focus: (params: Event) => void;
+    blur: (params: Event) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VerificationCodeInputProps>, {
     digitCount: number;
     errorText: undefined;
     successText: undefined;
+    hintText: undefined;
+    modelValue: undefined;
 }>>> & Readonly<{
-    "onUpdate:model-value"?: ((value: number | null) => any) | undefined;
+    onBlur?: ((params: Event) => any) | undefined;
+    onChange?: ((params: {
+        originalEvent: Event;
+        value: string | null;
+    }) => any) | undefined;
+    onFocus?: ((params: Event) => any) | undefined;
+    "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
 }>, {
     errorText: string;
+    hintText: string;
+    modelValue: string;
     digitCount: number;
     successText: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -55,6 +73,14 @@ export declare interface VerificationCodeInputProps {
      * Success text to display.
      */
     successText?: string;
+    /**
+     * Hint text to display.
+     */
+    hintText?: string;
+    /**
+     * One time password/code
+     */
+    modelValue?: string;
 }
 
 export { }