@varlet/ui 1.27.9-alpha.1653036733481 → 1.27.9
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/bottom-navigation-item/BottomNavigationItem.js +3 -1
- package/es/card/Card.js +48 -40
- package/es/card/card.css +1 -1
- package/es/card/card.less +33 -32
- package/es/card/props.js +8 -1
- package/es/style.css +1 -1
- package/es/varlet.esm.js +46 -37
- package/highlight/attributes.json +3 -3
- package/highlight/tags.json +3 -3
- package/highlight/web-types.json +5 -5
- package/lib/bottom-navigation-item/BottomNavigationItem.js +3 -1
- package/lib/card/Card.js +48 -40
- package/lib/card/card.css +1 -1
- package/lib/card/card.less +33 -32
- package/lib/card/props.js +8 -1
- package/lib/snackbar/style/index.js +1 -1
- package/lib/snackbar/style/less.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +4 -4
- package/types/card.d.ts +9 -2
- package/umd/varlet.js +2 -2
|
@@ -96,7 +96,9 @@ export default defineComponent({
|
|
|
96
96
|
};
|
|
97
97
|
|
|
98
98
|
var handleClick = () => {
|
|
99
|
-
var
|
|
99
|
+
var _name$value;
|
|
100
|
+
|
|
101
|
+
var active = (_name$value = name.value) != null ? _name$value : index.value;
|
|
100
102
|
call(props.onClick, active);
|
|
101
103
|
call(bottomNavigation.onToggle, active);
|
|
102
104
|
};
|
package/es/card/Card.js
CHANGED
|
@@ -28,15 +28,18 @@ export function render(_ctx, _cache) {
|
|
|
28
28
|
|
|
29
29
|
var _directive_ripple = _resolveDirective("ripple");
|
|
30
30
|
|
|
31
|
-
return _openBlock(), _createElementBlock("div", {
|
|
31
|
+
return _withDirectives((_openBlock(), _createElementBlock("div", {
|
|
32
32
|
ref: "card",
|
|
33
|
-
class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')])),
|
|
33
|
+
class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
|
|
34
|
+
style: _normalizeStyle({
|
|
35
|
+
zIndex: _ctx.floated ? _ctx.zIndex : undefined
|
|
36
|
+
}),
|
|
34
37
|
onClick: _cache[0] || (_cache[0] = function () {
|
|
35
38
|
return _ctx.onClick && _ctx.onClick(...arguments);
|
|
36
39
|
})
|
|
37
|
-
}, [
|
|
40
|
+
}, [_createElementVNode("div", {
|
|
38
41
|
ref: "cardFloater",
|
|
39
|
-
class: _normalizeClass(_ctx.classes(_ctx.n('floater')
|
|
42
|
+
class: _normalizeClass(_ctx.classes(_ctx.n('floater'))),
|
|
40
43
|
style: _normalizeStyle({
|
|
41
44
|
width: _ctx.floaterWidth,
|
|
42
45
|
height: _ctx.floaterHeight,
|
|
@@ -44,23 +47,25 @@ export function render(_ctx, _cache) {
|
|
|
44
47
|
left: _ctx.floaterLeft,
|
|
45
48
|
overflow: _ctx.floaterOverflow,
|
|
46
49
|
position: _ctx.floaterPosition,
|
|
47
|
-
|
|
48
|
-
zIndex: _ctx.floated ? _ctx.zIndex : undefined,
|
|
49
|
-
transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, border-radius " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
|
|
50
|
+
transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
|
|
50
51
|
})
|
|
51
|
-
}, [_renderSlot(_ctx.$slots, "image", {}, () =>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
52
|
+
}, [_renderSlot(_ctx.$slots, "image", {}, () => {
|
|
53
|
+
var _ctx$imageHeight;
|
|
54
|
+
|
|
55
|
+
return [_ctx.src ? (_openBlock(), _createElementBlock("img", {
|
|
56
|
+
key: 0,
|
|
57
|
+
class: _normalizeClass(_ctx.n('image')),
|
|
58
|
+
style: _normalizeStyle({
|
|
59
|
+
objectFit: _ctx.fit,
|
|
60
|
+
height: _ctx.toSizeUnit((_ctx$imageHeight = _ctx.imageHeight) != null ? _ctx$imageHeight : _ctx.height),
|
|
61
|
+
width: _ctx.toSizeUnit(_ctx.imageWidth)
|
|
62
|
+
}),
|
|
63
|
+
src: _ctx.src,
|
|
64
|
+
alt: _ctx.alt
|
|
65
|
+
}, null, 14
|
|
66
|
+
/* CLASS, STYLE, PROPS */
|
|
67
|
+
, _hoisted_1)) : _createCommentVNode("v-if", true)];
|
|
68
|
+
}), _createElementVNode("div", {
|
|
64
69
|
class: _normalizeClass(_ctx.n('container'))
|
|
65
70
|
}, [_renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
|
|
66
71
|
key: 0,
|
|
@@ -94,36 +99,37 @@ export function render(_ctx, _cache) {
|
|
|
94
99
|
/* CLASS, STYLE */
|
|
95
100
|
)) : _createCommentVNode("v-if", true)], 2
|
|
96
101
|
/* CLASS */
|
|
97
|
-
), _ctx.
|
|
102
|
+
), _ctx.showFloatingButtons ? (_openBlock(), _createElementBlock("div", {
|
|
98
103
|
key: 0,
|
|
99
|
-
class: _normalizeClass(_ctx.classes(_ctx.n('
|
|
104
|
+
class: _normalizeClass(_ctx.classes(_ctx.n('floating-buttons'), 'var--box')),
|
|
100
105
|
style: _normalizeStyle({
|
|
101
106
|
zIndex: _ctx.zIndex,
|
|
102
107
|
opacity: _ctx.opacity,
|
|
103
108
|
transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
|
|
104
109
|
})
|
|
105
|
-
}, [_renderSlot(_ctx.$slots, "
|
|
106
|
-
|
|
110
|
+
}, [_renderSlot(_ctx.$slots, "close-button", {}, () => [_createVNode(_component_var_button, {
|
|
111
|
+
"var-card-cover": "",
|
|
107
112
|
round: "",
|
|
108
|
-
class: _normalizeClass(_ctx.classes(_ctx.n('
|
|
113
|
+
class: _normalizeClass(_ctx.classes(_ctx.n('close-button'), 'var-elevation--6')),
|
|
109
114
|
onClick: _withModifiers(_ctx.close, ["stop"])
|
|
110
115
|
}, {
|
|
111
116
|
default: _withCtx(() => [_createVNode(_component_var_icon, {
|
|
117
|
+
"var-card-cover": "",
|
|
112
118
|
name: "window-close",
|
|
113
|
-
|
|
114
|
-
}
|
|
119
|
+
class: _normalizeClass(_ctx.n('close-button-icon'))
|
|
120
|
+
}, null, 8
|
|
121
|
+
/* PROPS */
|
|
122
|
+
, ["class"])]),
|
|
115
123
|
_: 1
|
|
116
124
|
/* STABLE */
|
|
117
125
|
|
|
118
126
|
}, 8
|
|
119
127
|
/* PROPS */
|
|
120
|
-
, ["class", "onClick"])])
|
|
128
|
+
, ["class", "onClick"])])], 6
|
|
121
129
|
/* CLASS, STYLE */
|
|
122
130
|
)) : _createCommentVNode("v-if", true)], 6
|
|
123
131
|
/* CLASS, STYLE */
|
|
124
|
-
)
|
|
125
|
-
disabled: !_ctx.ripple || _ctx.floater
|
|
126
|
-
}]]), _createElementVNode("div", {
|
|
132
|
+
), _createElementVNode("div", {
|
|
127
133
|
class: _normalizeClass(_ctx.n('holder')),
|
|
128
134
|
style: _normalizeStyle({
|
|
129
135
|
width: _ctx.holderWidth,
|
|
@@ -131,9 +137,11 @@ export function render(_ctx, _cache) {
|
|
|
131
137
|
})
|
|
132
138
|
}, null, 6
|
|
133
139
|
/* CLASS, STYLE */
|
|
134
|
-
)],
|
|
135
|
-
/* CLASS */
|
|
136
|
-
)
|
|
140
|
+
)], 6
|
|
141
|
+
/* CLASS, STYLE */
|
|
142
|
+
)), [[_directive_ripple, {
|
|
143
|
+
disabled: !_ctx.ripple || _ctx.floater
|
|
144
|
+
}]]);
|
|
137
145
|
}
|
|
138
146
|
export default defineComponent({
|
|
139
147
|
render,
|
|
@@ -156,7 +164,7 @@ export default defineComponent({
|
|
|
156
164
|
var floaterHeight = ref('100%');
|
|
157
165
|
var floaterTop = ref('auto');
|
|
158
166
|
var floaterLeft = ref('auto');
|
|
159
|
-
var floaterPosition = ref(
|
|
167
|
+
var floaterPosition = ref(undefined);
|
|
160
168
|
var floaterOverflow = ref('hidden');
|
|
161
169
|
var contentHeight = ref('0px');
|
|
162
170
|
var opacity = ref('0');
|
|
@@ -164,7 +172,7 @@ export default defineComponent({
|
|
|
164
172
|
zIndex
|
|
165
173
|
} = useZIndex(() => props.floating, 1);
|
|
166
174
|
var isRow = computed(() => props.layout === 'row');
|
|
167
|
-
var
|
|
175
|
+
var showFloatingButtons = ref(false);
|
|
168
176
|
var floated = ref(false);
|
|
169
177
|
useLock(() => props.floating, () => isRow);
|
|
170
178
|
var dropdownFloaterTop = 'auto';
|
|
@@ -193,7 +201,7 @@ export default defineComponent({
|
|
|
193
201
|
floaterPosition.value = 'fixed';
|
|
194
202
|
dropdownFloaterTop = floaterTop.value;
|
|
195
203
|
dropdownFloaterLeft = floaterLeft.value;
|
|
196
|
-
|
|
204
|
+
showFloatingButtons.value = true;
|
|
197
205
|
yield doubleRaf();
|
|
198
206
|
floaterTop.value = '0';
|
|
199
207
|
floaterLeft.value = '0';
|
|
@@ -221,7 +229,7 @@ export default defineComponent({
|
|
|
221
229
|
floaterLeft.value = dropdownFloaterLeft;
|
|
222
230
|
contentHeight.value = '0px';
|
|
223
231
|
opacity.value = '0';
|
|
224
|
-
|
|
232
|
+
showFloatingButtons.value = false;
|
|
225
233
|
dropper = setTimeout(() => {
|
|
226
234
|
holderWidth.value = 'auto';
|
|
227
235
|
holderHeight.value = 'auto';
|
|
@@ -232,7 +240,7 @@ export default defineComponent({
|
|
|
232
240
|
dropdownFloaterTop = 'auto';
|
|
233
241
|
dropdownFloaterLeft = 'auto';
|
|
234
242
|
floaterOverflow.value = 'hidden';
|
|
235
|
-
floaterPosition.value =
|
|
243
|
+
floaterPosition.value = undefined;
|
|
236
244
|
floated.value = false;
|
|
237
245
|
}, props.floatingDuration);
|
|
238
246
|
};
|
|
@@ -269,7 +277,7 @@ export default defineComponent({
|
|
|
269
277
|
zIndex,
|
|
270
278
|
isRow,
|
|
271
279
|
close,
|
|
272
|
-
|
|
280
|
+
showFloatingButtons,
|
|
273
281
|
floated
|
|
274
282
|
};
|
|
275
283
|
}
|
package/es/card/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width:
|
|
1
|
+
:root { --card-padding: 0 0 15px 0; --card-background: #fff; --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-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 0px 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;}.var-card { border-radius: var(--card-border-radius); overflow: hidden;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); 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__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.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;}.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;}.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;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__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] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}
|
package/es/card/card.less
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
@card-background: #fff;
|
|
3
3
|
@card-border-radius: 4px;
|
|
4
4
|
@card-image-width: 100%;
|
|
5
|
-
@card-row-image-width:
|
|
6
|
-
@card-row-height:
|
|
5
|
+
@card-row-image-width: 140px;
|
|
6
|
+
@card-row-height: 140px;
|
|
7
7
|
@card-image-height: 200px;
|
|
8
8
|
@card-title-color: #333;
|
|
9
9
|
@card-title-font-size: 20px;
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
@card-footer-margin: 30px 0 0px 0;
|
|
26
26
|
@card-line-height: 22px;
|
|
27
27
|
@card-row-line-height: 1.5;
|
|
28
|
-
@card-
|
|
29
|
-
@card-
|
|
30
|
-
@card-
|
|
31
|
-
@card-
|
|
32
|
-
@card-
|
|
33
|
-
@card-
|
|
28
|
+
@card-floating-buttons-bottom: 16px;
|
|
29
|
+
@card-floating-buttons-right: 16px;
|
|
30
|
+
@card-floating-buttons-color: #fff;
|
|
31
|
+
@card-close-button-icon-size: 24px;
|
|
32
|
+
@card-close-button-size: 56px;
|
|
33
|
+
@card-close-button-primary-color: #212121;
|
|
34
34
|
|
|
35
35
|
:root {
|
|
36
36
|
--card-padding: @card-padding;
|
|
@@ -60,24 +60,22 @@
|
|
|
60
60
|
--card-footer-margin: @card-footer-margin;
|
|
61
61
|
--card-line-height: @card-line-height;
|
|
62
62
|
--card-row-line-height: @card-row-line-height;
|
|
63
|
-
--card-
|
|
64
|
-
--card-
|
|
65
|
-
--card-
|
|
66
|
-
--card-
|
|
67
|
-
--card-
|
|
68
|
-
--card-
|
|
63
|
+
--card-floating-buttons-bottom: @card-floating-buttons-bottom;
|
|
64
|
+
--card-floating-buttons-right: @card-floating-buttons-right;
|
|
65
|
+
--card-floating-buttons-color: @card-floating-buttons-color;
|
|
66
|
+
--card-close-button-icon-size: @card-close-button-icon-size;
|
|
67
|
+
--card-close-button-size: @card-close-button-size;
|
|
68
|
+
--card-close-button-primary-color: @card-close-button-primary-color;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.var-card {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
position: relative;
|
|
75
|
-
}
|
|
72
|
+
border-radius: var(--card-border-radius);
|
|
73
|
+
overflow: hidden;
|
|
76
74
|
|
|
77
75
|
&__floater {
|
|
78
|
-
border-radius: var(--card-border-radius);
|
|
79
76
|
display: flex;
|
|
80
77
|
flex-direction: column;
|
|
78
|
+
position: static;
|
|
81
79
|
line-height: var(--card-line-height);
|
|
82
80
|
background: var(--card-background);
|
|
83
81
|
transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
|
|
@@ -90,7 +88,10 @@
|
|
|
90
88
|
}
|
|
91
89
|
|
|
92
90
|
&--layout-row &__floater {
|
|
91
|
+
min-height: var(--card-row-height);
|
|
92
|
+
height: 100%;
|
|
93
93
|
flex-direction: row;
|
|
94
|
+
position: relative;
|
|
94
95
|
line-height: var(--card-row-line-height);
|
|
95
96
|
}
|
|
96
97
|
|
|
@@ -102,7 +103,7 @@
|
|
|
102
103
|
|
|
103
104
|
&--layout-row &__image {
|
|
104
105
|
width: var(--card-row-image-width);
|
|
105
|
-
height:
|
|
106
|
+
height: auto;
|
|
106
107
|
display: block;
|
|
107
108
|
flex-shrink: 0;
|
|
108
109
|
}
|
|
@@ -167,21 +168,21 @@
|
|
|
167
168
|
transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
|
|
168
169
|
}
|
|
169
170
|
|
|
170
|
-
&
|
|
171
|
+
&__floating-buttons {
|
|
171
172
|
position: fixed;
|
|
172
|
-
bottom: var(--card-
|
|
173
|
-
right: var(--card-
|
|
173
|
+
bottom: var(--card-floating-buttons-bottom);
|
|
174
|
+
right: var(--card-floating-buttons-right);
|
|
175
|
+
color: var(--card-floating-buttons-color);
|
|
174
176
|
}
|
|
175
177
|
|
|
176
|
-
&
|
|
177
|
-
padding: var(--card-
|
|
178
|
-
|
|
179
|
-
|
|
178
|
+
&__close-button[var-card-cover] {
|
|
179
|
+
padding: var(--card-close-button-padding);
|
|
180
|
+
width: var(--card-close-button-size);
|
|
181
|
+
height: var(--card-close-button-size);
|
|
182
|
+
background-color: var(--card-close-button-primary-color);
|
|
183
|
+
}
|
|
180
184
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
height: var(--card-floater-toolbar-close-size);
|
|
184
|
-
font-size: var(--card-floater-toolbar-close-size);
|
|
185
|
-
}
|
|
185
|
+
&__close-button-icon[var-card-cover] {
|
|
186
|
+
font-size: var(--card-close-button-icon-size);
|
|
186
187
|
}
|
|
187
188
|
}
|
package/es/card/props.js
CHANGED
|
@@ -11,10 +11,17 @@ export var props = {
|
|
|
11
11
|
validator: fitValidator,
|
|
12
12
|
default: 'cover'
|
|
13
13
|
},
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated use imageHeight instead
|
|
17
|
+
*/
|
|
14
18
|
height: {
|
|
15
19
|
type: [String, Number]
|
|
16
20
|
},
|
|
17
|
-
|
|
21
|
+
imageHeight: {
|
|
22
|
+
type: [String, Number]
|
|
23
|
+
},
|
|
24
|
+
imageWidth: {
|
|
18
25
|
type: [String, Number]
|
|
19
26
|
},
|
|
20
27
|
layout: {
|