npm - @wikicasa-dev/components - Versions diffs - 2.8.0 → 2.8.1-alpha.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

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

package/dist/UIKit/BaseSelect/SelectItem.d.ts CHANGED Viewed

@@ -2,6 +2,17 @@ type __VLS_Props = {
     label?: string;
     active?: boolean;
     idx?: number;
+    /**
+     * Whether becoming active should move real DOM focus onto the item.
+     *
+     * Focus exists here to serve keyboard navigation. Consumers that drive
+     * `active` from pointer events alone (touch synthesises `mouseover` before
+     * `click`) should turn this off: focusing the item runs scroll-into-view
+     * against every scrollable ancestor and blurs whatever held focus - on
+     * mobile that dismisses the soft keyboard, and both cost a forced layout
+     * before the tap is even processed.
+     */
+    focusOnActive?: boolean;
 };
 declare var __VLS_1: {
     itemIdx: number;
@@ -19,6 +30,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     label: string;
     active: boolean;
     idx: number;
+    focusOnActive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/UIKit/BaseSelect/SelectItem.vue.js CHANGED Viewed

@@ -8,13 +8,17 @@ var l = ["data-active", "tabindex"], u = ["innerHTML"], d = /*@__PURE__*/ n({
 			type: Boolean,
 			default: !1
 		},
-		idx: { default: -1 }
+		idx: { default: -1 },
+		focusOnActive: {
+			type: Boolean,
+			default: !0
+		}
 	},
 	emits: ["click", "mouseover"],
 	setup(n, { emit: d }) {
 		let f = d, p = n, m = s("liItem");
 		return c(() => p.active, (e) => {
-			e && r(() => {
+			e && p.focusOnActive && r(() => {
 				m.value && m.value.focus();
 			});
 		}, { immediate: !0 }), (r, s) => (a(), e("li", {

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

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

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

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

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

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

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

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

package/package.json CHANGED Viewed

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

/package/dist/assets/{swiper-thumbs.css → swiper-keyboard.css} RENAMED Viewed

File without changes