@una-ui/preset 0.58.0 → 0.60.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/index.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { colors } from '@unocss/preset-mini/colors';
|
|
|
3
3
|
import { fonts } from '@unocss/preset-mini/rules';
|
|
4
4
|
import { handler, parseColor } from '@unocss/preset-mini/utils';
|
|
5
5
|
import { mergeDeep } from 'unocss';
|
|
6
|
-
import { s as shortcuts } from './shared/preset.
|
|
6
|
+
import { s as shortcuts } from './shared/preset.ByWFih15.mjs';
|
|
7
7
|
|
|
8
8
|
function presetUna(options = {
|
|
9
9
|
// TODO: add options
|
|
@@ -12,6 +12,7 @@ function presetUna(options = {
|
|
|
12
12
|
name: "@una-ui/preset",
|
|
13
13
|
options,
|
|
14
14
|
shortcuts,
|
|
15
|
+
separators: [":"],
|
|
15
16
|
theme: mergeDeep(theme, {
|
|
16
17
|
container: {
|
|
17
18
|
center: true,
|
package/dist/prefixes.mjs
CHANGED
|
@@ -88,6 +88,10 @@ const prefixes = [
|
|
|
88
88
|
"form-item",
|
|
89
89
|
"form-label",
|
|
90
90
|
"form-message",
|
|
91
|
+
"hover-card",
|
|
92
|
+
"hover-card-arrow",
|
|
93
|
+
"hover-card-content",
|
|
94
|
+
"hover-card-trigger",
|
|
91
95
|
"icon",
|
|
92
96
|
"indicator",
|
|
93
97
|
"input",
|
|
@@ -103,6 +107,11 @@ const prefixes = [
|
|
|
103
107
|
"navigation-menu-list",
|
|
104
108
|
"navigation-menu-trigger",
|
|
105
109
|
"navigation-menu-viewport",
|
|
110
|
+
"number-field",
|
|
111
|
+
"number-field-content",
|
|
112
|
+
"number-field-decrement",
|
|
113
|
+
"number-field-increment",
|
|
114
|
+
"number-field-input",
|
|
106
115
|
"pagination",
|
|
107
116
|
"pagination-ellipsis",
|
|
108
117
|
"pagination-selected",
|
|
@@ -520,6 +520,8 @@ const staticGeneral = {
|
|
|
520
520
|
"bg-accent-foreground": "bg-$c-accent-foreground",
|
|
521
521
|
"bg-popover": "bg-$c-popover",
|
|
522
522
|
"bg-popover-foreground": "bg-$c-popover-foreground",
|
|
523
|
+
"fill-base": "fill-$c-background",
|
|
524
|
+
"stroke-base": "stroke-$c-border",
|
|
523
525
|
// transition
|
|
524
526
|
"transition-base": "transition-all duration-100 ease-out",
|
|
525
527
|
// overrides
|
|
@@ -535,6 +537,27 @@ const general = [
|
|
|
535
537
|
staticIcons
|
|
536
538
|
];
|
|
537
539
|
|
|
540
|
+
const staticHoverCard = {
|
|
541
|
+
// configurations
|
|
542
|
+
"hover-card": "",
|
|
543
|
+
"hover-card-default-variant": "outline-gray",
|
|
544
|
+
// components
|
|
545
|
+
"hover-card-trigger": "",
|
|
546
|
+
"hover-card-content": "bg-base text-popover animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
|
|
547
|
+
"hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-base stroke-base",
|
|
548
|
+
// static variants
|
|
549
|
+
"hover-card-soft-gray": "bg-muted border border-base",
|
|
550
|
+
"hover-card-outline-gray": "bg-base border border-base"
|
|
551
|
+
};
|
|
552
|
+
const dynamicHoverCard = [
|
|
553
|
+
[/^hover-card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 fill-${c}-50 stroke-${c}-200 border-${c}-200 dark:(bg-${c}-900 border-${c}-700/58 fill-${c}-900 stroke-${c}-700/58)`],
|
|
554
|
+
[/^hover-card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border stroke-${c}-200 border-${c}-200 dark:(border-${c}-700/58 stroke-${c}-700/58)`]
|
|
555
|
+
];
|
|
556
|
+
const hoverCard = [
|
|
557
|
+
...dynamicHoverCard,
|
|
558
|
+
staticHoverCard
|
|
559
|
+
];
|
|
560
|
+
|
|
538
561
|
const staticIcon = {
|
|
539
562
|
// base
|
|
540
563
|
"icon-base": "flex-none"
|
|
@@ -603,7 +626,7 @@ const staticInput = {
|
|
|
603
626
|
const dynamicInput = [
|
|
604
627
|
// config
|
|
605
628
|
[/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-${c}-500 dark:focus-visible:ring-${c}-400 focus-visible:ring-1`],
|
|
606
|
-
[/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-500 dark:placeholder-${c}-400`],
|
|
629
|
+
[/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder:text-${c}-500 dark:placeholder:text-${c}-400`],
|
|
607
630
|
// variants
|
|
608
631
|
[/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `border border-input input-focus-${c}`],
|
|
609
632
|
[/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `input-focus-${c} border border-${c}-500 dark:border-${c}-400`]
|
|
@@ -688,6 +711,23 @@ const navigationMenu = [
|
|
|
688
711
|
staticNavigationMenu
|
|
689
712
|
];
|
|
690
713
|
|
|
714
|
+
const staticNumberField = {
|
|
715
|
+
// base
|
|
716
|
+
"number-field": "grid gap-1.5",
|
|
717
|
+
"number-field-content": "relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-1.25em [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-1.25em",
|
|
718
|
+
"number-field-decrement": "grid place-items-center absolute top-1/2 -translate-y-1/2 left-0 p-0.75em disabled:cursor-not-allowed disabled:opacity-20",
|
|
719
|
+
"number-field-input": "flex w-full rounded-md bg-transparent h-2.5714285714285716em py-0.2857142857142857em text-0.875em text-center shadow-sm transition-colors placeholder:text-muted disabled:n-disabled focus-visible:outline-none",
|
|
720
|
+
"number-field-increment": "grid place-items-center absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-0.75em"
|
|
721
|
+
};
|
|
722
|
+
const dynamicNumberField = [
|
|
723
|
+
// dynamic preset
|
|
724
|
+
[/^number-field-([^-]+)-([^-]+)$/, ([, v = "outline", c = "primary"]) => `input-${v}-${c}`]
|
|
725
|
+
];
|
|
726
|
+
const numberField = [
|
|
727
|
+
...dynamicNumberField,
|
|
728
|
+
staticNumberField
|
|
729
|
+
];
|
|
730
|
+
|
|
691
731
|
const staticPagination = {
|
|
692
732
|
// configurations
|
|
693
733
|
"pagination": "overflow-hidden",
|
|
@@ -1044,38 +1084,27 @@ const slider = [
|
|
|
1044
1084
|
|
|
1045
1085
|
const staticSwitch = {
|
|
1046
1086
|
// base
|
|
1047
|
-
"switch": "
|
|
1087
|
+
"switch": "h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm transition-colors",
|
|
1048
1088
|
"switch-disabled": "data-[disabled]:n-disabled",
|
|
1049
|
-
"switch-focus": "focus-visible:ring-brand focus-visible:ring-offset-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
1050
1089
|
// thumb
|
|
1051
|
-
"switch-thumb": "square-1em flex items-center justify-center
|
|
1090
|
+
"switch-thumb": "square-1em flex items-center justify-center pointer-events-none block rounded-full bg-base shadow-lg ring-0 transition-transform",
|
|
1052
1091
|
"switch-thumb-checked": "translate-x-1.01em",
|
|
1053
1092
|
"switch-thumb-unchecked": "translate-x-0.03em",
|
|
1054
|
-
//
|
|
1093
|
+
// icons
|
|
1055
1094
|
"switch-icon": "text-0.7em",
|
|
1056
1095
|
"switch-icon-unchecked": "text-muted",
|
|
1057
1096
|
"switch-icon-checked": "text-muted",
|
|
1058
1097
|
// loading
|
|
1059
1098
|
"switch-loading-icon": "text-gray animate-spin text-0.8em",
|
|
1060
|
-
"switch-loading-icon-name": "i-loading"
|
|
1099
|
+
"switch-loading-icon-name": "i-loading",
|
|
1100
|
+
"switch-focus-gray": "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
1061
1101
|
};
|
|
1062
1102
|
const dynamicSwitch = [
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
return `data-[state=checked]:n-${color}-600 dark:data-[state=checked]:n-${color}-500`;
|
|
1069
|
-
}
|
|
1070
|
-
],
|
|
1071
|
-
[
|
|
1072
|
-
/^switch-unchecked(?:-([^-]+))?(?:-([^-]+))?$/,
|
|
1073
|
-
([, color = "gray"], { theme }) => {
|
|
1074
|
-
const parsedColor = parseColor$1(color, theme);
|
|
1075
|
-
if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
|
|
1076
|
-
return `data-[state=unchecked]:n-${color}-200 dark:data-[state=unchecked]:n-${color}-700/58`;
|
|
1077
|
-
}
|
|
1078
|
-
]
|
|
1103
|
+
// base
|
|
1104
|
+
[/^switch-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background`],
|
|
1105
|
+
// variants
|
|
1106
|
+
[/^switch-checked(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=checked]:switch-focus-${c} data-[state=checked]:bg-${c}-600 dark:data-[state=checked]:bg-${c}-500`],
|
|
1107
|
+
[/^switch-unchecked(-(\S+))?$/, ([, , c = "gray"]) => `data-[state=unchecked]:switch-focus-${c} data-[state=unchecked]:bg-${c}-200 dark:data-[state=unchecked]:bg-${c}-700/58`]
|
|
1079
1108
|
];
|
|
1080
1109
|
const _switch = [
|
|
1081
1110
|
...dynamicSwitch,
|
|
@@ -1245,12 +1274,14 @@ const shortcuts = [
|
|
|
1245
1274
|
...sheet,
|
|
1246
1275
|
...scrollArea,
|
|
1247
1276
|
...navigationMenu,
|
|
1277
|
+
...numberField,
|
|
1248
1278
|
...sidebar,
|
|
1249
1279
|
...aspectRatio,
|
|
1250
1280
|
...resizable,
|
|
1251
1281
|
...alertDialog,
|
|
1252
1282
|
...combobox,
|
|
1253
|
-
...drawer
|
|
1283
|
+
...drawer,
|
|
1284
|
+
...hoverCard
|
|
1254
1285
|
];
|
|
1255
1286
|
|
|
1256
1287
|
export { shortcuts as s };
|
package/dist/shortcuts.mjs
CHANGED