@wikicasa-dev/components 2.2.9-alpha.6 → 2.2.9-alpha.61

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

@@ -1,10 +1,10 @@
-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,
+import { defineComponent as B, mergeModels as y, useModel as p, useId as F, useTemplateRef as z, computed as C, watch as I, createElementBlock as o, openBlock as l, createVNode as $, createCommentVNode as r, normalizeClass as s, withCtx as x, Fragment as g, renderList as N, withModifiers as f, createElementVNode as u, 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-12 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 = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, G = ["innerHTML"], J = ["id", "aria-selected", "onClick", "onMouseover"], O = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, Q = ["name", "checked", "onInput"], X = ["innerHTML"], Y = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], le = /* @__PURE__ */ B({
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ y({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -28,179 +28,173 @@ const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-cont
       default: () => ({ id: "", label: "" })
     },
     modelModifiers: {},
-    toggleDropdown: { type: Boolean, default: void 0 },
-    toggleDropdownModifiers: {}
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
   }),
-  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;
+  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open"]),
+  setup(e, { emit: V }) {
+    const T = V, k = p(e, "modelValue"), m = p(e, "open"), L = F(), H = z("dropdownRef"), t = C(() => e.namespace || L), w = C(() => !!k.value.label), h = (i) => {
+      m.value = !1, k.value = i;
     };
-    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), {
+    return I(
+      () => H.value?.selectedIdx,
+      (i) => {
+        i === void 0 || i === -1 || (h(e.options[i]), m.value = !1);
+      }
+    ), (i, v) => (l(), o("div", null, [
+      $(S, {
+        ref: "dropdownRef",
+        open: m.value,
+        "onUpdate:open": v[1] || (v[1] = (d) => m.value = d),
+        class: s([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: d, isOpen: b, activeIdx: a, setSelectedIdx: c }) => [
+          u("div", q, [
+            e.label ? (l(), o("label", {
               key: 0,
-              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
+              id: `${t.value}_label`,
+              class: s(["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 }
               ]]),
-              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, 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}`,
+            }, null, 10, K)) : r("", !0),
+            i.$slots.lefticon ? (l(), o("span", {
+              key: 1,
+              class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
+              onClick: f((n) => d(), ["stop"])
+            }, [
+              P(i.$slots, "lefticon")
+            ], 8, j)) : r("", !0),
+            u("button", {
+              id: `${t.value}_btn`,
+              ref: "btnEl",
+              type: "button",
+              "data-cy": e.dataCy,
+              class: s(["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": a >= 0 && b ? `${t.value}_element_${e.options[a].label}` : "",
+              "aria-invalid": e.isValid === !1,
+              "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
+              onClick: (n) => {
+                d(), T("click", n);
+              },
+              onKeydown: (n) => {
+                ["Enter", "Space"].includes(n.key) && (n.preventDefault(), n.stopPropagation(), c(a), d());
+              }
+            }, [
+              u("span", {
+                class: s(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
+                innerHTML: k.value?.visibleLabel || k.value?.label
+              }, null, 10, W),
+              u("span", D, [
+                e.isValid == !1 ? (l(), A(M(E), {
+                  key: 0,
+                  class: "uikit-mr-1",
+                  width: 20,
+                  height: 20,
+                  "stroke-color": "#FA4F64"
+                })) : r("", !0),
+                $(M(R), {
+                  class: s(["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"])
+              ])
+            ], 42, U),
+            u("fieldset", {
+              "aria-hidden": "true",
+              class: s(["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 }
+              ]])
+            }, [
+              u("legend", {
+                class: s([[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(), o("span", {
+                  key: 0,
+                  class: s(["uikit-mx-5px", [
+                    k.value.label ? "uikit-invisible" : "uikit-hidden"
+                  ]]),
+                  innerHTML: e.label
+                }, null, 10, G)) : r("", !0)
+              ], 2)
+            ], 2)
+          ])
+        ]),
+        default: x(({ activeIdx: d, setActiveIdx: b }) => [
+          (l(!0), o(g, null, N(e.options, (a, c) => (l(), o("li", {
+            id: `${t.value}_element_${e.options[c].label}`,
+            key: `${a.label}_${c}`,
             role: "option",
-            "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(() => {
+            "aria-selected": d === c,
+            class: s(["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((n) => h(a), ["stop"]),
+            onMouseover: f((n) => b(c), ["stop"]),
+            onBlur: v[0] || (v[0] = f(() => {
             }, ["stop"]))
           }, [
-            o("label", Q, [
-              o("input", {
+            u("label", O, [
+              u("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
-                name: `${l.value}_radio`,
+                name: `${t.value}_radio`,
                 type: "radio",
-                checked: d.label === k.value.label,
-                onInput: c((x) => w(d), ["stop"])
-              }, null, 40, X),
-              o("span", {
-                innerHTML: d.label
-              }, null, 8, Y)
+                checked: a.label === k.value.label,
+                onInput: f((n) => h(a), ["stop"])
+              }, null, 40, Q),
+              u("span", {
+                innerHTML: a.label
+              }, null, 8, X)
             ])
           ], 42, J))), 128))
-        ], 10, G)
-      ], 2),
-      e.feedback ? (n(), u(V, { key: 0 }, [
-        e.feedback.valid ? (n(), u("span", {
+        ]),
+        _: 3
+      }, 8, ["open", "class", "data-cy", "close-when-clicked-outside", "direction", "dropdown-classes"]),
+      e.feedback ? (l(), o(g, { key: 0 }, [
+        e.feedback.valid ? (l(), o("span", {
           key: 0,
-          id: `${l.value}_valid_msg`,
+          id: `${t.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, Z)) : r("", !0),
-        e.feedback.invalid ? (n(), u("span", {
+        }, null, 8, Y)) : r("", !0),
+        e.feedback.invalid ? (l(), o("span", {
           key: 1,
-          id: `${l.value}_invalid_msg`,
+          id: `${t.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, _)) : r("", !0)
+        }, null, 8, Z)) : r("", !0)
       ], 64)) : r("", !0)
-    ], 2));
+    ]));
   }
 });
 export {

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

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