@varlet/ui 1.26.7 → 1.26.8
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/back-top/BackTop.js +12 -7
- package/es/cell/cell.css +1 -1
- package/es/cell/cell.less +3 -0
- package/es/collapse-item/collapseItem.css +1 -1
- package/es/collapse-item/collapseItem.less +2 -2
- package/es/ripple/index.js +5 -0
- package/es/select/Select.js +3 -1
- package/es/select/props.js +4 -0
- package/es/style.css +1 -1
- package/es/utils/elements.js +4 -0
- package/es/varlet.esm.js +379 -361
- package/highlight/attributes.json +4 -0
- package/highlight/tags.json +1 -0
- package/highlight/web-types.json +10 -1
- package/lib/back-top/BackTop.js +11 -6
- package/lib/cell/cell.css +1 -1
- package/lib/cell/cell.less +3 -0
- package/lib/collapse-item/collapseItem.css +1 -1
- package/lib/collapse-item/collapseItem.less +2 -2
- package/lib/ripple/index.js +6 -0
- package/lib/select/Select.js +3 -1
- package/lib/select/props.js +4 -0
- package/lib/style.css +1 -1
- package/lib/utils/elements.js +6 -0
- package/package.json +4 -4
- package/types/select.d.ts +1 -0
- package/umd/varlet.js +4 -4
|
@@ -1255,6 +1255,10 @@
|
|
|
1255
1255
|
"type": "boolean",
|
|
1256
1256
|
"description": "是否开启多选 默认值:false"
|
|
1257
1257
|
},
|
|
1258
|
+
"var-select/offset-y": {
|
|
1259
|
+
"type": "string | number",
|
|
1260
|
+
"description": "下拉菜单的垂直偏移量 默认值:true"
|
|
1261
|
+
},
|
|
1258
1262
|
"var-select/chip": {
|
|
1259
1263
|
"type": "boolean",
|
|
1260
1264
|
"description": "是否使用纸片风格(仅限多选) 默认值:false"
|
package/highlight/tags.json
CHANGED
package/highlight/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"framework": "vue",
|
|
4
|
-
"version": "1.26.
|
|
4
|
+
"version": "1.26.7",
|
|
5
5
|
"name": "VARLET",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -3739,6 +3739,15 @@
|
|
|
3739
3739
|
"kind": "expression"
|
|
3740
3740
|
}
|
|
3741
3741
|
},
|
|
3742
|
+
{
|
|
3743
|
+
"name": "offset-y",
|
|
3744
|
+
"description": "下拉菜单的垂直偏移量",
|
|
3745
|
+
"default": "true",
|
|
3746
|
+
"value": {
|
|
3747
|
+
"type": "string | number",
|
|
3748
|
+
"kind": "expression"
|
|
3749
|
+
}
|
|
3750
|
+
},
|
|
3742
3751
|
{
|
|
3743
3752
|
"name": "chip",
|
|
3744
3753
|
"description": "是否使用纸片风格(仅限多选)",
|
package/lib/back-top/BackTop.js
CHANGED
|
@@ -23,7 +23,10 @@ function render(_ctx, _cache) {
|
|
|
23
23
|
|
|
24
24
|
var _component_var_button = (0, _vue.resolveComponent)("var-button");
|
|
25
25
|
|
|
26
|
-
return (0, _vue.openBlock)(), (0, _vue.
|
|
26
|
+
return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
|
|
27
|
+
to: "body",
|
|
28
|
+
disabled: _ctx.disabled
|
|
29
|
+
}, [(0, _vue.createElementVNode)("div", {
|
|
27
30
|
class: (0, _vue.normalizeClass)(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
|
|
28
31
|
ref: "backTopEl",
|
|
29
32
|
style: (0, _vue.normalizeStyle)({
|
|
@@ -46,7 +49,9 @@ function render(_ctx, _cache) {
|
|
|
46
49
|
|
|
47
50
|
})])], 6
|
|
48
51
|
/* CLASS, STYLE */
|
|
49
|
-
)
|
|
52
|
+
)], 8
|
|
53
|
+
/* PROPS */
|
|
54
|
+
, ["disabled"]);
|
|
50
55
|
}
|
|
51
56
|
|
|
52
57
|
var _default = (0, _vue.defineComponent)({
|
|
@@ -61,6 +66,7 @@ var _default = (0, _vue.defineComponent)({
|
|
|
61
66
|
setup(props) {
|
|
62
67
|
var show = (0, _vue.ref)(false);
|
|
63
68
|
var backTopEl = (0, _vue.ref)(null);
|
|
69
|
+
var disabled = (0, _vue.ref)(true);
|
|
64
70
|
var target;
|
|
65
71
|
|
|
66
72
|
var click = event => {
|
|
@@ -94,21 +100,20 @@ var _default = (0, _vue.defineComponent)({
|
|
|
94
100
|
return el;
|
|
95
101
|
}
|
|
96
102
|
|
|
97
|
-
if ((0, _shared.isObject)(target))
|
|
98
|
-
return target;
|
|
99
|
-
}
|
|
100
|
-
|
|
103
|
+
if ((0, _shared.isObject)(target)) return target;
|
|
101
104
|
throw Error('[Varlet] BackTop: type of prop "target" should be a selector or an element object');
|
|
102
105
|
};
|
|
103
106
|
|
|
104
107
|
(0, _vue.onMounted)(() => {
|
|
105
108
|
target = props.target ? getTarget() : (0, _elements.getParentScroller)(backTopEl.value);
|
|
106
109
|
target.addEventListener('scroll', throttleScroll);
|
|
110
|
+
disabled.value = false;
|
|
107
111
|
});
|
|
108
112
|
(0, _vue.onBeforeUnmount)(() => {
|
|
109
113
|
target.removeEventListener('scroll', throttleScroll);
|
|
110
114
|
});
|
|
111
115
|
return {
|
|
116
|
+
disabled,
|
|
112
117
|
show,
|
|
113
118
|
backTopEl,
|
|
114
119
|
toSizeUnit: _elements.toSizeUnit,
|
package/lib/cell/cell.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --cell-font-size: var(--font-size-md); --cell-desc-font-size: var(--font-size-sm); --cell-desc-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__desc { font-size: var(--cell-desc-font-size); color: var(--cell-desc-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}
|
|
1
|
+
:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-desc-font-size: var(--font-size-sm); --cell-desc-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__desc { font-size: var(--cell-desc-font-size); color: var(--cell-desc-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}
|
package/lib/cell/cell.less
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@cell-color: var(--color-text);
|
|
1
2
|
@cell-font-size: var(--font-size-md);
|
|
2
3
|
@cell-desc-font-size: var(--font-size-sm);
|
|
3
4
|
@cell-desc-color: rgba(0, 0, 0, 0.6);
|
|
@@ -10,6 +11,7 @@
|
|
|
10
11
|
@cell-extra-left: 8px;
|
|
11
12
|
|
|
12
13
|
:root {
|
|
14
|
+
--cell-color: @cell-color;
|
|
13
15
|
--cell-font-size: @cell-font-size;
|
|
14
16
|
--cell-desc-font-size: @cell-desc-font-size;
|
|
15
17
|
--cell-desc-color: @cell-desc-color;
|
|
@@ -31,6 +33,7 @@
|
|
|
31
33
|
position: relative;
|
|
32
34
|
box-sizing: border-box;
|
|
33
35
|
font-size: var(--cell-font-size);
|
|
36
|
+
color: var(--cell-color);
|
|
34
37
|
|
|
35
38
|
&--border {
|
|
36
39
|
&::after {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px
|
|
1
|
+
:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item-header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item-header__title { transition: color 0.25s;}.var-collapse-item-header__icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item-header__disable { opacity: 0;}.var-collapse-item-header__open { transform: rotate(-180deg);}.var-collapse-item-content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item__active + .var-collapse-item,.var-collapse-item__active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item__active + .var-collapse-item::after,.var-collapse-item__active:not(:first-child)::after { border-top: none;}.var-collapse-item__disable { color: var(--collapse-disable-color); cursor: not-allowed;}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@collapse-background: #fff;
|
|
2
2
|
@collapse-text-color: #232222;
|
|
3
3
|
@collapse-header-font-size: var(--font-size-lg);
|
|
4
|
-
@collapse-header-padding: 10px
|
|
4
|
+
@collapse-header-padding: 10px 12px;
|
|
5
5
|
@collapse-content-font-size: var(--font-size-md);
|
|
6
|
-
@collapse-content-padding: 0
|
|
6
|
+
@collapse-content-padding: 0 12px 10px;
|
|
7
7
|
@collapse-item-margin-top: 16px;
|
|
8
8
|
@collapse-disable-color: #bdbdbd;
|
|
9
9
|
@collapse-border-top: thin solid rgba(0, 0, 0, 0.12);
|
package/lib/ripple/index.js
CHANGED
|
@@ -9,6 +9,8 @@ var _context = _interopRequireDefault(require("../context"));
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
var _elements = require("../utils/elements");
|
|
13
|
+
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -118,6 +120,10 @@ function removeRipple() {
|
|
|
118
120
|
function forbidRippleTask() {
|
|
119
121
|
var _ripple = this._ripple;
|
|
120
122
|
|
|
123
|
+
if (!(0, _elements.supportTouch)()) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
|
|
121
127
|
if (!_ripple.touchmoveForbid) {
|
|
122
128
|
return;
|
|
123
129
|
}
|
package/lib/select/Select.js
CHANGED
|
@@ -317,7 +317,7 @@ var _default = (0, _vue.defineComponent)({
|
|
|
317
317
|
}
|
|
318
318
|
|
|
319
319
|
wrapWidth.value = getWrapWidth();
|
|
320
|
-
offsetY.value = getOffsetY();
|
|
320
|
+
offsetY.value = getOffsetY() + (0, _elements.toPxNum)(props.offsetY);
|
|
321
321
|
isFocus.value = true;
|
|
322
322
|
onFocus == null ? void 0 : onFocus();
|
|
323
323
|
validateWithTrigger('onFocus');
|
|
@@ -448,6 +448,8 @@ var _default = (0, _vue.defineComponent)({
|
|
|
448
448
|
|
|
449
449
|
|
|
450
450
|
var focus = () => {
|
|
451
|
+
wrapWidth.value = getWrapWidth();
|
|
452
|
+
offsetY.value = getOffsetY() + (0, _elements.toPxNum)(props.offsetY);
|
|
451
453
|
isFocus.value = true;
|
|
452
454
|
}; // expose
|
|
453
455
|
|