@wikicasa-dev/components 2.1.2-alpha.2 → 2.1.2-alpha.3

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

@@ -0,0 +1,213 @@
+import { defineComponent as F, mergeModels as $, useModel as M, useId as A, computed as V, ref as L, watch as w, onMounted as E, onUnmounted as P, createElementBlock as s, openBlock as a, normalizeClass as l, createElementVNode as o, createCommentVNode as d, withModifiers as p, renderSlot as z, unref as b, createBlock as N, createVNode as O, Fragment as T, renderList as S } from "vue";
+import { useKeyboardController as q } from "../../../../node_modules/.pnpm/@wikicasa-dev_vue-composables@0.0.23_typescript@5.8.3/node_modules/@wikicasa-dev/vue-composables/dist/useKeyboardController.js";
+import { ArrowIcon as j } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.js";
+import { WarningIconRounded as K } from "../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/WarningIconRounded.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 R = ["id", "innerHTML"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], W = ["innerHTML"], G = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, J = ["innerHTML"], Q = ["data-cy"], X = ["id", "aria-selected", "onClick", "onMouseover"], Y = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, Z = ["name", "checked", "onInput"], x = ["innerHTML"], _ = ["id", "arial-live", "innerHTML"], ee = ["id", "arial-live", "innerHTML"], se = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "AccessibleSelect",
+  props: /* @__PURE__ */ $({
+    label: { default: "" },
+    dropdownPosition: { default: "bottom" },
+    namespace: {},
+    options: {},
+    isValid: { type: [Boolean, null], default: null },
+    feedback: {},
+    closeOnBodyPressed: { type: Boolean, default: !0 },
+    border: { type: Boolean, default: !0 },
+    fieldsetClasses: {},
+    legendClasses: {},
+    dropdownClasses: {},
+    labelClasses: {},
+    btnClasses: {},
+    dropdownItemClasses: {},
+    btnTextClasses: {},
+    arrowIcon: {},
+    dataCy: {},
+    wrapperClasses: {}
+  }, {
+    modelValue: {
+      default: () => ({ id: "", label: "" })
+    },
+    modelModifiers: {},
+    toggleDropdown: {
+      default: void 0
+    },
+    toggleDropdownModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["click", "update:dropdownState"], ["update:modelValue", "update:toggleDropdown"]),
+  setup(u, { emit: B }) {
+    const h = B, k = M(u, "modelValue"), y = M(u, "toggleDropdown"), H = A(), t = V(() => u.namespace || H), i = L(!1), I = L(null), f = V(() => !!k.value.label), { activeIdx: c, selectedIdx: D } = q({
+      optionsLength: u.options.length,
+      isDropdownOpen: i
+    }), m = (e) => {
+      i.value = !1, k.value = e;
+    };
+    w(D, (e) => {
+      m(u.options[e]), i.value = !1;
+    }), w(y, (e) => {
+      e && (i.value = !i.value, y.value = !1);
+    }), w(i, (e) => {
+      h("update:dropdownState", e);
+    });
+    const g = ({ target: e }) => {
+      `${t.value}_btn` !== e.id && (i.value = !1);
+    };
+    return E(() => {
+      u.closeOnBodyPressed && document.addEventListener("click", g);
+    }), P(() => {
+      u.closeOnBodyPressed && document.removeEventListener("click", g);
+    }), (e, n) => (a(), s("div", {
+      class: l(e.$attrs.class)
+    }, [
+      o("div", {
+        class: l(["uikit-relative uikit-flex uikit-h-12 uikit-items-center", e.wrapperClasses])
+      }, [
+        e.label ? (a(), s("label", {
+          key: 0,
+          id: `${t.value}_label`,
+          class: l(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
+            f.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
+            e.labelClasses,
+            { "uikit-left-9": e.$slots.lefticon && !f.value },
+            { "uikit-left-4": !e.$slots.lefticon && !f.value }
+          ]]),
+          innerHTML: e.label
+        }, null, 10, R)) : d("", !0),
+        e.$slots.lefticon ? (a(), s("span", {
+          key: 1,
+          class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
+          onClick: n[0] || (n[0] = p((r) => i.value = !i.value, ["stop"]))
+        }, [
+          z(e.$slots, "lefticon")
+        ])) : d("", !0),
+        o("button", {
+          id: `${t.value}_btn`,
+          ref_key: "btnEl",
+          ref: I,
+          type: "button",
+          "data-cy": e.dataCy,
+          class: l(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [e.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
+          "aria-required": !!e.$attrs.required,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-controls": `${t.value}_dropdown`,
+          "aria-labelledby": `${t.value}_label ${t.value}_btn`,
+          "aria-expanded": i.value,
+          "aria-activedescendant": b(c) >= 0 && i.value ? `${t.value}_element_${e.options[b(c)].label}` : "",
+          "aria-invalid": e.isValid === !1,
+          "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
+          onClick: n[1] || (n[1] = (r) => {
+            i.value = !i.value, h("click", r);
+          })
+        }, [
+          o("span", {
+            class: l(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
+            innerHTML: k.value.visibleLabel || k.value.label
+          }, null, 10, W),
+          o("span", G, [
+            e.isValid == !1 ? (a(), N(b(K), {
+              key: 0,
+              class: "uikit-mr-1",
+              width: 20,
+              height: 20,
+              "stroke-color": "#FA4F64"
+            })) : d("", !0),
+            O(b(j), {
+              class: l(["uikit-transition-transform motion-reduce:uikit-transition-none", [
+                i.value ? "uikit-rotate-180" : "",
+                e.arrowIcon?.classes
+              ]]),
+              width: e.arrowIcon?.width ?? 18,
+              height: e.arrowIcon?.height ?? 18,
+              "stroke-color": e.isValid ? "#2B5DFF" : e.isValid === !1 ? "#FA4F64" : e.arrowIcon?.strokeColor ?? "#222"
+            }, null, 8, ["class", "width", "height", "stroke-color"])
+          ])
+        ], 10, U),
+        o("fieldset", {
+          "aria-hidden": "true",
+          class: l(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
+            e.fieldsetClasses,
+            e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
+            {
+              "uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": e.border
+            },
+            { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
+          ]])
+        }, [
+          o("legend", {
+            class: l([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
+          }, [
+            e.label ? (a(), s("span", {
+              key: 0,
+              class: l(["uikit-mx-5px", [k.value.label ? "uikit-invisible" : "uikit-hidden"]]),
+              innerHTML: e.label
+            }, null, 10, J)) : d("", !0)
+          ], 2)
+        ], 2),
+        o("ul", {
+          "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
+          role: "listbox",
+          tabindex: -1,
+          "aria-multiselectable": !1,
+          class: l(["uikit-absolute uikit-z-30 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
+            { "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !i.value },
+            {
+              "uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": i.value
+            },
+            { "uikit-bottom-[55px]": e.dropdownPosition === "top" },
+            { "uikit-top-[55px]": e.dropdownPosition === "bottom" },
+            e.dropdownClasses
+          ]]),
+          onClick: n[3] || (n[3] = p(() => {
+          }, ["stop"]))
+        }, [
+          (a(!0), s(T, null, S(e.options, (r, v) => (a(), s("li", {
+            id: `${t.value}_element_${e.options[v].label}`,
+            key: `${r.label}_${v}`,
+            role: "option",
+            "aria-selected": b(c) === v,
+            class: l(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.dropdownItemClasses]),
+            onClick: p((C) => m(r), ["stop"]),
+            onMouseover: p((C) => c.value = v, ["stop"]),
+            onBlur: n[2] || (n[2] = p(() => {
+            }, ["stop"]))
+          }, [
+            o("label", Y, [
+              o("input", {
+                tabindex: "-1",
+                class: "uikit-m-0 uikit-appearance-none",
+                name: `${t.value}_radio`,
+                type: "radio",
+                checked: r.label === k.value.label,
+                onInput: p((C) => m(r), ["stop"])
+              }, null, 40, Z),
+              o("span", {
+                innerHTML: r.label
+              }, null, 8, x)
+            ])
+          ], 42, X))), 128))
+        ], 10, Q)
+      ], 2),
+      e.feedback ? (a(), s(T, { key: 0 }, [
+        e.feedback.valid ? (a(), s("span", {
+          key: 0,
+          id: `${t.value}_valid_msg`,
+          "arial-live": e.$attrs["aria-live"],
+          class: "uikit-mt-1 uikit-inline-block uikit-text-12",
+          innerHTML: e.isValid ? e.feedback.valid : ""
+        }, null, 8, _)) : d("", !0),
+        e.feedback.invalid ? (a(), s("span", {
+          key: 1,
+          id: `${t.value}_invalid_msg`,
+          "arial-live": e.$attrs["aria-live"],
+          class: "uikit-mt-1 uikit-inline-block uikit-text-12 uikit-text-w-danger",
+          innerHTML: e.isValid === !1 ? e.feedback.invalid : ""
+        }, null, 8, ee)) : d("", !0)
+      ], 64)) : d("", !0)
+    ], 2));
+  }
+});
+export {
+  se as default
+};

