@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.
@@ -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"
@@ -479,6 +479,7 @@
479
479
  "v-model",
480
480
  "placeholder",
481
481
  "multiple",
482
+ "offset-y",
482
483
  "chip",
483
484
  "line",
484
485
  "hint",
@@ -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.6",
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": "是否使用纸片风格(仅限多选)",
@@ -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.createElementBlock)("div", {
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);}
@@ -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 16px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 16px 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
+ :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 16px;
4
+ @collapse-header-padding: 10px 12px;
5
5
  @collapse-content-font-size: var(--font-size-md);
6
- @collapse-content-padding: 0 16px 10px;
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);
@@ -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
  }
@@ -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
 
@@ -19,6 +19,10 @@ var props = {
19
19
  type: Boolean,
20
20
  default: false
21
21
  },
22
+ offsetY: {
23
+ type: [String, Number],
24
+ default: 0
25
+ },
22
26
  chip: {
23
27
  type: Boolean,
24
28
  default: false