@vinicunca/unocss-preset 1.28.0 → 1.29.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/dist/{akar-CrM37MRC.js → akar-x3gQJnHH.js} +63 -9
- package/dist/constants-b5_S4-lh.js +271 -0
- package/dist/index.d.ts +31 -0
- package/dist/index.js +5 -226
- package/package.json +1 -1
- package/dist/utils-DZIu2j5I.js +0 -89
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import { compressCSS } from "./
|
|
1
|
+
import { DEFAULT_AKAR_OPTIONS, compressCSS } from "./constants-b5_S4-lh.js";
|
|
2
|
+
import { isString } from "@vinicunca/perkakas";
|
|
3
|
+
import { defu } from "defu";
|
|
4
|
+
import { theme } from "unocss/preset-wind4";
|
|
2
5
|
|
|
3
6
|
//#region src/presets/akar/akar.brand-css-variables.ts
|
|
4
7
|
function getAkarPreflight(options) {
|
|
@@ -240,17 +243,56 @@ const drawerPreflight = {
|
|
|
240
243
|
};
|
|
241
244
|
|
|
242
245
|
//#endregion
|
|
243
|
-
//#region src/presets/akar/
|
|
244
|
-
function
|
|
245
|
-
const
|
|
246
|
-
|
|
246
|
+
//#region src/presets/akar/akar.theme.ts
|
|
247
|
+
function resolveAkarTheme(options) {
|
|
248
|
+
const enableAkar = Boolean(options);
|
|
249
|
+
let akarOptions = {};
|
|
250
|
+
if (enableAkar) akarOptions = defu(options, DEFAULT_AKAR_OPTIONS);
|
|
251
|
+
const akarBrands = getAkarBrandColors(akarOptions);
|
|
252
|
+
const pohonThemes = resolvePohonTheme(akarOptions.pohonThemes);
|
|
247
253
|
return {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
theme: { colors: { ...resolveTheme(options.pohonThemes) } }
|
|
254
|
+
...akarBrands,
|
|
255
|
+
...pohonThemes
|
|
251
256
|
};
|
|
252
257
|
}
|
|
253
|
-
|
|
258
|
+
/**
|
|
259
|
+
* We want to generate the brand colors and inject them in to the theme.
|
|
260
|
+
* Please refer to the `DEFAULT_AKAR_OPTIONS.brands` for the default brand colors.
|
|
261
|
+
*
|
|
262
|
+
* So when there's an option like this: `primary: 'violet'`,
|
|
263
|
+
* we want to resolve it to the actual color value from the `unocss/preset-wind4` theme
|
|
264
|
+
* including all the shades, like `primary-100`, `primary-200`, etc.
|
|
265
|
+
*
|
|
266
|
+
* If the brand value is a hex color, we will use it directly as `DEFAULT` shade.
|
|
267
|
+
* e.g. `primary: '#7C3AED'` will be resolved to `{ primary: { DEFAULT: '#7C3AED' } }`
|
|
268
|
+
*
|
|
269
|
+
* TODO: It would be nice to also auto generate all the shades from the hex color,
|
|
270
|
+
* or the user can define the nested object themselves.
|
|
271
|
+
*
|
|
272
|
+
* This function will return an object that can be directly used in the UnoCSS theme colors.
|
|
273
|
+
*/
|
|
274
|
+
function getAkarBrandColors(options) {
|
|
275
|
+
const enableDynamic = Boolean(options.enableDynamicBrands);
|
|
276
|
+
const shades = Object.keys(theme.colors.amber);
|
|
277
|
+
return Object.entries(options.brands ?? {}).reduce((acc, [brandKey, brandValue]) => {
|
|
278
|
+
if (isString(brandValue) && isHexColor(brandValue)) acc[brandKey] = { DEFAULT: brandValue };
|
|
279
|
+
else if (enableDynamic) acc[brandKey] = shades.reduce((shadeAcc, shade) => {
|
|
280
|
+
if (shade === "DEFAULT") shadeAcc[shade] = `var(--akar-${brandKey})`;
|
|
281
|
+
else shadeAcc[shade] = `var(--akar-${brandKey}-${shade})`;
|
|
282
|
+
return shadeAcc;
|
|
283
|
+
}, {});
|
|
284
|
+
else acc[brandKey] = theme.colors[brandValue];
|
|
285
|
+
return acc;
|
|
286
|
+
}, {});
|
|
287
|
+
}
|
|
288
|
+
function isHexColor(value) {
|
|
289
|
+
return /^#([A-F0-9]{6}|[A-F0-9]{3})$/i.test(value);
|
|
290
|
+
}
|
|
291
|
+
/**
|
|
292
|
+
* Currently we use the default settings:
|
|
293
|
+
* TODO: Allow custom themes and custom css variables.
|
|
294
|
+
*/
|
|
295
|
+
function resolvePohonTheme(pohon) {
|
|
254
296
|
if (!Boolean(pohon)) return {};
|
|
255
297
|
return {
|
|
256
298
|
text: {
|
|
@@ -311,5 +353,17 @@ function resolveTheme(pohon) {
|
|
|
311
353
|
};
|
|
312
354
|
}
|
|
313
355
|
|
|
356
|
+
//#endregion
|
|
357
|
+
//#region src/presets/akar/index.ts
|
|
358
|
+
function presetAkar(options) {
|
|
359
|
+
const preflights = [getAkarPreflight(options)];
|
|
360
|
+
if (options.enableDrawer) preflights.push(drawerPreflight);
|
|
361
|
+
return {
|
|
362
|
+
name: "unocss-preset-akar",
|
|
363
|
+
preflights,
|
|
364
|
+
theme: { colors: resolveAkarTheme(options) }
|
|
365
|
+
};
|
|
366
|
+
}
|
|
367
|
+
|
|
314
368
|
//#endregion
|
|
315
369
|
export { presetAkar };
|
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
//#region src/utils.ts
|
|
2
|
+
const RE_ANIMATION = /^([a-z-]+)\s+([0-9.]+m?s?|[*+])?\s?([a-z-]+(?:\([^)]+\))?|[*+])?\s*([a-z0-9-]+|[*+])?$/i;
|
|
3
|
+
/**
|
|
4
|
+
* Normalize custom animate usage to UnoCSS animations theme.
|
|
5
|
+
*
|
|
6
|
+
* ⚠️ We must strictly follow the following format. ⚠️
|
|
7
|
+
*
|
|
8
|
+
* [ name, duration, timing-function, iteration-count ]
|
|
9
|
+
*
|
|
10
|
+
* If you use * as placeholder, it will be ignored.
|
|
11
|
+
*
|
|
12
|
+
* [name, duration, *, iteration-count]
|
|
13
|
+
*
|
|
14
|
+
* If you use + as placeholder, it will be replaced with empty string.
|
|
15
|
+
*
|
|
16
|
+
* [name, duration, +, iteration-count]
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
*
|
|
20
|
+
* { animate: ['spin 1s linear infinite'] }
|
|
21
|
+
*
|
|
22
|
+
* Will be transformed:
|
|
23
|
+
*
|
|
24
|
+
* {
|
|
25
|
+
* animate: ['spin 1s linear infinite'],
|
|
26
|
+
* durations: {
|
|
27
|
+
* spin: '1s',
|
|
28
|
+
* },
|
|
29
|
+
* timingFns: {
|
|
30
|
+
* spin: 'linear',
|
|
31
|
+
* },
|
|
32
|
+
* counts: {
|
|
33
|
+
* spin: 'infinite',
|
|
34
|
+
* },
|
|
35
|
+
* }
|
|
36
|
+
*/
|
|
37
|
+
function resolveAnimation(extendAnimation) {
|
|
38
|
+
const animation = {};
|
|
39
|
+
const keys = [
|
|
40
|
+
"durations",
|
|
41
|
+
"timingFns",
|
|
42
|
+
"counts"
|
|
43
|
+
];
|
|
44
|
+
const shortcuts = [];
|
|
45
|
+
for (const [key_, val_] of Object.entries(extendAnimation)) {
|
|
46
|
+
const match = val_.match(RE_ANIMATION);
|
|
47
|
+
if (match != null) {
|
|
48
|
+
const [, name, duration, timing, count] = match;
|
|
49
|
+
const values = [
|
|
50
|
+
duration,
|
|
51
|
+
timing,
|
|
52
|
+
count
|
|
53
|
+
];
|
|
54
|
+
if (name !== key_) shortcuts.push([`animate-${key_}`, `animate-${name}`]);
|
|
55
|
+
for (let i = 0; i < keys.length; i++) {
|
|
56
|
+
const key = keys[i];
|
|
57
|
+
const value = values[i];
|
|
58
|
+
if (value != null) {
|
|
59
|
+
if (value === "*") continue;
|
|
60
|
+
if (animation[key]) animation[key][name] = values[i] === "+" ? "" : values[i];
|
|
61
|
+
else animation[key] = { [name]: values[i] === "+" ? "" : values[i] };
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return {
|
|
67
|
+
animation,
|
|
68
|
+
shortcuts
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
function cssObj2StrSync(style) {
|
|
72
|
+
return Object.keys(style).reduce((str, key) => {
|
|
73
|
+
return `${str}${key}${stringifyObj(style[key])}`;
|
|
74
|
+
}, "").replace(/\n/g, "");
|
|
75
|
+
}
|
|
76
|
+
function stringifyObj(obj) {
|
|
77
|
+
return `{${Object.keys(obj).reduce((str, key) => {
|
|
78
|
+
return `${str}${camelToHyphen(key)}:${obj[key]};`;
|
|
79
|
+
}, "")}}`;
|
|
80
|
+
}
|
|
81
|
+
function camelToHyphen(str) {
|
|
82
|
+
return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
83
|
+
}
|
|
84
|
+
function compressCSS(css) {
|
|
85
|
+
return css.replace(/\s+/g, " ").replace(/\/\*[\s\S]*?\*\//g, "");
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
//#endregion
|
|
89
|
+
//#region src/constants.ts
|
|
90
|
+
const DEFAULT_OPTIONS = {
|
|
91
|
+
theme: {},
|
|
92
|
+
enableDefaultShortcuts: true,
|
|
93
|
+
preflights: true,
|
|
94
|
+
wind4: { preflights: { reset: false } },
|
|
95
|
+
wind3: false,
|
|
96
|
+
icons: true,
|
|
97
|
+
webFonts: false,
|
|
98
|
+
typography: false,
|
|
99
|
+
scrollbar: false,
|
|
100
|
+
magicCss: false,
|
|
101
|
+
animation: true,
|
|
102
|
+
fluid: true,
|
|
103
|
+
akar: false,
|
|
104
|
+
directives: true,
|
|
105
|
+
variantGroup: true
|
|
106
|
+
};
|
|
107
|
+
const DEFAULT_AKAR_OPTIONS = {
|
|
108
|
+
keyframes: {
|
|
109
|
+
"drawer-fade-in": {
|
|
110
|
+
from: { opacity: 0 },
|
|
111
|
+
to: { opacity: 1 }
|
|
112
|
+
},
|
|
113
|
+
"drawer-fade-out": { to: { opacity: 0 } },
|
|
114
|
+
"drawer-slide-from-bottom": {
|
|
115
|
+
from: { transform: "translate3d(0, var(--akar-drawer-initial-transform, 100%), 0)" },
|
|
116
|
+
to: { transform: "translate3d(0, 0, 0)" }
|
|
117
|
+
},
|
|
118
|
+
"drawer-slide-to-bottom": { to: { transform: "translate3d(0, var(--akar-drawer-initial-transform, 100%), 0)" } },
|
|
119
|
+
"drawer-slide-from-top": {
|
|
120
|
+
from: { transform: "translate3d(0, calc(var(--akar-drawer-initial-transform, 100%) * -1), 0)" },
|
|
121
|
+
to: { transform: "translate3d(0, 0, 0)" }
|
|
122
|
+
},
|
|
123
|
+
"drawer-slide-to-top": { to: { transform: "translate3d(0, calc(var(--akar-drawer-initial-transform, 100%) * -1), 0)" } },
|
|
124
|
+
"drawer-slide-from-left": {
|
|
125
|
+
from: { transform: "translate3d(calc(var(--akar-drawer-initial-transform, 100%) * -1), 0, 0)" },
|
|
126
|
+
to: { transform: "translate3d(0, 0, 0)" }
|
|
127
|
+
},
|
|
128
|
+
"drawer-slide-to-left": { to: { transform: "translate3d(calc(var(--akar-drawer-initial-transform, 100%) * -1), 0, 0)" } },
|
|
129
|
+
"drawer-slide-from-right": {
|
|
130
|
+
from: { transform: "translate3d(var(--akar-drawer-initial-transform, 100%), 0, 0)" },
|
|
131
|
+
to: { transform: "translate3d(0, 0, 0)" }
|
|
132
|
+
},
|
|
133
|
+
"drawer-slide-to-right": { to: { transform: "translate3d(var(--akar-drawer-initial-transform, 100%), 0, 0)" } },
|
|
134
|
+
"accordion-down": {
|
|
135
|
+
from: { height: 0 },
|
|
136
|
+
to: { height: "var(--akar-accordion-content-height)" }
|
|
137
|
+
},
|
|
138
|
+
"accordion-up": {
|
|
139
|
+
from: { height: "var(--akar-accordion-content-height)" },
|
|
140
|
+
to: { height: 0 }
|
|
141
|
+
},
|
|
142
|
+
"collapsible-down": {
|
|
143
|
+
from: { height: 0 },
|
|
144
|
+
to: { height: "var(--akar-collapsible-content-height)" }
|
|
145
|
+
},
|
|
146
|
+
"collapsible-up": {
|
|
147
|
+
from: { height: "var(--akar-collapsible-content-height)" },
|
|
148
|
+
to: { height: 0 }
|
|
149
|
+
},
|
|
150
|
+
"toast-collapsed-closed": {
|
|
151
|
+
from: { transform: "var(--transform)" },
|
|
152
|
+
to: { transform: "translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale))" }
|
|
153
|
+
},
|
|
154
|
+
"toast-closed": {
|
|
155
|
+
from: { transform: "var(--transform)" },
|
|
156
|
+
to: { transform: "translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)))" }
|
|
157
|
+
},
|
|
158
|
+
"carousel": {
|
|
159
|
+
"0%, 100%": { width: "50%" },
|
|
160
|
+
"0%": { transform: "translateX(-100%)" },
|
|
161
|
+
"100%": { transform: "translateX(200%)" }
|
|
162
|
+
},
|
|
163
|
+
"carousel-rtl": {
|
|
164
|
+
"0%, 100%": { width: "50%" },
|
|
165
|
+
"0%": { transform: "translateX(100%)" },
|
|
166
|
+
"100%": { transform: "translateX(-200%)" }
|
|
167
|
+
},
|
|
168
|
+
"carousel-vertical": {
|
|
169
|
+
"0%, 100%": { height: "50%" },
|
|
170
|
+
"0%": { transform: "translateY(-100%)" },
|
|
171
|
+
"100%": { transform: "translateY(200%)" }
|
|
172
|
+
},
|
|
173
|
+
"carousel-inverse": {
|
|
174
|
+
"0%, 100%": { width: "50%" },
|
|
175
|
+
"0%": { transform: "translateX(200%)" },
|
|
176
|
+
"100%": { transform: "translateX(-100%)" }
|
|
177
|
+
},
|
|
178
|
+
"carousel-inverse-rtl": {
|
|
179
|
+
"0%, 100%": { width: "50%" },
|
|
180
|
+
"0%": { transform: "translateX(-200%)" },
|
|
181
|
+
"100%": { transform: "translateX(100%)" }
|
|
182
|
+
},
|
|
183
|
+
"carousel-inverse-vertical": {
|
|
184
|
+
"0%, 100%": { height: "50%" },
|
|
185
|
+
"0%": { transform: "translateY(200%)" },
|
|
186
|
+
"100%": { transform: "translateY(-100%)" }
|
|
187
|
+
},
|
|
188
|
+
"swing": {
|
|
189
|
+
"0%, 100%": {
|
|
190
|
+
width: "50%",
|
|
191
|
+
transform: "translateX(-25%)"
|
|
192
|
+
},
|
|
193
|
+
"50%": { transform: "translateX(125%)" }
|
|
194
|
+
},
|
|
195
|
+
"swing-vertical": {
|
|
196
|
+
"0%, 100%": {
|
|
197
|
+
height: "50%",
|
|
198
|
+
transform: "translateY(-25%)"
|
|
199
|
+
},
|
|
200
|
+
"50%": { transform: "translateY(125%)" }
|
|
201
|
+
},
|
|
202
|
+
"elastic": {
|
|
203
|
+
"0%, 100%": {
|
|
204
|
+
"width": "50%",
|
|
205
|
+
"margin-left": "25%"
|
|
206
|
+
},
|
|
207
|
+
"50%": {
|
|
208
|
+
"width": "90%",
|
|
209
|
+
"margin-left": "5%"
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
"elastic-vertical": {
|
|
213
|
+
"0%, 100%": {
|
|
214
|
+
"height": "50%",
|
|
215
|
+
"margin-top": "25%"
|
|
216
|
+
},
|
|
217
|
+
"50%": {
|
|
218
|
+
"height": "90%",
|
|
219
|
+
"margin-top": "5%"
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
animation: {
|
|
224
|
+
"collapsible-down": "collapsible-down 0.2s ease-in-out",
|
|
225
|
+
"collapsible-up": "collapsible-up 0.2s ease-in-out",
|
|
226
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
227
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
228
|
+
"toast-collapsed-closed": "toast-collapsed-closed 200ms ease-in-out",
|
|
229
|
+
"toast-closed": "toast-closed 200ms ease-in-out",
|
|
230
|
+
"carousel": "carousel 2s ease-in-out infinite",
|
|
231
|
+
"carousel-rtl": "carousel-rtl 2s ease-in-out infinite",
|
|
232
|
+
"carousel-vertical": "carousel-vertical 2s ease-in-out infinite",
|
|
233
|
+
"carousel-inverse": "carousel-inverse 2s ease-in-out infinite",
|
|
234
|
+
"carousel-inverse-rtl": "carousel-inverse-rtl 2s ease-in-out infinite",
|
|
235
|
+
"carousel-inverse-vertical": "carousel-inverse-vertical 2s ease-in-out infinite",
|
|
236
|
+
"swing": "swing 2s ease-in-out infinite",
|
|
237
|
+
"swing-vertical": "swing-vertical 2s ease-in-out infinite",
|
|
238
|
+
"elastic": "elastic 2s ease-in-out infinite",
|
|
239
|
+
"elastic-vertical": "elastic-vertical 2s ease-in-out infinite"
|
|
240
|
+
},
|
|
241
|
+
brands: {
|
|
242
|
+
primary: "violet",
|
|
243
|
+
secondary: "blue",
|
|
244
|
+
success: "green",
|
|
245
|
+
info: "blue",
|
|
246
|
+
warning: "yellow",
|
|
247
|
+
error: "red",
|
|
248
|
+
neutral: "slate"
|
|
249
|
+
},
|
|
250
|
+
pohonThemes: true,
|
|
251
|
+
enableDrawer: true,
|
|
252
|
+
enableDynamicBrands: false
|
|
253
|
+
};
|
|
254
|
+
const DEFAULT_FLUID_OPTIONS = {
|
|
255
|
+
maxWidth: 1440,
|
|
256
|
+
minWidth: 375,
|
|
257
|
+
remBase: 16,
|
|
258
|
+
useRemByDefault: false,
|
|
259
|
+
extendMaxWidth: null,
|
|
260
|
+
extendMinWidth: null,
|
|
261
|
+
ranges: null,
|
|
262
|
+
commentHelpers: false
|
|
263
|
+
};
|
|
264
|
+
const DEFAULT_PRESET_OPTIONS = {
|
|
265
|
+
fluid: DEFAULT_FLUID_OPTIONS,
|
|
266
|
+
animation: { unit: "ms" },
|
|
267
|
+
akar: DEFAULT_AKAR_OPTIONS
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
//#endregion
|
|
271
|
+
export { DEFAULT_AKAR_OPTIONS, DEFAULT_OPTIONS, DEFAULT_PRESET_OPTIONS, compressCSS, cssObj2StrSync, resolveAnimation };
|
package/dist/index.d.ts
CHANGED
|
@@ -156,8 +156,39 @@ interface VinicuncaTheme extends Omit<Theme, 'container' | 'containers'>, Theme$
|
|
|
156
156
|
interface VinicuncaAkarOptions {
|
|
157
157
|
keyframes?: VinicuncaExtends['keyframes'];
|
|
158
158
|
animation?: VinicuncaExtends['animation'];
|
|
159
|
+
/**
|
|
160
|
+
* Define brand colors for Akar
|
|
161
|
+
*
|
|
162
|
+
* @see DEFAULT_AKAR_OPTIONS.brands
|
|
163
|
+
*/
|
|
159
164
|
brands?: Theme$1['colors'];
|
|
165
|
+
/**
|
|
166
|
+
* When defining the brand colors, we use the colors from `unocss/preset-wind4` theme by default.
|
|
167
|
+
* If we want to use custom colors that are not in the preset-wind4 theme, you can enable this option.
|
|
168
|
+
*
|
|
169
|
+
* One use case is when we have a static brand color (primary will always be one value)
|
|
170
|
+
* then we don't need to use this option.
|
|
171
|
+
* Another use case is when we want the brand colors to be dynamic by using css variables,
|
|
172
|
+
* then we can enable this option to generate the brand colors dynamically.
|
|
173
|
+
*
|
|
174
|
+
* @default false
|
|
175
|
+
*/
|
|
176
|
+
enableDynamicBrands?: boolean;
|
|
177
|
+
/**
|
|
178
|
+
* Enable the drawer preflight styles, this is to support the animations
|
|
179
|
+
* for the drawer component in Akar.
|
|
180
|
+
*
|
|
181
|
+
* @default true
|
|
182
|
+
*/
|
|
160
183
|
enableDrawer?: boolean;
|
|
184
|
+
/**
|
|
185
|
+
* Enable the pohon themes css variables and inject them into the theme config.
|
|
186
|
+
* Please note that the user are responsible to define the css variables values within their app.
|
|
187
|
+
* Currently we use the default settings:
|
|
188
|
+
* TODO: Allow custom themes and custom css variables.
|
|
189
|
+
*
|
|
190
|
+
* @default true
|
|
191
|
+
*/
|
|
161
192
|
pohonThemes?: boolean | {
|
|
162
193
|
variables?: {
|
|
163
194
|
light?: Record<string, string>;
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { compressCSS, cssObj2StrSync, resolveAnimation } from "./
|
|
1
|
+
import { DEFAULT_AKAR_OPTIONS, DEFAULT_OPTIONS, DEFAULT_PRESET_OPTIONS, compressCSS, cssObj2StrSync, resolveAnimation } from "./constants-b5_S4-lh.js";
|
|
2
2
|
import { PRESET_NAME } from "./meta-hBxi8oC8.js";
|
|
3
3
|
import { definePreset, mergeConfigs } from "@unocss/core";
|
|
4
4
|
import { isBoolean, isObjectType, isPlainObject, isString, mergeDeep } from "@vinicunca/perkakas";
|
|
5
5
|
import { defu } from "defu";
|
|
6
|
-
import { theme } from "unocss/preset-wind4";
|
|
7
6
|
|
|
8
7
|
//#region src/core/postprocess.ts
|
|
9
8
|
const RE_RGB = /rgb\(([\d\s]+?)\s*\/\s*([^)]+)\)/;
|
|
@@ -516,218 +515,6 @@ function normalizeShortcuts(shortcut) {
|
|
|
516
515
|
});
|
|
517
516
|
}
|
|
518
517
|
|
|
519
|
-
//#endregion
|
|
520
|
-
//#region src/constants.ts
|
|
521
|
-
const DEFAULT_OPTIONS = {
|
|
522
|
-
theme: {},
|
|
523
|
-
enableDefaultShortcuts: true,
|
|
524
|
-
preflights: true,
|
|
525
|
-
wind4: { preflights: { reset: false } },
|
|
526
|
-
wind3: false,
|
|
527
|
-
icons: true,
|
|
528
|
-
webFonts: false,
|
|
529
|
-
typography: false,
|
|
530
|
-
scrollbar: false,
|
|
531
|
-
magicCss: false,
|
|
532
|
-
animation: true,
|
|
533
|
-
fluid: true,
|
|
534
|
-
akar: false,
|
|
535
|
-
directives: true,
|
|
536
|
-
variantGroup: true
|
|
537
|
-
};
|
|
538
|
-
const DEFAULT_AKAR_OPTIONS = {
|
|
539
|
-
keyframes: {
|
|
540
|
-
"drawer-fade-in": {
|
|
541
|
-
from: { opacity: 0 },
|
|
542
|
-
to: { opacity: 1 }
|
|
543
|
-
},
|
|
544
|
-
"drawer-fade-out": { to: { opacity: 0 } },
|
|
545
|
-
"drawer-slide-from-bottom": {
|
|
546
|
-
from: { transform: "translate3d(0, var(--akar-drawer-initial-transform, 100%), 0)" },
|
|
547
|
-
to: { transform: "translate3d(0, 0, 0)" }
|
|
548
|
-
},
|
|
549
|
-
"drawer-slide-to-bottom": { to: { transform: "translate3d(0, var(--akar-drawer-initial-transform, 100%), 0)" } },
|
|
550
|
-
"drawer-slide-from-top": {
|
|
551
|
-
from: { transform: "translate3d(0, calc(var(--akar-drawer-initial-transform, 100%) * -1), 0)" },
|
|
552
|
-
to: { transform: "translate3d(0, 0, 0)" }
|
|
553
|
-
},
|
|
554
|
-
"drawer-slide-to-top": { to: { transform: "translate3d(0, calc(var(--akar-drawer-initial-transform, 100%) * -1), 0)" } },
|
|
555
|
-
"drawer-slide-from-left": {
|
|
556
|
-
from: { transform: "translate3d(calc(var(--akar-drawer-initial-transform, 100%) * -1), 0, 0)" },
|
|
557
|
-
to: { transform: "translate3d(0, 0, 0)" }
|
|
558
|
-
},
|
|
559
|
-
"drawer-slide-to-left": { to: { transform: "translate3d(calc(var(--akar-drawer-initial-transform, 100%) * -1), 0, 0)" } },
|
|
560
|
-
"drawer-slide-from-right": {
|
|
561
|
-
from: { transform: "translate3d(var(--akar-drawer-initial-transform, 100%), 0, 0)" },
|
|
562
|
-
to: { transform: "translate3d(0, 0, 0)" }
|
|
563
|
-
},
|
|
564
|
-
"drawer-slide-to-right": { to: { transform: "translate3d(var(--akar-drawer-initial-transform, 100%), 0, 0)" } },
|
|
565
|
-
"accordion-down": {
|
|
566
|
-
from: { height: 0 },
|
|
567
|
-
to: { height: "var(--akar-accordion-content-height)" }
|
|
568
|
-
},
|
|
569
|
-
"accordion-up": {
|
|
570
|
-
from: { height: "var(--akar-accordion-content-height)" },
|
|
571
|
-
to: { height: 0 }
|
|
572
|
-
},
|
|
573
|
-
"collapsible-down": {
|
|
574
|
-
from: { height: 0 },
|
|
575
|
-
to: { height: "var(--akar-collapsible-content-height)" }
|
|
576
|
-
},
|
|
577
|
-
"collapsible-up": {
|
|
578
|
-
from: { height: "var(--akar-collapsible-content-height)" },
|
|
579
|
-
to: { height: 0 }
|
|
580
|
-
},
|
|
581
|
-
"toast-collapsed-closed": {
|
|
582
|
-
from: { transform: "var(--transform)" },
|
|
583
|
-
to: { transform: "translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale))" }
|
|
584
|
-
},
|
|
585
|
-
"toast-closed": {
|
|
586
|
-
from: { transform: "var(--transform)" },
|
|
587
|
-
to: { transform: "translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)))" }
|
|
588
|
-
},
|
|
589
|
-
"carousel": {
|
|
590
|
-
"0%, 100%": { width: "50%" },
|
|
591
|
-
"0%": { transform: "translateX(-100%)" },
|
|
592
|
-
"100%": { transform: "translateX(200%)" }
|
|
593
|
-
},
|
|
594
|
-
"carousel-rtl": {
|
|
595
|
-
"0%, 100%": { width: "50%" },
|
|
596
|
-
"0%": { transform: "translateX(100%)" },
|
|
597
|
-
"100%": { transform: "translateX(-200%)" }
|
|
598
|
-
},
|
|
599
|
-
"carousel-vertical": {
|
|
600
|
-
"0%, 100%": { height: "50%" },
|
|
601
|
-
"0%": { transform: "translateY(-100%)" },
|
|
602
|
-
"100%": { transform: "translateY(200%)" }
|
|
603
|
-
},
|
|
604
|
-
"carousel-inverse": {
|
|
605
|
-
"0%, 100%": { width: "50%" },
|
|
606
|
-
"0%": { transform: "translateX(200%)" },
|
|
607
|
-
"100%": { transform: "translateX(-100%)" }
|
|
608
|
-
},
|
|
609
|
-
"carousel-inverse-rtl": {
|
|
610
|
-
"0%, 100%": { width: "50%" },
|
|
611
|
-
"0%": { transform: "translateX(-200%)" },
|
|
612
|
-
"100%": { transform: "translateX(100%)" }
|
|
613
|
-
},
|
|
614
|
-
"carousel-inverse-vertical": {
|
|
615
|
-
"0%, 100%": { height: "50%" },
|
|
616
|
-
"0%": { transform: "translateY(200%)" },
|
|
617
|
-
"100%": { transform: "translateY(-100%)" }
|
|
618
|
-
},
|
|
619
|
-
"swing": {
|
|
620
|
-
"0%, 100%": {
|
|
621
|
-
width: "50%",
|
|
622
|
-
transform: "translateX(-25%)"
|
|
623
|
-
},
|
|
624
|
-
"50%": { transform: "translateX(125%)" }
|
|
625
|
-
},
|
|
626
|
-
"swing-vertical": {
|
|
627
|
-
"0%, 100%": {
|
|
628
|
-
height: "50%",
|
|
629
|
-
transform: "translateY(-25%)"
|
|
630
|
-
},
|
|
631
|
-
"50%": { transform: "translateY(125%)" }
|
|
632
|
-
},
|
|
633
|
-
"elastic": {
|
|
634
|
-
"0%, 100%": {
|
|
635
|
-
"width": "50%",
|
|
636
|
-
"margin-left": "25%"
|
|
637
|
-
},
|
|
638
|
-
"50%": {
|
|
639
|
-
"width": "90%",
|
|
640
|
-
"margin-left": "5%"
|
|
641
|
-
}
|
|
642
|
-
},
|
|
643
|
-
"elastic-vertical": {
|
|
644
|
-
"0%, 100%": {
|
|
645
|
-
"height": "50%",
|
|
646
|
-
"margin-top": "25%"
|
|
647
|
-
},
|
|
648
|
-
"50%": {
|
|
649
|
-
"height": "90%",
|
|
650
|
-
"margin-top": "5%"
|
|
651
|
-
}
|
|
652
|
-
}
|
|
653
|
-
},
|
|
654
|
-
animation: {
|
|
655
|
-
"collapsible-down": "collapsible-down 0.2s ease-in-out",
|
|
656
|
-
"collapsible-up": "collapsible-up 0.2s ease-in-out",
|
|
657
|
-
"accordion-down": "accordion-down 0.2s ease-out",
|
|
658
|
-
"accordion-up": "accordion-up 0.2s ease-out",
|
|
659
|
-
"toast-collapsed-closed": "toast-collapsed-closed 200ms ease-in-out",
|
|
660
|
-
"toast-closed": "toast-closed 200ms ease-in-out",
|
|
661
|
-
"carousel": "carousel 2s ease-in-out infinite",
|
|
662
|
-
"carousel-rtl": "carousel-rtl 2s ease-in-out infinite",
|
|
663
|
-
"carousel-vertical": "carousel-vertical 2s ease-in-out infinite",
|
|
664
|
-
"carousel-inverse": "carousel-inverse 2s ease-in-out infinite",
|
|
665
|
-
"carousel-inverse-rtl": "carousel-inverse-rtl 2s ease-in-out infinite",
|
|
666
|
-
"carousel-inverse-vertical": "carousel-inverse-vertical 2s ease-in-out infinite",
|
|
667
|
-
"swing": "swing 2s ease-in-out infinite",
|
|
668
|
-
"swing-vertical": "swing-vertical 2s ease-in-out infinite",
|
|
669
|
-
"elastic": "elastic 2s ease-in-out infinite",
|
|
670
|
-
"elastic-vertical": "elastic-vertical 2s ease-in-out infinite"
|
|
671
|
-
},
|
|
672
|
-
brands: {
|
|
673
|
-
primary: "violet",
|
|
674
|
-
secondary: "blue",
|
|
675
|
-
success: "green",
|
|
676
|
-
info: "blue",
|
|
677
|
-
warning: "yellow",
|
|
678
|
-
error: "red",
|
|
679
|
-
neutral: "slate"
|
|
680
|
-
},
|
|
681
|
-
pohonThemes: true,
|
|
682
|
-
enableDrawer: true
|
|
683
|
-
};
|
|
684
|
-
const DEFAULT_FLUID_OPTIONS = {
|
|
685
|
-
maxWidth: 1440,
|
|
686
|
-
minWidth: 375,
|
|
687
|
-
remBase: 16,
|
|
688
|
-
useRemByDefault: false,
|
|
689
|
-
extendMaxWidth: null,
|
|
690
|
-
extendMinWidth: null,
|
|
691
|
-
ranges: null,
|
|
692
|
-
commentHelpers: false
|
|
693
|
-
};
|
|
694
|
-
const DEFAULT_PRESET_OPTIONS = {
|
|
695
|
-
fluid: DEFAULT_FLUID_OPTIONS,
|
|
696
|
-
animation: { unit: "ms" },
|
|
697
|
-
akar: DEFAULT_AKAR_OPTIONS
|
|
698
|
-
};
|
|
699
|
-
|
|
700
|
-
//#endregion
|
|
701
|
-
//#region src/presets/akar/akar.theme.ts
|
|
702
|
-
function isHexColor(value) {
|
|
703
|
-
return /^#([A-F0-9]{6}|[A-F0-9]{3})$/i.test(value);
|
|
704
|
-
}
|
|
705
|
-
/**
|
|
706
|
-
* We want to generate the brand colors and inject them in to the theme.
|
|
707
|
-
* Please refer to the `DEFAULT_AKAR_OPTIONS.brands` for the default brand colors.
|
|
708
|
-
*
|
|
709
|
-
* So when there's an option like this: `primary: 'violet'`,
|
|
710
|
-
* we want to resolve it to the actual color value from the `unocss/preset-wind4` theme
|
|
711
|
-
* including all the shades, like `primary-100`, `primary-200`, etc.
|
|
712
|
-
*
|
|
713
|
-
* If the brand value is a hex color, we will use it directly as `DEFAULT` shade.
|
|
714
|
-
* e.g. `primary: '#7C3AED'` will be resolved to `{ primary: { DEFAULT: '#7C3AED' } }`
|
|
715
|
-
*
|
|
716
|
-
* TODO: It would be nice to also auto generate all the shades from the hex color,
|
|
717
|
-
* or the user can define the nested object themselves.
|
|
718
|
-
*
|
|
719
|
-
* This function will return an object that can be directly used in the UnoCSS theme colors.
|
|
720
|
-
*/
|
|
721
|
-
function getAkarBrandColors(options) {
|
|
722
|
-
let akarBrands = DEFAULT_AKAR_OPTIONS.brands ?? {};
|
|
723
|
-
if (isObjectType(options.akar)) akarBrands = mergeDeep(akarBrands, options.akar.brands ?? {});
|
|
724
|
-
return Object.entries(akarBrands).reduce((acc, [brandKey, brandValue]) => {
|
|
725
|
-
if (isString(brandValue) && isHexColor(brandValue)) acc[brandKey] = { DEFAULT: brandValue };
|
|
726
|
-
else acc[brandKey] = theme.colors[brandValue];
|
|
727
|
-
return acc;
|
|
728
|
-
}, {});
|
|
729
|
-
}
|
|
730
|
-
|
|
731
518
|
//#endregion
|
|
732
519
|
//#region src/resolver.ts
|
|
733
520
|
async function resolveOptions(options) {
|
|
@@ -740,7 +527,7 @@ async function resolveOptions(options) {
|
|
|
740
527
|
const presets = await resolvePresets(optionsWithDefault);
|
|
741
528
|
const transformers = await resolveTransformers(optionsWithDefault);
|
|
742
529
|
const { theme: themeExtend, shortcuts, safelist } = resolveExtend(optionsWithDefault);
|
|
743
|
-
const theme_ = mergeDeep(
|
|
530
|
+
const theme_ = mergeDeep(optionsWithDefault.theme, themeExtend);
|
|
744
531
|
return {
|
|
745
532
|
...optionsWithDefault,
|
|
746
533
|
theme: { ...theme_ },
|
|
@@ -752,14 +539,6 @@ async function resolveOptions(options) {
|
|
|
752
539
|
}
|
|
753
540
|
};
|
|
754
541
|
}
|
|
755
|
-
function resolveTheme(options) {
|
|
756
|
-
const enableAkar = Boolean(options.akar);
|
|
757
|
-
let baseTheme = options.theme;
|
|
758
|
-
if (!enableAkar) return baseTheme;
|
|
759
|
-
const akarBrands = getAkarBrandColors(options);
|
|
760
|
-
baseTheme = mergeDeep(baseTheme, { colors: akarBrands });
|
|
761
|
-
return baseTheme;
|
|
762
|
-
}
|
|
763
542
|
async function resolvePresets(options) {
|
|
764
543
|
const presets = [];
|
|
765
544
|
const presetMap = {
|
|
@@ -772,7 +551,7 @@ async function resolvePresets(options) {
|
|
|
772
551
|
magicCss: import("./magic-css-BxO5zv5z.js").then((mod) => mod.presetMagicss),
|
|
773
552
|
animation: import("./animation-KZDlcVMl.js").then((mod) => mod.presetAnimation),
|
|
774
553
|
fluid: import("./fluid-Ne2qtSnB.js").then((mod) => mod.presetFluid),
|
|
775
|
-
akar: import("./akar-
|
|
554
|
+
akar: import("./akar-x3gQJnHH.js").then((mod) => mod.presetAkar)
|
|
776
555
|
};
|
|
777
556
|
for (const [key, preset] of Object.entries(presetMap)) {
|
|
778
557
|
const option = options[key];
|
|
@@ -843,11 +622,11 @@ function resolveExtend(options) {
|
|
|
843
622
|
//#region src/index.ts
|
|
844
623
|
const presetVinicunca = definePreset(async (options) => {
|
|
845
624
|
const resolvedOptions = await resolveOptions(options ?? {});
|
|
846
|
-
const { enableDefaultShortcuts, unColor, theme
|
|
625
|
+
const { enableDefaultShortcuts, unColor, theme, meta } = resolvedOptions;
|
|
847
626
|
return {
|
|
848
627
|
name: `unocss-preset-${PRESET_NAME}`,
|
|
849
628
|
layers: { [PRESET_NAME]: 10 },
|
|
850
|
-
theme
|
|
629
|
+
theme,
|
|
851
630
|
shortcuts: [...enableDefaultShortcuts ? defaultShortcuts : [], ...meta.shortcuts],
|
|
852
631
|
postprocess: [unColor ? postprocessWithUnColor(unColor) : void 0].filter(Boolean),
|
|
853
632
|
presets: meta.presets,
|
package/package.json
CHANGED
package/dist/utils-DZIu2j5I.js
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
//#region src/utils.ts
|
|
2
|
-
const RE_ANIMATION = /^([a-z-]+)\s+([0-9.]+m?s?|[*+])?\s?([a-z-]+(?:\([^)]+\))?|[*+])?\s*([a-z0-9-]+|[*+])?$/i;
|
|
3
|
-
/**
|
|
4
|
-
* Normalize custom animate usage to UnoCSS animations theme.
|
|
5
|
-
*
|
|
6
|
-
* ⚠️ We must strictly follow the following format. ⚠️
|
|
7
|
-
*
|
|
8
|
-
* [ name, duration, timing-function, iteration-count ]
|
|
9
|
-
*
|
|
10
|
-
* If you use * as placeholder, it will be ignored.
|
|
11
|
-
*
|
|
12
|
-
* [name, duration, *, iteration-count]
|
|
13
|
-
*
|
|
14
|
-
* If you use + as placeholder, it will be replaced with empty string.
|
|
15
|
-
*
|
|
16
|
-
* [name, duration, +, iteration-count]
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
*
|
|
20
|
-
* { animate: ['spin 1s linear infinite'] }
|
|
21
|
-
*
|
|
22
|
-
* Will be transformed:
|
|
23
|
-
*
|
|
24
|
-
* {
|
|
25
|
-
* animate: ['spin 1s linear infinite'],
|
|
26
|
-
* durations: {
|
|
27
|
-
* spin: '1s',
|
|
28
|
-
* },
|
|
29
|
-
* timingFns: {
|
|
30
|
-
* spin: 'linear',
|
|
31
|
-
* },
|
|
32
|
-
* counts: {
|
|
33
|
-
* spin: 'infinite',
|
|
34
|
-
* },
|
|
35
|
-
* }
|
|
36
|
-
*/
|
|
37
|
-
function resolveAnimation(extendAnimation) {
|
|
38
|
-
const animation = {};
|
|
39
|
-
const keys = [
|
|
40
|
-
"durations",
|
|
41
|
-
"timingFns",
|
|
42
|
-
"counts"
|
|
43
|
-
];
|
|
44
|
-
const shortcuts = [];
|
|
45
|
-
for (const [key_, val_] of Object.entries(extendAnimation)) {
|
|
46
|
-
const match = val_.match(RE_ANIMATION);
|
|
47
|
-
if (match != null) {
|
|
48
|
-
const [, name, duration, timing, count] = match;
|
|
49
|
-
const values = [
|
|
50
|
-
duration,
|
|
51
|
-
timing,
|
|
52
|
-
count
|
|
53
|
-
];
|
|
54
|
-
if (name !== key_) shortcuts.push([`animate-${key_}`, `animate-${name}`]);
|
|
55
|
-
for (let i = 0; i < keys.length; i++) {
|
|
56
|
-
const key = keys[i];
|
|
57
|
-
const value = values[i];
|
|
58
|
-
if (value != null) {
|
|
59
|
-
if (value === "*") continue;
|
|
60
|
-
if (animation[key]) animation[key][name] = values[i] === "+" ? "" : values[i];
|
|
61
|
-
else animation[key] = { [name]: values[i] === "+" ? "" : values[i] };
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
return {
|
|
67
|
-
animation,
|
|
68
|
-
shortcuts
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
function cssObj2StrSync(style) {
|
|
72
|
-
return Object.keys(style).reduce((str, key) => {
|
|
73
|
-
return `${str}${key}${stringifyObj(style[key])}`;
|
|
74
|
-
}, "").replace(/\n/g, "");
|
|
75
|
-
}
|
|
76
|
-
function stringifyObj(obj) {
|
|
77
|
-
return `{${Object.keys(obj).reduce((str, key) => {
|
|
78
|
-
return `${str}${camelToHyphen(key)}:${obj[key]};`;
|
|
79
|
-
}, "")}}`;
|
|
80
|
-
}
|
|
81
|
-
function camelToHyphen(str) {
|
|
82
|
-
return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
83
|
-
}
|
|
84
|
-
function compressCSS(css) {
|
|
85
|
-
return css.replace(/\s+/g, " ").replace(/\/\*[\s\S]*?\*\//g, "");
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
//#endregion
|
|
89
|
-
export { compressCSS, cssObj2StrSync, resolveAnimation };
|