ablok-components 0.3.99 → 0.3.102

package/dist/components/atoms/base-input/base-input.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as k, useTemplateRef as N, ref as p, computed as d, watch as B, onMounted as w, openBlock as s, createElementBlock as m, normalizeClass as v, createElementVNode as y, renderSlot as f, withDirectives as $, mergeProps as L, vModelDynamic as q, createCommentVNode as b, createVNode as z, Transition as E, withCtx as M, toDisplayString as C } from "vue";
-import { sanitizeInput as D, uniqueId as g } from "../../../utilities/helpers.js";
-import { sanitizeHtml as H } from "../../../composables/useSanitize.js";
-const T = { class: "input-group input__input-group" }, I = ["type", "id", "name", "placeholder", "pattern", "disabled", "readonly", "required", "maxlength", "true-value", "false-value", "aria-label", "role", "autocomplete"], O = ["for", "innerHTML"], A = {
+import { defineComponent as N, useTemplateRef as B, ref as p, computed as d, watch as w, onMounted as $, openBlock as s, createElementBlock as m, normalizeClass as v, createElementVNode as y, renderSlot as f, withDirectives as L, mergeProps as q, vModelDynamic as z, createCommentVNode as b, createVNode as E, Transition as M, withCtx as C, toDisplayString as D } from "vue";
+import { sanitizeInput as H, uniqueId as g } from "../../../utilities/helpers.js";
+import { sanitizeHtml as T } from "../../../composables/useSanitize.js";
+const I = { class: "input-group input__input-group" }, O = ["type", "id", "name", "placeholder", "pattern", "disabled", "readonly", "required", "maxlength", "true-value", "false-value", "aria-label", "role", "autocomplete"], A = ["for", "innerHTML"], P = {
   key: 0,
   class: "input__error alert alert-danger mt-3"
-}, j = /* @__PURE__ */ k({
+}, F = /* @__PURE__ */ N({
   __name: "base-input",
   props: {
     modelValue: {
@@ -91,16 +91,16 @@ const T = { class: "input-group input__input-group" }, I = ["type", "id", "name"
   },
   emits: ["update:modelValue", "update:valid"],
   setup(e, { emit: h }) {
-    const l = e, c = h, n = N("input"), i = p(l.valid), u = p(), x = d(
-      () => H(`${l.label}${l.required ? " *" : ""}`)
+    const l = e, c = h, i = B("input"), n = p(l.valid), u = p(), V = d(
+      () => T(`${l.label}${l.required ? " *" : ""}`)
     ), o = d({
       get() {
         return l.modelValue;
       },
       set(t) {
-        t = l.type === "number" ? l.max && Number(t) > l.max ? l.max : l.min !== void 0 && Number(t) < l.min ? l.min : Number(t) : t, l.sanitize && typeof t == "string" && !["checkbox", "radio", "number", "date", "datetime-local", "time", "month", "week", "email", "tel", "url"].includes(l.type) && (t = D(t)), c("update:modelValue", t);
+        t = l.type === "number" ? l.max && Number(t) > l.max ? l.max : l.min !== void 0 && Number(t) < l.min ? l.min : Number(t) : t, l.sanitize && typeof t == "string" && !["checkbox", "radio", "number", "date", "datetime-local", "time", "month", "week", "email", "tel", "url"].includes(l.type) && (t = H(t)), c("update:modelValue", t);
       }
-    }), S = d(() => {
+    }), x = d(() => {
       if (l.type === "number") {
         const { min: t, max: a } = l;
         return {
@@ -110,29 +110,32 @@ const T = { class: "input-group input__input-group" }, I = ["type", "id", "name"
       }
       return {};
     });
-    function r() {
-      l.validate && n.value && (i.value = n.value.checkValidity(), i.value ? u.value = void 0 : u.value = n.value.validationMessage, c("update:valid", i.value));
+    function S() {
+      r();
     }
-    return B(() => l.modelValue, () => {
-      i.value === !1 && r();
-    }), w(() => {
+    function r({ checkValidity: t = !0 } = {}) {
+      l.validate && i.value && (t ? n.value = i.value.checkValidity() : n.value = !0, n.value ? u.value = void 0 : u.value = i.value.validationMessage, c("update:valid", n.value));
+    }
+    return w(() => l.modelValue, () => {
+      n.value === !1 && r();
+    }), $(() => {
       let t = (a) => {
         o.value = typeof a.detail == "string" || typeof a.detail == "number" ? `${a.detail}` : "";
       };
-      n.value?.addEventListener("focusin", (a) => {
+      i.value?.addEventListener("focusin", (a) => {
         window.addEventListener("update-focussed-input", t);
-      }), n.value?.addEventListener("focusout", (a) => {
+      }), i.value?.addEventListener("focusout", (a) => {
         window.removeEventListener("update-focussed-input", t);
-      }), r();
+      }), r({ checkValidity: !1 });
     }), (t, a) => (s(), m("div", {
-      class: v(["input", `input--${e.type}${i.value ? "" : " input--invalid"}`])
+      class: v(["input", `input--${e.type}${n.value ? "" : " input--invalid"}`])
     }, [
-      y("div", T, [
+      y("div", I, [
         f(t.$slots, "input-prepend", { slotScope: "props" }),
-        $(y("input", L({
+        L(y("input", q({
           ref_key: "input",
-          ref: n,
-          "onUpdate:modelValue": a[0] || (a[0] = (V) => o.value = V),
+          ref: i,
+          "onUpdate:modelValue": a[0] || (a[0] = (k) => o.value = k),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -142,7 +145,7 @@ const T = { class: "input-group input__input-group" }, I = ["type", "id", "name"
           readonly: e.readOnly,
           required: e.required,
           maxlength: e.maxlength
-        }, S.value, {
+        }, x.value, {
           "true-value": e.trueValue,
           "false-value": e.falseValue,
           class: ["form-control", {
@@ -151,9 +154,9 @@ const T = { class: "input-group input__input-group" }, I = ["type", "id", "name"
           "aria-label": e.label,
           role: e.role,
           autocomplete: e.autocomplete,
-          onChange: r
-        }), null, 16, I), [
-          [q, o.value]
+          onChange: S
+        }), null, 16, O), [
+          [z, o.value]
         ]),
         f(t.$slots, "input-append", { slotScope: "props" })
       ]),
@@ -164,12 +167,12 @@ const T = { class: "input-group input__input-group" }, I = ["type", "id", "name"
           class: v(["input__label", {
             "form-check-label": e.type === "checkbox"
           }]),
-          innerHTML: x.value
-        }, null, 10, O)) : b("", !0)
+          innerHTML: V.value
+        }, null, 10, A)) : b("", !0)
       ]),
-      z(E, { name: "fade" }, {
-        default: M(() => [
-          !i.value && u.value ? (s(), m("div", A, C(u.value), 1)) : b("", !0)
+      E(M, { name: "fade" }, {
+        default: C(() => [
+          !n.value && u.value ? (s(), m("div", P, D(u.value), 1)) : b("", !0)
         ]),
         _: 1
       })
@@ -177,5 +180,5 @@ const T = { class: "input-group input__input-group" }, I = ["type", "id", "name"
   }
 });
 export {
-  j as default
+  F as default
 };

package/dist/components/templates/touch-wrapper/touch-wrapper.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as g, getCurrentInstance as h, ref as y, onMounted as E, openBlock as $, createElementBlock as C, renderSlot as c, createElementVNode as s, createVNode as u, unref as p } from "vue";
-import i from "../../atoms/svg-icon/svg-icon.vue.js";
+import { defineComponent as b, ref as v, onMounted as y, openBlock as E, createElementBlock as g, renderSlot as c, createElementVNode as s, createVNode as u } from "vue";
+import a from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-const _ = { class: "touch-wrapper__controls" }, k = {
+const _ = { class: "touch-wrapper__controls" }, h = {
   class: "btn-group",
   role: "group"
-}, N = /* @__PURE__ */ g({
+}, C = /* @__PURE__ */ b({
   __name: "touch-wrapper",
   props: {
     modelValue: {
@@ -13,65 +13,56 @@ const _ = { class: "touch-wrapper__controls" }, k = {
     }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: m }) {
-    const a = h()?.appContext?.config?.globalProperties?.$config || { iconSprite: "/symbol-defs.svg" }, f = d, b = m, n = y();
-    function o(t) {
-      const e = f.modelValue + t;
-      b("update:modelValue", t === 0 ? 1 : e >= 1 ? e : 1);
+  setup(i, { emit: d }) {
+    const m = i, p = d, o = v();
+    function n(t) {
+      const e = m.modelValue + t;
+      p("update:modelValue", t === 0 ? 1 : e >= 1 ? e : 1);
     }
-    function v(t) {
+    function f(t) {
       if (t.ctrlKey) {
         t.preventDefault();
         const e = 0 - t.deltaY * 0.01;
-        o(e);
+        n(e);
       }
     }
     function r(t) {
       t.preventDefault();
       const { scale: e } = t, l = e > 1 ? e * 0.01 : 0 - e;
-      o(l);
+      n(l);
     }
-    return E(() => {
-      n.value && (n.value.addEventListener("wheel", v, !1), n.value.addEventListener("gesturestart", r, !1), n.value.addEventListener("gesturechange", r, !1), n.value.addEventListener("gestureend", r, !1));
-    }), (t, e) => ($(), C("div", {
+    return y(() => {
+      o.value && (o.value.addEventListener("wheel", f, !1), o.value.addEventListener("gesturestart", r, !1), o.value.addEventListener("gesturechange", r, !1), o.value.addEventListener("gestureend", r, !1));
+    }), (t, e) => (E(), g("div", {
       ref_key: "touchElement",
-      ref: n,
+      ref: o,
       class: "touch-wrapper"
     }, [
       c(t.$slots, "controls", {
-        on: { setScale: o }
+        on: { setScale: n }
       }, () => [
         s("div", _, [
-          s("div", k, [
+          s("div", h, [
             s("button", {
               type: "button",
               class: "btn",
-              onClick: e[0] || (e[0] = (l) => o(-1))
+              onClick: e[0] || (e[0] = (l) => n(-1))
             }, [
-              u(i, {
-                symbol: "minus",
-                "base-path": p(a).iconSprite
-              }, null, 8, ["base-path"])
+              u(a, { symbol: "minus" })
             ]),
             s("button", {
               type: "button",
               class: "btn",
-              onClick: e[1] || (e[1] = (l) => o(0))
+              onClick: e[1] || (e[1] = (l) => n(0))
             }, [
-              u(i, {
-                symbol: "maximize",
-                "base-path": p(a).iconSprite
-              }, null, 8, ["base-path"])
+              u(a, { symbol: "maximize" })
             ]),
             s("button", {
               type: "button",
               class: "btn",
-              onClick: e[2] || (e[2] = (l) => o(1))
+              onClick: e[2] || (e[2] = (l) => n(1))
             }, [
-              u(i, {
-                symbol: "plus",
-                "base-path": p(a).iconSprite
-              }, null, 8, ["base-path"])
+              u(a, { symbol: "plus" })
             ])
           ])
         ])
@@ -81,5 +72,5 @@ const _ = { class: "touch-wrapper__controls" }, k = {
   }
 });
 export {
-  N as default
+  C as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.99",
+  "version": "0.3.102",
   "dependencies": {
     "date-fns": "^3.0.0",
     "dompurify": "^3.3.1",