@sokchea/vue-form-khmer 1.0.39 → 1.0.41

package/dist/index.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-500:oklch(58.5% .233 277.117);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.font-khmer{font-family:Kantumruy Pro,Hanuman,sans-serif}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.block{display:block}.flex{display:flex}.h-5{height:calc(var(--spacing) * 5)}.w-5{width:calc(var(--spacing) * 5)}.w-full{width:100%}.items-center{align-items:center}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-red-500{border-color:var(--color-red-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-white{background-color:var(--color-white)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-gray-700{color:var(--color-gray-700)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.grid{display:grid}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/vue-form-khmer.es.js

@@ -1,16 +1,14 @@
-import { openBlock as r, createElementBlock as l, createTextVNode as c, toDisplayString as u, createCommentVNode as n, createElementVNode as i, normalizeClass as f } from "vue";
-const m = (o, t) => {
-  const e = o.__vccOpts || o;
-  for (const [a, s] of t)
-    e[a] = s;
-  return e;
-}, p = {
-  name: "VfkInput",
+import { openBlock as b, createElementBlock as _, createElementVNode as x, createTextVNode as W, toDisplayString as R, createCommentVNode as S, normalizeClass as F, withDirectives as D, watch as j, ref as q } from "vue";
+const T = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [s, a] of e)
+    t[s] = a;
+  return t;
+}, L = {
+  components: {
+    // ExclamationCircleIcon
+  },
   props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
     label: {
       type: String,
       default: ""
@@ -19,58 +17,308 @@ const m = (o, t) => {
       type: String,
       default: "text"
     },
+    modelValue: {
+      type: String,
+      default: ""
+    },
     placeholder: {
       type: String,
       default: ""
     },
-    required: {
-      type: Boolean,
-      default: !1
+    errors: {
+      type: String,
+      default: ""
     },
-    error: {
+    required: {
       type: String,
       default: ""
     }
   },
-  emits: ["update:modelValue"]
-}, _ = { class: "flex flex-col" }, y = {
-  key: 0,
-  class: "mb-1 font-semibold text-gray-700"
-}, g = {
+  data() {
+    return {
+      emits: ["update:modelValue"]
+    };
+  },
+  methods: {
+    handleInput(n) {
+      const e = n.target.value;
+      this.$emit("update:modelValue", e);
+    }
+  }
+}, K = { class: "p-1 w-full" }, U = { class: "mt-1 pb-1 block text-sm" }, z = {
   key: 0,
   class: "text-red-500"
-}, b = ["type", "value", "placeholder"], h = {
-  key: 1,
-  class: "text-red-500 text-sm mt-1"
+}, $ = { class: "relative" }, B = {
+  key: 0,
+  class: "absolute inset-y-0 right-2 flex items-center pl-3"
+}, J = ["type", "value", "placeholder"], Z = {
+  key: 0,
+  class: "text-red-500 text-sm"
+};
+function H(n, e, t, s, a, r) {
+  return b(), _("div", K, [
+    x("label", U, [
+      W(R(t.label) + " ", 1),
+      t.required ? (b(), _("span", z, "*")) : S("", !0)
+    ]),
+    x("div", $, [
+      t.errors ? (b(), _("span", B)) : S("", !0),
+      x("input", {
+        type: t.type,
+        value: t.modelValue,
+        onInput: e[0] || (e[0] = (...l) => r.handleInput && r.handleInput(...l)),
+        placeholder: t.placeholder,
+        class: F(["w-full text-sm px-2 py-2 border border-gray-400 rounded-md", { "border-red-500": t.errors }])
+      }, null, 42, J)
+    ]),
+    t.errors ? (b(), _("p", Z, R(t.errors), 1)) : S("", !0)
+  ]);
+}
+const G = /* @__PURE__ */ T(L, [["render", H], ["__file", "/Users/sokchea/Documents/Study/vue-form-khmer/src/components/TextInput.vue"]]);
+var Q = Object.defineProperty, X = (n, e, t) => e in n ? Q(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, w = (n, e, t) => X(n, typeof e != "symbol" ? e + "" : e, t);
+const N = {
+  "#": { pattern: /[0-9]/ },
+  "@": { pattern: /[a-zA-Z]/ },
+  "*": { pattern: /[a-zA-Z0-9]/ }
+}, V = (n, e, t) => n.replaceAll(e, "").replace(t, ".").replace("..", ".").replace(/[^.\d]/g, ""), P = (n, e, t) => {
+  var s;
+  return new Intl.NumberFormat(((s = t.number) == null ? void 0 : s.locale) ?? "en", {
+    minimumFractionDigits: n,
+    maximumFractionDigits: e,
+    roundingMode: "trunc"
+  });
+}, Y = (n, e = !0, t) => {
+  var s, a, r, l;
+  const u = ((s = t.number) == null ? void 0 : s.unsigned) !== !0 && n.startsWith("-") ? "-" : "", c = ((a = t.number) == null ? void 0 : a.fraction) ?? 0;
+  let i = P(0, c, t);
+  const f = i.formatToParts(1000.12), h = ((r = f.find((o) => o.type === "group")) == null ? void 0 : r.value) ?? " ", k = ((l = f.find((o) => o.type === "decimal")) == null ? void 0 : l.value) ?? ".", d = V(n, h, k);
+  if (Number.isNaN(parseFloat(d))) return u;
+  const v = d.split(".");
+  if (v[1] != null && v[1].length >= 1) {
+    const o = v[1].length <= c ? v[1].length : c;
+    i = P(o, c, t);
+  }
+  let m = i.format(parseFloat(d));
+  return e ? c > 0 && d.endsWith(".") && !d.slice(0, -1).includes(".") && (m += k) : m = V(m, h, k), u + m;
+}, C = (n) => JSON.parse(n.replaceAll("'", '"')), ee = (n, e = {}) => {
+  const t = { ...e };
+  n.dataset.maska != null && n.dataset.maska !== "" && (t.mask = te(n.dataset.maska)), n.dataset.maskaEager != null && (t.eager = E(n.dataset.maskaEager)), n.dataset.maskaReversed != null && (t.reversed = E(n.dataset.maskaReversed)), n.dataset.maskaTokensReplace != null && (t.tokensReplace = E(n.dataset.maskaTokensReplace)), n.dataset.maskaTokens != null && (t.tokens = se(n.dataset.maskaTokens));
+  const s = {};
+  return n.dataset.maskaNumberLocale != null && (s.locale = n.dataset.maskaNumberLocale), n.dataset.maskaNumberFraction != null && (s.fraction = parseInt(n.dataset.maskaNumberFraction)), n.dataset.maskaNumberUnsigned != null && (s.unsigned = E(n.dataset.maskaNumberUnsigned)), (n.dataset.maskaNumber != null || Object.values(s).length > 0) && (t.number = s), t;
+}, E = (n) => n !== "" ? !!JSON.parse(n) : !0, te = (n) => n.startsWith("[") && n.endsWith("]") ? C(n) : n, se = (n) => {
+  if (n.startsWith("{") && n.endsWith("}"))
+    return C(n);
+  const e = {};
+  return n.split("|").forEach((t) => {
+    const s = t.split(":");
+    e[s[0]] = {
+      pattern: O() ? new RegExp(s[1], "u") : new RegExp(s[1]),
+      optional: s[2] === "optional",
+      multiple: s[2] === "multiple",
+      repeated: s[2] === "repeated"
+    };
+  }), e;
+}, O = () => {
+  try {
+    return new RegExp("\\p{L}", "u"), !0;
+  } catch {
+    return !1;
+  }
 };
-function k(o, t, e, a, s, v) {
-  return r(), l("div", _, [
-    e.label ? (r(), l("label", y, [
-      c(u(e.label) + " ", 1),
-      e.required ? (r(), l("span", g, "*")) : n("", !0)
-    ])) : n("", !0),
-    i("input", {
-      type: e.type,
-      value: e.modelValue,
-      placeholder: e.placeholder,
-      class: f([
-        "border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500",
-        e.error ? "border-red-500" : "border-gray-300"
-      ]),
-      onInput: t[0] || (t[0] = (d) => o.$emit("update:modelValue", d.target.value))
-    }, null, 42, b),
-    e.error ? (r(), l("p", h, u(e.error), 1)) : n("", !0)
+class ne {
+  constructor(e = {}) {
+    w(this, "opts", {}), w(this, "memo", /* @__PURE__ */ new Map());
+    const t = { ...e };
+    if (t.tokens != null) {
+      t.tokens = t.tokensReplace ? { ...t.tokens } : { ...N, ...t.tokens };
+      for (const s of Object.values(t.tokens))
+        typeof s.pattern == "string" && (s.pattern = O() ? new RegExp(s.pattern, "u") : new RegExp(s.pattern));
+    } else
+      t.tokens = N;
+    Array.isArray(t.mask) && (t.mask.length > 1 ? t.mask = [...t.mask].sort((s, a) => s.length - a.length) : t.mask = t.mask[0] ?? ""), t.mask === "" && (t.mask = null), this.opts = t;
+  }
+  masked(e) {
+    return this.process(String(e), this.findMask(String(e)));
+  }
+  unmasked(e) {
+    return this.process(String(e), this.findMask(String(e)), !1);
+  }
+  isEager() {
+    return this.opts.eager === !0;
+  }
+  isReversed() {
+    return this.opts.reversed === !0;
+  }
+  completed(e) {
+    const t = this.findMask(String(e));
+    if (this.opts.mask == null || t == null) return !1;
+    const s = this.process(String(e), t).length;
+    return typeof this.opts.mask == "string" ? s >= this.opts.mask.length : s >= t.length;
+  }
+  findMask(e) {
+    const t = this.opts.mask;
+    if (t == null)
+      return null;
+    if (typeof t == "string")
+      return t;
+    if (typeof t == "function")
+      return t(e);
+    const s = this.process(e, t.slice(-1).pop() ?? "", !1);
+    return t.find((a) => this.process(e, a, !1).length >= s.length) ?? "";
+  }
+  escapeMask(e) {
+    const t = [], s = [];
+    return e.split("").forEach((a, r) => {
+      a === "!" && e[r - 1] !== "!" ? s.push(r - s.length) : t.push(a);
+    }), { mask: t.join(""), escaped: s };
+  }
+  process(e, t, s = !0) {
+    if (this.opts.number != null) return Y(e, s, this.opts);
+    if (t == null) return e;
+    const a = `v=${e},mr=${t},m=${s ? 1 : 0}`;
+    if (this.memo.has(a)) return this.memo.get(a);
+    const { mask: r, escaped: l } = this.escapeMask(t), u = [], c = this.opts.tokens != null ? this.opts.tokens : {}, i = this.isReversed() ? -1 : 1, f = this.isReversed() ? "unshift" : "push", h = this.isReversed() ? 0 : r.length - 1, k = this.isReversed() ? () => o > -1 && p > -1 : () => o < r.length && p < e.length, d = (y) => !this.isReversed() && y <= h || this.isReversed() && y >= h;
+    let v, m = -1, o = this.isReversed() ? r.length - 1 : 0, p = this.isReversed() ? e.length - 1 : 0, M = !1;
+    for (; k(); ) {
+      const y = r.charAt(o), g = c[y], A = g?.transform != null ? g.transform(e.charAt(p)) : e.charAt(p);
+      if (!l.includes(o) && g != null ? (A.match(g.pattern) != null ? (u[f](A), g.repeated ? (m === -1 ? m = o : o === h && o !== m && (o = m - i), h === m && (o -= i)) : g.multiple && (M = !0, o -= i), o += i) : g.multiple ? M && (o += i, p -= i, M = !1) : A === v ? v = void 0 : g.optional && (o += i, p -= i), p += i) : (s && !this.isEager() && u[f](y), A === y && !this.isEager() ? p += i : v = y, this.isEager() || (o += i)), this.isEager())
+        for (; d(o) && (c[r.charAt(o)] == null || l.includes(o)); ) {
+          if (s) {
+            if (u[f](r.charAt(o)), e.charAt(p) === r.charAt(o)) {
+              o += i, p += i;
+              continue;
+            }
+          } else r.charAt(o) === e.charAt(p) && (p += i);
+          o += i;
+        }
+    }
+    return this.memo.set(a, u.join("")), this.memo.get(a);
+  }
+}
+class ae {
+  constructor(e, t = {}) {
+    w(this, "items", /* @__PURE__ */ new Map()), w(this, "eventAbortController"), w(this, "onInput", (s) => {
+      if (s instanceof CustomEvent && s.type === "input" && !s.isTrusted && !s.bubbles)
+        return;
+      const a = s.target, r = this.items.get(a);
+      if (r === void 0) return;
+      const l = "inputType" in s && s.inputType.startsWith("delete"), u = r.isEager(), c = l && u && r.unmasked(a.value) === "" ? "" : a.value;
+      this.fixCursor(a, l, () => this.setValue(a, c));
+    }), this.options = t, this.eventAbortController = new AbortController(), this.init(this.getInputs(e));
+  }
+  update(e = {}) {
+    this.options = { ...e }, this.init(Array.from(this.items.keys()));
+  }
+  updateValue(e) {
+    var t;
+    e.value !== "" && e.value !== ((t = this.processInput(e)) == null ? void 0 : t.masked) && this.setValue(e, e.value);
+  }
+  destroy() {
+    this.eventAbortController.abort(), this.items.clear();
+  }
+  init(e) {
+    const t = this.getOptions(this.options);
+    for (const s of e) {
+      if (!this.items.has(s)) {
+        const { signal: r } = this.eventAbortController;
+        s.addEventListener("input", this.onInput, { capture: !0, signal: r });
+      }
+      const a = new ne(ee(s, t));
+      this.items.set(s, a), queueMicrotask(() => this.updateValue(s)), s.selectionStart === null && a.isEager() && console.warn("Maska: input of `%s` type is not supported", s.type);
+    }
+  }
+  getInputs(e) {
+    return typeof e == "string" ? Array.from(document.querySelectorAll(e)) : "length" in e ? Array.from(e) : [e];
+  }
+  getOptions(e) {
+    const { onMaska: t, preProcess: s, postProcess: a, ...r } = e;
+    return r;
+  }
+  fixCursor(e, t, s) {
+    var a, r;
+    const l = e.selectionStart, u = e.value;
+    if (s(), l === null || l === u.length && !t) return;
+    const c = e.value, i = u.slice(0, l), f = c.slice(0, l), h = (a = this.processInput(e, i)) == null ? void 0 : a.unmasked, k = (r = this.processInput(e, f)) == null ? void 0 : r.unmasked;
+    if (h === void 0 || k === void 0) return;
+    let d = l;
+    i !== f && (d += t ? c.length - u.length : h.length - k.length), e.setSelectionRange(d, d);
+  }
+  setValue(e, t) {
+    const s = this.processInput(e, t);
+    s !== void 0 && (e.value = s.masked, this.options.onMaska != null && (Array.isArray(this.options.onMaska) ? this.options.onMaska.forEach((a) => a(s)) : this.options.onMaska(s)), e.dispatchEvent(new CustomEvent("maska", { detail: s })), e.dispatchEvent(new CustomEvent("input", { detail: s.masked })));
+  }
+  processInput(e, t) {
+    const s = this.items.get(e);
+    if (s === void 0) return;
+    let a = t ?? e.value;
+    this.options.preProcess != null && (a = this.options.preProcess(a));
+    let r = s.masked(a);
+    return this.options.postProcess != null && (r = this.options.postProcess(r)), {
+      masked: r,
+      unmasked: s.unmasked(a),
+      completed: s.completed(a)
+    };
+  }
+}
+const I = /* @__PURE__ */ new WeakMap(), re = (n, e) => {
+  if (n.arg == null || n.instance == null) return;
+  const t = "setup" in n.instance.$.type;
+  n.arg in n.instance ? n.instance[n.arg] = e : t && console.warn("Maska: please expose `%s` using defineExpose", n.arg);
+}, oe = (n, e) => {
+  var t;
+  const s = n instanceof HTMLInputElement ? n : n.querySelector("input");
+  if (s == null || s?.type === "file") return;
+  let a = {};
+  if (e.value != null && (a = typeof e.value == "string" ? { mask: e.value } : { ...e.value }), e.arg != null) {
+    const r = (l) => {
+      const u = e.modifiers.unmasked ? l.unmasked : e.modifiers.completed ? l.completed : l.masked;
+      re(e, u);
+    };
+    a.onMaska = a.onMaska == null ? r : Array.isArray(a.onMaska) ? [...a.onMaska, r] : [a.onMaska, r];
+  }
+  I.has(s) ? (t = I.get(s)) == null || t.update(a) : I.set(s, new ae(s, a));
+}, le = {
+  __name: "PhoneInput",
+  props: {
+    modelValue: String,
+    label: { type: String, default: "Phone Number" }
+  },
+  emits: ["update:modelValue"],
+  setup(n, { expose: e, emit: t }) {
+    e();
+    const l = { props: n, emit: t, handleKeydown: (u) => {
+      u.key.length > 1 || /[0-9\+\(\)\-\s]/.test(u.key) || u.preventDefault();
+    }, ref: q, watch: j, get vMaska() {
+      return oe;
+    } };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+}, ie = { class: "p-4 bg-white shadow rounded-lg border border-gray-200" }, ue = { class: "block text-sm font-bold text-gray-700 mb-1" }, ce = ["value"];
+function pe(n, e, t, s, a, r) {
+  return b(), _("div", ie, [
+    x("label", ue, R(t.label), 1),
+    D(x("input", {
+      value: t.modelValue,
+      type: "tel",
+      "data-maska": "### ###-####",
+      placeholder: "012 345-6789",
+      class: "w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all",
+      onKeydown: s.handleKeydown
+    }, null, 40, ce), [
+      [s.vMaska]
+    ])
   ]);
 }
-const x = /* @__PURE__ */ m(p, [["render", k], ["__scopeId", "data-v-6bfa3c29"], ["__file", "/Users/sokchea/Documents/Study/vue-form-khmer/src/components/Input.vue"]]), V = [x], I = {
-  install(o) {
-    V.forEach((t) => {
-      const e = t.name || t.__name || "VfkInput";
-      o.component(e, t);
+const de = /* @__PURE__ */ T(le, [["render", pe], ["__file", "/Users/sokchea/Documents/Study/vue-form-khmer/src/components/PhoneInput.vue"]]), he = [G, de], fe = {
+  install(n) {
+    he.forEach((e) => {
+      const t = e.name || e.__name || "TextInput";
+      n.component(t, e);
     });
   }
 };
 export {
-  x as VfkInput,
-  I as default
+  de as PhoneInput,
+  G as TextInput,
+  fe as default
 };

package/dist/vue-form-khmer.umd.js

@@ -1 +1,2 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VueFormKhmer={},o.Vue))})(this,(function(o,e){"use strict";const d=(l,n)=>{const t=l.__vccOpts||l;for(const[a,c]of n)t[a]=c;return t},s={name:"VfkInput",props:{modelValue:{type:[String,Number],default:""},label:{type:String,default:""},type:{type:String,default:"text"},placeholder:{type:String,default:""},required:{type:Boolean,default:!1},error:{type:String,default:""}},emits:["update:modelValue"]},i={class:"flex flex-col"},u={key:0,class:"mb-1 font-semibold text-gray-700"},f={key:0,class:"text-red-500"},m=["type","value","placeholder"],p={key:1,class:"text-red-500 text-sm mt-1"};function _(l,n,t,a,c,h){return e.openBlock(),e.createElementBlock("div",i,[t.label?(e.openBlock(),e.createElementBlock("label",u,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",f,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{type:t.type,value:t.modelValue,placeholder:t.placeholder,class:e.normalizeClass(["border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500",t.error?"border-red-500":"border-gray-300"]),onInput:n[0]||(n[0]=g=>l.$emit("update:modelValue",g.target.value))},null,42,m),t.error?(e.openBlock(),e.createElementBlock("p",p,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0)])}const r=d(s,[["render",_],["__scopeId","data-v-6bfa3c29"],["__file","/Users/sokchea/Documents/Study/vue-form-khmer/src/components/Input.vue"]]),y=[r],k={install(l){y.forEach(n=>{const t=n.name||n.__name||"VfkInput";l.component(t,n)})}};o.VfkInput=r,o.default=k,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(f,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(f=typeof globalThis<"u"?globalThis:f||self,n(f.VueFormKhmer={},f.Vue))})(this,(function(f,n){"use strict";var A=document.createElement("style");A.textContent=`@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-500:oklch(58.5% .233 277.117);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.font-khmer{font-family:Kantumruy Pro,Hanuman,sans-serif}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.block{display:block}.flex{display:flex}.h-5{height:calc(var(--spacing) * 5)}.w-5{width:calc(var(--spacing) * 5)}.w-full{width:100%}.items-center{align-items:center}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-red-500{border-color:var(--color-red-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-white{background-color:var(--color-white)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-gray-700{color:var(--color-gray-700)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\\:bg-blue-700:hover{background-color:var(--color-blue-700)}}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.grid{display:grid}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+/*$vite$:1*/`,document.head.appendChild(A);const I=(a,e)=>{const t=a.__vccOpts||a;for(const[r,i]of e)t[r]=i;return t},j={components:{},props:{label:{type:String,default:""},type:{type:String,default:"text"},modelValue:{type:String,default:""},placeholder:{type:String,default:""},errors:{type:String,default:""},required:{type:String,default:""}},data(){return{emits:["update:modelValue"]}},methods:{handleInput(a){const e=a.target.value;this.$emit("update:modelValue",e)}}},F={class:"p-1 w-full"},O={class:"mt-1 pb-1 block text-sm"},B={key:0,class:"text-red-500"},D={class:"relative"},W={key:0,class:"absolute inset-y-0 right-2 flex items-center pl-3"},U=["type","value","placeholder"],L={key:0,class:"text-red-500 text-sm"};function q(a,e,t,r,i,o){return n.openBlock(),n.createElementBlock("div",F,[n.createElementVNode("label",O,[n.createTextVNode(n.toDisplayString(t.label)+" ",1),t.required?(n.openBlock(),n.createElementBlock("span",B,"*")):n.createCommentVNode("",!0)]),n.createElementVNode("div",D,[t.errors?(n.openBlock(),n.createElementBlock("span",W)):n.createCommentVNode("",!0),n.createElementVNode("input",{type:t.type,value:t.modelValue,onInput:e[0]||(e[0]=(...l)=>o.handleInput&&o.handleInput(...l)),placeholder:t.placeholder,class:n.normalizeClass(["w-full text-sm px-2 py-2 border border-gray-400 rounded-md",{"border-red-500":t.errors}])},null,42,U)]),t.errors?(n.openBlock(),n.createElementBlock("p",L,n.toDisplayString(t.errors),1)):n.createCommentVNode("",!0)])}const N=I(j,[["render",q],["__file","/Users/sokchea/Documents/Study/vue-form-khmer/src/components/TextInput.vue"]]);var K=Object.defineProperty,$=(a,e,t)=>e in a?K(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t,x=(a,e,t)=>$(a,typeof e!="symbol"?e+"":e,t);const C={"#":{pattern:/[0-9]/},"@":{pattern:/[a-zA-Z]/},"*":{pattern:/[a-zA-Z0-9]/}},R=(a,e,t)=>a.replaceAll(e,"").replace(t,".").replace("..",".").replace(/[^.\d]/g,""),V=(a,e,t)=>{var r;return new Intl.NumberFormat(((r=t.number)==null?void 0:r.locale)??"en",{minimumFractionDigits:a,maximumFractionDigits:e,roundingMode:"trunc"})},H=(a,e=!0,t)=>{var r,i,o,l;const c=((r=t.number)==null?void 0:r.unsigned)!==!0&&a.startsWith("-")?"-":"",p=((i=t.number)==null?void 0:i.fraction)??0;let d=V(0,p,t);const b=d.formatToParts(1000.12),h=((o=b.find(s=>s.type==="group"))==null?void 0:o.value)??" ",k=((l=b.find(s=>s.type==="decimal"))==null?void 0:l.value)??".",m=R(a,h,k);if(Number.isNaN(parseFloat(m)))return c;const v=m.split(".");if(v[1]!=null&&v[1].length>=1){const s=v[1].length<=p?v[1].length:p;d=V(s,p,t)}let g=d.format(parseFloat(m));return e?p>0&&m.endsWith(".")&&!m.slice(0,-1).includes(".")&&(g+=k):g=R(g,h,k),c+g},z=a=>JSON.parse(a.replaceAll("'",'"')),J=(a,e={})=>{const t={...e};a.dataset.maska!=null&&a.dataset.maska!==""&&(t.mask=Z(a.dataset.maska)),a.dataset.maskaEager!=null&&(t.eager=_(a.dataset.maskaEager)),a.dataset.maskaReversed!=null&&(t.reversed=_(a.dataset.maskaReversed)),a.dataset.maskaTokensReplace!=null&&(t.tokensReplace=_(a.dataset.maskaTokensReplace)),a.dataset.maskaTokens!=null&&(t.tokens=G(a.dataset.maskaTokens));const r={};return a.dataset.maskaNumberLocale!=null&&(r.locale=a.dataset.maskaNumberLocale),a.dataset.maskaNumberFraction!=null&&(r.fraction=parseInt(a.dataset.maskaNumberFraction)),a.dataset.maskaNumberUnsigned!=null&&(r.unsigned=_(a.dataset.maskaNumberUnsigned)),(a.dataset.maskaNumber!=null||Object.values(r).length>0)&&(t.number=r),t},_=a=>a!==""?!!JSON.parse(a):!0,Z=a=>a.startsWith("[")&&a.endsWith("]")?z(a):a,G=a=>{if(a.startsWith("{")&&a.endsWith("}"))return z(a);const e={};return a.split("|").forEach(t=>{const r=t.split(":");e[r[0]]={pattern:T()?new RegExp(r[1],"u"):new RegExp(r[1]),optional:r[2]==="optional",multiple:r[2]==="multiple",repeated:r[2]==="repeated"}}),e},T=()=>{try{return new RegExp("\\p{L}","u"),!0}catch{return!1}};class Q{constructor(e={}){x(this,"opts",{}),x(this,"memo",new Map);const t={...e};if(t.tokens!=null){t.tokens=t.tokensReplace?{...t.tokens}:{...C,...t.tokens};for(const r of Object.values(t.tokens))typeof r.pattern=="string"&&(r.pattern=T()?new RegExp(r.pattern,"u"):new RegExp(r.pattern))}else t.tokens=C;Array.isArray(t.mask)&&(t.mask.length>1?t.mask=[...t.mask].sort((r,i)=>r.length-i.length):t.mask=t.mask[0]??""),t.mask===""&&(t.mask=null),this.opts=t}masked(e){return this.process(String(e),this.findMask(String(e)))}unmasked(e){return this.process(String(e),this.findMask(String(e)),!1)}isEager(){return this.opts.eager===!0}isReversed(){return this.opts.reversed===!0}completed(e){const t=this.findMask(String(e));if(this.opts.mask==null||t==null)return!1;const r=this.process(String(e),t).length;return typeof this.opts.mask=="string"?r>=this.opts.mask.length:r>=t.length}findMask(e){const t=this.opts.mask;if(t==null)return null;if(typeof t=="string")return t;if(typeof t=="function")return t(e);const r=this.process(e,t.slice(-1).pop()??"",!1);return t.find(i=>this.process(e,i,!1).length>=r.length)??""}escapeMask(e){const t=[],r=[];return e.split("").forEach((i,o)=>{i==="!"&&e[o-1]!=="!"?r.push(o-r.length):t.push(i)}),{mask:t.join(""),escaped:r}}process(e,t,r=!0){if(this.opts.number!=null)return H(e,r,this.opts);if(t==null)return e;const i=`v=${e},mr=${t},m=${r?1:0}`;if(this.memo.has(i))return this.memo.get(i);const{mask:o,escaped:l}=this.escapeMask(t),c=[],p=this.opts.tokens!=null?this.opts.tokens:{},d=this.isReversed()?-1:1,b=this.isReversed()?"unshift":"push",h=this.isReversed()?0:o.length-1,k=this.isReversed()?()=>s>-1&&u>-1:()=>s<o.length&&u<e.length,m=y=>!this.isReversed()&&y<=h||this.isReversed()&&y>=h;let v,g=-1,s=this.isReversed()?o.length-1:0,u=this.isReversed()?e.length-1:0,M=!1;for(;k();){const y=o.charAt(s),w=p[y],E=w?.transform!=null?w.transform(e.charAt(u)):e.charAt(u);if(!l.includes(s)&&w!=null?(E.match(w.pattern)!=null?(c[b](E),w.repeated?(g===-1?g=s:s===h&&s!==g&&(s=g-d),h===g&&(s-=d)):w.multiple&&(M=!0,s-=d),s+=d):w.multiple?M&&(s+=d,u-=d,M=!1):E===v?v=void 0:w.optional&&(s+=d,u-=d),u+=d):(r&&!this.isEager()&&c[b](y),E===y&&!this.isEager()?u+=d:v=y,this.isEager()||(s+=d)),this.isEager())for(;m(s)&&(p[o.charAt(s)]==null||l.includes(s));){if(r){if(c[b](o.charAt(s)),e.charAt(u)===o.charAt(s)){s+=d,u+=d;continue}}else o.charAt(s)===e.charAt(u)&&(u+=d);s+=d}}return this.memo.set(i,c.join("")),this.memo.get(i)}}class X{constructor(e,t={}){x(this,"items",new Map),x(this,"eventAbortController"),x(this,"onInput",r=>{if(r instanceof CustomEvent&&r.type==="input"&&!r.isTrusted&&!r.bubbles)return;const i=r.target,o=this.items.get(i);if(o===void 0)return;const l="inputType"in r&&r.inputType.startsWith("delete"),c=o.isEager(),p=l&&c&&o.unmasked(i.value)===""?"":i.value;this.fixCursor(i,l,()=>this.setValue(i,p))}),this.options=t,this.eventAbortController=new AbortController,this.init(this.getInputs(e))}update(e={}){this.options={...e},this.init(Array.from(this.items.keys()))}updateValue(e){var t;e.value!==""&&e.value!==((t=this.processInput(e))==null?void 0:t.masked)&&this.setValue(e,e.value)}destroy(){this.eventAbortController.abort(),this.items.clear()}init(e){const t=this.getOptions(this.options);for(const r of e){if(!this.items.has(r)){const{signal:o}=this.eventAbortController;r.addEventListener("input",this.onInput,{capture:!0,signal:o})}const i=new Q(J(r,t));this.items.set(r,i),queueMicrotask(()=>this.updateValue(r)),r.selectionStart===null&&i.isEager()&&console.warn("Maska: input of `%s` type is not supported",r.type)}}getInputs(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)):"length"in e?Array.from(e):[e]}getOptions(e){const{onMaska:t,preProcess:r,postProcess:i,...o}=e;return o}fixCursor(e,t,r){var i,o;const l=e.selectionStart,c=e.value;if(r(),l===null||l===c.length&&!t)return;const p=e.value,d=c.slice(0,l),b=p.slice(0,l),h=(i=this.processInput(e,d))==null?void 0:i.unmasked,k=(o=this.processInput(e,b))==null?void 0:o.unmasked;if(h===void 0||k===void 0)return;let m=l;d!==b&&(m+=t?p.length-c.length:h.length-k.length),e.setSelectionRange(m,m)}setValue(e,t){const r=this.processInput(e,t);r!==void 0&&(e.value=r.masked,this.options.onMaska!=null&&(Array.isArray(this.options.onMaska)?this.options.onMaska.forEach(i=>i(r)):this.options.onMaska(r)),e.dispatchEvent(new CustomEvent("maska",{detail:r})),e.dispatchEvent(new CustomEvent("input",{detail:r.masked})))}processInput(e,t){const r=this.items.get(e);if(r===void 0)return;let i=t??e.value;this.options.preProcess!=null&&(i=this.options.preProcess(i));let o=r.masked(i);return this.options.postProcess!=null&&(o=this.options.postProcess(o)),{masked:o,unmasked:r.unmasked(i),completed:r.completed(i)}}}const S=new WeakMap,Y=(a,e)=>{if(a.arg==null||a.instance==null)return;const t="setup"in a.instance.$.type;a.arg in a.instance?a.instance[a.arg]=e:t&&console.warn("Maska: please expose `%s` using defineExpose",a.arg)},ee=(a,e)=>{var t;const r=a instanceof HTMLInputElement?a:a.querySelector("input");if(r==null||r?.type==="file")return;let i={};if(e.value!=null&&(i=typeof e.value=="string"?{mask:e.value}:{...e.value}),e.arg!=null){const o=l=>{const c=e.modifiers.unmasked?l.unmasked:e.modifiers.completed?l.completed:l.masked;Y(e,c)};i.onMaska=i.onMaska==null?o:Array.isArray(i.onMaska)?[...i.onMaska,o]:[i.onMaska,o]}S.has(r)?(t=S.get(r))==null||t.update(i):S.set(r,new X(r,i))},te={__name:"PhoneInput",props:{modelValue:String,label:{type:String,default:"Phone Number"}},emits:["update:modelValue"],setup(a,{expose:e,emit:t}){e();const l={props:a,emit:t,handleKeydown:c=>{c.key.length>1||/[0-9\+\(\)\-\s]/.test(c.key)||c.preventDefault()},ref:n.ref,watch:n.watch,get vMaska(){return ee}};return Object.defineProperty(l,"__isScriptSetup",{enumerable:!1,value:!0}),l}},re={class:"p-4 bg-white shadow rounded-lg border border-gray-200"},ae={class:"block text-sm font-bold text-gray-700 mb-1"},ie=["value"];function oe(a,e,t,r,i,o){return n.openBlock(),n.createElementBlock("div",re,[n.createElementVNode("label",ae,n.toDisplayString(t.label),1),n.withDirectives(n.createElementVNode("input",{value:t.modelValue,type:"tel","data-maska":"### ###-####",placeholder:"012 345-6789",class:"w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all",onKeydown:r.handleKeydown},null,40,ie),[[r.vMaska]])])}const P=I(te,[["render",oe],["__file","/Users/sokchea/Documents/Study/vue-form-khmer/src/components/PhoneInput.vue"]]),ne=[N,P],se={install(a){ne.forEach(e=>{const t=e.name||e.__name||"TextInput";a.component(t,e)})}};f.PhoneInput=P,f.TextInput=N,f.default=se,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sokchea/vue-form-khmer",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Vue 3 Form Components with Khmer validation support",
   "type": "module",
   "main": "dist/vue-form-khmer.umd.js",
@@ -10,7 +10,11 @@
       "import": "./dist/vue-form-khmer.es.js",
       "require": "./dist/vue-form-khmer.umd.js"
     },
-    "./style": "./dist/vue-form-khmer.css"
+    "./style": {
+      "import": "./dist/vue-form-khmer.css",
+      "require": "./dist/vue-form-khmer.css",
+      "default": "./dist/vue-form-khmer.css"
+    }
   },
   "files": [
     "dist"
@@ -21,7 +25,8 @@
     "preview": "vite preview"
   },
   "peerDependencies": {
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "maska": "^3.0.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.2",

package/dist/vue-form-khmer.css

@@ -1 +0,0 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.font-khmer{font-family:Kantumruy Pro,Hanuman,sans-serif}}@layer components;@layer utilities{.mt-1{margin-top:calc(var(--spacing) * 1)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.flex{display:flex}.flex-col{flex-direction:column}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.border-red-500{border-color:var(--color-red-500)}.bg-blue-600{background-color:var(--color-blue-600)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-gray-700{color:var(--color-gray-700)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}input[data-v-6bfa3c29]:focus{transition:all .2s ease-in-out}