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