zartui 3.1.3 → 3.1.5
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/README.md +25 -0
- package/es/date-time-picker/DateTimePickerWrapper.mjs +6 -4
- package/es/date-time-picker/utils.d.ts +1 -0
- package/es/date-time-picker/utils.mjs +11 -1
- package/es/index.d.ts +2 -1
- package/es/index.mjs +4 -1
- package/es/lazyload/vue-lazyload/index.d.ts +55 -55
- package/es/radio-picker/RadioPicker.d.ts +207 -0
- package/es/radio-picker/RadioPicker.mjs +290 -0
- package/es/radio-picker/RadioPickerColumn.d.ts +70 -0
- package/es/radio-picker/RadioPickerColumn.mjs +237 -0
- package/es/radio-picker/RadioPickerToolbar.d.ts +18 -0
- package/es/radio-picker/RadioPickerToolbar.mjs +54 -0
- package/es/radio-picker/index.css +1 -0
- package/es/radio-picker/index.d.ts +136 -0
- package/es/radio-picker/index.mjs +10 -0
- package/es/radio-picker/style/index.d.ts +1 -0
- package/es/radio-picker/style/index.mjs +16 -0
- package/es/radio-picker/types.d.ts +44 -0
- package/es/radio-picker/types.mjs +0 -0
- package/es/radio-picker/utils.d.ts +13 -0
- package/es/radio-picker/utils.mjs +80 -0
- package/es/utils/debounce.d.ts +46 -0
- package/es/utils/debounce.mjs +65 -0
- package/es/vue-sfc-shim.d.ts +6 -6
- package/es/vue-tsx-shim.d.ts +23 -23
- package/lib/date-time-picker/DateTimePickerWrapper.js +5 -3
- package/lib/date-time-picker/utils.d.ts +1 -0
- package/lib/date-time-picker/utils.js +10 -0
- package/lib/index.css +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +4 -1
- package/lib/lazyload/vue-lazyload/index.d.ts +55 -55
- package/lib/radio-picker/RadioPicker.d.ts +207 -0
- package/lib/radio-picker/RadioPicker.js +319 -0
- package/lib/radio-picker/RadioPickerColumn.d.ts +70 -0
- package/lib/radio-picker/RadioPickerColumn.js +266 -0
- package/lib/radio-picker/RadioPickerToolbar.d.ts +18 -0
- package/lib/radio-picker/RadioPickerToolbar.js +73 -0
- package/lib/radio-picker/index.css +1 -0
- package/lib/radio-picker/index.d.ts +136 -0
- package/lib/radio-picker/index.js +39 -0
- package/lib/radio-picker/style/index.d.ts +1 -0
- package/lib/radio-picker/style/index.js +16 -0
- package/lib/radio-picker/types.d.ts +44 -0
- package/lib/radio-picker/types.js +15 -0
- package/lib/radio-picker/utils.d.ts +13 -0
- package/lib/radio-picker/utils.js +99 -0
- package/lib/utils/debounce.d.ts +46 -0
- package/lib/utils/debounce.js +84 -0
- package/lib/vue-sfc-shim.d.ts +6 -6
- package/lib/vue-tsx-shim.d.ts +23 -23
- package/lib/web-types.json +1 -1
- package/lib/zartui.cjs.js +1676 -999
- package/lib/zartui.es.js +1676 -999
- package/lib/zartui.js +1682 -1005
- package/lib/zartui.min.js +1 -1
- package/package.json +67 -67
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import type { InjectionKey, PropType } from 'vue';
|
|
2
|
+
import type { PickerColumnProvide, PickerFieldNames, RadioPickerOption } from './types';
|
|
3
|
+
export declare const PICKER_KEY: InjectionKey<PickerColumnProvide>;
|
|
4
|
+
declare const _default: import("vue").DefineComponent<{
|
|
5
|
+
value: (NumberConstructor | StringConstructor)[];
|
|
6
|
+
unit: {
|
|
7
|
+
type: PropType<string>;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
fields: {
|
|
11
|
+
type: PropType<Required<PickerFieldNames>>;
|
|
12
|
+
required: true;
|
|
13
|
+
};
|
|
14
|
+
options: {
|
|
15
|
+
type: PropType<RadioPickerOption[]>;
|
|
16
|
+
default: () => RadioPickerOption[];
|
|
17
|
+
};
|
|
18
|
+
readonly: BooleanConstructor;
|
|
19
|
+
allowHtml: BooleanConstructor;
|
|
20
|
+
wrapHeight: {
|
|
21
|
+
type: NumberConstructor;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
swipeDuration: {
|
|
25
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
26
|
+
required: true;
|
|
27
|
+
};
|
|
28
|
+
autoSearchVal: {
|
|
29
|
+
type: PropType<string>;
|
|
30
|
+
default: string;
|
|
31
|
+
};
|
|
32
|
+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption")[], "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
33
|
+
value: (NumberConstructor | StringConstructor)[];
|
|
34
|
+
unit: {
|
|
35
|
+
type: PropType<string>;
|
|
36
|
+
default: string;
|
|
37
|
+
};
|
|
38
|
+
fields: {
|
|
39
|
+
type: PropType<Required<PickerFieldNames>>;
|
|
40
|
+
required: true;
|
|
41
|
+
};
|
|
42
|
+
options: {
|
|
43
|
+
type: PropType<RadioPickerOption[]>;
|
|
44
|
+
default: () => RadioPickerOption[];
|
|
45
|
+
};
|
|
46
|
+
readonly: BooleanConstructor;
|
|
47
|
+
allowHtml: BooleanConstructor;
|
|
48
|
+
wrapHeight: {
|
|
49
|
+
type: NumberConstructor;
|
|
50
|
+
required: true;
|
|
51
|
+
};
|
|
52
|
+
swipeDuration: {
|
|
53
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
54
|
+
required: true;
|
|
55
|
+
};
|
|
56
|
+
autoSearchVal: {
|
|
57
|
+
type: PropType<string>;
|
|
58
|
+
default: string;
|
|
59
|
+
};
|
|
60
|
+
}>> & {
|
|
61
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
62
|
+
onClickOption?: ((...args: any[]) => any) | undefined;
|
|
63
|
+
}, {
|
|
64
|
+
readonly: boolean;
|
|
65
|
+
options: RadioPickerOption[];
|
|
66
|
+
allowHtml: boolean;
|
|
67
|
+
unit: string;
|
|
68
|
+
autoSearchVal: string;
|
|
69
|
+
}, {}>;
|
|
70
|
+
export default _default;
|
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name2 in all)
|
|
9
|
+
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
var stdin_exports = {};
|
|
29
|
+
__export(stdin_exports, {
|
|
30
|
+
PICKER_KEY: () => PICKER_KEY,
|
|
31
|
+
default: () => stdin_default
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
34
|
+
var import_vue = require("vue");
|
|
35
|
+
var import_vue2 = require("vue");
|
|
36
|
+
var import_RadioGroup = __toESM(require("../radio-group/RadioGroup"));
|
|
37
|
+
var import_Radio = __toESM(require("../radio/Radio"));
|
|
38
|
+
var import_utils = require("../utils");
|
|
39
|
+
var import_utils2 = require("./utils");
|
|
40
|
+
var import_use = require("@zartui/use");
|
|
41
|
+
var import_use_expose = require("../composables/use-expose");
|
|
42
|
+
var import_use_touch = require("../composables/use-touch");
|
|
43
|
+
var import_Empty = __toESM(require("../empty/Empty"));
|
|
44
|
+
const DEFAULT_DURATION = 200;
|
|
45
|
+
const MOMENTUM_TIME = 300;
|
|
46
|
+
const MOMENTUM_DISTANCE = 15;
|
|
47
|
+
const [name, bem] = (0, import_utils.createNamespace)("radio-picker-column");
|
|
48
|
+
const PICKER_KEY = Symbol(name);
|
|
49
|
+
var stdin_default = (0, import_vue2.defineComponent)({
|
|
50
|
+
name,
|
|
51
|
+
props: {
|
|
52
|
+
value: import_utils.numericProp,
|
|
53
|
+
unit: (0, import_utils.makeStringProp)(""),
|
|
54
|
+
fields: (0, import_utils.makeRequiredProp)(Object),
|
|
55
|
+
options: (0, import_utils.makeArrayProp)(),
|
|
56
|
+
readonly: Boolean,
|
|
57
|
+
allowHtml: Boolean,
|
|
58
|
+
wrapHeight: (0, import_utils.makeRequiredProp)(Number),
|
|
59
|
+
swipeDuration: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
|
|
60
|
+
autoSearchVal: (0, import_utils.makeStringProp)("")
|
|
61
|
+
},
|
|
62
|
+
emits: ["change", "clickOption"],
|
|
63
|
+
setup(props, {
|
|
64
|
+
emit,
|
|
65
|
+
slots
|
|
66
|
+
}) {
|
|
67
|
+
let moving;
|
|
68
|
+
let startOffset;
|
|
69
|
+
let touchStartTime;
|
|
70
|
+
let momentumOffset;
|
|
71
|
+
let transitionEndTrigger;
|
|
72
|
+
const root = (0, import_vue2.ref)();
|
|
73
|
+
const wrapper = (0, import_vue2.ref)();
|
|
74
|
+
const currentOffset = (0, import_vue2.ref)(0);
|
|
75
|
+
const currentDuration = (0, import_vue2.ref)(0);
|
|
76
|
+
const touch = (0, import_use_touch.useTouch)();
|
|
77
|
+
const baseOffset = () => 0;
|
|
78
|
+
const setRangeOffset = (distance) => {
|
|
79
|
+
const maxOffsetVal = wrapper.value.clientHeight - props.wrapHeight;
|
|
80
|
+
currentOffset.value = (0, import_utils.clamp)(distance, -maxOffsetVal, 0);
|
|
81
|
+
};
|
|
82
|
+
const isSearchEmpty = (0, import_vue2.computed)(() => {
|
|
83
|
+
return !props.options.some((option) => {
|
|
84
|
+
const text = option[props.fields.text];
|
|
85
|
+
return text == null ? void 0 : text.includes(props.autoSearchVal);
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
(0, import_vue2.watch)(() => props.autoSearchVal, () => {
|
|
89
|
+
currentOffset.value = baseOffset();
|
|
90
|
+
}, {
|
|
91
|
+
immediate: true
|
|
92
|
+
});
|
|
93
|
+
const updateValueByIndex = (index) => {
|
|
94
|
+
const enabledIndex = (0, import_utils2.findIndexOfEnabledOption)(props.options, index);
|
|
95
|
+
const trigger = () => {
|
|
96
|
+
const value = props.options[enabledIndex][props.fields.value];
|
|
97
|
+
if (value !== props.value) {
|
|
98
|
+
emit("change", value);
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
if (moving) {
|
|
102
|
+
transitionEndTrigger = trigger;
|
|
103
|
+
} else {
|
|
104
|
+
trigger();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
const isReadonly = () => props.readonly || !props.options.length;
|
|
108
|
+
const onClickOption = (index) => {
|
|
109
|
+
if (moving || isReadonly()) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
transitionEndTrigger = null;
|
|
113
|
+
currentDuration.value = DEFAULT_DURATION;
|
|
114
|
+
updateValueByIndex(index);
|
|
115
|
+
emit("clickOption", props.options[index]);
|
|
116
|
+
};
|
|
117
|
+
const momentum = (distance, duration) => {
|
|
118
|
+
const speed = Math.abs(distance / duration);
|
|
119
|
+
distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
|
|
120
|
+
setRangeOffset(distance);
|
|
121
|
+
currentDuration.value = +props.swipeDuration;
|
|
122
|
+
};
|
|
123
|
+
const stopMomentum = () => {
|
|
124
|
+
moving = false;
|
|
125
|
+
currentDuration.value = 0;
|
|
126
|
+
if (transitionEndTrigger) {
|
|
127
|
+
transitionEndTrigger();
|
|
128
|
+
transitionEndTrigger = null;
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
const onTouchStart = (event) => {
|
|
132
|
+
if (isReadonly()) {
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
touch.start(event);
|
|
136
|
+
if (moving && wrapper.value) {
|
|
137
|
+
const translateY = (0, import_utils2.getElementTranslateY)(wrapper.value);
|
|
138
|
+
setRangeOffset(Math.min(0, translateY - baseOffset()));
|
|
139
|
+
}
|
|
140
|
+
currentDuration.value = 0;
|
|
141
|
+
startOffset = currentOffset.value;
|
|
142
|
+
touchStartTime = Date.now();
|
|
143
|
+
momentumOffset = startOffset;
|
|
144
|
+
transitionEndTrigger = null;
|
|
145
|
+
};
|
|
146
|
+
const onTouchMove = (event) => {
|
|
147
|
+
if (isReadonly()) {
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
touch.move(event);
|
|
151
|
+
if (touch.isVertical()) {
|
|
152
|
+
moving = true;
|
|
153
|
+
(0, import_utils.preventDefault)(event, true);
|
|
154
|
+
}
|
|
155
|
+
setRangeOffset(startOffset + touch.deltaY.value);
|
|
156
|
+
const now = Date.now();
|
|
157
|
+
if (now - touchStartTime > MOMENTUM_TIME) {
|
|
158
|
+
touchStartTime = now;
|
|
159
|
+
momentumOffset = currentOffset.value;
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
const onTouchEnd = () => {
|
|
163
|
+
if (isReadonly()) {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
const distance = currentOffset.value - momentumOffset;
|
|
167
|
+
const duration = Date.now() - touchStartTime;
|
|
168
|
+
const startMomentum = duration < MOMENTUM_TIME && Math.abs(distance) > MOMENTUM_DISTANCE;
|
|
169
|
+
if (startMomentum) {
|
|
170
|
+
momentum(distance, duration);
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
currentDuration.value = DEFAULT_DURATION;
|
|
174
|
+
setTimeout(() => {
|
|
175
|
+
moving = false;
|
|
176
|
+
}, 0);
|
|
177
|
+
};
|
|
178
|
+
const transSearchedText = (text) => {
|
|
179
|
+
if (!text)
|
|
180
|
+
return text;
|
|
181
|
+
const regex = new RegExp(props.autoSearchVal, "gi");
|
|
182
|
+
const replaced = text.replace(regex, "<span style='color: var(--zt-radio-picker-search-radio-label-match-color);'>$&</span>");
|
|
183
|
+
return replaced;
|
|
184
|
+
};
|
|
185
|
+
const renderOptions = () => {
|
|
186
|
+
return props.options.map((option, index) => {
|
|
187
|
+
let text = option[props.fields.text];
|
|
188
|
+
const {
|
|
189
|
+
disabled
|
|
190
|
+
} = option;
|
|
191
|
+
const value = option[props.fields.value];
|
|
192
|
+
const isSearchMatch = text == null ? void 0 : text.includes(props.autoSearchVal);
|
|
193
|
+
let isSearchedTrans = false;
|
|
194
|
+
if (isSearchMatch && props.autoSearchVal) {
|
|
195
|
+
text = transSearchedText(text);
|
|
196
|
+
isSearchedTrans = true;
|
|
197
|
+
}
|
|
198
|
+
const data = {
|
|
199
|
+
tabindex: disabled ? -1 : 0,
|
|
200
|
+
class: [bem("item", {
|
|
201
|
+
"not-match": !isSearchMatch
|
|
202
|
+
}), option.className],
|
|
203
|
+
disabled,
|
|
204
|
+
onClick: () => {
|
|
205
|
+
if (!disabled) {
|
|
206
|
+
return onClickOption(index);
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
name: value
|
|
210
|
+
};
|
|
211
|
+
const childData = {
|
|
212
|
+
[props.allowHtml || isSearchedTrans ? "innerHTML" : "textContent"]: text
|
|
213
|
+
};
|
|
214
|
+
return (0, import_vue.createVNode)(import_Radio.default, data, {
|
|
215
|
+
default: () => [slots.option ? slots.option({
|
|
216
|
+
option,
|
|
217
|
+
searchValue: props.autoSearchVal
|
|
218
|
+
}) : (0, import_vue.createVNode)("div", childData, null)]
|
|
219
|
+
});
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
(0, import_use.useParent)(PICKER_KEY);
|
|
223
|
+
(0, import_use_expose.useExpose)({
|
|
224
|
+
stopMomentum
|
|
225
|
+
});
|
|
226
|
+
(0, import_use.useEventListener)("touchmove", onTouchMove, {
|
|
227
|
+
target: root
|
|
228
|
+
});
|
|
229
|
+
const renderSearchEmpty = () => {
|
|
230
|
+
var _a;
|
|
231
|
+
if (isSearchEmpty.value) {
|
|
232
|
+
if (slots.searchEmpty) {
|
|
233
|
+
return (_a = slots.searchEmpty) == null ? void 0 : _a.call(slots);
|
|
234
|
+
}
|
|
235
|
+
return (0, import_vue.createVNode)(import_Empty.default, {
|
|
236
|
+
"class": bem("search-empty"),
|
|
237
|
+
"image": "no-search-result"
|
|
238
|
+
}, {
|
|
239
|
+
description: () => {
|
|
240
|
+
return (0, import_vue.createVNode)("span", null, [(0, import_vue.createTextVNode)("\u6682\u65E0\u641C\u7D22\u7ED3\u679C")]);
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
return () => (0, import_vue.createVNode)("div", {
|
|
246
|
+
"ref": root,
|
|
247
|
+
"class": bem(),
|
|
248
|
+
"onTouchstartPassive": onTouchStart,
|
|
249
|
+
"onTouchend": onTouchEnd,
|
|
250
|
+
"onTouchcancel": onTouchEnd
|
|
251
|
+
}, [(0, import_vue.createVNode)("ul", {
|
|
252
|
+
"ref": wrapper,
|
|
253
|
+
"style": {
|
|
254
|
+
transform: `translate3d(0, ${currentOffset.value + baseOffset()}px, 0)`,
|
|
255
|
+
transitionDuration: `${currentDuration.value}ms`,
|
|
256
|
+
transitionProperty: currentDuration.value ? "all" : "none"
|
|
257
|
+
},
|
|
258
|
+
"class": bem("wrapper"),
|
|
259
|
+
"onTransitionend": stopMomentum
|
|
260
|
+
}, [(0, import_vue.createVNode)(import_RadioGroup.default, {
|
|
261
|
+
"modelValue": props.value
|
|
262
|
+
}, {
|
|
263
|
+
default: () => [renderOptions()]
|
|
264
|
+
})]), renderSearchEmpty()]);
|
|
265
|
+
}
|
|
266
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const pickerToolbarProps: {
|
|
2
|
+
cancelButtonText: StringConstructor;
|
|
3
|
+
confirmButtonText: StringConstructor;
|
|
4
|
+
};
|
|
5
|
+
export declare const pickerToolbarSlots: string[];
|
|
6
|
+
export type PickerToolbarPropKeys = Array<keyof typeof pickerToolbarProps>;
|
|
7
|
+
export declare const pickerToolbarPropKeys: PickerToolbarPropKeys;
|
|
8
|
+
declare const _default: import("vue").DefineComponent<{
|
|
9
|
+
cancelButtonText: StringConstructor;
|
|
10
|
+
confirmButtonText: StringConstructor;
|
|
11
|
+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
12
|
+
cancelButtonText: StringConstructor;
|
|
13
|
+
confirmButtonText: StringConstructor;
|
|
14
|
+
}>> & {
|
|
15
|
+
onCancel?: ((...args: any[]) => any) | undefined;
|
|
16
|
+
onConfirm?: ((...args: any[]) => any) | undefined;
|
|
17
|
+
}, {}, {}>;
|
|
18
|
+
export default _default;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name2 in all)
|
|
7
|
+
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var stdin_exports = {};
|
|
19
|
+
__export(stdin_exports, {
|
|
20
|
+
default: () => stdin_default,
|
|
21
|
+
pickerToolbarPropKeys: () => pickerToolbarPropKeys,
|
|
22
|
+
pickerToolbarProps: () => pickerToolbarProps,
|
|
23
|
+
pickerToolbarSlots: () => pickerToolbarSlots
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
26
|
+
var import_vue = require("vue");
|
|
27
|
+
var import_vue2 = require("vue");
|
|
28
|
+
var import_button = require("../button");
|
|
29
|
+
var import_utils = require("../utils");
|
|
30
|
+
var import_utils2 = require("./utils");
|
|
31
|
+
const [name] = (0, import_utils.createNamespace)("picker-toolbar");
|
|
32
|
+
const pickerToolbarProps = {
|
|
33
|
+
cancelButtonText: String,
|
|
34
|
+
confirmButtonText: String
|
|
35
|
+
};
|
|
36
|
+
const pickerToolbarSlots = ["cancel", "confirm", "title", "toolbar"];
|
|
37
|
+
const pickerToolbarPropKeys = Object.keys(pickerToolbarProps);
|
|
38
|
+
var stdin_default = (0, import_vue2.defineComponent)({
|
|
39
|
+
name,
|
|
40
|
+
props: pickerToolbarProps,
|
|
41
|
+
emits: ["confirm", "cancel"],
|
|
42
|
+
setup(props, {
|
|
43
|
+
emit,
|
|
44
|
+
slots
|
|
45
|
+
}) {
|
|
46
|
+
const onCancel = () => emit("cancel");
|
|
47
|
+
const onConfirm = () => emit("confirm");
|
|
48
|
+
const renderCancel = () => {
|
|
49
|
+
const text = props.cancelButtonText || (0, import_utils2.t)("cancel");
|
|
50
|
+
return (0, import_vue.createVNode)(import_button.Button, {
|
|
51
|
+
"type": "default",
|
|
52
|
+
"hairline": true,
|
|
53
|
+
"class": (0, import_utils2.bem)("cancel"),
|
|
54
|
+
"onClick": onCancel
|
|
55
|
+
}, {
|
|
56
|
+
default: () => [slots.cancel ? slots.cancel() : text]
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
const renderConfirm = () => {
|
|
60
|
+
const text = props.confirmButtonText || (0, import_utils2.t)("confirm");
|
|
61
|
+
return (0, import_vue.createVNode)(import_button.Button, {
|
|
62
|
+
"type": "primary",
|
|
63
|
+
"class": [(0, import_utils2.bem)("confirm"), import_utils.HAPTICS_FEEDBACK],
|
|
64
|
+
"onClick": onConfirm
|
|
65
|
+
}, {
|
|
66
|
+
default: () => [slots.confirm ? slots.confirm() : text]
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
return () => (0, import_vue.createVNode)("div", {
|
|
70
|
+
"class": (0, import_utils2.bem)("toolbar")
|
|
71
|
+
}, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderConfirm()]]);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--zt-radio-picker-cancel-margin: 8px 4px 8px 16px;--zt-radio-picker-confirm-margin: 8px 16px 8px 4px;--zt-radio-picker-title-height: 44px;--zt-radio-picker-search-padding-top-bottom: 12px;--zt-radio-picker-search-radio-label-match-color: var(--zt-blue);--zt-radio-picker-title-border-radius: 16px 16px 0 0;--zt-radio-picker-frame-background-color: var(--zt-gray-a04);--zt-radio-picker-cancel-background-color: var(--zt-white);--zt-radio-picker-title-text-color: var(--zt-gray-a4);--zt-radio-picker-background: var(--zt-background-2);--zt-radio-picker-toolbar-height: 60px;--zt-radio-picker-title-font-size: var(--zt-font-size-md);--zt-radio-picker-title-background: var(--zt-white);--zt-radio-picker-title-line-height: var(--zt-line-height-md);--zt-radio-picker-action-padding: 0 var(--zt-padding-md);--zt-radio-picker-action-font-size: var(--zt-font-size-lg);--zt-radio-picker-confirm-action-color: var(--zt-white);--zt-radio-picker-cancel-action-color: var(--zt-text-color);--zt-radio-picker-option-font-size: var(--zt-font-size-lg);--zt-radio-picker-option-radio-label-margin: 8px;--zt-radio-picker-option-padding: 12px var(--zt-padding-md);--zt-radio-picker-option-text-color: var(--zt-text-color);--zt-radio-picker-option-disabled-opacity: .3;--zt-radio-picker-loading-icon-color: var(--zt-primary-color);--zt-radio-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-radio-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--zt-radio-picker-unit-font-size: var(--zt-font-size-md)}.zt-theme-dark{--zt-radio-picker-selected-background: rgba(255, 255, 255, .08);--zt-radio-picker-title-background: var(--zt-background-2);--zt-radio-picker-title-text-color: var(--zt-gray-default);--zt-radio-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.zt-radio-picker{position:relative;background:var(--zt-radio-picker-background);-webkit-user-select:none;user-select:none}.zt-radio-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--zt-radio-picker-toolbar-height)}.zt-radio-picker__cancel,.zt-radio-picker__confirm{width:50%}.zt-radio-picker__cancel{background:var(--zt-button-default-background);margin:var(--zt-radio-picker-cancel-margin)}.zt-radio-picker__confirm{margin:var(--zt-radio-picker-confirm-margin)}.zt-radio-picker__title{display:flex;justify-content:center;align-items:center;width:100%;height:var(--zt-radio-picker-title-height);border-radius:var(--zt-radio-picker-title-border-radius);font-size:var(--zt-radio-picker-title-font-size);background:var(--zt-radio-picker-title-background);color:var(--zt-radio-picker-title-text-color)}.zt-radio-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.zt-radio-picker__search{padding-top:var(--zt-radio-picker-search-padding-top-bottom);padding-bottom:var(--zt-radio-picker-search-padding-top-bottom)}.zt-radio-picker__search .zt-search{padding-top:0;padding-bottom:0}.zt-radio-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-radio-picker-loading-icon-color);background:var(--zt-radio-picker-loading-mask-color)}.zt-radio-picker__frame{position:absolute;top:50%;z-index:2;transform:translateY(-50%);pointer-events:none;width:100%;background:var(--zt-radio-picker-frame-background-color)}.zt-radio-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--zt-radio-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-radio-picker-column{position:relative;flex:1;overflow:hidden;font-size:var(--zt-radio-picker-option-font-size);background:var(--zt-radio-picker-background)}.zt-radio-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-radio-picker-column__item{display:flex;align-items:center;justify-content:flex-start;color:var(--zt-radio-picker-option-text-color)}.zt-radio-picker-column__item--not-match{display:none}.zt-radio-picker-column__item.zt-radio{padding:var(--zt-radio-picker-option-padding)}.zt-radio-picker-column__item.zt-radio:after{left:calc(var(--zt-radio-size) + var(--zt-radio-label-margin) + var(--zt-padding-md))}.zt-radio-picker-column__item.zt-radio .zt-radio__label{margin-left:var(--zt-radio-picker-option-radio-label-margin)}.zt-radio-picker-column__search-empty .zt-empty__description{padding:unset}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { RadioPickerProps } from './RadioPicker';
|
|
2
|
+
export declare const RadioPicker: import("../utils").WithInstall<import("vue").DefineComponent<{
|
|
3
|
+
loading: BooleanConstructor;
|
|
4
|
+
readonly: BooleanConstructor;
|
|
5
|
+
allowHtml: BooleanConstructor;
|
|
6
|
+
showToolbar: {
|
|
7
|
+
type: BooleanConstructor;
|
|
8
|
+
default: true;
|
|
9
|
+
};
|
|
10
|
+
showTitle: {
|
|
11
|
+
type: BooleanConstructor;
|
|
12
|
+
default: true;
|
|
13
|
+
};
|
|
14
|
+
swipeDuration: {
|
|
15
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
16
|
+
default: number;
|
|
17
|
+
};
|
|
18
|
+
title: {
|
|
19
|
+
type: import("vue").PropType<string>;
|
|
20
|
+
default: string;
|
|
21
|
+
};
|
|
22
|
+
} & {
|
|
23
|
+
cancelButtonText: StringConstructor;
|
|
24
|
+
confirmButtonText: StringConstructor;
|
|
25
|
+
} & {
|
|
26
|
+
columns: {
|
|
27
|
+
type: import("vue").PropType<(import("./types").PickerColumn | import("./types").RadioPickerOption)[]>;
|
|
28
|
+
default: () => (import("./types").PickerColumn | import("./types").RadioPickerOption)[];
|
|
29
|
+
};
|
|
30
|
+
modelValue: {
|
|
31
|
+
type: import("vue").PropType<import("../utils").Numeric[]>;
|
|
32
|
+
default: () => import("../utils").Numeric[];
|
|
33
|
+
};
|
|
34
|
+
columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
|
|
35
|
+
wrapHeight: {
|
|
36
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
37
|
+
default: string;
|
|
38
|
+
};
|
|
39
|
+
showPicker: BooleanConstructor;
|
|
40
|
+
popup: {
|
|
41
|
+
type: BooleanConstructor;
|
|
42
|
+
default: true;
|
|
43
|
+
};
|
|
44
|
+
searchable: BooleanConstructor;
|
|
45
|
+
autoSearch: {
|
|
46
|
+
type: BooleanConstructor;
|
|
47
|
+
default: true;
|
|
48
|
+
};
|
|
49
|
+
searchPlaceholder: {
|
|
50
|
+
type: import("vue").PropType<string>;
|
|
51
|
+
default: string;
|
|
52
|
+
};
|
|
53
|
+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
54
|
+
loading: BooleanConstructor;
|
|
55
|
+
readonly: BooleanConstructor;
|
|
56
|
+
allowHtml: BooleanConstructor;
|
|
57
|
+
showToolbar: {
|
|
58
|
+
type: BooleanConstructor;
|
|
59
|
+
default: true;
|
|
60
|
+
};
|
|
61
|
+
showTitle: {
|
|
62
|
+
type: BooleanConstructor;
|
|
63
|
+
default: true;
|
|
64
|
+
};
|
|
65
|
+
swipeDuration: {
|
|
66
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
67
|
+
default: number;
|
|
68
|
+
};
|
|
69
|
+
title: {
|
|
70
|
+
type: import("vue").PropType<string>;
|
|
71
|
+
default: string;
|
|
72
|
+
};
|
|
73
|
+
} & {
|
|
74
|
+
cancelButtonText: StringConstructor;
|
|
75
|
+
confirmButtonText: StringConstructor;
|
|
76
|
+
} & {
|
|
77
|
+
columns: {
|
|
78
|
+
type: import("vue").PropType<(import("./types").PickerColumn | import("./types").RadioPickerOption)[]>;
|
|
79
|
+
default: () => (import("./types").PickerColumn | import("./types").RadioPickerOption)[];
|
|
80
|
+
};
|
|
81
|
+
modelValue: {
|
|
82
|
+
type: import("vue").PropType<import("../utils").Numeric[]>;
|
|
83
|
+
default: () => import("../utils").Numeric[];
|
|
84
|
+
};
|
|
85
|
+
columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
|
|
86
|
+
wrapHeight: {
|
|
87
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
88
|
+
default: string;
|
|
89
|
+
};
|
|
90
|
+
showPicker: BooleanConstructor;
|
|
91
|
+
popup: {
|
|
92
|
+
type: BooleanConstructor;
|
|
93
|
+
default: true;
|
|
94
|
+
};
|
|
95
|
+
searchable: BooleanConstructor;
|
|
96
|
+
autoSearch: {
|
|
97
|
+
type: BooleanConstructor;
|
|
98
|
+
default: true;
|
|
99
|
+
};
|
|
100
|
+
searchPlaceholder: {
|
|
101
|
+
type: import("vue").PropType<string>;
|
|
102
|
+
default: string;
|
|
103
|
+
};
|
|
104
|
+
}>> & {
|
|
105
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
106
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
107
|
+
onCancel?: ((...args: any[]) => any) | undefined;
|
|
108
|
+
onConfirm?: ((...args: any[]) => any) | undefined;
|
|
109
|
+
onClickOption?: ((...args: any[]) => any) | undefined;
|
|
110
|
+
"onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
|
|
111
|
+
}, {
|
|
112
|
+
title: string;
|
|
113
|
+
modelValue: import("../utils").Numeric[];
|
|
114
|
+
readonly: boolean;
|
|
115
|
+
popup: boolean;
|
|
116
|
+
loading: boolean;
|
|
117
|
+
showTitle: boolean;
|
|
118
|
+
columns: (import("./types").PickerColumn | import("./types").RadioPickerOption)[];
|
|
119
|
+
allowHtml: boolean;
|
|
120
|
+
showToolbar: boolean;
|
|
121
|
+
swipeDuration: string | number;
|
|
122
|
+
showPicker: boolean;
|
|
123
|
+
wrapHeight: string | number;
|
|
124
|
+
searchable: boolean;
|
|
125
|
+
autoSearch: boolean;
|
|
126
|
+
searchPlaceholder: string;
|
|
127
|
+
}, {}>>;
|
|
128
|
+
export default RadioPicker;
|
|
129
|
+
export { radioPickerProps } from './RadioPicker';
|
|
130
|
+
export type { PickerCancelEventParams as RadioPickerCancelEventParams, PickerChangeEventParams as RadioPickerChangeEventParams, PickerColumn as RadioPickerColumn, PickerConfirmEventParams as RadioPickerConfirmEventParams, PickerFieldNames as RadioPickerFieldNames, RadioPickerInstance, RadioPickerOption, PickerToolbarPosition as RadioPickerToolbarPosition, } from './types';
|
|
131
|
+
export type { RadioPickerProps };
|
|
132
|
+
declare module 'vue' {
|
|
133
|
+
interface GlobalComponents {
|
|
134
|
+
ZtRadioPicker: typeof RadioPicker;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
var stdin_exports = {};
|
|
29
|
+
__export(stdin_exports, {
|
|
30
|
+
RadioPicker: () => RadioPicker,
|
|
31
|
+
default: () => stdin_default,
|
|
32
|
+
radioPickerProps: () => import_RadioPicker2.radioPickerProps
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
35
|
+
var import_utils = require("../utils");
|
|
36
|
+
var import_RadioPicker = __toESM(require("./RadioPicker"));
|
|
37
|
+
var import_RadioPicker2 = require("./RadioPicker");
|
|
38
|
+
const RadioPicker = (0, import_utils.withInstall)(import_RadioPicker.default);
|
|
39
|
+
var stdin_default = RadioPicker;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
require("../../style/base.css");
|
|
2
|
+
require("../../badge/index.css");
|
|
3
|
+
require("../../icon/index.css");
|
|
4
|
+
require("../../cell/index.css");
|
|
5
|
+
require("../../field/index.css");
|
|
6
|
+
require("../../search/index.css");
|
|
7
|
+
require("../../overlay/index.css");
|
|
8
|
+
require("../../popup/index.css");
|
|
9
|
+
require("../../loading/index.css");
|
|
10
|
+
require("../../button/index.css");
|
|
11
|
+
require("../../divider/index.css");
|
|
12
|
+
require("../../checkbox/index.css");
|
|
13
|
+
require("../../empty/index.css");
|
|
14
|
+
require("../../radio-group/index.css");
|
|
15
|
+
require("../../radio/index.css");
|
|
16
|
+
require("../index.css");
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ComponentPublicInstance } from 'vue';
|
|
2
|
+
import type { Numeric } from '../utils';
|
|
3
|
+
import type { RadioPickerProps } from './RadioPicker';
|
|
4
|
+
export type PickerToolbarPosition = 'top' | 'bottom';
|
|
5
|
+
export type PickerFieldNames = {
|
|
6
|
+
text?: string;
|
|
7
|
+
value?: string;
|
|
8
|
+
children?: string;
|
|
9
|
+
};
|
|
10
|
+
export type RadioPickerOption = {
|
|
11
|
+
text?: Numeric;
|
|
12
|
+
value?: Numeric;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
children?: PickerColumn;
|
|
15
|
+
className?: unknown;
|
|
16
|
+
[key: PropertyKey]: any;
|
|
17
|
+
};
|
|
18
|
+
export type PickerColumn = RadioPickerOption[];
|
|
19
|
+
export type PickerExpose = {
|
|
20
|
+
confirm: () => void;
|
|
21
|
+
getSelectedOptions: () => Array<RadioPickerOption | undefined>;
|
|
22
|
+
};
|
|
23
|
+
export type PickerColumnProvide = {
|
|
24
|
+
state: {
|
|
25
|
+
index: number;
|
|
26
|
+
offset: number;
|
|
27
|
+
duration: number;
|
|
28
|
+
options: RadioPickerOption[];
|
|
29
|
+
};
|
|
30
|
+
setIndex: (index: number, emitChange?: boolean | undefined) => void;
|
|
31
|
+
getValue: () => RadioPickerOption;
|
|
32
|
+
setValue: (value: string) => void;
|
|
33
|
+
setOptions: (options: RadioPickerOption[]) => void;
|
|
34
|
+
stopMomentum: () => void;
|
|
35
|
+
};
|
|
36
|
+
export type RadioPickerInstance = ComponentPublicInstance<RadioPickerProps, PickerExpose>;
|
|
37
|
+
export type PickerConfirmEventParams = {
|
|
38
|
+
selectedValues: Numeric[];
|
|
39
|
+
selectedOptions: Array<RadioPickerOption | undefined>;
|
|
40
|
+
};
|
|
41
|
+
export type PickerCancelEventParams = PickerConfirmEventParams;
|
|
42
|
+
export type PickerChangeEventParams = PickerConfirmEventParams & {
|
|
43
|
+
columnIndex: number;
|
|
44
|
+
};
|