vunor 0.0.13 → 0.0.14
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/theme.mjs +261 -229
- package/package.json +1 -1
- package/src/components/Combobox/Combobox.vue +19 -14
- package/src/components/Icon/Icon.vue +1 -1
- package/src/components/Input/Input.vue +1 -1
- package/src/components/Input/InputShell.vue +7 -2
- package/src/components/Input/utils.ts +1 -0
- package/src/components/Select/SelectBase.vue +1 -0
package/dist/theme.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import N, { defu as F } from "defu";
|
|
2
2
|
import { presetWind as R } from "unocss";
|
|
3
|
-
import { palitra as w, color as
|
|
4
|
-
const f = (
|
|
3
|
+
import { palitra as w, color as z } from "@prostojs/palitra";
|
|
4
|
+
const f = (r) => r, A = f({
|
|
5
5
|
btn: {
|
|
6
6
|
"": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
|
|
7
7
|
"[&.btn-round]:": "px-fingertip-half rounded-fingertip-half",
|
|
@@ -39,7 +39,7 @@ const f = (e) => e, A = f({
|
|
|
39
39
|
"body-s",
|
|
40
40
|
"callout"
|
|
41
41
|
], D = f({
|
|
42
|
-
card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${L.map((
|
|
42
|
+
card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${L.map((r) => `data-[level=${r}]:card-${r}`).join(" ")}`
|
|
43
43
|
}), T = f({
|
|
44
44
|
"checkbox-root": {
|
|
45
45
|
"": "text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500",
|
|
@@ -244,8 +244,8 @@ const f = (e) => e, A = f({
|
|
|
244
244
|
}
|
|
245
245
|
}), G = f({
|
|
246
246
|
i8: {
|
|
247
|
-
"": "h-fingertip min-w-3em flex items-center select-none relative current-icon-grey-500 icon-current content-box
|
|
248
|
-
"data-[type=textarea]": "min-h-fingertip h-auto items-start",
|
|
247
|
+
"": "h-fingertip min-w-3em flex items-center select-none relative current-icon-grey-500 icon-current content-box border-current/20",
|
|
248
|
+
"data-[type=textarea]:": "min-h-fingertip h-auto items-start",
|
|
249
249
|
"data-[active=true]:": "icon-current-hl current-bg-white",
|
|
250
250
|
// 'dark:': '',
|
|
251
251
|
"[&.i8-flat]:": {
|
|
@@ -259,7 +259,10 @@ const f = (e) => e, A = f({
|
|
|
259
259
|
"data-[active=true]:": "current-bg-scope-dark-0"
|
|
260
260
|
}
|
|
261
261
|
},
|
|
262
|
-
"[&.i8-no-border]:": "border-0!
|
|
262
|
+
"[&.i8-no-border]:": "border-0!",
|
|
263
|
+
"[&.i8-no-outline]:": "outline-0!",
|
|
264
|
+
"group-[.i8-no-border]/i8:": "border-0!",
|
|
265
|
+
"group-[.i8-no-outline]/i8:": "outline-0!",
|
|
263
266
|
"[&.i8-transparent]:": "bg-transparent!",
|
|
264
267
|
"[&.i8-round]:": "rounded-fingertip-half border border-current/20",
|
|
265
268
|
"aria-[disabled=true]:": "opacity-50 cursor-not-allowed",
|
|
@@ -268,6 +271,7 @@ const f = (e) => e, A = f({
|
|
|
268
271
|
"": "current-border-error-500 border-current"
|
|
269
272
|
}
|
|
270
273
|
},
|
|
274
|
+
"i8-icon-wrap": "size-fingertip flex items-center justify-center",
|
|
271
275
|
"i8-underline": {
|
|
272
276
|
"group-[.i8-filled]/i8:": "hidden",
|
|
273
277
|
"": "absolute left-50% h-2px right-50% bottom-[-1px] pointer-events-none transition-all transition-duration-300 will-change-left will-change-right bg-current-hl",
|
|
@@ -290,29 +294,32 @@ const f = (e) => e, A = f({
|
|
|
290
294
|
},
|
|
291
295
|
"i8-input": {
|
|
292
296
|
"": "w-full outline-none h-full bg-transparent",
|
|
293
|
-
"group-[.i8-
|
|
294
|
-
"group-[.i8-
|
|
295
|
-
"group-[.i8-filled]/i8:":
|
|
297
|
+
"group-[.i8-filled]/i8:[&[data-has-prepend='false']]:": "pl-$m",
|
|
298
|
+
"group-[.i8-filled]/i8:[&[data-has-append='false']]:": "pr-$m",
|
|
299
|
+
// "group-[.i8-filled]/i8:[&[data-has-prepend='true']]:": 'pr-0',
|
|
300
|
+
// "group-[.i8-filled]/i8:[&[data-has-append='true']]:": 'pl-0',
|
|
296
301
|
"selection:": "bg-scope-color-500 text-white",
|
|
297
302
|
"group-[.i8-round]/i8:[&[data-has-prepend='false']]:": "pl-fingertip-half",
|
|
298
303
|
"group-[.i8-round]/i8:[&[data-has-append='false']]:": "pr-fingertip-half",
|
|
299
304
|
"group-[[data-has-label]]/i8:": "pt-$m",
|
|
300
305
|
// groupped inputs paddings
|
|
301
|
-
"group-[.segmented
|
|
302
|
-
"group-[.segmented
|
|
306
|
+
"group-[.segmented.i8-round:not(:first-child)]/i8:[&[data-has-prepend=false]]:": "pl-$m",
|
|
307
|
+
"group-[.segmented.i8-round:not(:last-child)]/i8:[&[data-has-append=false]]:": "pr-$m"
|
|
303
308
|
},
|
|
304
309
|
"i8-textarea": {
|
|
305
310
|
"": "w-full outline-none h-full bg-transparent text-body",
|
|
306
311
|
// !
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
312
|
+
// 'group-[.i8-flat]/i8:data-[has-prepend=true]': 'pl-$s',
|
|
313
|
+
// 'group-[.i8-flat]/i8:data-[has-append=true]': 'pr-$s',
|
|
314
|
+
// 'group-[.i8-filled]/i8:': 'px-$m',
|
|
315
|
+
"group-[.i8-filled]/i8:[&[data-has-prepend='false']]:": "pl-$m",
|
|
316
|
+
"group-[.i8-filled]/i8:[&[data-has-append='false']]:": "pr-$m",
|
|
310
317
|
"selection:": "bg-scope-color-500 text-white",
|
|
311
318
|
"group-[.i8-round]/i8:[&[data-has-prepend='false']]:": "pl-fingertip-half",
|
|
312
319
|
"group-[.i8-round]/i8:[&[data-has-append='false']]:": "pr-fingertip-half",
|
|
313
320
|
// groupped inputs paddings
|
|
314
|
-
"group-[.segmented
|
|
315
|
-
"group-[.segmented
|
|
321
|
+
"group-[.segmented.i8-round:not(:first-child)]/i8:[&[data-has-prepend=false]]:": "pl-$m",
|
|
322
|
+
"group-[.segmented.i8-round:not(:last-child)]/i8:[&[data-has-append=false]]:": "pr-$m"
|
|
316
323
|
},
|
|
317
324
|
"i8-ta-wrapper": {
|
|
318
325
|
"": "w-full pt-0.75em",
|
|
@@ -328,14 +335,14 @@ const f = (e) => e, A = f({
|
|
|
328
335
|
"i8-label-wrapper": {
|
|
329
336
|
"": "pointer-events-none absolute left-0 right-0 bottom-0 top-0",
|
|
330
337
|
// paddings
|
|
331
|
-
"group-[.i8-
|
|
332
|
-
"group-[.i8-
|
|
338
|
+
"group-[.i8-filled]/i8:data-[has-prepend=true]": "pl-0",
|
|
339
|
+
"group-[.i8-filled]/i8:data-[has-append=true]": "pr-0",
|
|
333
340
|
"group-[.i8-filled]/i8:": "px-$m",
|
|
334
341
|
"group-[.i8-round]/i8:[&[data-has-prepend='false']]:": "pl-fingertip-half",
|
|
335
342
|
"group-[.i8-round]/i8:[&[data-has-append='false']]:": "pr-fingertip-half",
|
|
336
343
|
// groupped inputs paddings
|
|
337
|
-
"group-[.segmented
|
|
338
|
-
"group-[.segmented
|
|
344
|
+
"group-[.segmented.i8-round:not(:first-child)]/i8:[&[data-has-prepend=false]]:": "pl-$m",
|
|
345
|
+
"group-[.segmented.i8-round:not(:last-child)]/i8:[&[data-has-append=false]]:": "pr-$m"
|
|
339
346
|
},
|
|
340
347
|
"i8-hint": {
|
|
341
348
|
"": "text-caption pt-$xs text-grey-400 flex-1"
|
|
@@ -355,18 +362,22 @@ const f = (e) => e, A = f({
|
|
|
355
362
|
"": "relative pb-$xxs"
|
|
356
363
|
},
|
|
357
364
|
"i8-prepend": {
|
|
358
|
-
"": "
|
|
359
|
-
"group-[
|
|
360
|
-
|
|
365
|
+
"": "flex gap-$s items-center",
|
|
366
|
+
"group-[[data-type=textarea]]/i8:": "my-$m"
|
|
367
|
+
// 'group-[.i8-flat]/i8:': 'pr-$m',
|
|
368
|
+
// 'group-[.i8-filled]/i8:': 'px-$m',
|
|
369
|
+
// 'group-[.i8-round]/i8:': 'px-$m',
|
|
361
370
|
// groupped inputs paddings
|
|
362
|
-
|
|
371
|
+
// 'group-[.segmented:not(.i8-flat):not(:first-child)]/i8:': 'px-$m',
|
|
363
372
|
},
|
|
364
373
|
"i8-append": {
|
|
365
|
-
"": "
|
|
366
|
-
"group-[
|
|
367
|
-
|
|
374
|
+
"": "flex gap-$s items-center",
|
|
375
|
+
"group-[[data-type=textarea]]/i8:": "my-$m"
|
|
376
|
+
// 'group-[.i8-flat]/i8:': 'pl-$m',
|
|
377
|
+
// 'group-[.i8-filled]/i8:': 'px-$m',
|
|
378
|
+
// 'group-[.i8-round]/i8:': 'px-$m',
|
|
368
379
|
// groupped inputs paddings
|
|
369
|
-
|
|
380
|
+
// 'group-[.segmented:not(.i8-flat):not(:last-child)]/i8:': 'px-$m',
|
|
370
381
|
},
|
|
371
382
|
"i8-before": {
|
|
372
383
|
"": "h-fingertip flex items-center pr-$m current-icon-grey-500 icon-current",
|
|
@@ -377,41 +388,41 @@ const f = (e) => e, A = f({
|
|
|
377
388
|
"group-[[data-group-active=true]]/i8:": "icon-current-hl"
|
|
378
389
|
},
|
|
379
390
|
"i8-icon-clickable": {
|
|
380
|
-
"[&>.icon-
|
|
381
|
-
"[&>.icon-
|
|
391
|
+
"[&>.i8-icon-wrap]:": "cursor-pointer",
|
|
392
|
+
"[&>.i8-icon-wrap:hover]:": "current-icon-scope-color-500 icon-current"
|
|
382
393
|
}
|
|
383
394
|
});
|
|
384
|
-
function h(
|
|
395
|
+
function h(r) {
|
|
385
396
|
let t = "";
|
|
386
|
-
for (const [
|
|
397
|
+
for (const [e, o] of Object.entries(r)) {
|
|
387
398
|
const c = C(o);
|
|
388
|
-
t += `${c.map((i) => `${
|
|
399
|
+
t += `${c.map((i) => `${e}${i}`).join(" ")} `;
|
|
389
400
|
}
|
|
390
401
|
return t.trim();
|
|
391
402
|
}
|
|
392
|
-
function C(
|
|
393
|
-
if (typeof
|
|
394
|
-
return
|
|
395
|
-
if (Array.isArray(
|
|
396
|
-
return
|
|
403
|
+
function C(r) {
|
|
404
|
+
if (typeof r == "string")
|
|
405
|
+
return r.split(" ");
|
|
406
|
+
if (Array.isArray(r))
|
|
407
|
+
return r;
|
|
397
408
|
const t = [];
|
|
398
|
-
for (const [
|
|
399
|
-
t.push(...C(o).map((c) => `${
|
|
409
|
+
for (const [e, o] of Object.entries(r))
|
|
410
|
+
t.push(...C(o).map((c) => `${e}${c}`));
|
|
400
411
|
return t;
|
|
401
412
|
}
|
|
402
|
-
const K = (
|
|
403
|
-
const
|
|
413
|
+
const K = (r, t) => {
|
|
414
|
+
const e = {}, o = /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(r)]);
|
|
404
415
|
for (const c of Array.from(o))
|
|
405
416
|
if (!Object.prototype.hasOwnProperty.call(t, c))
|
|
406
|
-
|
|
407
|
-
else if (!Object.prototype.hasOwnProperty.call(
|
|
408
|
-
|
|
417
|
+
e[c] = r[c];
|
|
418
|
+
else if (!Object.prototype.hasOwnProperty.call(r, c))
|
|
419
|
+
e[c] = t[c];
|
|
409
420
|
else {
|
|
410
|
-
let i = t[c], n =
|
|
411
|
-
Array.isArray(i) && (i = i.join(" ")), Array.isArray(n) && (n = n.join(" ")), typeof i == "string" && typeof n == "string" ?
|
|
421
|
+
let i = t[c], n = r[c];
|
|
422
|
+
Array.isArray(i) && (i = i.join(" ")), Array.isArray(n) && (n = n.join(" ")), typeof i == "string" && typeof n == "string" ? e[c] = `${n} ${i}` : typeof i == "object" && typeof n == "string" ? e[c] = `${n} ${h(i)}` : typeof i == "string" && typeof n == "object" ? e[c] = `${h(n)} ${i}` : typeof i == "object" && typeof n == "object" && (e[c] = `${h(n)} ${h(i)}`);
|
|
412
423
|
}
|
|
413
|
-
return
|
|
414
|
-
}, H = (
|
|
424
|
+
return e;
|
|
425
|
+
}, H = (r) => r.reduce((t, e) => K(t, e), {}), Q = {
|
|
415
426
|
colors: {
|
|
416
427
|
primary: { color: "#004eaf", preserveInputColor: !0, saturate: { dark: -0.2, light: -0.2 } },
|
|
417
428
|
grey: { color: "#858892", saturate: { dark: 0, light: 0 } },
|
|
@@ -562,97 +573,97 @@ const K = (e, t) => {
|
|
|
562
573
|
]
|
|
563
574
|
}
|
|
564
575
|
};
|
|
565
|
-
function Z(
|
|
566
|
-
var d, g, v, y, k,
|
|
567
|
-
const t = (
|
|
568
|
-
for (const
|
|
569
|
-
const j = (d =
|
|
570
|
-
typeof j == "string" && (t[
|
|
576
|
+
function Z(r) {
|
|
577
|
+
var d, g, v, y, k, x, $;
|
|
578
|
+
const t = (r == null ? void 0 : r.colors) || {};
|
|
579
|
+
for (const S of Object.keys(t)) {
|
|
580
|
+
const j = (d = r == null ? void 0 : r.colors) == null ? void 0 : d[S];
|
|
581
|
+
typeof j == "string" && (t[S] = { color: j });
|
|
571
582
|
}
|
|
572
|
-
const
|
|
583
|
+
const e = N({ ...r, colors: t }, Q), o = {
|
|
573
584
|
count: 5,
|
|
574
585
|
preserveInputColor: !1,
|
|
575
586
|
luminance: {
|
|
576
|
-
dark: ((g =
|
|
577
|
-
light: ((v =
|
|
587
|
+
dark: ((g = e.layerPalette.luminance) == null ? void 0 : g.dark) ?? e.darkest,
|
|
588
|
+
light: ((v = e.layerPalette.luminance) == null ? void 0 : v.light) ?? e.darkest + e.layersDepth,
|
|
578
589
|
useMiddle: !1
|
|
579
590
|
},
|
|
580
|
-
saturate:
|
|
581
|
-
vivid:
|
|
591
|
+
saturate: e.layerPalette.saturate,
|
|
592
|
+
vivid: e.layerPalette.vivid,
|
|
582
593
|
suffixes: ["dark-0", "dark-1", "dark-2", "dark-3", "dark-4"]
|
|
583
594
|
}, c = w(
|
|
584
|
-
O(
|
|
595
|
+
O(e.colors, e.layerPalette.desaturate),
|
|
585
596
|
o
|
|
586
597
|
).toStrings();
|
|
587
598
|
o.suffixes = ["light-0", "light-1", "light-2", "light-3", "light-4"].reverse();
|
|
588
599
|
const i = o.luminance.light - o.luminance.dark;
|
|
589
600
|
o.luminance = { dark: 1 - i, light: 1, useMiddle: !1 };
|
|
590
601
|
const n = w(
|
|
591
|
-
O(
|
|
602
|
+
O(e.colors, e.layerPalette.desaturate),
|
|
592
603
|
o
|
|
593
604
|
).toStrings(), l = w(
|
|
594
605
|
{
|
|
595
|
-
primary:
|
|
596
|
-
grey:
|
|
597
|
-
secondary:
|
|
598
|
-
neutral:
|
|
599
|
-
good:
|
|
600
|
-
warn:
|
|
601
|
-
error:
|
|
606
|
+
primary: e.colors.primary,
|
|
607
|
+
grey: e.colors.grey,
|
|
608
|
+
secondary: e.colors.secondary,
|
|
609
|
+
neutral: e.colors.neutral,
|
|
610
|
+
good: e.colors.good,
|
|
611
|
+
warn: e.colors.warn,
|
|
612
|
+
error: e.colors.error
|
|
602
613
|
},
|
|
603
614
|
{
|
|
604
615
|
count: 10,
|
|
605
|
-
preserveInputColor:
|
|
616
|
+
preserveInputColor: e.mainPalette.preserveInputColor,
|
|
606
617
|
luminance: {
|
|
607
|
-
dark: ((y =
|
|
608
|
-
light: ((k =
|
|
609
|
-
useMiddle: (
|
|
610
|
-
middle: (
|
|
618
|
+
dark: ((y = e.mainPalette.luminance) == null ? void 0 : y.dark) ?? e.darkest + e.layersDepth + 0.02,
|
|
619
|
+
light: ((k = e.mainPalette.luminance) == null ? void 0 : k.light) ?? e.lightest,
|
|
620
|
+
useMiddle: (x = e.mainPalette.luminance) == null ? void 0 : x.useMiddle,
|
|
621
|
+
middle: ($ = e.mainPalette.luminance) == null ? void 0 : $.middle
|
|
611
622
|
},
|
|
612
|
-
saturate:
|
|
613
|
-
vivid:
|
|
623
|
+
saturate: e.mainPalette.saturate,
|
|
624
|
+
vivid: e.mainPalette.vivid
|
|
614
625
|
}
|
|
615
626
|
).toStrings();
|
|
616
627
|
return {
|
|
617
|
-
opts:
|
|
628
|
+
opts: e,
|
|
618
629
|
colors: {
|
|
619
630
|
...c,
|
|
620
631
|
...n,
|
|
621
632
|
...l
|
|
622
633
|
},
|
|
623
|
-
surfaces:
|
|
634
|
+
surfaces: e.surfaces
|
|
624
635
|
};
|
|
625
636
|
}
|
|
626
|
-
function O(
|
|
627
|
-
const
|
|
628
|
-
for (const [o, c] of Object.entries(
|
|
637
|
+
function O(r, t = 0.5) {
|
|
638
|
+
const e = {};
|
|
639
|
+
for (const [o, c] of Object.entries(r)) {
|
|
629
640
|
const i = typeof c == "string" ? c : c.color;
|
|
630
641
|
if (i) {
|
|
631
|
-
const [n, l, d] =
|
|
632
|
-
|
|
642
|
+
const [n, l, d] = z(i).hsl();
|
|
643
|
+
e[o] = z(n, l * t, d, "hsl").hex();
|
|
633
644
|
}
|
|
634
645
|
}
|
|
635
|
-
return
|
|
646
|
+
return e;
|
|
636
647
|
}
|
|
637
648
|
function _() {
|
|
638
649
|
return [
|
|
639
650
|
[
|
|
640
651
|
/^layer-([0-4])$/,
|
|
641
|
-
([,
|
|
642
|
-
let
|
|
643
|
-
return t.reverseDarkLayers && (
|
|
644
|
-
"": `current-bg-scope-light-${o} current-text-scope-dark-2 current-icon-scope-dark-2 bg-current text-current`,
|
|
645
|
-
"dark:": `current-bg-scope-dark-${
|
|
646
|
-
"[&.dark]:": `current-bg-scope-dark-${
|
|
652
|
+
([, r], { theme: t }) => {
|
|
653
|
+
let e = Number(r), o = Number(r);
|
|
654
|
+
return t.reverseDarkLayers && (e = 4 - Number(r)), t.reverseLightLayers && (o = 4 - Number(r)), h({
|
|
655
|
+
"": `current-bg-scope-light-${o} current-text-scope-dark-2 current-icon-scope-dark-2 current-border-grey-500 bg-current text-current`,
|
|
656
|
+
"dark:": `current-bg-scope-dark-${e} current-text-scope-light-2 current-icon-scope-light-2`,
|
|
657
|
+
"[&.dark]:": `current-bg-scope-dark-${e} current-text-scope-light-2 current-icon-scope-light-2`
|
|
647
658
|
});
|
|
648
659
|
}
|
|
649
660
|
],
|
|
650
661
|
[
|
|
651
662
|
/^surface-(.+)$/,
|
|
652
|
-
([,
|
|
653
|
-
"": `current-bg-${t.surfaces[
|
|
654
|
-
"dark:": `current-bg-${t.surfaces[
|
|
655
|
-
"[&.dark]:": `current-bg-${t.surfaces[
|
|
663
|
+
([, r], { theme: t }) => t.surfaces[r] ? h({
|
|
664
|
+
"": `current-bg-${t.surfaces[r][0]} current-text-${t.surfaces[r][1]} current-icon-${t.surfaces[r][1]} current-border-${t.surfaces[r][2]} bg-current text-current border-current icon-current`,
|
|
665
|
+
"dark:": `current-bg-${t.surfaces[r][3]} current-text-${t.surfaces[r][4]} current-icon-${t.surfaces[r][4]} current-border-${t.surfaces[r][5]} shadow-black/30`,
|
|
666
|
+
"[&.dark]:": `current-bg-${t.surfaces[r][3]} current-text-${t.surfaces[r][4]} current-icon-${t.surfaces[r][4]} current-border-${t.surfaces[r][5]} shadow-black/30`
|
|
656
667
|
}) : ""
|
|
657
668
|
],
|
|
658
669
|
{
|
|
@@ -660,25 +671,25 @@ function _() {
|
|
|
660
671
|
}
|
|
661
672
|
];
|
|
662
673
|
}
|
|
663
|
-
function p(
|
|
664
|
-
const
|
|
665
|
-
return Math.round(
|
|
674
|
+
function p(r, t = 0) {
|
|
675
|
+
const e = 10 ** t;
|
|
676
|
+
return Math.round(r * e) / e;
|
|
666
677
|
}
|
|
667
|
-
function m(
|
|
678
|
+
function m(r, t, e = 3) {
|
|
668
679
|
var i;
|
|
669
|
-
const o = Number.parseFloat(
|
|
670
|
-
return `${p(o * t,
|
|
680
|
+
const o = Number.parseFloat(r), c = ((i = /(px|em|rem|%)$/.exec(r)) == null ? void 0 : i[1]) || "";
|
|
681
|
+
return `${p(o * t, e)}${c}`;
|
|
671
682
|
}
|
|
672
683
|
const ee = {
|
|
673
|
-
getCSS: ({ theme:
|
|
674
|
-
b("figcaption",
|
|
684
|
+
getCSS: ({ theme: r }) => `${b("body", r.fontSize.body) + // renderFontCss('label', theme.fontSize.label) +
|
|
685
|
+
b("figcaption", r.fontSize.caption) + b("h1", r.fontSize.h1) + b("h2", r.fontSize.h2) + b("h3", r.fontSize.h3) + b("h4", r.fontSize.h4) + b("h5", r.fontSize.h5) + b("h6", r.fontSize.h6)}
|
|
675
686
|
:root {
|
|
676
687
|
--un-default-border-color: rgba(0,0,0,10%);
|
|
677
688
|
--scope-black: 0 0 0;
|
|
678
689
|
--scope-white: 255 255 255;
|
|
679
690
|
--scope-hl: var(--scope-color-500);
|
|
680
|
-
--v-fingertip: ${
|
|
681
|
-
--v-fingertip-half: ${m(
|
|
691
|
+
--v-fingertip: ${r.spacing["fingertip-m"] || "3em"};
|
|
692
|
+
--v-fingertip-half: ${m(r.spacing["fingertip-m"] || "3em", 0.5)};
|
|
682
693
|
}
|
|
683
694
|
|
|
684
695
|
html.dark, .dark {
|
|
@@ -720,15 +731,15 @@ html.dark, .dark {
|
|
|
720
731
|
}
|
|
721
732
|
`
|
|
722
733
|
};
|
|
723
|
-
function b(
|
|
724
|
-
return `${
|
|
734
|
+
function b(r, t) {
|
|
735
|
+
return `${r} { font-size: ${t[0]}; ${Object.entries(t[1]).map((e) => `${e[0]}: ${e[1]};`).join(" ")} }
|
|
725
736
|
`;
|
|
726
737
|
}
|
|
727
|
-
function s(
|
|
728
|
-
const [t,
|
|
729
|
-
return `${t} ${
|
|
738
|
+
function s(r) {
|
|
739
|
+
const [t, e, o, c] = z(r).rgba();
|
|
740
|
+
return `${t} ${e} ${o}`;
|
|
730
741
|
}
|
|
731
|
-
function P(
|
|
742
|
+
function P(r) {
|
|
732
743
|
return {
|
|
733
744
|
bg: "--un-bg-opacity",
|
|
734
745
|
text: "--un-text-opacity",
|
|
@@ -738,9 +749,9 @@ function P(e) {
|
|
|
738
749
|
border: "--un-border-opacity",
|
|
739
750
|
outline: "--un-outline-opacity",
|
|
740
751
|
caret: "--un-caret-opacity"
|
|
741
|
-
}[
|
|
752
|
+
}[r];
|
|
742
753
|
}
|
|
743
|
-
function W(
|
|
754
|
+
function W(r) {
|
|
744
755
|
return {
|
|
745
756
|
bg: "background-color",
|
|
746
757
|
text: "color",
|
|
@@ -750,35 +761,35 @@ function W(e) {
|
|
|
750
761
|
border: "border-color",
|
|
751
762
|
outline: "outline-color",
|
|
752
763
|
caret: "caret-color"
|
|
753
|
-
}[
|
|
764
|
+
}[r];
|
|
754
765
|
}
|
|
755
766
|
const re = [
|
|
756
767
|
[
|
|
757
768
|
/^current-(text|bg|icon|border|outline|caret|hl)-(.+)$/,
|
|
758
|
-
(
|
|
759
|
-
const
|
|
769
|
+
(r, { theme: t }) => {
|
|
770
|
+
const e = r[1], o = r[2];
|
|
760
771
|
if (o.startsWith("scope-"))
|
|
761
772
|
return {
|
|
762
|
-
[`--current-${
|
|
773
|
+
[`--current-${e}`]: `var(--${o})`
|
|
763
774
|
};
|
|
764
775
|
if (o === "hl")
|
|
765
776
|
return {
|
|
766
|
-
[`--current-${
|
|
777
|
+
[`--current-${e}`]: "var(--current-hl)"
|
|
767
778
|
};
|
|
768
779
|
const c = t.colors[o] || o;
|
|
769
780
|
if (c)
|
|
770
781
|
return {
|
|
771
782
|
// @ts-expect-error
|
|
772
783
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
773
|
-
[`--current-${
|
|
784
|
+
[`--current-${e}`]: s(c.DEFAULT || c)
|
|
774
785
|
};
|
|
775
786
|
}
|
|
776
787
|
],
|
|
777
788
|
[
|
|
778
789
|
/^(text|bg|icon|border|outline|caret|fill)-current(-text|-bg|-icon|-border|-outline|-caret|-hl)?(\/\d{1,3})?$/,
|
|
779
|
-
(
|
|
780
|
-
const
|
|
781
|
-
return
|
|
790
|
+
(r, { theme: t }) => {
|
|
791
|
+
const e = r[1], o = r[2] || `-${e}`, c = P(e), i = W(e), n = r[3], l = n ? Number(n.slice(1)) / 100 : 1, d = l === 1 ? `var(${c})` : l;
|
|
792
|
+
return e === "icon" ? {
|
|
782
793
|
[c]: l,
|
|
783
794
|
"--current-icon": o === "-hl" ? `var(--current${o})` : void 0
|
|
784
795
|
} : {
|
|
@@ -789,51 +800,51 @@ const re = [
|
|
|
789
800
|
],
|
|
790
801
|
[
|
|
791
802
|
/^scope-(.*)$/,
|
|
792
|
-
(
|
|
793
|
-
const
|
|
803
|
+
(r, { theme: t }) => {
|
|
804
|
+
const e = r[1], o = t.colors[e];
|
|
794
805
|
if (o)
|
|
795
806
|
return {
|
|
796
807
|
"--scope-color": s(o),
|
|
797
|
-
"--scope-color-50": s(t.colors[`${
|
|
798
|
-
"--scope-color-100": s(t.colors[`${
|
|
799
|
-
"--scope-color-200": s(t.colors[`${
|
|
800
|
-
"--scope-color-300": s(t.colors[`${
|
|
801
|
-
"--scope-color-400": s(t.colors[`${
|
|
802
|
-
"--scope-color-500": s(t.colors[`${
|
|
803
|
-
"--scope-color-600": s(t.colors[`${
|
|
804
|
-
"--scope-color-700": s(t.colors[`${
|
|
805
|
-
"--scope-color-800": s(t.colors[`${
|
|
806
|
-
"--scope-color-900": s(t.colors[`${
|
|
807
|
-
"--scope-light-0": s(t.colors[`${
|
|
808
|
-
"--scope-light-1": s(t.colors[`${
|
|
809
|
-
"--scope-light-2": s(t.colors[`${
|
|
810
|
-
"--scope-light-3": s(t.colors[`${
|
|
811
|
-
"--scope-light-4": s(t.colors[`${
|
|
812
|
-
"--scope-dark-0": s(t.colors[`${
|
|
813
|
-
"--scope-dark-1": s(t.colors[`${
|
|
814
|
-
"--scope-dark-2": s(t.colors[`${
|
|
815
|
-
"--scope-dark-3": s(t.colors[`${
|
|
816
|
-
"--scope-dark-4": s(t.colors[`${
|
|
817
|
-
"--current-hl": s(t.colors[`${
|
|
808
|
+
"--scope-color-50": s(t.colors[`${e}-50`]) || "",
|
|
809
|
+
"--scope-color-100": s(t.colors[`${e}-100`]) || "",
|
|
810
|
+
"--scope-color-200": s(t.colors[`${e}-200`]) || "",
|
|
811
|
+
"--scope-color-300": s(t.colors[`${e}-300`]) || "",
|
|
812
|
+
"--scope-color-400": s(t.colors[`${e}-400`]) || "",
|
|
813
|
+
"--scope-color-500": s(t.colors[`${e}-500`]) || "",
|
|
814
|
+
"--scope-color-600": s(t.colors[`${e}-600`]) || "",
|
|
815
|
+
"--scope-color-700": s(t.colors[`${e}-700`]) || "",
|
|
816
|
+
"--scope-color-800": s(t.colors[`${e}-800`]) || "",
|
|
817
|
+
"--scope-color-900": s(t.colors[`${e}-900`]) || "",
|
|
818
|
+
"--scope-light-0": s(t.colors[`${e}-light-0`]) || "",
|
|
819
|
+
"--scope-light-1": s(t.colors[`${e}-light-1`]) || "",
|
|
820
|
+
"--scope-light-2": s(t.colors[`${e}-light-2`]) || "",
|
|
821
|
+
"--scope-light-3": s(t.colors[`${e}-light-3`]) || "",
|
|
822
|
+
"--scope-light-4": s(t.colors[`${e}-light-4`]) || "",
|
|
823
|
+
"--scope-dark-0": s(t.colors[`${e}-dark-0`]) || "",
|
|
824
|
+
"--scope-dark-1": s(t.colors[`${e}-dark-1`]) || "",
|
|
825
|
+
"--scope-dark-2": s(t.colors[`${e}-dark-2`]) || "",
|
|
826
|
+
"--scope-dark-3": s(t.colors[`${e}-dark-3`]) || "",
|
|
827
|
+
"--scope-dark-4": s(t.colors[`${e}-dark-4`]) || "",
|
|
828
|
+
"--current-hl": s(t.colors[`${e}-500`]) || ""
|
|
818
829
|
};
|
|
819
830
|
}
|
|
820
831
|
],
|
|
821
832
|
[
|
|
822
833
|
/^(bg|text|fill|stroke|border|outline|icon|caret)-scope-((?:color|dark|light|text|bg|white|black|icon)(?:-\d+)?)(\/\d{1,3})?$/,
|
|
823
|
-
(
|
|
824
|
-
const
|
|
834
|
+
(r, { theme: t }) => {
|
|
835
|
+
const e = W(r[1]), o = P(r[1]), c = r[2], i = r[3], n = i ? Number(i.slice(1)) / 100 : 1, l = c.startsWith("color") ? `grey-${c.slice(6)}` : `grey-${c}`, d = n === 1 ? `var(${o})` : n;
|
|
825
836
|
return {
|
|
826
837
|
[o]: n,
|
|
827
|
-
[
|
|
838
|
+
[e]: `rgb(var(--scope-${c}, ${t.colors[l] || ""}) / ${d})`
|
|
828
839
|
};
|
|
829
840
|
}
|
|
830
841
|
],
|
|
831
842
|
[
|
|
832
843
|
/^icon-opacity-(\d{1,3})$/,
|
|
833
|
-
(
|
|
834
|
-
const
|
|
844
|
+
(r, { theme: t }) => {
|
|
845
|
+
const e = r[1];
|
|
835
846
|
return {
|
|
836
|
-
"--un-icon-opacity": Number(
|
|
847
|
+
"--un-icon-opacity": Number(e) / 100
|
|
837
848
|
};
|
|
838
849
|
}
|
|
839
850
|
],
|
|
@@ -842,14 +853,35 @@ const re = [
|
|
|
842
853
|
() => ({
|
|
843
854
|
color: "rgb(var(--current-icon) / var(--un-icon-opacity, 1))"
|
|
844
855
|
})
|
|
856
|
+
],
|
|
857
|
+
[
|
|
858
|
+
/^icon-size-(.*)$/,
|
|
859
|
+
(r, { theme: t }) => {
|
|
860
|
+
const e = r[1];
|
|
861
|
+
if (e.startsWith("[") && e.endsWith("]"))
|
|
862
|
+
return {
|
|
863
|
+
"--icon-size": e.slice(1, -1)
|
|
864
|
+
};
|
|
865
|
+
if (t.spacing[e])
|
|
866
|
+
return {
|
|
867
|
+
"--icon-size": t.spacing[e]
|
|
868
|
+
};
|
|
869
|
+
}
|
|
870
|
+
],
|
|
871
|
+
[
|
|
872
|
+
/^icon-size$/,
|
|
873
|
+
() => ({
|
|
874
|
+
width: "var(--icon-size, 1em)",
|
|
875
|
+
height: "var(--icon-size, 1em)"
|
|
876
|
+
})
|
|
845
877
|
]
|
|
846
878
|
], te = [
|
|
847
879
|
[
|
|
848
880
|
// special text margin (vertical) that compensates
|
|
849
881
|
// the line height
|
|
850
882
|
/^text-m([bty])?-(.*)$/,
|
|
851
|
-
(
|
|
852
|
-
const
|
|
883
|
+
(r, { theme: t }) => {
|
|
884
|
+
const e = r[1], o = r[2], c = e ? { y: ["top", "bottom"], t: ["top"], b: ["bottom"] }[e] : ["top", "bottom", "left", "right"], i = {};
|
|
853
885
|
if (t.spacing[o]) {
|
|
854
886
|
for (const n of c)
|
|
855
887
|
i[`margin-${n}`] = ["left", "right"].includes(n) ? t.spacing[o] : `calc(${t.spacing[o]} + var(--font-${n === "top" ? "tc" : "bc"}))`;
|
|
@@ -866,17 +898,17 @@ const re = [
|
|
|
866
898
|
],
|
|
867
899
|
[
|
|
868
900
|
/^card-dense$/,
|
|
869
|
-
(
|
|
901
|
+
(r, { theme: t }) => ({
|
|
870
902
|
"--card-spacing": "var(--card-spacing-dense)"
|
|
871
903
|
}),
|
|
872
904
|
{ layer: "utilities" }
|
|
873
905
|
],
|
|
874
906
|
[
|
|
875
907
|
/^card-(.*)$/,
|
|
876
|
-
(
|
|
877
|
-
const
|
|
878
|
-
if (t.fontSize[
|
|
879
|
-
const o = t.fontSize[
|
|
908
|
+
(r, { theme: t }) => {
|
|
909
|
+
const e = r[1];
|
|
910
|
+
if (t.fontSize[e]) {
|
|
911
|
+
const o = t.fontSize[e][1];
|
|
880
912
|
return {
|
|
881
913
|
"--card-spacing": `${m(o["--font-corrected"], t.cardSpacingFactor.regular)}`,
|
|
882
914
|
"--card-spacing-dense": `${m(
|
|
@@ -898,34 +930,34 @@ const re = [
|
|
|
898
930
|
],
|
|
899
931
|
[
|
|
900
932
|
/^fingertip-(.*)/,
|
|
901
|
-
(
|
|
902
|
-
const
|
|
903
|
-
if (
|
|
933
|
+
(r, { theme: t }) => {
|
|
934
|
+
const e = r[1];
|
|
935
|
+
if (e.startsWith("[") && e.endsWith("]"))
|
|
904
936
|
return {
|
|
905
|
-
"--v-fingertip":
|
|
906
|
-
"--v-fingertip-half": m(
|
|
937
|
+
"--v-fingertip": e.slice(1, -1),
|
|
938
|
+
"--v-fingertip-half": m(e.slice(1, -1), 0.5)
|
|
907
939
|
};
|
|
908
|
-
if (["xs", "s", "m", "l", "xl"].includes(
|
|
940
|
+
if (["xs", "s", "m", "l", "xl"].includes(e))
|
|
909
941
|
return {
|
|
910
|
-
"--v-fingertip": t.spacing[`fingertip-${
|
|
911
|
-
"--v-fingertip-half": m(t.spacing[`fingertip-${
|
|
942
|
+
"--v-fingertip": t.spacing[`fingertip-${e}`],
|
|
943
|
+
"--v-fingertip-half": m(t.spacing[`fingertip-${e}`], 0.5)
|
|
912
944
|
};
|
|
913
|
-
if (t.spacing[
|
|
945
|
+
if (t.spacing[e])
|
|
914
946
|
return {
|
|
915
|
-
"--v-fingertip": t.spacing[
|
|
916
|
-
"--v-fingertip-half": m(t.spacing[
|
|
947
|
+
"--v-fingertip": t.spacing[e],
|
|
948
|
+
"--v-fingertip-half": m(t.spacing[e], 0.5)
|
|
917
949
|
};
|
|
918
950
|
}
|
|
919
951
|
]
|
|
920
952
|
], oe = [...te, ...re];
|
|
921
|
-
function a(
|
|
922
|
-
return t * 1.618 **
|
|
953
|
+
function a(r, t = 1) {
|
|
954
|
+
return t * 1.618 ** r;
|
|
923
955
|
}
|
|
924
|
-
function u(
|
|
956
|
+
function u(r, t, e, o, c) {
|
|
925
957
|
return {
|
|
926
|
-
weight:
|
|
958
|
+
weight: r,
|
|
927
959
|
boldWeight: t,
|
|
928
|
-
size:
|
|
960
|
+
size: e,
|
|
929
961
|
height: o,
|
|
930
962
|
spacing: c
|
|
931
963
|
};
|
|
@@ -1086,21 +1118,21 @@ const ce = {
|
|
|
1086
1118
|
)
|
|
1087
1119
|
)
|
|
1088
1120
|
};
|
|
1089
|
-
function ne(
|
|
1090
|
-
const l =
|
|
1121
|
+
function ne(r, t, e, o, c, i = 1, n = 0.5) {
|
|
1122
|
+
const l = r * i, g = (o * r - l) / r, v = l / 2, y = l * n - v + g / 2, k = l * (1 - n) - v + g / 2, x = p(y, 4), $ = p(k, 4);
|
|
1091
1123
|
return {
|
|
1092
|
-
mt:
|
|
1093
|
-
mb:
|
|
1094
|
-
size:
|
|
1124
|
+
mt: x,
|
|
1125
|
+
mb: $,
|
|
1126
|
+
size: r,
|
|
1095
1127
|
correctedSize: l,
|
|
1096
1128
|
theme: [
|
|
1097
|
-
`${
|
|
1129
|
+
`${r}em`,
|
|
1098
1130
|
{
|
|
1099
|
-
"--font-bold":
|
|
1100
|
-
"--font-size": `${
|
|
1131
|
+
"--font-bold": e,
|
|
1132
|
+
"--font-size": `${r}em`,
|
|
1101
1133
|
"--font-corrected": `${l}em`,
|
|
1102
|
-
"--font-bc": `${
|
|
1103
|
-
"--font-tc": `${
|
|
1134
|
+
"--font-bc": `${-$}em`,
|
|
1135
|
+
"--font-tc": `${-x}em`,
|
|
1104
1136
|
"font-weight": t,
|
|
1105
1137
|
"line-height": `${o}em`,
|
|
1106
1138
|
"letter-spacing": `${c}em`
|
|
@@ -1112,23 +1144,23 @@ function ne(e, t, r, o, c, i = 1, n = 0.5) {
|
|
|
1112
1144
|
]
|
|
1113
1145
|
};
|
|
1114
1146
|
}
|
|
1115
|
-
const ie = (
|
|
1147
|
+
const ie = (r) => {
|
|
1116
1148
|
const t = {
|
|
1117
1149
|
// canonical
|
|
1118
|
-
$xxs: `${p(1 /
|
|
1119
|
-
$xs: `${p(1 /
|
|
1120
|
-
$s: `${p(1 /
|
|
1150
|
+
$xxs: `${p(1 / r.spacingFactor ** 3, 3)}em`,
|
|
1151
|
+
$xs: `${p(1 / r.spacingFactor ** 2, 3)}em`,
|
|
1152
|
+
$s: `${p(1 / r.spacingFactor, 3)}em`,
|
|
1121
1153
|
$m: "1em",
|
|
1122
|
-
$l: `${p(
|
|
1123
|
-
$xl: `${p(
|
|
1124
|
-
$xxl: `${p(
|
|
1154
|
+
$l: `${p(r.spacingFactor, 3)}em`,
|
|
1155
|
+
$xl: `${p(r.spacingFactor ** 2, 3)}em`,
|
|
1156
|
+
$xxl: `${p(r.spacingFactor ** 3, 3)}em`,
|
|
1125
1157
|
fingertip: "var(--v-fingertip)",
|
|
1126
1158
|
"fingertip-half": "var(--v-fingertip-half)",
|
|
1127
|
-
"fingertip-xs":
|
|
1128
|
-
"fingertip-s":
|
|
1129
|
-
"fingertip-m":
|
|
1130
|
-
"fingertip-l":
|
|
1131
|
-
"fingertip-xl":
|
|
1159
|
+
"fingertip-xs": r.fingertip.xs,
|
|
1160
|
+
"fingertip-s": r.fingertip.s,
|
|
1161
|
+
"fingertip-m": r.fingertip.m,
|
|
1162
|
+
"fingertip-l": r.fingertip.l,
|
|
1163
|
+
"fingertip-xl": r.fingertip.xl,
|
|
1132
1164
|
// font-based
|
|
1133
1165
|
"$font-tc": "var(--font-bc)",
|
|
1134
1166
|
"$font-bc": "var(--font-tc)",
|
|
@@ -1140,18 +1172,18 @@ const ie = (e) => {
|
|
|
1140
1172
|
"$card-heading-size": "var(--card-heading-size)",
|
|
1141
1173
|
"$card-heading-corrected": "var(--card-heading-corrected)",
|
|
1142
1174
|
// radius
|
|
1143
|
-
"base-radius":
|
|
1144
|
-
},
|
|
1175
|
+
"base-radius": r.baseRadius
|
|
1176
|
+
}, e = {
|
|
1145
1177
|
fingertip: "var(--v-fingertip)",
|
|
1146
1178
|
"fingertip-half": "var(--v-fingertip-half)",
|
|
1147
|
-
"fingertip-xs":
|
|
1148
|
-
"fingertip-s":
|
|
1149
|
-
"fingertip-m":
|
|
1150
|
-
"fingertip-l":
|
|
1151
|
-
"fingertip-xl":
|
|
1179
|
+
"fingertip-xs": r.fingertip.xs,
|
|
1180
|
+
"fingertip-s": r.fingertip.s,
|
|
1181
|
+
"fingertip-m": r.fingertip.m,
|
|
1182
|
+
"fingertip-l": r.fingertip.l,
|
|
1183
|
+
"fingertip-xl": r.fingertip.xl
|
|
1152
1184
|
}, o = {
|
|
1153
1185
|
...t,
|
|
1154
|
-
base:
|
|
1186
|
+
base: r.baseRadius
|
|
1155
1187
|
}, c = {
|
|
1156
1188
|
$bold: "var(--font-bold)"
|
|
1157
1189
|
}, i = {
|
|
@@ -1169,7 +1201,7 @@ const ie = (e) => {
|
|
|
1169
1201
|
}
|
|
1170
1202
|
]
|
|
1171
1203
|
};
|
|
1172
|
-
for (const [l, d] of Object.entries(
|
|
1204
|
+
for (const [l, d] of Object.entries(r.typography))
|
|
1173
1205
|
if (d != null && d.size) {
|
|
1174
1206
|
const g = ne(
|
|
1175
1207
|
d.size || 1,
|
|
@@ -1177,25 +1209,25 @@ const ie = (e) => {
|
|
|
1177
1209
|
d.boldWeight || 700,
|
|
1178
1210
|
d.height || 1,
|
|
1179
1211
|
d.spacing || 0,
|
|
1180
|
-
d.actualHeightFactor ||
|
|
1181
|
-
d.actualHeightTopBottomRatio ||
|
|
1212
|
+
d.actualHeightFactor || r.actualFontHeightFactor,
|
|
1213
|
+
d.actualHeightTopBottomRatio || r.actualFontHeightTopBottomRatio
|
|
1182
1214
|
);
|
|
1183
1215
|
i[l] = g.theme, t[l] = `${g.size}em`;
|
|
1184
1216
|
}
|
|
1185
|
-
const n = Z(
|
|
1217
|
+
const n = Z(r.palette);
|
|
1186
1218
|
return {
|
|
1187
1219
|
paletteOpts: n.opts,
|
|
1188
1220
|
theme: {
|
|
1189
1221
|
colors: n.colors,
|
|
1190
1222
|
surfaces: n.surfaces,
|
|
1191
1223
|
borderColor: "red",
|
|
1192
|
-
reverseLightLayers:
|
|
1193
|
-
reverseDarkLayers:
|
|
1194
|
-
lineHeight:
|
|
1224
|
+
reverseLightLayers: r.layers.reverseLight,
|
|
1225
|
+
reverseDarkLayers: r.layers.reverseDark,
|
|
1226
|
+
lineHeight: e,
|
|
1195
1227
|
spacing: t,
|
|
1196
1228
|
fontWeight: c,
|
|
1197
|
-
actualFontHeightFactor:
|
|
1198
|
-
cardSpacingFactor:
|
|
1229
|
+
actualFontHeightFactor: r.actualFontHeightFactor,
|
|
1230
|
+
cardSpacingFactor: r.cardSpacingFactor,
|
|
1199
1231
|
fontSize: i,
|
|
1200
1232
|
width: t,
|
|
1201
1233
|
height: t,
|
|
@@ -1260,8 +1292,8 @@ const ie = (e) => {
|
|
|
1260
1292
|
}
|
|
1261
1293
|
};
|
|
1262
1294
|
};
|
|
1263
|
-
function V(
|
|
1264
|
-
return t * Math.sqrt(1.618) **
|
|
1295
|
+
function V(r, t = 1) {
|
|
1296
|
+
return t * Math.sqrt(1.618) ** r;
|
|
1265
1297
|
}
|
|
1266
1298
|
const ae = {
|
|
1267
1299
|
spacingFactor: 1.618,
|
|
@@ -1284,18 +1316,18 @@ const ae = {
|
|
|
1284
1316
|
xl: "4em"
|
|
1285
1317
|
},
|
|
1286
1318
|
baseRadius: `${p(1 / 1.618, 3)}em`
|
|
1287
|
-
}, ge = (
|
|
1288
|
-
const t = F(
|
|
1289
|
-
|
|
1319
|
+
}, ge = (r) => {
|
|
1320
|
+
const t = F(r, ae), e = le();
|
|
1321
|
+
e.preflights || (e.preflights = []), e.preflights.push(ee), e.rules || (e.rules = []), e.rules.push(...oe);
|
|
1290
1322
|
const o = _(), c = ie(t);
|
|
1291
|
-
return
|
|
1323
|
+
return e.preflights.push({
|
|
1292
1324
|
getCSS: () => `__vunor_palette_options {background-image: url("data:image/gif;base64,${Buffer.from(
|
|
1293
1325
|
JSON.stringify({ ...c.paletteOpts, surfaces: void 0 })
|
|
1294
1326
|
).toString("base64")}")}`
|
|
1295
1327
|
}), {
|
|
1296
|
-
...
|
|
1328
|
+
...e,
|
|
1297
1329
|
name: "vunor",
|
|
1298
|
-
theme: F(c.theme,
|
|
1330
|
+
theme: F(c.theme, e.theme),
|
|
1299
1331
|
shortcuts: o,
|
|
1300
1332
|
layers: {
|
|
1301
1333
|
preflights: 0,
|
|
@@ -1307,17 +1339,17 @@ const ae = {
|
|
|
1307
1339
|
};
|
|
1308
1340
|
function le() {
|
|
1309
1341
|
var t;
|
|
1310
|
-
const
|
|
1311
|
-
return (t =
|
|
1312
|
-
|
|
1313
|
-
}),
|
|
1342
|
+
const r = R();
|
|
1343
|
+
return (t = r.rules) == null || t.forEach((e) => {
|
|
1344
|
+
e[0] instanceof RegExp && (e[0].source.startsWith("^m-") || e[0].source.startsWith("^ma?") || e[0].source.startsWith("^p-?") || e[0].source.startsWith("^pa?")) && (e[2] = e[2] || {}, e[2].layer = "utilities");
|
|
1345
|
+
}), r;
|
|
1314
1346
|
}
|
|
1315
1347
|
const se = [G, J, ...U], de = H(se);
|
|
1316
|
-
function be(
|
|
1317
|
-
const
|
|
1318
|
-
for (const [o, c] of Object.entries(
|
|
1319
|
-
|
|
1320
|
-
return
|
|
1348
|
+
function be(r, t = de) {
|
|
1349
|
+
const e = r ? H([t, r]) : t;
|
|
1350
|
+
for (const [o, c] of Object.entries(e))
|
|
1351
|
+
e[o] = typeof c == "string" ? c : h(c);
|
|
1352
|
+
return e;
|
|
1321
1353
|
}
|
|
1322
1354
|
export {
|
|
1323
1355
|
f as defineShortcuts,
|
package/package.json
CHANGED
|
@@ -333,7 +333,7 @@ function onKeydown(event: KeyboardEvent) {
|
|
|
333
333
|
:design="usePopover ? 'filled' : shellProps?.design"
|
|
334
334
|
:icon-append="usePopover ? undefined : dropdownIcon"
|
|
335
335
|
:icon-prepend="usePopover ? 'i--search' : shellProps?.iconPrepend"
|
|
336
|
-
:class="usePopover ? 'i8-no-border' : 'i8-combobox'"
|
|
336
|
+
:class="usePopover ? 'i8-no-border i8-no-outline' : 'i8-combobox'"
|
|
337
337
|
@append-click="openPopup"
|
|
338
338
|
:data-expanded="usePopover ? undefined : modelOpen"
|
|
339
339
|
>
|
|
@@ -419,9 +419,9 @@ function onKeydown(event: KeyboardEvent) {
|
|
|
419
419
|
|
|
420
420
|
<template v-else-if="usePopover">
|
|
421
421
|
<PopoverRoot v-model:open="popupOpen" modal>
|
|
422
|
-
<DefineItemsTemplate>
|
|
423
|
-
<slot name="selected-items" :items="selectedItems">
|
|
424
|
-
<div class="combobox-multi-input">
|
|
422
|
+
<DefineItemsTemplate v-slot="{ inputAttrs }">
|
|
423
|
+
<slot name="selected-items" :items="selectedItems" :input-attrs>
|
|
424
|
+
<div class="i8-input combobox-multi-input" v-bind="inputAttrs">
|
|
425
425
|
<div class="combobox-multi-items">
|
|
426
426
|
{{ selectedLabels }}
|
|
427
427
|
</div>
|
|
@@ -444,8 +444,8 @@ function onKeydown(event: KeyboardEvent) {
|
|
|
444
444
|
:class
|
|
445
445
|
:active="popupOpen || focused"
|
|
446
446
|
>
|
|
447
|
-
<template>
|
|
448
|
-
<UseItemsTemplate />
|
|
447
|
+
<template v-slot="inputAttrs">
|
|
448
|
+
<UseItemsTemplate :input-attrs="inputAttrs" />
|
|
449
449
|
</template>
|
|
450
450
|
|
|
451
451
|
<template #prepend v-if="!!$slots.prepend">
|
|
@@ -480,20 +480,25 @@ function onKeydown(event: KeyboardEvent) {
|
|
|
480
480
|
:model-value="selectedLabels"
|
|
481
481
|
:active="popupOpen || focused"
|
|
482
482
|
>
|
|
483
|
-
<
|
|
483
|
+
<template v-slot="inputAttrs">
|
|
484
|
+
<UseItemsTemplate :input-attrs="inputAttrs" />
|
|
485
|
+
</template>
|
|
484
486
|
|
|
485
487
|
<template #prepend v-if="!!$slots.prepend">
|
|
486
488
|
<slot name="prepend"></slot>
|
|
487
489
|
</template>
|
|
488
490
|
<template v-slot:append="{ iconAppend }">
|
|
489
|
-
<div class="flex
|
|
490
|
-
<
|
|
491
|
-
|
|
492
|
-
name="i--clear"
|
|
491
|
+
<div class="flex">
|
|
492
|
+
<div
|
|
493
|
+
class="i8-icon-wrap"
|
|
493
494
|
@click.stop="clearValue"
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
495
|
+
v-if="!!selectedLabels && !readonly && !disabled"
|
|
496
|
+
>
|
|
497
|
+
<VuIcon name="i--clear" class="combobox-c8-icon" />
|
|
498
|
+
</div>
|
|
499
|
+
<div class="i8-icon-wrap">
|
|
500
|
+
<VuIcon :name="dropdownIcon" class="combobox-c8-icon" />
|
|
501
|
+
</div>
|
|
497
502
|
</div>
|
|
498
503
|
</template>
|
|
499
504
|
</VuInputShell>
|
|
@@ -80,7 +80,7 @@ const emit = defineEmits<TInputEmits>()
|
|
|
80
80
|
</div>
|
|
81
81
|
|
|
82
82
|
<div :class="stackLabel ? 'i8-hint-wrapper-stack' : 'i8-hint-wrapper'">
|
|
83
|
-
<div class="i8-hint">
|
|
83
|
+
<div class="i8-hint" v-if="hint || error">
|
|
84
84
|
<slot v-if="$slots.error || (typeof error === 'string' && error.length)" name="error">
|
|
85
85
|
<span class="text-error-500">
|
|
86
86
|
{{ error }}
|
|
@@ -83,7 +83,9 @@ const hasValue = computed(() => (modelValue.value ? '' : undefined))
|
|
|
83
83
|
}"
|
|
84
84
|
>
|
|
85
85
|
<slot name="prepend" v-bind="attrs" :data-has-value="hasValue">
|
|
86
|
-
<
|
|
86
|
+
<div class="i8-icon-wrap" @click="emit('prependClick', $event)">
|
|
87
|
+
<VuIcon :name="iconPrepend!" />
|
|
88
|
+
</div>
|
|
87
89
|
</slot>
|
|
88
90
|
</div>
|
|
89
91
|
|
|
@@ -129,13 +131,16 @@ const hasValue = computed(() => (modelValue.value ? '' : undefined))
|
|
|
129
131
|
>
|
|
130
132
|
<VuLoadingIndicator v-if="loading" class="text-grey" />
|
|
131
133
|
<slot
|
|
134
|
+
v-if="$slots.append || !!iconAppend"
|
|
132
135
|
name="append"
|
|
133
136
|
v-bind="attrs"
|
|
134
137
|
:data-has-value="hasValue"
|
|
135
138
|
:emitClick="(event: MouseEvent) => emit('appendClick', event)"
|
|
136
139
|
:iconAppend
|
|
137
140
|
>
|
|
138
|
-
<
|
|
141
|
+
<div class="i8-icon-wrap" @click="emit('appendClick', $event)">
|
|
142
|
+
<VuIcon :name="iconAppend!" />
|
|
143
|
+
</div>
|
|
139
144
|
</slot>
|
|
140
145
|
</div>
|
|
141
146
|
</Primitive>
|
|
@@ -15,6 +15,7 @@ export function useHtmlInputAttrs(): ComputedRef<TInputAttrs> | undefined {
|
|
|
15
15
|
'required': props.required,
|
|
16
16
|
'disabled': props.disabled,
|
|
17
17
|
'readonly': props.readonly,
|
|
18
|
+
'maxlength': props.maxlength,
|
|
18
19
|
'autocomplete': props.autocomplete,
|
|
19
20
|
'data-has-prepend': !!instance.slots.prepend || !!instance.props.iconPrepend,
|
|
20
21
|
'data-has-append':
|