@lilydesignsystem/vue-motion-picker 0.3.0 → 0.3.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.
- package/LICENSE.md +8 -8
- package/README.md +82 -0
- package/dist/index.js +2 -4
- package/index.md +11 -11
- package/package.json +10 -9
package/LICENSE.md
CHANGED
|
@@ -8,15 +8,15 @@ Lily Design System™ is free open source software.
|
|
|
8
8
|
|
|
9
9
|
License is any of these, at your option, or contact us for custom license options.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
- [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
- [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
- [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))
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
- [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))
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
- [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
|
|
20
20
|
|
|
21
21
|
## SPDX
|
|
22
22
|
|
|
@@ -31,9 +31,9 @@ single identifier from the list where the packaging format does not accept a
|
|
|
31
31
|
disjunction. You do not need permission to pick one: choose whichever member of
|
|
32
32
|
the list suits your project and comply with that one.
|
|
33
33
|
|
|
34
|
-
This applies to the whole repository — the component catalog, the
|
|
35
|
-
libraries, the
|
|
36
|
-
|
|
34
|
+
This applies to the whole repository — the component catalog, the headless
|
|
35
|
+
libraries, the example applications, the helper packages, the `themes/`
|
|
36
|
+
stylesheets, the `bin/` tooling, and the documentation.
|
|
37
37
|
|
|
38
38
|
## Scope note
|
|
39
39
|
|
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# MotionPicker (Vue helper)
|
|
2
|
+
|
|
3
|
+
A reusable Vue 3 headless **motion (reduced-motion) picker** — an icon
|
|
4
|
+
button that opens a WAI-ARIA APG listbox of motion-preference slugs.
|
|
5
|
+
On every change it sets `data-motion="{slug}"` on a target element
|
|
6
|
+
(default `document.documentElement`), optionally persisting the choice
|
|
7
|
+
to `localStorage`. Ships no CSS — the consumer decides what
|
|
8
|
+
`data-motion="reduce"` actually suppresses, e.g.:
|
|
9
|
+
|
|
10
|
+
```css
|
|
11
|
+
:root[data-motion="reduce"] * {
|
|
12
|
+
animation-duration: 0.001ms !important;
|
|
13
|
+
animation-iteration-count: 1 !important;
|
|
14
|
+
transition-duration: 0.001ms !important;
|
|
15
|
+
scroll-behavior: auto !important;
|
|
16
|
+
}
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Unlike its `theme-picker` and `text-size-picker` siblings, MotionPicker's
|
|
20
|
+
initial value defers to the platform's own
|
|
21
|
+
`(prefers-reduced-motion: reduce)` media query before falling back to
|
|
22
|
+
an arbitrary default.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```vue
|
|
27
|
+
<script setup lang="ts">
|
|
28
|
+
import { ref } from "vue";
|
|
29
|
+
import MotionPicker from "@lilydesignsystem/vue-motion-picker";
|
|
30
|
+
|
|
31
|
+
const motion = ref("");
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<template>
|
|
35
|
+
<MotionPicker
|
|
36
|
+
label="Motion"
|
|
37
|
+
:motions="['no-preference', 'reduce']"
|
|
38
|
+
v-model:value="motion"
|
|
39
|
+
storageKey="lily-motion"
|
|
40
|
+
/>
|
|
41
|
+
</template>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Props
|
|
45
|
+
|
|
46
|
+
| Prop | Type | Required | Description |
|
|
47
|
+
| -------------- | ----------------------- | -------- | -------------------------------------------------------- |
|
|
48
|
+
| `label` | `string` | yes | Accessible name (`aria-label`) for the button + listbox. |
|
|
49
|
+
| `motions` | `string[]` | yes | Available motion slugs. |
|
|
50
|
+
| `value` | `string` | no | Selected slug. Two-way bindable via `v-model:value`. |
|
|
51
|
+
| `defaultValue` | `string` | no | Initial slug when nothing else is supplied. |
|
|
52
|
+
| `storageKey` | `string` | no | If set, persist the slug to `localStorage`. |
|
|
53
|
+
| `name` | `string` | no | `name` of the hidden input (default `"motion"`). |
|
|
54
|
+
| `target` | `HTMLElement \| null` | no | Element to receive `data-motion`. Default `<html>`. |
|
|
55
|
+
| `motionLabels` | `Record<string,string>` | no | Pretty labels per slug. |
|
|
56
|
+
| `class` | `string` | no | Extra CSS class on the root. |
|
|
57
|
+
|
|
58
|
+
Emits `change` (the applied slug) and `update:value` (for
|
|
59
|
+
`v-model:value`).
|
|
60
|
+
|
|
61
|
+
## Behaviour
|
|
62
|
+
|
|
63
|
+
Initial value resolves from `value` > storage > `defaultValue` > the
|
|
64
|
+
platform's `(prefers-reduced-motion: reduce)` preference (mapped to
|
|
65
|
+
`"reduce"` / `"no-preference"` if either is in `motions`) > `motions[0]`.
|
|
66
|
+
All DOM writes happen inside `onMounted`/`watch`, so the component is
|
|
67
|
+
SSR-safe.
|
|
68
|
+
|
|
69
|
+
## Accessibility
|
|
70
|
+
|
|
71
|
+
- WCAG 2.2 AAA target; directly supports 2.3.3 (Animation from
|
|
72
|
+
Interactions).
|
|
73
|
+
- APG listbox keyboard contract: arrows (clamped), `Home` / `End`,
|
|
74
|
+
`PageUp` / `PageDown` (by ten), typeahead with same-character
|
|
75
|
+
cycling, `Escape` discards, and `Tab` closes via the button so the
|
|
76
|
+
default Tab proceeds from the picker's position.
|
|
77
|
+
- `aria-label` carries the consumer-supplied accessible name.
|
|
78
|
+
- Default labels title-case the slug.
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
Lily™ and Lily Design System™ are trademarks.
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
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";
|
|
2
2
|
import { IconButton as re, Listbox as y } from "@lilydesignsystem/vue-headless";
|
|
3
|
-
|
|
3
|
+
// MotionPicker.vue?vue&type=script&setup=true&lang.ts
|
|
4
4
|
var b = ["name", "value"], x = ["hidden"], ie = [
|
|
5
5
|
"id",
|
|
6
6
|
"aria-selected",
|
|
@@ -22,8 +22,7 @@ var w = 0;
|
|
|
22
22
|
function T() {
|
|
23
23
|
return w += 1, `motion-picker-${w}`;
|
|
24
24
|
}
|
|
25
|
-
|
|
26
|
-
//#region MotionPicker.vue
|
|
25
|
+
// MotionPicker.vue
|
|
27
26
|
var E = /* @__PURE__ */ a({
|
|
28
27
|
__name: "MotionPicker",
|
|
29
28
|
props: /*@__PURE__*/ s({
|
|
@@ -249,5 +248,4 @@ var E = /* @__PURE__ */ a({
|
|
|
249
248
|
], 34));
|
|
250
249
|
}
|
|
251
250
|
});
|
|
252
|
-
//#endregion
|
|
253
251
|
export { E as MotionPicker, E as default, S as motionName, T as nextMotionPickerId, C as prefersReducedMotion };
|
package/index.md
CHANGED
|
@@ -43,17 +43,17 @@ const motion = ref("");
|
|
|
43
43
|
|
|
44
44
|
## Props
|
|
45
45
|
|
|
46
|
-
| Prop | Type
|
|
47
|
-
| -------------- |
|
|
48
|
-
| `label` | `string`
|
|
49
|
-
| `motions` | `string[]`
|
|
50
|
-
| `value` | `string`
|
|
51
|
-
| `defaultValue` | `string`
|
|
52
|
-
| `storageKey` | `string`
|
|
53
|
-
| `name` | `string`
|
|
54
|
-
| `target` | `HTMLElement \| null`
|
|
55
|
-
| `motionLabels` | `Record<string,string>`
|
|
56
|
-
| `class` | `string`
|
|
46
|
+
| Prop | Type | Required | Description |
|
|
47
|
+
| -------------- | ----------------------- | -------- | -------------------------------------------------------- |
|
|
48
|
+
| `label` | `string` | yes | Accessible name (`aria-label`) for the button + listbox. |
|
|
49
|
+
| `motions` | `string[]` | yes | Available motion slugs. |
|
|
50
|
+
| `value` | `string` | no | Selected slug. Two-way bindable via `v-model:value`. |
|
|
51
|
+
| `defaultValue` | `string` | no | Initial slug when nothing else is supplied. |
|
|
52
|
+
| `storageKey` | `string` | no | If set, persist the slug to `localStorage`. |
|
|
53
|
+
| `name` | `string` | no | `name` of the hidden input (default `"motion"`). |
|
|
54
|
+
| `target` | `HTMLElement \| null` | no | Element to receive `data-motion`. Default `<html>`. |
|
|
55
|
+
| `motionLabels` | `Record<string,string>` | no | Pretty labels per slug. |
|
|
56
|
+
| `class` | `string` | no | Extra CSS class on the root. |
|
|
57
57
|
|
|
58
58
|
Emits `change` (the applied slug) and `update:value` (for
|
|
59
59
|
`v-model:value`).
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lilydesignsystem/vue-motion-picker",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"engines": {
|
|
5
|
-
"node": "
|
|
5
|
+
"node": ">=26"
|
|
6
6
|
},
|
|
7
7
|
"description": "Lily Design System - Vue 3 motion (reduced-motion) picker",
|
|
8
8
|
"type": "module",
|
|
@@ -23,24 +23,25 @@
|
|
|
23
23
|
"scripts": {
|
|
24
24
|
"build": "node build.mjs",
|
|
25
25
|
"test": "vitest run",
|
|
26
|
+
"check": "vue-tsc --noEmit -p tsconfig.lib.json",
|
|
26
27
|
"test:watch": "vitest",
|
|
27
28
|
"prepublishOnly": "npm run build"
|
|
28
29
|
},
|
|
29
30
|
"dependencies": {
|
|
30
|
-
"@lilydesignsystem/vue-headless": "^0.
|
|
31
|
+
"@lilydesignsystem/vue-headless": "^0.7.0"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
33
34
|
"vue": "^3.0.0"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
37
|
+
"@vitejs/plugin-vue": "^6.0.10",
|
|
37
38
|
"@vue/test-utils": "^2.5.1",
|
|
38
|
-
"jsdom": "^30.1.
|
|
39
|
+
"jsdom": "^30.1.3",
|
|
39
40
|
"typescript": "^5.9.3",
|
|
40
|
-
"vite": "^8.3.
|
|
41
|
-
"vitest": "^5.0.
|
|
42
|
-
"vue": "^3.5.
|
|
43
|
-
"vue-tsc": "^3.3.
|
|
41
|
+
"vite": "^8.3.5",
|
|
42
|
+
"vitest": "^5.0.5",
|
|
43
|
+
"vue": "^3.5.44",
|
|
44
|
+
"vue-tsc": "^3.3.14"
|
|
44
45
|
},
|
|
45
46
|
"keywords": [
|
|
46
47
|
"lily",
|