@udixio/tailwind 2.1.0 → 2.3.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.
- package/CHANGELOG.md +21 -0
- package/dist/browser.cjs +1 -1
- package/dist/browser.js +2 -2
- package/dist/node.cjs +1 -1
- package/dist/node.js +2 -2
- package/dist/plugins-tailwind/animation.d.ts.map +1 -1
- package/dist/{tailwind.plugin-DmhUL7Oj.cjs → tailwind.plugin-B17YE6YC.cjs} +65 -52
- package/dist/{tailwind.plugin-DfVIrskO.js → tailwind.plugin-BXCTydiS.js} +65 -52
- package/package.json +1 -1
- package/src/plugins-tailwind/animation.ts +68 -52
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
## 2.3.0 (2025-10-16)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **animation:** add `run` and `paused` states for `out` animations ([dc134d3](https://github.com/Udixio/UI/commit/dc134d3))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Joël VIGREUX
|
|
10
|
+
|
|
11
|
+
## 2.2.0 (2025-10-16)
|
|
12
|
+
|
|
13
|
+
### 🚀 Features
|
|
14
|
+
|
|
15
|
+
- **animation:** refactor `createAnimation` to support enhanced parameterization and new utilities ([96d1423](https://github.com/Udixio/UI/commit/96d1423))
|
|
16
|
+
- **animation:** add `supportsNegativeValues` and enhance `slide` utility generation ([e9558db](https://github.com/Udixio/UI/commit/e9558db))
|
|
17
|
+
|
|
18
|
+
### ❤️ Thank You
|
|
19
|
+
|
|
20
|
+
- Joël VIGREUX
|
|
21
|
+
|
|
1
22
|
## 2.1.0 (2025-10-16)
|
|
2
23
|
|
|
3
24
|
### 🚀 Features
|
package/dist/browser.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const tailwind_plugin = require("./tailwind.plugin-
|
|
3
|
+
const tailwind_plugin = require("./tailwind.plugin-B17YE6YC.cjs");
|
|
4
4
|
exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
|
|
5
5
|
exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
|
|
6
6
|
exports.animation = tailwind_plugin.animation;
|
package/dist/browser.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { m as main } from "./tailwind.plugin-
|
|
2
|
-
import { T, b, a, f, s } from "./tailwind.plugin-
|
|
1
|
+
import { m as main } from "./tailwind.plugin-BXCTydiS.js";
|
|
2
|
+
import { T, b, a, f, s } from "./tailwind.plugin-BXCTydiS.js";
|
|
3
3
|
export {
|
|
4
4
|
T as TailwindImplPluginBrowser,
|
|
5
5
|
b as TailwindPlugin,
|
package/dist/node.cjs
CHANGED
|
@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
24
24
|
));
|
|
25
25
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
26
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
27
|
-
const tailwind_plugin = require("./tailwind.plugin-
|
|
27
|
+
const tailwind_plugin = require("./tailwind.plugin-B17YE6YC.cjs");
|
|
28
28
|
const theme = require("@udixio/theme");
|
|
29
29
|
const fs = require("fs");
|
|
30
30
|
const console = require("node:console");
|
package/dist/node.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-
|
|
5
|
-
import { a, f, s } from "./tailwind.plugin-
|
|
4
|
+
import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-BXCTydiS.js";
|
|
5
|
+
import { a, f, s } from "./tailwind.plugin-BXCTydiS.js";
|
|
6
6
|
import { PluginAbstract, FontPlugin } from "@udixio/theme";
|
|
7
7
|
import * as fs from "fs";
|
|
8
8
|
import * as console from "node:console";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/animation.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/animation.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiHD,eAAO,MAAM,SAAS,sFA0crB,CAAC"}
|
|
@@ -17,19 +17,17 @@ const createAnimationFunc = ({
|
|
|
17
17
|
const variableName = (propertyName) => {
|
|
18
18
|
return `--${prefix}-${propertyName}`;
|
|
19
19
|
};
|
|
20
|
-
const param = (propertyName) => {
|
|
21
|
-
var _a;
|
|
22
|
-
const defaultValue = (_a = values[propertyName]) == null ? void 0 : _a.DEFAULT;
|
|
20
|
+
const param = (propertyName, defaultValue = ((_a) => (_a = values[propertyName]) == null ? void 0 : _a.DEFAULT)()) => {
|
|
23
21
|
return `var(${variableName(propertyName)} ${defaultValue ? `, ${defaultValue}` : ""})`;
|
|
24
22
|
};
|
|
25
23
|
const dependencies = [];
|
|
26
|
-
Object.values(styles(param)).forEach((step) => {
|
|
24
|
+
Object.values(styles({ param, variableName })).forEach((step) => {
|
|
27
25
|
Object.keys(step).forEach((key) => {
|
|
28
26
|
dependencies.push(textCase.kebabCase(key));
|
|
29
27
|
});
|
|
30
28
|
});
|
|
31
29
|
addBase({
|
|
32
|
-
[`@keyframes ${prefix}-${name}`]: styles(param)
|
|
30
|
+
[`@keyframes ${prefix}-${name}`]: styles({ param, variableName })
|
|
33
31
|
});
|
|
34
32
|
addUtilities({
|
|
35
33
|
[`.${prefix}-${name}, .${prefix}-${name}-in, .${prefix}-${name}-out`]: {
|
|
@@ -69,7 +67,8 @@ const createAnimationFunc = ({
|
|
|
69
67
|
})
|
|
70
68
|
},
|
|
71
69
|
{
|
|
72
|
-
values: value.values
|
|
70
|
+
values: value.values,
|
|
71
|
+
supportsNegativeValues: value.supportsNegativeValues
|
|
73
72
|
}
|
|
74
73
|
);
|
|
75
74
|
});
|
|
@@ -77,7 +76,7 @@ const createAnimationFunc = ({
|
|
|
77
76
|
};
|
|
78
77
|
const animation = plugin.withOptions(
|
|
79
78
|
({ prefix = "anim" }) => {
|
|
80
|
-
return ({ addBase, matchUtilities, addUtilities }) => {
|
|
79
|
+
return ({ addBase, matchUtilities, addUtilities, theme: theme2 }) => {
|
|
81
80
|
const animationNames = /* @__PURE__ */ new Set();
|
|
82
81
|
const createAnimation = createAnimationFunc({
|
|
83
82
|
addBase,
|
|
@@ -105,6 +104,8 @@ const animation = plugin.withOptions(
|
|
|
105
104
|
// run/pause state
|
|
106
105
|
[`.${prefix}-in-run`]: { [`--${prefix}-in-state`]: "running" },
|
|
107
106
|
[`.${prefix}-in-paused`]: { [`--${prefix}-in-state`]: "paused" },
|
|
107
|
+
[`.${prefix}-out-run`]: { [`--${prefix}-out-state`]: "running" },
|
|
108
|
+
[`.${prefix}-out-paused`]: { [`--${prefix}-out-state`]: "paused" },
|
|
108
109
|
// scroll-driven
|
|
109
110
|
[`.${prefix}-timeline-block`]: {
|
|
110
111
|
animationTimeline: "view(block)"
|
|
@@ -122,18 +123,23 @@ const animation = plugin.withOptions(
|
|
|
122
123
|
});
|
|
123
124
|
addBase({
|
|
124
125
|
[`[data-${prefix}-in-run]`]: { [`--${prefix}-in-state`]: "running" },
|
|
125
|
-
[`[data-${prefix}-in-paused]`]: { [`--${prefix}-in-state`]: "paused" }
|
|
126
|
+
[`[data-${prefix}-in-paused]`]: { [`--${prefix}-in-state`]: "paused" },
|
|
127
|
+
[`[data-${prefix}-out-run]`]: { [`--${prefix}-out-state`]: "running" },
|
|
128
|
+
[`[data-${prefix}-out-paused]`]: {
|
|
129
|
+
[`--${prefix}-out-state`]: "paused"
|
|
130
|
+
}
|
|
126
131
|
});
|
|
127
132
|
createAnimation(
|
|
128
133
|
"fade",
|
|
129
|
-
(
|
|
134
|
+
({ param }) => ({
|
|
130
135
|
from: {
|
|
131
|
-
opacity:
|
|
136
|
+
opacity: param("opacity")
|
|
132
137
|
}
|
|
133
138
|
}),
|
|
134
139
|
{
|
|
135
140
|
opacity: {
|
|
136
141
|
DEFAULT: "0",
|
|
142
|
+
supportsNegativeValues: true,
|
|
137
143
|
values: {
|
|
138
144
|
0: "0",
|
|
139
145
|
5: "0.05",
|
|
@@ -156,13 +162,45 @@ const animation = plugin.withOptions(
|
|
|
156
162
|
);
|
|
157
163
|
createAnimation(
|
|
158
164
|
"scale",
|
|
159
|
-
(
|
|
165
|
+
({ param, variableName }) => ({
|
|
160
166
|
from: {
|
|
161
|
-
scale:
|
|
167
|
+
scale: `${param("scale-x", param("scale"))} ${param("scale-y", param("scale"))}`
|
|
162
168
|
}
|
|
163
169
|
}),
|
|
164
170
|
{
|
|
165
|
-
scale: {
|
|
171
|
+
["scale"]: {
|
|
172
|
+
DEFAULT: ".95",
|
|
173
|
+
values: {
|
|
174
|
+
0: "0",
|
|
175
|
+
50: ".5",
|
|
176
|
+
75: ".75",
|
|
177
|
+
90: ".9",
|
|
178
|
+
95: ".95",
|
|
179
|
+
100: "1",
|
|
180
|
+
105: "1.05",
|
|
181
|
+
110: "1.1",
|
|
182
|
+
125: "1.25",
|
|
183
|
+
150: "1.5"
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
["scale-x"]: {
|
|
187
|
+
as: "x",
|
|
188
|
+
DEFAULT: ".95",
|
|
189
|
+
values: {
|
|
190
|
+
0: "0",
|
|
191
|
+
50: ".5",
|
|
192
|
+
75: ".75",
|
|
193
|
+
90: ".9",
|
|
194
|
+
95: ".95",
|
|
195
|
+
100: "1",
|
|
196
|
+
105: "1.05",
|
|
197
|
+
110: "1.1",
|
|
198
|
+
125: "1.25",
|
|
199
|
+
150: "1.5"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
["scale-y"]: {
|
|
203
|
+
as: "y",
|
|
166
204
|
DEFAULT: ".95",
|
|
167
205
|
values: {
|
|
168
206
|
0: "0",
|
|
@@ -182,47 +220,22 @@ const animation = plugin.withOptions(
|
|
|
182
220
|
const slideValues = {
|
|
183
221
|
DEFAULT: "2rem",
|
|
184
222
|
values: {
|
|
223
|
+
...theme2("spacing"),
|
|
224
|
+
// échelle spacing
|
|
185
225
|
full: "100%",
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
1: "
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
4: "1rem",
|
|
196
|
-
5: "1.25rem",
|
|
197
|
-
6: "1.5rem",
|
|
198
|
-
7: "1.75rem",
|
|
199
|
-
8: "2rem",
|
|
200
|
-
9: "2.25rem",
|
|
201
|
-
10: "2.5rem",
|
|
202
|
-
11: "2.75rem",
|
|
203
|
-
12: "3rem",
|
|
204
|
-
14: "3.5rem",
|
|
205
|
-
16: "4rem",
|
|
206
|
-
20: "5rem",
|
|
207
|
-
24: "6rem",
|
|
208
|
-
28: "7rem",
|
|
209
|
-
32: "8rem",
|
|
210
|
-
36: "9rem",
|
|
211
|
-
40: "10rem",
|
|
212
|
-
44: "11rem",
|
|
213
|
-
48: "12rem",
|
|
214
|
-
52: "13rem",
|
|
215
|
-
56: "14rem",
|
|
216
|
-
60: "15rem",
|
|
217
|
-
64: "16rem",
|
|
218
|
-
72: "18rem",
|
|
219
|
-
80: "20rem",
|
|
220
|
-
96: "24rem"
|
|
221
|
-
}
|
|
226
|
+
// ajout de "full"
|
|
227
|
+
"1/2": "50%",
|
|
228
|
+
// (optionnel) fractions
|
|
229
|
+
"1/3": "33.333333%",
|
|
230
|
+
"2/3": "66.666667%",
|
|
231
|
+
"1/4": "25%",
|
|
232
|
+
"3/4": "75%"
|
|
233
|
+
},
|
|
234
|
+
supportsNegativeValues: true
|
|
222
235
|
};
|
|
223
236
|
createAnimation(
|
|
224
237
|
"slide",
|
|
225
|
-
(param) => ({
|
|
238
|
+
({ param }) => ({
|
|
226
239
|
from: {
|
|
227
240
|
translate: `calc(${param("distance")} * ${param("dx")}) calc(${param("distance")} * ${param("dy")});`
|
|
228
241
|
},
|
|
@@ -280,8 +293,8 @@ const animation = plugin.withOptions(
|
|
|
280
293
|
const dxdy = {
|
|
281
294
|
"from-top": { dx: "0", dy: "1" },
|
|
282
295
|
"from-bottom": { dx: "0", dy: "-1" },
|
|
283
|
-
"from-left": { dx: "1", dy: "0" },
|
|
284
|
-
"from-right": { dx: "
|
|
296
|
+
"from-left": { dx: "-1", dy: "0" },
|
|
297
|
+
"from-right": { dx: "1", dy: "0" },
|
|
285
298
|
"from-top-left": { dx: "1", dy: "1" },
|
|
286
299
|
"from-top-right": { dx: "-1", dy: "1" },
|
|
287
300
|
"from-bottom-left": { dx: "1", dy: "-1" },
|
|
@@ -16,19 +16,17 @@ const createAnimationFunc = ({
|
|
|
16
16
|
const variableName = (propertyName) => {
|
|
17
17
|
return `--${prefix}-${propertyName}`;
|
|
18
18
|
};
|
|
19
|
-
const param = (propertyName) => {
|
|
20
|
-
var _a;
|
|
21
|
-
const defaultValue = (_a = values[propertyName]) == null ? void 0 : _a.DEFAULT;
|
|
19
|
+
const param = (propertyName, defaultValue = ((_a) => (_a = values[propertyName]) == null ? void 0 : _a.DEFAULT)()) => {
|
|
22
20
|
return `var(${variableName(propertyName)} ${defaultValue ? `, ${defaultValue}` : ""})`;
|
|
23
21
|
};
|
|
24
22
|
const dependencies = [];
|
|
25
|
-
Object.values(styles(param)).forEach((step) => {
|
|
23
|
+
Object.values(styles({ param, variableName })).forEach((step) => {
|
|
26
24
|
Object.keys(step).forEach((key) => {
|
|
27
25
|
dependencies.push(kebabCase(key));
|
|
28
26
|
});
|
|
29
27
|
});
|
|
30
28
|
addBase({
|
|
31
|
-
[`@keyframes ${prefix}-${name}`]: styles(param)
|
|
29
|
+
[`@keyframes ${prefix}-${name}`]: styles({ param, variableName })
|
|
32
30
|
});
|
|
33
31
|
addUtilities({
|
|
34
32
|
[`.${prefix}-${name}, .${prefix}-${name}-in, .${prefix}-${name}-out`]: {
|
|
@@ -68,7 +66,8 @@ const createAnimationFunc = ({
|
|
|
68
66
|
})
|
|
69
67
|
},
|
|
70
68
|
{
|
|
71
|
-
values: value.values
|
|
69
|
+
values: value.values,
|
|
70
|
+
supportsNegativeValues: value.supportsNegativeValues
|
|
72
71
|
}
|
|
73
72
|
);
|
|
74
73
|
});
|
|
@@ -76,7 +75,7 @@ const createAnimationFunc = ({
|
|
|
76
75
|
};
|
|
77
76
|
const animation = plugin.withOptions(
|
|
78
77
|
({ prefix = "anim" }) => {
|
|
79
|
-
return ({ addBase, matchUtilities, addUtilities }) => {
|
|
78
|
+
return ({ addBase, matchUtilities, addUtilities, theme }) => {
|
|
80
79
|
const animationNames = /* @__PURE__ */ new Set();
|
|
81
80
|
const createAnimation = createAnimationFunc({
|
|
82
81
|
addBase,
|
|
@@ -104,6 +103,8 @@ const animation = plugin.withOptions(
|
|
|
104
103
|
// run/pause state
|
|
105
104
|
[`.${prefix}-in-run`]: { [`--${prefix}-in-state`]: "running" },
|
|
106
105
|
[`.${prefix}-in-paused`]: { [`--${prefix}-in-state`]: "paused" },
|
|
106
|
+
[`.${prefix}-out-run`]: { [`--${prefix}-out-state`]: "running" },
|
|
107
|
+
[`.${prefix}-out-paused`]: { [`--${prefix}-out-state`]: "paused" },
|
|
107
108
|
// scroll-driven
|
|
108
109
|
[`.${prefix}-timeline-block`]: {
|
|
109
110
|
animationTimeline: "view(block)"
|
|
@@ -121,18 +122,23 @@ const animation = plugin.withOptions(
|
|
|
121
122
|
});
|
|
122
123
|
addBase({
|
|
123
124
|
[`[data-${prefix}-in-run]`]: { [`--${prefix}-in-state`]: "running" },
|
|
124
|
-
[`[data-${prefix}-in-paused]`]: { [`--${prefix}-in-state`]: "paused" }
|
|
125
|
+
[`[data-${prefix}-in-paused]`]: { [`--${prefix}-in-state`]: "paused" },
|
|
126
|
+
[`[data-${prefix}-out-run]`]: { [`--${prefix}-out-state`]: "running" },
|
|
127
|
+
[`[data-${prefix}-out-paused]`]: {
|
|
128
|
+
[`--${prefix}-out-state`]: "paused"
|
|
129
|
+
}
|
|
125
130
|
});
|
|
126
131
|
createAnimation(
|
|
127
132
|
"fade",
|
|
128
|
-
(
|
|
133
|
+
({ param }) => ({
|
|
129
134
|
from: {
|
|
130
|
-
opacity:
|
|
135
|
+
opacity: param("opacity")
|
|
131
136
|
}
|
|
132
137
|
}),
|
|
133
138
|
{
|
|
134
139
|
opacity: {
|
|
135
140
|
DEFAULT: "0",
|
|
141
|
+
supportsNegativeValues: true,
|
|
136
142
|
values: {
|
|
137
143
|
0: "0",
|
|
138
144
|
5: "0.05",
|
|
@@ -155,13 +161,45 @@ const animation = plugin.withOptions(
|
|
|
155
161
|
);
|
|
156
162
|
createAnimation(
|
|
157
163
|
"scale",
|
|
158
|
-
(
|
|
164
|
+
({ param, variableName }) => ({
|
|
159
165
|
from: {
|
|
160
|
-
scale:
|
|
166
|
+
scale: `${param("scale-x", param("scale"))} ${param("scale-y", param("scale"))}`
|
|
161
167
|
}
|
|
162
168
|
}),
|
|
163
169
|
{
|
|
164
|
-
scale: {
|
|
170
|
+
["scale"]: {
|
|
171
|
+
DEFAULT: ".95",
|
|
172
|
+
values: {
|
|
173
|
+
0: "0",
|
|
174
|
+
50: ".5",
|
|
175
|
+
75: ".75",
|
|
176
|
+
90: ".9",
|
|
177
|
+
95: ".95",
|
|
178
|
+
100: "1",
|
|
179
|
+
105: "1.05",
|
|
180
|
+
110: "1.1",
|
|
181
|
+
125: "1.25",
|
|
182
|
+
150: "1.5"
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
["scale-x"]: {
|
|
186
|
+
as: "x",
|
|
187
|
+
DEFAULT: ".95",
|
|
188
|
+
values: {
|
|
189
|
+
0: "0",
|
|
190
|
+
50: ".5",
|
|
191
|
+
75: ".75",
|
|
192
|
+
90: ".9",
|
|
193
|
+
95: ".95",
|
|
194
|
+
100: "1",
|
|
195
|
+
105: "1.05",
|
|
196
|
+
110: "1.1",
|
|
197
|
+
125: "1.25",
|
|
198
|
+
150: "1.5"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
["scale-y"]: {
|
|
202
|
+
as: "y",
|
|
165
203
|
DEFAULT: ".95",
|
|
166
204
|
values: {
|
|
167
205
|
0: "0",
|
|
@@ -181,47 +219,22 @@ const animation = plugin.withOptions(
|
|
|
181
219
|
const slideValues = {
|
|
182
220
|
DEFAULT: "2rem",
|
|
183
221
|
values: {
|
|
222
|
+
...theme("spacing"),
|
|
223
|
+
// échelle spacing
|
|
184
224
|
full: "100%",
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
1: "
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
4: "1rem",
|
|
195
|
-
5: "1.25rem",
|
|
196
|
-
6: "1.5rem",
|
|
197
|
-
7: "1.75rem",
|
|
198
|
-
8: "2rem",
|
|
199
|
-
9: "2.25rem",
|
|
200
|
-
10: "2.5rem",
|
|
201
|
-
11: "2.75rem",
|
|
202
|
-
12: "3rem",
|
|
203
|
-
14: "3.5rem",
|
|
204
|
-
16: "4rem",
|
|
205
|
-
20: "5rem",
|
|
206
|
-
24: "6rem",
|
|
207
|
-
28: "7rem",
|
|
208
|
-
32: "8rem",
|
|
209
|
-
36: "9rem",
|
|
210
|
-
40: "10rem",
|
|
211
|
-
44: "11rem",
|
|
212
|
-
48: "12rem",
|
|
213
|
-
52: "13rem",
|
|
214
|
-
56: "14rem",
|
|
215
|
-
60: "15rem",
|
|
216
|
-
64: "16rem",
|
|
217
|
-
72: "18rem",
|
|
218
|
-
80: "20rem",
|
|
219
|
-
96: "24rem"
|
|
220
|
-
}
|
|
225
|
+
// ajout de "full"
|
|
226
|
+
"1/2": "50%",
|
|
227
|
+
// (optionnel) fractions
|
|
228
|
+
"1/3": "33.333333%",
|
|
229
|
+
"2/3": "66.666667%",
|
|
230
|
+
"1/4": "25%",
|
|
231
|
+
"3/4": "75%"
|
|
232
|
+
},
|
|
233
|
+
supportsNegativeValues: true
|
|
221
234
|
};
|
|
222
235
|
createAnimation(
|
|
223
236
|
"slide",
|
|
224
|
-
(param) => ({
|
|
237
|
+
({ param }) => ({
|
|
225
238
|
from: {
|
|
226
239
|
translate: `calc(${param("distance")} * ${param("dx")}) calc(${param("distance")} * ${param("dy")});`
|
|
227
240
|
},
|
|
@@ -279,8 +292,8 @@ const animation = plugin.withOptions(
|
|
|
279
292
|
const dxdy = {
|
|
280
293
|
"from-top": { dx: "0", dy: "1" },
|
|
281
294
|
"from-bottom": { dx: "0", dy: "-1" },
|
|
282
|
-
"from-left": { dx: "1", dy: "0" },
|
|
283
|
-
"from-right": { dx: "
|
|
295
|
+
"from-left": { dx: "-1", dy: "0" },
|
|
296
|
+
"from-right": { dx: "1", dy: "0" },
|
|
284
297
|
"from-top-left": { dx: "1", dy: "1" },
|
|
285
298
|
"from-top-right": { dx: "-1", dy: "1" },
|
|
286
299
|
"from-bottom-left": { dx: "1", dy: "-1" },
|
package/package.json
CHANGED
|
@@ -21,14 +21,16 @@ const createAnimationFunc =
|
|
|
21
21
|
}) =>
|
|
22
22
|
(
|
|
23
23
|
name: string,
|
|
24
|
-
styles: (
|
|
25
|
-
param: (propertyName: string) => string
|
|
26
|
-
|
|
24
|
+
styles: (args: {
|
|
25
|
+
param: (propertyName: string, defaultValue?: string) => string;
|
|
26
|
+
variableName: (propertyName: string) => string;
|
|
27
|
+
}) => Record<string, Record<string, string>>,
|
|
27
28
|
values: Record<
|
|
28
29
|
string,
|
|
29
30
|
{
|
|
30
31
|
as?: string;
|
|
31
32
|
DEFAULT: string;
|
|
33
|
+
supportsNegativeValues?: boolean;
|
|
32
34
|
values: Record<string, string>;
|
|
33
35
|
}
|
|
34
36
|
>,
|
|
@@ -44,21 +46,23 @@ const createAnimationFunc =
|
|
|
44
46
|
return `--${prefix}-${propertyName}`;
|
|
45
47
|
};
|
|
46
48
|
|
|
47
|
-
const param = (
|
|
48
|
-
|
|
49
|
+
const param = (
|
|
50
|
+
propertyName: string,
|
|
51
|
+
defaultValue = values[propertyName]?.DEFAULT,
|
|
52
|
+
) => {
|
|
49
53
|
return `var(${variableName(propertyName)} ${defaultValue ? `, ${defaultValue}` : ''})`;
|
|
50
54
|
};
|
|
51
55
|
|
|
52
56
|
const dependencies: string[] = [];
|
|
53
57
|
|
|
54
|
-
Object.values(styles(param)).forEach((step) => {
|
|
58
|
+
Object.values(styles({ param, variableName })).forEach((step) => {
|
|
55
59
|
Object.keys(step).forEach((key) => {
|
|
56
60
|
dependencies.push(kebabCase(key));
|
|
57
61
|
});
|
|
58
62
|
});
|
|
59
63
|
|
|
60
64
|
addBase({
|
|
61
|
-
[`@keyframes ${prefix}-${name}`]: styles(param),
|
|
65
|
+
[`@keyframes ${prefix}-${name}`]: styles({ param, variableName }),
|
|
62
66
|
});
|
|
63
67
|
|
|
64
68
|
addUtilities({
|
|
@@ -102,6 +106,7 @@ const createAnimationFunc =
|
|
|
102
106
|
},
|
|
103
107
|
{
|
|
104
108
|
values: value.values,
|
|
109
|
+
supportsNegativeValues: value.supportsNegativeValues,
|
|
105
110
|
},
|
|
106
111
|
);
|
|
107
112
|
});
|
|
@@ -113,7 +118,7 @@ const createAnimationFunc =
|
|
|
113
118
|
// - usage: compose triggers ({prefix}-in|{prefix}-out or {prefix}-view*) + effects (fade/scale/slide/spin) + params
|
|
114
119
|
export const animation = plugin.withOptions(
|
|
115
120
|
({ prefix = 'anim' }: AnimationPluginOptions) => {
|
|
116
|
-
return ({ addBase, matchUtilities, addUtilities }: PluginAPI) => {
|
|
121
|
+
return ({ addBase, matchUtilities, addUtilities, theme }: PluginAPI) => {
|
|
117
122
|
const animationNames: Set<string> = new Set();
|
|
118
123
|
|
|
119
124
|
const createAnimation = createAnimationFunc({
|
|
@@ -145,6 +150,8 @@ export const animation = plugin.withOptions(
|
|
|
145
150
|
// run/pause state
|
|
146
151
|
[`.${prefix}-in-run`]: { [`--${prefix}-in-state`]: 'running' },
|
|
147
152
|
[`.${prefix}-in-paused`]: { [`--${prefix}-in-state`]: 'paused' },
|
|
153
|
+
[`.${prefix}-out-run`]: { [`--${prefix}-out-state`]: 'running' },
|
|
154
|
+
[`.${prefix}-out-paused`]: { [`--${prefix}-out-state`]: 'paused' },
|
|
148
155
|
// scroll-driven
|
|
149
156
|
[`.${prefix}-timeline-block`]: {
|
|
150
157
|
animationTimeline: 'view(block)',
|
|
@@ -165,18 +172,23 @@ export const animation = plugin.withOptions(
|
|
|
165
172
|
addBase({
|
|
166
173
|
[`[data-${prefix}-in-run]`]: { [`--${prefix}-in-state`]: 'running' },
|
|
167
174
|
[`[data-${prefix}-in-paused]`]: { [`--${prefix}-in-state`]: 'paused' },
|
|
175
|
+
[`[data-${prefix}-out-run]`]: { [`--${prefix}-out-state`]: 'running' },
|
|
176
|
+
[`[data-${prefix}-out-paused]`]: {
|
|
177
|
+
[`--${prefix}-out-state`]: 'paused',
|
|
178
|
+
},
|
|
168
179
|
});
|
|
169
180
|
|
|
170
181
|
createAnimation(
|
|
171
182
|
'fade',
|
|
172
|
-
(
|
|
183
|
+
({ param }) => ({
|
|
173
184
|
from: {
|
|
174
|
-
opacity:
|
|
185
|
+
opacity: param('opacity'),
|
|
175
186
|
},
|
|
176
187
|
}),
|
|
177
188
|
{
|
|
178
189
|
opacity: {
|
|
179
190
|
DEFAULT: '0',
|
|
191
|
+
supportsNegativeValues: true,
|
|
180
192
|
values: {
|
|
181
193
|
0: '0',
|
|
182
194
|
5: '0.05',
|
|
@@ -200,13 +212,45 @@ export const animation = plugin.withOptions(
|
|
|
200
212
|
|
|
201
213
|
createAnimation(
|
|
202
214
|
'scale',
|
|
203
|
-
(
|
|
215
|
+
({ param, variableName }) => ({
|
|
204
216
|
from: {
|
|
205
|
-
scale:
|
|
217
|
+
scale: `${param('scale-x', param('scale'))} ${param('scale-y', param('scale'))}`,
|
|
206
218
|
},
|
|
207
219
|
}),
|
|
208
220
|
{
|
|
209
|
-
scale: {
|
|
221
|
+
['scale']: {
|
|
222
|
+
DEFAULT: '.95',
|
|
223
|
+
values: {
|
|
224
|
+
0: '0',
|
|
225
|
+
50: '.5',
|
|
226
|
+
75: '.75',
|
|
227
|
+
90: '.9',
|
|
228
|
+
95: '.95',
|
|
229
|
+
100: '1',
|
|
230
|
+
105: '1.05',
|
|
231
|
+
110: '1.1',
|
|
232
|
+
125: '1.25',
|
|
233
|
+
150: '1.5',
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
['scale-x']: {
|
|
237
|
+
as: 'x',
|
|
238
|
+
DEFAULT: '.95',
|
|
239
|
+
values: {
|
|
240
|
+
0: '0',
|
|
241
|
+
50: '.5',
|
|
242
|
+
75: '.75',
|
|
243
|
+
90: '.9',
|
|
244
|
+
95: '.95',
|
|
245
|
+
100: '1',
|
|
246
|
+
105: '1.05',
|
|
247
|
+
110: '1.1',
|
|
248
|
+
125: '1.25',
|
|
249
|
+
150: '1.5',
|
|
250
|
+
},
|
|
251
|
+
},
|
|
252
|
+
['scale-y']: {
|
|
253
|
+
as: 'y',
|
|
210
254
|
DEFAULT: '.95',
|
|
211
255
|
values: {
|
|
212
256
|
0: '0',
|
|
@@ -255,47 +299,19 @@ export const animation = plugin.withOptions(
|
|
|
255
299
|
const slideValues = {
|
|
256
300
|
DEFAULT: '2rem',
|
|
257
301
|
values: {
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
1
|
|
264
|
-
|
|
265
|
-
2.5: '0.625rem',
|
|
266
|
-
3: '0.75rem',
|
|
267
|
-
3.5: '0.875rem',
|
|
268
|
-
4: '1rem',
|
|
269
|
-
5: '1.25rem',
|
|
270
|
-
6: '1.5rem',
|
|
271
|
-
7: '1.75rem',
|
|
272
|
-
8: '2rem',
|
|
273
|
-
9: '2.25rem',
|
|
274
|
-
10: '2.5rem',
|
|
275
|
-
11: '2.75rem',
|
|
276
|
-
12: '3rem',
|
|
277
|
-
14: '3.5rem',
|
|
278
|
-
16: '4rem',
|
|
279
|
-
20: '5rem',
|
|
280
|
-
24: '6rem',
|
|
281
|
-
28: '7rem',
|
|
282
|
-
32: '8rem',
|
|
283
|
-
36: '9rem',
|
|
284
|
-
40: '10rem',
|
|
285
|
-
44: '11rem',
|
|
286
|
-
48: '12rem',
|
|
287
|
-
52: '13rem',
|
|
288
|
-
56: '14rem',
|
|
289
|
-
60: '15rem',
|
|
290
|
-
64: '16rem',
|
|
291
|
-
72: '18rem',
|
|
292
|
-
80: '20rem',
|
|
293
|
-
96: '24rem',
|
|
302
|
+
...theme('spacing'), // échelle spacing
|
|
303
|
+
full: '100%', // ajout de "full"
|
|
304
|
+
'1/2': '50%', // (optionnel) fractions
|
|
305
|
+
'1/3': '33.333333%',
|
|
306
|
+
'2/3': '66.666667%',
|
|
307
|
+
'1/4': '25%',
|
|
308
|
+
'3/4': '75%',
|
|
294
309
|
},
|
|
310
|
+
supportsNegativeValues: true,
|
|
295
311
|
};
|
|
296
312
|
createAnimation(
|
|
297
313
|
'slide',
|
|
298
|
-
(param) => ({
|
|
314
|
+
({ param }) => ({
|
|
299
315
|
from: {
|
|
300
316
|
translate: `calc(${param('distance')} * ${param('dx')}) calc(${param('distance')} * ${param('dy')});`,
|
|
301
317
|
},
|
|
@@ -363,8 +379,8 @@ export const animation = plugin.withOptions(
|
|
|
363
379
|
const dxdy: Record<typeof direction, { dx: string; dy: string }> = {
|
|
364
380
|
'from-top': { dx: '0', dy: '1' },
|
|
365
381
|
'from-bottom': { dx: '0', dy: '-1' },
|
|
366
|
-
'from-left': { dx: '1', dy: '0' },
|
|
367
|
-
'from-right': { dx: '
|
|
382
|
+
'from-left': { dx: '-1', dy: '0' },
|
|
383
|
+
'from-right': { dx: '1', dy: '0' },
|
|
368
384
|
'from-top-left': { dx: '1', dy: '1' },
|
|
369
385
|
'from-top-right': { dx: '-1', dy: '1' },
|
|
370
386
|
'from-bottom-left': { dx: '1', dy: '-1' },
|