@wikicasa-dev/components 2.6.14 → 2.8.0-alpha.0

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

@@ -20,6 +20,7 @@ export interface ClearableAutocompleteProps<TID extends string | number | undefi
         offset?: number;
         width?: number;
         height?: number;
+        dataCy?: string;
     };
     keepState?: Nullable<"closed" | "open">;
     disableCb?: boolean;

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

@@ -1,17 +1,16 @@
 import e from "../BaseSelect/SelectItem.js";
 import t from "../BaseDropDown.js";
-import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeMount as p, onMounted as m, onUnmounted as h, openBlock as g, renderList as ee, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, useId as x, useModel as S, useTemplateRef as C, vModelText as w, vShow as T, watch as E, withCtx as D, withDirectives as O, withModifiers as te } from "vue";
-import { debounce as ne } from "@wikicasa-dev/utilities";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, renderList as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, useId as x, useModel as S, useTemplateRef as C, vModelText as w, vShow as T, watch as E, withCtx as D, withDirectives as O, withModifiers as ee } from "vue";
 import '../../assets/ClearableAutocomplete.css';//#region lib/UIKit/Autocomplete/ClearableAutocomplete.vue?vue&type=script&setup=true&lang.ts
-var re = [
+var te = [
 	"id",
 	"data-cy",
 	"placeholder"
-], k = {
+], ne = ["data-cy"], re = {
 	key: 1,
 	name: "loading-state",
 	class: "uikit-progress-bar-track uikit-absolute uikit-left-0 uikit-top-0 uikit-w-full"
-}, A = ["innerHTML"], j = /*@__PURE__*/ c({
+}, ie = ["innerHTML"], k = /*@__PURE__*/ c({
 	__name: "ClearableAutocomplete",
 	props: /*@__PURE__*/ l({
 		dataCy: {},
@@ -54,24 +53,45 @@ var re = [
 		"update:modelValue",
 		"update:inputValue"
 	]),
-	setup(c, { expose: l, emit: j }) {
-		let M = S(c, "open"), N = S(c, "modelValue"), P = S(c, "inputValue"), F = j, I = x(), L = C("inputRef"), R = v(0), z = v(!1), B = v(!1), V = v(-1), H = v(-1), U = v(null), W = v([]), G = C("dropdownRef"), K = C("hiddenSpan"), q = C("inputWrapperRef"), J = C("clearButtonRef"), Y = () => {
-			V.value = -1, H.value = -1;
-		}, ie = () => {
-			P.value = "", N.value = null, z.value = !1, Y();
-		}, ae = async (e) => {
+	setup(c, { expose: l, emit: k }) {
+		let A = S(c, "open"), j = S(c, "modelValue"), M = S(c, "inputValue"), N = k, P = x(), F = C("inputRef"), I = v(0), L = v(!1), R = v(!1), z = v(-1), B = v(-1), V = v([]), H = null, U = 0, ae = C("dropdownRef"), W = C("hiddenSpan"), G = C("inputWrapperRef"), K = C("clearButtonRef"), q = () => {
+			z.value = -1, B.value = -1;
+		}, J = () => {
+			H &&= (clearTimeout(H), null), U += 1, R.value = !1;
+		}, oe = (e) => {
+			J();
+			let t = U;
+			R.value = !0, H = setTimeout(async () => {
+				H = null, A.value = !0;
+				let n = [];
+				try {
+					n = await c.onInputChangeCb(e);
+				} catch {
+					n = [];
+				}
+				t === U && (V.value = n, q(), R.value = !1, A.value = !!V.value.length);
+			}, 300);
+		}, Y = () => {
+			J(), V.value = [], A.value = !1, M.value = "", j.value = null, L.value = !1, q();
+		}, se = () => {
+			Y();
+		}, ce = (e) => {
 			if (!e) {
-				W.value = [], M.value = !1, Y();
+				Y();
 				return;
 			}
-			c.disableCb || (B.value = !0, W.value = await U.value?.(e)?.catch(() => []) || [], Y(), B.value = !1, M.value = !!W.value.length);
-		}, oe = (e) => {
-			F("input", e), z.value = !1;
+			if (c.disableCb && e === j.value?.label) {
+				J();
+				return;
+			}
+			oe(e);
+		}, le = (e) => {
+			N("input", e), L.value = !1;
 		}, X = (e = -1, t) => {
-			let n = W.value[e];
-			!n || n.id === N.value?.id || (H.value = e, c.onOptionSelectedCb?.(n, { trigger: t }), P.value = n.label, M.value = !1, N.value = n, z.value = !0, W.value = []);
+			let n = V.value[e];
+			!n || n.id === j.value?.id || (B.value = e, c.onOptionSelectedCb?.(n, { trigger: t }), M.value = n.label, A.value = !1, j.value = n, L.value = !0, J(), V.value = []);
 		}, Z = (e) => {
-			if (!c.enableKeyboardController || !M.value || ![
+			if (!c.enableKeyboardController || !A.value || ![
 				"ArrowUp",
 				"ArrowDown",
 				"Enter",
@@ -82,11 +102,11 @@ var re = [
 				"End"
 			].includes(e.key)) return;
 			if (e.key === "Escape") {
-				V.value = H.value, M.value = !1, e.stopPropagation();
+				z.value = B.value, A.value = !1, e.stopPropagation();
 				return;
 			}
-			if (!W.value.length) return;
-			let t = W.value.length - 1;
+			if (!V.value.length) return;
+			let t = V.value.length - 1;
 			if ([
 				"ArrowUp",
 				"ArrowDown",
@@ -94,48 +114,46 @@ var re = [
 				"Home",
 				"PageDown",
 				"End"
-			].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") V.value = V.value <= 0 ? t : V.value - 1;
-			else if (e.key === "ArrowDown") V.value = V.value >= t ? 0 : V.value + 1;
+			].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") z.value = z.value <= 0 ? t : z.value - 1;
+			else if (e.key === "ArrowDown") z.value = z.value >= t ? 0 : z.value + 1;
 			else if (e.key === "Enter") {
-				if (V.value === -1) return;
-				e.preventDefault(), X(V.value, "enter");
-			} else e.key === "PageUp" || e.key === "Home" ? V.value = 0 : (e.key === "PageDown" || e.key === "End") && (V.value = t);
+				if (z.value === -1) return;
+				e.preventDefault(), X(z.value, "enter");
+			} else e.key === "PageUp" || e.key === "Home" ? z.value = 0 : (e.key === "PageDown" || e.key === "End") && (z.value = t);
 			e.stopPropagation();
-		}, se = (e) => {
-			F("keydown", e), Z(e);
-		}, ce = () => {
-			L.value?.select();
-		}, le = () => {
-			L.value?.focus();
+		}, ue = (e) => {
+			N("keydown", e), Z(e);
+		}, de = () => {
+			F.value?.select();
+		}, fe = () => {
+			F.value?.focus();
 		}, Q = null, $ = () => {
-			let e = K.value, t = q.value, n = J.value;
+			let e = W.value, t = G.value, n = K.value;
 			if (!e || !t) return;
 			let r = e.offsetWidth, i = t.offsetWidth, a = c.clearButton?.offset || 0, o = c.clearButton?.width || n?.offsetWidth || 0, s = i - a - o, l = Math.min(r, s);
-			l !== R.value && (R.value = l);
+			l !== I.value && (I.value = l);
 		};
 		return p(() => {
-			U.value = ne({ delay: 300 }, async (e = "") => (M.value = !0, await c.onInputChangeCb(e)));
-		}), m(() => {
-			q.value && (Q = new ResizeObserver(() => {
+			G.value && (Q = new ResizeObserver(() => {
 				$();
-			}), Q.observe(q.value));
-		}), h(() => {
-			Q?.disconnect();
+			}), Q.observe(G.value));
+		}), m(() => {
+			Q?.disconnect(), J();
 		}), E([
-			P,
-			K,
-			J
+			M,
+			W,
+			K
 		], () => {
 			u($);
-		}), E(N, (e) => {
-			if (e?.label === P.value) return;
+		}), E(j, (e) => {
+			if (e?.label === M.value) return;
 			let t = e?.label || "";
-			P.value = t, t && (z.value = !0);
+			M.value = t, t && (L.value = !0);
 		}, { immediate: !0 }), l({
-			getRootElement: () => G.value?.getRootElement(),
-			select: ce,
-			focus: le
-		}), (l, u) => (g(), r(t, {
+			getRootElement: () => ae.value?.getRootElement(),
+			select: de,
+			focus: fe
+		}), (l, u) => (h(), r(t, {
 			ref: "dropdownRef",
 			class: "uikit-clearable-autocomplete",
 			"data-cy": c.dataCy,
@@ -143,12 +161,12 @@ var re = [
 			"dropdown-classes": ["uikit-z-30", c.dropdownClasses],
 			"keep-state": c.keepState === "closed" ? "closed" : "opened",
 			"activate-keyboard-controller": !1,
-			open: M.value,
-			"onUpdate:open": u[3] ||= (e) => M.value = e
+			open: A.value,
+			"onUpdate:open": u[3] ||= (e) => A.value = e
 		}, {
 			btn_slot: D(() => [o("div", {
 				class: d(["uikit-text-16", c.triggerWrapperClasses]),
-				onClick: u[2] ||= (e) => F("click", e)
+				onClick: u[2] ||= (e) => N("click", e)
 			}, [
 				_(l.$slots, "left-icon"),
 				o("div", {
@@ -157,8 +175,8 @@ var re = [
 				}, [
 					O(o("input", {
 						ref: "inputRef",
-						"onUpdate:modelValue": [u[0] ||= (e) => P.value = e, ae],
-						id: b(I),
+						"onUpdate:modelValue": [u[0] ||= (e) => M.value = e, ce],
+						id: b(P),
 						"data-cy": c.dataCy ? `ac_input_${c.dataCy}` : "",
 						type: "text",
 						autocomplete: "off",
@@ -168,51 +186,52 @@ var re = [
 							fontSize: "inherit"
 						},
 						placeholder: c.placeholder,
-						onKeydown: se,
-						onInput: oe,
+						onKeydown: ue,
+						onInput: le,
 						onClick: u[1] ||= (e) => {
-							F("inputClick", e), L.value?.select();
+							N("inputClick", e), F.value?.select();
 						}
-					}, null, 42, re), [[w, P.value]]),
+					}, null, 42, te), [[w, M.value]]),
 					o("span", {
 						ref_key: "hiddenSpan",
-						ref: K,
+						ref: W,
 						class: d(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", c.hiddenTextClasses]),
 						style: {
 							font: "inherit",
 							fontSize: "inherit"
 						}
-					}, y(P.value), 3),
+					}, y(M.value), 3),
 					O(o("button", {
 						ref: "clearButtonRef",
 						type: "button",
 						class: d(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", c.clearButton?.classes]),
+						"data-cy": c.clearButton?.dataCy || "clear-btn",
 						"aria-label": "Clear input",
 						style: f({
-							left: `${R.value + (c.clearButton?.offset || 0)}px`,
+							left: `${I.value + (c.clearButton?.offset || 0)}px`,
 							width: c.clearButton?.width ? `${c.clearButton.width}px` : "auto",
 							height: c.clearButton?.height ? `${c.clearButton.height}px` : "auto"
 						}),
-						onClick: te(ie, ["stop"])
-					}, [_(l.$slots, "clear-icon", {}, () => [u[4] ||= s("X", -1)])], 6), [[T, z.value && R.value]])
+						onClick: ee(se, ["stop"])
+					}, [_(l.$slots, "clear-icon", {}, () => [u[4] ||= s("X", -1)])], 14, ne), [[T, L.value && I.value]])
 				], 2),
 				_(l.$slots, "right-icon")
 			], 2)]),
 			default: D(() => [
-				B.value && !W.value.length ? _(l.$slots, "loading-state", { key: 0 }) : i("", !0),
-				B.value && W.value.length ? (g(), a("div", k, [...u[5] ||= [o("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : i("", !0),
-				W.value.length ? (g(!0), a(n, { key: 2 }, ee(W.value, (t, n) => (g(), r(e, {
+				R.value && !V.value.length ? _(l.$slots, "loading-state", { key: 0 }) : i("", !0),
+				R.value && V.value.length ? (h(), a("div", re, [...u[5] ||= [o("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : i("", !0),
+				V.value.length ? (h(!0), a(n, { key: 2 }, g(V.value, (t, n) => (h(), r(e, {
 					key: n,
-					active: V.value === n,
+					active: z.value === n,
 					class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
 					onClick: (e) => X(n, "click"),
 					onKeydown: Z,
-					onMouseover: (e) => V.value = n
+					onMouseover: (e) => z.value = n
 				}, {
 					default: D(() => [_(l.$slots, "option-content", {
 						option: t,
 						idx: n
-					}, () => [o("span", { innerHTML: t.label }, null, 8, A)])]),
+					}, () => [o("span", { innerHTML: t.label }, null, 8, ie)])]),
 					_: 2
 				}, 1032, [
 					"active",
@@ -230,4 +249,4 @@ var re = [
 	}
 });
 //#endregion
-export { j as default };
+export { k as default };

package/dist/UIKit/Checkbox/v2/CheckboxButtonGroup.d.ts

@@ -1,41 +1,45 @@
-import { CheckboxRootProps, AcceptableValue } from 'reka-ui';
-export interface CheckboxButtonGroupProps {
+export type CheckboxValue = string | number | boolean | null | undefined;
+export interface CheckboxButtonGroupProps<T extends CheckboxValue = CheckboxValue> {
     dataCy?: string;
-    items?: CheckboxButtonItem[];
+    items?: CheckboxButtonItem<T>[];
     /**
      * Value of the reset button
      */
-    resetValue?: AcceptableValue;
+    resetValue?: T;
 }
-export interface CheckboxButtonItem {
+export interface CheckboxButtonItem<T extends CheckboxValue = CheckboxValue> {
     dataCy?: string;
-    value: CheckboxRootProps["value"];
+    value: T;
     required?: boolean;
     label: string;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<CheckboxButtonGroupProps & {
-    modelValue?: NonNullable<AcceptableValue>[];
-    reset?: boolean;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: NonNullable<AcceptableValue>[]) => any;
-    "update:reset": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<CheckboxButtonGroupProps & {
-    modelValue?: NonNullable<AcceptableValue>[];
-    reset?: boolean;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((value: NonNullable<AcceptableValue>[]) => any) | undefined;
-    "onUpdate:reset"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {
-        isChecked: (value: CheckboxRootProps["value"]) => boolean;
-        handleCheck: (value: CheckboxRootProps["value"], checked: boolean) => void;
-        handleResetCheck: (checked: boolean) => void;
-    }) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+declare const __VLS_export: <T extends CheckboxValue = CheckboxValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(CheckboxButtonGroupProps<T> & {
+        modelValue?: NonNullable<T>[];
+        reset?: boolean;
+    }) & {
+        "onUpdate:modelValue"?: ((value: NonNullable<T>[]) => any) | undefined;
+        "onUpdate:reset"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            isChecked: (value: T) => boolean;
+            handleCheck: (value: T, checked: boolean) => void;
+            handleResetCheck: (checked: boolean) => void;
+        }) => any;
     };
+    emit: ((event: "update:modelValue", value: NonNullable<T>[]) => void) & ((event: "update:reset", value: boolean) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js

@@ -25,16 +25,10 @@ var h = ["data-cy"], g = /*@__PURE__*/ a({
 				o.value = n;
 				return;
 			}
-			n = n.filter((e) => e !== a.resetValue);
-			let r = Array.from(_.keys()).filter((e) => !n.includes(e));
-			console.log("DEBUG:handleCheck => update", {
-				registeredItems: _,
-				checkedList: n,
-				uncheckedList: r
-			}), r.length === _.size && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), n.length === _.size - 1 && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), o.value = n;
+			n = n.filter((e) => e !== a.resetValue), Array.from(_.keys()).filter((e) => !n.includes(e)).length === _.size && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), n.length === _.size - 1 && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), o.value = n;
 		}, b = (e) => {
 			if (a.resetValue) {
-				if (console.log("DEBUG:handleResetCheck", { resetValue: a.resetValue }), e) {
+				if (e) {
 					o.value = [a.resetValue];
 					return;
 				}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.6.14",
+  "version": "2.8.0-alpha.0",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -83,12 +83,12 @@
     "vue-router": "^5.1.0",
     "vue-tsc": "^3.3.3",
     "@wikicasa-dev/eslint-config": "0.0.0",
+    "@wikicasa-dev/tailwind-plugins": "0.0.7",
     "@wikicasa-dev/svg-icons": "1.3.7",
     "@wikicasa-dev/tsconfig": "0.0.0",
     "@wikicasa-dev/utilities": "1.2.11",
-    "@wikicasa-dev/types": "2.8.0",
     "@wikicasa-dev/vue-composables": "0.2.0",
-    "@wikicasa-dev/tailwind-plugins": "0.0.7"
+    "@wikicasa-dev/types": "2.8.0"
   },
   "readme": "ERROR: No README data found!",
   "scripts": {