zartui 2.1.23 → 2.1.24

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/lib/index.js CHANGED
@@ -161,7 +161,7 @@ var _toast = _interopRequireDefault(require("./toast"));
161
161
  exports.Toast = _toast.default;
162
162
  var _uploader = _interopRequireDefault(require("./uploader"));
163
163
  exports.Uploader = _uploader.default;
164
- var version = exports.version = '2.1.23';
164
+ var version = exports.version = '2.1.24';
165
165
  function install(Vue) {
166
166
  var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _speechRecognizer.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _textEllipsis.default, _timeline.default, _toast.default, _uploader.default];
167
167
  components.forEach(function (item) {
@@ -35,6 +35,10 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
35
35
  bindGroup: {
36
36
  type: Boolean,
37
37
  default: true
38
+ },
39
+ indeterminate: {
40
+ type: Boolean,
41
+ default: false
38
42
  }
39
43
  },
40
44
  computed: {
@@ -52,7 +56,7 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
52
56
  var boxShadow = this.boxShadow || this.parent && this.parent.boxShadow;
53
57
  var border = this.border || this.parent && this.parent.border;
54
58
  var iconColor = this.iconColor || this.parent && this.parent.iconColor;
55
- if ((boxShadow || checkedColor) && this.checked && !this.isDisabled) {
59
+ if ((boxShadow || checkedColor) && (this.checked || this.indeterminate) && !this.isDisabled) {
56
60
  return {
57
61
  color: iconColor,
58
62
  boxShadow: boxShadow,
@@ -88,24 +92,31 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
88
92
  },
89
93
  genIcon: function genIcon() {
90
94
  var h = this.$createElement;
91
- var checked = this.checked;
95
+ var checked = this.checked,
96
+ indeterminate = this.indeterminate;
92
97
  var iconSize = this.iconSize || this.parent && this.parent.iconSize;
93
98
  return h("div", {
94
99
  "ref": "icon",
95
100
  "class": bem('icon', [this.shape, {
96
101
  disabled: this.isDisabled,
97
- checked: checked
102
+ checked: checked || indeterminate
98
103
  }]),
99
104
  "style": {
100
105
  fontSize: (0, _utils.addUnit)(iconSize)
101
106
  }
102
107
  }, [this.slots('icon', {
103
- checked: checked
108
+ checked: checked,
109
+ indeterminate: indeterminate
104
110
  }) || (role === 'radio' ? h(_icon.default, {
105
111
  "style": this.iconStyle
106
112
  }, [checked ? h("div", {
107
113
  "class": bem('dot')
108
- }) : '']) : h(_icon.default, {
114
+ }) : '']) : indeterminate ? h(_icon.default, {
115
+ "attrs": {
116
+ "name": "minus"
117
+ },
118
+ "style": this.iconStyle
119
+ }) : h(_icon.default, {
109
120
  "attrs": {
110
121
  "name": "checkBox-select"
111
122
  },
@@ -132,7 +143,8 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
132
143
  } else {
133
144
  Children.push(this.genLabel());
134
145
  }
135
- var checked = this.checked;
146
+ var checked = this.checked,
147
+ indeterminate = this.indeterminate;
136
148
  return h("div", {
137
149
  "attrs": {
138
150
  "role": role,
@@ -142,7 +154,7 @@ var CheckboxMixin = exports.CheckboxMixin = function CheckboxMixin(_ref) {
142
154
  "class": [bem([{
143
155
  disabled: this.isDisabled,
144
156
  'label-disabled': this.labelDisabled
145
- }, this.direction]), checked ? '' : bem('disable-icon')],
157
+ }, this.direction]), checked || indeterminate ? '' : bem('disable-icon')],
146
158
  "on": {
147
159
  "click": this.onClick
148
160
  }
@@ -1 +1 @@
1
- [class*=zt2-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt2-hairline,.zt2-hairline--bottom,.zt2-hairline--left,.zt2-hairline--right,.zt2-hairline--surround,.zt2-hairline--top,.zt2-hairline--top-bottom{position:relative}.zt2-hairline--top::after{border-top-width:1px}.zt2-hairline--left::after{border-left-width:1px}.zt2-hairline--right::after{border-right-width:1px}.zt2-hairline--bottom::after{border-bottom-width:1px}.zt2-hairline--top-bottom::after,.zt2-hairline-unset--top-bottom::after{border-width:1px 0}.zt2-hairline--surround::after{border-width:1px}.zt2-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt2-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;box-sizing:content-box;height:44px;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__border{position:relative}.zt2-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt2-multiple-picker__cancel,.zt2-multiple-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt2-multiple-picker__cancel:active,.zt2-multiple-picker__confirm:active{opacity:.7}.zt2-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt2-multiple-picker__cancel{color:#000;font-weight:400}.zt2-multiple-picker__title{font-weight:400;font-size:14px;line-height:20px;text-align:center;color:#2d4b73;opacity:.4;padding:12px 0;border-bottom:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt2-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt2-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt2-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt2-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:14px}.zt2-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 16px 4px 16px}.zt2-multiple-picker-options__item{color:#2d4b73;padding:0 4px 8px 0;box-sizing:border-box;text-align:center;font-size:14px}.zt2-multiple-picker-options__item .zt2-ellipsis{line-height:20px;border-radius:18px;border:1px solid rgba(45,75,115,.2);padding:7px 16px;opacity:.6}.zt2-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt2-multiple-picker-options__item--last{padding-right:0}.zt2-multiple-picker-options__item--selected .zt2-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:18px;color:#0091fa;opacity:1}
1
+ [class*=zt2-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt2-hairline,.zt2-hairline--bottom,.zt2-hairline--left,.zt2-hairline--right,.zt2-hairline--surround,.zt2-hairline--top,.zt2-hairline--top-bottom{position:relative}.zt2-hairline--top::after{border-top-width:1px}.zt2-hairline--left::after{border-left-width:1px}.zt2-hairline--right::after{border-right-width:1px}.zt2-hairline--bottom::after{border-bottom-width:1px}.zt2-hairline--top-bottom::after,.zt2-hairline-unset--top-bottom::after{border-width:1px 0}.zt2-hairline--surround::after{border-width:1px}.zt2-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt2-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;box-sizing:content-box;height:44px;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__toolbar-select-all{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;flex:1;max-width:45%}.zt2-multiple-picker__toolbar-divider{width:1px;height:14px;background-color:#e9ecf2;margin-left:7px;margin-right:7px}.zt2-multiple-picker__toolbar-checkbox{-webkit-flex-shrink:0;flex-shrink:0}.zt2-multiple-picker__toolbar-checkbox .zt2-checkbox__icon{font-size:var(--zt-font-size-xl)}.zt2-multiple-picker__toolbar-checkbox .zt2-checkbox__label{font-size:16px;margin-left:4px}.zt2-multiple-picker__toolbar-checkbox-text{font-size:16px;color:#2d4b73;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (max-width:375px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__in-select-all{padding:0 14px}}@media (min-width:376px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__in-select-all{padding:0 22px}}.zt2-multiple-picker__toolbar .zt2-multiple-picker__in-select-all .zt2-button__text{font-size:16px}@media (max-width:375px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__select-other{padding:0 10px}}@media (min-width:376px){.zt2-multiple-picker__toolbar .zt2-multiple-picker__select-other{padding:0 14px}}.zt2-multiple-picker__toolbar .zt2-multiple-picker__select-other .zt2-button__text{font-size:16px}.zt2-multiple-picker__border{position:relative}.zt2-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt2-multiple-picker__cancel,.zt2-multiple-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt2-multiple-picker__cancel:active,.zt2-multiple-picker__confirm:active{opacity:.7}.zt2-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt2-multiple-picker__cancel{color:#000;font-weight:400}.zt2-multiple-picker__title{font-weight:400;font-size:14px;line-height:20px;text-align:center;color:#2d4b73;opacity:.4;padding:12px 0;border-bottom:1px solid rgba(45,75,115,.1)}.zt2-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt2-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt2-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt2-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt2-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:14px}.zt2-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 16px 4px 16px}.zt2-multiple-picker-options__item{color:#2d4b73;padding:0 4px 8px 0;box-sizing:border-box;text-align:center;font-size:14px}.zt2-multiple-picker-options__item .zt2-ellipsis{line-height:20px;border-radius:18px;border:1px solid rgba(45,75,115,.2);padding:7px 16px;opacity:.6}.zt2-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt2-multiple-picker-options__item--last{padding-right:0}.zt2-multiple-picker-options__item--selected .zt2-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:18px;color:#0091fa;opacity:1}
@@ -3,6 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  exports.__esModule = true;
5
5
  exports.default = void 0;
6
+ var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
6
7
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
7
8
  var _utils = require("../utils");
8
9
  var _shared = require("./shared");
@@ -12,6 +13,7 @@ var _MultiplePickerOptions = _interopRequireDefault(require("./MultiplePickerOpt
12
13
  var _popup = _interopRequireDefault(require("../popup"));
13
14
  var _popup2 = require("../mixins/popup");
14
15
  var _button = _interopRequireDefault(require("../button"));
16
+ var _checkbox = _interopRequireDefault(require("../checkbox"));
15
17
  // Utils
16
18
 
17
19
  // Components
@@ -54,10 +56,15 @@ var _default2 = exports.default = createComponent({
54
56
  safeAreaInsetBottom: {
55
57
  type: Boolean,
56
58
  default: false
59
+ },
60
+ showSelectAll: {
61
+ type: Boolean,
62
+ default: false
57
63
  }
58
64
  }),
59
65
  data: function data() {
60
66
  return {
67
+ currentIndexs: [],
61
68
  confirmIndexs: null
62
69
  };
63
70
  },
@@ -79,6 +86,12 @@ var _default2 = exports.default = createComponent({
79
86
  }
80
87
  },
81
88
  computed: {
89
+ isAllSelected: function isAllSelected() {
90
+ return this.currentIndexs.length > 0 && this.currentIndexs.length === this.options.length;
91
+ },
92
+ isIndeterminate: function isIndeterminate() {
93
+ return this.currentIndexs.length > 0 && this.currentIndexs.length < this.options.length;
94
+ },
82
95
  itemPxHeight: function itemPxHeight() {
83
96
  return this.itemHeight ? (0, _unit.unitToPx)(this.itemHeight) : _shared.DEFAULT_ITEM_HEIGHT;
84
97
  }
@@ -104,6 +117,10 @@ var _default2 = exports.default = createComponent({
104
117
  return result;
105
118
  },
106
119
  onChange: function onChange() {
120
+ // 同步 currentIndexs 以触发计算属性更新
121
+ if (this.$refs.pickerOptions) {
122
+ this.currentIndexs = [].concat(this.$refs.pickerOptions.currentIndexs);
123
+ }
107
124
  this.$emit('change', this.getOptions());
108
125
  },
109
126
  cancel: function cancel() {
@@ -117,6 +134,28 @@ var _default2 = exports.default = createComponent({
117
134
  });
118
135
  this.emit('confirm', options);
119
136
  },
137
+ handleSelectAll: function handleSelectAll() {
138
+ var newIndexs = !this.isAllSelected ? this.options && this.options.map(function (_, index) {
139
+ return index;
140
+ }) : [];
141
+ this.currentIndexs = newIndexs;
142
+ if (this.$refs.pickerOptions) {
143
+ this.$refs.pickerOptions.setConfirmIndex(newIndexs);
144
+ }
145
+ },
146
+ onSelectOther: function onSelectOther() {
147
+ var _this3 = this;
148
+ var newIndexs = [];
149
+ this.options && this.options.forEach(function (_, index) {
150
+ if (!_this3.currentIndexs.includes(index)) {
151
+ newIndexs.push(index);
152
+ }
153
+ });
154
+ this.currentIndexs = newIndexs;
155
+ if (this.$refs.pickerOptions) {
156
+ this.$refs.pickerOptions.setConfirmIndex(newIndexs);
157
+ }
158
+ },
120
159
  genTitle: function genTitle() {
121
160
  var h = this.$createElement;
122
161
  var titleSlot = this.slots('title');
@@ -129,13 +168,32 @@ var _default2 = exports.default = createComponent({
129
168
  }, [this.title]);
130
169
  }
131
170
  },
132
- genCancel: function genCancel() {
171
+ genOther: function genOther() {
133
172
  var h = this.$createElement;
134
173
  return h(_button.default, {
174
+ "class": bem('select-other'),
135
175
  "attrs": {
136
- "size": "normal",
137
- "block": true
176
+ "size": "medium"
177
+ },
178
+ "style": {
179
+ marginLeft: '12px',
180
+ marginRight: '8px'
138
181
  },
182
+ "on": {
183
+ "click": this.onSelectOther
184
+ }
185
+ }, [this.slots('selectOther') || '其他']);
186
+ },
187
+ genCancel: function genCancel() {
188
+ var h = this.$createElement;
189
+ return h(_button.default, (0, _babelHelperVueJsxMergeProps.default)([{
190
+ "class": [this.showSelectAll ? bem('in-select-all') : ''],
191
+ "attrs": {
192
+ "size": this.showSelectAll ? "medium" : "normal"
193
+ }
194
+ }, this.showSelectAll ? {
195
+ block: true
196
+ } : {}, {
139
197
  "style": {
140
198
  marginRigth: "4px",
141
199
  backgroundColor: "white"
@@ -143,30 +201,54 @@ var _default2 = exports.default = createComponent({
143
201
  "on": {
144
202
  "click": this.cancel
145
203
  }
146
- }, [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
204
+ }]), [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
147
205
  },
148
206
  genConfirm: function genConfirm() {
149
207
  var h = this.$createElement;
150
- return h(_button.default, {
208
+ return h(_button.default, (0, _babelHelperVueJsxMergeProps.default)([{
151
209
  "attrs": {
152
210
  "type": "primary",
153
- "size": "normal",
154
- "block": true
211
+ "size": this.showSelectAll ? "medium" : "normal"
155
212
  },
213
+ "class": [this.showSelectAll ? bem('in-select-all') : '']
214
+ }, this.showSelectAll ? {
215
+ block: true
216
+ } : {}, {
156
217
  "style": {
157
218
  marginLeft: "8px"
158
219
  },
159
220
  "on": {
160
221
  "click": this.confirm
161
222
  }
162
- }, [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
223
+ }]), [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
224
+ },
225
+ genSelectAll: function genSelectAll() {
226
+ var h = this.$createElement;
227
+ return h("div", {
228
+ "class": bem('toolbar-select-all')
229
+ }, [h(_checkbox.default, {
230
+ "class": bem('toolbar-checkbox'),
231
+ "attrs": {
232
+ "shape": 'square',
233
+ "value": this.isAllSelected,
234
+ "indeterminate": this.isIndeterminate
235
+ },
236
+ "on": {
237
+ "click": this.handleSelectAll
238
+ }
239
+ }, ["\u5168\u9009"]), h("div", {
240
+ "class": bem('toolbar-divider')
241
+ }), h("span", {
242
+ "class": bem('toolbar-checkbox-text')
243
+ }, ["\u5DF2\u9009 ", this.currentIndexs && this.currentIndexs.length || 0])]);
163
244
  },
164
245
  genToolbar: function genToolbar() {
165
246
  var h = this.$createElement;
166
247
  if (this.showToolbar) {
248
+ var toolbar = this.showSelectAll ? [this.genSelectAll(), this.genOther(), this.genCancel(), this.genConfirm()] : [this.genCancel(), this.genConfirm()];
167
249
  return h("div", {
168
250
  "class": bem('toolbar')
169
- }, [this.slots() || [this.genCancel(), this.genConfirm()]]);
251
+ }, [this.slots() || toolbar]);
170
252
  }
171
253
  },
172
254
  genOptions: function genOptions() {
@@ -185,7 +267,7 @@ var _default2 = exports.default = createComponent({
185
267
  }, [this.genOptionItems()]);
186
268
  },
187
269
  genOptionItems: function genOptionItems() {
188
- var _this3 = this;
270
+ var _this4 = this;
189
271
  var h = this.$createElement;
190
272
  var formatOptions = [];
191
273
  if (this.options && this.options[0] && typeof this.options[0] !== 'object') {
@@ -214,7 +296,7 @@ var _default2 = exports.default = createComponent({
214
296
  },
215
297
  "on": {
216
298
  "change": function change() {
217
- _this3.onChange();
299
+ _this4.onChange();
218
300
  }
219
301
  }
220
302
  });
@@ -14,6 +14,64 @@
14
14
  height: @picker-toolbar-height;
15
15
  padding: 8px 16px;
16
16
  border-top: 1px solid rgba(45,75,115,0.10);
17
+
18
+ &-select-all {
19
+ display: flex;
20
+ align-items: center;
21
+ flex: 1;
22
+ max-width: 45%;
23
+ }
24
+
25
+ &-divider {
26
+ width: 1px;
27
+ height: 14px;
28
+ background-color: #E9ECF2;
29
+ margin-left: 7px;
30
+ margin-right: 7px;
31
+ }
32
+
33
+ &-checkbox {
34
+ flex-shrink: 0;
35
+ .zt2-checkbox__icon {
36
+ font-size: var(--zt-font-size-xl);
37
+ }
38
+
39
+ .zt2-checkbox__label {
40
+ font-size: 16px;
41
+ margin-left: 4px;
42
+ }
43
+ }
44
+
45
+ &-checkbox-text {
46
+ font-size: 16px;
47
+ color: #2d4b73;
48
+ white-space: nowrap;
49
+ text-overflow: ellipsis;
50
+ overflow: hidden;
51
+ }
52
+
53
+ .zt2-multiple-picker__in-select-all {
54
+ @media (max-width: 375px) {
55
+ padding: 0 14px;
56
+ }
57
+ @media (min-width: 376px) {
58
+ padding: 0 22px;
59
+ }
60
+ .zt2-button__text {
61
+ font-size: 16px;
62
+ }
63
+ }
64
+ .zt2-multiple-picker__select-other {
65
+ @media (max-width: 375px) {
66
+ padding: 0 10px;
67
+ }
68
+ @media (min-width: 376px) {
69
+ padding: 0 14px;
70
+ }
71
+ .zt2-button__text {
72
+ font-size: 16px;
73
+ }
74
+ }
17
75
  }
18
76
 
19
77
  &__border {
@@ -2,6 +2,7 @@ require('../../style/base.css');
2
2
  require('../../overlay/index.css');
3
3
  require('../../info/index.css');
4
4
  require('../../icon/index.css');
5
+ require('../../checkbox/index.css');
5
6
  require('../../popup/index.css');
6
7
  require('../../loading/index.css');
7
8
  require('../../button/index.css');
@@ -2,6 +2,7 @@ require('../../style/base.less');
2
2
  require('../../overlay/index.less');
3
3
  require('../../info/index.less');
4
4
  require('../../icon/index.less');
5
+ require('../../checkbox/index.less');
5
6
  require('../../popup/index.less');
6
7
  require('../../loading/index.less');
7
8
  require('../../button/index.less');
@@ -176,7 +176,7 @@
176
176
  @button-large-height: 50px;
177
177
  @button-default-height: 44px;
178
178
  @button-default-line-height: calc(
179
- var(@button-normal-font-size) * 2 - 8px
179
+ @button-normal-font-size * 2 - 8px
180
180
  );
181
181
  @button-default-font-size: @font-size-lg;
182
182
  @button-default-color: @text-color-3;
package/lib/zart.js CHANGED
@@ -8006,6 +8006,10 @@ var checkbox_CheckboxMixin = function CheckboxMixin(_ref) {
8006
8006
  bindGroup: {
8007
8007
  type: Boolean,
8008
8008
  default: true
8009
+ },
8010
+ indeterminate: {
8011
+ type: Boolean,
8012
+ default: false
8009
8013
  }
8010
8014
  },
8011
8015
  computed: {
@@ -8023,7 +8027,7 @@ var checkbox_CheckboxMixin = function CheckboxMixin(_ref) {
8023
8027
  var boxShadow = this.boxShadow || this.parent && this.parent.boxShadow;
8024
8028
  var border = this.border || this.parent && this.parent.border;
8025
8029
  var iconColor = this.iconColor || this.parent && this.parent.iconColor;
8026
- if ((boxShadow || checkedColor) && this.checked && !this.isDisabled) {
8030
+ if ((boxShadow || checkedColor) && (this.checked || this.indeterminate) && !this.isDisabled) {
8027
8031
  return {
8028
8032
  color: iconColor,
8029
8033
  boxShadow: boxShadow,
@@ -8059,24 +8063,31 @@ var checkbox_CheckboxMixin = function CheckboxMixin(_ref) {
8059
8063
  },
8060
8064
  genIcon: function genIcon() {
8061
8065
  var h = this.$createElement;
8062
- var checked = this.checked;
8066
+ var checked = this.checked,
8067
+ indeterminate = this.indeterminate;
8063
8068
  var iconSize = this.iconSize || this.parent && this.parent.iconSize;
8064
8069
  return h("div", {
8065
8070
  "ref": "icon",
8066
8071
  "class": bem('icon', [this.shape, {
8067
8072
  disabled: this.isDisabled,
8068
- checked: checked
8073
+ checked: checked || indeterminate
8069
8074
  }]),
8070
8075
  "style": {
8071
8076
  fontSize: Object(utils["a" /* addUnit */])(iconSize)
8072
8077
  }
8073
8078
  }, [this.slots('icon', {
8074
- checked: checked
8079
+ checked: checked,
8080
+ indeterminate: indeterminate
8075
8081
  }) || (role === 'radio' ? h(es_icon, {
8076
8082
  "style": this.iconStyle
8077
8083
  }, [checked ? h("div", {
8078
8084
  "class": bem('dot')
8079
- }) : '']) : h(es_icon, {
8085
+ }) : '']) : indeterminate ? h(es_icon, {
8086
+ "attrs": {
8087
+ "name": "minus"
8088
+ },
8089
+ "style": this.iconStyle
8090
+ }) : h(es_icon, {
8080
8091
  "attrs": {
8081
8092
  "name": "checkBox-select"
8082
8093
  },
@@ -8103,7 +8114,8 @@ var checkbox_CheckboxMixin = function CheckboxMixin(_ref) {
8103
8114
  } else {
8104
8115
  Children.push(this.genLabel());
8105
8116
  }
8106
- var checked = this.checked;
8117
+ var checked = this.checked,
8118
+ indeterminate = this.indeterminate;
8107
8119
  return h("div", {
8108
8120
  "attrs": {
8109
8121
  "role": role,
@@ -8113,7 +8125,7 @@ var checkbox_CheckboxMixin = function CheckboxMixin(_ref) {
8113
8125
  "class": [bem([{
8114
8126
  disabled: this.isDisabled,
8115
8127
  'label-disabled': this.labelDisabled
8116
- }, this.direction]), checked ? '' : bem('disable-icon')],
8128
+ }, this.direction]), checked || indeterminate ? '' : bem('disable-icon')],
8117
8129
  "on": {
8118
8130
  "click": this.onClick
8119
8131
  }
@@ -25955,6 +25967,7 @@ function MultiplePickerOptions_isOptionDisabled(option) {
25955
25967
  }));
25956
25968
  // CONCATENATED MODULE: ./es/multiple-picker/index.js
25957
25969
 
25970
+
25958
25971
  // Utils
25959
25972
 
25960
25973
 
@@ -25965,6 +25978,7 @@ function MultiplePickerOptions_isOptionDisabled(option) {
25965
25978
 
25966
25979
 
25967
25980
 
25981
+
25968
25982
  var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('multiple-picker'),
25969
25983
  multiple_picker_createComponent = multiple_picker_createNamespace[0],
25970
25984
  multiple_picker_bem = multiple_picker_createNamespace[1],
@@ -26003,10 +26017,15 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26003
26017
  safeAreaInsetBottom: {
26004
26018
  type: Boolean,
26005
26019
  default: false
26020
+ },
26021
+ showSelectAll: {
26022
+ type: Boolean,
26023
+ default: false
26006
26024
  }
26007
26025
  }),
26008
26026
  data: function data() {
26009
26027
  return {
26028
+ currentIndexs: [],
26010
26029
  confirmIndexs: null
26011
26030
  };
26012
26031
  },
@@ -26028,6 +26047,12 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26028
26047
  }
26029
26048
  },
26030
26049
  computed: {
26050
+ isAllSelected: function isAllSelected() {
26051
+ return this.currentIndexs.length > 0 && this.currentIndexs.length === this.options.length;
26052
+ },
26053
+ isIndeterminate: function isIndeterminate() {
26054
+ return this.currentIndexs.length > 0 && this.currentIndexs.length < this.options.length;
26055
+ },
26031
26056
  itemPxHeight: function itemPxHeight() {
26032
26057
  return this.itemHeight ? Object(unit["b" /* unitToPx */])(this.itemHeight) : shared_DEFAULT_ITEM_HEIGHT;
26033
26058
  }
@@ -26053,6 +26078,10 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26053
26078
  return result;
26054
26079
  },
26055
26080
  onChange: function onChange() {
26081
+ // 同步 currentIndexs 以触发计算属性更新
26082
+ if (this.$refs.pickerOptions) {
26083
+ this.currentIndexs = [].concat(this.$refs.pickerOptions.currentIndexs);
26084
+ }
26056
26085
  this.$emit('change', this.getOptions());
26057
26086
  },
26058
26087
  cancel: function cancel() {
@@ -26066,6 +26095,28 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26066
26095
  });
26067
26096
  this.emit('confirm', options);
26068
26097
  },
26098
+ handleSelectAll: function handleSelectAll() {
26099
+ var newIndexs = !this.isAllSelected ? this.options && this.options.map(function (_, index) {
26100
+ return index;
26101
+ }) : [];
26102
+ this.currentIndexs = newIndexs;
26103
+ if (this.$refs.pickerOptions) {
26104
+ this.$refs.pickerOptions.setConfirmIndex(newIndexs);
26105
+ }
26106
+ },
26107
+ onSelectOther: function onSelectOther() {
26108
+ var _this3 = this;
26109
+ var newIndexs = [];
26110
+ this.options && this.options.forEach(function (_, index) {
26111
+ if (!_this3.currentIndexs.includes(index)) {
26112
+ newIndexs.push(index);
26113
+ }
26114
+ });
26115
+ this.currentIndexs = newIndexs;
26116
+ if (this.$refs.pickerOptions) {
26117
+ this.$refs.pickerOptions.setConfirmIndex(newIndexs);
26118
+ }
26119
+ },
26069
26120
  genTitle: function genTitle() {
26070
26121
  var h = this.$createElement;
26071
26122
  var titleSlot = this.slots('title');
@@ -26078,13 +26129,32 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26078
26129
  }, [this.title]);
26079
26130
  }
26080
26131
  },
26081
- genCancel: function genCancel() {
26132
+ genOther: function genOther() {
26082
26133
  var h = this.$createElement;
26083
26134
  return h(es_button, {
26135
+ "class": multiple_picker_bem('select-other'),
26084
26136
  "attrs": {
26085
- "size": "normal",
26086
- "block": true
26137
+ "size": "medium"
26087
26138
  },
26139
+ "style": {
26140
+ marginLeft: '12px',
26141
+ marginRight: '8px'
26142
+ },
26143
+ "on": {
26144
+ "click": this.onSelectOther
26145
+ }
26146
+ }, [this.slots('selectOther') || '其他']);
26147
+ },
26148
+ genCancel: function genCancel() {
26149
+ var h = this.$createElement;
26150
+ return h(es_button, helper_default()([{
26151
+ "class": [this.showSelectAll ? multiple_picker_bem('in-select-all') : ''],
26152
+ "attrs": {
26153
+ "size": this.showSelectAll ? "medium" : "normal"
26154
+ }
26155
+ }, this.showSelectAll ? {
26156
+ block: true
26157
+ } : {}, {
26088
26158
  "style": {
26089
26159
  marginRigth: "4px",
26090
26160
  backgroundColor: "white"
@@ -26092,30 +26162,54 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26092
26162
  "on": {
26093
26163
  "click": this.cancel
26094
26164
  }
26095
- }, [this.slots('cancel') || this.cancelButtonText || multiple_picker_t('cancel')]);
26165
+ }]), [this.slots('cancel') || this.cancelButtonText || multiple_picker_t('cancel')]);
26096
26166
  },
26097
26167
  genConfirm: function genConfirm() {
26098
26168
  var h = this.$createElement;
26099
- return h(es_button, {
26169
+ return h(es_button, helper_default()([{
26100
26170
  "attrs": {
26101
26171
  "type": "primary",
26102
- "size": "normal",
26103
- "block": true
26172
+ "size": this.showSelectAll ? "medium" : "normal"
26104
26173
  },
26174
+ "class": [this.showSelectAll ? multiple_picker_bem('in-select-all') : '']
26175
+ }, this.showSelectAll ? {
26176
+ block: true
26177
+ } : {}, {
26105
26178
  "style": {
26106
26179
  marginLeft: "8px"
26107
26180
  },
26108
26181
  "on": {
26109
26182
  "click": this.confirm
26110
26183
  }
26111
- }, [this.slots('confirm') || this.confirmButtonText || multiple_picker_t('confirm')]);
26184
+ }]), [this.slots('confirm') || this.confirmButtonText || multiple_picker_t('confirm')]);
26185
+ },
26186
+ genSelectAll: function genSelectAll() {
26187
+ var h = this.$createElement;
26188
+ return h("div", {
26189
+ "class": multiple_picker_bem('toolbar-select-all')
26190
+ }, [h(es_checkbox, {
26191
+ "class": multiple_picker_bem('toolbar-checkbox'),
26192
+ "attrs": {
26193
+ "shape": 'square',
26194
+ "value": this.isAllSelected,
26195
+ "indeterminate": this.isIndeterminate
26196
+ },
26197
+ "on": {
26198
+ "click": this.handleSelectAll
26199
+ }
26200
+ }, ["\u5168\u9009"]), h("div", {
26201
+ "class": multiple_picker_bem('toolbar-divider')
26202
+ }), h("span", {
26203
+ "class": multiple_picker_bem('toolbar-checkbox-text')
26204
+ }, ["\u5DF2\u9009 ", this.currentIndexs && this.currentIndexs.length || 0])]);
26112
26205
  },
26113
26206
  genToolbar: function genToolbar() {
26114
26207
  var h = this.$createElement;
26115
26208
  if (this.showToolbar) {
26209
+ var toolbar = this.showSelectAll ? [this.genSelectAll(), this.genOther(), this.genCancel(), this.genConfirm()] : [this.genCancel(), this.genConfirm()];
26116
26210
  return h("div", {
26117
26211
  "class": multiple_picker_bem('toolbar')
26118
- }, [this.slots() || [this.genCancel(), this.genConfirm()]]);
26212
+ }, [this.slots() || toolbar]);
26119
26213
  }
26120
26214
  },
26121
26215
  genOptions: function genOptions() {
@@ -26134,7 +26228,7 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26134
26228
  }, [this.genOptionItems()]);
26135
26229
  },
26136
26230
  genOptionItems: function genOptionItems() {
26137
- var _this3 = this;
26231
+ var _this4 = this;
26138
26232
  var h = this.$createElement;
26139
26233
  var formatOptions = [];
26140
26234
  if (this.options && this.options[0] && typeof this.options[0] !== 'object') {
@@ -26163,7 +26257,7 @@ var multiple_picker_createNamespace = Object(utils["b" /* createNamespace */])('
26163
26257
  },
26164
26258
  "on": {
26165
26259
  "change": function change() {
26166
- _this3.onChange();
26260
+ _this4.onChange();
26167
26261
  }
26168
26262
  }
26169
26263
  });
@@ -35100,7 +35194,7 @@ var uploader_createNamespace = Object(utils["b" /* createNamespace */])('uploade
35100
35194
 
35101
35195
 
35102
35196
 
35103
- var es_version = '2.1.23';
35197
+ var es_version = '2.1.24';
35104
35198
  function install(Vue) {
35105
35199
  var components = [action_sheet, es_area, avatar, back_top, badge, es_button, calendar, cascader, cell, cell_group, es_checkbox, checkbox_group, col, collapse, collapse_item, count_down, datetime_picker, dialog, divider, dropdown_item, dropdown_menu, empty, es_field, fold_dialog, es_form, grid, grid_item, hierarchy_select, es_icon, es_image, image_preview, index_anchor, index_bar, es_info, lazyload, es_list, es_loading, locale["a" /* default */], media_picker, media_player, multiple_picker, nav_bar, notice_bar, number_keyboard, es_overlay, password_input, es_picker, popover, popup, pull_refresh, es_radio, radio_group, rate, row, search, signature, skeleton, slider, speech_recognizer, es_step, stepper, steps, es_sticky, swipe, swipe_cell, swipe_item, es_switch, switch_cell, tab, tabbar, tabbar_item, table, tabs, es_tag, text_ellipsis, timeline, es_toast, uploader];
35106
35200
  components.forEach(function (item) {