zartui 3.1.64 → 3.1.66
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/index.d.ts +1 -1
- package/es/index.mjs +1 -1
- package/es/multiple-picker/MultiplePicker.d.ts +13 -0
- package/es/multiple-picker/MultiplePicker.mjs +140 -27
- package/es/multiple-picker/index.css +1 -1
- package/es/multiple-picker/index.d.ts +9 -0
- package/es/multiple-picker/style/index.mjs +1 -0
- package/lib/index.css +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/multiple-picker/MultiplePicker.d.ts +13 -0
- package/lib/multiple-picker/MultiplePicker.js +140 -27
- package/lib/multiple-picker/index.css +1 -1
- package/lib/multiple-picker/index.d.ts +9 -0
- package/lib/multiple-picker/style/index.js +1 -0
- package/lib/web-types.json +1 -1
- package/lib/zartui.cjs.js +324 -211
- package/lib/zartui.es.js +324 -211
- package/lib/zartui.js +324 -211
- package/lib/zartui.min.js +2 -2
- package/package.json +5 -5
package/es/index.d.ts
CHANGED
package/es/index.mjs
CHANGED
|
@@ -77,7 +77,7 @@ import { Timeline } from "./timeline/index.mjs";
|
|
|
77
77
|
import { Toast } from "./toast/index.mjs";
|
|
78
78
|
import { Uploader } from "./uploader/index.mjs";
|
|
79
79
|
import { Video } from "./video/index.mjs";
|
|
80
|
-
const version = "3.1.
|
|
80
|
+
const version = "3.1.66";
|
|
81
81
|
function install(app) {
|
|
82
82
|
const components = [
|
|
83
83
|
ActionSheet,
|
|
@@ -37,6 +37,10 @@ declare const multiplePickerProps: {
|
|
|
37
37
|
type: import("vue").PropType<PickerOption[]>;
|
|
38
38
|
default: () => PickerOption[];
|
|
39
39
|
};
|
|
40
|
+
filteredOptions: {
|
|
41
|
+
type: import("vue").PropType<PickerOption[]>;
|
|
42
|
+
default: () => PickerOption[];
|
|
43
|
+
};
|
|
40
44
|
toolbarPosition: {
|
|
41
45
|
type: import("vue").PropType<string>;
|
|
42
46
|
default: string;
|
|
@@ -106,6 +110,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
106
110
|
type: import("vue").PropType<PickerOption[]>;
|
|
107
111
|
default: () => PickerOption[];
|
|
108
112
|
};
|
|
113
|
+
filteredOptions: {
|
|
114
|
+
type: import("vue").PropType<PickerOption[]>;
|
|
115
|
+
default: () => PickerOption[];
|
|
116
|
+
};
|
|
109
117
|
toolbarPosition: {
|
|
110
118
|
type: import("vue").PropType<string>;
|
|
111
119
|
default: string;
|
|
@@ -167,6 +175,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
167
175
|
type: import("vue").PropType<PickerOption[]>;
|
|
168
176
|
default: () => PickerOption[];
|
|
169
177
|
};
|
|
178
|
+
filteredOptions: {
|
|
179
|
+
type: import("vue").PropType<PickerOption[]>;
|
|
180
|
+
default: () => PickerOption[];
|
|
181
|
+
};
|
|
170
182
|
toolbarPosition: {
|
|
171
183
|
type: import("vue").PropType<string>;
|
|
172
184
|
default: string;
|
|
@@ -213,6 +225,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
|
|
|
213
225
|
textKey: string;
|
|
214
226
|
itemHeight: string | number;
|
|
215
227
|
columnCounts: number;
|
|
228
|
+
filteredOptions: PickerOption[];
|
|
216
229
|
toolbarPosition: string;
|
|
217
230
|
selectedIndex: number[];
|
|
218
231
|
selectedValue: Numeric[];
|
|
@@ -4,6 +4,7 @@ import { unitToPx } from "../utils/format.mjs";
|
|
|
4
4
|
import { deepClone } from "../utils/deep-clone.mjs";
|
|
5
5
|
import Loading from "../loading/index.mjs";
|
|
6
6
|
import Checkbox from "../checkbox/index.mjs";
|
|
7
|
+
import Empty from "../empty/index.mjs";
|
|
7
8
|
import MultiplePickerOptions from "./MultiplePickerOptions.mjs";
|
|
8
9
|
import Popup from "../popup/index.mjs";
|
|
9
10
|
import Button from "../button/index.mjs";
|
|
@@ -24,6 +25,7 @@ const multiplePickerProps = {
|
|
|
24
25
|
showToolbar: truthProp,
|
|
25
26
|
showTitle: truthProp,
|
|
26
27
|
options: makeArrayProp(),
|
|
28
|
+
filteredOptions: makeArrayProp(),
|
|
27
29
|
toolbarPosition: makeStringProp("bottom"),
|
|
28
30
|
textKey: makeStringProp("text"),
|
|
29
31
|
columnCounts: makeNumberProp(3),
|
|
@@ -43,13 +45,33 @@ var stdin_default = defineComponent({
|
|
|
43
45
|
const currentOptions = ref(props.options);
|
|
44
46
|
const currentSelectedIndex = computed(() => props.selectedIndex);
|
|
45
47
|
const currentSelectedValue = computed(() => props.selectedValue);
|
|
48
|
+
const allSelectedOptions = ref([]);
|
|
46
49
|
const confirmIndexes = ref(props.selectedIndex);
|
|
47
50
|
const confirmValues = ref(props.selectedValue);
|
|
51
|
+
const displayOptions = computed(() => {
|
|
52
|
+
return props.filteredOptions && props.filteredOptions.length > 0 ? props.filteredOptions : currentOptions.value;
|
|
53
|
+
});
|
|
54
|
+
const displaySelectedIndexes = computed(() => {
|
|
55
|
+
if (!props.filteredOptions || props.filteredOptions.length === 0) {
|
|
56
|
+
return confirmIndexes.value;
|
|
57
|
+
}
|
|
58
|
+
const selectedValues = new Set(confirmIndexes.value.filter((idx) => idx >= 0 && idx < currentOptions.value.length).map((idx) => {
|
|
59
|
+
var _a;
|
|
60
|
+
return (_a = currentOptions.value[idx]) == null ? void 0 : _a.value;
|
|
61
|
+
}));
|
|
62
|
+
const result = [];
|
|
63
|
+
displayOptions.value.forEach((option, index) => {
|
|
64
|
+
if (selectedValues.has(option.value)) {
|
|
65
|
+
result.push(index);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
return result;
|
|
69
|
+
});
|
|
48
70
|
const isIndeterminate = computed(() => {
|
|
49
|
-
return
|
|
71
|
+
return displaySelectedIndexes.value.length > 0 && displaySelectedIndexes.value.length < displayOptions.value.length;
|
|
50
72
|
});
|
|
51
73
|
const isAllSelected = computed(() => {
|
|
52
|
-
return
|
|
74
|
+
return displayOptions.value.length > 0 && displaySelectedIndexes.value.length > 0 && displaySelectedIndexes.value.length === displayOptions.value.length;
|
|
53
75
|
});
|
|
54
76
|
const resetOptions = (props2) => {
|
|
55
77
|
currentOptions.value = props2.options;
|
|
@@ -62,14 +84,39 @@ var stdin_default = defineComponent({
|
|
|
62
84
|
emit("update:selectedValue", confirmValues.value);
|
|
63
85
|
};
|
|
64
86
|
const onUpdateCurrentIndexes = (newVal) => {
|
|
65
|
-
|
|
66
|
-
|
|
87
|
+
if (props.filteredOptions && props.filteredOptions.length > 0) {
|
|
88
|
+
const selectedValues = newVal.filter((idx) => idx >= 0 && idx < displayOptions.value.length).map((idx) => {
|
|
89
|
+
var _a;
|
|
90
|
+
return (_a = displayOptions.value[idx]) == null ? void 0 : _a.value;
|
|
91
|
+
});
|
|
92
|
+
const newSelectedIndexes = /* @__PURE__ */ new Set();
|
|
93
|
+
confirmIndexes.value.forEach((idx) => {
|
|
94
|
+
var _a;
|
|
95
|
+
if (idx >= 0 && idx < currentOptions.value.length) {
|
|
96
|
+
const value = (_a = currentOptions.value[idx]) == null ? void 0 : _a.value;
|
|
97
|
+
const isInFilteredList = displayOptions.value.some((opt) => opt.value === value);
|
|
98
|
+
if (!isInFilteredList) {
|
|
99
|
+
newSelectedIndexes.add(idx);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
selectedValues.forEach((value) => {
|
|
104
|
+
const originalIndex = currentOptions.value.findIndex((opt) => opt.value === value);
|
|
105
|
+
if (originalIndex >= 0) {
|
|
106
|
+
newSelectedIndexes.add(originalIndex);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
confirmIndexes.value = Array.from(newSelectedIndexes);
|
|
110
|
+
} else {
|
|
111
|
+
confirmIndexes.value = newVal;
|
|
112
|
+
}
|
|
113
|
+
if (confirmIndexes.value.length > 0) {
|
|
67
114
|
getValuesByIndexes();
|
|
68
115
|
} else {
|
|
69
116
|
confirmValues.value = [];
|
|
70
117
|
}
|
|
71
|
-
getValuesByIndexes();
|
|
72
118
|
emit("update:selectedValue", confirmValues.value);
|
|
119
|
+
updateAllSelectedOptions();
|
|
73
120
|
};
|
|
74
121
|
const getIndexesByValues = () => {
|
|
75
122
|
var _a;
|
|
@@ -104,6 +151,7 @@ var stdin_default = defineComponent({
|
|
|
104
151
|
confirmIndexes.value = deepClone(currentSelectedIndex.value);
|
|
105
152
|
confirmValues.value = deepClone(currentSelectedValue.value);
|
|
106
153
|
getIndexesByValues();
|
|
154
|
+
updateAllSelectedOptions();
|
|
107
155
|
});
|
|
108
156
|
watch(() => props.showPicker, (newValue) => {
|
|
109
157
|
var _a;
|
|
@@ -121,20 +169,27 @@ var stdin_default = defineComponent({
|
|
|
121
169
|
};
|
|
122
170
|
const updateShow = (value) => emit("update:showPicker", value);
|
|
123
171
|
const getOptions = () => {
|
|
124
|
-
|
|
172
|
+
return allSelectedOptions.value;
|
|
173
|
+
};
|
|
174
|
+
const onChange = () => {
|
|
175
|
+
updateAllSelectedOptions();
|
|
176
|
+
emit("change", getOptions());
|
|
177
|
+
};
|
|
178
|
+
const updateAllSelectedOptions = () => {
|
|
125
179
|
const result = [];
|
|
180
|
+
const indexes = confirmIndexes.value;
|
|
126
181
|
indexes == null ? void 0 : indexes.forEach((index) => {
|
|
127
182
|
if (index > -1 && index < currentOptions.value.length && currentOptions.value[index]) {
|
|
183
|
+
const option = currentOptions.value[index];
|
|
128
184
|
result.push({
|
|
129
|
-
[props.textKey]:
|
|
130
|
-
value:
|
|
185
|
+
[props.textKey]: option[props.textKey],
|
|
186
|
+
value: option.value,
|
|
131
187
|
initialIndex: index
|
|
132
188
|
});
|
|
133
189
|
}
|
|
134
190
|
});
|
|
135
|
-
|
|
191
|
+
allSelectedOptions.value = result;
|
|
136
192
|
};
|
|
137
|
-
const onChange = () => emit("change", getOptions());
|
|
138
193
|
const confirm = () => {
|
|
139
194
|
const options = getOptions();
|
|
140
195
|
emit("confirm", options);
|
|
@@ -218,33 +273,84 @@ var stdin_default = defineComponent({
|
|
|
218
273
|
"class": bem("toolbar-divider")
|
|
219
274
|
}, null), _createVNode("span", {
|
|
220
275
|
"class": bem("toolbar-checkbox-text")
|
|
221
|
-
}, [_createTextVNode("\u5DF2\u9009 "),
|
|
276
|
+
}, [_createTextVNode("\u5DF2\u9009 "), allSelectedOptions.value.length])]);
|
|
222
277
|
const handleSelectAll = () => {
|
|
223
|
-
|
|
278
|
+
if (props.filteredOptions && props.filteredOptions.length === 0) {
|
|
279
|
+
confirmIndexes.value = [];
|
|
280
|
+
updateAllSelectedOptions();
|
|
281
|
+
return;
|
|
282
|
+
}
|
|
283
|
+
if (!isAllSelected.value) {
|
|
284
|
+
if (props.filteredOptions && props.filteredOptions.length > 0) {
|
|
285
|
+
const selectedIndexes = [];
|
|
286
|
+
displayOptions.value.forEach((option) => {
|
|
287
|
+
const originalIndex = currentOptions.value.findIndex((opt) => opt.value === option.value);
|
|
288
|
+
if (originalIndex >= 0) {
|
|
289
|
+
selectedIndexes.push(originalIndex);
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
confirmIndexes.value = selectedIndexes;
|
|
293
|
+
} else {
|
|
294
|
+
confirmIndexes.value = currentOptions.value.map((_, index) => index);
|
|
295
|
+
}
|
|
296
|
+
} else {
|
|
297
|
+
confirmIndexes.value = [];
|
|
298
|
+
}
|
|
299
|
+
updateAllSelectedOptions();
|
|
224
300
|
};
|
|
225
301
|
const onSelectOther = () => {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
302
|
+
if (props.filteredOptions && props.filteredOptions.length === 0) {
|
|
303
|
+
confirmIndexes.value = [];
|
|
304
|
+
updateAllSelectedOptions();
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
if (props.filteredOptions && props.filteredOptions.length > 0) {
|
|
308
|
+
const filteredValues = new Set(displayOptions.value.map((opt) => opt.value));
|
|
309
|
+
const currentSelectedInFiltered = /* @__PURE__ */ new Set();
|
|
310
|
+
confirmIndexes.value.forEach((idx) => {
|
|
311
|
+
var _a;
|
|
312
|
+
if (idx >= 0 && idx < currentOptions.value.length) {
|
|
313
|
+
const value = (_a = currentOptions.value[idx]) == null ? void 0 : _a.value;
|
|
314
|
+
if (filteredValues.has(value)) {
|
|
315
|
+
currentSelectedInFiltered.add(idx);
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
});
|
|
319
|
+
const newSelectedIndexes = [];
|
|
320
|
+
displayOptions.value.forEach((option) => {
|
|
321
|
+
const originalIndex = currentOptions.value.findIndex((opt) => opt.value === option.value);
|
|
322
|
+
if (originalIndex >= 0) {
|
|
323
|
+
if (!currentSelectedInFiltered.has(originalIndex)) {
|
|
324
|
+
newSelectedIndexes.push(originalIndex);
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
});
|
|
328
|
+
confirmIndexes.value = newSelectedIndexes;
|
|
329
|
+
} else {
|
|
330
|
+
const temp = new Array();
|
|
331
|
+
currentOptions.value.forEach((_, index) => {
|
|
332
|
+
if (!confirmIndexes.value.includes(index)) {
|
|
333
|
+
temp.push(index);
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
confirmIndexes.value = temp;
|
|
337
|
+
}
|
|
338
|
+
updateAllSelectedOptions();
|
|
233
339
|
};
|
|
234
340
|
const genOptionItems = () => {
|
|
235
341
|
let formatOptions = [];
|
|
236
|
-
if (
|
|
237
|
-
formatOptions =
|
|
342
|
+
if (displayOptions.value && displayOptions.value[0] && typeof displayOptions.value[0] !== "object") {
|
|
343
|
+
formatOptions = displayOptions.value.map((v) => ({
|
|
238
344
|
value: v,
|
|
239
345
|
text: v
|
|
240
346
|
}));
|
|
241
347
|
} else {
|
|
242
|
-
formatOptions =
|
|
348
|
+
formatOptions = displayOptions.value;
|
|
243
349
|
}
|
|
244
350
|
return _createVNode(MultiplePickerOptions, {
|
|
245
351
|
"ref": pickerOptions,
|
|
246
|
-
"currentIndexes":
|
|
247
|
-
"onUpdate:currentIndexes": [($event) =>
|
|
352
|
+
"currentIndexes": displaySelectedIndexes.value,
|
|
353
|
+
"onUpdate:currentIndexes": [($event) => displaySelectedIndexes.value = $event, onUpdateCurrentIndexes],
|
|
248
354
|
"columnCounts": props.columnCounts,
|
|
249
355
|
"initialOptions": formatOptions,
|
|
250
356
|
"allowHtml": props.allowHtml,
|
|
@@ -256,9 +362,16 @@ var stdin_default = defineComponent({
|
|
|
256
362
|
option: slots.option
|
|
257
363
|
});
|
|
258
364
|
};
|
|
259
|
-
const genOptions = () =>
|
|
260
|
-
|
|
261
|
-
|
|
365
|
+
const genOptions = () => {
|
|
366
|
+
const showEmpty = props.filteredOptions && props.filteredOptions.length === 0;
|
|
367
|
+
return _createVNode("div", {
|
|
368
|
+
"class": bem("options")
|
|
369
|
+
}, [showEmpty ? _createVNode(Empty, {
|
|
370
|
+
"class": bem("empty"),
|
|
371
|
+
"image": "no-search-result",
|
|
372
|
+
"description": "\u6682\u65E0\u7ED3\u679C"
|
|
373
|
+
}, null) : genOptionItems()]);
|
|
374
|
+
};
|
|
262
375
|
const renderMultiplePicker = () => _createVNode("div", {
|
|
263
376
|
"class": bem()
|
|
264
377
|
}, [genTitle(), props.loading ? _createVNode(Loading, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-a6);--zt-multiple-picker-background-color: var(--zt-background-popup);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-title-text-color: var(--zt-gray-a4);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-option-disabled-background: var(--zt-gray-a04);--zt-multiple-picker-max-height: 84vh;--zt-multiple-picker-loading-icon-color: var(--zt-primary-color);--zt-multiple-picker-loading-mask-color: var(--zt-picker-loading-mask-color);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border: 1px solid var(--zt-gray-a2);--zt-multiple-picker-ellipsis-border-selected: 1px solid var(--zt-blue-a6);--zt-multiple-picker-title-background: var(--zt-background-popup);--zt-multiple-picker-ellipsis-height: 38px}:root[zt-theme-size=large]{--zt-multiple-picker-ellipsis-height: 50px}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;overflow:hidden;background:var(--zt-multiple-picker-title-background);height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__toolbar-select-all{display:flex;align-items:center;flex:1;max-width:45%}.zt-multiple-picker__toolbar-divider{width:1px;height:14px;background-color:var(--zt-gray-a2);margin-left:7px;margin-right:7px}.zt-multiple-picker__toolbar-checkbox{flex-shrink:0}.zt-multiple-picker__toolbar-checkbox .zt-checkbox__icon{font-size:var(--zt-font-size-xl)}.zt-multiple-picker__toolbar-checkbox .zt-checkbox__label{font-size:var(--zt-font-size-lg);margin-left:var(--zt-padding-base)}.zt-multiple-picker__toolbar-checkbox-text{font-size:var(--zt-font-size-lg);color:var(--zt-text-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (max-width: 375px){.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all{padding:0 14px}}@media (min-width: 376px){.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all{padding:0 22px}}.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all .zt-button__text{font-size:var(--zt-font-size-lg)}@media (max-width: 375px){.zt-multiple-picker__toolbar .zt-multiple-picker__select-other{padding:0 10px}}@media (min-width: 376px){.zt-multiple-picker__toolbar .zt-multiple-picker__select-other{padding:0 14px}}.zt-multiple-picker__toolbar .zt-multiple-picker__select-other .zt-button__text{font-size:var(--zt-font-size-lg)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);text-align:center;background:var(--zt-multiple-picker-title-background);color:var(--zt-multiple-picker-title-text-color);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:grab;overflow-y:scroll}.zt-multiple-picker__options:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-multiple-picker__options:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-multiple-picker-background-color);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{height:var(--zt-multiple-picker-ellipsis-height);line-height:var(--zt-multiple-picker-ellipsis-height);border-radius:calc(var(--zt-multiple-picker-ellipsis-height) / 2);border:var(--zt-multiple-picker-ellipsis-border);padding:0 var(--zt-padding-md)}.zt-multiple-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;color:var(--zt-gray-a2)}.zt-multiple-picker-options__item--disabled .zt-ellipsis{background:var(--zt-multiple-picker-option-disabled-background);border:0}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected{color:var(--zt-primary-color)}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color-a1);border:var(--zt-multiple-picker-ellipsis-border-selected)}.zt-multiple-picker-options__item--disabled-selected{cursor:not-allowed;color:var(--zt-gray)!important}.zt-multiple-picker-options__item--disabled-selected .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important;border:0!important}
|
|
1
|
+
:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-a6);--zt-multiple-picker-background-color: var(--zt-background-popup);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-title-text-color: var(--zt-gray-a4);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-option-disabled-background: var(--zt-gray-a04);--zt-multiple-picker-max-height: 84vh;--zt-multiple-picker-loading-icon-color: var(--zt-primary-color);--zt-multiple-picker-loading-mask-color: var(--zt-picker-loading-mask-color);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border: 1px solid var(--zt-gray-a2);--zt-multiple-picker-ellipsis-border-selected: 1px solid var(--zt-blue-a6);--zt-multiple-picker-title-background: var(--zt-background-popup);--zt-multiple-picker-ellipsis-height: 38px}:root[zt-theme-size=large]{--zt-multiple-picker-ellipsis-height: 50px}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;overflow:hidden;background:var(--zt-multiple-picker-title-background);height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__toolbar-select-all{display:flex;align-items:center;flex:1;max-width:45%}.zt-multiple-picker__toolbar-divider{width:1px;height:14px;background-color:var(--zt-gray-a2);margin-left:7px;margin-right:7px}.zt-multiple-picker__toolbar-checkbox{flex-shrink:0}.zt-multiple-picker__toolbar-checkbox .zt-checkbox__icon{font-size:var(--zt-font-size-xl)}.zt-multiple-picker__toolbar-checkbox .zt-checkbox__label{font-size:var(--zt-font-size-lg);margin-left:var(--zt-padding-base)}.zt-multiple-picker__toolbar-checkbox-text{font-size:var(--zt-font-size-lg);color:var(--zt-text-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (max-width: 375px){.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all{padding:0 14px}}@media (min-width: 376px){.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all{padding:0 22px}}.zt-multiple-picker__toolbar .zt-multiple-picker__in-select-all .zt-button__text{font-size:var(--zt-font-size-lg)}@media (max-width: 375px){.zt-multiple-picker__toolbar .zt-multiple-picker__select-other{padding:0 10px}}@media (min-width: 376px){.zt-multiple-picker__toolbar .zt-multiple-picker__select-other{padding:0 14px}}.zt-multiple-picker__toolbar .zt-multiple-picker__select-other .zt-button__text{font-size:var(--zt-font-size-lg)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);text-align:center;background:var(--zt-multiple-picker-title-background);color:var(--zt-multiple-picker-title-text-color);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:grab;overflow-y:scroll}.zt-multiple-picker__options:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-multiple-picker__options:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-multiple-picker__empty{width:100%;padding:40px 0}.zt-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-multiple-picker-background-color);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{height:var(--zt-multiple-picker-ellipsis-height);line-height:var(--zt-multiple-picker-ellipsis-height);border-radius:calc(var(--zt-multiple-picker-ellipsis-height) / 2);border:var(--zt-multiple-picker-ellipsis-border);padding:0 var(--zt-padding-md)}.zt-multiple-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;color:var(--zt-gray-a2)}.zt-multiple-picker-options__item--disabled .zt-ellipsis{background:var(--zt-multiple-picker-option-disabled-background);border:0}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected{color:var(--zt-primary-color)}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color-a1);border:var(--zt-multiple-picker-ellipsis-border-selected)}.zt-multiple-picker-options__item--disabled-selected{cursor:not-allowed;color:var(--zt-gray)!important}.zt-multiple-picker-options__item--disabled-selected .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important;border:0!important}
|
|
@@ -36,6 +36,10 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
|
|
|
36
36
|
type: import("vue").PropType<import("./types").PickerOption[]>;
|
|
37
37
|
default: () => import("./types").PickerOption[];
|
|
38
38
|
};
|
|
39
|
+
filteredOptions: {
|
|
40
|
+
type: import("vue").PropType<import("./types").PickerOption[]>;
|
|
41
|
+
default: () => import("./types").PickerOption[];
|
|
42
|
+
};
|
|
39
43
|
toolbarPosition: {
|
|
40
44
|
type: import("vue").PropType<string>;
|
|
41
45
|
default: string;
|
|
@@ -97,6 +101,10 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
|
|
|
97
101
|
type: import("vue").PropType<import("./types").PickerOption[]>;
|
|
98
102
|
default: () => import("./types").PickerOption[];
|
|
99
103
|
};
|
|
104
|
+
filteredOptions: {
|
|
105
|
+
type: import("vue").PropType<import("./types").PickerOption[]>;
|
|
106
|
+
default: () => import("./types").PickerOption[];
|
|
107
|
+
};
|
|
100
108
|
toolbarPosition: {
|
|
101
109
|
type: import("vue").PropType<string>;
|
|
102
110
|
default: string;
|
|
@@ -143,6 +151,7 @@ export declare const MultiplePicker: import("../utils").WithInstall<import("vue"
|
|
|
143
151
|
textKey: string;
|
|
144
152
|
itemHeight: string | number;
|
|
145
153
|
columnCounts: number;
|
|
154
|
+
filteredOptions: import("./types").PickerOption[];
|
|
146
155
|
toolbarPosition: string;
|
|
147
156
|
selectedIndex: number[];
|
|
148
157
|
selectedValue: import("../utils").Numeric[];
|