@routa/ui-vue 0.1.0

package/dist/notification/index.mjs

@@ -0,0 +1,207 @@
+import '../style/notification.css';
+import { defineComponent as g, computed as h, openBlock as i, createElementBlock as l, normalizeStyle as D, normalizeClass as I, createElementVNode as N, toDisplayString as M, createCommentVNode as b, createVNode as w, unref as p, toRefs as R, Fragment as k, renderList as A, withDirectives as S, TransitionGroup as j, withCtx as E, createBlock as L, vShow as z, isVNode as C, getCurrentInstance as q } from "vue";
+import { resolveRoutaConfigFromAppContext as O, resolveRoutaConfigFromInstance as F } from "../config-provider/index.mjs";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { f as B, c as H } from "../chunks/manager-C-VTKQvg.mjs";
+const U = {
+  placement: "top-right",
+  duration: 4500,
+  closable: !0
+}, G = (t) => typeof t == "object" && t !== null && "content" in t, d = (t, e, o) => {
+  var r;
+  const c = e.isOptions ?? G, f = o ?? (c(t) ? t.type : void 0) ?? "info", n = {
+    ...U,
+    ...e.defaults,
+    ...(r = e.typeDefaults) == null ? void 0 : r[f]
+  };
+  return c(t) ? {
+    title: t.title ?? "",
+    content: t.content,
+    type: f,
+    duration: t.duration ?? n.duration,
+    placement: t.placement ?? n.placement,
+    closable: t.closable ?? n.closable
+  } : {
+    ...n,
+    title: "",
+    type: f,
+    content: t
+  };
+};
+function J(t) {
+  return {
+    open: (e) => t.open(d(e, t)),
+    info: (e) => t.open(d(e, t, "info")),
+    success: (e) => t.open(d(e, t, "success")),
+    warning: (e) => t.open(d(e, t, "warning")),
+    error: (e) => t.open(d(e, t, "error")),
+    closeAll: () => {
+      var e;
+      (e = t.closeAll) == null || e.call(t);
+    }
+  };
+}
+const K = ["data-theme", "role"], P = { class: "l-notification__body" }, Q = {
+  key: 0,
+  class: "l-notification__title"
+}, W = { class: "l-notification__content" }, X = /* @__PURE__ */ g({
+  name: "NotificationItem",
+  __name: "NotificationItem",
+  props: {
+    record: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(t) {
+    const e = t, o = g({
+      name: "NotificationContentRenderer",
+      props: {
+        content: {
+          type: [String, Function, Object],
+          required: !0
+        }
+      },
+      setup(u) {
+        return () => typeof u.content == "function" ? u.content() : u.content;
+      }
+    }), c = h(() => [
+      "l-notification__item",
+      `is-${e.record.options.type}`
+    ]), f = h(() => ({
+      zIndex: e.record.zIndex,
+      ...e.record.visual.cssVars
+    })), n = () => {
+      e.record.pause();
+    }, r = () => {
+      e.record.resume();
+    }, T = () => {
+      e.record.close();
+    };
+    return (u, tt) => (i(), l("div", {
+      class: I(c.value),
+      "data-theme": t.record.visual.theme,
+      style: D(f.value),
+      role: t.record.options.type === "error" || t.record.options.type === "warning" ? "alert" : "status",
+      onMouseenter: n,
+      onMouseleave: r
+    }, [
+      N("div", P, [
+        t.record.options.title ? (i(), l("div", Q, M(t.record.options.title), 1)) : b("", !0),
+        N("div", W, [
+          w(p(o), {
+            content: t.record.options.content
+          }, null, 8, ["content"])
+        ])
+      ]),
+      t.record.options.closable ? (i(), l("button", {
+        key: 0,
+        type: "button",
+        class: "l-notification__close",
+        "aria-label": "Close notification",
+        onClick: T
+      }, " × ")) : b("", !0)
+    ], 46, K));
+  }
+}), Y = { class: "l-notification-root" }, Z = /* @__PURE__ */ g({
+  name: "NotificationHost",
+  __name: "NotificationHost",
+  props: {
+    state: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(t) {
+    const e = t, { state: o } = R(e);
+    return (c, f) => (i(), l("div", Y, [
+      (i(!0), l(k, null, A(p(B), (n) => S((i(), l("div", {
+        key: n,
+        class: I(["l-notification-host", `l-notification-host--${n}`])
+      }, [
+        w(j, {
+          name: "l-notification-stack",
+          tag: "div",
+          class: "l-notification-host__list"
+        }, {
+          default: E(() => [
+            (i(!0), l(k, null, A(p(o).groups[n], (r) => (i(), L(X, {
+              key: r.id,
+              record: r
+            }, null, 8, ["record"]))), 128))
+          ]),
+          _: 2
+        }, 1024)
+      ], 2)), [
+        [z, p(o).groups[n].length > 0]
+      ])), 128))
+    ]));
+  }
+}), V = H(
+  Z,
+  "l-notification-runtime"
+), $ = (t) => typeof t == "object" && t !== null && !C(t), v = (t) => ({
+  theme: t.theme,
+  cssVars: {
+    ...t.cssVars
+  }
+}), a = (t, e) => {
+  const o = $(t) ? t : void 0;
+  return e != null && e.config ? e.config : O((o == null ? void 0 : o.appContext) ?? (e == null ? void 0 : e.appContext));
+}, s = (t) => J({
+  defaults: t.feedback.notification,
+  typeDefaults: t.feedback.notification.types,
+  isOptions: $,
+  open: (e) => V.open(e, v(t)),
+  closeAll: _
+}), x = (t, e) => {
+  const o = a(t, e);
+  return s(o).open(t);
+}, m = (t, e, o) => {
+  const c = a(e, o);
+  return s(c)[t](e);
+}, y = (t) => ({
+  open: (e) => s(a(e, t == null ? void 0 : t())).open(e),
+  info: (e) => s(a(e, t == null ? void 0 : t())).info(e),
+  success: (e) => s(a(e, t == null ? void 0 : t())).success(e),
+  warning: (e) => s(a(e, t == null ? void 0 : t())).warning(e),
+  error: (e) => s(a(e, t == null ? void 0 : t())).error(e),
+  closeAll: _
+}), _ = () => {
+  V.closeAll();
+}, ct = {
+  open: x,
+  info: (t) => m("info", t),
+  success: (t) => m("success", t),
+  warning: (t) => m("warning", t),
+  error: (t) => m("error", t),
+  closeAll: _,
+  install(t) {
+    t.config.globalProperties.$notification = y(() => ({
+      appContext: t._context,
+      config: O(t._context)
+    })), t.mixin({
+      beforeCreate() {
+        const e = this.$;
+        if (!e)
+          return;
+        const o = e;
+        o.ctx.$notification = y(() => ({
+          appContext: e.appContext,
+          config: F(e)
+        }));
+      }
+    });
+  }
+}, rt = () => {
+  const t = q();
+  return y(() => ({
+    appContext: (t == null ? void 0 : t.appContext) ?? null,
+    config: F(t)
+  }));
+};
+export {
+  ct as LNotification,
+  ct as default,
+  rt as useNotification
+};

package/dist/notification/runtime.d.ts

@@ -0,0 +1,155 @@
+import { AppContext, DeepReadonly } from 'vue';
+import { FeedbackInstance } from '../feedback-runtime/types';
+import { ResolvedRoutaConfig } from '../config-provider';
+import { NotificationController, NotificationInput, NotificationType } from './types';
+interface NotificationRuntimeContext {
+    appContext?: AppContext | null;
+    config?: DeepReadonly<ResolvedRoutaConfig>;
+}
+export declare const openNotification: (input: NotificationInput, context?: NotificationRuntimeContext) => FeedbackInstance;
+export declare const openTypedNotification: (type: NotificationType, input: NotificationInput, context?: NotificationRuntimeContext) => FeedbackInstance;
+export declare const createNotificationController: (resolveContext?: () => NotificationRuntimeContext) => NotificationController;
+export declare const closeAllNotifications: () => void;
+export declare const notificationState: {
+    groups: {
+        "top-left": {
+            id: string;
+            placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+            zIndex: number;
+            options: {
+                title: string;
+                content: import('../feedback-runtime/types').FeedbackRenderable;
+                type: NotificationType;
+                duration: number;
+                placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+                closable: boolean;
+            };
+            visual: {
+                theme: string;
+                cssVars: Record<string, string>;
+            };
+            remaining: number;
+            startedAt: number;
+            timer: number | null;
+            close: () => void;
+            pause: () => void;
+            resume: () => void;
+        }[];
+        "top-center": {
+            id: string;
+            placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+            zIndex: number;
+            options: {
+                title: string;
+                content: import('../feedback-runtime/types').FeedbackRenderable;
+                type: NotificationType;
+                duration: number;
+                placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+                closable: boolean;
+            };
+            visual: {
+                theme: string;
+                cssVars: Record<string, string>;
+            };
+            remaining: number;
+            startedAt: number;
+            timer: number | null;
+            close: () => void;
+            pause: () => void;
+            resume: () => void;
+        }[];
+        "top-right": {
+            id: string;
+            placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+            zIndex: number;
+            options: {
+                title: string;
+                content: import('../feedback-runtime/types').FeedbackRenderable;
+                type: NotificationType;
+                duration: number;
+                placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+                closable: boolean;
+            };
+            visual: {
+                theme: string;
+                cssVars: Record<string, string>;
+            };
+            remaining: number;
+            startedAt: number;
+            timer: number | null;
+            close: () => void;
+            pause: () => void;
+            resume: () => void;
+        }[];
+        "bottom-left": {
+            id: string;
+            placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+            zIndex: number;
+            options: {
+                title: string;
+                content: import('../feedback-runtime/types').FeedbackRenderable;
+                type: NotificationType;
+                duration: number;
+                placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+                closable: boolean;
+            };
+            visual: {
+                theme: string;
+                cssVars: Record<string, string>;
+            };
+            remaining: number;
+            startedAt: number;
+            timer: number | null;
+            close: () => void;
+            pause: () => void;
+            resume: () => void;
+        }[];
+        "bottom-center": {
+            id: string;
+            placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+            zIndex: number;
+            options: {
+                title: string;
+                content: import('../feedback-runtime/types').FeedbackRenderable;
+                type: NotificationType;
+                duration: number;
+                placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+                closable: boolean;
+            };
+            visual: {
+                theme: string;
+                cssVars: Record<string, string>;
+            };
+            remaining: number;
+            startedAt: number;
+            timer: number | null;
+            close: () => void;
+            pause: () => void;
+            resume: () => void;
+        }[];
+        "bottom-right": {
+            id: string;
+            placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+            zIndex: number;
+            options: {
+                title: string;
+                content: import('../feedback-runtime/types').FeedbackRenderable;
+                type: NotificationType;
+                duration: number;
+                placement: import('../../../headless/src/index.ts').FeedbackPlacement;
+                closable: boolean;
+            };
+            visual: {
+                theme: string;
+                cssVars: Record<string, string>;
+            };
+            remaining: number;
+            startedAt: number;
+            timer: number | null;
+            close: () => void;
+            pause: () => void;
+            resume: () => void;
+        }[];
+    };
+};
+export {};

package/dist/notification/types.d.ts

@@ -0,0 +1,12 @@
+import { AppContext, Plugin } from 'vue';
+import { NotificationController as HeadlessNotificationController, NotificationOptions as HeadlessNotificationOptions, ResolvedNotificationOptions as HeadlessResolvedNotificationOptions } from '../../../headless/src/index.ts';
+import { FeedbackRenderable } from '../feedback-runtime/types';
+export type { NotificationType } from '../../../headless/src/index.ts';
+export interface NotificationOptions extends HeadlessNotificationOptions<FeedbackRenderable> {
+    appContext?: AppContext | null;
+}
+export type ResolvedNotificationOptions = HeadlessResolvedNotificationOptions<FeedbackRenderable>;
+export type NotificationInput = FeedbackRenderable | NotificationOptions;
+export interface NotificationController extends HeadlessNotificationController<FeedbackRenderable> {
+}
+export type NotificationApi = Plugin & NotificationController;

package/dist/otp-input/OTPInput.vue.d.ts

@@ -0,0 +1,84 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly length: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly password: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly type: {
+        readonly type: import('vue').PropType<"text" | "number" | "password">;
+        readonly default: "text";
+    };
+    readonly autofocus: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (_val: string) => void;
+    "update:modelValue": (_val: string) => void;
+    complete: (_val: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly length: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly password: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+    };
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly type: {
+        readonly type: import('vue').PropType<"text" | "number" | "password">;
+        readonly default: "text";
+    };
+    readonly autofocus: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    onChange?: ((_val: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((_val: string) => any) | undefined;
+    onComplete?: ((_val: string) => any) | undefined;
+}>, {
+    readonly password: boolean;
+    readonly length: number;
+    readonly disabled: boolean;
+    readonly type: "number" | "text" | "password";
+    readonly modelValue: string;
+    readonly placeholder: string;
+    readonly autofocus: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    cellRefs: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/otp-input/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { default as OTPInput } from './OTPInput.vue';
+export declare const LOTPInput: typeof OTPInput & Plugin;
+export * from './types';
+export default LOTPInput;

package/dist/otp-input/index.js

@@ -0,0 +1,2 @@
+require('../style/otp-input.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue");require("../chunks/manager-C0AUxQ1I.js");const _=require("../chunks/index-DWAWrVaT.js"),S=require("../chunks/use-signals-Bz1smiXh.js"),T=require("../chunks/use-form-item-CloIcyon.js"),q=require("../chunks/use-id-BycaM3-h.js");function D(e={}){const v=e.length??6,o=()=>typeof e.value=="function"?e.value():e.value??"",y=()=>typeof e.disabled=="function"?e.disabled():e.disabled??!1,i=l=>{const n=l.slice(0,v).split("");for(;n.length<v;)n.push("");return n},k=(l,n)=>l.length===n.length&&l.every((s,d)=>s===n[d]),c=_.signal(i(o())),g=_.signal(-1),p=_.signal(y());typeof e.value=="function"&&_.effect(()=>{const l=i(o()),n=_.untracked(()=>c.value);k(l,n)||(c.value=l)}),typeof e.disabled=="function"&&_.effect(()=>{p.value=y()});const w=l=>{const n=i(l);k(n,c.value)||(c.value=n)};return{state:{get value(){return c.value.join("")},set value(l){w(l)},get values(){return c.value},set values(l){c.value=l},get focusedIndex(){return g.value},set focusedIndex(l){g.value=l},get disabled(){return p.value},set disabled(l){p.value=l},get length(){return v}},actions:{updateValue:(l,n)=>{var h,m,V;if(p.value)return;const s=[...c.value];s[l]=n.slice(-1),c.value=s;const d=s.join("");(h=e.onInput)==null||h.call(e,d),d.length===v&&!s.includes("")&&((m=e.onComplete)==null||m.call(e,d),(V=e.onChange)==null||V.call(e,d))},handlePaste:l=>{var h,m;if(p.value)return;const n=l.trim().split("").slice(0,v),s=[...c.value];n.forEach((V,t)=>{s[t]=V}),c.value=s;const d=s.join("");(h=e.onInput)==null||h.call(e,d),(m=e.onChange)==null||m.call(e,d)},clear:()=>{var l,n;c.value=new Array(v).fill(""),(l=e.onInput)==null||l.call(e,""),(n=e.onChange)==null||n.call(e,"")},setFocusedIndex:l=>{g.value=l}}}}const E={modelValue:{type:String,default:""},length:{type:Number,default:6},disabled:{type:Boolean,default:!1},password:{type:Boolean,default:!1},size:{type:String},placeholder:{type:String,default:""},type:{type:String,default:"text"},autofocus:{type:Boolean,default:!1}},F={"update:modelValue":e=>!0,change:e=>!0,complete:e=>!0},O=["aria-label"],z=["id","type","value","disabled","placeholder","aria-label","onInput","onKeydown","onFocus"],$=u.defineComponent({name:"OTPInput",__name:"OTPInput",props:E,emits:F,setup(e,{emit:v}){const o=e,y=v,{formItem:i,size:k,disabled:c,inputId:g}=T.useFormItem(o),p=q.useId("l-otp"),w=u.computed(()=>(g==null?void 0:g.value)||p),C=u.ref([]),f=D({length:o.length,value:o.modelValue,disabled:c.value,onInput:t=>{y("update:modelValue",t)},onChange:t=>{y("change",t),i==null||i.validate("change").catch(()=>{})},onComplete:t=>{y("complete",t)}}),{values:B,focusedIndex:l,disabled:n}=S.useController(f,{value:()=>o.modelValue,disabled:()=>c.value}),s=t=>{var a,b;t>=0&&t<o.length&&((a=C.value[t])==null||a.focus(),(b=C.value[t])==null||b.select())};u.onMounted(()=>{o.autofocus&&s(0)});const d=(t,a)=>{const r=t.target.value.slice(-1);r?(f.actions.updateValue(a,r),a<o.length-1&&u.nextTick(()=>s(a+1))):f.actions.updateValue(a,"")},h=(t,a)=>{t.key==="Backspace"?!B.value[a]&&a>0?(f.actions.updateValue(a-1,""),s(a-1)):f.actions.updateValue(a,""):t.key==="ArrowLeft"&&a>0?s(a-1):t.key==="ArrowRight"&&a<o.length-1&&s(a+1)},m=t=>{var r;t.preventDefault();const a=((r=t.clipboardData)==null?void 0:r.getData("text"))??"";f.actions.handlePaste(a);const b=Math.min(a.length,o.length-1);s(b)},V=u.computed(()=>["l-otp-input",`l-otp-input--${k.value}`,{"is-disabled":n.value}]);return(t,a)=>(u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass(V.value),onPaste:m,role:"group","aria-label":`请输入 ${t.length} 位验证码`},[(u.openBlock(!0),u.createElementBlock(u.Fragment,null,u.renderList(u.unref(B),(b,r)=>(u.openBlock(),u.createElementBlock("div",{key:r,class:u.normalizeClass(["l-otp-input__cell",{"is-focused":u.unref(l)===r}])},[u.createElementVNode("input",{id:r===0?w.value:`${w.value}-${r}`,ref_for:!0,ref_key:"cellRefs",ref:C,class:"l-otp-input__input",type:t.password?"password":o.type==="number"?"tel":"text",value:b,disabled:u.unref(n),placeholder:t.placeholder,maxlength:"1",autocomplete:"one-time-code","aria-label":`第 ${r+1} 位验证码`,onInput:I=>d(I,r),onKeydown:I=>h(I,r),onFocus:I=>u.unref(f).actions.setFocusedIndex(r),onBlur:a[0]||(a[0]=()=>{var I;u.unref(f).actions.setFocusedIndex(-1),(I=u.unref(i))==null||I.validate("blur").catch(()=>{})})},null,40,z)],2))),128))],42,O))}}),P=$;P.install=e=>{e.component("LOTPInput",P)};exports.LOTPInput=P;exports.default=P;exports.otpInputEmits=F;exports.otpInputProps=E;

package/dist/otp-input/index.mjs

@@ -0,0 +1,216 @@
+import '../style/otp-input.css';
+import { defineComponent as E, computed as F, ref as O, onMounted as S, openBlock as P, createElementBlock as B, normalizeClass as T, Fragment as L, renderList as j, unref as V, createElementVNode as A, nextTick as K } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { s as D, e as $, u as R } from "../chunks/index-B0yEC3RG.mjs";
+import { u as M } from "../chunks/use-signals-CE1T2jXK.mjs";
+import { u as N } from "../chunks/use-form-item-CqDbWCiU.mjs";
+import { u as q } from "../chunks/use-id-D3casveg.mjs";
+function G(e = {}) {
+  const f = e.length ?? 6, r = () => typeof e.value == "function" ? e.value() : e.value ?? "", y = () => typeof e.disabled == "function" ? e.disabled() : e.disabled ?? !1, v = (l) => {
+    const u = l.slice(0, f).split("");
+    for (; u.length < f; ) u.push("");
+    return u;
+  }, _ = (l, u) => l.length === u.length && l.every((n, o) => n === u[o]), s = D(v(r())), g = D(-1), p = D(y());
+  typeof e.value == "function" && $(() => {
+    const l = v(r()), u = R(() => s.value);
+    _(l, u) || (s.value = l);
+  }), typeof e.disabled == "function" && $(() => {
+    p.value = y();
+  });
+  const w = (l) => {
+    const u = v(l);
+    _(u, s.value) || (s.value = u);
+  };
+  return {
+    state: {
+      get value() {
+        return s.value.join("");
+      },
+      set value(l) {
+        w(l);
+      },
+      get values() {
+        return s.value;
+      },
+      set values(l) {
+        s.value = l;
+      },
+      get focusedIndex() {
+        return g.value;
+      },
+      set focusedIndex(l) {
+        g.value = l;
+      },
+      get disabled() {
+        return p.value;
+      },
+      set disabled(l) {
+        p.value = l;
+      },
+      get length() {
+        return f;
+      }
+    },
+    actions: {
+      updateValue: (l, u) => {
+        var i, m, I;
+        if (p.value) return;
+        const n = [...s.value];
+        n[l] = u.slice(-1), s.value = n;
+        const o = n.join("");
+        (i = e.onInput) == null || i.call(e, o), o.length === f && !n.includes("") && ((m = e.onComplete) == null || m.call(e, o), (I = e.onChange) == null || I.call(e, o));
+      },
+      handlePaste: (l) => {
+        var i, m;
+        if (p.value) return;
+        const u = l.trim().split("").slice(0, f), n = [...s.value];
+        u.forEach((I, a) => {
+          n[a] = I;
+        }), s.value = n;
+        const o = n.join("");
+        (i = e.onInput) == null || i.call(e, o), (m = e.onChange) == null || m.call(e, o);
+      },
+      clear: () => {
+        var l, u;
+        s.value = new Array(f).fill(""), (l = e.onInput) == null || l.call(e, ""), (u = e.onChange) == null || u.call(e, "");
+      },
+      setFocusedIndex: (l) => {
+        g.value = l;
+      }
+    }
+  };
+}
+const H = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  length: {
+    type: Number,
+    default: 6
+  },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  password: {
+    type: Boolean,
+    default: !1
+  },
+  size: {
+    type: String
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "text"
+  },
+  autofocus: {
+    type: Boolean,
+    default: !1
+  }
+}, J = {
+  "update:modelValue": (e) => !0,
+  change: (e) => !0,
+  complete: (e) => !0
+}, Q = ["aria-label"], U = ["id", "type", "value", "disabled", "placeholder", "aria-label", "onInput", "onKeydown", "onFocus"], W = /* @__PURE__ */ E({
+  name: "OTPInput",
+  __name: "OTPInput",
+  props: H,
+  emits: J,
+  setup(e, { emit: f }) {
+    const r = e, y = f, { formItem: v, size: _, disabled: s, inputId: g } = N(r), p = q("l-otp"), w = F(() => (g == null ? void 0 : g.value) || p), C = O([]), d = G({
+      length: r.length,
+      value: r.modelValue,
+      disabled: s.value,
+      onInput: (a) => {
+        y("update:modelValue", a);
+      },
+      onChange: (a) => {
+        y("change", a), v == null || v.validate("change").catch(() => {
+        });
+      },
+      onComplete: (a) => {
+        y("complete", a);
+      }
+    }), {
+      values: k,
+      focusedIndex: l,
+      disabled: u
+    } = M(d, {
+      value: () => r.modelValue,
+      disabled: () => s.value
+    }), n = (a) => {
+      var t, h;
+      a >= 0 && a < r.length && ((t = C.value[a]) == null || t.focus(), (h = C.value[a]) == null || h.select());
+    };
+    S(() => {
+      r.autofocus && n(0);
+    });
+    const o = (a, t) => {
+      const c = a.target.value.slice(-1);
+      c ? (d.actions.updateValue(t, c), t < r.length - 1 && K(() => n(t + 1))) : d.actions.updateValue(t, "");
+    }, i = (a, t) => {
+      a.key === "Backspace" ? !k.value[t] && t > 0 ? (d.actions.updateValue(t - 1, ""), n(t - 1)) : d.actions.updateValue(t, "") : a.key === "ArrowLeft" && t > 0 ? n(t - 1) : a.key === "ArrowRight" && t < r.length - 1 && n(t + 1);
+    }, m = (a) => {
+      var c;
+      a.preventDefault();
+      const t = ((c = a.clipboardData) == null ? void 0 : c.getData("text")) ?? "";
+      d.actions.handlePaste(t);
+      const h = Math.min(t.length, r.length - 1);
+      n(h);
+    }, I = F(() => [
+      "l-otp-input",
+      `l-otp-input--${_.value}`,
+      {
+        "is-disabled": u.value
+      }
+    ]);
+    return (a, t) => (P(), B("div", {
+      class: T(I.value),
+      onPaste: m,
+      role: "group",
+      "aria-label": `请输入 ${a.length} 位验证码`
+    }, [
+      (P(!0), B(L, null, j(V(k), (h, c) => (P(), B("div", {
+        key: c,
+        class: T(["l-otp-input__cell", { "is-focused": V(l) === c }])
+      }, [
+        A("input", {
+          id: c === 0 ? w.value : `${w.value}-${c}`,
+          ref_for: !0,
+          ref_key: "cellRefs",
+          ref: C,
+          class: "l-otp-input__input",
+          type: a.password ? "password" : r.type === "number" ? "tel" : "text",
+          value: h,
+          disabled: V(u),
+          placeholder: a.placeholder,
+          maxlength: "1",
+          autocomplete: "one-time-code",
+          "aria-label": `第 ${c + 1} 位验证码`,
+          onInput: (b) => o(b, c),
+          onKeydown: (b) => i(b, c),
+          onFocus: (b) => V(d).actions.setFocusedIndex(c),
+          onBlur: t[0] || (t[0] = () => {
+            var b;
+            V(d).actions.setFocusedIndex(-1), (b = V(v)) == null || b.validate("blur").catch(() => {
+            });
+          })
+        }, null, 40, U)
+      ], 2))), 128))
+    ], 42, Q));
+  }
+}), z = W;
+z.install = (e) => {
+  e.component("LOTPInput", z);
+};
+export {
+  z as LOTPInput,
+  z as default,
+  J as otpInputEmits,
+  H as otpInputProps
+};