zartui 3.1.25 → 3.1.26
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 +6 -0
- package/es/multiple-picker/MultiplePicker.mjs +49 -11
- package/es/multiple-picker/MultiplePickerOptions.mjs +8 -4
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/multiple-picker/MultiplePicker.d.ts +6 -0
- package/lib/multiple-picker/MultiplePicker.js +49 -11
- package/lib/multiple-picker/MultiplePickerOptions.js +7 -3
- package/lib/web-types.json +1 -1
- package/lib/zartui.cjs.js +56 -15
- package/lib/zartui.es.js +56 -15
- package/lib/zartui.js +56 -15
- package/lib/zartui.min.js +1 -1
- package/package.json +5 -5
package/es/index.d.ts
CHANGED
package/es/index.mjs
CHANGED
|
@@ -76,7 +76,7 @@ import { Timeline } from "./timeline/index.mjs";
|
|
|
76
76
|
import { Toast } from "./toast/index.mjs";
|
|
77
77
|
import { Uploader } from "./uploader/index.mjs";
|
|
78
78
|
import { Video } from "./video/index.mjs";
|
|
79
|
-
const version = "3.1.
|
|
79
|
+
const version = "3.1.26";
|
|
80
80
|
function install(app) {
|
|
81
81
|
const components = [
|
|
82
82
|
ActionSheet,
|
|
@@ -61,6 +61,12 @@ declare const multiplePickerProps: {
|
|
|
61
61
|
default: true;
|
|
62
62
|
};
|
|
63
63
|
};
|
|
64
|
+
export type MultiplePickerExpose = {
|
|
65
|
+
resetOptions: (props: {
|
|
66
|
+
options: Array<PickerOption>;
|
|
67
|
+
selectedIndex: Array<number>;
|
|
68
|
+
}) => void;
|
|
69
|
+
};
|
|
64
70
|
export type MultiplePickerProps = ExtractPropTypes<typeof multiplePickerProps>;
|
|
65
71
|
declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
|
|
66
72
|
title: StringConstructor;
|
|
@@ -6,6 +6,7 @@ import Loading from "../loading/index.mjs";
|
|
|
6
6
|
import MultiplePickerOptions from "./MultiplePickerOptions.mjs";
|
|
7
7
|
import Popup from "../popup/index.mjs";
|
|
8
8
|
import Button from "../button/index.mjs";
|
|
9
|
+
import { useExpose } from "../composables/use-expose.mjs";
|
|
9
10
|
const [name, bem] = createNamespace("multiple-picker");
|
|
10
11
|
const multiplePickerProps = {
|
|
11
12
|
title: String,
|
|
@@ -36,13 +37,37 @@ var stdin_default = defineComponent({
|
|
|
36
37
|
emit,
|
|
37
38
|
slots
|
|
38
39
|
}) {
|
|
40
|
+
const currentOptions = ref(props.options);
|
|
41
|
+
watch(props.options, (newVal) => {
|
|
42
|
+
currentOptions.value = newVal;
|
|
43
|
+
});
|
|
39
44
|
const confirmIndexes = ref(props.selectedIndex);
|
|
40
45
|
const confirmValues = ref(props.selectedValue);
|
|
46
|
+
const resetOptions = (props2) => {
|
|
47
|
+
currentOptions.value = props2.options;
|
|
48
|
+
confirmIndexes.value = props2.selectedIndex;
|
|
49
|
+
if (confirmIndexes.value.length > 0) {
|
|
50
|
+
getValuesByIndexes();
|
|
51
|
+
} else {
|
|
52
|
+
confirmValues.value = [];
|
|
53
|
+
}
|
|
54
|
+
emit("update:selectedValue", confirmValues.value);
|
|
55
|
+
};
|
|
56
|
+
const onUpdateCurrentIndexes = (newVal) => {
|
|
57
|
+
confirmIndexes.value = newVal;
|
|
58
|
+
if (newVal.length > 0) {
|
|
59
|
+
getValuesByIndexes();
|
|
60
|
+
} else {
|
|
61
|
+
confirmValues.value = [];
|
|
62
|
+
}
|
|
63
|
+
getValuesByIndexes();
|
|
64
|
+
emit("update:selectedValue", confirmValues.value);
|
|
65
|
+
};
|
|
41
66
|
const getIndexesByValues = () => {
|
|
42
67
|
var _a;
|
|
43
68
|
if (confirmValues.value && confirmValues.value.length > 0) {
|
|
44
69
|
confirmIndexes.value.splice(0, confirmIndexes.value.length);
|
|
45
|
-
(_a =
|
|
70
|
+
(_a = currentOptions.value) == null ? void 0 : _a.forEach((option, index) => {
|
|
46
71
|
if (option.value && confirmValues.value.includes(option.value)) {
|
|
47
72
|
confirmIndexes.value.push(index);
|
|
48
73
|
}
|
|
@@ -50,6 +75,16 @@ var stdin_default = defineComponent({
|
|
|
50
75
|
}
|
|
51
76
|
};
|
|
52
77
|
getIndexesByValues();
|
|
78
|
+
const getValuesByIndexes = () => {
|
|
79
|
+
if (confirmIndexes.value && confirmIndexes.value.length > 0) {
|
|
80
|
+
confirmValues.value.splice(0, confirmValues.value.length);
|
|
81
|
+
confirmIndexes.value.forEach((index) => {
|
|
82
|
+
if (index > -1 && index < currentOptions.value.length) {
|
|
83
|
+
confirmValues.value.push(currentOptions.value[index].value);
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
};
|
|
53
88
|
const pickerOptions = ref();
|
|
54
89
|
const currentShow = ref(props.showPicker);
|
|
55
90
|
const DEFAULT_ITEM_HEIGHT = ref(36);
|
|
@@ -80,10 +115,10 @@ var stdin_default = defineComponent({
|
|
|
80
115
|
const indexes = confirmIndexes.value;
|
|
81
116
|
const result = [];
|
|
82
117
|
indexes == null ? void 0 : indexes.forEach((index) => {
|
|
83
|
-
if (index > -1 && index <
|
|
118
|
+
if (index > -1 && index < currentOptions.value.length && currentOptions.value[index]) {
|
|
84
119
|
result.push({
|
|
85
|
-
[props.textKey]:
|
|
86
|
-
value:
|
|
120
|
+
[props.textKey]: currentOptions.value[index][props.textKey],
|
|
121
|
+
value: currentOptions.value[index].value,
|
|
87
122
|
initialIndex: index
|
|
88
123
|
});
|
|
89
124
|
}
|
|
@@ -139,20 +174,20 @@ var stdin_default = defineComponent({
|
|
|
139
174
|
}, [slots.toolbar ? slots.toolbar() : [genCancel(), genConfirm()]]);
|
|
140
175
|
}
|
|
141
176
|
};
|
|
142
|
-
const genOptionItems = () => {
|
|
177
|
+
const genOptionItems = computed(() => {
|
|
143
178
|
let formatOptions = [];
|
|
144
|
-
if (
|
|
145
|
-
formatOptions =
|
|
179
|
+
if (currentOptions.value && currentOptions.value[0] && typeof currentOptions.value[0] !== "object") {
|
|
180
|
+
formatOptions = currentOptions.value.map((v) => ({
|
|
146
181
|
value: v,
|
|
147
182
|
text: v
|
|
148
183
|
}));
|
|
149
184
|
} else {
|
|
150
|
-
formatOptions =
|
|
185
|
+
formatOptions = currentOptions.value;
|
|
151
186
|
}
|
|
152
187
|
return _createVNode(MultiplePickerOptions, {
|
|
153
188
|
"ref": pickerOptions,
|
|
154
189
|
"currentIndexes": confirmIndexes.value,
|
|
155
|
-
"onUpdate:currentIndexes": ($event) => confirmIndexes.value = $event,
|
|
190
|
+
"onUpdate:currentIndexes": [($event) => confirmIndexes.value = $event, onUpdateCurrentIndexes],
|
|
156
191
|
"columnCounts": props.columnCounts,
|
|
157
192
|
"initialOptions": formatOptions,
|
|
158
193
|
"allowHtml": props.allowHtml,
|
|
@@ -163,15 +198,18 @@ var stdin_default = defineComponent({
|
|
|
163
198
|
}, {
|
|
164
199
|
option: slots.option
|
|
165
200
|
});
|
|
166
|
-
};
|
|
201
|
+
});
|
|
167
202
|
const genOptions = () => _createVNode("div", {
|
|
168
203
|
"class": bem("options")
|
|
169
|
-
}, [genOptionItems
|
|
204
|
+
}, [genOptionItems.value]);
|
|
170
205
|
const renderMultiplePicker = () => _createVNode("div", {
|
|
171
206
|
"class": bem()
|
|
172
207
|
}, [genTitle(), props.loading ? _createVNode(Loading, {
|
|
173
208
|
"class": bem("loading")
|
|
174
209
|
}, null) : "", genOptions(), props.toolbarPosition === "bottom" ? genToolbar() : ""]);
|
|
210
|
+
useExpose({
|
|
211
|
+
resetOptions
|
|
212
|
+
});
|
|
175
213
|
return () => {
|
|
176
214
|
if (props.popup) {
|
|
177
215
|
return _createVNode(Popup, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref, defineComponent, reactive, createVNode as _createVNode } from "vue";
|
|
1
|
+
import { ref, defineComponent, reactive, computed, createVNode as _createVNode } from "vue";
|
|
2
2
|
import { createNamespace, isObject, makeArrayProp, makeNumberProp, makeStringProp } from "../utils/index.mjs";
|
|
3
3
|
import { deepClone } from "../utils/deep-clone.mjs";
|
|
4
4
|
import { useExpose } from "../composables/use-expose.mjs";
|
|
@@ -20,11 +20,15 @@ var stdin_default = defineComponent({
|
|
|
20
20
|
emit,
|
|
21
21
|
slots
|
|
22
22
|
}) {
|
|
23
|
+
const currentOptions = computed(() => {
|
|
24
|
+
return props.initialOptions;
|
|
25
|
+
});
|
|
23
26
|
const state = reactive({
|
|
24
|
-
options: props.initialOptions,
|
|
25
27
|
confirmed: false
|
|
26
28
|
});
|
|
27
|
-
const currentIndexes =
|
|
29
|
+
const currentIndexes = computed(() => {
|
|
30
|
+
return props.currentIndexes;
|
|
31
|
+
});
|
|
28
32
|
const columnCounts = ref(props.columnCounts);
|
|
29
33
|
const onClickItem = (index) => {
|
|
30
34
|
if (props.readonly) {
|
|
@@ -62,7 +66,7 @@ var stdin_default = defineComponent({
|
|
|
62
66
|
height: `${props.itemHeight + 8}px`,
|
|
63
67
|
width: `${1 / columnCounts.value * 100}%`
|
|
64
68
|
};
|
|
65
|
-
return
|
|
69
|
+
return currentOptions.value.map((option, index) => {
|
|
66
70
|
const text = getOptionText(option);
|
|
67
71
|
const disabled = isOptionDisabled(option);
|
|
68
72
|
const childData = {
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -180,7 +180,7 @@ __reExport(stdin_exports, require("./timeline"), module.exports);
|
|
|
180
180
|
__reExport(stdin_exports, require("./toast"), module.exports);
|
|
181
181
|
__reExport(stdin_exports, require("./uploader"), module.exports);
|
|
182
182
|
__reExport(stdin_exports, require("./video"), module.exports);
|
|
183
|
-
const version = "3.1.
|
|
183
|
+
const version = "3.1.26";
|
|
184
184
|
function install(app) {
|
|
185
185
|
const components = [
|
|
186
186
|
import_action_sheet.ActionSheet,
|
|
@@ -61,6 +61,12 @@ declare const multiplePickerProps: {
|
|
|
61
61
|
default: true;
|
|
62
62
|
};
|
|
63
63
|
};
|
|
64
|
+
export type MultiplePickerExpose = {
|
|
65
|
+
resetOptions: (props: {
|
|
66
|
+
options: Array<PickerOption>;
|
|
67
|
+
selectedIndex: Array<number>;
|
|
68
|
+
}) => void;
|
|
69
|
+
};
|
|
64
70
|
export type MultiplePickerProps = ExtractPropTypes<typeof multiplePickerProps>;
|
|
65
71
|
declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
|
|
66
72
|
title: StringConstructor;
|
|
@@ -38,6 +38,7 @@ var import_loading = __toESM(require("../loading"));
|
|
|
38
38
|
var import_MultiplePickerOptions = __toESM(require("./MultiplePickerOptions"));
|
|
39
39
|
var import_popup = __toESM(require("../popup"));
|
|
40
40
|
var import_button = __toESM(require("../button"));
|
|
41
|
+
var import_use_expose = require("../composables/use-expose");
|
|
41
42
|
const [name, bem] = (0, import_utils.createNamespace)("multiple-picker");
|
|
42
43
|
const multiplePickerProps = {
|
|
43
44
|
title: String,
|
|
@@ -68,13 +69,37 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
68
69
|
emit,
|
|
69
70
|
slots
|
|
70
71
|
}) {
|
|
72
|
+
const currentOptions = (0, import_vue.ref)(props.options);
|
|
73
|
+
(0, import_vue.watch)(props.options, (newVal) => {
|
|
74
|
+
currentOptions.value = newVal;
|
|
75
|
+
});
|
|
71
76
|
const confirmIndexes = (0, import_vue.ref)(props.selectedIndex);
|
|
72
77
|
const confirmValues = (0, import_vue.ref)(props.selectedValue);
|
|
78
|
+
const resetOptions = (props2) => {
|
|
79
|
+
currentOptions.value = props2.options;
|
|
80
|
+
confirmIndexes.value = props2.selectedIndex;
|
|
81
|
+
if (confirmIndexes.value.length > 0) {
|
|
82
|
+
getValuesByIndexes();
|
|
83
|
+
} else {
|
|
84
|
+
confirmValues.value = [];
|
|
85
|
+
}
|
|
86
|
+
emit("update:selectedValue", confirmValues.value);
|
|
87
|
+
};
|
|
88
|
+
const onUpdateCurrentIndexes = (newVal) => {
|
|
89
|
+
confirmIndexes.value = newVal;
|
|
90
|
+
if (newVal.length > 0) {
|
|
91
|
+
getValuesByIndexes();
|
|
92
|
+
} else {
|
|
93
|
+
confirmValues.value = [];
|
|
94
|
+
}
|
|
95
|
+
getValuesByIndexes();
|
|
96
|
+
emit("update:selectedValue", confirmValues.value);
|
|
97
|
+
};
|
|
73
98
|
const getIndexesByValues = () => {
|
|
74
99
|
var _a;
|
|
75
100
|
if (confirmValues.value && confirmValues.value.length > 0) {
|
|
76
101
|
confirmIndexes.value.splice(0, confirmIndexes.value.length);
|
|
77
|
-
(_a =
|
|
102
|
+
(_a = currentOptions.value) == null ? void 0 : _a.forEach((option, index) => {
|
|
78
103
|
if (option.value && confirmValues.value.includes(option.value)) {
|
|
79
104
|
confirmIndexes.value.push(index);
|
|
80
105
|
}
|
|
@@ -82,6 +107,16 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
82
107
|
}
|
|
83
108
|
};
|
|
84
109
|
getIndexesByValues();
|
|
110
|
+
const getValuesByIndexes = () => {
|
|
111
|
+
if (confirmIndexes.value && confirmIndexes.value.length > 0) {
|
|
112
|
+
confirmValues.value.splice(0, confirmValues.value.length);
|
|
113
|
+
confirmIndexes.value.forEach((index) => {
|
|
114
|
+
if (index > -1 && index < currentOptions.value.length) {
|
|
115
|
+
confirmValues.value.push(currentOptions.value[index].value);
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
};
|
|
85
120
|
const pickerOptions = (0, import_vue.ref)();
|
|
86
121
|
const currentShow = (0, import_vue.ref)(props.showPicker);
|
|
87
122
|
const DEFAULT_ITEM_HEIGHT = (0, import_vue.ref)(36);
|
|
@@ -112,10 +147,10 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
112
147
|
const indexes = confirmIndexes.value;
|
|
113
148
|
const result = [];
|
|
114
149
|
indexes == null ? void 0 : indexes.forEach((index) => {
|
|
115
|
-
if (index > -1 && index <
|
|
150
|
+
if (index > -1 && index < currentOptions.value.length && currentOptions.value[index]) {
|
|
116
151
|
result.push({
|
|
117
|
-
[props.textKey]:
|
|
118
|
-
value:
|
|
152
|
+
[props.textKey]: currentOptions.value[index][props.textKey],
|
|
153
|
+
value: currentOptions.value[index].value,
|
|
119
154
|
initialIndex: index
|
|
120
155
|
});
|
|
121
156
|
}
|
|
@@ -171,20 +206,20 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
171
206
|
}, [slots.toolbar ? slots.toolbar() : [genCancel(), genConfirm()]]);
|
|
172
207
|
}
|
|
173
208
|
};
|
|
174
|
-
const genOptionItems = () => {
|
|
209
|
+
const genOptionItems = (0, import_vue.computed)(() => {
|
|
175
210
|
let formatOptions = [];
|
|
176
|
-
if (
|
|
177
|
-
formatOptions =
|
|
211
|
+
if (currentOptions.value && currentOptions.value[0] && typeof currentOptions.value[0] !== "object") {
|
|
212
|
+
formatOptions = currentOptions.value.map((v) => ({
|
|
178
213
|
value: v,
|
|
179
214
|
text: v
|
|
180
215
|
}));
|
|
181
216
|
} else {
|
|
182
|
-
formatOptions =
|
|
217
|
+
formatOptions = currentOptions.value;
|
|
183
218
|
}
|
|
184
219
|
return (0, import_vue.createVNode)(import_MultiplePickerOptions.default, {
|
|
185
220
|
"ref": pickerOptions,
|
|
186
221
|
"currentIndexes": confirmIndexes.value,
|
|
187
|
-
"onUpdate:currentIndexes": ($event) => confirmIndexes.value = $event,
|
|
222
|
+
"onUpdate:currentIndexes": [($event) => confirmIndexes.value = $event, onUpdateCurrentIndexes],
|
|
188
223
|
"columnCounts": props.columnCounts,
|
|
189
224
|
"initialOptions": formatOptions,
|
|
190
225
|
"allowHtml": props.allowHtml,
|
|
@@ -195,15 +230,18 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
195
230
|
}, {
|
|
196
231
|
option: slots.option
|
|
197
232
|
});
|
|
198
|
-
};
|
|
233
|
+
});
|
|
199
234
|
const genOptions = () => (0, import_vue.createVNode)("div", {
|
|
200
235
|
"class": bem("options")
|
|
201
|
-
}, [genOptionItems
|
|
236
|
+
}, [genOptionItems.value]);
|
|
202
237
|
const renderMultiplePicker = () => (0, import_vue.createVNode)("div", {
|
|
203
238
|
"class": bem()
|
|
204
239
|
}, [genTitle(), props.loading ? (0, import_vue.createVNode)(import_loading.default, {
|
|
205
240
|
"class": bem("loading")
|
|
206
241
|
}, null) : "", genOptions(), props.toolbarPosition === "bottom" ? genToolbar() : ""]);
|
|
242
|
+
(0, import_use_expose.useExpose)({
|
|
243
|
+
resetOptions
|
|
244
|
+
});
|
|
207
245
|
return () => {
|
|
208
246
|
if (props.popup) {
|
|
209
247
|
return (0, import_vue.createVNode)(import_popup.default, {
|
|
@@ -42,11 +42,15 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
42
42
|
emit,
|
|
43
43
|
slots
|
|
44
44
|
}) {
|
|
45
|
+
const currentOptions = (0, import_vue.computed)(() => {
|
|
46
|
+
return props.initialOptions;
|
|
47
|
+
});
|
|
45
48
|
const state = (0, import_vue.reactive)({
|
|
46
|
-
options: props.initialOptions,
|
|
47
49
|
confirmed: false
|
|
48
50
|
});
|
|
49
|
-
const currentIndexes = (0, import_vue.
|
|
51
|
+
const currentIndexes = (0, import_vue.computed)(() => {
|
|
52
|
+
return props.currentIndexes;
|
|
53
|
+
});
|
|
50
54
|
const columnCounts = (0, import_vue.ref)(props.columnCounts);
|
|
51
55
|
const onClickItem = (index) => {
|
|
52
56
|
if (props.readonly) {
|
|
@@ -84,7 +88,7 @@ var stdin_default = (0, import_vue.defineComponent)({
|
|
|
84
88
|
height: `${props.itemHeight + 8}px`,
|
|
85
89
|
width: `${1 / columnCounts.value * 100}%`
|
|
86
90
|
};
|
|
87
|
-
return
|
|
91
|
+
return currentOptions.value.map((option, index) => {
|
|
88
92
|
const text = getOptionText(option);
|
|
89
93
|
const disabled = isOptionDisabled(option);
|
|
90
94
|
const childData = {
|