@varlet/ui 3.16.0-alpha.1778310023051 → 3.16.0-alpha.1778498431663
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/card/Card.mjs +26 -4
- package/es/card/card.css +1 -1
- package/es/card/props.mjs +2 -0
- package/es/card/style/index.mjs +1 -0
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/paper/Paper.mjs +23 -6
- package/es/paper/paper.css +1 -1
- package/es/paper/props.mjs +2 -0
- package/es/paper/style/index.mjs +1 -0
- package/es/themes/md3-dark/card.mjs +1 -0
- package/es/themes/md3-dark/paper.mjs +1 -0
- package/es/themes/md3-light/card.mjs +1 -0
- package/es/themes/md3-light/paper.mjs +1 -0
- package/es/varlet.css +1 -1
- package/es/varlet.esm.js +3439 -3406
- package/highlight/web-types.en-US.json +37 -1
- package/highlight/web-types.zh-CN.json +37 -1
- package/lib/varlet.cjs.js +52 -9
- package/lib/varlet.css +1 -1
- package/package.json +7 -7
- package/types/card.d.ts +4 -0
- package/types/paper.d.ts +4 -0
- package/types/styleVars.d.ts +2 -0
- package/umd/varlet.js +6 -6
package/es/card/Card.mjs
CHANGED
|
@@ -23,6 +23,8 @@ import { computed, defineComponent, nextTick, ref, watch } from "vue";
|
|
|
23
23
|
import VarButton from "../button/index.mjs";
|
|
24
24
|
import { useLock } from "../context/lock.mjs";
|
|
25
25
|
import { useZIndex } from "../context/zIndex.mjs";
|
|
26
|
+
import Hover from "../hover/index.mjs";
|
|
27
|
+
import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
|
|
26
28
|
import VarIcon from "../icon/index.mjs";
|
|
27
29
|
import Ripple from "../ripple/index.mjs";
|
|
28
30
|
import { createNamespace, formatElevation } from "../utils/components.mjs";
|
|
@@ -33,9 +35,11 @@ const RIPPLE_DELAY = 500;
|
|
|
33
35
|
import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
|
|
34
36
|
const _hoisted_1 = ["src", "alt"];
|
|
35
37
|
function __render__(_ctx, _cache) {
|
|
38
|
+
const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
|
|
36
39
|
const _component_var_icon = _resolveComponent("var-icon");
|
|
37
40
|
const _component_var_button = _resolveComponent("var-button");
|
|
38
41
|
const _directive_ripple = _resolveDirective("ripple");
|
|
42
|
+
const _directive_hover = _resolveDirective("hover");
|
|
39
43
|
return _withDirectives((_openBlock(), _createElementBlock(
|
|
40
44
|
"div",
|
|
41
45
|
{
|
|
@@ -46,6 +50,8 @@ function __render__(_ctx, _cache) {
|
|
|
46
50
|
[_ctx.isRow, _ctx.n("--layout-row")],
|
|
47
51
|
[_ctx.variant === "outlined" || _ctx.outline, _ctx.n("--outline")],
|
|
48
52
|
[_ctx.variant === "filled", _ctx.n("--filled")],
|
|
53
|
+
[_ctx.surfaceLow, _ctx.n("--surface-low")],
|
|
54
|
+
[_ctx.hoverable, _ctx.n("--cursor")],
|
|
49
55
|
[_ctx.variant === "standard" || _ctx.outline, _ctx.formatElevation(_ctx.elevation, 1)]
|
|
50
56
|
)
|
|
51
57
|
),
|
|
@@ -179,6 +185,9 @@ function __render__(_ctx, _cache) {
|
|
|
179
185
|
2
|
|
180
186
|
/* CLASS */
|
|
181
187
|
),
|
|
188
|
+
_createVNode(_component_var_hover_overlay, {
|
|
189
|
+
hovering: _ctx.hoverable && !_ctx.floated ? _ctx.hovering : false
|
|
190
|
+
}, null, 8, ["hovering"]),
|
|
182
191
|
_ctx.showFloatingButtons ? (_openBlock(), _createElementBlock(
|
|
183
192
|
"div",
|
|
184
193
|
{
|
|
@@ -233,15 +242,17 @@ function __render__(_ctx, _cache) {
|
|
|
233
242
|
6
|
|
234
243
|
/* CLASS, STYLE */
|
|
235
244
|
)), [
|
|
236
|
-
[_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }]
|
|
245
|
+
[_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }],
|
|
246
|
+
[_directive_hover, _ctx.handleHovering, "desktop"]
|
|
237
247
|
]);
|
|
238
248
|
}
|
|
239
249
|
const __sfc__ = defineComponent({
|
|
240
250
|
name,
|
|
241
|
-
directives: { Ripple },
|
|
251
|
+
directives: { Ripple, Hover },
|
|
242
252
|
components: {
|
|
243
253
|
VarIcon,
|
|
244
|
-
VarButton
|
|
254
|
+
VarButton,
|
|
255
|
+
VarHoverOverlay
|
|
245
256
|
},
|
|
246
257
|
props,
|
|
247
258
|
setup(props2) {
|
|
@@ -258,6 +269,8 @@ const __sfc__ = defineComponent({
|
|
|
258
269
|
const contentHeight = ref("0px");
|
|
259
270
|
const opacity = ref("0");
|
|
260
271
|
const isRow = computed(() => props2.layout === "row");
|
|
272
|
+
const surfaceLow = computed(() => props2.surface === "low" && props2.variant !== "filled");
|
|
273
|
+
const { hovering, handleHovering } = useHoverOverlay();
|
|
261
274
|
const showFloatingButtons = ref(false);
|
|
262
275
|
const floated = ref(false);
|
|
263
276
|
const { zIndex } = useZIndex(() => props2.floating, 1);
|
|
@@ -265,6 +278,7 @@ const __sfc__ = defineComponent({
|
|
|
265
278
|
let dropdownFloaterLeft = "auto";
|
|
266
279
|
let dropper = null;
|
|
267
280
|
const floater = ref(null);
|
|
281
|
+
let hasEnteredFloating = false;
|
|
268
282
|
useLock(
|
|
269
283
|
() => props2.floating,
|
|
270
284
|
() => !isRow.value
|
|
@@ -276,7 +290,12 @@ const __sfc__ = defineComponent({
|
|
|
276
290
|
return;
|
|
277
291
|
}
|
|
278
292
|
nextTick(() => {
|
|
279
|
-
|
|
293
|
+
if (value) {
|
|
294
|
+
hasEnteredFloating = true;
|
|
295
|
+
floating();
|
|
296
|
+
} else if (hasEnteredFloating) {
|
|
297
|
+
dropdown();
|
|
298
|
+
}
|
|
280
299
|
});
|
|
281
300
|
},
|
|
282
301
|
{ immediate: true }
|
|
@@ -358,6 +377,9 @@ const __sfc__ = defineComponent({
|
|
|
358
377
|
opacity,
|
|
359
378
|
zIndex,
|
|
360
379
|
isRow,
|
|
380
|
+
surfaceLow,
|
|
381
|
+
hovering,
|
|
382
|
+
handleHovering,
|
|
361
383
|
showFloatingButtons,
|
|
362
384
|
floated,
|
|
363
385
|
n,
|
package/es/card/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position:
|
|
1
|
+
:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-surface-low-background: var(--color-surface-container-highest); --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: relative; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card--cursor { cursor: pointer;}.var-card--surface-low .var-card__floater { background-color: var(--card-surface-low-background);}.var-card--filled .var-card__floater { background-color: var(--card-filled-background);}
|
package/es/card/props.mjs
CHANGED
package/es/card/style/index.mjs
CHANGED
package/es/index.bundle.mjs
CHANGED
|
@@ -286,7 +286,7 @@ import './tooltip/style/index.mjs'
|
|
|
286
286
|
import './uploader/style/index.mjs'
|
|
287
287
|
import './watermark/style/index.mjs'
|
|
288
288
|
|
|
289
|
-
const version = '3.16.0-alpha.
|
|
289
|
+
const version = '3.16.0-alpha.1778498431663'
|
|
290
290
|
|
|
291
291
|
function install(app) {
|
|
292
292
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/index.mjs
CHANGED
|
@@ -190,7 +190,7 @@ export * from './tooltip/index.mjs'
|
|
|
190
190
|
export * from './uploader/index.mjs'
|
|
191
191
|
export * from './watermark/index.mjs'
|
|
192
192
|
|
|
193
|
-
const version = '3.16.0-alpha.
|
|
193
|
+
const version = '3.16.0-alpha.1778498431663'
|
|
194
194
|
|
|
195
195
|
function install(app) {
|
|
196
196
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/paper/Paper.mjs
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { call } from "@varlet/shared";
|
|
2
|
-
import { defineComponent } from "vue";
|
|
2
|
+
import { computed, defineComponent } from "vue";
|
|
3
|
+
import Hover from "../hover/index.mjs";
|
|
4
|
+
import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
|
|
3
5
|
import Ripple from "../ripple/index.mjs";
|
|
4
6
|
import { createNamespace, formatElevation } from "../utils/components.mjs";
|
|
5
7
|
import { toSizeUnit } from "../utils/elements.mjs";
|
|
6
8
|
import { props } from "./props.mjs";
|
|
7
9
|
const { name, n, classes } = createNamespace("paper");
|
|
8
|
-
import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
|
|
10
|
+
import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
|
|
9
11
|
function __render__(_ctx, _cache) {
|
|
12
|
+
const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
|
|
10
13
|
const _directive_ripple = _resolveDirective("ripple");
|
|
14
|
+
const _directive_hover = _resolveDirective("hover");
|
|
11
15
|
return _withDirectives((_openBlock(), _createElementBlock(
|
|
12
16
|
"div",
|
|
13
17
|
{
|
|
@@ -16,8 +20,9 @@ function __render__(_ctx, _cache) {
|
|
|
16
20
|
_ctx.n(),
|
|
17
21
|
_ctx.n("$--box"),
|
|
18
22
|
_ctx.formatElevation(_ctx.elevation, 2),
|
|
19
|
-
[_ctx.onClick, _ctx.n("--cursor")],
|
|
23
|
+
[_ctx.onClick || _ctx.hoverable, _ctx.n("--cursor")],
|
|
20
24
|
[_ctx.round, _ctx.n("--round")],
|
|
25
|
+
[_ctx.surfaceLow, _ctx.n("--surface-low")],
|
|
21
26
|
[_ctx.inline, _ctx.n("$--inline-flex")]
|
|
22
27
|
)
|
|
23
28
|
),
|
|
@@ -29,19 +34,28 @@ function __render__(_ctx, _cache) {
|
|
|
29
34
|
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
|
|
30
35
|
},
|
|
31
36
|
[
|
|
32
|
-
_renderSlot(_ctx.$slots, "default")
|
|
37
|
+
_renderSlot(_ctx.$slots, "default"),
|
|
38
|
+
_createVNode(_component_var_hover_overlay, {
|
|
39
|
+
hovering: _ctx.hoverable ? _ctx.hovering : false
|
|
40
|
+
}, null, 8, ["hovering"])
|
|
33
41
|
],
|
|
34
42
|
6
|
|
35
43
|
/* CLASS, STYLE */
|
|
36
44
|
)), [
|
|
37
|
-
[_directive_ripple, { disabled: !_ctx.ripple }]
|
|
45
|
+
[_directive_ripple, { disabled: !_ctx.ripple }],
|
|
46
|
+
[_directive_hover, _ctx.handleHovering, "desktop"]
|
|
38
47
|
]);
|
|
39
48
|
}
|
|
40
49
|
const __sfc__ = defineComponent({
|
|
41
50
|
name,
|
|
42
|
-
directives: { Ripple },
|
|
51
|
+
directives: { Ripple, Hover },
|
|
52
|
+
components: {
|
|
53
|
+
VarHoverOverlay
|
|
54
|
+
},
|
|
43
55
|
props,
|
|
44
56
|
setup(props2) {
|
|
57
|
+
const surfaceLow = computed(() => props2.surface === "low");
|
|
58
|
+
const { hovering, handleHovering } = useHoverOverlay();
|
|
45
59
|
function handleClick(e) {
|
|
46
60
|
call(props2.onClick, e);
|
|
47
61
|
}
|
|
@@ -49,6 +63,9 @@ const __sfc__ = defineComponent({
|
|
|
49
63
|
n,
|
|
50
64
|
classes,
|
|
51
65
|
formatElevation,
|
|
66
|
+
surfaceLow,
|
|
67
|
+
hovering,
|
|
68
|
+
handleHovering,
|
|
52
69
|
toSizeUnit,
|
|
53
70
|
handleClick
|
|
54
71
|
};
|
package/es/paper/paper.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}
|
|
1
|
+
:root { --paper-background: var(--color-surface-container-highest); --paper-surface-low-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { position: relative; background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}.var-paper--surface-low { background: var(--paper-surface-low-background);}
|
package/es/paper/props.mjs
CHANGED
package/es/paper/style/index.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var stdin_default = {
|
|
2
2
|
"--card-border-radius": "12px",
|
|
3
3
|
"--card-background": "var(--color-surface-container-highest)",
|
|
4
|
+
"--card-surface-low-background": "#1c1b1d",
|
|
4
5
|
"--card-filled-background": "var(--color-surface-container-highest)",
|
|
5
6
|
"--card-image-height": "188px",
|
|
6
7
|
"--card-title-color": "var(--color-inverse-surface)",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var stdin_default = {
|
|
2
2
|
"--card-border-radius": "12px",
|
|
3
3
|
"--card-background": "var(--color-surface-container-low)",
|
|
4
|
+
"--card-surface-low-background": "var(--color-surface-container-low)",
|
|
4
5
|
"--card-filled-background": "var(--color-surface-container-highest)",
|
|
5
6
|
"--card-image-height": "188px",
|
|
6
7
|
"--card-title-color": "#1D1B20",
|