@case-framework/survey-ui 0.6.0 → 0.6.2
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/README.md +8 -0
- package/dist/survey-editor-animations.css +87 -0
- package/dist/survey-editor-animations.css.d.ts +2 -0
- package/dist/survey-ui.cjs.js +65 -65
- package/dist/survey-ui.cjs.js.map +1 -1
- package/dist/survey-ui.css +1 -1
- package/dist/survey-ui.es.js +14614 -14216
- package/dist/survey-ui.es.js.map +1 -1
- package/package.json +6 -7
package/README.md
CHANGED
|
@@ -18,6 +18,14 @@ import "@case-framework/survey-ui/editor-defaults.css";
|
|
|
18
18
|
|
|
19
19
|
`@case-framework/survey-ui/css` already includes these defaults, so the standalone file is only needed when the host wants a separate variables-only layer.
|
|
20
20
|
|
|
21
|
+
If the host already provides the package's UI styles and only needs the editor's
|
|
22
|
+
mode-switch animations, import the animation rules without the package's global
|
|
23
|
+
stylesheet:
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import "@case-framework/survey-ui/editor-animations.css";
|
|
27
|
+
```
|
|
28
|
+
|
|
21
29
|
If the host app uses Tailwind CSS v4, add the package as a source in the host global CSS file so Tailwind also scans the editor package:
|
|
22
30
|
|
|
23
31
|
```css
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.survey-editor-opening-item {
|
|
2
|
+
--survey-editor-open-item-x: 18%;
|
|
3
|
+
--survey-editor-open-item-y: 0;
|
|
4
|
+
--survey-editor-open-item-accent-shadow:
|
|
5
|
+
0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
|
|
6
|
+
inset -5px 0 0 color-mix(in oklab, var(--ring) 70%, transparent);
|
|
7
|
+
|
|
8
|
+
height: 100%;
|
|
9
|
+
min-height: 0;
|
|
10
|
+
animation: survey-editor-open-item 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
11
|
+
will-change: transform, opacity;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.survey-editor-opening-item[data-opening-direction="left"] {
|
|
15
|
+
--survey-editor-open-item-x: -18%;
|
|
16
|
+
--survey-editor-open-item-y: 0;
|
|
17
|
+
--survey-editor-open-item-accent-shadow:
|
|
18
|
+
0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
|
|
19
|
+
inset 5px 0 0 color-mix(in oklab, var(--ring) 70%, transparent);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.survey-editor-opening-item[data-opening-direction="right"] {
|
|
23
|
+
--survey-editor-open-item-x: 18%;
|
|
24
|
+
--survey-editor-open-item-y: 0;
|
|
25
|
+
--survey-editor-open-item-accent-shadow:
|
|
26
|
+
0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
|
|
27
|
+
inset -5px 0 0 color-mix(in oklab, var(--ring) 70%, transparent);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.survey-editor-opening-item[data-opening-direction="up"] {
|
|
31
|
+
--survey-editor-open-item-x: 0;
|
|
32
|
+
--survey-editor-open-item-y: -12%;
|
|
33
|
+
--survey-editor-open-item-accent-shadow:
|
|
34
|
+
0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
|
|
35
|
+
inset 0 5px 0 color-mix(in oklab, var(--ring) 70%, transparent);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.survey-editor-opening-item[data-opening-direction="down"] {
|
|
39
|
+
--survey-editor-open-item-x: 0;
|
|
40
|
+
--survey-editor-open-item-y: 12%;
|
|
41
|
+
--survey-editor-open-item-accent-shadow:
|
|
42
|
+
0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
|
|
43
|
+
inset 0 -5px 0 color-mix(in oklab, var(--ring) 70%, transparent);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.survey-editor-opening-item > * {
|
|
47
|
+
animation: survey-editor-open-item-accent 260ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.survey-editor-opening-preview {
|
|
51
|
+
--survey-editor-open-item-x: -18%;
|
|
52
|
+
--survey-editor-open-item-y: 0;
|
|
53
|
+
|
|
54
|
+
animation: survey-editor-open-item 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
55
|
+
will-change: transform, opacity;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes survey-editor-open-item {
|
|
59
|
+
from {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
transform: translate(var(--survey-editor-open-item-x), var(--survey-editor-open-item-y));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
to {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
transform: translate(0, 0);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes survey-editor-open-item-accent {
|
|
71
|
+
0% {
|
|
72
|
+
box-shadow: var(--survey-editor-open-item-accent-shadow);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
100% {
|
|
76
|
+
box-shadow: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@media (prefers-reduced-motion: reduce) {
|
|
81
|
+
.survey-editor-opening-item,
|
|
82
|
+
.survey-editor-opening-item > *,
|
|
83
|
+
.survey-editor-opening-preview {
|
|
84
|
+
animation: none;
|
|
85
|
+
will-change: auto;
|
|
86
|
+
}
|
|
87
|
+
}
|