@lilydesignsystem/vue-motion-picker 0.1.0 → 0.1.1

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 (2) hide show
  1. package/dist/index.js +122 -156
  2. package/package.json +4 -1
package/dist/index.js CHANGED
@@ -1,19 +1,16 @@
1
- import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, guardReactiveProps as i, nextTick as a, normalizeClass as o, normalizeProps as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, watch as h } from "vue";
1
+ 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";
2
+ import { IconButton as y, Listbox as b } from "@lilydesignsystem/vue-headless";
2
3
  //#region lily-design-system-vue-motion-picker/MotionPicker.vue?vue&type=script&setup=true&lang.ts
3
- var g = ["name", "value"], _ = ["aria-label", "aria-expanded"], v = [
4
- "aria-label",
5
- "aria-activedescendant",
6
- "hidden"
7
- ], y = [
4
+ var x = ["name", "value"], S = [
8
5
  "id",
9
6
  "aria-selected",
10
7
  "data-active",
11
8
  "onClick"
12
9
  ];
13
- function b(e) {
10
+ function C(e) {
14
11
  return e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
15
12
  }
16
- function x() {
13
+ function w() {
17
14
  if (typeof window > "u" || typeof window.matchMedia != "function") return !1;
18
15
  try {
19
16
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -21,13 +18,13 @@ function x() {
21
18
  return !1;
22
19
  }
23
20
  }
24
- var S = 0;
25
- function C() {
26
- return S += 1, `motion-picker-${S}`;
21
+ var T = 0;
22
+ function E() {
23
+ return T += 1, `motion-picker-${T}`;
27
24
  }
28
25
  //#endregion
29
26
  //#region lily-design-system-vue-motion-picker/MotionPicker.vue
30
- var w = /* @__PURE__ */ r({
27
+ var D = /* @__PURE__ */ i({
31
28
  __name: "MotionPicker",
32
29
  props: {
33
30
  label: {},
@@ -41,192 +38,161 @@ var w = /* @__PURE__ */ r({
41
38
  class: { default: "" }
42
39
  },
43
40
  emits: ["update:value", "change"],
44
- setup(r, { emit: S }) {
45
- let w = r, T = S, E = C(), D = `${E}-list`, O = (e) => `${E}-option-${e}`, k = d(!1), A = d(-1), j = d(null), M = d(null), N = d(null), P = "", F;
46
- function I(e) {
47
- let t = w.motionLabels ?? {};
48
- return e in t ? t[e] : b(e);
49
- }
41
+ setup(i, { emit: T }) {
42
+ 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);
50
43
  function L(e) {
44
+ let t = D.motionLabels ?? {};
45
+ return e in t ? t[e] : C(e);
46
+ }
47
+ function R(e) {
51
48
  if (!(typeof document > "u" || !e)) {
52
- if ((w.target ?? document.documentElement).setAttribute("data-motion", e), w.storageKey) try {
53
- localStorage.setItem(w.storageKey, e);
49
+ if ((D.target ?? document.documentElement).setAttribute("data-motion", e), D.storageKey) try {
50
+ localStorage.setItem(D.storageKey, e);
54
51
  } catch {}
55
- T("change", e);
52
+ O("change", e);
56
53
  }
57
54
  }
58
- let R = d(w.value ?? "");
59
- function z(e) {
60
- R.value = e, T("update:value", e);
55
+ let z = f(D.value ?? "");
56
+ function B(e) {
57
+ z.value = e, O("update:value", e);
61
58
  }
62
- h(() => w.value, (e) => {
63
- e !== void 0 && e !== R.value && (R.value = e);
64
- }), h(R, (e, t) => {
65
- e && e !== t && L(e);
59
+ _(() => D.value, (e) => {
60
+ e !== void 0 && e !== z.value && (z.value = e);
61
+ }), _(z, (e, t) => {
62
+ e && e !== t && R(e);
66
63
  });
67
- async function B(e) {
68
- let t = w.motions.indexOf(R.value);
69
- A.value = w.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), k.value = !0, await a(), M.value?.focus({ preventScroll: !0 }), U();
70
- }
71
- async function V(e = !0) {
72
- k.value && (k.value = !1, A.value = -1, e && (await a(), j.value?.focus({ preventScroll: !0 })));
64
+ async function V(e) {
65
+ let t = D.motions.indexOf(z.value);
66
+ N.value = D.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), M.value = !0, await o(), F.value?.el?.focus({ preventScroll: !0 });
73
67
  }
74
- function H(e) {
75
- let t = w.motions[e];
76
- t && z(t), V();
68
+ async function H(e = !0) {
69
+ M.value && (M.value = !1, N.value = -1, e && (await o(), P.value?.el?.focus({ preventScroll: !0 })));
77
70
  }
78
- function U() {
79
- A.value < 0 || !M.value || document.getElementById(O(A.value))?.scrollIntoView?.({ block: "nearest" });
71
+ function U(e) {
72
+ let t = D.motions[e];
73
+ t && B(t), H();
80
74
  }
81
- function W(e) {
82
- if (w.motions.length === 0) return;
83
- let t = Math.min(Math.max(A.value + e, 0), w.motions.length - 1);
84
- A.value = t, U();
75
+ function W() {
76
+ N.value < 0 || !F.value?.el || document.getElementById(j(N.value))?.scrollIntoView?.({ block: "nearest" });
85
77
  }
86
- function G(e) {
87
- let t = e.toLowerCase(), n = P === "" || [...P].every((e) => e === t);
88
- P += t, clearTimeout(F), F = setTimeout(() => P = "", 500);
89
- let r = n ? t : P, i = A.value < 0 ? 0 : A.value, a = n ? i + 1 : i;
90
- for (let e = 0; e < w.motions.length; e++) {
91
- let t = (a + e) % w.motions.length;
92
- if (I(w.motions[t]).toLowerCase().startsWith(r)) {
93
- A.value = t, U();
94
- return;
95
- }
96
- }
78
+ _(N, () => W());
79
+ function G() {
80
+ P.value?.el?.focus?.({ preventScroll: !0 }), H(!1);
97
81
  }
98
82
  function K() {
99
- k.value ? V() : B();
83
+ M.value ? H() : V();
100
84
  }
101
85
  function q(e) {
102
86
  switch (e.key) {
103
87
  case "ArrowDown":
104
88
  case "Enter":
105
89
  case " ":
106
- e.preventDefault(), B();
107
- break;
108
- case "ArrowUp": e.preventDefault(), B(w.motions.length - 1);
109
- }
110
- }
111
- function J(e) {
112
- switch (e.key) {
113
- case "ArrowDown":
114
- e.preventDefault(), W(1);
115
- break;
116
- case "ArrowUp":
117
- e.preventDefault(), W(-1);
118
- break;
119
- case "Home":
120
- e.preventDefault(), A.value = 0, U();
121
- break;
122
- case "End":
123
- e.preventDefault(), A.value = w.motions.length - 1, U();
124
- break;
125
- case "Enter":
126
- case " ":
127
- e.preventDefault(), A.value >= 0 && H(A.value);
128
- break;
129
- case "Escape":
130
90
  e.preventDefault(), V();
131
91
  break;
132
- case "PageUp":
133
- e.preventDefault(), W(-10);
134
- break;
135
- case "PageDown":
136
- e.preventDefault(), W(10);
137
- break;
138
- case "Tab":
139
- j.value?.focus?.({ preventScroll: !0 }), V(!1);
140
- break;
141
- default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && G(e.key);
92
+ case "ArrowUp": e.preventDefault(), V(D.motions.length - 1);
142
93
  }
143
94
  }
144
- function Y(e) {
95
+ function J(e) {
145
96
  let t = e.relatedTarget;
146
- t && N.value?.contains(t) || V(!1);
97
+ t && I.value?.contains(t) || H(!1);
147
98
  }
148
- function X(e) {
149
- if (!k.value) return;
99
+ function Y(e) {
100
+ if (!M.value) return;
150
101
  let t = e.target;
151
- t && N.value && !N.value.contains(t) && V(!1);
102
+ t && I.value && !I.value.contains(t) && H(!1);
152
103
  }
153
- return l(() => {
154
- document.addEventListener("click", X);
155
- let e = R.value;
156
- if (!e && w.storageKey) try {
157
- e = localStorage.getItem(w.storageKey) ?? "";
104
+ return u(() => {
105
+ document.addEventListener("click", Y);
106
+ let e = z.value;
107
+ if (!e && D.storageKey) try {
108
+ e = localStorage.getItem(D.storageKey) ?? "";
158
109
  } catch {}
159
110
  if (!e) {
160
- let t = x() ? "reduce" : "no-preference";
161
- e = w.defaultValue ?? (w.motions.includes(t) ? t : void 0) ?? w.motions[0] ?? "";
111
+ let t = w() ? "reduce" : "no-preference";
112
+ e = D.defaultValue ?? (D.motions.includes(t) ? t : void 0) ?? D.motions[0] ?? "";
162
113
  }
163
- if (e && e !== R.value) {
164
- R.value = e, T("update:value", e);
114
+ if (e && e !== z.value) {
115
+ z.value = e, O("update:value", e);
165
116
  return;
166
117
  }
167
- e && L(e);
168
- }), c(() => {
169
- document.removeEventListener("click", X), clearTimeout(F);
170
- }), (a, c) => (u(), t("div", {
118
+ e && R(e);
119
+ }), l(() => {
120
+ document.removeEventListener("click", Y);
121
+ }), (o, l) => (d(), t("div", {
171
122
  ref_key: "rootEl",
172
- ref: N,
173
- class: o(`motion-picker ${w.class}`.trim()),
174
- onFocusout: Y
123
+ ref: I,
124
+ class: s(`motion-picker ${D.class}`.trim()),
125
+ onFocusout: J
175
126
  }, [
176
127
  n("input", {
177
128
  type: "hidden",
178
- name: r.name,
179
- value: R.value
180
- }, null, 8, g),
181
- n("button", {
129
+ name: i.name,
130
+ value: z.value
131
+ }, null, 8, x),
132
+ r(g(y), {
182
133
  ref_key: "buttonEl",
183
- ref: j,
184
- type: "button",
185
- class: "motion-picker-button",
186
- "aria-label": r.label,
134
+ ref: P,
135
+ baseClass: "motion-picker-button",
136
+ label: i.label,
187
137
  "aria-haspopup": "listbox",
188
- "aria-expanded": k.value ? "true" : "false",
189
- "aria-controls": D,
138
+ "aria-expanded": M.value ? "true" : "false",
139
+ "aria-controls": A,
190
140
  onClick: K,
191
141
  onKeydown: q
192
- }, [p(a.$slots, "default", s(i({
193
- value: R.value,
194
- open: k.value,
195
- labelFor: I
196
- })), () => [c[0] ||= n("svg", {
197
- class: "motion-picker-icon",
198
- viewBox: "0 0 16 16",
199
- width: "1.05rem",
200
- height: "1.05rem",
201
- "aria-hidden": "true",
202
- fill: "none",
203
- stroke: "currentColor",
204
- "stroke-width": "1.6",
205
- "stroke-linecap": "round",
206
- "stroke-linejoin": "round"
207
- }, [n("path", { d: "M5 3v10M11 3v10" })], -1)])], 40, _),
208
- n("ul", {
142
+ }, {
143
+ default: v(() => [m(o.$slots, "default", c(a({
144
+ value: z.value,
145
+ open: M.value,
146
+ labelFor: L
147
+ })), () => [l[2] ||= n("svg", {
148
+ class: "motion-picker-icon",
149
+ viewBox: "0 0 16 16",
150
+ width: "1.05rem",
151
+ height: "1.05rem",
152
+ "aria-hidden": "true",
153
+ fill: "none",
154
+ stroke: "currentColor",
155
+ "stroke-width": "1.6",
156
+ "stroke-linecap": "round",
157
+ "stroke-linejoin": "round"
158
+ }, [n("path", { d: "M5 3v10M11 3v10" })], -1)])]),
159
+ _: 3
160
+ }, 8, ["label", "aria-expanded"]),
161
+ r(g(b), {
209
162
  ref_key: "listEl",
210
- ref: M,
211
- class: "motion-picker-list",
212
- id: D,
213
- role: "listbox",
214
- "aria-label": r.label,
215
- "aria-activedescendant": k.value && A.value >= 0 ? O(A.value) : void 0,
216
- tabindex: "-1",
217
- hidden: !k.value || void 0,
218
- onKeydown: J
219
- }, [(u(!0), t(e, null, f(r.motions, (e, n) => (u(), t("li", {
220
- key: e,
221
- class: "motion-picker-option",
222
- id: O(n),
223
- role: "option",
224
- "aria-selected": e === R.value ? "true" : "false",
225
- "data-active": n === A.value ? "" : void 0,
226
- onClick: (e) => H(n)
227
- }, m(I(e)), 9, y))), 128))], 40, v)
163
+ ref: F,
164
+ as: "ul",
165
+ baseClass: "motion-picker-list",
166
+ id: A,
167
+ label: i.label,
168
+ navigation: "active-descendant",
169
+ clamp: "",
170
+ typeahead: "",
171
+ pageSize: 10,
172
+ activeIndex: N.value,
173
+ "onUpdate:activeIndex": l[0] ||= (e) => N.value = e,
174
+ hidden: !M.value || void 0,
175
+ onActivate: U,
176
+ onEscape: l[1] ||= () => H(),
177
+ onTabOut: G
178
+ }, {
179
+ default: v(() => [(d(!0), t(e, null, p(i.motions, (e, n) => (d(), t("li", {
180
+ key: e,
181
+ class: "motion-picker-option",
182
+ id: j(n),
183
+ role: "option",
184
+ "aria-selected": e === z.value ? "true" : "false",
185
+ "data-active": n === N.value ? "" : void 0,
186
+ onClick: (e) => U(n)
187
+ }, h(L(e)), 9, S))), 128))]),
188
+ _: 1
189
+ }, 8, [
190
+ "label",
191
+ "activeIndex",
192
+ "hidden"
193
+ ])
228
194
  ], 34));
229
195
  }
230
196
  });
231
197
  //#endregion
232
- export { w as MotionPicker, w as default, b as motionName, C as nextMotionPickerId, x as prefersReducedMotion };
198
+ export { D as MotionPicker, D as default, C as motionName, E as nextMotionPickerId, w as prefersReducedMotion };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lilydesignsystem/vue-motion-picker",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "engines": {
5
5
  "node": "=26"
6
6
  },
@@ -23,6 +23,9 @@
23
23
  "scripts": {
24
24
  "prepublishOnly": "cd .. && npm run build"
25
25
  },
26
+ "dependencies": {
27
+ "@lilydesignsystem/vue-headless": "^0.1.0"
28
+ },
26
29
  "peerDependencies": {
27
30
  "vue": "^3.0.0"
28
31
  },