package/dist/packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent as p, ref as u, provide as c, renderSlot as d } from "vue";
+import "../../../../../node_modules/.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.js";
+import { isEmptyObject as f } from "../../../../../node_modules/.pnpm/@wikicasa-dev_utilities@1.1.21/node_modules/@wikicasa-dev/utilities/dist/utils/ObjectUtils.js";
+import "../../../../../_virtual/polyline.js";
+const k = /* @__PURE__ */ p({
+  __name: "BaseAccordion",
+  props: {
+    autoClose: { type: Boolean, default: !0 },
+    autoUpdate: { type: Boolean, default: !0 }
+  },
+  setup(l) {
+    const n = u(null), o = u(
+      {}
+    ), i = (e, t) => {
+      if (l.autoClose && t && !f(t))
+        for (const a in t)
+          a !== `${e}` && (t[a].active = !1);
+    }, s = (e, t) => {
+      t && (t[e].active = !(t[e].active ?? !1));
+    }, r = (e, t) => {
+      i(e.id, t ?? o.value), n.value = e, s(e.id, t ?? o.value);
+    };
+    return c("handleClick", (e) => {
+      l.autoUpdate && r(e);
+    }), c("accordionItems", o), (e, t) => d(e.$slots, "default", {
+      updatePrev: r,
+      prev: n.value
+    });
+  }
+});
+export {
+  k as default
+};

