@wikicasa-dev/components 2.1.4-alpha.9 → 2.1.4

package/dist/packages/components/lib/UIKit/BaseSlider.vue.js

@@ -1,136 +1,207 @@
-import { defineComponent as E, mergeModels as T, useModel as p, ref as l, watch as g, createElementBlock as B, openBlock as L, createVNode as u, createElementVNode as U, unref as m, withCtx as w } from "vue";
-import { SliderRoot as z, SliderTrack as N, SliderRange as R, SliderThumb as y } from "reka-ui";
-import V from "./BaseInput.vue.js";
-import '../../../../assets/packages/components/lib/UIKit/BaseInput.css';/* empty css               */
-const j = { class: "uikit-mt-[20px] uikit-flex uikit-justify-between uikit-gap-x-sm" }, J = /* @__PURE__ */ E({
+import { defineComponent as _, mergeModels as j, useModel as D, ref as p, useTemplateRef as T, useAttrs as q, onMounted as G, createElementBlock as H, openBlock as J, createElementVNode as x, withModifiers as k, unref as h, createVNode as C } from "vue";
+import E from "../../../../UIKit/BaseInput.js";
+const K = { class: "range_container" }, O = { class: "sliders_control" }, Q = ["value", "min", "max", "step"], W = ["value", "min", "max", "step"], X = { class: "form_control row" }, Y = { class: "pb-15 pb-sm-0 col-sm-6 col-xl-4" }, Z = { class: "col-sm-6 col-xl-4" }, te = /* @__PURE__ */ _({
   __name: "BaseSlider",
-  props: /* @__PURE__ */ T({
+  props: /* @__PURE__ */ j({
     type: { default: "linear" },
     min: { default: 0 },
-    max: { default: 100 },
-    step: {},
-    dataCy: {}
+    max: { default: 100 }
   }, {
-    rangeMin: { default: 0 },
-    rangeMinModifiers: {},
-    rangeMax: { default: 100 },
-    rangeMaxModifiers: {}
+    minValue: { default: 0 },
+    minValueModifiers: {},
+    maxValue: { default: 0 },
+    maxValueModifiers: {}
   }),
-  emits: ["update:rangeMin", "update:rangeMax"],
-  setup(a) {
-    const C = (e) => e.minPos + (Math.log(e.value) - e.minlval) / e.scale, F = (e) => Math.exp(
+  emits: ["update:minValue", "update:maxValue"],
+  setup(m) {
+    function M(e, l) {
+      const a = parseInt(e.value, 10), t = parseInt(l.value, 10);
+      return [a, t];
+    }
+    const L = (e) => e.minPos + (Math.log(e.value) - e.minlval) / e.scale, z = (e) => Math.exp(
       (e.position - e.minPos) * e.scale + e.minlval
-    ), o = p(a, "rangeMin"), s = p(a, "rangeMax"), n = l(0), f = l(100), S = l(10), $ = l(40), k = l(0), h = l(0), c = l(0), x = (e) => {
-      if (a.type === "logarithmic")
+    );
+    function V(e, l, a, t, v) {
+      const s = l.max - l.min, f = e - l.min, $ = l.value - l.min;
+      v.style.background = `linear-gradient(
+      to right,
+      ${a} 0%,
+      ${a} ${f / s * 100}%,
+      ${t} ${f / s * 100}%,
+      ${t} ${$ / s * 100}%,
+      ${a} ${$ / s * 100}%,
+      ${a} 100%)`;
+    }
+    function y(e, l) {
+      e <= 0 ? l.style.zIndex = "2" : l.style.zIndex = "0";
+    }
+    const r = D(m, "minValue"), o = D(m, "maxValue"), n = p(0), u = p(100), c = p(10), d = p(40), F = p(0), P = p(0), B = p(0), g = T("fromSlider"), i = T("toSlider"), S = (e, l) => {
+      if (!g.value || !i.value) return;
+      l || (l = "0");
+      const a = parseInt(l, 10);
+      if (e == "min-input") {
+        if (a >= o.value) return;
+        r.value = a, A(i.value, a, o.value);
+        return;
+      }
+      a < r.value || (o.value = a, N(i.value, i.value, r.value, a));
+    }, I = (e) => {
+      if (m.type === "logarithmic")
         return e = e || 1, parseInt(
-          C({
+          L({
             value: e,
             minPos: n.value,
-            minlval: k.value,
-            scale: c.value
+            minlval: F.value,
+            scale: B.value
           }).toFixed(0),
           10
         );
-      if (a.type === "linear")
+      if (m.type === "linear")
         return e;
       throw new Error("The slider type has not been implemented");
     }, b = (e) => {
-      if (!e) return 0;
-      if (a.type === "logarithmic")
-        return parseInt(
-          F({
+      if (m.type === "logarithmic")
+        return e = e || 1, parseInt(
+          z({
             position: e,
-            scale: c.value,
-            minlval: k.value,
+            scale: B.value,
+            minlval: F.value,
             minPos: n.value
           }).toFixed(0),
           10
         );
-      if (a.type === "linear")
+      if (m.type === "linear")
         return e;
       throw new Error("The slider type has not been implemented");
-    }, r = l([]), d = l(!1), v = l(!1);
-    (() => {
-      n.value = parseInt(`${a.min || 0}`, 10), f.value = parseInt(`${a.max || 100}`, 10), S.value = n.value, $.value = f.value;
-      const e = n.value, t = f.value;
-      k.value = Math.log(e || 1), h.value = Math.log(t), c.value = (h.value - k.value) / (f.value - n.value), r.value = [
-        b(o.value),
-        b(s.value)
-      ];
-    })();
-    const I = (e = []) => {
-      r.value = e, v.value = !0;
-    }, M = {
-      formatFn: (e = "") => typeof e == "number" ? `${e}` : e.replace(/\D/g, ""),
-      unFormatFn: (e) => e ? parseInt(e) : 0
-    };
-    return g(
-      r,
-      ([e, t]) => {
-        const i = x(e), P = x(t);
-        a.type === "logarithmic" && d.value || (o.value = i, s.value = P);
-      },
-      { deep: !0 }
-    ), g(o, (e) => {
-      e === void 0 || v.value || (r.value[0] = b(e));
-    }), g(s, (e) => {
-      e === void 0 || v.value || (r.value[1] = b(e));
-    }), (e, t) => (L(), B("div", null, [
-      u(m(z), {
-        "model-value": r.value,
-        class: "uikit-relative uikit-flex uikit-h-5 uikit-touch-none uikit-select-none uikit-items-center",
-        min: e.min,
-        max: e.max,
-        step: e.step,
-        "onUpdate:modelValue": I
-      }, {
-        default: w(() => [
-          u(m(N), { class: "uikit-relative uikit-h-[2px] uikit-grow uikit-rounded-full uikit-bg-w-lightgray" }, {
-            default: w(() => [
-              u(m(R), { class: "uikit-absolute uikit-h-full uikit-rounded-full uikit-bg-w-blue" })
-            ]),
-            _: 1
-          }),
-          u(m(y), {
-            class: "uikit-block uikit-size-[20px] uikit-rounded-full uikit-border-2 uikit-border-solid uikit-border-w-blue uikit-bg-w-blue uikit-shadow-[0_0_0_2px_#fff_inset] hover:uikit-border-w-blue-hover hover:uikit-bg-w-blue-hover focus:uikit-border-w-blue-hover focus:uikit-bg-w-blue-hover focus:uikit-outline-none",
-            "aria-label": "Min Value",
-            "data-cy": e.dataCy?.thumbMin
-          }, null, 8, ["data-cy"]),
-          u(m(y), {
-            class: "uikit-block uikit-size-[20px] uikit-rounded-full uikit-border-2 uikit-border-solid uikit-border-w-blue uikit-bg-w-blue uikit-shadow-[0_0_0_2px_#fff_inset] hover:uikit-border-w-blue-hover hover:uikit-bg-w-blue-hover focus:uikit-border-w-blue-hover focus:uikit-bg-w-blue-hover focus:uikit-outline-none",
-            "aria-label": "Max Value",
-            "data-cy": e.dataCy?.thumbMax
-          }, null, 8, ["data-cy"])
+    }, A = (e, l, a) => {
+      const t = I(l), v = I(a);
+      V(
+        t,
+        {
+          min: n.value,
+          max: u.value,
+          value: v
+        },
+        "#B4C2F0",
+        "#2B5DFF",
+        e
+      );
+      const s = t, f = o.value;
+      s > f ? c.value = f : c.value = s;
+    }, N = (e, l, a, t) => {
+      const v = I(a), s = I(t);
+      V(
+        v,
+        {
+          min: n.value,
+          max: u.value,
+          value: s
+        },
+        "#B4C2F0",
+        "#2B5DFF",
+        l
+      );
+      const f = r.value, $ = s;
+      y(o.value, e), f <= $ ? d.value = $ : d.value = f;
+    }, U = (e, l) => {
+      if (!l.value) return;
+      const [a, t] = M(e, l), v = b(a);
+      V(
+        a,
+        {
+          min: n.value,
+          max: u.value,
+          value: t
+        },
+        "#B4C2F0",
+        "#2B5DFF",
+        l
+      ), a > t ? (e.value = `${t}`, c.value = t, r.value = t) : (c.value = a, r.value = v);
+    }, R = (e, l) => {
+      if (!l.value) return;
+      const [a, t] = M(e, l), v = b(t);
+      V(
+        c.value,
+        {
+          min: n.value,
+          max: u.value,
+          value: t
+        },
+        "#B4C2F0",
+        "#2B5DFF",
+        l
+      ), y(parseInt(l.value, 10), l), a <= t ? (d.value = t, o.value = v) : (l.value = `${a}`, d.value = a, o.value = a);
+    }, w = q();
+    return (() => {
+      n.value = parseInt(`${m.min || 0}`, 10), u.value = parseInt(`${m.max || 100}`, 10), c.value = n.value, d.value = u.value, r.value = parseInt(`${w.minValue || n.value}`, 10), o.value = parseInt(`${w.maxValue || u.value}`, 10), F.value = Math.log(r.value || 1), P.value = Math.log(o.value), B.value = (P.value - F.value) / (u.value - n.value);
+    })(), G(() => {
+      !g.value || !i.value || (V(
+        c.value,
+        {
+          min: n.value,
+          max: u.value,
+          value: d.value
+        },
+        "#B4C2F0",
+        "#2B5DFF",
+        i.value
+      ), y(d.value, i.value));
+    }), (e, l) => (J(), H("div", K, [
+      x("div", O, [
+        x("input", {
+          ref_key: "fromSlider",
+          ref: g,
+          class: "fromSlider",
+          type: "range",
+          value: c.value,
+          min: n.value,
+          max: u.value,
+          step: e.$attrs.step,
+          onInput: l[0] || (l[0] = k((a) => U(
+            h(g),
+            h(i)
+          ), ["stop"]))
+        }, null, 40, Q),
+        x("input", {
+          ref_key: "toSlider",
+          ref: i,
+          class: "toSlider",
+          type: "range",
+          value: d.value,
+          min: n.value,
+          max: u.value,
+          step: e.$attrs.step,
+          onInput: l[1] || (l[1] = k((a) => R(
+            h(g),
+            h(i)
+          ), ["stop"]))
+        }, null, 40, W)
+      ]),
+      x("div", X, [
+        x("div", Y, [
+          C(E, {
+            "label-text": "Min",
+            type: "text",
+            pattern: "[0-9]*",
+            inputmode: "numeric",
+            "model-value": r.value,
+            "onUpdate:modelValue": l[2] || (l[2] = (a) => S("min-input", `${a || ""}`))
+          }, null, 8, ["model-value"])
         ]),
-        _: 1
-      }, 8, ["model-value", "min", "max", "step"]),
-      U("div", j, [
-        u(V, {
-          modelValue: o.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (i) => o.value = i),
-          "label-text": "Min",
-          "data-cy": e.dataCy?.rangeMinInput,
-          formatter: M,
-          onFocusin: t[1] || (t[1] = (i) => {
-            d.value = !0, v.value = !1;
-          }),
-          onFocusout: t[2] || (t[2] = (i) => d.value = !1)
-        }, null, 8, ["modelValue", "data-cy"]),
-        u(V, {
-          modelValue: s.value,
-          "onUpdate:modelValue": t[3] || (t[3] = (i) => s.value = i),
-          "label-text": "Max",
-          "data-cy": e.dataCy?.rangeMaxInput,
-          formatter: M,
-          onFocusin: t[4] || (t[4] = (i) => {
-            d.value = !0, v.value = !1;
-          }),
-          onFocusout: t[5] || (t[5] = (i) => d.value = !1)
-        }, null, 8, ["modelValue", "data-cy"])
+        x("div", Z, [
+          C(E, {
+            "label-text": "Max",
+            type: "text",
+            pattern: "[0-9]*",
+            inputmode: "numeric",
+            "model-value": o.value,
+            "onUpdate:modelValue": l[3] || (l[3] = (a) => S("max-input", `${a || ""}`))
+          }, null, 8, ["model-value"])
+        ])
       ])
     ]));
   }
 });
 export {
-  J as default
+  te as default
 };

package/dist/packages/components/lib/UIKit/BaseSnackbar.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, ref as u, onBeforeMount as f, createBlock as h, openBlock as i, Teleport as y, createElementVNode as e, withModifiers as l, normalizeClass as x, createElementBlock as a, createCommentVNode as s, createVNode as v, unref as _ } from "vue";
-import { CloseIcon as C } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
-import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.12_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
+import { defineComponent as b, ref as u, onBeforeMount as f, createBlock as h, openBlock as i, Teleport as y, createElementVNode as e, withModifiers as l, normalizeClass as x, createElementBlock as a, createCommentVNode as s, createVNode as v, unref as _ } from "vue";
+import { CloseIcon as C } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/CloseIcon.js";
+import "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/PharmacyIcon.js";
 const g = { class: "snackbar-container uikit-fixed uikit-bottom-10px uikit-left-10px uikit-z-[2000] max-sm:uikit-left-0 max-sm:uikit-w-full" }, T = ["data-cy"], w = ["src", "alt"], L = {
   key: 1,
   class: "snackbar-type-icon uikit-bg-contain uikit-bg-no-repeat"
-}, M = { class: "snackbar-text uikit-px-4 uikit-py-0 uikit-text uikit-font-regular max-sm:uikit-max-w-[80%] max-sm:uikit-pr-0 sm:uikit-text-16" }, B = ["innerHTML"], H = ["innerHTML"], z = /* @__PURE__ */ p({
+}, M = { class: "snackbar-text uikit-px-4 uikit-py-0 uikit-text uikit-font-regular max-sm:uikit-max-w-[80%] max-sm:uikit-pr-0 sm:uikit-text-16" }, B = ["innerHTML"], H = ["innerHTML"], z = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "BaseSnackbar",
   props: {
@@ -17,7 +17,7 @@ const g = { class: "snackbar-container uikit-fixed uikit-bottom-10px uikit-left-
   },
   emits: ["snackbar-hidden"],
   setup(k, { emit: m }) {
-    const n = k, d = m, o = u(null), r = u(null), b = () => {
+    const n = k, d = m, o = u(null), r = u(null), p = () => {
       o.value && o.value();
     }, c = () => {
       const t = r.value;
@@ -35,8 +35,8 @@ const g = { class: "snackbar-container uikit-fixed uikit-bottom-10px uikit-left-
           ref_key: "snackbar",
           ref: r,
           "data-cy": t.$attrs["data-cy"],
-          class: x(["snackbar snackbar-active uikit-py-xs uikit-flex uikit-items-center uikit-rounded-[5px] uikit-px-4 uikit-font-medium uikit-shadow hover:uikit-cursor-pointer max-sm:uikit-relative max-sm:uikit-mx-10px max-sm:uikit-my-0", t.type]),
-          onClick: l(b, ["stop"])
+          class: x(["snackbar snackbar-active uikit-flex uikit-items-center uikit-rounded-[5px] uikit-px-4 uikit-py-10px uikit-font-medium uikit-shadow hover:uikit-cursor-pointer max-sm:uikit-relative max-sm:uikit-mx-10px max-sm:uikit-my-0", t.type]),
+          onClick: l(p, ["stop"])
         }, [
           t.icon ? (i(), a("img", {
             key: 0,

package/dist/packages/components/lib/UIKit/BaseTextarea.vue.js

@@ -1,11 +1,13 @@
-import { defineComponent as $, mergeModels as n, useModel as T, ref as h, watch as C, createElementBlock as f, openBlock as b, normalizeClass as r, createElementVNode as v, createCommentVNode as L, unref as o, createVNode as x, withModifiers as u, nextTick as F } from "vue";
-import M from "./BaseFloatingLabel.vue.js";
-import '../../../../assets/packages/components/lib/UIKit/BaseFloatingLabel.css';/* empty css                       */
-import { useFloatingLabel as E } from "../../../../composables/useFloatingLabel.js";
-const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelledby", "readonly", "value"], B = ["innerHTML"], q = "peer-data-[validation='invalid']/fieldset:uikit-text-w-red peer-data-[validation='valid']/fieldset:uikit-text-w-blue", S = /* @__PURE__ */ $({
+import { defineComponent as h, mergeModels as f, useModel as $, ref as x, watch as L, createElementBlock as k, openBlock as b, normalizeClass as s, createElementVNode as o, createCommentVNode as p, unref as a, createVNode as M, withModifiers as d, nextTick as C } from "vue";
+import F from "../../../../UIKit/BaseFloatingLabel.js";
+import { useFloatingLabel as z } from "../../../../composables/useFloatingLabel.js";
+const B = ["id", "data-cy", "rows", "disabled", "aria-labelledby", "readonly", "value"], E = {
+  key: 0,
+  class: "uikit-visible uikit-float-none uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-duration-[50s] uikit-ease-out"
+}, H = ["innerHTML"], q = ["innerHTML"], S = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BaseTextarea",
-  props: /* @__PURE__ */ n({
+  props: /* @__PURE__ */ f({
     labelText: { default: "" },
     feedback: {},
     isValid: { default: null },
@@ -15,92 +17,108 @@ const z = ["id", "data-cy", "data-validation", "rows", "disabled", "aria-labelle
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ n(["focusin", "focusout", "click", "keydown"], ["update:modelValue"]),
-  setup(k, { expose: m, emit: p }) {
-    const t = T(k, "modelValue"), s = p, {
-      labelState: d,
+  emits: /* @__PURE__ */ f(["focusin", "focusout", "click", "keydown"], ["update:modelValue"]),
+  setup(v, { expose: m, emit: w }) {
+    const r = $(v, "modelValue"), n = w, {
+      labelState: l,
       handleFocusIn: c,
-      handleFocusOut: w,
+      handleFocusOut: g,
       setFloatingLabel: y,
       setInlineLabel: V
-    } = E(), a = h(null);
-    C(
-      t,
+    } = z(n), i = x(null);
+    L(
+      r,
       (e) => {
-        `${e}`.length && d.value !== "floating-label" ? y() : !e?.length && d.value !== "inline-label" && document.activeElement !== a.value && V();
+        `${e}`.length && l.value !== "floating-label" ? y() : !e?.length && l.value !== "inline-label" && document.activeElement !== i.value && V();
       },
       { immediate: !0 }
     );
-    const g = ({ target: e }) => {
-      t.value = e.value;
+    const T = ({ target: e }) => {
+      r.value = e.value;
     };
     return m({
       disableTextarea: () => {
-        a.value && (a.value.setAttribute("readonly", "readonly"), a.value.classList.add("disabled"));
+        i.value && (i.value.setAttribute("readonly", "readonly"), i.value.classList.add("disabled"));
       },
       clearTextareaElem: () => {
-        a.value && (a.value.value = "");
+        i.value && (i.value.value = "");
       },
       focusDisabledTextarea: () => {
-        a.value && (a.value.removeAttribute("readonly"), a.value.classList.remove("disabled"), F(() => {
-          a.value && a.value.focus();
+        i.value && (i.value.removeAttribute("readonly"), i.value.classList.remove("disabled"), C(() => {
+          i.value && i.value.focus();
         }));
       }
-    }), (e, i) => (b(), f("div", {
-      class: r(e.$attrs["wrapper-classes"])
+    }), (e, t) => (b(), k("div", {
+      class: s(e.$attrs["wrapper-classes"])
     }, [
-      v("div", {
-        class: r(["input-wrapper uikit-relative uikit-rounded-xs uikit-px-0", [
-          o(d) === "floating-label" ? "floating-state" : "inline-state"
+      o("div", {
+        class: s(["input-wrapper uikit-relative uikit-rounded-xs uikit-px-0", [
+          a(l) === "floating-label" ? "floating-state" : "inline-state"
         ]])
       }, [
-        v("textarea", {
+        o("textarea", {
           id: e.$attrs.id,
           ref_key: "textarea",
-          ref: a,
+          ref: i,
           "data-cy": e.$attrs["data-cy"],
-          class: r(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-min-h-[130px] uikit-min-w-[343px] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-2xs uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-px-sm uikit-py-lg uikit-text-16 uikit-outline-none focus-visible:uikit-border-w-blue data-[validation='invalid']:uikit-border-w-red data-[validation='valid']:uikit-border-w-blue", [
-            { "is-invalid": e.isValid === !1 },
-            { "is-valid": e.isValid },
+          class: s(["textarea-scrollbar uikit-peer/fieldset uikit-relative uikit-z-20 uikit-mb-10px uikit-mt-15px uikit-w-[calc(100%-1px)] uikit-overflow-y-auto uikit-whitespace-pre-wrap uikit-rounded-xs uikit-border-0 uikit-bg-transparent uikit-bg-no-repeat uikit-px-15px uikit-pb-[8px] uikit-outline-none", [
+            { "is-invalid invalid-bg !uikit-pr-10": e.isValid === !1 },
+            { "is-valid valid-bg !uikit-pr-10": e.isValid },
             { "uikit-resize-none": !e.resize },
             e.$attrs.class
           ]]),
-          "data-validation": e.isValid ? "valid" : e.isValid === !1 ? "invalid" : "",
           rows: e.$attrs.rows,
           disabled: e.$attrs.disabled,
           "aria-labelledby": e.$attrs.id,
           readonly: e.$attrs.readonly,
-          onFocusin: i[0] || (i[0] = u(
-            (l) => {
-              s("focusin", l), o(c)();
-            },
-            ["stop"]
-          )),
-          onFocusout: i[1] || (i[1] = u(
-            (l) => {
-              s("focusout", l), o(w)(`${t.value}`.trim());
-            },
-            ["stop"]
-          )),
-          onInput: u(g, ["stop"]),
-          onKeydown: i[2] || (i[2] = u((l) => s("keydown", l), ["stop"])),
-          onClick: i[3] || (i[3] = (l) => s("click", l)),
-          value: t.value
-        }, null, 42, z),
-        x(M, {
+          onFocusin: t[0] || (t[0] = d((u) => a(c)(), ["stop"])),
+          onFocusout: t[1] || (t[1] = d((u) => a(g)(`${r.value}`.trim()), ["stop"])),
+          onInput: d(T, ["stop"]),
+          onKeydown: t[2] || (t[2] = d((u) => n("keydown", u), ["stop"])),
+          onClick: t[3] || (t[3] = (u) => n("click", u)),
+          value: r.value
+        }, null, 42, B),
+        o("fieldset", {
+          class: s(["uikit-pointer-events-none uikit-absolute -uikit-top-0 uikit-bottom-[3px] uikit-left-0 uikit-right-0 uikit-m-0 uikit-min-w-0 uikit-overflow-hidden uikit-rounded-xs uikit-border uikit-border-solid uikit-bg-white uikit-p-0 uikit-px-2 uikit-text-start uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus/fieldset:uikit-border-2 peer-focus/fieldset:uikit-border-w-primary peer-disabled/fieldset:uikit-bg-w-cultured peer-[&.disabled]/fieldset:uikit-bg-w-cultured peer-focus/fieldset:[&.is-invalid]:uikit-border-w-danger", [
+            { "is-invalid": e.isValid === !1, "is-valid": e.isValid },
+            { "uikit-border-w-danger": e.isValid === !1 },
+            { "uikit-border-w-primary": e.isValid },
+            { "uikit-border-w-secondary": e.isValid === null }
+          ]])
+        }, [
+          e.labelText ? (b(), k("legend", E, [
+            o("span", {
+              class: s(["uikit-px-5px uikit-opacity-0", [
+                {
+                  "uikit-visible uikit-inline-block": a(l) === "floating-label"
+                },
+                {
+                  "uikit-invisible uikit-hidden": a(l) === "inline-label"
+                }
+              ]]),
+              innerHTML: e.labelText
+            }, null, 10, H)
+          ])) : p("", !0)
+        ], 2),
+        M(F, {
           for: e.$attrs.id,
           "label-text": e.labelText,
-          "label-state": o(d),
+          "label-state": a(l),
           required: e.$attrs.required,
           "is-valid": e.isValid,
-          "label-classes": [e.labelClasses, q]
+          "label-classes": [
+            a(l) === "floating-label" ? "!-uikit-top-1" : "!uikit-top-4",
+            e.labelClasses
+          ]
         }, null, 8, ["for", "label-text", "label-state", "required", "is-valid", "label-classes"])
       ], 2),
-      (e.isValid || e.isValid === !1) && e.feedback ? (b(), f("div", {
+      (e.isValid || e.isValid === !1) && e.feedback ? (b(), k("div", {
         key: 0,
-        class: r(["uikit-mt-1 uikit-text-12", e.isValid === !1 ? "uikit-text-w-red" : "uikit-text-w-blue"]),
+        class: s(
+          e.isValid === !1 ? "uikit-mt-1 uikit-text-12 uikit-text-w-danger" : "uikit-mt-1 uikit-text-12 uikit-text-w-primary"
+        ),
         innerHTML: e.isValid === !1 ? e.feedback.invalid : e.feedback.valid
-      }, null, 10, B)) : L("", !0)
+      }, null, 10, q)) : p("", !0)
     ], 2));
   }
 });

package/dist/packages/components/lib/UIKit/BaseToggle.vue.js

@@ -1,38 +1,42 @@
-import { defineComponent as r, mergeModels as d, useModel as n, createElementBlock as k, openBlock as m, renderSlot as l, createVNode as u, createCommentVNode as c, unref as a, withCtx as f, createElementVNode as p } from "vue";
-import { SwitchRoot as h, SwitchThumb as b } from "reka-ui";
-const g = { class: "uikit-flex uikit-items-center uikit-gap-xs" }, x = ["innerHTML"], L = /* @__PURE__ */ r({
+import { defineComponent as a, mergeModels as n, useModel as d, createElementBlock as k, openBlock as b, normalizeClass as c, renderSlot as l, createElementVNode as t, createCommentVNode as f, withModifiers as p } from "vue";
+const m = { class: "switch uikit-relative uikit-inline-block uikit-min-w-[40px] uikit-text-sm" }, h = ["data-cy", "checked"], g = ["innerHTML"], y = /* @__PURE__ */ a({
   inheritAttrs: !1,
   __name: "BaseToggle",
-  props: /* @__PURE__ */ d({
-    label: {}
+  props: /* @__PURE__ */ n({
+    withRightLabel: { type: Boolean, default: !0 },
+    label: { default: "" }
   }, {
-    modelValue: { default: !1 },
+    modelValue: { type: Boolean, default: !1 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(o) {
-    const t = n(o, "modelValue");
-    return (e, i) => (m(), k("div", g, [
-      l(e.$slots, "leftLabel"),
-      u(a(h), {
-        modelValue: t.value,
-        "onUpdate:modelValue": i[0] || (i[0] = (s) => t.value = s),
-        class: "uikit-flex uikit-h-[20px] uikit-w-2xl uikit-cursor-pointer uikit-rounded-full uikit-p-0 uikit-transition-[background] data-[state=checked]:uikit-bg-w-blue data-[state=unchecked]:uikit-bg-w-cultured"
-      }, {
-        default: f(() => [
-          u(a(b), { class: "uikit-text-xs uikit-shadow-surface uikit-my-auto uikit-flex uikit-size-[20px] uikit-translate-x-0 uikit-items-center uikit-justify-center uikit-rounded-full uikit-border uikit-border-solid uikit-border-w-lightgray uikit-bg-white uikit-shadow-xl uikit-transition-transform uikit-will-change-transform data-[state=checked]:uikit-translate-x-full" })
-        ]),
-        _: 1
-      }, 8, ["modelValue"]),
-      e.$slots.leftLabel ? c("", !0) : l(e.$slots, "rightLabel", { key: 0 }, () => [
-        p("span", {
-          class: "uikit-ml-[10px]",
+  setup(r) {
+    const o = d(r, "modelValue"), u = ({ target: e }) => {
+      o.value = e.checked;
+    };
+    return (e, i) => (b(), k("div", {
+      class: c(["switch-container uikit-inline-block uikit-items-center", e.$attrs.class])
+    }, [
+      l(e.$slots, "leftLabel", {}, void 0, !0),
+      t("label", m, [
+        t("input", {
+          "data-cy": e.$attrs["data-cy"] ?? "",
+          class: "uikit-peer/toggle uikit-h-0 uikit-w-0 uikit-opacity-0",
+          type: "checkbox",
+          checked: o.value,
+          onInput: i[0] || (i[0] = p((s) => u(s), ["stop"]))
+        }, null, 40, h),
+        i[1] || (i[1] = t("span", { class: "slider round uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-top-0 uikit-cursor-pointer uikit-bg-w-lavender uikit-duration-300 before:uikit-absolute before:uikit-bottom-0 before:uikit-left-0 before:uikit-top-0 before:uikit-box-border before:uikit-h-[22px] before:uikit-w-[22px] before:uikit-rounded-circle before:uikit-border before:uikit-border-solid before:uikit-border-w-secondary before:uikit-bg-white before:uikit-shadow-sm before:uikit-duration-300 before:uikit-content-[''] peer-checked/toggle:uikit-bg-w-primary" }, null, -1))
+      ]),
+      e.withRightLabel ? l(e.$slots, "rightLabel", { key: 0 }, () => [
+        t("span", {
+          class: "uikit-ml-10px",
           innerHTML: e.label
-        }, null, 8, x)
-      ])
-    ]));
+        }, null, 8, g)
+      ], !0) : f("", !0)
+    ], 2));
   }
 });
 export {
-  L as default
+  y as default
 };