@udixio/tailwind 2.1.0 → 2.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.
- package/CHANGELOG.md +11 -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-BS-y_NhA.cjs} +58 -51
- package/dist/{tailwind.plugin-DfVIrskO.js → tailwind.plugin-BWkO2e-A.js} +58 -51
- package/package.json +1 -1
- package/src/plugins-tailwind/animation.ts +62 -52
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## 2.2.0 (2025-10-16)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **animation:** refactor `createAnimation` to support enhanced parameterization and new utilities ([96d1423](https://github.com/Udixio/UI/commit/96d1423))
|
|
6
|
+
- **animation:** add `supportsNegativeValues` and enhance `slide` utility generation ([e9558db](https://github.com/Udixio/UI/commit/e9558db))
|
|
7
|
+
|
|
8
|
+
### ❤️ Thank You
|
|
9
|
+
|
|
10
|
+
- Joël VIGREUX
|
|
11
|
+
|
|
1
12
|
## 2.1.0 (2025-10-16)
|
|
2
13
|
|
|
3
14
|
### 🚀 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-BS-y_NhA.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-BWkO2e-A.js";
|
|
2
|
+
import { T, b, a, f, s } from "./tailwind.plugin-BWkO2e-A.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-BS-y_NhA.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-BWkO2e-A.js";
|
|
5
|
+
import { a, f, s } from "./tailwind.plugin-BWkO2e-A.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,sFAocrB,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,
|
|
@@ -126,14 +125,15 @@ const animation = plugin.withOptions(
|
|
|
126
125
|
});
|
|
127
126
|
createAnimation(
|
|
128
127
|
"fade",
|
|
129
|
-
(
|
|
128
|
+
({ param }) => ({
|
|
130
129
|
from: {
|
|
131
|
-
opacity:
|
|
130
|
+
opacity: param("opacity")
|
|
132
131
|
}
|
|
133
132
|
}),
|
|
134
133
|
{
|
|
135
134
|
opacity: {
|
|
136
135
|
DEFAULT: "0",
|
|
136
|
+
supportsNegativeValues: true,
|
|
137
137
|
values: {
|
|
138
138
|
0: "0",
|
|
139
139
|
5: "0.05",
|
|
@@ -156,13 +156,45 @@ const animation = plugin.withOptions(
|
|
|
156
156
|
);
|
|
157
157
|
createAnimation(
|
|
158
158
|
"scale",
|
|
159
|
-
(
|
|
159
|
+
({ param, variableName }) => ({
|
|
160
160
|
from: {
|
|
161
|
-
scale:
|
|
161
|
+
scale: `${param("scale-x", param("scale"))} ${param("scale-y", param("scale"))}`
|
|
162
162
|
}
|
|
163
163
|
}),
|
|
164
164
|
{
|
|
165
|
-
scale: {
|
|
165
|
+
["scale"]: {
|
|
166
|
+
DEFAULT: ".95",
|
|
167
|
+
values: {
|
|
168
|
+
0: "0",
|
|
169
|
+
50: ".5",
|
|
170
|
+
75: ".75",
|
|
171
|
+
90: ".9",
|
|
172
|
+
95: ".95",
|
|
173
|
+
100: "1",
|
|
174
|
+
105: "1.05",
|
|
175
|
+
110: "1.1",
|
|
176
|
+
125: "1.25",
|
|
177
|
+
150: "1.5"
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
["scale-x"]: {
|
|
181
|
+
as: "x",
|
|
182
|
+
DEFAULT: ".95",
|
|
183
|
+
values: {
|
|
184
|
+
0: "0",
|
|
185
|
+
50: ".5",
|
|
186
|
+
75: ".75",
|
|
187
|
+
90: ".9",
|
|
188
|
+
95: ".95",
|
|
189
|
+
100: "1",
|
|
190
|
+
105: "1.05",
|
|
191
|
+
110: "1.1",
|
|
192
|
+
125: "1.25",
|
|
193
|
+
150: "1.5"
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
["scale-y"]: {
|
|
197
|
+
as: "y",
|
|
166
198
|
DEFAULT: ".95",
|
|
167
199
|
values: {
|
|
168
200
|
0: "0",
|
|
@@ -182,47 +214,22 @@ const animation = plugin.withOptions(
|
|
|
182
214
|
const slideValues = {
|
|
183
215
|
DEFAULT: "2rem",
|
|
184
216
|
values: {
|
|
217
|
+
...theme2("spacing"),
|
|
218
|
+
// échelle spacing
|
|
185
219
|
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
|
-
}
|
|
220
|
+
// ajout de "full"
|
|
221
|
+
"1/2": "50%",
|
|
222
|
+
// (optionnel) fractions
|
|
223
|
+
"1/3": "33.333333%",
|
|
224
|
+
"2/3": "66.666667%",
|
|
225
|
+
"1/4": "25%",
|
|
226
|
+
"3/4": "75%"
|
|
227
|
+
},
|
|
228
|
+
supportsNegativeValues: true
|
|
222
229
|
};
|
|
223
230
|
createAnimation(
|
|
224
231
|
"slide",
|
|
225
|
-
(param) => ({
|
|
232
|
+
({ param }) => ({
|
|
226
233
|
from: {
|
|
227
234
|
translate: `calc(${param("distance")} * ${param("dx")}) calc(${param("distance")} * ${param("dy")});`
|
|
228
235
|
},
|
|
@@ -280,8 +287,8 @@ const animation = plugin.withOptions(
|
|
|
280
287
|
const dxdy = {
|
|
281
288
|
"from-top": { dx: "0", dy: "1" },
|
|
282
289
|
"from-bottom": { dx: "0", dy: "-1" },
|
|
283
|
-
"from-left": { dx: "1", dy: "0" },
|
|
284
|
-
"from-right": { dx: "
|
|
290
|
+
"from-left": { dx: "-1", dy: "0" },
|
|
291
|
+
"from-right": { dx: "1", dy: "0" },
|
|
285
292
|
"from-top-left": { dx: "1", dy: "1" },
|
|
286
293
|
"from-top-right": { dx: "-1", dy: "1" },
|
|
287
294
|
"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,
|
|
@@ -125,14 +124,15 @@ const animation = plugin.withOptions(
|
|
|
125
124
|
});
|
|
126
125
|
createAnimation(
|
|
127
126
|
"fade",
|
|
128
|
-
(
|
|
127
|
+
({ param }) => ({
|
|
129
128
|
from: {
|
|
130
|
-
opacity:
|
|
129
|
+
opacity: param("opacity")
|
|
131
130
|
}
|
|
132
131
|
}),
|
|
133
132
|
{
|
|
134
133
|
opacity: {
|
|
135
134
|
DEFAULT: "0",
|
|
135
|
+
supportsNegativeValues: true,
|
|
136
136
|
values: {
|
|
137
137
|
0: "0",
|
|
138
138
|
5: "0.05",
|
|
@@ -155,13 +155,45 @@ const animation = plugin.withOptions(
|
|
|
155
155
|
);
|
|
156
156
|
createAnimation(
|
|
157
157
|
"scale",
|
|
158
|
-
(
|
|
158
|
+
({ param, variableName }) => ({
|
|
159
159
|
from: {
|
|
160
|
-
scale:
|
|
160
|
+
scale: `${param("scale-x", param("scale"))} ${param("scale-y", param("scale"))}`
|
|
161
161
|
}
|
|
162
162
|
}),
|
|
163
163
|
{
|
|
164
|
-
scale: {
|
|
164
|
+
["scale"]: {
|
|
165
|
+
DEFAULT: ".95",
|
|
166
|
+
values: {
|
|
167
|
+
0: "0",
|
|
168
|
+
50: ".5",
|
|
169
|
+
75: ".75",
|
|
170
|
+
90: ".9",
|
|
171
|
+
95: ".95",
|
|
172
|
+
100: "1",
|
|
173
|
+
105: "1.05",
|
|
174
|
+
110: "1.1",
|
|
175
|
+
125: "1.25",
|
|
176
|
+
150: "1.5"
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
["scale-x"]: {
|
|
180
|
+
as: "x",
|
|
181
|
+
DEFAULT: ".95",
|
|
182
|
+
values: {
|
|
183
|
+
0: "0",
|
|
184
|
+
50: ".5",
|
|
185
|
+
75: ".75",
|
|
186
|
+
90: ".9",
|
|
187
|
+
95: ".95",
|
|
188
|
+
100: "1",
|
|
189
|
+
105: "1.05",
|
|
190
|
+
110: "1.1",
|
|
191
|
+
125: "1.25",
|
|
192
|
+
150: "1.5"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
["scale-y"]: {
|
|
196
|
+
as: "y",
|
|
165
197
|
DEFAULT: ".95",
|
|
166
198
|
values: {
|
|
167
199
|
0: "0",
|
|
@@ -181,47 +213,22 @@ const animation = plugin.withOptions(
|
|
|
181
213
|
const slideValues = {
|
|
182
214
|
DEFAULT: "2rem",
|
|
183
215
|
values: {
|
|
216
|
+
...theme("spacing"),
|
|
217
|
+
// échelle spacing
|
|
184
218
|
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
|
-
}
|
|
219
|
+
// ajout de "full"
|
|
220
|
+
"1/2": "50%",
|
|
221
|
+
// (optionnel) fractions
|
|
222
|
+
"1/3": "33.333333%",
|
|
223
|
+
"2/3": "66.666667%",
|
|
224
|
+
"1/4": "25%",
|
|
225
|
+
"3/4": "75%"
|
|
226
|
+
},
|
|
227
|
+
supportsNegativeValues: true
|
|
221
228
|
};
|
|
222
229
|
createAnimation(
|
|
223
230
|
"slide",
|
|
224
|
-
(param) => ({
|
|
231
|
+
({ param }) => ({
|
|
225
232
|
from: {
|
|
226
233
|
translate: `calc(${param("distance")} * ${param("dx")}) calc(${param("distance")} * ${param("dy")});`
|
|
227
234
|
},
|
|
@@ -279,8 +286,8 @@ const animation = plugin.withOptions(
|
|
|
279
286
|
const dxdy = {
|
|
280
287
|
"from-top": { dx: "0", dy: "1" },
|
|
281
288
|
"from-bottom": { dx: "0", dy: "-1" },
|
|
282
|
-
"from-left": { dx: "1", dy: "0" },
|
|
283
|
-
"from-right": { dx: "
|
|
289
|
+
"from-left": { dx: "-1", dy: "0" },
|
|
290
|
+
"from-right": { dx: "1", dy: "0" },
|
|
284
291
|
"from-top-left": { dx: "1", dy: "1" },
|
|
285
292
|
"from-top-right": { dx: "-1", dy: "1" },
|
|
286
293
|
"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({
|
|
@@ -169,14 +174,15 @@ export const animation = plugin.withOptions(
|
|
|
169
174
|
|
|
170
175
|
createAnimation(
|
|
171
176
|
'fade',
|
|
172
|
-
(
|
|
177
|
+
({ param }) => ({
|
|
173
178
|
from: {
|
|
174
|
-
opacity:
|
|
179
|
+
opacity: param('opacity'),
|
|
175
180
|
},
|
|
176
181
|
}),
|
|
177
182
|
{
|
|
178
183
|
opacity: {
|
|
179
184
|
DEFAULT: '0',
|
|
185
|
+
supportsNegativeValues: true,
|
|
180
186
|
values: {
|
|
181
187
|
0: '0',
|
|
182
188
|
5: '0.05',
|
|
@@ -200,13 +206,45 @@ export const animation = plugin.withOptions(
|
|
|
200
206
|
|
|
201
207
|
createAnimation(
|
|
202
208
|
'scale',
|
|
203
|
-
(
|
|
209
|
+
({ param, variableName }) => ({
|
|
204
210
|
from: {
|
|
205
|
-
scale:
|
|
211
|
+
scale: `${param('scale-x', param('scale'))} ${param('scale-y', param('scale'))}`,
|
|
206
212
|
},
|
|
207
213
|
}),
|
|
208
214
|
{
|
|
209
|
-
scale: {
|
|
215
|
+
['scale']: {
|
|
216
|
+
DEFAULT: '.95',
|
|
217
|
+
values: {
|
|
218
|
+
0: '0',
|
|
219
|
+
50: '.5',
|
|
220
|
+
75: '.75',
|
|
221
|
+
90: '.9',
|
|
222
|
+
95: '.95',
|
|
223
|
+
100: '1',
|
|
224
|
+
105: '1.05',
|
|
225
|
+
110: '1.1',
|
|
226
|
+
125: '1.25',
|
|
227
|
+
150: '1.5',
|
|
228
|
+
},
|
|
229
|
+
},
|
|
230
|
+
['scale-x']: {
|
|
231
|
+
as: 'x',
|
|
232
|
+
DEFAULT: '.95',
|
|
233
|
+
values: {
|
|
234
|
+
0: '0',
|
|
235
|
+
50: '.5',
|
|
236
|
+
75: '.75',
|
|
237
|
+
90: '.9',
|
|
238
|
+
95: '.95',
|
|
239
|
+
100: '1',
|
|
240
|
+
105: '1.05',
|
|
241
|
+
110: '1.1',
|
|
242
|
+
125: '1.25',
|
|
243
|
+
150: '1.5',
|
|
244
|
+
},
|
|
245
|
+
},
|
|
246
|
+
['scale-y']: {
|
|
247
|
+
as: 'y',
|
|
210
248
|
DEFAULT: '.95',
|
|
211
249
|
values: {
|
|
212
250
|
0: '0',
|
|
@@ -255,47 +293,19 @@ export const animation = plugin.withOptions(
|
|
|
255
293
|
const slideValues = {
|
|
256
294
|
DEFAULT: '2rem',
|
|
257
295
|
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',
|
|
296
|
+
...theme('spacing'), // échelle spacing
|
|
297
|
+
full: '100%', // ajout de "full"
|
|
298
|
+
'1/2': '50%', // (optionnel) fractions
|
|
299
|
+
'1/3': '33.333333%',
|
|
300
|
+
'2/3': '66.666667%',
|
|
301
|
+
'1/4': '25%',
|
|
302
|
+
'3/4': '75%',
|
|
294
303
|
},
|
|
304
|
+
supportsNegativeValues: true,
|
|
295
305
|
};
|
|
296
306
|
createAnimation(
|
|
297
307
|
'slide',
|
|
298
|
-
(param) => ({
|
|
308
|
+
({ param }) => ({
|
|
299
309
|
from: {
|
|
300
310
|
translate: `calc(${param('distance')} * ${param('dx')}) calc(${param('distance')} * ${param('dy')});`,
|
|
301
311
|
},
|
|
@@ -363,8 +373,8 @@ export const animation = plugin.withOptions(
|
|
|
363
373
|
const dxdy: Record<typeof direction, { dx: string; dy: string }> = {
|
|
364
374
|
'from-top': { dx: '0', dy: '1' },
|
|
365
375
|
'from-bottom': { dx: '0', dy: '-1' },
|
|
366
|
-
'from-left': { dx: '1', dy: '0' },
|
|
367
|
-
'from-right': { dx: '
|
|
376
|
+
'from-left': { dx: '-1', dy: '0' },
|
|
377
|
+
'from-right': { dx: '1', dy: '0' },
|
|
368
378
|
'from-top-left': { dx: '1', dy: '1' },
|
|
369
379
|
'from-top-right': { dx: '-1', dy: '1' },
|
|
370
380
|
'from-bottom-left': { dx: '1', dy: '-1' },
|