@wikicasa-dev/components 2.2.9-alpha.66 → 2.2.9-alpha.8

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

@@ -1,10 +1,10 @@
-import { defineComponent as H, mergeModels as y, useModel as C, useId as F, useTemplateRef as z, computed as p, watch as I, createElementBlock as a, openBlock as l, createVNode as $, createCommentVNode as u, normalizeClass as n, withCtx as x, Fragment as g, renderList as N, withModifiers as f, createElementVNode as d, renderSlot as P, createBlock as A, unref as M } from "vue";
-import { WarningIconRounded as E, ArrowIcon as R } from "@wikicasa-dev/svg-icons";
-import S from "./BaseDropDown.vue.js";
-import '../../../../assets/BaseDropDown.css';/* empty css                  */
-const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-items-center" }, K = ["id", "innerHTML"], j = ["onClick"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby", "onClick", "onKeydown"], W = ["innerHTML"], D = ["innerHTML"], G = ["id", "aria-selected", "onClick", "onMouseover"], J = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, O = ["name", "checked", "onInput"], Q = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Y = ["id", "arial-live", "innerHTML"], te = /* @__PURE__ */ H({
+import { defineComponent as H, mergeModels as $, useModel as p, useId as I, computed as M, ref as D, watch as h, onMounted as F, onUnmounted as P, createElementBlock as u, openBlock as n, normalizeClass as a, createElementVNode as o, createCommentVNode as r, withModifiers as c, renderSlot as z, unref as b, createBlock as A, createVNode as E, Fragment as V, renderList as N } from "vue";
+import { useKeyboardController as O } from "@wikicasa-dev/vue-composables";
+import { WarningIconRounded as S, ArrowIcon as q } from "@wikicasa-dev/svg-icons";
+const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], R = ["innerHTML"], U = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, W = ["innerHTML"], G = ["data-cy"], J = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, X = ["name", "checked", "onInput"], Y = ["innerHTML"], Z = ["id", "arial-live", "innerHTML"], _ = ["id", "arial-live", "innerHTML"], le = /* @__PURE__ */ H({
+  inheritAttrs: !1,
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ y({
+  props: /* @__PURE__ */ $({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -13,7 +13,6 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
     feedback: {},
     closeOnBodyPressed: { type: Boolean, default: !0 },
     border: { type: Boolean, default: !0 },
-    withFieldset: { type: Boolean, default: !0 },
     fieldsetClasses: {},
     legendClasses: {},
     dropdownClasses: {},
@@ -29,178 +28,181 @@ const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-
       default: () => ({ id: "", label: "" })
     },
     modelModifiers: {},
-    open: { type: Boolean, default: !1 },
-    openModifiers: {}
+    toggleDropdown: { type: Boolean, default: void 0 },
+    toggleDropdownModifiers: {}
   }),
-  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open"]),
-  setup(e, { emit: V }) {
-    const T = V, k = C(e, "modelValue"), m = C(e, "open"), L = F(), B = z("dropdownRef"), t = p(() => e.namespace || L), w = p(() => !!k.value.label), h = (i) => {
-      m.value = !1, k.value = i;
+  emits: /* @__PURE__ */ $(["click", "update:dropdownState"], ["update:modelValue", "update:toggleDropdown"]),
+  setup(e, { emit: L }) {
+    const y = L, k = p(e, "modelValue"), g = p(e, "toggleDropdown"), T = I(), l = M(() => e.namespace || T), t = D(!1), m = M(() => !!k.value.label), { activeIdx: v, selectedIdx: B } = O({
+      optionsLength: e.options.length,
+      isDropdownOpen: t
+    }), w = (i) => {
+      t.value = !1, k.value = i;
     };
-    return I(
-      () => B.value?.selectedIdx,
-      (i) => {
-        i === void 0 || i === -1 || (h(e.options[i]), m.value = !1);
-      }
-    ), (i, v) => (l(), a("div", null, [
-      $(S, {
-        ref: "dropdownRef",
-        open: m.value,
-        "onUpdate:open": v[1] || (v[1] = (r) => m.value = r),
-        class: n(["uikit-select-wrapper", e.wrapperClasses]),
-        "data-cy": e.dataCy,
-        "activate-keyboard-controller": "",
-        "close-when-clicked-outside": e.closeOnBodyPressed,
-        direction: e.dropdownPosition === "top" ? "up" : "down",
-        "dropdown-element": "ul",
-        "dropdown-classes": [
-          "uikit-select-dropdown uikit-z-30 uikit-mb-0",
-          e.dropdownClasses
-        ],
-        "dropdown-attrs": {
-          role: "listbox",
-          tabindex: -1,
-          "aria-multiselectable": !1
-        }
-      }, {
-        btn_slot: x(({ toggleDropdown: r, isOpen: b, activeIdx: o, setSelectedIdx: c }) => [
-          d("div", q, [
-            e.label ? (l(), a("label", {
+    h(B, (i) => {
+      w(e.options[i]), t.value = !1;
+    }), h(g, (i) => {
+      i && (t.value = !t.value, g.value = !1);
+    }), h(t, (i) => {
+      y("update:dropdownState", i);
+    });
+    const C = ({ target: i }) => {
+      `${l.value}_btn` !== i.id && (t.value = !1);
+    };
+    return F(() => {
+      e.closeOnBodyPressed && document.addEventListener("click", C);
+    }), P(() => {
+      e.closeOnBodyPressed && document.removeEventListener("click", C);
+    }), (i, s) => (n(), u("div", {
+      class: a(i.$attrs.class)
+    }, [
+      o("div", {
+        class: a(["uikit-relative uikit-flex uikit-h-12 uikit-items-center", e.wrapperClasses])
+      }, [
+        e.label ? (n(), u("label", {
+          key: 0,
+          id: `${l.value}_label`,
+          class: a(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
+            m.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": i.$slots.lefticon && !m.value },
+            { "uikit-left-4": !i.$slots.lefticon && !m.value }
+          ]]),
+          innerHTML: e.label
+        }, null, 10, j)) : r("", !0),
+        i.$slots.lefticon ? (n(), u("span", {
+          key: 1,
+          class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
+          onClick: s[0] || (s[0] = c((d) => t.value = !t.value, ["stop"]))
+        }, [
+          z(i.$slots, "lefticon")
+        ])) : r("", !0),
+        o("button", {
+          id: `${l.value}_btn`,
+          ref: "btnEl",
+          type: "button",
+          "data-cy": e.dataCy,
+          class: a(["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", [i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
+          "aria-required": !!i.$attrs.required,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-controls": `${l.value}_dropdown`,
+          "aria-labelledby": `${l.value}_label ${l.value}_btn`,
+          "aria-expanded": t.value,
+          "aria-activedescendant": b(v) >= 0 && t.value ? `${l.value}_element_${e.options[b(v)].label}` : "",
+          "aria-invalid": e.isValid === !1,
+          "aria-describedby": e.isValid === !1 ? `${l.value}_invalid_msg` : void 0,
+          onClick: s[1] || (s[1] = (d) => {
+            t.value = !t.value, y("click", d);
+          })
+        }, [
+          o("span", {
+            class: a(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
+            innerHTML: k.value.visibleLabel || k.value.label
+          }, null, 10, R),
+          o("span", U, [
+            e.isValid == !1 ? (n(), A(b(S), {
               key: 0,
-              id: `${t.value}_label`,
-              class: n(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
-                w.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": i.$slots.lefticon && !w.value },
-                { "uikit-left-4": !i.$slots.lefticon && !w.value }
+              class: "uikit-mr-1",
+              width: 20,
+              height: 20,
+              "stroke-color": "#FA4F64"
+            })) : r("", !0),
+            E(b(q), {
+              class: a(["uikit-transition-transform motion-reduce:uikit-transition-none", [
+                t.value ? "uikit-rotate-180" : "",
+                e.arrowIcon?.classes
               ]]),
-              innerHTML: e.label
-            }, null, 10, K)) : u("", !0),
-            i.$slots.lefticon ? (l(), a("span", {
-              key: 1,
-              class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
-              onClick: f((s) => r(), ["stop"])
-            }, [
-              P(i.$slots, "lefticon")
-            ], 8, j)) : u("", !0),
-            d("button", {
-              id: `${t.value}_btn`,
-              ref: "btnEl",
-              type: "button",
-              "data-cy": e.dataCy,
-              class: n(["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", [i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
-              "aria-required": !!i.$attrs.required,
-              role: "combobox",
-              "aria-haspopup": "listbox",
-              "aria-controls": `${t.value}_dropdown`,
-              "aria-labelledby": `${t.value}_label ${t.value}_btn`,
-              "aria-expanded": b,
-              "aria-activedescendant": o >= 0 && b ? `${t.value}_element_${e.options[o].label}` : "",
-              "aria-invalid": e.isValid === !1,
-              "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
-              onClick: (s) => {
-                r(), T("click", s);
-              },
-              onKeydown: (s) => {
-                ["Enter", "Space"].includes(s.key) && (s.preventDefault(), s.stopPropagation(), c(o), r());
-              }
-            }, [
-              d("span", {
-                class: n(["uikit-pointer-events-none", [e.btnTextClasses, { "uikit-mt-1": e.withFieldset }]]),
-                innerHTML: k.value?.visibleLabel || k.value?.label
-              }, null, 10, W),
-              d("span", {
-                class: n(["uikit-pointer-events-none uikit-inline-flex", [{ "uikit-mt-1": e.withFieldset }]])
-              }, [
-                e.isValid == !1 ? (l(), A(M(E), {
-                  key: 0,
-                  class: "uikit-mr-1",
-                  width: 20,
-                  height: 20,
-                  "stroke-color": "#FA4F64"
-                })) : u("", !0),
-                $(M(R), {
-                  class: n(["uikit-transition-transform motion-reduce:uikit-transition-none", [b ? "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"])
-              ], 2)
-            ], 42, U),
-            e.withFieldset ? (l(), a("fieldset", {
-              key: 2,
-              "aria-hidden": "true",
-              class: n(["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 }
-              ]])
-            }, [
-              d("legend", {
-                class: n([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
-              }, [
-                e.label ? (l(), a("span", {
-                  key: 0,
-                  class: n(["uikit-mx-5px", [
-                    k.value.label ? "uikit-invisible" : "uikit-hidden"
-                  ]]),
-                  innerHTML: e.label
-                }, null, 10, D)) : u("", !0)
-              ], 2)
-            ], 2)) : u("", !0)
+              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"])
           ])
-        ]),
-        default: x(({ activeIdx: r, setActiveIdx: b }) => [
-          (l(!0), a(g, null, N(e.options, (o, c) => (l(), a("li", {
-            id: `${t.value}_element_${e.options[c].label}`,
-            key: `${o.label}_${c}`,
+        ], 10, K),
+        o("fieldset", {
+          "aria-hidden": "true",
+          class: a(["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: a([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
+          }, [
+            e.label ? (n(), u("span", {
+              key: 0,
+              class: a(["uikit-mx-5px", [k.value.label ? "uikit-invisible" : "uikit-hidden"]]),
+              innerHTML: e.label
+            }, null, 10, W)) : r("", !0)
+          ], 2)
+        ], 2),
+        o("ul", {
+          "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
+          role: "listbox",
+          tabindex: -1,
+          "aria-multiselectable": !1,
+          class: a(["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": !t.value },
+            {
+              "uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": t.value
+            },
+            { "uikit-bottom-[55px]": e.dropdownPosition === "top" },
+            { "uikit-top-[55px]": e.dropdownPosition === "bottom" },
+            e.dropdownClasses
+          ]]),
+          onClick: s[3] || (s[3] = c(() => {
+          }, ["stop"]))
+        }, [
+          (n(!0), u(V, null, N(e.options, (d, f) => (n(), u("li", {
+            id: `${l.value}_element_${e.options[f].label}`,
+            key: `${d.label}_${f}`,
             role: "option",
-            "aria-selected": r === c,
-            class: n(["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: f((s) => h(o), ["stop"]),
-            onMouseover: f((s) => b(c), ["stop"]),
-            onBlur: v[0] || (v[0] = f(() => {
+            "aria-selected": b(v) === f,
+            class: a(["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: c((x) => w(d), ["stop"]),
+            onMouseover: c((x) => v.value = f, ["stop"]),
+            onBlur: s[2] || (s[2] = c(() => {
             }, ["stop"]))
           }, [
-            d("label", J, [
-              d("input", {
+            o("label", Q, [
+              o("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
-                name: `${t.value}_radio`,
+                name: `${l.value}_radio`,
                 type: "radio",
-                checked: o.label === k.value.label,
-                onInput: f((s) => h(o), ["stop"])
-              }, null, 40, O),
-              d("span", {
-                innerHTML: o.label
-              }, null, 8, Q)
+                checked: d.label === k.value.label,
+                onInput: c((x) => w(d), ["stop"])
+              }, null, 40, X),
+              o("span", {
+                innerHTML: d.label
+              }, null, 8, Y)
             ])
-          ], 42, G))), 128))
-        ]),
-        _: 3
-      }, 8, ["open", "class", "data-cy", "close-when-clicked-outside", "direction", "dropdown-classes"]),
-      e.feedback ? (l(), a(g, { key: 0 }, [
-        e.feedback.valid ? (l(), a("span", {
+          ], 42, J))), 128))
+        ], 10, G)
+      ], 2),
+      e.feedback ? (n(), u(V, { key: 0 }, [
+        e.feedback.valid ? (n(), u("span", {
           key: 0,
-          id: `${t.value}_valid_msg`,
+          id: `${l.value}_valid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12",
           innerHTML: e.isValid ? e.feedback.valid : ""
-        }, null, 8, X)) : u("", !0),
-        e.feedback.invalid ? (l(), a("span", {
+        }, null, 8, Z)) : r("", !0),
+        e.feedback.invalid ? (n(), u("span", {
           key: 1,
-          id: `${t.value}_invalid_msg`,
+          id: `${l.value}_invalid_msg`,
           "arial-live": i.$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, Y)) : u("", !0)
-      ], 64)) : u("", !0)
-    ]));
+        }, null, 8, _)) : r("", !0)
+      ], 64)) : r("", !0)
+    ], 2));
   }
 });
 export {
-  te as default
+  le as default
 };

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

@@ -17,7 +17,10 @@ const b = /* @__PURE__ */ n({
   },
   setup(e) {
     const o = c("isActive");
-    return (i, v) => (d(), u(t(h), { value: e.value }, {
+    return (i, v) => (d(), u(t(h), {
+      value: e.value,
+      "data-cy": e.dataCy
+    }, {
       default: a(() => [
         s(t(m), {
           as: e.headerTag,
@@ -29,7 +32,6 @@ const b = /* @__PURE__ */ n({
           default: a(() => [
             l(i.$slots, "header-content"),
             s(t(g), {
-              "data-cy": e.dataCy,
               class: r([
                 e.triggerClasses,
                 {
@@ -52,7 +54,7 @@ const b = /* @__PURE__ */ n({
                 ])
               ]),
               _: 3
-            }, 8, ["data-cy", "class"])
+            }, 8, ["class"])
           ]),
           _: 3
         }, 8, ["as", "class"]),
@@ -69,7 +71,7 @@ const b = /* @__PURE__ */ n({
         }, 8, ["class"])
       ]),
       _: 3
-    }, 8, ["value"]));
+    }, 8, ["value", "data-cy"]));
   }
 });
 export {