vlite3 1.2.5 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +5 -1
  2. package/components/Button.vue.js +18 -18
  3. package/components/CategoryManager/CategoryManager.vue.js +1 -1
  4. package/components/Chart/GanttChart.vue.d.ts +67 -0
  5. package/components/Chart/GanttChart.vue.js +7 -0
  6. package/components/Chart/GanttChart.vue2.js +911 -0
  7. package/components/Chart/SpeedometerChart.vue.d.ts +54 -0
  8. package/components/Chart/SpeedometerChart.vue.js +558 -0
  9. package/components/Chart/SpeedometerChart.vue2.js +4 -0
  10. package/components/Chart/index.d.ts +3 -1
  11. package/components/Chart/types.d.ts +106 -0
  12. package/components/ChoiceBox/ChoiceBox.vue.d.ts +46 -1
  13. package/components/ChoiceBox/ChoiceBox.vue.js +274 -91
  14. package/components/ChoiceBox/index.d.ts +1 -1
  15. package/components/ColorPicker/ColorIro.vue3.js +2 -2
  16. package/components/ColorPicker/ColorPicker.vue.js +3 -3
  17. package/components/CommandPalette/CommandPaletteContent.vue2.js +1 -1
  18. package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js} +1 -1
  19. package/components/DataTable/DataTableHeader.vue.js +33 -30
  20. package/components/ImageComparison/ImageComparison.vue.d.ts +29 -0
  21. package/components/ImageComparison/ImageComparison.vue.js +126 -0
  22. package/components/ImageComparison/ImageComparison.vue2.js +4 -0
  23. package/components/ImageComparison/index.d.ts +1 -0
  24. package/components/ImportData/ImportData.vue.js +1 -1
  25. package/components/NavbarCommandPalette.vue.js +1 -1
  26. package/components/OTPInput/OTPInput.vue.d.ts +18 -0
  27. package/components/OTPInput/OTPInput.vue.js +127 -82
  28. package/components/PricingPlan/PricingPlanItem.vue.js +19 -19
  29. package/components/Radio.vue.d.ts +41 -0
  30. package/components/Radio.vue.js +97 -0
  31. package/components/Radio.vue2.js +4 -0
  32. package/components/RadioGroup.vue.d.ts +38 -0
  33. package/components/RadioGroup.vue.js +37 -0
  34. package/components/RadioGroup.vue2.js +4 -0
  35. package/components/Screen/ScreenFilter.vue.js +1 -1
  36. package/components/SidePanel.vue.js +3 -3
  37. package/components/SidePanel.vue2.js +1 -1
  38. package/components/Slider.vue.d.ts +7 -0
  39. package/components/Slider.vue.js +194 -120
  40. package/components/Timeline/Timeline.vue.d.ts +1 -1
  41. package/components/index.d.ts +1 -1
  42. package/index.d.ts +3 -0
  43. package/index.js +138 -128
  44. package/package.json +1 -1
  45. package/style.css +35 -26
  46. package/types/form.type.d.ts +23 -0
  47. /package/components/ColorPicker/{ColorIro.vue2.js → ColorIro.vue.js} +0 -0
@@ -1,5 +1,5 @@
1
1
  import t from "./CommandPaletteItem.vue3.js";
2
- /* empty css */
2
+ /* empty css */
3
3
  import o from "../../_virtual/_plugin-vue_export-helper.js";
4
4
  const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
