@wikicasa-dev/components 2.6.7-alpha.7 → 2.6.8

package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts

@@ -1,6 +1,10 @@
 import { AccessibleSelectOptions } from '../AccessibleSelect';
 import { ClassTypeProp } from '../types';
 import { Nullable } from '@wikicasa-dev/types';
+export type ClearableAutocompleteSelectionTrigger = "click" | "enter";
+export type ClearableAutocompleteSelectionMeta = {
+    trigger: ClearableAutocompleteSelectionTrigger;
+};
 export interface ClearableAutocompleteProps<TID extends string | number | undefined, TPayload> {
     dataCy?: string;
     placeholder?: string;
@@ -20,7 +24,7 @@ export interface ClearableAutocompleteProps<TID extends string | number | undefi
     keepState?: Nullable<"closed" | "open">;
     disableCb?: boolean;
     onInputChangeCb: (v: string) => Promise<AccessibleSelectOptions<TPayload, TID>[]>;
-    onOptionSelectedCb?: Nullable<(v: AccessibleSelectOptions<TPayload, TID>) => void>;
+    onOptionSelectedCb?: Nullable<(v: AccessibleSelectOptions<TPayload, TID>, meta: ClearableAutocompleteSelectionMeta) => void>;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,15 +1,15 @@
-import { defineComponent as J, useModel as M, useId as Q, useTemplateRef as c, shallowRef as r, onBeforeMount as Y, onMounted as Z, onUnmounted as _, watch as O, nextTick as ee, openBlock as y, createBlock as I, withCtx as W, renderSlot as f, createCommentVNode as x, createElementBlock as L, createElementVNode as u, Fragment as te, renderList as le, normalizeClass as p, withDirectives as D, unref as ne, vModelText as oe, toDisplayString as ae, withModifiers as ie, normalizeStyle as ue, createTextVNode as se, vShow as re, mergeModels as N } from "vue";
-import de from "../BaseDropDown.vue.js";
+import { defineComponent as ee, useModel as U, useId as te, useTemplateRef as f, shallowRef as r, onBeforeMount as le, onMounted as ae, onUnmounted as ne, watch as V, nextTick as oe, openBlock as w, createBlock as I, withCtx as M, renderSlot as p, createCommentVNode as O, createElementBlock as P, createElementVNode as d, Fragment as ue, renderList as ie, normalizeClass as v, withDirectives as A, unref as se, vModelText as re, toDisplayString as de, withModifiers as ce, normalizeStyle as fe, createTextVNode as pe, vShow as ve, mergeModels as z } from "vue";
+import ke from "../BaseDropDown.vue.js";
 import '../../assets/BaseDropDown.css';/* empty css                   */
-import ce from "../BaseSelect/SelectItem.vue.js";
-import { debounce as fe } from "@wikicasa-dev/utilities";
-const pe = ["id", "data-cy", "placeholder"], ve = {
+import me from "../BaseSelect/SelectItem.vue.js";
+import { debounce as ye } from "@wikicasa-dev/utilities";
+const he = ["id", "data-cy", "placeholder"], we = {
   key: 1,
   name: "loading-state",
   class: "uikit-progress-bar-track uikit-absolute uikit-left-0 uikit-top-0 uikit-w-full"
-}, ke = ["innerHTML"], ge = /* @__PURE__ */ J({
+}, be = ["innerHTML"], Ue = /* @__PURE__ */ ee({
   __name: "ClearableAutocomplete",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ z({
     dataCy: {},
     placeholder: {},
     enableKeyboardController: { type: Boolean, default: !0 },
@@ -33,168 +33,195 @@ const pe = ["id", "data-cy", "placeholder"], ve = {
     },
     inputValueModifiers: {}
   }),
-  emits: /* @__PURE__ */ N(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
-  setup(t, { expose: K, emit: A }) {
-    const s = M(t, "open"), v = M(t, "modelValue"), a = M(t, "inputValue"), k = A, P = Q(), h = c("inputRef"), m = r(0), w = r(!1), d = r(!1), b = r(!1), R = r(null), o = r([]), $ = c("dropdownRef"), g = c("hiddenSpan"), B = c("inputWrapperRef"), F = c("clearButtonRef"), H = () => {
-      a.value = "", v.value = null, d.value = !1;
-    }, G = async (l) => {
-      if (!l) {
-        o.value = [], s.value = !1;
+  emits: /* @__PURE__ */ z(["input", "click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
+  setup(t, { expose: K, emit: L }) {
+    const u = U(t, "open"), k = U(t, "modelValue"), i = U(t, "inputValue"), m = L, N = te(), b = f("inputRef"), y = r(0), c = r(!1), h = r(!1), n = r(-1), C = r(-1), W = r(null), o = r([]), H = f("dropdownRef"), g = f("hiddenSpan"), B = f("inputWrapperRef"), x = f("clearButtonRef"), E = () => {
+      n.value = -1, C.value = -1;
+    }, X = () => {
+      i.value = "", k.value = null, c.value = !1, E();
+    }, j = async (e) => {
+      if (!e) {
+        o.value = [], u.value = !1, E();
         return;
       }
-      t.disableCb || (b.value = !0, o.value = await R.value?.(l)?.catch(() => []) || [], w.value = !0, b.value = !1, console.log("DEBUG:loading options completed"), s.value = !!o.value.length);
-    }, V = (l = -1) => {
-      const e = o.value[l];
-      !e || e.id === v.value?.id || (t.onOptionSelectedCb?.(e), a.value = e.label, s.value = !1, v.value = e, d.value = !0, o.value = []);
-    }, X = () => {
-      h.value?.select();
-    }, j = () => {
-      h.value?.focus();
+      t.disableCb || (h.value = !0, o.value = await W.value?.(e)?.catch(() => []) || [], E(), h.value = !1, u.value = !!o.value.length);
+    }, q = (e) => {
+      m("input", e), c.value = !1;
+    }, D = (e = -1, l) => {
+      const a = o.value[e];
+      !a || a.id === k.value?.id || (C.value = e, t.onOptionSelectedCb?.(a, { trigger: l }), i.value = a.label, u.value = !1, k.value = a, c.value = !0, o.value = []);
+    }, R = (e) => {
+      if (!t.enableKeyboardController || !u.value || ![
+        "ArrowUp",
+        "ArrowDown",
+        "Enter",
+        "Escape",
+        "PageUp",
+        "Home",
+        "PageDown",
+        "End"
+      ].includes(e.key))
+        return;
+      if (e.key === "Escape") {
+        n.value = C.value, u.value = !1, e.stopPropagation();
+        return;
+      }
+      if (!o.value.length)
+        return;
+      const l = o.value.length - 1;
+      if (["ArrowUp", "ArrowDown", "PageUp", "Home", "PageDown", "End"].includes(
+        e.key
+      ) && e.preventDefault(), e.key === "ArrowUp")
+        n.value = n.value <= 0 ? l : n.value - 1;
+      else if (e.key === "ArrowDown")
+        n.value = n.value >= l ? 0 : n.value + 1;
+      else if (e.key === "Enter") {
+        if (n.value === -1) return;
+        e.preventDefault(), D(n.value, "enter");
+      } else e.key === "PageUp" || e.key === "Home" ? n.value = 0 : (e.key === "PageDown" || e.key === "End") && (n.value = l);
+      e.stopPropagation();
+    }, G = (e) => {
+      m("keydown", e), R(e);
+    }, J = () => {
+      b.value?.select();
+    }, Q = () => {
+      b.value?.focus();
     };
     let T = null;
-    const U = () => {
-      const l = g.value, e = B.value, n = F.value;
-      if (!l || !e) return;
-      const S = l.offsetWidth, C = e.offsetWidth, i = t.clearButton?.offset || 0, E = t.clearButton?.width || n?.offsetWidth || 0, q = C - i - E, z = Math.min(S, q);
-      z !== m.value && (m.value = z);
+    const $ = () => {
+      const e = g.value, l = B.value, a = x.value;
+      if (!e || !l) return;
+      const s = e.offsetWidth, S = l.offsetWidth, Y = t.clearButton?.offset || 0, Z = t.clearButton?.width || a?.offsetWidth || 0, _ = S - Y - Z, F = Math.min(s, _);
+      F !== y.value && (y.value = F);
     };
-    return Y(() => {
-      R.value = fe({ delay: 300 }, async (l = "") => (s.value = !0, await t.onInputChangeCb(l)));
-    }), Z(() => {
+    return le(() => {
+      W.value = ye({ delay: 300 }, async (e = "") => (u.value = !0, await t.onInputChangeCb(e)));
+    }), ae(() => {
       B.value && (T = new ResizeObserver(() => {
-        U();
+        $();
       }), T.observe(B.value));
-    }), _(() => {
+    }), ne(() => {
       T?.disconnect();
-    }), O([a, g, F], () => {
-      ee(U);
-    }), O(
-      () => $.value?.selectedIdx,
-      (l) => {
-        const e = l ?? -1;
-        e !== -1 && V(e);
-      }
-    ), O(
-      v,
-      (l) => {
-        if (l?.label === a.value) return;
-        const e = l?.label || "";
-        a.value = e, e && (d.value = !0);
+    }), V([i, g, x], () => {
+      oe($);
+    }), V(
+      k,
+      (e) => {
+        if (e?.label === i.value) return;
+        const l = e?.label || "";
+        i.value = l, l && (c.value = !0);
       },
       { immediate: !0 }
     ), K({
-      getRootElement: () => $.value?.getRootElement(),
-      select: X,
-      focus: j
-    }), (l, e) => (y(), I(de, {
+      getRootElement: () => H.value?.getRootElement(),
+      select: J,
+      focus: Q
+    }), (e, l) => (w(), I(ke, {
       ref: "dropdownRef",
       class: "uikit-clearable-autocomplete",
       "data-cy": t.dataCy,
       "dropdown-element": "ul",
       "dropdown-classes": ["uikit-z-30", t.dropdownClasses],
       "keep-state": t.keepState === "closed" ? "closed" : "opened",
-      "activate-keyboard-controller": t.enableKeyboardController,
-      "reset-keyboard-controller": w.value,
-      "onUpdate:resetKeyboardController": e[5] || (e[5] = (n) => w.value = n),
-      open: s.value,
-      "onUpdate:open": e[6] || (e[6] = (n) => s.value = n)
+      "activate-keyboard-controller": !1,
+      open: u.value,
+      "onUpdate:open": l[3] || (l[3] = (a) => u.value = a)
     }, {
-      btn_slot: W(() => [
-        u("div", {
-          class: p(["uikit-text-16", t.triggerWrapperClasses]),
-          onClick: e[4] || (e[4] = (n) => k("click", n))
+      btn_slot: M(() => [
+        d("div", {
+          class: v(["uikit-text-16", t.triggerWrapperClasses]),
+          onClick: l[2] || (l[2] = (a) => m("click", a))
         }, [
-          f(l.$slots, "left-icon"),
-          u("div", {
+          p(e.$slots, "left-icon"),
+          d("div", {
             ref: "inputWrapperRef",
-            class: p(["uikit-relative", t.inputWrapperClasses])
+            class: v(["uikit-relative", t.inputWrapperClasses])
           }, [
-            D(u("input", {
+            A(d("input", {
               ref: "inputRef",
               "onUpdate:modelValue": [
-                e[0] || (e[0] = (n) => a.value = n),
-                G
+                l[0] || (l[0] = (a) => i.value = a),
+                j
               ],
-              id: ne(P),
+              id: se(N),
               "data-cy": t.dataCy ? `ac_input_${t.dataCy}` : "",
               type: "text",
               autocomplete: "off",
-              class: p(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", t.inputClasses]),
+              class: v(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", t.inputClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               },
               placeholder: t.placeholder,
-              onKeydown: e[1] || (e[1] = (n) => k("keydown", n)),
-              onInput: e[2] || (e[2] = (n) => {
-                k("input", n), d.value = !1;
-              }),
-              onClick: e[3] || (e[3] = (n) => {
-                k("inputClick", n), h.value?.select();
+              onKeydown: G,
+              onInput: q,
+              onClick: l[1] || (l[1] = (a) => {
+                m("inputClick", a), b.value?.select();
               })
-            }, null, 42, pe), [
-              [oe, a.value]
+            }, null, 42, he), [
+              [re, i.value]
             ]),
-            u("span", {
+            d("span", {
               ref_key: "hiddenSpan",
               ref: g,
-              class: p(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", t.hiddenTextClasses]),
+              class: v(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", t.hiddenTextClasses]),
               style: {
                 font: "inherit",
                 fontSize: "inherit"
               }
-            }, ae(a.value), 3),
-            D(u("button", {
+            }, de(i.value), 3),
+            A(d("button", {
               ref: "clearButtonRef",
               type: "button",
-              class: p(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", t.clearButton?.classes]),
+              class: v(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", t.clearButton?.classes]),
               "aria-label": "Clear input",
-              style: ue({
-                left: `${m.value + (t.clearButton?.offset || 0)}px`,
+              style: fe({
+                left: `${y.value + (t.clearButton?.offset || 0)}px`,
                 width: t.clearButton?.width ? `${t.clearButton.width}px` : "auto",
                 height: t.clearButton?.height ? `${t.clearButton.height}px` : "auto"
               }),
-              onClick: ie(H, ["stop"])
+              onClick: ce(X, ["stop"])
             }, [
-              f(l.$slots, "clear-icon", {}, () => [
-                e[7] || (e[7] = se("X", -1))
+              p(e.$slots, "clear-icon", {}, () => [
+                l[4] || (l[4] = pe("X", -1))
               ])
             ], 6), [
-              [re, d.value && m.value]
+              [ve, c.value && y.value]
             ])
           ], 2),
-          f(l.$slots, "right-icon")
+          p(e.$slots, "right-icon")
         ], 2)
       ]),
-      default: W(({ activeIdx: n, setActiveIdx: S }) => [
-        b.value && !o.value.length ? f(l.$slots, "loading-state", { key: 0 }) : x("", !0),
-        b.value && o.value.length ? (y(), L("div", ve, [...e[8] || (e[8] = [
-          u("div", { class: "uikit-progress-bar-fill" }, null, -1)
-        ])])) : x("", !0),
-        o.value.length ? (y(!0), L(te, { key: 2 }, le(o.value, (C, i) => (y(), I(ce, {
-          key: i,
-          active: n === i,
+      default: M(() => [
+        h.value && !o.value.length ? p(e.$slots, "loading-state", { key: 0 }) : O("", !0),
+        h.value && o.value.length ? (w(), P("div", we, [...l[5] || (l[5] = [
+          d("div", { class: "uikit-progress-bar-fill" }, null, -1)
+        ])])) : O("", !0),
+        o.value.length ? (w(!0), P(ue, { key: 2 }, ie(o.value, (a, s) => (w(), I(me, {
+          key: s,
+          active: n.value === s,
           class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-          onClick: (E) => V(i),
-          onMouseover: (E) => S(i)
+          onClick: (S) => D(s, "click"),
+          onKeydown: R,
+          onMouseover: (S) => n.value = s
         }, {
-          default: W(() => [
-            f(l.$slots, "option-content", {
-              option: C,
-              idx: i
+          default: M(() => [
+            p(e.$slots, "option-content", {
+              option: a,
+              idx: s
             }, () => [
-              u("span", {
-                innerHTML: C.label
-              }, null, 8, ke)
+              d("span", {
+                innerHTML: a.label
+              }, null, 8, be)
             ])
           ]),
           _: 2
-        }, 1032, ["active", "onClick", "onMouseover"]))), 128)) : x("", !0)
+        }, 1032, ["active", "onClick", "onMouseover"]))), 128)) : O("", !0)
       ]),
       _: 3
-    }, 8, ["data-cy", "dropdown-classes", "keep-state", "activate-keyboard-controller", "reset-keyboard-controller", "open"]));
+    }, 8, ["data-cy", "dropdown-classes", "keep-state", "open"]));
   }
 });
 export {
-  ge as default
+  Ue as default
 };

package/dist/assets/SwiperCarousel.css

@@ -1 +1 @@
-.swiper-pagination-bullet{--swiper-pagination-color: #ccc}.swiper-pagination-bullet-active{--swiper-pagination-color: #fff}
+.no-transition[data-v-c4229b26]{transition-duration:0ms!important}.disable-select[data-v-c4229b26]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-c4229b26]{pointer-events:auto!important}

package/dist/assets/SwiperPaginationPrimitive.css

@@ -0,0 +1 @@
+.swiper-pagination-bullet{--swiper-pagination-color: #ccc}.swiper-pagination-bullet-active{--swiper-pagination-color: #fff}

package/dist/components/carousel/Primitive/SwiperPaginationPrimitive.js

@@ -1,5 +1,5 @@
 import o from "./SwiperPaginationPrimitive.vue.js";
-import '../../../assets/SwiperCarousel.css';/* empty css                               */
+import '../../../assets/SwiperPaginationPrimitive.css';/* empty css                               */
 export {
   o as default
 };

package/dist/components/carousel/SwiperCarousel.js

@@ -1,5 +1,5 @@
 import o from "./SwiperCarousel.vue.js";
-import '../../assets/SwiperCarousel2.css';import '../../assets/SwiperCarousel.css';/* empty css                    */
+import '../../assets/SwiperCarousel.css';import '../../assets/SwiperPaginationPrimitive.css';/* empty css                    */
 /* empty css                    */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c4229b26"]]);

package/dist/index.js

@@ -1,6 +1,6 @@
 import { default as P } from "./UIKit/Accordion/BaseAccordion.vue.js";
 import { default as S } from "./UIKit/Accordion/BaseAccordionItem.vue.js";
-import './assets/baseCard.css';import './assets/SwiperSlideImagePrimitive.css';import './assets/SwiperCarousel.css';import './assets/BaseSnackbar.css';import './assets/baseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/baseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/BaseTabsIndicator.css';import './assets/BaseTabs.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                       */
+import './assets/baseCard.css';import './assets/SwiperSlideImagePrimitive.css';import './assets/SwiperPaginationPrimitive.css';import './assets/BaseSnackbar.css';import './assets/baseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/baseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/BaseTabsIndicator.css';import './assets/BaseTabs.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                       */
 import { default as I } from "./UIKit/Accordion/AccordionItemPrimitive.vue.js";
 import { default as h } from "./UIKit/Accordion/AccordionHeaderPrimitive.vue.js";
 import { default as w } from "./UIKit/Accordion/AccordionTriggerPrimitive.vue.js";

package/dist/lazyModules/Swiper/Autoplay/index.js

@@ -1,4 +1,4 @@
-import '../../../assets/swiper-keyboard.css';/* empty css                                                                                 */
+import '../../../assets/swiper-thumbs.css';/* empty css                                                                                 */
 import "swiper/modules";
 import { Autoplay as m } from "swiper/modules";
 export {

package/dist/lazyModules/Swiper/Controller/index.js

@@ -1,4 +1,4 @@
-import '../../../assets/swiper-keyboard.css';/* empty css                                                                                   */
+import '../../../assets/swiper-thumbs.css';/* empty css                                                                                   */
 import "swiper/modules";
 import { Controller as m } from "swiper/modules";
 export {

package/dist/lazyModules/Swiper/Keyboard/index.js

@@ -1,4 +1,4 @@
-import '../../../assets/swiper-keyboard.css';/* empty css                                                                                 */
+import '../../../assets/swiper-thumbs.css';/* empty css                                                                                 */
 import "swiper/modules";
 import { Keyboard as t } from "swiper/modules";
 export {

package/dist/lazyModules/Swiper/Thumbs/index.js

@@ -1,4 +1,4 @@
-import '../../../assets/swiper-keyboard.css';/* empty css                                                                               */
+import '../../../assets/swiper-thumbs.css';/* empty css                                                                               */
 import "swiper/modules";
 import { Thumbs as p } from "swiper/modules";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.6.7-alpha.7",
+  "version": "2.6.8",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -61,6 +61,7 @@
     "@histoire/plugin-vue": "^1.0.0-beta.1",
     "@types/node": "^25.9.1",
     "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/browser-playwright": "^4.1.8",
     "@vue/eslint-config-typescript": "^14.8.0",
     "@wikicasa-dev/svg-icons": "^1.3.6",
     "@wikicasa-dev/tailwind-plugins": "^0.0.6",
@@ -86,6 +87,8 @@
     "unplugin-dts": "1.0.2",
     "vite": "7.3.1",
     "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^4.1.8",
+    "vitest-browser-vue": "^2.1.0",
     "vue-router": "^5.1.0",
     "vue-tsc": "3.3.3"
   },
@@ -100,9 +103,11 @@
     "story:build": "histoire build",
     "story:preview": "histoire preview",
     "release:alpha": "pnpm version prerelease --preid=alpha && pnpm publish --tag alpha --no-git-checks",
+    "tsc": "vue-tsc --p ./tsconfig-build.json",
     "lint": "run-s lint:*",
     "lint:oxlint": "oxlint . --fix",
     "lint:eslint": "eslint . --fix --cache",
-    "format": "oxfmt src/"
+    "format": "oxfmt src/",
+    "test:browser": "vitest --config=vitest.browser.config.ts"
   }
 }

package/dist/assets/SwiperCarousel2.css

@@ -1 +0,0 @@
-.no-transition[data-v-c4229b26]{transition-duration:0ms!important}.disable-select[data-v-c4229b26]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-c4229b26]{pointer-events:auto!important}