vueless 0.0.156 → 0.0.157
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/package.json
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
export default /*tw*/ {
|
|
2
|
-
label: "w-auto max-w-max relative
|
|
2
|
+
label: "w-auto max-w-max relative", // TODO: label classes should be defined in ULabel component
|
|
3
3
|
partialIconName: "remove",
|
|
4
4
|
selectedIconName: "check",
|
|
5
5
|
iconWrapper: {
|
|
6
6
|
base: "flex items-center justify-center absolute rounded bg-{color}-500",
|
|
7
7
|
variants: {
|
|
8
8
|
size: {
|
|
9
|
+
xs: "size-4",
|
|
9
10
|
sm: "size-5",
|
|
10
11
|
md: "size-6",
|
|
11
12
|
lg: "size-7",
|
|
13
|
+
xl: "size-8",
|
|
12
14
|
},
|
|
13
15
|
color: {
|
|
14
16
|
grayscale: "border-gray-900 bg-gray-900",
|
|
@@ -18,24 +20,24 @@ export default /*tw*/ {
|
|
|
18
20
|
icon: "",
|
|
19
21
|
checkbox: {
|
|
20
22
|
base: `
|
|
21
|
-
border border-solid
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
border border-solid rounded
|
|
24
|
+
border-gray-300 bg-white
|
|
25
|
+
hover:border-gray-400
|
|
26
|
+
focus:border-{color}-500 focus:ring-4 focus:ring-opacity-20 focus:ring-offset-0 focus:ring-{color}-500
|
|
24
27
|
active:border-{color}-500 active:bg-{color}-500
|
|
25
|
-
checked:border-{color}-500 checked:bg-{color}-500 checked:
|
|
26
|
-
checked:text-{color}-500 checked:
|
|
27
|
-
checked:focus:text-{color}-500 checked:active:text-{color}-500
|
|
28
|
+
checked:border-{color}-500 checked:bg-{color}-500 checked:text-{color}-500
|
|
29
|
+
checked:hover:bg-{color}-500 checked:focus:text-{color}-500 checked:active:text-{color}-500
|
|
28
30
|
`,
|
|
29
31
|
variants: {
|
|
30
32
|
size: {
|
|
33
|
+
xs: "size-4 text-xs",
|
|
31
34
|
sm: "size-5 text-sm",
|
|
32
35
|
md: "size-6",
|
|
33
36
|
lg: "size-7 text-lg",
|
|
37
|
+
xl: "size-6 text-xl",
|
|
34
38
|
},
|
|
35
39
|
color: {
|
|
36
40
|
grayscale: `
|
|
37
|
-
border-gray-300
|
|
38
|
-
hover:border-gray-400
|
|
39
41
|
focus:border-gray-500 focus:ring-gray-200
|
|
40
42
|
checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
|
|
41
43
|
active:border-gray-900 active:bg-gray-900
|
|
@@ -58,12 +60,9 @@ export default /*tw*/ {
|
|
|
58
60
|
disabled: false,
|
|
59
61
|
},
|
|
60
62
|
safelist: (colors) => [
|
|
61
|
-
{ pattern: `bg-(${colors})-
|
|
62
|
-
{ pattern: `border-(${colors})-
|
|
63
|
-
{ pattern: `border-(${colors})-400`, variants: ["hover"] },
|
|
64
|
-
{ pattern: `border-(${colors})-500`, variants: ["focus"] },
|
|
65
|
-
{ pattern: `border-(${colors})-500`, variants: ["active", "checked"] },
|
|
63
|
+
{ pattern: `bg-(${colors})-500`, variants: ["active", "checked", "checked:hover"] },
|
|
64
|
+
{ pattern: `border-(${colors})-500`, variants: ["focus", "active", "checked"] },
|
|
66
65
|
{ pattern: `text-(${colors})-500`, variants: ["checked:focus", "checked", "checked:active"] },
|
|
67
|
-
{ pattern: `ring-(${colors})-
|
|
66
|
+
{ pattern: `ring-(${colors})-500`, variants: ["focus"] },
|
|
68
67
|
],
|
|
69
68
|
};
|
|
@@ -831,7 +831,7 @@ function deactivate() {
|
|
|
831
831
|
function onBlur(event) {
|
|
832
832
|
const { relatedTarget } = event;
|
|
833
833
|
|
|
834
|
-
if (!menuRef.value
|
|
834
|
+
if (!menuRef.value?.contains(relatedTarget)) {
|
|
835
835
|
deactivate();
|
|
836
836
|
}
|
|
837
837
|
}
|
|
@@ -844,7 +844,7 @@ function onBlurRangeInput(event) {
|
|
|
844
844
|
menuRef.value.focus();
|
|
845
845
|
}
|
|
846
846
|
|
|
847
|
-
if (!menuRef.value
|
|
847
|
+
if (!menuRef.value?.contains(relatedTarget) && !isHoverEvent.value) {
|
|
848
848
|
deactivate();
|
|
849
849
|
}
|
|
850
850
|
|