package/dist/{chunks/BaseAccordionBtn.vue_vue_type_script_setup_true_lang.APN3hif2.js → packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js}

@@ -1,6 +1,6 @@
-import { defineComponent as s, createElementBlock as l, openBlock as d, normalizeClass as e, renderSlot as i, createElementVNode as c, withModifiers as p, createVNode as u, unref as k } from "vue";
-import { a as m } from "./ArrowIcon.Bq6Xr3uH.js";
-import "./PharmacyIcon.DEQ8mOEJ.js";
+import { defineComponent as s, createElementBlock as l, openBlock as d, normalizeClass as e, renderSlot as n, createElementVNode as c, withModifiers as p, createVNode as u, unref as k } from "vue";
+import { ArrowIcon as m } from "../../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.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 f = ["id"], g = ["aria-expanded", "aria-controls"], b = /* @__PURE__ */ s({
   inheritAttrs: !1,
   __name: "BaseAccordionBtn",
@@ -13,8 +13,8 @@ const f = ["id"], g = ["aria-expanded", "aria-controls"], b = /* @__PURE__ */ s(
     toggleAccordion: { type: Function }
   },
   emits: ["click"],
-  setup(C, { emit: n }) {
-    const r = n;
+  setup(C, { emit: i }) {
+    const r = i;
     return (o, t) => (d(), l("div", {
       id: `${o.id}`,
       class: e(["uikit-flex uikit-items-center uikit-justify-around", [
@@ -23,8 +23,8 @@ const f = ["id"], g = ["aria-expanded", "aria-controls"], b = /* @__PURE__ */ s(
       ]]),
       onClick: t[1] || (t[1] = (a) => o.onContainerClickExpand && o.toggleAccordion())
     }, [
-      i(o.$slots, "custom_content"),
-      i(o.$slots, "custom_btn", {
+      n(o.$slots, "custom_content"),
+      n(o.$slots, "custom_btn", {
         btnId: `btn-${o.id}`,
         isOpen: o.accordionOpen,
         toggleAccordion: o.toggleAccordion
@@ -56,5 +56,5 @@ const f = ["id"], g = ["aria-expanded", "aria-controls"], b = /* @__PURE__ */ s(
   }
 });
 export {
-  b as _
+  b as default
 };

package/dist/{chunks/BaseAccordionContent.vue_vue_type_script_setup_true_lang.Dn4qNu2R.js → packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js}

@@ -30,5 +30,5 @@ const t = ["id", "aria-labelledby"], p = /* @__PURE__ */ n({
   }
 });
 export {
-  p as _
+  p as default
 };

package/dist/{chunks/BaseAccordionItem.vue_vue_type_script_setup_true_lang.Dpjir3yq.js → packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js}

@@ -1,8 +1,8 @@
-import { defineComponent as h, ref as $, inject as p, watch as l, unref as d, createElementBlock as v, openBlock as u, normalizeClass as m, createBlock as y, createCommentVNode as g, renderSlot as t, createElementVNode as f, withModifiers as O, createVNode as k, withCtx as c } from "vue";
-import { _ as B } from "./BaseAccordionBtn.vue_vue_type_script_setup_true_lang.APN3hif2.js";
-import { _ as A } from "./BaseAccordionContent.vue_vue_type_script_setup_true_lang.Dn4qNu2R.js";
-import { a as E } from "./ArrowIcon.Bq6Xr3uH.js";
-import "./PharmacyIcon.DEQ8mOEJ.js";
+import { defineComponent as h, ref as $, inject as p, watch as l, unref as d, createElementBlock as v, openBlock as u, normalizeClass as m, createBlock as y, createCommentVNode as g, renderSlot as s, createElementVNode as f, withModifiers as O, createVNode as k, withCtx as c } from "vue";
+import A from "./BaseAccordionBtn.vue.js";
+import B from "./BaseAccordionContent.vue.js";
+import { ArrowIcon as E } from "../../../../../node_modules/.pnpm/@wikicasa-dev_svg-icons@1.2.11_typescript@5.8.3/node_modules/@wikicasa-dev/svg-icons/dist/ArrowIcon.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 W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M = ["itemprop", "innerHTML"], P = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BaseAccordionItem",
@@ -36,16 +36,16 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
       () => {
       },
       !0
-    ), C = (e, s = !1) => {
-      a(s ? "accordionOpened" : "accordionClosed", e), a("update:accordionState", s);
+    ), C = (e, t = !1) => {
+      a(t ? "accordionOpened" : "accordionClosed", e), a("update:accordionState", t);
     };
     r && (r.value[i.id] = { id: i.id, title: i.title, active: i.active }), l(
       () => d(r),
       (e) => {
-        const s = e?.[i.id];
-        !s || o.value === s.active || (o.value = s.active ?? !1, C(
-          { id: i.id, title: i.title, active: s.active },
-          s.active
+        const t = e?.[i.id];
+        !t || o.value === t.active || (o.value = t.active ?? !1, C(
+          { id: i.id, title: i.title, active: t.active },
+          t.active
         ));
       },
       { deep: !0, immediate: !0 }
@@ -61,7 +61,7 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
     const n = () => {
       o.value = !o.value;
     };
-    return (e, s) => (u(), v("div", {
+    return (e, t) => (u(), v("div", {
       class: m(e.rootClasses)
     }, [
       !e.$slots.custom_content && !e.$slots.custom_btn && !e.$slots.custom_accordion ? (u(), v("div", W, [
@@ -72,7 +72,7 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
           "data-cy": e.dataCy,
           "aria-expanded": o.value,
           "aria-controls": `accordion-text-${e.id}`,
-          onClick: s[0] || (s[0] = O((N) => {
+          onClick: t[0] || (t[0] = O((N) => {
             n(), d(b)?.({ id: e.id, title: e.title, active: o.value }), a("click");
           }, ["prevent", "stop"]))
         }, [
@@ -90,7 +90,7 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
             height: e.arrowWidth
           }, null, 8, ["class", "arrow-classes", "width", "height"])
         ], 10, I)
-      ])) : (e.$slots.custom_content || e.$slots.custom_btn) && !e.$slots.custom_accordion ? (u(), y(B, {
+      ])) : (e.$slots.custom_content || e.$slots.custom_btn) && !e.$slots.custom_accordion ? (u(), y(A, {
         key: 1,
         id: e.id,
         "btn-wrapper-classes": e.btnWrapperClasses,
@@ -102,10 +102,10 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
         "accordion-open": o.value
       }, {
         custom_content: c(() => [
-          t(e.$slots, "custom_content")
+          s(e.$slots, "custom_content")
         ]),
         custom_btn: c(() => [
-          t(e.$slots, "custom_btn", {
+          s(e.$slots, "custom_btn", {
             btnId: `btn-${e.id}`,
             isOpen: o.value,
             toggleAccordion: n
@@ -113,12 +113,12 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
         ]),
         _: 3
       }, 8, ["id", "btn-wrapper-classes", "btn-classes", "arrow-color", "arrow-classes", "on-container-click-expand", "accordion-open"])) : g("", !0),
-      t(e.$slots, "custom_accordion", {
+      s(e.$slots, "custom_accordion", {
         id: e.id,
         isOpen: o.value,
         toggleAccordion: n
       }, () => [
-        k(A, {
+        k(B, {
           id: e.id,
           "accordion-open": o.value,
           "accordion-open-classes": e.accordionOpenClasses,
@@ -127,10 +127,10 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
           "accordion-classes": e.accordionClasses
         }, {
           custom_accordion_content: c(() => [
-            t(e.$slots, "custom_accordion_content", { isOpen: o.value })
+            s(e.$slots, "custom_accordion_content", { isOpen: o.value })
           ]),
           default: c(() => [
-            t(e.$slots, "default", { isOpen: o.value })
+            s(e.$slots, "default", { isOpen: o.value })
           ]),
           _: 3
         }, 8, ["id", "accordion-open", "accordion-open-classes", "accordion-close-classes", "accordion-content-classes", "accordion-classes"])
@@ -139,5 +139,5 @@ const W = { key: 0 }, I = ["id", "data-cy", "aria-expanded", "aria-controls"], M
   }
 });
 export {
-  P as _
+  P as default
 };

package/dist/{chunks/BaseAlert.vue_vue_type_style_index_0_lang.DUWb9d9_.js → packages/components/lib/UIKit/BaseAlert.vue.js}

@@ -1,5 +1,5 @@
 import { defineComponent as t, createElementBlock as r, openBlock as s, normalizeClass as a, renderSlot as l } from "vue";
-import '../assets/BaseAlert.css';const o = ["id"], p = /* @__PURE__ */ t({
+const o = ["id"], p = /* @__PURE__ */ t({
   __name: "BaseAlert",
   props: {
     alertClass: { default: "" }
@@ -15,5 +15,5 @@ import '../assets/BaseAlert.css';const o = ["id"], p = /* @__PURE__ */ t({
   }
 });
 export {
-  p as _
+  p as default
 };