zartui 2.1.23 → 2.1.25
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/button/index.css +1 -1
- package/es/checkbox/index.css +1 -1
- package/es/checkbox/index.less +4 -0
- package/es/index.js +1 -1
- package/es/mixins/checkbox.js +19 -7
- package/es/multiple-picker/index.css +1 -1
- package/es/multiple-picker/index.js +96 -11
- package/es/multiple-picker/index.less +58 -0
- package/es/multiple-picker/style/index.js +1 -0
- package/es/multiple-picker/style/less.js +1 -0
- package/es/style/var.less +1 -1
- package/lib/button/index.css +1 -1
- package/lib/checkbox/index.css +1 -1
- package/lib/checkbox/index.less +4 -0
- package/lib/index.css +1 -1
- package/lib/index.js +1 -1
- package/lib/mixins/checkbox.js +19 -7
- package/lib/multiple-picker/index.css +1 -1
- package/lib/multiple-picker/index.js +96 -11
- package/lib/multiple-picker/index.less +58 -0
- package/lib/multiple-picker/style/index.js +1 -0
- package/lib/multiple-picker/style/less.js +1 -0
- package/lib/style/var.less +1 -1
- package/lib/zart.js +116 -19
- package/lib/zart.min.js +3 -3
- package/package.json +1 -1
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.
|
|
164
|
+
var version = exports.version = '2.1.25';
|
|
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) {
|
package/lib/mixins/checkbox.js
CHANGED
|
@@ -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
|
},
|
|
@@ -69,8 +76,11 @@ var _default2 = exports.default = createComponent({
|
|
|
69
76
|
this.$nextTick(function () {
|
|
70
77
|
if (_this.$refs.pickerOptions && _this.confirmIndexs) {
|
|
71
78
|
_this.$refs.pickerOptions.setConfirmIndex(_this.confirmIndexs);
|
|
79
|
+
// 同步 currentIndexs 以更新底部全选和已选状态
|
|
80
|
+
_this.currentIndexs = [].concat(_this.confirmIndexs);
|
|
72
81
|
} else if (!_this.confirmIndexs && _this.defaultIndexs && _this.defaultIndexs.length === 0) {
|
|
73
82
|
_this.$refs.pickerOptions.setConfirmIndex([]);
|
|
83
|
+
_this.currentIndexs = [];
|
|
74
84
|
}
|
|
75
85
|
});
|
|
76
86
|
}
|
|
@@ -79,6 +89,12 @@ var _default2 = exports.default = createComponent({
|
|
|
79
89
|
}
|
|
80
90
|
},
|
|
81
91
|
computed: {
|
|
92
|
+
isAllSelected: function isAllSelected() {
|
|
93
|
+
return this.currentIndexs.length > 0 && this.currentIndexs.length === this.options.length;
|
|
94
|
+
},
|
|
95
|
+
isIndeterminate: function isIndeterminate() {
|
|
96
|
+
return this.currentIndexs.length > 0 && this.currentIndexs.length < this.options.length;
|
|
97
|
+
},
|
|
82
98
|
itemPxHeight: function itemPxHeight() {
|
|
83
99
|
return this.itemHeight ? (0, _unit.unitToPx)(this.itemHeight) : _shared.DEFAULT_ITEM_HEIGHT;
|
|
84
100
|
}
|
|
@@ -104,6 +120,10 @@ var _default2 = exports.default = createComponent({
|
|
|
104
120
|
return result;
|
|
105
121
|
},
|
|
106
122
|
onChange: function onChange() {
|
|
123
|
+
// 同步 currentIndexs 以触发计算属性更新
|
|
124
|
+
if (this.$refs.pickerOptions) {
|
|
125
|
+
this.currentIndexs = [].concat(this.$refs.pickerOptions.currentIndexs);
|
|
126
|
+
}
|
|
107
127
|
this.$emit('change', this.getOptions());
|
|
108
128
|
},
|
|
109
129
|
cancel: function cancel() {
|
|
@@ -117,6 +137,28 @@ var _default2 = exports.default = createComponent({
|
|
|
117
137
|
});
|
|
118
138
|
this.emit('confirm', options);
|
|
119
139
|
},
|
|
140
|
+
handleSelectAll: function handleSelectAll() {
|
|
141
|
+
var newIndexs = !this.isAllSelected ? this.options && this.options.map(function (_, index) {
|
|
142
|
+
return index;
|
|
143
|
+
}) : [];
|
|
144
|
+
this.currentIndexs = newIndexs;
|
|
145
|
+
if (this.$refs.pickerOptions) {
|
|
146
|
+
this.$refs.pickerOptions.setConfirmIndex(newIndexs);
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
onSelectOther: function onSelectOther() {
|
|
150
|
+
var _this3 = this;
|
|
151
|
+
var newIndexs = [];
|
|
152
|
+
this.options && this.options.forEach(function (_, index) {
|
|
153
|
+
if (!_this3.currentIndexs.includes(index)) {
|
|
154
|
+
newIndexs.push(index);
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
this.currentIndexs = newIndexs;
|
|
158
|
+
if (this.$refs.pickerOptions) {
|
|
159
|
+
this.$refs.pickerOptions.setConfirmIndex(newIndexs);
|
|
160
|
+
}
|
|
161
|
+
},
|
|
120
162
|
genTitle: function genTitle() {
|
|
121
163
|
var h = this.$createElement;
|
|
122
164
|
var titleSlot = this.slots('title');
|
|
@@ -129,13 +171,32 @@ var _default2 = exports.default = createComponent({
|
|
|
129
171
|
}, [this.title]);
|
|
130
172
|
}
|
|
131
173
|
},
|
|
132
|
-
|
|
174
|
+
genOther: function genOther() {
|
|
133
175
|
var h = this.$createElement;
|
|
134
176
|
return h(_button.default, {
|
|
177
|
+
"class": bem('select-other'),
|
|
135
178
|
"attrs": {
|
|
136
|
-
"size": "
|
|
137
|
-
|
|
179
|
+
"size": "medium"
|
|
180
|
+
},
|
|
181
|
+
"style": {
|
|
182
|
+
marginLeft: '12px',
|
|
183
|
+
marginRight: '8px'
|
|
138
184
|
},
|
|
185
|
+
"on": {
|
|
186
|
+
"click": this.onSelectOther
|
|
187
|
+
}
|
|
188
|
+
}, [this.slots('selectOther') || '其他']);
|
|
189
|
+
},
|
|
190
|
+
genCancel: function genCancel() {
|
|
191
|
+
var h = this.$createElement;
|
|
192
|
+
return h(_button.default, (0, _babelHelperVueJsxMergeProps.default)([{
|
|
193
|
+
"class": [this.showSelectAll ? bem('in-select-all') : ''],
|
|
194
|
+
"attrs": {
|
|
195
|
+
"size": this.showSelectAll ? "medium" : "normal"
|
|
196
|
+
}
|
|
197
|
+
}, this.showSelectAll ? {
|
|
198
|
+
block: true
|
|
199
|
+
} : {}, {
|
|
139
200
|
"style": {
|
|
140
201
|
marginRigth: "4px",
|
|
141
202
|
backgroundColor: "white"
|
|
@@ -143,30 +204,54 @@ var _default2 = exports.default = createComponent({
|
|
|
143
204
|
"on": {
|
|
144
205
|
"click": this.cancel
|
|
145
206
|
}
|
|
146
|
-
}, [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
|
|
207
|
+
}]), [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
|
|
147
208
|
},
|
|
148
209
|
genConfirm: function genConfirm() {
|
|
149
210
|
var h = this.$createElement;
|
|
150
|
-
return h(_button.default, {
|
|
211
|
+
return h(_button.default, (0, _babelHelperVueJsxMergeProps.default)([{
|
|
151
212
|
"attrs": {
|
|
152
213
|
"type": "primary",
|
|
153
|
-
"size": "normal"
|
|
154
|
-
"block": true
|
|
214
|
+
"size": this.showSelectAll ? "medium" : "normal"
|
|
155
215
|
},
|
|
216
|
+
"class": [this.showSelectAll ? bem('in-select-all') : '']
|
|
217
|
+
}, this.showSelectAll ? {
|
|
218
|
+
block: true
|
|
219
|
+
} : {}, {
|
|
156
220
|
"style": {
|
|
157
221
|
marginLeft: "8px"
|
|
158
222
|
},
|
|
159
223
|
"on": {
|
|
160
224
|
"click": this.confirm
|
|
161
225
|
}
|
|
162
|
-
}, [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
|
|
226
|
+
}]), [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
|
|
227
|
+
},
|
|
228
|
+
genSelectAll: function genSelectAll() {
|
|
229
|
+
var h = this.$createElement;
|
|
230
|
+
return h("div", {
|
|
231
|
+
"class": bem('toolbar-select-all')
|
|
232
|
+
}, [h(_checkbox.default, {
|
|
233
|
+
"class": bem('toolbar-checkbox'),
|
|
234
|
+
"attrs": {
|
|
235
|
+
"shape": 'square',
|
|
236
|
+
"value": this.isAllSelected,
|
|
237
|
+
"indeterminate": this.isIndeterminate
|
|
238
|
+
},
|
|
239
|
+
"on": {
|
|
240
|
+
"click": this.handleSelectAll
|
|
241
|
+
}
|
|
242
|
+
}, ["\u5168\u9009"]), h("div", {
|
|
243
|
+
"class": bem('toolbar-divider')
|
|
244
|
+
}), h("span", {
|
|
245
|
+
"class": bem('toolbar-checkbox-text')
|
|
246
|
+
}, ["\u5DF2\u9009 ", this.currentIndexs && this.currentIndexs.length || 0])]);
|
|
163
247
|
},
|
|
164
248
|
genToolbar: function genToolbar() {
|
|
165
249
|
var h = this.$createElement;
|
|
166
250
|
if (this.showToolbar) {
|
|
251
|
+
var toolbar = this.showSelectAll ? [this.genSelectAll(), this.genOther(), this.genCancel(), this.genConfirm()] : [this.genCancel(), this.genConfirm()];
|
|
167
252
|
return h("div", {
|
|
168
253
|
"class": bem('toolbar')
|
|
169
|
-
}, [this.slots() ||
|
|
254
|
+
}, [this.slots() || toolbar]);
|
|
170
255
|
}
|
|
171
256
|
},
|
|
172
257
|
genOptions: function genOptions() {
|
|
@@ -185,7 +270,7 @@ var _default2 = exports.default = createComponent({
|
|
|
185
270
|
}, [this.genOptionItems()]);
|
|
186
271
|
},
|
|
187
272
|
genOptionItems: function genOptionItems() {
|
|
188
|
-
var
|
|
273
|
+
var _this4 = this;
|
|
189
274
|
var h = this.$createElement;
|
|
190
275
|
var formatOptions = [];
|
|
191
276
|
if (this.options && this.options[0] && typeof this.options[0] !== 'object') {
|
|
@@ -214,7 +299,7 @@ var _default2 = exports.default = createComponent({
|
|
|
214
299
|
},
|
|
215
300
|
"on": {
|
|
216
301
|
"change": function change() {
|
|
217
|
-
|
|
302
|
+
_this4.onChange();
|
|
218
303
|
}
|
|
219
304
|
}
|
|
220
305
|
});
|
|
@@ -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');
|
package/lib/style/var.less
CHANGED
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
@button-large-height: 50px;
|
|
177
177
|
@button-default-height: 44px;
|
|
178
178
|
@button-default-line-height: calc(
|
|
179
|
-
|
|
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;
|