@varlet/ui 3.7.1 → 3.7.2-alpha.1733245375527
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/es/action-sheet/style/index.mjs +1 -1
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/menu/Menu.mjs +11 -17
- package/es/menu/props.mjs +1 -1
- package/es/menu/usePopover.mjs +59 -36
- package/es/menu-select/MenuSelect.mjs +6 -1
- package/es/style.css +1 -1
- package/es/switch/switch.css +1 -1
- package/es/themes/dark/switch.mjs +14 -1
- package/es/themes/md3-dark/switch.mjs +14 -1
- package/es/themes/md3-light/switch.mjs +14 -1
- package/es/tooltip/Tooltip.mjs +11 -17
- package/es/tooltip/props.mjs +1 -1
- package/es/varlet.esm.js +4391 -4347
- package/highlight/web-types.en-US.json +1 -1
- package/highlight/web-types.zh-CN.json +1 -1
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +130 -75
- package/package.json +7 -7
- package/types/menu.d.ts +3 -1
- package/types/menuSelect.d.ts +3 -1
- package/types/styleVars.d.ts +13 -0
- package/types/tooltip.d.ts +3 -1
- package/umd/varlet.js +8 -8
package/es/switch/switch.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-
|
|
1
|
+
:root { --switch-width: 40px; --switch-height: 24px; --switch-track-width: 38px; --switch-track-height: 14.4px; --switch-track-border-radius: calc(20px * 2 / 3); --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-handle-width: 20px; --switch-handle-height: 20px; --switch-handle-background: var(--color-on-primary); --switch-handle-color: var(--color-primary); --switch-handle-active-color: var(--color-on-primary); --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-ripple-size: 40px; --switch-ripple-left: -10px; --switch-ripple-active-left: 10px; --switch-loading-size: 16px; --switch-disabled-opacity: var(--opacity-disabled); --switch-variant-width: 52px; --switch-variant-height: 32px; --switch-variant-track-border-color: #888; --switch-variant-track-background: var(--color-surface-container-highest); --switch-variant-handle-width: 24px; --switch-variant-handle-height: 24px; --switch-variant-handle-color: var(--color-on-primary); --switch-variant-handle-active-color: var(--color-primary); --switch-variant-handle-background: #888; --switch-variant-handle-active-background: var(--color-on-primary); --switch-variant-ripple-left: -4px; --switch-variant-ripple-active-left: 16px;}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; align-items: center; justify-content: center; width: var(--switch-width); height: var(--switch-height); transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { width: var(--switch-track-width); height: var(--switch-track-height); border-radius: var(--switch-track-border-radius); background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity));}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; outline: none; transition: 0.3s var(--cubic-bezier); width: var(--switch-ripple-size); height: var(--switch-ripple-size); left: var(--switch-ripple-left);}.var-switch__ripple--active { left: var(--switch-ripple-active-left);}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: var(--switch-handle-width); height: var(--switch-handle-height); outline: none;}.var-switch__handle--active { background-color: var(--switch-handle-active-background); color: var(--switch-handle-active-color);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch--variant .var-switch__block { width: var(--switch-variant-width); height: var(--switch-variant-height);}.var-switch--variant .var-switch__block:active .var-switch__handle { transform: scale(1.16666667);}.var-switch--variant .var-switch__track { width: 100%; height: 100%; border-radius: calc(var(--switch-variant-height) / 2); background-color: var(--switch-variant-track-background); border: 2px solid var(--switch-variant-track-border-color); filter: none;}.var-switch--variant .var-switch__track--active { background-color: var(--switch-track-active-background); border: none;}.var-switch--variant .var-switch__ripple { left: var(--switch-variant-ripple-left);}.var-switch--variant .var-switch__ripple--active { left: var(--switch-variant-ripple-active-left);}.var-switch--variant .var-switch__handle { width: var(--switch-variant-handle-width); height: var(--switch-variant-handle-height); color: var(--switch-variant-handle-color); transform: scale(0.66666667); background-color: var(--switch-variant-handle-background); transition: transform 0.2s;}.var-switch--variant .var-switch__handle--active { color: var(--switch-variant-handle-active-color); background-color: var(--switch-variant-handle-active-background); transform: none;}.var-switch--variant .var-switch--disabled:active .var-switch__handle { transform: none;}.var-switch__loading { display: inline-block; width: var(--switch-loading-size); height: var(--switch-loading-size); animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}
|
|
@@ -18,7 +18,20 @@ var stdin_default = {
|
|
|
18
18
|
"--switch-variant-handle-background": "rgb(255, 255, 255, .7)",
|
|
19
19
|
"--switch-variant-handle-color": "var(--color-primary)",
|
|
20
20
|
"--switch-variant-handle-active-color": "var(--color-primary)",
|
|
21
|
-
"--switch-variant-handle-active-background": "var(--color-on-primary)"
|
|
21
|
+
"--switch-variant-handle-active-background": "var(--color-on-primary)",
|
|
22
|
+
"--switch-width": "40px",
|
|
23
|
+
"--switch-height": "24px",
|
|
24
|
+
"--switch-track-width": "38px",
|
|
25
|
+
"--switch-track-height": "14.4px",
|
|
26
|
+
"--switch-track-border-radius": "calc(20px * 2 / 3)",
|
|
27
|
+
"--switch-handle-width": "20px",
|
|
28
|
+
"--switch-handle-height": "20px",
|
|
29
|
+
"--switch-ripple-size": "40px",
|
|
30
|
+
"--switch-ripple-left": "-10px",
|
|
31
|
+
"--switch-ripple-active-left": "10px",
|
|
32
|
+
"--switch-loading-size": "16px",
|
|
33
|
+
"--switch-variant-ripple-left": "-4px",
|
|
34
|
+
"--switch-variant-ripple-active-left": "16px"
|
|
22
35
|
};
|
|
23
36
|
export {
|
|
24
37
|
stdin_default as default
|
|
@@ -18,7 +18,20 @@ var stdin_default = {
|
|
|
18
18
|
"--switch-variant-handle-color": "var(--color-on-primary)",
|
|
19
19
|
"--switch-variant-handle-active-color": "var(--color-primary)",
|
|
20
20
|
"--switch-variant-handle-background": "#938F99",
|
|
21
|
-
"--switch-variant-handle-active-background": "var(--color-on-primary)"
|
|
21
|
+
"--switch-variant-handle-active-background": "var(--color-on-primary)",
|
|
22
|
+
"--switch-width": "40px",
|
|
23
|
+
"--switch-height": "24px",
|
|
24
|
+
"--switch-track-width": "38px",
|
|
25
|
+
"--switch-track-height": "14.4px",
|
|
26
|
+
"--switch-track-border-radius": "calc(20px * 2 / 3)",
|
|
27
|
+
"--switch-handle-width": "20px",
|
|
28
|
+
"--switch-handle-height": "20px",
|
|
29
|
+
"--switch-ripple-size": "40px",
|
|
30
|
+
"--switch-ripple-left": "-10px",
|
|
31
|
+
"--switch-ripple-active-left": "10px",
|
|
32
|
+
"--switch-loading-size": "16px",
|
|
33
|
+
"--switch-variant-ripple-left": "-4px",
|
|
34
|
+
"--switch-variant-ripple-active-left": "16px"
|
|
22
35
|
};
|
|
23
36
|
export {
|
|
24
37
|
stdin_default as default
|
|
@@ -18,7 +18,20 @@ var stdin_default = {
|
|
|
18
18
|
"--switch-variant-handle-color": "var(--color-on-primary)",
|
|
19
19
|
"--switch-variant-handle-active-color": "var(--color-primary)",
|
|
20
20
|
"--switch-variant-handle-background": "#79747E",
|
|
21
|
-
"--switch-variant-handle-active-background": "var(--color-on-primary)"
|
|
21
|
+
"--switch-variant-handle-active-background": "var(--color-on-primary)",
|
|
22
|
+
"--switch-width": "40px",
|
|
23
|
+
"--switch-height": "24px",
|
|
24
|
+
"--switch-track-width": "38px",
|
|
25
|
+
"--switch-track-height": "14.4px",
|
|
26
|
+
"--switch-track-border-radius": "calc(20px * 2 / 3)",
|
|
27
|
+
"--switch-handle-width": "20px",
|
|
28
|
+
"--switch-handle-height": "20px",
|
|
29
|
+
"--switch-ripple-size": "40px",
|
|
30
|
+
"--switch-ripple-left": "-10px",
|
|
31
|
+
"--switch-ripple-active-left": "10px",
|
|
32
|
+
"--switch-loading-size": "16px",
|
|
33
|
+
"--switch-variant-ripple-left": "-4px",
|
|
34
|
+
"--switch-variant-ripple-active-left": "16px"
|
|
22
35
|
};
|
|
23
36
|
export {
|
|
24
37
|
stdin_default as default
|
package/es/tooltip/Tooltip.mjs
CHANGED
|
@@ -10,10 +10,7 @@ function __render__(_ctx, _cache) {
|
|
|
10
10
|
"div",
|
|
11
11
|
{
|
|
12
12
|
ref: "host",
|
|
13
|
-
class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
|
|
14
|
-
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleHostClick && _ctx.handleHostClick(...args)),
|
|
15
|
-
onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleHostMouseenter && _ctx.handleHostMouseenter(...args)),
|
|
16
|
-
onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleHostMouseleave && _ctx.handleHostMouseleave(...args))
|
|
13
|
+
class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
|
|
17
14
|
},
|
|
18
15
|
[
|
|
19
16
|
_renderSlot(_ctx.$slots, "default"),
|
|
@@ -46,7 +43,7 @@ function __render__(_ctx, _cache) {
|
|
|
46
43
|
style: _normalizeStyle({
|
|
47
44
|
background: _ctx.color,
|
|
48
45
|
color: _ctx.textColor,
|
|
49
|
-
width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.
|
|
46
|
+
width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.referenceSize.width)) : void 0
|
|
50
47
|
}),
|
|
51
48
|
class: _normalizeClass(_ctx.classes(_ctx.n("content-container"), _ctx.n(`--${_ctx.type}`))),
|
|
52
49
|
role: "tooltip"
|
|
@@ -75,8 +72,8 @@ function __render__(_ctx, _cache) {
|
|
|
75
72
|
}, 8, ["name", "onAfterEnter", "onAfterLeave"])
|
|
76
73
|
], 8, ["to", "disabled"]))
|
|
77
74
|
],
|
|
78
|
-
|
|
79
|
-
/* CLASS
|
|
75
|
+
2
|
|
76
|
+
/* CLASS */
|
|
80
77
|
);
|
|
81
78
|
}
|
|
82
79
|
const __sfc__ = defineComponent({
|
|
@@ -87,12 +84,9 @@ const __sfc__ = defineComponent({
|
|
|
87
84
|
const {
|
|
88
85
|
popover,
|
|
89
86
|
host,
|
|
90
|
-
|
|
87
|
+
referenceSize,
|
|
91
88
|
show,
|
|
92
89
|
zIndex,
|
|
93
|
-
handleHostClick,
|
|
94
|
-
handleHostMouseenter,
|
|
95
|
-
handleHostMouseleave,
|
|
96
90
|
handlePopoverMouseenter,
|
|
97
91
|
handlePopoverMouseleave,
|
|
98
92
|
handlePopoverClose,
|
|
@@ -102,28 +96,28 @@ const __sfc__ = defineComponent({
|
|
|
102
96
|
// expose
|
|
103
97
|
close,
|
|
104
98
|
// expose
|
|
105
|
-
resize
|
|
99
|
+
resize,
|
|
100
|
+
// expose
|
|
101
|
+
setReference
|
|
106
102
|
} = usePopover(props2);
|
|
107
103
|
return {
|
|
108
104
|
popover,
|
|
109
105
|
host,
|
|
110
|
-
|
|
106
|
+
referenceSize,
|
|
111
107
|
show,
|
|
112
108
|
zIndex,
|
|
113
109
|
teleportDisabled,
|
|
114
110
|
toSizeUnit,
|
|
115
111
|
n,
|
|
116
112
|
classes,
|
|
117
|
-
handleHostClick,
|
|
118
113
|
handlePopoverClose,
|
|
119
|
-
handleHostMouseenter,
|
|
120
|
-
handleHostMouseleave,
|
|
121
114
|
handlePopoverMouseenter,
|
|
122
115
|
handlePopoverMouseleave,
|
|
123
116
|
handleClosed,
|
|
124
117
|
resize,
|
|
125
118
|
open,
|
|
126
|
-
close
|
|
119
|
+
close,
|
|
120
|
+
setReference
|
|
127
121
|
};
|
|
128
122
|
}
|
|
129
123
|
});
|