5
5
  export {
@@ -1,10 +1,10 @@
1
- import { defineComponent as x, computed as r, openBlock as l, createElementBlock as n, normalizeClass as o, createElementVNode as s, toDisplayString as y, createVNode as b, createCommentVNode as v } from "vue";
2
- import C from "../Icon.vue.js";
3
- import { $t as w } from "../../utils/i18n.js";
4
- const B = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, S = {
1
+ import { defineComponent as y, computed as t, openBlock as s, createElementBlock as i, normalizeClass as a, createElementVNode as c, toDisplayString as v, createVNode as C, createCommentVNode as b } from "vue";
2
+ import w from "../Icon.vue.js";
3
+ import { $t as B } from "../../utils/i18n.js";
4
+ const _ = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, k = {
5
5
  key: 0,
6
6
  class: "w-4 h-4 shrink-0"
7
- }, I = /* @__PURE__ */ x({
7
+ }, j = /* @__PURE__ */ y({
8
8
  __name: "DataTableHeader",
9
9
  props: {
10
10
  header: {},
@@ -15,43 +15,46 @@ const B = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 tr
15
15
  cellBordered: { type: Boolean }
16
16
  },
17
17
  emits: ["sort"],
18
- setup(t, { emit: i }) {
19
- const e = t, d = i, a = r(() => e.header.sortKey || e.header.field), c = r(
20
- () => e.sortConfig?.field === a.value && e.sortConfig?.order
21
- ), u = r(() => !e.sortConfig || e.sortConfig.field !== a.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), f = () => {
22
- e.tableSortable && e.header.sortable !== !1 && d("sort", e.header.field);
23
- }, p = r(() => ({
18
+ setup(l, { emit: d }) {
19
+ const e = l, u = d, n = t(() => e.header.sortKey || e.header.field), f = t(
20
+ () => e.sortConfig?.field === n.value && e.sortConfig?.order
21
+ ), p = t(() => !e.sortConfig || e.sortConfig.field !== n.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), r = t(() => {
22
+ const o = !!e.header.title || !!e.header.titleI18n;
23
+ return e.tableSortable && e.header.sortable !== !1 && o;
24
+ }), h = () => {
25
+ r.value && u("sort", e.header.field);
26
+ }, m = t(() => ({
24
27
  left: "justify-start text-left",
25
28
  center: "justify-center text-center",
26
29
  right: "justify-end text-right"
27
- })[e.header.align || "left"]), h = r(
28
- () => e.header.titleI18n ? w(e.header.titleI18n) : e.header.title
29
- ), m = r(() => e.size === "xs" || e.compact ? `py-1.5! ${e.cellBordered ? "px-3!" : ""}` : e.size === "sm" ? `py-2! ${e.cellBordered ? "px-3!" : ""}` : e.size === "lg" ? `py-4! ${e.cellBordered ? "px-4!" : ""}` : `py-3! ${e.cellBordered ? "px-3.5!" : ""}`);
30
- return (g, k) => (l(), n("th", {
30
+ })[e.header.align || "left"]), g = t(
31
+ () => e.header.titleI18n ? B(e.header.titleI18n) : e.header.title
32
+ ), x = t(() => e.size === "xs" || e.compact ? `py-1.5! ${e.cellBordered ? "px-3!" : ""}` : e.size === "sm" ? `py-2! ${e.cellBordered ? "px-3!" : ""}` : e.size === "lg" ? `py-4! ${e.cellBordered ? "px-4!" : ""}` : `py-3! ${e.cellBordered ? "px-3.5!" : ""}`);
33
+ return (o, S) => (s(), i("th", {
31
34
  scope: "col",
32
- class: o(["group/th px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden max-w-[400px]", [
33
- m.value,
34
- t.header.sortable !== !1 && t.tableSortable ? "cursor-pointer hover:bg-muted/50" : "",
35
- t.header.hideOnMobile ? "hidden md:table-cell" : ""
35
+ class: a(["group/th px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden max-w-[400px]", [
36
+ x.value,
37
+ r.value ? "cursor-pointer hover:bg-muted/50" : "",
38
+ l.header.hideOnMobile ? "hidden md:table-cell" : ""
36
39
  ]]),
37
- onClick: f
40
+ onClick: h
38
41
  }, [
39
- s("div", {
40
- class: o(["flex items-center gap-2 space-x-2", p.value])
42
+ c("div", {
43
+ class: a(["flex items-center gap-2 space-x-2", m.value])
41
44
  }, [
42
- s("span", B, y(h.value), 1),
43
- t.tableSortable && t.header.sortable !== !1 ? (l(), n("span", S, [
44
- b(C, {
45
- icon: u.value,
46
- class: o(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
47
- c.value ? "opacity-100 text-foreground" : "opacity-0 group-hover/th:opacity-100"
45
+ c("span", _, v(g.value), 1),
46
+ r.value ? (s(), i("span", k, [
47
+ C(w, {
48
+ icon: p.value,
49
+ class: a(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
50
+ f.value ? "opacity-100 text-foreground" : "opacity-0 group-hover/th:opacity-100"
48
51
  ]])
49
52
  }, null, 8, ["icon", "class"])
50
- ])) : v("", !0)
53
+ ])) : b("", !0)
51
54
  ], 2)
52
55
  ], 2));
53
56
  }
54
57
  });
55
58
  export {
56
- I as default
59
+ j as default
57
60
  };
@@ -0,0 +1,29 @@
1
+ type __VLS_Props = {
2
+ beforeImage: string;
3
+ afterImage: string;
4
+ beforeLabel?: string;
5
+ afterLabel?: string;
6
+ initialPosition?: number;
7
+ hover?: boolean;
8
+ width?: string | number;
9
+ height?: string | number;
10
+ containerClass?: string;
11
+ handleClass?: string;
12
+ showHandle?: boolean;
13
+ variant?: 'one' | 'two';
14
+ };
15
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
16
+ width: string | number;
17
+ height: string | number;
18
+ variant: "one" | "two";
19
+ containerClass: string;
20
+ hover: boolean;
21
+ beforeLabel: string;
22
+ afterLabel: string;
23
+ initialPosition: number;
24
+ handleClass: string;
25
+ showHandle: boolean;
26
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
27
+ containerRef: HTMLDivElement;
28
+ }, HTMLDivElement>;
29
+ export default _default;
@@ -0,0 +1,126 @@
1
+ import { defineComponent as k, ref as w, onMounted as C, onUnmounted as E, computed as M, openBlock as a, createElementBlock as i, normalizeStyle as b, normalizeClass as s, createElementVNode as n, toDisplayString as v, createCommentVNode as r, setBlockTracking as p, createVNode as B } from "vue";
2
+ import X from "../Icon.vue.js";
3
+ const z = ["src"], I = ["src"], j = {
4
+ key: 0,
5
+ class: "absolute top-4 flex w-full justify-center pointer-events-none"
6
+ }, D = { class: "bg-[#4846468d] backdrop-blur-sm px-3 py-1 rounded-full -text-fs-3 font-medium text-[white] whitespace-nowrap" }, P = { class: "bg-[#4846468d] backdrop-blur-sm px-3 py-1 rounded-full -text-fs-3 font-medium text-[white] whitespace-nowrap" }, R = /* @__PURE__ */ k({
7
+ __name: "ImageComparison",
8
+ props: {
9
+ beforeImage: {},
10
+ afterImage: {},
11
+ beforeLabel: { default: "Before" },
12
+ afterLabel: { default: "After" },
13
+ initialPosition: { default: 50 },
14
+ hover: { type: Boolean, default: !1 },
15
+ width: { default: "100%" },
16
+ height: { default: "auto" },
17
+ containerClass: { default: "" },
18
+ handleClass: { default: "" },
19
+ showHandle: { type: Boolean, default: !0 },
20
+ variant: { default: "one" }
21
+ },
22
+ setup(o) {
23
+ const u = o, l = w(u.initialPosition), c = w(!1), h = w(null), m = (e) => {
24
+ if (!h.value) return;
25
+ const t = h.value.getBoundingClientRect(), L = (e - t.left) / t.width * 100;
26
+ l.value = Math.max(0, Math.min(100, L));
27
+ }, y = (e) => {
28
+ u.hover && !c.value && m(e.clientX);
29
+ }, g = (e) => {
30
+ c.value = !0;
31
+ const t = "touches" in e ? e.touches[0].clientX : e.clientX;
32
+ m(t);
33
+ }, d = (e) => {
34
+ if (!c.value) return;
35
+ "touches" in e && e.cancelable && e.preventDefault();
36
+ const t = "touches" in e ? e.touches[0].clientX : e.clientX;
37
+ m(t);
38
+ }, f = () => {
39
+ c.value = !1;
40
+ };
41
+ C(() => {
42
+ window.addEventListener("mousemove", d), window.addEventListener("touchmove", d, { passive: !1 }), window.addEventListener("mouseup", f), window.addEventListener("touchend", f);
43
+ }), E(() => {
44
+ window.removeEventListener("mousemove", d), window.removeEventListener("touchmove", d), window.removeEventListener("mouseup", f), window.removeEventListener("touchend", f);
45
+ });
46
+ const x = M(() => {
47
+ const e = (t) => typeof t == "number" ? `${t}px` : t;
48
+ return {
49
+ width: e(u.width),
50
+ height: e(u.height)
51
+ };
52
+ });
53
+ return (e, t) => (a(), i("div", {
54
+ ref_key: "containerRef",
55
+ ref: h,
56
+ class: s(["relative overflow-hidden select-none cursor-ew-resize rounded-2xl group", o.containerClass]),
57
+ style: b(x.value),
58
+ onMousemove: y,
59
+ onMousedown: g,
60
+ onTouchstartPassive: g
61
+ }, [
62
+ n("img", {
63
+ src: o.afterImage,
64
+ class: s(["block w-full object-cover select-none", u.height === "auto" ? "h-auto" : "h-full"]),
65
+ alt: "After",
66
+ draggable: "false"
67
+ }, null, 10, z),
68
+ o.afterLabel && o.variant === "one" ? (a(), i("div", {
69
+ key: 0,
70
+ class: s(["absolute top-4 right-4 bg-[#4846468d] px-3 py-1 -text-fs-4 rounded-full -text-fs-3 font-medium text-[white] transition-opacity duration-300 pointer-events-none", l.value > 80 ? "opacity-0" : "opacity-100"])
71
+ }, v(o.afterLabel), 3)) : r("", !0),
72
+ n("div", {
73
+ class: "absolute inset-0 w-full h-full",
74
+ style: b({ clipPath: `inset(0 ${100 - l.value}% 0 0)`, willChange: "clip-path" })
75
+ }, [
76
+ n("img", {
77
+ src: o.beforeImage,
78
+ class: "absolute inset-0 w-full h-full object-cover select-none",
79
+ alt: "Before",
80
+ draggable: "false"
81
+ }, null, 8, I)
82
+ ], 4),
83
+ o.beforeLabel && o.variant === "one" ? (a(), i("div", {
84
+ key: 1,
85
+ class: s(["absolute top-4 left-4 bg-[#4846468d] px-3 py-1 -text-fs-4 rounded-full -text-fs-3 font-medium text-[white] transition-opacity duration-300 pointer-events-none z-10", l.value < 20 ? "opacity-0" : "opacity-100"])
86
+ }, v(o.beforeLabel), 3)) : r("", !0),
87
+ n("div", {
88
+ class: "absolute top-0 bottom-0 flex flex-col items-center justify-center cursor-ew-resize z-20 pointer-events-none",
89
+ style: b({
90
+ left: `${l.value}%`,
91
+ transform: "translateX(-50%)",
92
+ willChange: "transform"
93
+ })
94
+ }, [
95
+ o.variant === "two" ? (a(), i("div", j, [
96
+ o.beforeLabel ? (a(), i("div", {
97
+ key: 0,
98
+ class: s(["absolute right-full pr-3 transition-opacity duration-300", l.value < 23 ? "opacity-0" : "opacity-100"])
99
+ }, [
100
+ n("div", D, v(o.beforeLabel), 1)
101
+ ], 2)) : r("", !0),
102
+ o.afterLabel ? (a(), i("div", {
103
+ key: 1,
104
+ class: s(["absolute left-full pl-3 transition-opacity duration-300", l.value > 78 ? "opacity-0" : "opacity-100"])
105
+ }, [
106
+ n("div", P, v(o.afterLabel), 1)
107
+ ], 2)) : r("", !0)
108
+ ])) : r("", !0),
109
+ t[1] || (t[1] = n("div", { class: "w-px h-full bg-[white]" }, null, -1)),
110
+ o.showHandle ? (a(), i("div", {
111
+ key: 1,
112
+ class: s(["w-7 h-7 border-[1.5px] border-[white] rounded-full flex-shrink-0 flex items-center justify-center transform transition-all duration-200", [c.value ? "scale-110 " : "group-hover:scale-105", o.handleClass]])
113
+ }, [
114
+ t[0] || (p(-1, !0), (t[0] = B(X, {
115
+ icon: "lucide:chevrons-left-right",
116
+ class: "w-4 h-4 text-[white]"
117
+ })).cacheIndex = 0, p(1), t[0])
118
+ ], 2)) : r("", !0),
119
+ t[2] || (t[2] = n("div", { class: "w-px h-full bg-[white]" }, null, -1))
120
+ ], 4)
121
+ ], 38));
122
+ }
123
+ });
124
+ export {
125
+ R as default
126
+ };
@@ -0,0 +1,4 @@
1
+ import f from "./ImageComparison.vue.js";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1 @@
1
+ export { default as ImageComparison } from './ImageComparison.vue';
@@ -159,7 +159,7 @@ const xe = { class: "px-2" }, ye = { class: "min-h-[300px]" }, De = {
159
159
  ue(pe(fe), {
160
160
  steps: Y.value,
161
161
  "active-step": a.value - 1,
162
- class: "mb-13"
162
+ class: "mb-8"
163
163
  }, null, 8, ["steps", "active-step"]),
164
164
  B("div", ye, [
165
165
  a.value === 1 ? (n(), d(he, {
@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
3
3
  import v from "./Modal.vue.js";
4
4
  import N from "./CommandPalette/CommandPaletteContent.vue.js";
5
5
  import { $t as U } from "../utils/i18n.js";
6
- /* empty css */
6
+ /* empty css */
7
7
  const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
8
8
  __name: "NavbarCommandPalette",
9
9
  props: {
@@ -11,15 +11,26 @@ interface Props {
11
11
  size?: 'sm' | 'md' | 'lg';
12
12
  mask?: boolean;
13
13
  fluid?: boolean;
14
+ allowResend?: boolean;
15
+ resendDuration?: number;
16
+ maxResends?: number;
17
+ resendText?: string;
18
+ resendActionText?: string;
19
+ resendWaitText?: string;
20
+ resendLimitText?: string;
14
21
  }
15
22
  declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
16
23
  change: (value: string) => any;
17
24
  "update:modelValue": (value: string) => any;
18
25
  complete: (value: string) => any;
26
+ resend: (count: number) => any;
27
+ "resend-limit-reached": () => any;
19
28
  }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
20
29
  onChange?: (value: string) => any;
21
30
  "onUpdate:modelValue"?: (value: string) => any;
22
31
  onComplete?: (value: string) => any;
32
+ onResend?: (count: number) => any;
33
+ "onResend-limit-reached"?: () => any;
23
34
  }>, {
24
35
  length: number;
25
36
  type: "text" | "number";
@@ -33,5 +44,12 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
33
44
  autofocus: boolean;
34
45
  attached: boolean;
35
46
  fluid: boolean;
47
+ allowResend: boolean;
48
+ resendDuration: number;
49
+ maxResends: number;
50
+ resendText: string;
51
+ resendActionText: string;
52
+ resendWaitText: string;
53
+ resendLimitText: string;
36
54
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
37
55
  export default _default;
@@ -1,5 +1,11 @@
1
- import { defineComponent as C, ref as v, watch as M, onMounted as V, nextTick as A, computed as m, openBlock as g, createElementBlock as h, normalizeClass as y, Fragment as E, renderList as F } from "vue";
2
- const K = ["value", "type", "inputmode", "disabled", "placeholder", "onInput", "onKeydown"], T = /* @__PURE__ */ C({
1
+ import { defineComponent as K, ref as w, watch as N, onMounted as J, nextTick as W, onUnmounted as $, computed as x, openBlock as d, createElementBlock as c, normalizeClass as D, createElementVNode as k, Fragment as I, renderList as O, createTextVNode as B, toDisplayString as m, createCommentVNode as S } from "vue";
2
+ const U = ["value", "type", "inputmode", "disabled", "placeholder", "onInput", "onKeydown"], q = {
3
+ key: 0,
4
+ class: "text-sm text-center text-muted-foreground mt-1"
5
+ }, G = { key: 0 }, H = { class: "font-medium text-primary" }, Q = { key: 1 }, X = {
6
+ key: 1,
7
+ class: "text-destructive font-medium"
8
+ }, Z = /* @__PURE__ */ K({
3
9
  __name: "OTPInput",
4
10
  props: {
5
11
  length: { default: 6 },
@@ -13,78 +19,98 @@ const K = ["value", "type", "inputmode", "disabled", "placeholder", "onInput", "
13
19
  attached: { type: Boolean, default: !1 },
14
20
  size: { default: "md" },
15
21
  mask: { type: Boolean, default: !1 },
16
- fluid: { type: Boolean, default: !1 }
22
+ fluid: { type: Boolean, default: !1 },
23
+ allowResend: { type: Boolean, default: !1 },
24
+ resendDuration: { default: 45 },
25
+ maxResends: { default: 5 },
26
+ resendText: { default: "Don't see it?" },
27
+ resendActionText: { default: "Resend code" },
28
+ resendWaitText: { default: "Resend code in" },
29
+ resendLimitText: { default: "Too many attempts. Please try again." }
17
30
  },
18
- emits: ["update:modelValue", "complete", "change"],
19
- setup(d, { emit: b }) {
20
- const t = d, p = b, s = v([]), r = v(new Array(t.length).fill(""));
21
- M(
22
- () => t.modelValue,
23
- (l) => {
24
- const e = l || "", a = e.split("").slice(0, t.length);
25
- if (r.value.join("") !== e) {
26
- const o = new Array(t.length).fill("");
27
- a.forEach((u, i) => o[i] = u), r.value = o;
31
+ emits: ["update:modelValue", "complete", "change", "resend", "resend-limit-reached"],
32
+ setup(s, { emit: R }) {
33
+ const e = s, p = R, i = w([]), r = w(new Array(e.length).fill("")), v = w(e.resendDuration), g = w(0);
34
+ let f = null;
35
+ const T = () => {
36
+ f && clearInterval(f), v.value = e.resendDuration, f = setInterval(() => {
37
+ v.value > 0 ? v.value-- : f && clearInterval(f);
38
+ }, 1e3);
39
+ }, C = () => {
40
+ g.value >= e.maxResends || (g.value++, p("resend", g.value), g.value >= e.maxResends ? p("resend-limit-reached") : T());
41
+ };
42
+ N(
43
+ () => e.modelValue,
44
+ (n) => {
45
+ const t = n || "", o = t.split("").slice(0, e.length);
46
+ if (r.value.join("") !== t) {
47
+ const l = new Array(e.length).fill("");
48
+ o.forEach((u, y) => l[y] = u), r.value = l;
28
49
  }
29
50
  },
30
51
  { immediate: !0 }
31
52
  );
32
- const c = () => {
33
- const l = r.value.join("");
34
- p("update:modelValue", l), p("change", l), l.length === t.length && p("complete", l);
35
- }, w = (l, e) => {
36
- let n = l.target.value;
37
- if (t.type === "number" && (n = n.replace(/\D/g, "")), n.length === 1) {
38
- r.value[e] = n, c(), e < t.length - 1 && s.value[e + 1]?.focus();
53
+ const h = () => {
54
+ const n = r.value.join("");
55
+ p("update:modelValue", n), p("change", n), n.length === e.length && p("complete", n);
56
+ }, V = (n, t) => {
57
+ let a = n.target.value;
58
+ if (e.type === "number" && (a = a.replace(/\D/g, "")), a.length === 1) {
59
+ r.value[t] = a, h(), t < e.length - 1 && i.value[t + 1]?.focus();
39
60
  return;
40
61
  }
41
- if (!n) {
42
- r.value[e] = "", c();
62
+ if (!a) {
63
+ r.value[t] = "", h();
43
64
  return;
44
65
  }
45
- if (n.length > 1) {
46
- const o = n.split("").slice(0, t.length - e);
47
- o.forEach((i, f) => {
48
- e + f < t.length && (r.value[e + f] = i);
49
- }), c();
50
- const u = Math.min(e + o.length, t.length - 1);
51
- s.value[u]?.focus();
66
+ if (a.length > 1) {
67
+ const l = a.split("").slice(0, e.length - t);
68
+ l.forEach((y, b) => {
69
+ t + b < e.length && (r.value[t + b] = y);
70
+ }), h();
71
+ const u = Math.min(t + l.length, e.length - 1);
72
+ i.value[u]?.focus();
52
73
  }
53
- }, D = (l, e) => {
54
- const a = l.key;
55
- if (a === "Backspace") {
56
- r.value[e] || (l.preventDefault(), e > 0 && (r.value[e - 1] = "", s.value[e - 1]?.focus(), c()));
74
+ }, j = (n, t) => {
75
+ const o = n.key;
76
+ if (o === "Backspace") {
77
+ r.value[t] || (n.preventDefault(), t > 0 && (r.value[t - 1] = "", i.value[t - 1]?.focus(), h()));
57
78
  return;
58
79
  }
59
- a === "ArrowLeft" && (l.preventDefault(), e > 0 && s.value[e - 1]?.focus()), a === "ArrowRight" && (l.preventDefault(), e < t.length - 1 && s.value[e + 1]?.focus());
60
- }, k = (l) => {
61
- l.preventDefault();
62
- const e = l.clipboardData?.getData("text/plain");
63
- if (!e) return;
64
- let a = e.trim();
65
- t.type === "number" && (a = a.replace(/\D/g, ""));
66
- const n = a.split("").slice(0, t.length), o = [...r.value];
67
- n.forEach((i, f) => {
68
- o[f] = i;
69
- }), r.value = o, c();
70
- const u = Math.min(n.length, t.length - 1);
71
- s.value[u]?.focus();
72
- }, B = (l, e) => {
73
- l && (s.value[e] = l);
80
+ o === "ArrowLeft" && (n.preventDefault(), t > 0 && i.value[t - 1]?.focus()), o === "ArrowRight" && (n.preventDefault(), t < e.length - 1 && i.value[t + 1]?.focus());
81
+ }, A = (n) => {
82
+ n.preventDefault();
83
+ const t = n.clipboardData?.getData("text/plain");
84
+ if (!t) return;
85
+ let o = t.trim();
86
+ e.type === "number" && (o = o.replace(/\D/g, ""));
87
+ const a = o.split("").slice(0, e.length), l = [...r.value];
88
+ a.forEach((y, b) => {
89
+ l[b] = y;
90
+ }), r.value = l, h();
91
+ const u = Math.min(a.length, e.length - 1);
92
+ i.value[u]?.focus();
93
+ }, z = (n, t) => {
94
+ n && (i.value[t] = n);
74
95
  };
75
- V(() => {
76
- t.autofocus && A(() => {
77
- s.value[0]?.focus();
78
- });
96
+ J(() => {
97
+ e.autofocus && W(() => {
98
+ i.value[0]?.focus();
99
+ }), e.allowResend && T();
100
+ }), $(() => {
101
+ f && clearInterval(f);
79
102
  });
80
- const I = m(() => t.mask ? "password" : t.type === "number" ? "tel" : "text"), j = m(() => {
81
- if (!t.mask)
82
- return t.type === "number" ? "numeric" : void 0;
83
- }), x = m(() => {
84
- const l = t.attached ? "-space-x-px" : "gap-2", e = t.fluid ? "w-full" : "";
85
- return ["flex items-center", l, e].filter(Boolean).join(" ");
86
- }), z = (l) => {
87
- const e = "text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground", a = t.fluid ? {
103
+ const E = x(() => e.mask ? "password" : e.type === "number" ? "tel" : "text"), M = x(() => {
104
+ if (!e.mask)
105
+ return e.type === "number" ? "numeric" : void 0;
106
+ }), L = x(() => [
107
+ "flex flex-col gap-2",
108
+ e.fluid ? "w-full" : "w-fit"
109
+ ].filter(Boolean).join(" ")), P = x(() => {
110
+ const n = e.attached ? "-space-x-px" : "gap-2", t = e.fluid ? "w-full" : "";
111
+ return ["flex items-center", n, t].filter(Boolean).join(" ");
112
+ }), F = (n) => {
113
+ const t = "text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground", o = e.fluid ? {
88
114
  sm: "flex-1 min-w-0 h-8 text-sm",
89
115
  md: "flex-1 min-w-0 h-10 text-lg",
90
116
  lg: "flex-1 min-w-0 h-12 text-xl"
@@ -92,36 +118,55 @@ const K = ["value", "type", "inputmode", "disabled", "placeholder", "onInput", "
92
118
  sm: "w-8 h-8 text-sm",
93
119
  md: "w-10 h-10 text-lg",
94
120
  lg: "w-12 h-12 text-xl"
95
- }, n = {
121
+ }, a = {
96
122
  solid: "bg-muted border border-transparent focus:border-primary focus:ring-2 focus:ring-primary",
97
123
  outline: "border border-input focus:border-primary focus:ring-2 focus:ring-primary",
98
124
  ghost: "bg-transparent border border-transparent hover:bg-accent focus:border-primary focus:ring-2 focus:ring-primary"
99
- }, o = t.error ? "border-destructive focus:ring-destructive text-destructive" : "";
125
+ }, l = e.error ? "border-destructive focus:ring-destructive text-destructive" : "";
100
126
  let u = "rounded-md";
101
- return t.attached && (l === 0 ? u = "rounded-l-md rounded-r-none" : l === t.length - 1 ? u = "rounded-r-md rounded-l-none" : u = "rounded-none"), [e, a[t.size], n[t.variant], o, u].join(" ");
127
+ return e.attached && (n === 0 ? u = "rounded-l-md rounded-r-none" : n === e.length - 1 ? u = "rounded-r-md rounded-l-none" : u = "rounded-none"), [t, o[e.size], a[e.variant], l, u].join(" ");
102
128
  };
103
- return (l, e) => (g(), h("div", {
104
- class: y(x.value)
129
+ return (n, t) => (d(), c("div", {
130
+ class: D(L.value)
105
131
  }, [
106
- (g(!0), h(E, null, F(t.length, (a, n) => (g(), h("input", {
107
- key: n,
108
- ref_for: !0,
109
- ref: (o) => B(o, n),
110
- value: r.value[n],
111
- type: I.value,
112
- inputmode: j.value,
113
- maxlength: 1,
114
- disabled: d.disabled,
115
- placeholder: d.placeholder,
116
- class: y(z(n)),
117
- onInput: (o) => w(o, n),
118
- onKeydown: (o) => D(o, n),
119
- onPaste: k,
120
- onFocus: e[0] || (e[0] = (o) => l.$emit("update:modelValue", r.value.join("")))
121
- }, null, 42, K))), 128))
132
+ k("div", {
133
+ class: D(P.value)
134
+ }, [
135
+ (d(!0), c(I, null, O(e.length, (o, a) => (d(), c("input", {
136
+ key: a,
137
+ ref_for: !0,
138
+ ref: (l) => z(l, a),
139
+ value: r.value[a],
140
+ type: E.value,
141
+ inputmode: M.value,
142
+ maxlength: 1,
143
+ disabled: s.disabled,
144
+ placeholder: s.placeholder,
145
+ class: D(F(a)),
146
+ onInput: (l) => V(l, a),
147
+ onKeydown: (l) => j(l, a),
148
+ onPaste: A,
149
+ onFocus: t[0] || (t[0] = (l) => n.$emit("update:modelValue", r.value.join("")))
150
+ }, null, 42, U))), 128))
151
+ ], 2),
152
+ s.allowResend ? (d(), c("div", q, [
153
+ g.value < s.maxResends ? (d(), c(I, { key: 0 }, [
154
+ v.value > 0 ? (d(), c("span", G, [
155
+ B(m(s.resendText) + " " + m(s.resendWaitText) + " ", 1),
156
+ k("span", H, m(v.value) + "s", 1)
157
+ ])) : (d(), c("span", Q, [
158
+ B(m(s.resendText) + " ", 1),
159
+ k("button", {
160
+ type: "button",
161
+ onClick: C,
162
+ class: "font-medium text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary rounded px-1 transition-colors"
163
+ }, m(s.resendActionText), 1)
164
+ ]))
165
+ ], 64)) : (d(), c("span", X, m(s.resendLimitText), 1))
166
+ ])) : S("", !0)
122
167
  ], 2));
123
168
  }
124
169
  });
125
170
  export {
126
- T as default
171
+ Z as default
127
172
  };