@varlet/ui 1.27.5 → 1.27.6

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.
@@ -12,32 +12,25 @@ export function releaseLock(uid) {
12
12
  delete context.locks[uid];
13
13
  resolveLock();
14
14
  }
15
- /**
16
- * 组件锁操作
17
- * @param props 组件props
18
- * @param state 组件props中控制组件加锁的开关对应的key值
19
- * @param use 组件props中控制组件加锁的开关是否可用对应的key值
20
- */
21
-
22
- export function useLock(props, state, use) {
15
+ export function useLock(source, useSource) {
23
16
  var {
24
17
  uid
25
18
  } = getCurrentInstance();
26
19
 
27
- if (use) {
28
- watch(() => props[use], newValue => {
20
+ if (useSource) {
21
+ watch(useSource, newValue => {
29
22
  if (newValue === false) {
30
23
  // 改变为禁用状态 组件解锁
31
24
  releaseLock(uid);
32
- } else if (newValue === true && props[state] === true) {
25
+ } else if (newValue === true && source() === true) {
33
26
  // 改变为启用状态 并且popup处于开启状态 组件加锁
34
27
  addLock(uid);
35
28
  }
36
29
  });
37
30
  }
38
31
 
39
- watch(() => props[state], newValue => {
40
- if (use && props[use] === false) {
32
+ watch(source, newValue => {
33
+ if (useSource && useSource() === false) {
41
34
  return;
42
35
  }
43
36
 
@@ -50,41 +43,41 @@ export function useLock(props, state, use) {
50
43
  }
51
44
  });
52
45
  onBeforeMount(() => {
53
- if (use && props[use] === false) {
46
+ if (useSource && useSource() === false) {
54
47
  return;
55
48
  }
56
49
 
57
- if (props[state] === true) {
50
+ if (source() === true) {
58
51
  // popup处于开启状态 组件挂载 组件加锁
59
52
  addLock(uid);
60
53
  }
61
54
  });
62
55
  onUnmounted(() => {
63
- if (use && props[use] === false) {
56
+ if (useSource && useSource() === false) {
64
57
  return;
65
58
  }
66
59
 
67
- if (props[state] === true) {
60
+ if (source() === true) {
68
61
  // popup处于开启状态 组件卸载 组件解锁
69
62
  releaseLock(uid);
70
63
  }
71
64
  });
72
65
  onActivated(() => {
73
- if (use && props[use] === false) {
66
+ if (useSource && useSource() === false) {
74
67
  return;
75
68
  }
76
69
 
77
- if (props[state] === true) {
70
+ if (source() === true) {
78
71
  // popup处于开启状态 组件处于keepalive前台 组件加锁
79
72
  addLock(uid);
80
73
  }
81
74
  });
82
75
  onDeactivated(() => {
83
- if (use && props[use] === false) {
76
+ if (useSource && useSource() === false) {
84
77
  return;
85
78
  }
86
79
 
87
- if (props[state] === true) {
80
+ if (source() === true) {
88
81
  // popup处于开启状态 组件处于keepalive后台 组件解锁
89
82
  releaseLock(uid);
90
83
  }
@@ -108,10 +108,7 @@ export function render(_ctx, _cache) {
108
108
  /* KEYED_FRAGMENT */
109
109
  ))]),
110
110
  default: _withCtx(() => [_createElementVNode("div", {
111
- class: _normalizeClass(_ctx.n('size--open')),
112
- style: {
113
- "display": "flex"
114
- },
111
+ class: _normalizeClass(_ctx.classes(_ctx.n('size--open'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('size--open--disabled')])),
115
112
  onClick: _cache[5] || (_cache[5] = function () {
116
113
  return _ctx.showMenu && _ctx.showMenu(...arguments);
117
114
  })
@@ -1 +1 @@
1
- :root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--disabled--active { background: var(--pagination-bg-disabled-color);}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
1
+ :root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
@@ -67,7 +67,7 @@
67
67
  outline: none;
68
68
  transition: all 0.25s;
69
69
  user-select: none;
70
- background: var(--pagination-item-background);
70
+ background-color: var(--pagination-item-background);
71
71
 
72
72
  &:hover {
73
73
  background-color: var(--pagination-hover-bg-color);
@@ -78,26 +78,31 @@
78
78
  background-color: var(--pagination-active-bg-color) !important;
79
79
  }
80
80
 
81
- &--disabled--active {
82
- background: var(--pagination-bg-disabled-color);
83
- }
84
-
85
81
  &--hide {
86
82
  display: none;
87
83
  }
88
84
 
89
85
  &--disabled {
90
- cursor: default !important;
86
+ cursor: default;
91
87
  color: var(--pagination-disabled-color);
88
+ background-color: unset;
92
89
 
93
90
  &:hover {
94
91
  background-color: unset;
95
92
  }
96
- }
97
93
 
98
- &--hover {
99
- &:hover {
100
- background: inherit;
94
+ &--hover {
95
+ &:hover {
96
+ background-color: inherit;
97
+ }
98
+ }
99
+
100
+ &--active {
101
+ background-color: var(--pagination-bg-disabled-color);
102
+
103
+ &:hover {
104
+ background-color: var(--pagination-bg-disabled-color);
105
+ }
101
106
  }
102
107
  }
103
108
  }
@@ -123,6 +128,10 @@
123
128
  display: flex;
124
129
  align-items: center;
125
130
  cursor: pointer;
131
+
132
+ &--disabled {
133
+ cursor: default;
134
+ }
126
135
  }
127
136
  }
128
137
 
@@ -296,26 +296,33 @@ export default defineComponent({
296
296
  scrollEl: null,
297
297
  scrolling: false
298
298
  };
299
- scrollTo(scrollColumn, scrollColumn.index, 200);
299
+ scrollTo(scrollColumn, scrollColumn.index, 0, true);
300
300
  return scrollColumn;
301
301
  });
302
302
  };
303
303
 
304
304
  var normalizeCascadeColumns = cascadeColumns => {
305
305
  var scrollColumns = [];
306
- createChildren(scrollColumns, cascadeColumns);
306
+ createChildren(scrollColumns, cascadeColumns, true);
307
307
  return scrollColumns;
308
308
  };
309
309
 
310
- var createChildren = (scrollColumns, children) => {
310
+ var createChildren = function (scrollColumns, children, initial) {
311
+ if (initial === void 0) {
312
+ initial = false;
313
+ }
314
+
311
315
  if (isArray(children) && children.length) {
316
+ var _props$cascadeInitial;
317
+
318
+ var index = initial ? (_props$cascadeInitial = props.cascadeInitialIndexes[scrollColumns.length]) != null ? _props$cascadeInitial : 0 : 0;
312
319
  var scrollColumn = {
313
320
  id: sid++,
314
321
  prevY: undefined,
315
322
  momentumPrevY: undefined,
316
323
  touching: false,
317
324
  translate: center.value,
318
- index: 0,
325
+ index,
319
326
  duration: 0,
320
327
  momentumTime: 0,
321
328
  column: {
@@ -326,7 +333,8 @@ export default defineComponent({
326
333
  scrolling: false
327
334
  };
328
335
  scrollColumns.push(scrollColumn);
329
- createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children);
336
+ scrollTo(scrollColumn, scrollColumn.index, 0, true);
337
+ createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, initial);
330
338
  }
331
339
  };
332
340
 
@@ -22,6 +22,10 @@ export var props = _extends({
22
22
  type: Boolean,
23
23
  default: false
24
24
  },
25
+ cascadeInitialIndexes: {
26
+ type: Array,
27
+ default: () => []
28
+ },
25
29
  optionHeight: {
26
30
  type: [Number, String],
27
31
  default: 44
package/es/popup/Popup.js CHANGED
@@ -51,7 +51,7 @@ export default defineComponent({
51
51
  (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
52
52
  };
53
53
 
54
- useLock(props, 'show', 'lockScroll');
54
+ useLock(() => props.show, () => props.lockScroll);
55
55
  watch(() => props.show, newValue => {
56
56
  var {
57
57
  onOpen,
@@ -75,7 +75,7 @@ export default defineComponent({
75
75
  var {
76
76
  zIndex
77
77
  } = useZIndex(() => props.show, 1);
78
- useLock(props, 'show', 'lockScroll');
78
+ useLock(() => props.show, () => props.lockScroll);
79
79
  var isForbidClick = computed(() => props.type === 'loading' || props.forbidClick);
80
80
  var iconName = computed(() => {
81
81
  if (!props.type) return '';