@lilydesignsystem/vue-motion-picker 0.1.2 → 0.3.0

package/LICENSE.md

@@ -0,0 +1,64 @@
+<!-- Synced from the canonical repository by bin/sync-special-files.
+     Do not edit here; edit the root copy and re-run the script.
+     Canonical: https://github.com/LilyDesignSystem/lily-design-system/blob/main/LICENSE.md -->
+
+# License
+
+Lily Design System™ is free open source software.
+
+License is any of these, at your option, or contact us for custom license options.
+
+* [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
+
+* [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
+
+* [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
+
+* [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
+
+* [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
+
+## SPDX
+
+The machine-readable expression for the choice above is:
+
+```
+SPDX-License-Identifier: MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause
+```
+
+Every package manifest in this repository should carry that expression, or a
+single identifier from the list where the packaging format does not accept a
+disjunction. You do not need permission to pick one: choose whichever member of
+the list suits your project and comply with that one.
+
+This applies to the whole repository — the component catalog, the seven headless
+libraries, the seven example applications, the seven helper catalogs, the
+`themes/` stylesheets, the `bin/` tooling, and the documentation.
+
+## Scope note
+
+This file supersedes an earlier `CC BY-NC-SA` notice. That notice was a content
+license with a non-commercial clause, it was not an open-source license, and it
+contradicted both the specification and the published packages. It should not be
+relied on. If you obtained Lily under it and that raises a question for you,
+contact <joel@joelparkerhenderson.com>.
+
+## Trademarks
+
+Lily™ and Lily Design System™ are trademarks. The trademarks are distinct from
+the software license: a trademark claim (™) asserts use of the marks and is
+independent of the licenses above. A license to the software is not a license to
+the marks.
+
+You may say your project uses Lily, is built with Lily, or is compatible with
+Lily. Please do not use the marks as the name of your fork or product, or in a
+way that suggests affiliation or endorsement. For any use beyond that, contact
+<joel@joelparkerhenderson.com>.
+
+## Third-party references
+
+Lily's example applications and `themes/` stylesheets take visual reference from
+public-sector design systems including NHS UK, GOV.UK, and USWDS. Lily is not
+affiliated with, endorsed by, or connected to any of those organisations. Their
+names and marks belong to them, and this license grants nothing in respect of
+them.

package/dist/MotionPicker.vue.d.ts

@@ -37,6 +37,8 @@ export type Props = {
     target?: HTMLElement | null;
     /** Optional pretty labels per slug. */
     motionLabels?: Record<string, string>;
+    /** Disables the button; an open popup closes. The popup's open state is `v-model:open`. */
+    disabled?: boolean;
     /** Extra CSS class on the root element. */
     class?: string;
 };
@@ -57,10 +59,19 @@ export declare function prefersReducedMotion(): boolean;
 export declare function nextMotionPickerId(): string;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    /** Is the popup open? Bindable: `v-model:open` (the picker keeps its own state when none is bound). */
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+} & {
     "update:value": (value: string) => any;
     change: (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props & {
+    /** Is the popup open? Bindable: `v-model:open` (the picker keeps its own state when none is bound). */
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
 }>, {
@@ -70,6 +81,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props,
     name: string;
     target: HTMLElement | null;
     motionLabels: Record<string, string>;
+    disabled: boolean;
     class: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {

package/dist/index.js

@@ -1,16 +1,16 @@
-import { Fragment as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, guardReactiveProps as a, nextTick as o, normalizeClass as s, normalizeProps as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, watch as _, withCtx as v } from "vue";
-import { IconButton as y, Listbox as b } from "@lilydesignsystem/vue-headless";
-//#region lily-design-system-vue-motion-picker/MotionPicker.vue?vue&type=script&setup=true&lang.ts
-var x = ["name", "value"], S = [
+import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, guardReactiveProps as o, mergeModels as s, nextTick as c, normalizeClass as l, normalizeProps as ee, onBeforeUnmount as u, onMounted as te, openBlock as d, ref as f, renderList as p, renderSlot as ne, toDisplayString as m, unref as h, useModel as g, watch as _, withCtx as v } from "vue";
+import { IconButton as re, Listbox as y } from "@lilydesignsystem/vue-headless";
+//#region MotionPicker.vue?vue&type=script&setup=true&lang.ts
+var b = ["name", "value"], x = ["hidden"], ie = [
 	"id",
 	"aria-selected",
 	"data-active",
 	"onClick"
 ];
-function C(e) {
+function S(e) {
 	return e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
 }
-function w() {
+function C() {
 	if (typeof window > "u" || typeof window.matchMedia != "function") return !1;
 	try {
 		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -18,15 +18,15 @@ function w() {
 		return !1;
 	}
 }
-var T = 0;
-function E() {
-	return T += 1, `motion-picker-${T}`;
+var w = 0;
+function T() {
+	return w += 1, `motion-picker-${w}`;
 }
 //#endregion
-//#region lily-design-system-vue-motion-picker/MotionPicker.vue
-var D = /* @__PURE__ */ i({
+//#region MotionPicker.vue
+var E = /* @__PURE__ */ a({
 	__name: "MotionPicker",
-	props: {
+	props: /*@__PURE__*/ s({
 		label: {},
 		motions: {},
 		value: { default: "" },
@@ -35,116 +35,159 @@ var D = /* @__PURE__ */ i({
 		name: { default: "motion" },
 		target: { default: void 0 },
 		motionLabels: { default: () => ({}) },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
 		class: { default: "" }
-	},
-	emits: ["update:value", "change"],
-	setup(i, { emit: T }) {
-		let D = i, O = T, k = E(), A = `${k}-list`, j = (e) => `${k}-option-${e}`, M = f(!1), N = f(-1), P = f(null), F = f(null), I = f(null);
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["update:value", "change"], ["update:open"]),
+	setup(a, { emit: s }) {
+		let w = a, E = s, D = T(), O = `${D}-list`, k = (e) => `${D}-option-${e}`, A = g(a, "open");
+		_(() => w.disabled, (e) => {
+			e && (A.value = !1);
+		}, { immediate: !0 });
+		let j = `${D}-tooltip`, M = f(!1), N = f(!1), P = f(!1), F = f(!1), I = t(() => !A.value && !F.value && (M.value || N.value || P.value));
+		function ae() {
+			M.value = !0, F.value = !1;
+		}
+		function oe() {
+			M.value = !1;
+		}
 		function L(e) {
-			let t = D.motionLabels ?? {};
-			return e in t ? t[e] : C(e);
+			try {
+				P.value = e.currentTarget.matches(":focus-visible");
+			} catch {
+				P.value = !0;
+			}
+		}
+		function R() {
+			P.value = !1, F.value = !1;
+		}
+		function z(e) {
+			e.key === "Escape" && I.value && (F.value = !0);
 		}
-		function R(e) {
-			if (!(typeof document > "u" || !e)) {
-				if ((D.target ?? document.documentElement).setAttribute("data-motion", e), D.storageKey) try {
-					localStorage.setItem(D.storageKey, e);
+		function B(e) {
+			e.key === "Escape" && (F.value = !0);
+		}
+		let V = !1;
+		function H(e) {
+			typeof document < "u" && e !== V && (V = e, e ? document.addEventListener("keydown", B) : document.removeEventListener("keydown", B));
+		}
+		_(I, (e) => H(e), { flush: "sync" }), u(() => H(!1));
+		let U = f(-1), W = f(null), G = f(null), K = f(null);
+		function q(e) {
+			let t = w.motionLabels ?? {};
+			return e in t ? t[e] : S(e);
+		}
+		function J(e) {
+			if (typeof document < "u" && e) {
+				if ((w.target ?? document.documentElement).setAttribute("data-motion", e), w.storageKey) try {
+					localStorage.setItem(w.storageKey, e);
 				} catch {}
-				O("change", e);
+				E("change", e);
 			}
 		}
-		let z = f(D.value ?? "");
-		function B(e) {
-			z.value = e, O("update:value", e);
+		let Y = f(w.value ?? "");
+		function se(e) {
+			Y.value = e, E("update:value", e);
 		}
-		_(() => D.value, (e) => {
-			e !== void 0 && e !== z.value && (z.value = e);
-		}), _(z, (e, t) => {
-			e && e !== t && R(e);
+		_(() => w.value, (e) => {
+			e !== void 0 && e !== Y.value && (Y.value = e);
+		}), _(Y, (e, t) => {
+			e && e !== t && J(e);
 		});
-		async function V(e) {
-			let t = D.motions.indexOf(z.value);
-			N.value = D.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), M.value = !0, await o(), F.value?.el?.focus({ preventScroll: !0 });
+		async function X(e) {
+			let t = w.motions.indexOf(Y.value);
+			U.value = w.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), A.value = !0, await c(), G.value?.el?.focus({ preventScroll: !0 });
 		}
-		async function H(e = !0) {
-			M.value && (M.value = !1, N.value = -1, e && (await o(), P.value?.el?.focus({ preventScroll: !0 })));
+		async function Z(e = !0) {
+			A.value && (A.value = !1, U.value = -1, e && (await c(), W.value?.el?.focus({ preventScroll: !0 })));
 		}
-		function U(e) {
-			let t = D.motions[e];
-			t && B(t), H();
+		function Q(e) {
+			let t = w.motions[e];
+			t && se(t), Z();
 		}
-		function W() {
-			N.value < 0 || !F.value?.el || document.getElementById(j(N.value))?.scrollIntoView?.({ block: "nearest" });
+		function ce() {
+			U.value < 0 || !G.value?.el || document.getElementById(k(U.value))?.scrollIntoView?.({ block: "nearest" });
 		}
-		_(N, () => W());
-		function G() {
-			P.value?.el?.focus?.({ preventScroll: !0 }), H(!1);
+		_(U, () => ce());
+		function le() {
+			W.value?.el?.focus?.({ preventScroll: !0 }), Z(!1);
 		}
-		function K() {
-			M.value ? H() : V();
+		function ue() {
+			M.value = !1, A.value ? Z() : X();
 		}
-		function q(e) {
-			switch (e.key) {
+		function de(e) {
+			switch (z(e), e.key) {
 				case "ArrowDown":
 				case "Enter":
 				case " ":
-					e.preventDefault(), V();
+					e.preventDefault(), X();
 					break;
-				case "ArrowUp": e.preventDefault(), V(D.motions.length - 1);
+				case "ArrowUp": e.preventDefault(), X(w.motions.length - 1);
 			}
 		}
-		function J(e) {
+		function fe(e) {
 			let t = e.relatedTarget;
-			t && I.value?.contains(t) || H(!1);
+			t && K.value?.contains(t) || Z(!1);
 		}
-		function Y(e) {
-			if (!M.value) return;
+		function $(e) {
+			if (!A.value) return;
 			let t = e.target;
-			t && I.value && !I.value.contains(t) && H(!1);
+			t && K.value && !K.value.contains(t) && Z(!1);
 		}
-		return u(() => {
-			document.addEventListener("click", Y);
-			let e = z.value;
-			if (!e && D.storageKey) try {
-				e = localStorage.getItem(D.storageKey) ?? "";
+		return te(() => {
+			document.addEventListener("click", $);
+			let e = Y.value;
+			if (!e && w.storageKey) try {
+				e = localStorage.getItem(w.storageKey) ?? "";
 			} catch {}
 			if (!e) {
-				let t = w() ? "reduce" : "no-preference";
-				e = D.defaultValue ?? (D.motions.includes(t) ? t : void 0) ?? D.motions[0] ?? "";
-			}
-			if (e && e !== z.value) {
-				z.value = e, O("update:value", e);
-				return;
+				let t = C() ? "reduce" : "no-preference";
+				e = w.defaultValue ?? (w.motions.includes(t) ? t : void 0) ?? w.motions[0] ?? "";
 			}
-			e && R(e);
-		}), l(() => {
-			document.removeEventListener("click", Y);
-		}), (o, l) => (d(), t("div", {
+			e && e !== Y.value ? (Y.value = e, E("update:value", e)) : e && J(e);
+		}), u(() => {
+			document.removeEventListener("click", $);
+		}), (t, s) => (d(), n("div", {
 			ref_key: "rootEl",
-			ref: I,
-			class: s(`motion-picker ${D.class}`.trim()),
-			onFocusout: J
+			ref: K,
+			class: l(`motion-picker ${w.class}`.trim()),
+			onFocusout: fe
 		}, [
-			n("input", {
+			r("input", {
 				type: "hidden",
-				name: i.name,
-				value: z.value
-			}, null, 8, x),
-			r(g(y), {
+				name: a.name,
+				value: Y.value
+			}, null, 8, b),
+			i(h(re), {
+				disabled: a.disabled,
 				ref_key: "buttonEl",
-				ref: P,
+				ref: W,
 				baseClass: "motion-picker-button",
-				label: i.label,
+				label: a.label,
 				"aria-haspopup": "listbox",
-				"aria-expanded": M.value ? "true" : "false",
-				"aria-controls": A,
-				onClick: K,
-				onKeydown: q
+				"aria-expanded": A.value ? "true" : "false",
+				"aria-controls": O,
+				onClick: ue,
+				onKeydown: de,
+				onMouseenter: ae,
+				onMouseleave: oe,
+				onFocus: L,
+				onBlur: R
 			}, {
-				default: v(() => [m(o.$slots, "default", c(a({
-					value: z.value,
-					open: M.value,
-					labelFor: L
-				})), () => [l[2] ||= n("svg", {
+				default: v(() => [ne(t.$slots, "default", ee(o({
+					value: Y.value,
+					open: A.value,
+					labelFor: q
+				})), () => [s[4] ||= r("svg", {
 					class: "motion-picker-icon",
 					viewBox: "0 0 16 16",
 					width: "1.05rem",
@@ -155,36 +198,48 @@ var D = /* @__PURE__ */ i({
 					"stroke-width": "1.6",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [n("path", { d: "M5 3v10M11 3v10" })], -1)])]),
+				}, [r("path", { d: "M5 3v10M11 3v10" })], -1)])]),
 				_: 3
-			}, 8, ["label", "aria-expanded"]),
-			r(g(b), {
+			}, 8, [
+				"disabled",
+				"label",
+				"aria-expanded"
+			]),
+			r("div", {
+				class: "motion-picker-tooltip",
+				role: "tooltip",
+				id: j,
+				hidden: !I.value || void 0,
+				onMouseenter: s[0] ||= (e) => N.value = !0,
+				onMouseleave: s[1] ||= (e) => N.value = !1
+			}, m(a.label), 41, x),
+			i(h(y), {
 				ref_key: "listEl",
-				ref: F,
+				ref: G,
 				as: "ul",
 				baseClass: "motion-picker-list",
-				id: A,
-				label: i.label,
+				id: O,
+				label: a.label,
 				navigation: "active-descendant",
 				clamp: "",
 				typeahead: "",
 				pageSize: 10,
-				activeIndex: N.value,
-				"onUpdate:activeIndex": l[0] ||= (e) => N.value = e,
-				hidden: !M.value || void 0,
-				onActivate: U,
-				onEscape: l[1] ||= () => H(),
-				onTabOut: G
+				activeIndex: U.value,
+				"onUpdate:activeIndex": s[2] ||= (e) => U.value = e,
+				hidden: !A.value || void 0,
+				onActivate: Q,
+				onEscape: s[3] ||= () => Z(),
+				onTabOut: le
 			}, {
-				default: v(() => [(d(!0), t(e, null, p(i.motions, (e, n) => (d(), t("li", {
+				default: v(() => [(d(!0), n(e, null, p(a.motions, (e, t) => (d(), n("li", {
 					key: e,
 					class: "motion-picker-option",
-					id: j(n),
+					id: k(t),
 					role: "option",
-					"aria-selected": e === z.value ? "true" : "false",
-					"data-active": n === N.value ? "" : void 0,
-					onClick: (e) => U(n)
-				}, h(L(e)), 9, S))), 128))]),
+					"aria-selected": e === Y.value ? "true" : "false",
+					"data-active": t === U.value ? "" : void 0,
+					onClick: (e) => Q(t)
+				}, m(q(e)), 9, ie))), 128))]),
 				_: 1
 			}, 8, [
 				"label",
@@ -195,4 +250,4 @@ var D = /* @__PURE__ */ i({
 	}
 });
 //#endregion
-export { D as MotionPicker, D as default, C as motionName, E as nextMotionPickerId, w as prefersReducedMotion };
+export { E as MotionPicker, E as default, S as motionName, T as nextMotionPickerId, C as prefersReducedMotion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilydesignsystem/vue-motion-picker",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "engines": {
     "node": "=26"
   },
@@ -21,14 +21,27 @@
     "README.md"
   ],
   "scripts": {
-    "prepublishOnly": "cd .. && npm run build"
+    "build": "node build.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@lilydesignsystem/vue-headless": "^0.2.0"
+    "@lilydesignsystem/vue-headless": "^0.4.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/test-utils": "^2.5.1",
+    "jsdom": "^30.1.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.3",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.11"
+  },
   "keywords": [
     "lily",
     "design",
@@ -42,7 +55,7 @@
   "license": "MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/LilyDesignSystem/lily-design-system-vue-helpers.git",
+    "url": "git+https://github.com/LilyDesignSystem/lily-design-system.git",
     "directory": "lily-design-system-vue-motion-picker"
   },
   "homepage": "https://lilydesignsystem.com/",