@stonecrop/aform 0.2.22 → 0.2.24

package/dist/aform.js

@@ -1,7 +1,7 @@
-import { defineComponent as A, mergeModels as $, useModel as x, openBlock as v, createElementBlock as g, createElementVNode as c, withDirectives as M, vModelCheckbox as de, toDisplayString as E, vShow as I, resolveComponent as pe, createBlock as K, withCtx as fe, ref as m, onMounted as Y, onUnmounted as me, normalizeClass as q, withKeys as P, vModelText as G, Fragment as F, renderList as R, watch as O, onBeforeUnmount as ve, computed as H, unref as re, getCurrentScope as he, onScopeDispose as ye, nextTick as ge, withModifiers as be, resolveDynamicComponent as ke, mergeProps as _e, createTextVNode as we, createCommentVNode as De, renderSlot as Me, createVNode as Ee } from "vue";
-const Ae = { id: "checkbox-container" }, Ce = ["id", "readonly", "required"], Te = { id: "custom-checkbox" }, Ve = ["for"], Le = ["innerHTML"], Se = /* @__PURE__ */ A({
+import { defineComponent as E, mergeModels as S, useModel as $, openBlock as v, createElementBlock as g, createElementVNode as c, toDisplayString as A, withDirectives as M, vModelCheckbox as de, vShow as x, resolveComponent as fe, createBlock as K, withCtx as pe, ref as m, onMounted as Y, onUnmounted as me, normalizeClass as P, withKeys as B, vModelText as G, Fragment as q, renderList as F, watch as U, onBeforeUnmount as ve, computed as H, unref as re, getCurrentScope as he, onScopeDispose as ye, nextTick as ge, withModifiers as _e, resolveDynamicComponent as be, mergeProps as ke, createTextVNode as we, createCommentVNode as De, renderSlot as Me, createVNode as Ee } from "vue";
+const Ae = { class: "aform__form-element" }, Ce = ["for"], Te = { class: "aform__checkbox-container aform__input-field" }, Ve = ["id", "readonly", "required"], Le = ["innerHTML"], Se = /* @__PURE__ */ E({
   __name: "ACheckbox",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ S({
     label: {},
     required: { type: Boolean },
     readOnly: { type: Boolean },
@@ -13,62 +13,57 @@ const Ae = { id: "checkbox-container" }, Ce = ["id", "readonly", "required"], Te
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue");
-    return (n, o) => (v(), g("div", null, [
-      c("label", Ae, [
+    const t = $(e, "modelValue");
+    return (n, o) => (v(), g("div", Ae, [
+      c("label", {
+        class: "aform__field-label",
+        for: n.uuid
+      }, A(n.label), 9, Ce),
+      c("span", Te, [
         M(c("input", {
           "onUpdate:modelValue": o[0] || (o[0] = (l) => t.value = l),
           type: "checkbox",
           id: n.uuid,
-          class: "checkbox",
+          class: "aform__checkbox",
           readonly: n.readOnly,
           required: n.required
-        }, null, 8, Ce), [
+        }, null, 8, Ve), [
           [de, t.value]
-        ]),
-        c("span", Te, E(t.value), 1)
+        ])
       ]),
-      c("label", {
-        for: n.uuid,
-        id: "checkbox-label"
-      }, E(n.label), 9, Ve),
       M(c("p", {
+        class: "error",
         innerHTML: n.validation.errorMessage
       }, null, 8, Le), [
-        [I, n.validation.errorMessage]
+        [x, n.validation.errorMessage]
       ])
     ]));
   }
-}), S = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [o, l] of t)
-    n[o] = l;
-  return n;
-}, $e = /* @__PURE__ */ S(Se, [["__scopeId", "data-v-5093f1cb"]]), xe = /* @__PURE__ */ c("div", null, [
+}), $e = /* @__PURE__ */ c("div", null, [
   /* @__PURE__ */ c("input", { type: "text" }),
   /* @__PURE__ */ c("input", { type: "text" }),
   /* @__PURE__ */ c("input", { type: "text" })
-], -1), Ie = /* @__PURE__ */ A({
+], -1), xe = /* @__PURE__ */ E({
   __name: "AComboBox",
   props: ["event", "cellData", "tableID"],
   setup(e) {
     return (t, n) => {
-      const o = pe("ATableModal");
+      const o = fe("ATableModal");
       return v(), K(o, {
         event: e.event,
         cellData: e.cellData,
         class: "amodal"
       }, {
-        default: fe(() => [
-          xe
+        default: pe(() => [
+          $e
         ]),
         _: 1
       }, 8, ["event", "cellData"]);
     };
   }
-}), He = ["id", "disabled", "required", "value"], Be = ["for"], Pe = ["innerHTML"], qe = /* @__PURE__ */ A({
+}), He = ["id", "disabled", "required", "value"], Ie = ["for"], Be = ["innerHTML"], Pe = /* @__PURE__ */ E({
   __name: "ADate",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ S({
     label: { default: "Date" },
     required: { type: Boolean },
     readonly: { type: Boolean },
@@ -80,7 +75,7 @@ const Ae = { id: "checkbox-container" }, Ce = ["id", "readonly", "required"], Te
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue"), n = m(null), o = () => {
+    const t = $(e, "modelValue"), n = m(null), o = () => {
       n.value && "showPicker" in HTMLInputElement.prototype && n.value.showPicker();
     };
     return (l, r) => (v(), g("div", null, [
@@ -94,23 +89,28 @@ const Ae = { id: "checkbox-container" }, Ce = ["id", "readonly", "required"], Te
         value: t.value,
         onClick: o
       }, null, 8, He),
-      c("label", { for: l.uuid }, E(l.label), 9, Be),
+      c("label", { for: l.uuid }, A(l.label), 9, Ie),
       M(c("p", {
         innerHTML: l.validation.errorMessage
-      }, null, 8, Pe), [
-        [I, l.validation.errorMessage]
+      }, null, 8, Be), [
+        [x, l.validation.errorMessage]
       ])
     ]));
   }
-}), Fe = /* @__PURE__ */ S(qe, [["__scopeId", "data-v-69d0f23d"]]), Re = { class: "input-wrapper" }, Ue = {
+}), O = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [o, l] of t)
+    n[o] = l;
+  return n;
+}, qe = /* @__PURE__ */ O(Pe, [["__scopeId", "data-v-69d0f23d"]]), Fe = { class: "input-wrapper" }, Re = {
   id: "autocomplete-results",
   class: "autocomplete-results"
-}, Oe = {
+}, Ue = {
   key: 0,
   class: "loading autocomplete-result"
-}, We = ["onClick"], Ke = /* @__PURE__ */ A({
+}, Oe = ["onClick"], We = /* @__PURE__ */ E({
   __name: "ADropdown",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ S({
     label: {},
     items: {},
     isAsync: { type: Boolean }
@@ -118,104 +118,104 @@ const Ae = { id: "checkbox-container" }, Ce = ["id", "readonly", "required"], Te
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["filterChanged"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ S(["filterChanged"], ["update:modelValue"]),
   setup(e, { emit: t }) {
-    const n = e, o = t, l = m(n.items), r = x(e, "modelValue"), s = m(!1), a = m(0), i = m(!1), u = m(null);
+    const n = e, o = t, l = m(n.items), r = $(e, "modelValue"), s = m(!1), a = m(0), i = m(!1), u = m(null);
     Y(() => {
-      document.addEventListener("click", b), f();
+      document.addEventListener("click", _), p();
     }), me(() => {
-      document.removeEventListener("click", b);
+      document.removeEventListener("click", _);
     });
-    const d = (p) => {
-      r.value = p, k();
-    }, f = () => {
-      r.value ? l.value = n.items.filter((p) => p.toLowerCase().indexOf(r.value.toLowerCase()) > -1) : l.value = n.items;
+    const d = (f) => {
+      r.value = f, b();
+    }, p = () => {
+      r.value ? l.value = n.items.filter((f) => f.toLowerCase().indexOf(r.value.toLowerCase()) > -1) : l.value = n.items;
     }, h = () => {
-      i.value = !0, n.isAsync ? (s.value = !0, o("filterChanged", r.value)) : f();
-    }, b = (p) => {
-      k(), a.value = 0;
-    }, k = () => {
+      i.value = !0, n.isAsync ? (s.value = !0, o("filterChanged", r.value)) : p();
+    }, _ = (f) => {
+      b(), a.value = 0;
+    }, b = () => {
       i.value = !1, n.items.includes(r.value) || (r.value = "");
     }, V = () => {
       a.value < l.value.length && (a.value = a.value + 1);
     }, w = () => {
       a.value > 0 && (a.value = a.value - 1);
     }, L = () => {
-      r.value = l.value[a.value], k(), a.value = 0;
+      r.value = l.value[a.value], b(), a.value = 0;
     };
-    return (p, y) => (v(), g("div", {
-      class: q(["autocomplete", { isOpen: i.value }])
+    return (f, y) => (v(), g("div", {
+      class: P(["autocomplete", { isOpen: i.value }])
     }, [
-      c("div", Re, [
+      c("div", Fe, [
         M(c("input", {
           ref_key: "mopInput",
           ref: u,
           type: "text",
           onInput: h,
           onFocus: h,
-          "onUpdate:modelValue": y[0] || (y[0] = (_) => r.value = _),
+          "onUpdate:modelValue": y[0] || (y[0] = (k) => r.value = k),
           onKeydown: [
-            P(V, ["down"]),
-            P(w, ["up"]),
-            P(L, ["enter"])
+            B(V, ["down"]),
+            B(w, ["up"]),
+            B(L, ["enter"])
           ]
         }, null, 544), [
           [G, r.value]
         ]),
-        M(c("ul", Ue, [
-          s.value ? (v(), g("li", Oe, "Loading results...")) : (v(!0), g(F, { key: 1 }, R(l.value, (_, D) => (v(), g("li", {
+        M(c("ul", Re, [
+          s.value ? (v(), g("li", Ue, "Loading results...")) : (v(!0), g(q, { key: 1 }, F(l.value, (k, D) => (v(), g("li", {
             key: D,
-            onClick: (X) => d(_),
-            class: q(["autocomplete-result", { "is-active": D === a.value }])
-          }, E(_), 11, We))), 128))
+            onClick: (X) => d(k),
+            class: P(["autocomplete-result", { "is-active": D === a.value }])
+          }, A(k), 11, Oe))), 128))
         ], 512), [
-          [I, i.value]
+          [x, i.value]
         ]),
-        c("label", null, E(p.label), 1)
+        c("label", null, A(f.label), 1)
       ])
     ], 2));
   }
 });
-function Ye(e) {
+function Ke(e) {
   return he() ? (ye(e), !0) : !1;
 }
 function ue(e) {
   return typeof e == "function" ? e() : re(e);
 }
-const Ge = typeof window < "u" && typeof document < "u";
+const Ye = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const ze = Object.prototype.toString, je = (e) => ze.call(e) === "[object Object]", Je = () => {
+const Ge = Object.prototype.toString, ze = (e) => Ge.call(e) === "[object Object]", je = () => {
 };
-function U(e) {
+function R(e) {
   var t;
   const n = ue(e);
   return (t = n == null ? void 0 : n.$el) != null ? t : n;
 }
-const z = Ge ? window : void 0;
+const z = Ye ? window : void 0;
 function W(...e) {
   let t, n, o, l;
   if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, o, l] = e, t = z) : [t, n, o, l] = e, !t)
-    return Je;
+    return je;
   Array.isArray(n) || (n = [n]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((d) => d()), r.length = 0;
-  }, a = (d, f, h, b) => (d.addEventListener(f, h, b), () => d.removeEventListener(f, h, b)), i = O(
-    () => [U(t), ue(l)],
-    ([d, f]) => {
+  }, a = (d, p, h, _) => (d.addEventListener(p, h, _), () => d.removeEventListener(p, h, _)), i = U(
+    () => [R(t), ue(l)],
+    ([d, p]) => {
       if (s(), !d)
         return;
-      const h = je(f) ? { ...f } : f;
+      const h = ze(p) ? { ...p } : p;
       r.push(
-        ...n.flatMap((b) => o.map((k) => a(d, b, k, h)))
+        ...n.flatMap((_) => o.map((b) => a(d, _, b, h)))
       );
     },
     { immediate: !0, flush: "post" }
   ), u = () => {
     i(), s();
   };
-  return Ye(u), u;
+  return Ke(u), u;
 }
-function Ne(e = {}) {
+function Je(e = {}) {
   var t;
   const {
     window: n = z,
@@ -234,15 +234,15 @@ function Ne(e = {}) {
     i.relatedTarget === null && a();
   }, !0), W(n, "focus", a, !0)), a(), s;
 }
-function Qe(e, t = {}) {
-  const n = Ne(t), o = H(() => U(e));
+function Ne(e, t = {}) {
+  const n = Je(t), o = H(() => R(e));
   return { focused: H(() => o.value && n.value ? o.value.contains(n.value) : !1) };
 }
-function Xe(e, { window: t = z, scrollTarget: n } = {}) {
+function Qe(e, { window: t = z, scrollTarget: n } = {}) {
   const o = m(!1), l = () => {
     if (!t)
       return;
-    const r = t.document, s = U(e);
+    const r = t.document, s = R(e);
     if (!s)
       o.value = !1;
     else {
@@ -250,8 +250,8 @@ function Xe(e, { window: t = z, scrollTarget: n } = {}) {
       o.value = a.top <= (t.innerHeight || r.documentElement.clientHeight) && a.left <= (t.innerWidth || r.documentElement.clientWidth) && a.bottom >= 0 && a.right >= 0;
     }
   };
-  return O(
-    () => U(e),
+  return U(
+    () => R(e),
     () => l(),
     { immediate: !0, flush: "post" }
   ), t && W(n || t, "scroll", l, {
@@ -260,7 +260,7 @@ function Xe(e, { window: t = z, scrollTarget: n } = {}) {
   }), o;
 }
 const C = (e) => {
-  let t = Xe(e).value;
+  let t = Qe(e).value;
   return t = t && e.offsetHeight > 0, t;
 }, T = (e) => e.tabIndex >= 0, Z = (e) => {
   const t = e.target;
@@ -279,7 +279,7 @@ const C = (e) => {
     o && (n = o);
   }
   return n && (!T(n) || !C(n)) ? j(n) : n;
-}, Ze = (e) => {
+}, Xe = (e) => {
   var t;
   const n = e.target;
   let o;
@@ -314,7 +314,7 @@ const C = (e) => {
     o && (n = o);
   }
   return n && (!T(n) || !C(n)) ? J(n) : n;
-}, et = (e) => {
+}, Ze = (e) => {
   var t;
   const n = e.target;
   let o;
@@ -364,7 +364,7 @@ const C = (e) => {
 }, le = (e) => {
   const t = e.target.parentElement.lastElementChild;
   return t && (!T(t) || !C(t)) ? N(t) : t;
-}, B = ["alt", "control", "shift", "meta"], tt = {
+}, I = ["alt", "control", "shift", "meta"], et = {
   ArrowUp: "up",
   ArrowDown: "down",
   ArrowLeft: "left",
@@ -387,11 +387,11 @@ const C = (e) => {
     e.preventDefault(), e.stopPropagation(), t && t.focus();
   },
   "keydown.control.up": (e) => {
-    const t = Ze(e);
+    const t = Xe(e);
     t && (e.preventDefault(), e.stopPropagation(), t.focus());
   },
   "keydown.control.down": (e) => {
-    const t = et(e);
+    const t = Ze(e);
     t && (e.preventDefault(), e.stopPropagation(), t.focus());
   },
   "keydown.control.left": (e) => {
@@ -433,7 +433,7 @@ const C = (e) => {
     t && (e.preventDefault(), e.stopPropagation(), t.focus());
   }
 };
-function nt(e) {
+function tt(e) {
   const t = (s) => {
     let a = null;
     return s.parent && (typeof s.parent == "string" ? a = document.querySelector(s.parent) : s.parent instanceof HTMLElement ? a = s.parent : a = s.parent.value), a;
@@ -458,38 +458,38 @@ function nt(e) {
     let i = [];
     return s.selectors ? i = n(s) : a && (i = Array.from(a.children).filter((u) => T(u) && C(u))), i;
   }, l = (s) => (a) => {
-    const i = tt[a.key] || a.key.toLowerCase();
-    if (B.includes(i))
+    const i = et[a.key] || a.key.toLowerCase();
+    if (I.includes(i))
       return;
     const u = s.handlers || ie;
     for (const d of Object.keys(u)) {
-      const [f, ...h] = d.split(".");
-      if (f === "keydown" && h.includes(i)) {
-        const b = u[d], k = h.filter((w) => B.includes(w)), V = B.some((w) => {
+      const [p, ...h] = d.split(".");
+      if (p === "keydown" && h.includes(i)) {
+        const _ = u[d], b = h.filter((w) => I.includes(w)), V = I.some((w) => {
           const L = w.charAt(0).toUpperCase() + w.slice(1);
           return a.getModifierState(L);
         });
-        if (k.length > 0) {
+        if (b.length > 0) {
           if (V) {
-            for (const w of B)
+            for (const w of I)
               if (h.includes(w)) {
                 const L = w.charAt(0).toUpperCase() + w.slice(1);
-                a.getModifierState(L) && b(a);
+                a.getModifierState(L) && _(a);
               }
           }
         } else
-          V || b(a);
+          V || _(a);
       }
     }
   }, r = [];
   Y(() => {
     for (const s of e) {
       const a = t(s), i = o(s), u = l(s), d = a ? [a] : i;
-      for (const f of d) {
-        const { focused: h } = Qe(m(f)), b = O(h, (k) => {
-          k ? f.addEventListener("keydown", u) : f.removeEventListener("keydown", u);
+      for (const p of d) {
+        const { focused: h } = Ne(m(p)), _ = U(h, (b) => {
+          b ? p.addEventListener("keydown", u) : p.removeEventListener("keydown", u);
         });
-        r.push(b);
+        r.push(_);
       }
     }
   }), ve(() => {
@@ -497,10 +497,10 @@ function nt(e) {
       s();
   });
 }
-const ot = {
+const nt = {
   colspan: "5",
   tabindex: -1
-}, lt = /* @__PURE__ */ c("tr", { class: "days-header" }, [
+}, ot = /* @__PURE__ */ c("tr", { class: "days-header" }, [
   /* @__PURE__ */ c("td", null, "M"),
   /* @__PURE__ */ c("td", null, "T"),
   /* @__PURE__ */ c("td", null, "W"),
@@ -508,7 +508,7 @@ const ot = {
   /* @__PURE__ */ c("td", null, "F"),
   /* @__PURE__ */ c("td", null, "S"),
   /* @__PURE__ */ c("td", null, "S")
-], -1), at = ["onClick", "onKeydown"], st = 6, ae = 7, rt = /* @__PURE__ */ A({
+], -1), lt = ["onClick", "onKeydown"], at = 6, ae = 7, st = /* @__PURE__ */ E({
   __name: "ADatePicker",
   props: {
     modelValue: { default: /* @__PURE__ */ new Date() },
@@ -516,12 +516,12 @@ const ot = {
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue"), n = m(new Date(t.value)), o = m(n.value.getMonth()), l = m(n.value.getFullYear()), r = m([]), s = m(null);
+    const t = $(e, "modelValue"), n = m(new Date(t.value)), o = m(n.value.getMonth()), l = m(n.value.getFullYear()), r = m([]), s = m(null);
     Y(async () => {
       a(), await ge();
-      const p = document.getElementsByClassName("selectedDate");
-      if (p.length > 0)
-        p[0].focus();
+      const f = document.getElementsByClassName("selectedDate");
+      if (f.length > 0)
+        f[0].focus();
       else {
         const y = document.getElementsByClassName("todaysDate");
         y.length > 0 && y[0].focus();
@@ -529,26 +529,26 @@ const ot = {
     });
     const a = () => {
       r.value = [];
-      const p = new Date(l.value, o.value, 1), y = p.getDay(), _ = p.setDate(p.getDate() - y);
+      const f = new Date(l.value, o.value, 1), y = f.getDay(), k = f.setDate(f.getDate() - y);
       for (const D of Array(43).keys())
-        r.value.push(_ + D * 864e5);
+        r.value.push(k + D * 864e5);
     };
-    O([o, l], a);
+    U([o, l], a);
     const i = () => l.value -= 1, u = () => l.value += 1, d = () => {
       o.value == 0 ? (o.value = 11, i()) : o.value -= 1;
-    }, f = () => {
+    }, p = () => {
       o.value == 11 ? (o.value = 0, u()) : o.value += 1;
-    }, h = (p) => {
+    }, h = (f) => {
       const y = /* @__PURE__ */ new Date();
       if (o.value === y.getMonth())
-        return y.toDateString() === new Date(p).toDateString();
-    }, b = (p) => new Date(p).toDateString() === new Date(n.value).toDateString(), k = (p, y) => (p - 1) * ae + y, V = (p, y) => r.value[k(p, y)], w = (p) => {
-      t.value = n.value = new Date(r.value[p]);
+        return y.toDateString() === new Date(f).toDateString();
+    }, _ = (f) => new Date(f).toDateString() === new Date(n.value).toDateString(), b = (f, y) => (f - 1) * ae + y, V = (f, y) => r.value[b(f, y)], w = (f) => {
+      t.value = n.value = new Date(r.value[f]);
     }, L = H(() => new Date(l.value, o.value, 1).toLocaleDateString(void 0, {
       year: "numeric",
       month: "long"
     }));
-    return nt([
+    return tt([
       {
         parent: s,
         selectors: "td",
@@ -556,7 +556,7 @@ const ot = {
           ...ie,
           "keydown.pageup": d,
           "keydown.shift.pageup": i,
-          "keydown.pagedown": f,
+          "keydown.pagedown": p,
           "keydown.shift.pagedown": u,
           // TODO: this is a hack to override the stonecrop enter handler;
           // store context inside the component so that handlers can be setup consistently
@@ -565,7 +565,7 @@ const ot = {
           }
         }
       }
-    ]), (p, y) => (v(), g("div", {
+    ]), (f, y) => (v(), g("div", {
       class: "adatepicker",
       tabindex: "0",
       ref_key: "adatepicker",
@@ -578,44 +578,44 @@ const ot = {
             onClick: d,
             tabindex: -1
           }, "<"),
-          c("th", ot, E(L.value), 1),
+          c("th", nt, A(L.value), 1),
           c("td", {
             id: "next-month-btn",
-            onClick: f,
+            onClick: p,
             tabindex: -1
           }, ">")
         ]),
-        lt,
-        (v(), g(F, null, R(st, (_) => c("tr", { key: _ }, [
-          (v(), g(F, null, R(ae, (D) => c("td", {
+        ot,
+        (v(), g(q, null, F(at, (k) => c("tr", { key: k }, [
+          (v(), g(q, null, F(ae, (D) => c("td", {
             ref_for: !0,
             ref: "celldate",
-            key: k(_, D),
+            key: b(k, D),
             contenteditable: !1,
             spellcheck: !1,
             tabindex: 0,
-            onClick: be((X) => w(k(_, D)), ["prevent", "stop"]),
-            onKeydown: P((X) => w(k(_, D)), ["enter"]),
-            class: q({
-              todaysDate: h(V(_, D)),
-              selectedDate: b(V(_, D))
+            onClick: _e((X) => w(b(k, D)), ["prevent", "stop"]),
+            onKeydown: B((X) => w(b(k, D)), ["enter"]),
+            class: P({
+              todaysDate: h(V(k, D)),
+              selectedDate: _(V(k, D))
             })
-          }, E(new Date(V(_, D)).getDate()), 43, at)), 64))
+          }, A(new Date(V(k, D)).getDate()), 43, lt)), 64))
         ])), 64))
       ])
     ], 512));
   }
-}), ut = /* @__PURE__ */ A({
+}), rt = /* @__PURE__ */ E({
   __name: "CollapseButton",
   props: {
     collapsed: { type: Boolean }
   },
   setup(e) {
     return (t, n) => (v(), g("button", {
-      class: q(["collapse-button", t.collapsed ? "rotated" : "unrotated"])
+      class: P(["collapse-button", t.collapsed ? "rotated" : "unrotated"])
     }, "×", 2));
   }
-}), it = /* @__PURE__ */ S(ut, [["__scopeId", "data-v-6f1c1b45"]]), ct = /* @__PURE__ */ A({
+}), ut = /* @__PURE__ */ O(rt, [["__scopeId", "data-v-6f1c1b45"]]), it = { class: "aform" }, ct = /* @__PURE__ */ E({
   __name: "AForm",
   props: {
     modelValue: {},
@@ -641,18 +641,18 @@ const ot = {
       set: () => {
       }
     });
-    return (a, i) => (v(), g("form", null, [
-      (v(!0), g(F, null, R(a.modelValue, (u, d) => (v(), K(ke(u.component), _e({
+    return (a, i) => (v(), g("form", it, [
+      (v(!0), g(q, null, F(a.modelValue, (u, d) => (v(), K(be(u.component), ke({
         key: d,
         schema: u,
         modelValue: s.value[d].value,
-        "onUpdate:modelValue": (f) => s.value[d].value = f,
+        "onUpdate:modelValue": (p) => s.value[d].value = p,
         data: l.value[u.fieldname],
         readonly: a.readonly
       }, r(u)), null, 16, ["schema", "modelValue", "onUpdate:modelValue", "data", "readonly"]))), 128))
     ]));
   }
-}), ce = /* @__PURE__ */ S(ct, [["__scopeId", "data-v-74d66cf2"]]), dt = /* @__PURE__ */ A({
+}), ce = /* @__PURE__ */ O(ct, [["__scopeId", "data-v-88047a70"]]), dt = /* @__PURE__ */ E({
   __name: "AFieldset",
   props: {
     schema: {},
@@ -670,8 +670,8 @@ const ot = {
         onClick: s,
         onSubmit: s
       }, [
-        we(E(a.label) + " ", 1),
-        l.value ? (v(), K(it, {
+        we(A(a.label) + " ", 1),
+        l.value ? (v(), K(ut, {
           key: 0,
           collapsed: o.value
         }, null, 8, ["collapsed"])) : De("", !0)
@@ -682,14 +682,14 @@ const ot = {
           "onUpdate:modelValue": i[0] || (i[0] = (u) => r.value = u),
           data: n.value
         }, null, 8, ["modelValue", "data"]), [
-          [I, !o.value]
+          [x, !o.value]
         ])
       ], !0)
     ]));
   }
-}), pt = /* @__PURE__ */ S(dt, [["__scopeId", "data-v-0f671e32"]]), ft = ["id", "disabled", "required"], mt = ["for"], vt = ["innerHTML"], ht = /* @__PURE__ */ A({
+}), ft = /* @__PURE__ */ O(dt, [["__scopeId", "data-v-0f671e32"]]), pt = { class: "aform__form-element" }, mt = ["for"], vt = ["id", "disabled", "required"], ht = ["innerHTML"], yt = /* @__PURE__ */ E({
   __name: "ANumericInput",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ S({
     label: {},
     required: { type: Boolean },
     readonly: { type: Boolean },
@@ -701,26 +701,31 @@ const ot = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue");
-    return (n, o) => (v(), g("div", null, [
+    const t = $(e, "modelValue");
+    return (n, o) => (v(), g("div", pt, [
+      c("label", {
+        class: "aform__field-label",
+        for: n.uuid
+      }, A(n.label), 9, mt),
       M(c("input", {
+        class: "aform__input-field",
         "onUpdate:modelValue": o[0] || (o[0] = (l) => t.value = l),
         type: "number",
         id: n.uuid,
         disabled: n.readonly,
         required: n.required
-      }, null, 8, ft), [
+      }, null, 8, vt), [
         [G, t.value]
       ]),
-      c("label", { for: n.uuid }, E(n.label), 9, mt),
       M(c("p", {
+        class: "error",
         innerHTML: n.validation.errorMessage
-      }, null, 8, vt), [
-        [I, n.validation.errorMessage]
+      }, null, 8, ht), [
+        [x, n.validation.errorMessage]
       ])
     ]));
   }
-}), yt = /* @__PURE__ */ S(ht, [["__scopeId", "data-v-02907cd6"]]), se = {
+}), se = {
   date: "##/##/####",
   datetime: "####/##/## ##:##",
   time: "##:##",
@@ -734,7 +739,7 @@ function gt(e) {
   } catch {
   }
 }
-function bt(e) {
+function _t(e) {
   var n;
   let t = e.value;
   if (t) {
@@ -749,7 +754,7 @@ function bt(e) {
   }
   return t;
 }
-function kt(e, t) {
+function bt(e, t) {
   t || (t = "#");
   let n = e;
   const o = [t, "/", "-", "(", ")", " "];
@@ -757,7 +762,7 @@ function kt(e, t) {
     n = n.replaceAll(l, "");
   return n;
 }
-function _t(e, t, n) {
+function kt(e, t, n) {
   n || (n = "#");
   let o = t;
   for (const l of e) {
@@ -770,19 +775,19 @@ function _t(e, t, n) {
   return o.slice(0, t.length);
 }
 function wt(e, t) {
-  const n = bt(t);
+  const n = _t(t);
   if (!n)
     return;
-  const o = "#", l = e.value, r = kt(l, o);
+  const o = "#", l = e.value, r = bt(l, o);
   if (r) {
-    const s = _t(r, n, o);
+    const s = kt(r, n, o);
     t.instance.maskFilled && (t.instance.maskFilled = !s.includes(o)), e.value = s;
   } else
     e.value = n;
 }
-const Dt = ["id", "disabled", "maxlength", "required"], Mt = ["for"], Et = ["innerHTML"], At = /* @__PURE__ */ A({
+const Dt = { class: "aform__form-element" }, Mt = ["for"], Et = ["id", "disabled", "maxlength", "required"], At = ["innerHTML"], Ct = /* @__PURE__ */ E({
   __name: "ATextInput",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ S({
     schema: {},
     label: {},
     mask: {},
@@ -796,37 +801,42 @@ const Dt = ["id", "disabled", "maxlength", "required"], Mt = ["for"], Et = ["inn
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = m(!0), n = x(e, "modelValue");
-    return (o, l) => (v(), g("div", null, [
+    const t = m(!0), n = $(e, "modelValue");
+    return (o, l) => (v(), g("div", Dt, [
+      c("label", {
+        class: "aform__field-label",
+        for: o.uuid
+      }, A(o.label), 9, Mt),
       M(c("input", {
+        class: "aform__input-field",
         "onUpdate:modelValue": l[0] || (l[0] = (r) => n.value = r),
         id: o.uuid,
         disabled: o.readonly,
         maxlength: o.mask ? t.value && o.mask.length : void 0,
         required: o.required
-      }, null, 8, Dt), [
+      }, null, 8, Et), [
         [G, n.value],
         [re(wt), o.mask]
       ]),
-      c("label", { for: o.uuid }, E(o.label), 9, Mt),
       M(c("p", {
+        class: "error",
         innerHTML: o.validation.errorMessage
-      }, null, 8, Et), [
-        [I, o.validation.errorMessage]
+      }, null, 8, At), [
+        [x, o.validation.errorMessage]
       ])
     ]));
   }
-}), Ct = /* @__PURE__ */ S(At, [["__scopeId", "data-v-2514e692"]]);
+});
 function Vt(e) {
-  e.component("ACheckbox", $e), e.component("ACombobox", Ie), e.component("ADate", Fe), e.component("ADropdown", Ke), e.component("ADatePicker", rt), e.component("AFieldset", pt), e.component("AForm", ce), e.component("ANumericInput", yt), e.component("ATextInput", Ct);
+  e.component("ACheckbox", Se), e.component("ACombobox", xe), e.component("ADate", qe), e.component("ADropdown", We), e.component("ADatePicker", st), e.component("AFieldset", ft), e.component("AForm", ce), e.component("ANumericInput", yt), e.component("ATextInput", Ct);
 }
 export {
-  $e as ACheckbox,
-  Ie as AComboBox,
-  Fe as ADate,
-  rt as ADatePicker,
-  Ke as ADropdown,
-  pt as AFieldset,
+  Se as ACheckbox,
+  xe as AComboBox,
+  qe as ADate,
+  st as ADatePicker,
+  We as ADropdown,
+  ft as AFieldset,
   ce as AForm,
   yt as ANumericInput,
   Ct as ATextInput,