@hbdlzy/ui-core 0.1.0 → 0.1.2
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 +61 -3
- package/components.manifest.json +239 -24
- package/dist/index.cjs +1 -1
- package/dist/index.js +3005 -13
- package/dist/style.css +1 -0
- package/package.json +5 -3
- package/src/components/BaseCard/BaseCard.types.ts +38 -0
- package/src/components/BaseCard/BaseCard.vue +250 -0
- package/src/components/BaseCard/README.md +164 -0
- package/src/components/BaseCard/index.ts +5 -0
- package/src/components/BaseEChart/BaseEChart.types.ts +35 -0
- package/src/components/BaseEChart/BaseEChart.vue +327 -0
- package/src/components/BaseEChart/README.md +136 -0
- package/src/components/BaseEChart/index.ts +5 -0
- package/src/components/BaseExportButton/BaseExportButton.vue +1 -1
- package/src/components/BaseExportButton/README.md +104 -8
- package/src/components/BaseTable/BaseTable.types.ts +174 -0
- package/src/components/BaseTable/BaseTable.vue +809 -0
- package/src/components/BaseTable/README.md +398 -0
- package/src/components/BaseTable/index.ts +25 -0
- package/src/components/OutlinedCascader/OutlinedCascader.types.ts +28 -0
- package/src/components/OutlinedCascader/OutlinedCascader.vue +250 -0
- package/src/components/OutlinedCascader/README.md +91 -0
- package/src/components/OutlinedCascader/index.ts +10 -0
- package/src/components/OutlinedDatePicker/OutlinedDatePicker.types.ts +40 -0
- package/src/components/OutlinedDatePicker/OutlinedDatePicker.vue +365 -0
- package/src/components/OutlinedDatePicker/README.md +137 -0
- package/src/components/OutlinedDatePicker/index.ts +11 -0
- package/src/components/OutlinedDateTimePicker/OutlinedDateTimePicker.types.ts +34 -0
- package/src/components/OutlinedDateTimePicker/OutlinedDateTimePicker.vue +421 -0
- package/src/components/OutlinedDateTimePicker/README.md +88 -0
- package/src/components/OutlinedDateTimePicker/index.ts +11 -0
- package/src/components/OutlinedInput/OutlinedInput.types.ts +32 -0
- package/src/components/OutlinedInput/OutlinedInput.vue +307 -0
- package/src/components/OutlinedInput/README.md +154 -0
- package/src/components/OutlinedInput/index.ts +10 -0
- package/src/components/OutlinedSelect/OutlinedSelect.types.ts +48 -0
- package/src/components/OutlinedSelect/OutlinedSelect.vue +359 -0
- package/src/components/OutlinedSelect/README.md +166 -0
- package/src/components/OutlinedSelect/index.ts +12 -0
- package/src/components/OutlinedTimePicker/OutlinedTimePicker.types.ts +36 -0
- package/src/components/OutlinedTimePicker/OutlinedTimePicker.vue +303 -0
- package/src/components/OutlinedTimePicker/README.md +93 -0
- package/src/components/OutlinedTimePicker/index.ts +10 -0
- package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.types.ts +56 -0
- package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.vue +354 -0
- package/src/components/OutlinedTreeSelect/README.md +107 -0
- package/src/components/OutlinedTreeSelect/index.ts +12 -0
- package/src/echarts/index.ts +12 -0
- package/src/excel/exportExcel.ts +36 -10
- package/src/index.ts +29 -0
package/dist/index.js
CHANGED
|
@@ -1,9 +1,1122 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as echarts from "echarts";
|
|
2
|
+
export { echarts };
|
|
3
|
+
import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, toDisplayString, ref, reactive, watch, onMounted, resolveComponent, resolveDirective, createVNode, withDirectives, createBlock, withCtx, Fragment, renderList, createSlots, createTextVNode, mergeProps, shallowRef, nextTick, onUnmounted, useAttrs, normalizeClass, normalizeProps, guardReactiveProps } from "vue";
|
|
2
4
|
import { ElMessage } from "element-plus";
|
|
3
|
-
import
|
|
5
|
+
import ExcelJS from "exceljs";
|
|
4
6
|
import { saveAs } from "file-saver";
|
|
7
|
+
var BaseCard_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
8
|
+
var _export_sfc = (sfc, props) => {
|
|
9
|
+
const target = sfc.__vccOpts || sfc;
|
|
10
|
+
for (const [key, val] of props) {
|
|
11
|
+
target[key] = val;
|
|
12
|
+
}
|
|
13
|
+
return target;
|
|
14
|
+
};
|
|
15
|
+
const _hoisted_1$3 = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "base-card__header"
|
|
18
|
+
};
|
|
19
|
+
const _hoisted_2$1 = { class: "base-card__header-left" };
|
|
20
|
+
const _hoisted_3$1 = {
|
|
21
|
+
key: 0,
|
|
22
|
+
class: "base-card__title-wrap"
|
|
23
|
+
};
|
|
24
|
+
const _hoisted_4$1 = {
|
|
25
|
+
key: 0,
|
|
26
|
+
class: "base-card__title-marker"
|
|
27
|
+
};
|
|
28
|
+
const _hoisted_5$1 = {
|
|
29
|
+
key: 2,
|
|
30
|
+
class: "base-card__title"
|
|
31
|
+
};
|
|
32
|
+
const _hoisted_6$1 = {
|
|
33
|
+
key: 0,
|
|
34
|
+
class: "base-card__header-right"
|
|
35
|
+
};
|
|
36
|
+
const _hoisted_7$1 = {
|
|
37
|
+
key: 0,
|
|
38
|
+
class: "base-card__meta"
|
|
39
|
+
};
|
|
40
|
+
const _hoisted_8$1 = ["disabled"];
|
|
41
|
+
const _hoisted_9$1 = { class: "base-card__body" };
|
|
42
|
+
const _hoisted_10$1 = {
|
|
43
|
+
key: 0,
|
|
44
|
+
class: "base-card__tip"
|
|
45
|
+
};
|
|
46
|
+
const _hoisted_11 = { class: "base-card__content" };
|
|
47
|
+
const _sfc_main$a = defineComponent({
|
|
48
|
+
...{
|
|
49
|
+
name: "BaseCard"
|
|
50
|
+
},
|
|
51
|
+
__name: "BaseCard",
|
|
52
|
+
props: {
|
|
53
|
+
title: { default: "" },
|
|
54
|
+
metaText: { default: "" },
|
|
55
|
+
showHeader: { type: Boolean, default: true },
|
|
56
|
+
showRight: { type: Boolean, default: true },
|
|
57
|
+
showTitleMarker: { type: Boolean, default: true },
|
|
58
|
+
showExport: { type: Boolean, default: false },
|
|
59
|
+
exportText: { default: "\u5BFC\u51FA" },
|
|
60
|
+
exportDisabled: { type: Boolean, default: false },
|
|
61
|
+
exportPayload: {},
|
|
62
|
+
padding: { default: 20 },
|
|
63
|
+
radius: { default: 8 },
|
|
64
|
+
borderColor: { default: "var(--border-color)" },
|
|
65
|
+
backgroundColor: { default: "var(--border-bg-color)" },
|
|
66
|
+
shadowColor: { default: "var(--border-projection)" },
|
|
67
|
+
headerGap: { default: 16 },
|
|
68
|
+
headerMarginBottom: { default: 20 },
|
|
69
|
+
leftGap: { default: 16 },
|
|
70
|
+
rightGap: { default: 16 },
|
|
71
|
+
titleColor: { default: "var(--el-text-color-primary)" },
|
|
72
|
+
titleSize: { default: 18 },
|
|
73
|
+
titleWeight: { default: 500 },
|
|
74
|
+
markerColor: { default: "var(--el-color-primary)" },
|
|
75
|
+
markerWidth: { default: 4 },
|
|
76
|
+
markerHeight: { default: 24 },
|
|
77
|
+
markerRadius: { default: "0 4px 4px 0" },
|
|
78
|
+
markerGap: { default: 10 },
|
|
79
|
+
metaColor: { default: "#808080" },
|
|
80
|
+
metaSize: { default: 16 },
|
|
81
|
+
exportColor: { default: "var(--el-color-primary)" }
|
|
82
|
+
},
|
|
83
|
+
emits: ["export"],
|
|
84
|
+
setup(__props, { emit: __emit }) {
|
|
85
|
+
const props = __props;
|
|
86
|
+
const emit = __emit;
|
|
87
|
+
const slots = useSlots();
|
|
88
|
+
const hasTitleBlock = computed(() => Boolean(props.title) || Boolean(slots["title-label"]));
|
|
89
|
+
const hasTitleExtra = computed(() => Boolean(slots.title));
|
|
90
|
+
const hasRightExtra = computed(() => Boolean(slots["header-right"]));
|
|
91
|
+
const hasRightSection = computed(
|
|
92
|
+
() => props.showRight && (hasRightExtra.value || Boolean(props.metaText) || props.showExport)
|
|
93
|
+
);
|
|
94
|
+
const shouldRenderHeader = computed(
|
|
95
|
+
() => props.showHeader && (hasTitleBlock.value || hasTitleExtra.value || hasRightSection.value)
|
|
96
|
+
);
|
|
97
|
+
const defaultExportPayload = computed(() => ({
|
|
98
|
+
title: props.title || void 0,
|
|
99
|
+
metaText: props.metaText || void 0
|
|
100
|
+
}));
|
|
101
|
+
const cardStyles = computed(() => ({
|
|
102
|
+
"--base-card-padding": toCssValue(props.padding),
|
|
103
|
+
"--base-card-radius": toCssValue(props.radius),
|
|
104
|
+
"--base-card-border-color": props.borderColor,
|
|
105
|
+
"--base-card-background-color": props.backgroundColor,
|
|
106
|
+
"--base-card-shadow-color": props.shadowColor,
|
|
107
|
+
"--base-card-header-gap": toCssValue(props.headerGap),
|
|
108
|
+
"--base-card-header-margin-bottom": toCssValue(props.headerMarginBottom),
|
|
109
|
+
"--base-card-left-gap": toCssValue(props.leftGap),
|
|
110
|
+
"--base-card-right-gap": toCssValue(props.rightGap),
|
|
111
|
+
"--base-card-title-color": props.titleColor,
|
|
112
|
+
"--base-card-title-size": toCssValue(props.titleSize),
|
|
113
|
+
"--base-card-title-weight": toTextValue(props.titleWeight),
|
|
114
|
+
"--base-card-marker-color": props.markerColor,
|
|
115
|
+
"--base-card-marker-width": toCssValue(props.markerWidth),
|
|
116
|
+
"--base-card-marker-height": toCssValue(props.markerHeight),
|
|
117
|
+
"--base-card-marker-radius": toCssValue(props.markerRadius),
|
|
118
|
+
"--base-card-marker-gap": toCssValue(props.markerGap),
|
|
119
|
+
"--base-card-meta-color": props.metaColor,
|
|
120
|
+
"--base-card-meta-size": toCssValue(props.metaSize),
|
|
121
|
+
"--base-card-export-color": props.exportColor
|
|
122
|
+
}));
|
|
123
|
+
const handleExport = () => {
|
|
124
|
+
emit("export", props.exportPayload === void 0 ? defaultExportPayload.value : props.exportPayload);
|
|
125
|
+
};
|
|
126
|
+
function toCssValue(value, unit = "px") {
|
|
127
|
+
if (value === void 0 || value === null || value === "") {
|
|
128
|
+
return void 0;
|
|
129
|
+
}
|
|
130
|
+
return typeof value === "number" ? `${value}${unit}` : value;
|
|
131
|
+
}
|
|
132
|
+
function toTextValue(value) {
|
|
133
|
+
if (value === void 0 || value === null || value === "") {
|
|
134
|
+
return void 0;
|
|
135
|
+
}
|
|
136
|
+
return String(value);
|
|
137
|
+
}
|
|
138
|
+
return (_ctx, _cache) => {
|
|
139
|
+
return openBlock(), createElementBlock("div", {
|
|
140
|
+
class: "base-card",
|
|
141
|
+
style: normalizeStyle(cardStyles.value)
|
|
142
|
+
}, [
|
|
143
|
+
shouldRenderHeader.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
|
|
144
|
+
createElementVNode("div", _hoisted_2$1, [
|
|
145
|
+
hasTitleBlock.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
|
|
146
|
+
__props.showTitleMarker ? (openBlock(), createElementBlock("span", _hoisted_4$1)) : createCommentVNode("", true),
|
|
147
|
+
_ctx.$slots["title-label"] ? renderSlot(_ctx.$slots, "title-label", { key: 1 }, void 0, true) : (openBlock(), createElementBlock("h4", _hoisted_5$1, toDisplayString(__props.title), 1))
|
|
148
|
+
])) : createCommentVNode("", true),
|
|
149
|
+
renderSlot(_ctx.$slots, "title", {}, void 0, true)
|
|
150
|
+
]),
|
|
151
|
+
hasRightSection.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
|
|
152
|
+
renderSlot(_ctx.$slots, "header-right", {}, void 0, true),
|
|
153
|
+
__props.metaText ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(__props.metaText), 1)) : createCommentVNode("", true),
|
|
154
|
+
__props.showExport ? (openBlock(), createElementBlock("button", {
|
|
155
|
+
key: 1,
|
|
156
|
+
class: "base-card__export",
|
|
157
|
+
type: "button",
|
|
158
|
+
disabled: __props.exportDisabled,
|
|
159
|
+
onClick: handleExport
|
|
160
|
+
}, toDisplayString(__props.exportText), 9, _hoisted_8$1)) : createCommentVNode("", true)
|
|
161
|
+
])) : createCommentVNode("", true)
|
|
162
|
+
])) : createCommentVNode("", true),
|
|
163
|
+
createElementVNode("div", _hoisted_9$1, [
|
|
164
|
+
_ctx.$slots.tip ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
|
|
165
|
+
renderSlot(_ctx.$slots, "tip", {}, void 0, true)
|
|
166
|
+
])) : createCommentVNode("", true),
|
|
167
|
+
createElementVNode("div", _hoisted_11, [
|
|
168
|
+
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
169
|
+
])
|
|
170
|
+
])
|
|
171
|
+
], 4);
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
var BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-6bfddf1c"]]);
|
|
176
|
+
var BaseTable_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
177
|
+
const _hoisted_1$2 = { class: "base-table" };
|
|
178
|
+
const _hoisted_2 = {
|
|
179
|
+
key: 0,
|
|
180
|
+
class: "base-table__toolbar"
|
|
181
|
+
};
|
|
182
|
+
const _hoisted_3 = { class: "base-table__toolbar-left" };
|
|
183
|
+
const _hoisted_4 = {
|
|
184
|
+
key: 0,
|
|
185
|
+
class: "base-table__toolbar-right"
|
|
186
|
+
};
|
|
187
|
+
const _hoisted_5 = {
|
|
188
|
+
key: 0,
|
|
189
|
+
class: "base-table__actions"
|
|
190
|
+
};
|
|
191
|
+
const _hoisted_6 = {
|
|
192
|
+
key: 2,
|
|
193
|
+
class: "base-table__tags"
|
|
194
|
+
};
|
|
195
|
+
const _hoisted_7 = { key: 1 };
|
|
196
|
+
const _hoisted_8 = ["innerHTML"];
|
|
197
|
+
const _hoisted_9 = ["onClick"];
|
|
198
|
+
const _hoisted_10 = {
|
|
199
|
+
key: 6,
|
|
200
|
+
class: "base-table__text"
|
|
201
|
+
};
|
|
202
|
+
const _sfc_main$9 = defineComponent({
|
|
203
|
+
...{
|
|
204
|
+
name: "BaseTable"
|
|
205
|
+
},
|
|
206
|
+
__name: "BaseTable",
|
|
207
|
+
props: {
|
|
208
|
+
columns: {},
|
|
209
|
+
data: { default: () => [] },
|
|
210
|
+
request: {},
|
|
211
|
+
requestParams: { default: () => ({}) },
|
|
212
|
+
resultAdapter: {},
|
|
213
|
+
autoLoad: { type: Boolean, default: true },
|
|
214
|
+
reloadOnParamsChange: { type: Boolean, default: true },
|
|
215
|
+
reloadOnSortChange: { type: Boolean, default: true },
|
|
216
|
+
rowKey: { default: "id" },
|
|
217
|
+
height: { default: "100%" },
|
|
218
|
+
border: { type: Boolean, default: false },
|
|
219
|
+
stripe: { type: Boolean, default: false },
|
|
220
|
+
showToolbar: { type: Boolean, default: true },
|
|
221
|
+
showPagination: { type: Boolean, default: true },
|
|
222
|
+
hasSelection: { type: Boolean, default: false },
|
|
223
|
+
hasIndex: { type: Boolean, default: false },
|
|
224
|
+
indexLabel: { default: "\u5E8F\u53F7" },
|
|
225
|
+
indexWidth: { default: 60 },
|
|
226
|
+
selectionWidth: { default: 50 },
|
|
227
|
+
rowSelectable: {},
|
|
228
|
+
pagination: { default: () => ({}) },
|
|
229
|
+
currentPageKey: { default: "pageNum" },
|
|
230
|
+
pageSizeKey: { default: "pageSize" },
|
|
231
|
+
defaultSort: { default: () => ({
|
|
232
|
+
prop: void 0,
|
|
233
|
+
order: null
|
|
234
|
+
}) },
|
|
235
|
+
sortFieldKey: { default: "sortField" },
|
|
236
|
+
sortOrderKey: { default: "sortOrder" },
|
|
237
|
+
sortOrderMap: { default: () => ({
|
|
238
|
+
ascending: "asc",
|
|
239
|
+
descending: "desc"
|
|
240
|
+
}) },
|
|
241
|
+
sortMapper: {},
|
|
242
|
+
emptyText: { default: "\u6682\u65E0\u6570\u636E" },
|
|
243
|
+
loadingText: { default: "\u52A0\u8F7D\u4E2D..." }
|
|
244
|
+
},
|
|
245
|
+
emits: ["selection-change", "sort-change", "row-action", "cell-click", "cell-input", "page-change", "size-change", "update:pagination", "loaded", "request-error"],
|
|
246
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
247
|
+
var _a, _b;
|
|
248
|
+
const props = __props;
|
|
249
|
+
const emit = __emit;
|
|
250
|
+
const slots = useSlots();
|
|
251
|
+
const tableRef = ref();
|
|
252
|
+
const loading = ref(false);
|
|
253
|
+
const rows = ref(normalizeRows(props.data));
|
|
254
|
+
const selectionRows = ref([]);
|
|
255
|
+
const sortState = reactive({
|
|
256
|
+
prop: (_a = props.defaultSort) == null ? void 0 : _a.prop,
|
|
257
|
+
order: ((_b = props.defaultSort) == null ? void 0 : _b.order) || null
|
|
258
|
+
});
|
|
259
|
+
const paginationState = reactive({
|
|
260
|
+
currentPage: 1,
|
|
261
|
+
pageSize: 20,
|
|
262
|
+
total: 0,
|
|
263
|
+
pageSizes: [10, 20, 50, 100]
|
|
264
|
+
});
|
|
265
|
+
syncPagination(props.pagination);
|
|
266
|
+
const normalizedHeight = computed(() => toCssValue(props.height));
|
|
267
|
+
const shouldRenderToolbar = computed(() => props.showToolbar && (Boolean(slots.toolbar) || props.showPagination));
|
|
268
|
+
const normalizedDefaultSort = computed(() => {
|
|
269
|
+
if (!sortState.prop || !sortState.order) {
|
|
270
|
+
return void 0;
|
|
271
|
+
}
|
|
272
|
+
return {
|
|
273
|
+
prop: sortState.prop,
|
|
274
|
+
order: sortState.order
|
|
275
|
+
};
|
|
276
|
+
});
|
|
277
|
+
watch(
|
|
278
|
+
() => props.data,
|
|
279
|
+
(value) => {
|
|
280
|
+
if (!props.request) {
|
|
281
|
+
setData(value || []);
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
{ deep: true }
|
|
285
|
+
);
|
|
286
|
+
watch(
|
|
287
|
+
() => props.pagination,
|
|
288
|
+
(value) => {
|
|
289
|
+
syncPagination(value);
|
|
290
|
+
},
|
|
291
|
+
{ deep: true }
|
|
292
|
+
);
|
|
293
|
+
watch(
|
|
294
|
+
() => props.requestParams,
|
|
295
|
+
() => {
|
|
296
|
+
if (props.request && props.reloadOnParamsChange && props.autoLoad) {
|
|
297
|
+
paginationState.currentPage = 1;
|
|
298
|
+
void load();
|
|
299
|
+
}
|
|
300
|
+
},
|
|
301
|
+
{ deep: true }
|
|
302
|
+
);
|
|
303
|
+
watch(
|
|
304
|
+
() => props.defaultSort,
|
|
305
|
+
(value) => {
|
|
306
|
+
sortState.prop = value == null ? void 0 : value.prop;
|
|
307
|
+
sortState.order = (value == null ? void 0 : value.order) || null;
|
|
308
|
+
},
|
|
309
|
+
{ deep: true }
|
|
310
|
+
);
|
|
311
|
+
onMounted(() => {
|
|
312
|
+
var _a2;
|
|
313
|
+
if (props.request && props.autoLoad) {
|
|
314
|
+
void load();
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
if (!props.request) {
|
|
318
|
+
rows.value = normalizeRows(props.data);
|
|
319
|
+
if (!((_a2 = props.pagination) == null ? void 0 : _a2.total)) {
|
|
320
|
+
paginationState.total = rows.value.length;
|
|
321
|
+
emitPagination();
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
});
|
|
325
|
+
function syncPagination(value) {
|
|
326
|
+
paginationState.currentPage = Number((value == null ? void 0 : value.currentPage) || paginationState.currentPage || 1);
|
|
327
|
+
paginationState.pageSize = Number((value == null ? void 0 : value.pageSize) || paginationState.pageSize || 20);
|
|
328
|
+
paginationState.total = Number((value == null ? void 0 : value.total) || (value == null ? void 0 : value.total) === 0 ? value.total : paginationState.total || rows.value.length);
|
|
329
|
+
paginationState.pageSizes = Array.isArray(value == null ? void 0 : value.pageSizes) && value.pageSizes.length ? [...value.pageSizes] : [...paginationState.pageSizes.length ? paginationState.pageSizes : [10, 20, 50, 100]];
|
|
330
|
+
}
|
|
331
|
+
function emitPagination() {
|
|
332
|
+
emit("update:pagination", {
|
|
333
|
+
currentPage: paginationState.currentPage,
|
|
334
|
+
pageSize: paginationState.pageSize,
|
|
335
|
+
total: paginationState.total,
|
|
336
|
+
pageSizes: [...paginationState.pageSizes]
|
|
337
|
+
});
|
|
338
|
+
}
|
|
339
|
+
async function load(data) {
|
|
340
|
+
if (Array.isArray(data)) {
|
|
341
|
+
setData(data);
|
|
342
|
+
return;
|
|
343
|
+
}
|
|
344
|
+
if (!props.request) {
|
|
345
|
+
setData(props.data || []);
|
|
346
|
+
return;
|
|
347
|
+
}
|
|
348
|
+
loading.value = true;
|
|
349
|
+
const requestParams = buildRequestParams();
|
|
350
|
+
try {
|
|
351
|
+
const result = await props.request(requestParams);
|
|
352
|
+
const normalized = normalizeRequestResult(result, requestParams);
|
|
353
|
+
rows.value = normalized.rows;
|
|
354
|
+
paginationState.total = normalized.total;
|
|
355
|
+
emitPagination();
|
|
356
|
+
emit("loaded", {
|
|
357
|
+
rows: [...rows.value],
|
|
358
|
+
total: paginationState.total,
|
|
359
|
+
params: requestParams
|
|
360
|
+
});
|
|
361
|
+
} catch (error) {
|
|
362
|
+
rows.value = [];
|
|
363
|
+
paginationState.total = 0;
|
|
364
|
+
emitPagination();
|
|
365
|
+
emit("request-error", error);
|
|
366
|
+
} finally {
|
|
367
|
+
loading.value = false;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
async function refresh() {
|
|
371
|
+
await load();
|
|
372
|
+
}
|
|
373
|
+
async function resetPage() {
|
|
374
|
+
paginationState.currentPage = 1;
|
|
375
|
+
emitPagination();
|
|
376
|
+
await load();
|
|
377
|
+
}
|
|
378
|
+
function setData(data) {
|
|
379
|
+
var _a2, _b2;
|
|
380
|
+
rows.value = normalizeRows(data);
|
|
381
|
+
if (!props.request) {
|
|
382
|
+
paginationState.total = Number((_b2 = (_a2 = props.pagination) == null ? void 0 : _a2.total) != null ? _b2 : rows.value.length);
|
|
383
|
+
emitPagination();
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
function clearSelection() {
|
|
387
|
+
var _a2;
|
|
388
|
+
(_a2 = tableRef.value) == null ? void 0 : _a2.clearSelection();
|
|
389
|
+
selectionRows.value = [];
|
|
390
|
+
}
|
|
391
|
+
function toggleRowSelection(row, selected) {
|
|
392
|
+
var _a2;
|
|
393
|
+
(_a2 = tableRef.value) == null ? void 0 : _a2.toggleRowSelection(row, selected);
|
|
394
|
+
}
|
|
395
|
+
function getSelectionRows() {
|
|
396
|
+
return [...selectionRows.value];
|
|
397
|
+
}
|
|
398
|
+
function getRows() {
|
|
399
|
+
return [...rows.value];
|
|
400
|
+
}
|
|
401
|
+
function handleSelectionChange(value) {
|
|
402
|
+
selectionRows.value = value;
|
|
403
|
+
emit("selection-change", value);
|
|
404
|
+
}
|
|
405
|
+
function handleSortChange(payload) {
|
|
406
|
+
const column = props.columns.find((item) => String(item.prop || "") === String(payload.prop || ""));
|
|
407
|
+
sortState.prop = payload.prop;
|
|
408
|
+
sortState.order = payload.order;
|
|
409
|
+
const sortPayload = buildSortPayload(column, payload.prop, payload.order);
|
|
410
|
+
emit("sort-change", sortPayload);
|
|
411
|
+
if (props.request && props.reloadOnSortChange) {
|
|
412
|
+
paginationState.currentPage = 1;
|
|
413
|
+
emitPagination();
|
|
414
|
+
void load();
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
function handleCurrentChange(value) {
|
|
418
|
+
paginationState.currentPage = value;
|
|
419
|
+
emitPagination();
|
|
420
|
+
emit("page-change", value);
|
|
421
|
+
if (props.request) {
|
|
422
|
+
void load();
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
function handleSizeChange(value) {
|
|
426
|
+
paginationState.pageSize = value;
|
|
427
|
+
paginationState.currentPage = 1;
|
|
428
|
+
emitPagination();
|
|
429
|
+
emit("size-change", value);
|
|
430
|
+
if (props.request) {
|
|
431
|
+
void load();
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
function handleRowAction(row, action, column) {
|
|
435
|
+
emit("row-action", {
|
|
436
|
+
row,
|
|
437
|
+
action,
|
|
438
|
+
column
|
|
439
|
+
});
|
|
440
|
+
}
|
|
441
|
+
function handleCellClick(row, column) {
|
|
442
|
+
var _a2;
|
|
443
|
+
(_a2 = column.clickHandler) == null ? void 0 : _a2.call(column, row, column);
|
|
444
|
+
emit("cell-click", {
|
|
445
|
+
row,
|
|
446
|
+
column,
|
|
447
|
+
value: getCellValue2(row, column)
|
|
448
|
+
});
|
|
449
|
+
}
|
|
450
|
+
function handleInputChange(value, row, column) {
|
|
451
|
+
var _a2;
|
|
452
|
+
if (!column.prop) {
|
|
453
|
+
return;
|
|
454
|
+
}
|
|
455
|
+
row[column.prop] = value;
|
|
456
|
+
(_a2 = column.inputHandler) == null ? void 0 : _a2.call(column, value, row, column);
|
|
457
|
+
emit("cell-input", {
|
|
458
|
+
row,
|
|
459
|
+
column,
|
|
460
|
+
value
|
|
461
|
+
});
|
|
462
|
+
}
|
|
463
|
+
function buildRequestParams() {
|
|
464
|
+
const params = {
|
|
465
|
+
...props.requestParams,
|
|
466
|
+
currentPage: paginationState.currentPage,
|
|
467
|
+
pageSize: paginationState.pageSize,
|
|
468
|
+
[props.currentPageKey]: paginationState.currentPage,
|
|
469
|
+
[props.pageSizeKey]: paginationState.pageSize
|
|
470
|
+
};
|
|
471
|
+
const currentColumn = props.columns.find((item) => String(item.prop || "") === String(sortState.prop || ""));
|
|
472
|
+
const sortPayload = buildSortPayload(currentColumn, sortState.prop, sortState.order);
|
|
473
|
+
const sortParams = buildSortParams(sortPayload);
|
|
474
|
+
return {
|
|
475
|
+
...params,
|
|
476
|
+
...sortParams
|
|
477
|
+
};
|
|
478
|
+
}
|
|
479
|
+
function normalizeRequestResult(result, requestParams) {
|
|
480
|
+
var _a2, _b2;
|
|
481
|
+
if (props.resultAdapter) {
|
|
482
|
+
const adaptedResult = props.resultAdapter(result, requestParams);
|
|
483
|
+
const adaptedRows = normalizeRows(adaptedResult == null ? void 0 : adaptedResult.rows);
|
|
484
|
+
return {
|
|
485
|
+
rows: adaptedRows,
|
|
486
|
+
total: Number((_a2 = adaptedResult == null ? void 0 : adaptedResult.total) != null ? _a2 : adaptedRows.length)
|
|
487
|
+
};
|
|
488
|
+
}
|
|
489
|
+
if (Array.isArray(result)) {
|
|
490
|
+
return {
|
|
491
|
+
rows: normalizeRows(result),
|
|
492
|
+
total: result.length
|
|
493
|
+
};
|
|
494
|
+
}
|
|
495
|
+
const payload = result || {};
|
|
496
|
+
const container = payload.data && typeof payload.data === "object" ? payload.data : payload;
|
|
497
|
+
const list = container.records || container.list || container.items || [];
|
|
498
|
+
const normalizedRows = normalizeRows(list);
|
|
499
|
+
return {
|
|
500
|
+
rows: normalizedRows,
|
|
501
|
+
total: Number((_b2 = container.total) != null ? _b2 : normalizedRows.length)
|
|
502
|
+
};
|
|
503
|
+
}
|
|
504
|
+
function normalizeRows(data) {
|
|
505
|
+
return Array.isArray(data) ? [...data] : [];
|
|
506
|
+
}
|
|
507
|
+
function getColumnKey(column) {
|
|
508
|
+
return String(column.prop || column.label);
|
|
509
|
+
}
|
|
510
|
+
function getColumnProp(column) {
|
|
511
|
+
return column.prop ? String(column.prop) : void 0;
|
|
512
|
+
}
|
|
513
|
+
function getCellValue2(row, column) {
|
|
514
|
+
if (!column.prop) {
|
|
515
|
+
return void 0;
|
|
516
|
+
}
|
|
517
|
+
return row[column.prop];
|
|
518
|
+
}
|
|
519
|
+
function formatCellDisplay(row, column) {
|
|
520
|
+
if (column.formatter) {
|
|
521
|
+
const formatted = column.formatter(row, column);
|
|
522
|
+
return toDisplayValue(formatted, resolveEmptyText(column));
|
|
523
|
+
}
|
|
524
|
+
return toDisplayValue(getCellValue2(row, column), resolveEmptyText(column));
|
|
525
|
+
}
|
|
526
|
+
function getHtmlContent(row, column) {
|
|
527
|
+
if (column.html) {
|
|
528
|
+
return column.html(row, column);
|
|
529
|
+
}
|
|
530
|
+
const value = getCellValue2(row, column);
|
|
531
|
+
return value === void 0 || value === null ? "" : String(value);
|
|
532
|
+
}
|
|
533
|
+
function isActionColumn(column) {
|
|
534
|
+
var _a2;
|
|
535
|
+
return column.kind === "actions" || Boolean((_a2 = column.actions) == null ? void 0 : _a2.length);
|
|
536
|
+
}
|
|
537
|
+
function isLinkColumn(column) {
|
|
538
|
+
return column.kind === "link" || Boolean(column.clickable);
|
|
539
|
+
}
|
|
540
|
+
function getVisibleActions(column, row) {
|
|
541
|
+
return (column.actions || []).filter((action) => {
|
|
542
|
+
if (typeof action.visible === "function") {
|
|
543
|
+
return action.visible(row);
|
|
544
|
+
}
|
|
545
|
+
return action.visible !== false;
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
function isActionDisabled(action, row) {
|
|
549
|
+
if (typeof action.disabled === "function") {
|
|
550
|
+
return action.disabled(row);
|
|
551
|
+
}
|
|
552
|
+
return Boolean(action.disabled);
|
|
553
|
+
}
|
|
554
|
+
function resolveCellSlotName(column) {
|
|
555
|
+
return column.slotName || (column.prop ? `cell-${String(column.prop)}` : "");
|
|
556
|
+
}
|
|
557
|
+
function resolveHeaderSlotName(column) {
|
|
558
|
+
return column.headerSlotName || (column.prop ? `header-${String(column.prop)}` : "");
|
|
559
|
+
}
|
|
560
|
+
function hasCellSlot(column) {
|
|
561
|
+
const slotName = resolveCellSlotName(column);
|
|
562
|
+
return Boolean(slotName && slots[slotName]);
|
|
563
|
+
}
|
|
564
|
+
function hasHeaderSlot(column) {
|
|
565
|
+
const slotName = resolveHeaderSlotName(column);
|
|
566
|
+
return Boolean(slotName && slots[slotName]);
|
|
567
|
+
}
|
|
568
|
+
function getMatchedOptions(row, column) {
|
|
569
|
+
const value = getCellValue2(row, column);
|
|
570
|
+
const values = Array.isArray(value) ? value : [value];
|
|
571
|
+
const valueKey = column.optionValueKey || "value";
|
|
572
|
+
const labelKey = column.optionLabelKey || "label";
|
|
573
|
+
const tagTypeKey = column.optionTagTypeKey || "tagType";
|
|
574
|
+
return values.filter((item) => item !== void 0 && item !== null && item !== "").map((item) => {
|
|
575
|
+
const matched = (column.options || []).find((option) => option[valueKey] === item);
|
|
576
|
+
if (!matched) {
|
|
577
|
+
return {
|
|
578
|
+
label: String(item),
|
|
579
|
+
value: item,
|
|
580
|
+
tagType: "info"
|
|
581
|
+
};
|
|
582
|
+
}
|
|
583
|
+
return {
|
|
584
|
+
label: String(matched[labelKey]),
|
|
585
|
+
value: matched[valueKey],
|
|
586
|
+
tagType: matched[tagTypeKey],
|
|
587
|
+
color: matched.color
|
|
588
|
+
};
|
|
589
|
+
});
|
|
590
|
+
}
|
|
591
|
+
function getImageStyle(column) {
|
|
592
|
+
return {
|
|
593
|
+
width: toCssValue(column.imageWidth || 50),
|
|
594
|
+
height: toCssValue(column.imageHeight || 50)
|
|
595
|
+
};
|
|
596
|
+
}
|
|
597
|
+
function toImageSrc(value) {
|
|
598
|
+
if (typeof value === "string") {
|
|
599
|
+
return value;
|
|
600
|
+
}
|
|
601
|
+
if (value && typeof value === "object" && "url" in value) {
|
|
602
|
+
return String(value.url || "");
|
|
603
|
+
}
|
|
604
|
+
return "";
|
|
605
|
+
}
|
|
606
|
+
function getPreviewSrcList(row, column) {
|
|
607
|
+
const src = toImageSrc(getCellValue2(row, column));
|
|
608
|
+
return src ? [src] : [];
|
|
609
|
+
}
|
|
610
|
+
function resolveEmptyText(column) {
|
|
611
|
+
return column.emptyText || "--";
|
|
612
|
+
}
|
|
613
|
+
function resolveColumnSortable(column) {
|
|
614
|
+
if (!props.request) {
|
|
615
|
+
return column.sortable || false;
|
|
616
|
+
}
|
|
617
|
+
if (column.sortable === true) {
|
|
618
|
+
return "custom";
|
|
619
|
+
}
|
|
620
|
+
return column.sortable || false;
|
|
621
|
+
}
|
|
622
|
+
function buildSortPayload(column, prop, order = null) {
|
|
623
|
+
return {
|
|
624
|
+
column,
|
|
625
|
+
prop,
|
|
626
|
+
order,
|
|
627
|
+
field: resolveSortField(column, prop),
|
|
628
|
+
direction: resolveSortDirection(order)
|
|
629
|
+
};
|
|
630
|
+
}
|
|
631
|
+
function buildSortParams(payload) {
|
|
632
|
+
var _a2;
|
|
633
|
+
if (!payload.field || !payload.direction) {
|
|
634
|
+
return {};
|
|
635
|
+
}
|
|
636
|
+
const mappedParams = (_a2 = props.sortMapper) == null ? void 0 : _a2.call(props, payload);
|
|
637
|
+
if (mappedParams && typeof mappedParams === "object") {
|
|
638
|
+
return mappedParams;
|
|
639
|
+
}
|
|
640
|
+
return {
|
|
641
|
+
[props.sortFieldKey]: payload.field,
|
|
642
|
+
[props.sortOrderKey]: payload.direction
|
|
643
|
+
};
|
|
644
|
+
}
|
|
645
|
+
function resolveSortField(column, prop) {
|
|
646
|
+
return (column == null ? void 0 : column.sortField) || prop;
|
|
647
|
+
}
|
|
648
|
+
function resolveSortDirection(order) {
|
|
649
|
+
if (order === "ascending") {
|
|
650
|
+
return props.sortOrderMap.ascending;
|
|
651
|
+
}
|
|
652
|
+
if (order === "descending") {
|
|
653
|
+
return props.sortOrderMap.descending;
|
|
654
|
+
}
|
|
655
|
+
return null;
|
|
656
|
+
}
|
|
657
|
+
function toDisplayValue(value, emptyText = "--") {
|
|
658
|
+
if (value === 0) {
|
|
659
|
+
return "0";
|
|
660
|
+
}
|
|
661
|
+
if (value === void 0 || value === null || value === "") {
|
|
662
|
+
return emptyText;
|
|
663
|
+
}
|
|
664
|
+
return String(value);
|
|
665
|
+
}
|
|
666
|
+
function toCssValue(value) {
|
|
667
|
+
if (value === void 0 || value === null || value === "") {
|
|
668
|
+
return void 0;
|
|
669
|
+
}
|
|
670
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
671
|
+
}
|
|
672
|
+
__expose({
|
|
673
|
+
load,
|
|
674
|
+
refresh,
|
|
675
|
+
setData,
|
|
676
|
+
resetPage,
|
|
677
|
+
clearSelection,
|
|
678
|
+
toggleRowSelection,
|
|
679
|
+
getSelectionRows,
|
|
680
|
+
getRows
|
|
681
|
+
});
|
|
682
|
+
return (_ctx, _cache) => {
|
|
683
|
+
const _component_el_pagination = resolveComponent("el-pagination");
|
|
684
|
+
const _component_el_empty = resolveComponent("el-empty");
|
|
685
|
+
const _component_el_table_column = resolveComponent("el-table-column");
|
|
686
|
+
const _component_el_button = resolveComponent("el-button");
|
|
687
|
+
const _component_el_image = resolveComponent("el-image");
|
|
688
|
+
const _component_el_tag = resolveComponent("el-tag");
|
|
689
|
+
const _component_el_input = resolveComponent("el-input");
|
|
690
|
+
const _component_el_table = resolveComponent("el-table");
|
|
691
|
+
const _directive_loading = resolveDirective("loading");
|
|
692
|
+
return openBlock(), createElementBlock("div", _hoisted_1$2, [
|
|
693
|
+
shouldRenderToolbar.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
694
|
+
createElementVNode("div", _hoisted_3, [
|
|
695
|
+
renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
|
|
696
|
+
]),
|
|
697
|
+
__props.showPagination ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
698
|
+
createVNode(_component_el_pagination, {
|
|
699
|
+
small: "",
|
|
700
|
+
background: "",
|
|
701
|
+
layout: "total, prev, pager, next, sizes, jumper",
|
|
702
|
+
total: paginationState.total,
|
|
703
|
+
"current-page": paginationState.currentPage,
|
|
704
|
+
"page-size": paginationState.pageSize,
|
|
705
|
+
"page-sizes": paginationState.pageSizes,
|
|
706
|
+
"pager-count": 5,
|
|
707
|
+
"popper-append-to-body": false,
|
|
708
|
+
onSizeChange: handleSizeChange,
|
|
709
|
+
onCurrentChange: handleCurrentChange
|
|
710
|
+
}, null, 8, ["total", "current-page", "page-size", "page-sizes"])
|
|
711
|
+
])) : createCommentVNode("", true)
|
|
712
|
+
])) : createCommentVNode("", true),
|
|
713
|
+
withDirectives((openBlock(), createBlock(_component_el_table, {
|
|
714
|
+
ref_key: "tableRef",
|
|
715
|
+
ref: tableRef,
|
|
716
|
+
data: rows.value,
|
|
717
|
+
"row-key": __props.rowKey,
|
|
718
|
+
height: normalizedHeight.value,
|
|
719
|
+
border: __props.border,
|
|
720
|
+
stripe: __props.stripe,
|
|
721
|
+
"default-sort": normalizedDefaultSort.value,
|
|
722
|
+
"highlight-current-row": "",
|
|
723
|
+
onSelectionChange: handleSelectionChange,
|
|
724
|
+
onSortChange: handleSortChange
|
|
725
|
+
}, {
|
|
726
|
+
empty: withCtx(() => [
|
|
727
|
+
createVNode(_component_el_empty, { description: __props.emptyText }, null, 8, ["description"])
|
|
728
|
+
]),
|
|
729
|
+
default: withCtx(() => [
|
|
730
|
+
__props.hasSelection ? (openBlock(), createBlock(_component_el_table_column, {
|
|
731
|
+
key: 0,
|
|
732
|
+
type: "selection",
|
|
733
|
+
width: __props.selectionWidth,
|
|
734
|
+
align: "center",
|
|
735
|
+
selectable: __props.rowSelectable
|
|
736
|
+
}, null, 8, ["width", "selectable"])) : createCommentVNode("", true),
|
|
737
|
+
__props.hasIndex ? (openBlock(), createBlock(_component_el_table_column, {
|
|
738
|
+
key: 1,
|
|
739
|
+
type: "index",
|
|
740
|
+
label: __props.indexLabel,
|
|
741
|
+
width: __props.indexWidth,
|
|
742
|
+
fixed: "left",
|
|
743
|
+
align: "center"
|
|
744
|
+
}, null, 8, ["label", "width"])) : createCommentVNode("", true),
|
|
745
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
|
|
746
|
+
return openBlock(), createBlock(_component_el_table_column, {
|
|
747
|
+
key: getColumnKey(column),
|
|
748
|
+
prop: getColumnProp(column),
|
|
749
|
+
label: column.label,
|
|
750
|
+
type: column.type || void 0,
|
|
751
|
+
width: toCssValue(column.width),
|
|
752
|
+
"min-width": toCssValue(column.minWidth),
|
|
753
|
+
fixed: column.fixed,
|
|
754
|
+
align: column.align || "left",
|
|
755
|
+
"header-align": column.headerAlign || column.align || "left",
|
|
756
|
+
sortable: resolveColumnSortable(column),
|
|
757
|
+
"show-overflow-tooltip": column.showOverflowTooltip !== false,
|
|
758
|
+
"class-name": column.className,
|
|
759
|
+
"label-class-name": column.headerClassName
|
|
760
|
+
}, createSlots({
|
|
761
|
+
default: withCtx((scope) => [
|
|
762
|
+
hasCellSlot(column) ? renderSlot(_ctx.$slots, resolveCellSlotName(column), {
|
|
763
|
+
key: 0,
|
|
764
|
+
row: scope.row,
|
|
765
|
+
columnConfig: column,
|
|
766
|
+
columnIndex: scope.$index,
|
|
767
|
+
value: getCellValue2(scope.row, column)
|
|
768
|
+
}, void 0, true) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
769
|
+
isActionColumn(column) ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
|
770
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(getVisibleActions(column, scope.row), (action) => {
|
|
771
|
+
return openBlock(), createBlock(_component_el_button, {
|
|
772
|
+
key: `${action.type}-${action.label}`,
|
|
773
|
+
link: "",
|
|
774
|
+
type: action.buttonType || (action.type === "delete" ? "danger" : "primary"),
|
|
775
|
+
disabled: isActionDisabled(action, scope.row),
|
|
776
|
+
onClick: ($event) => handleRowAction(scope.row, action, column)
|
|
777
|
+
}, {
|
|
778
|
+
default: withCtx(() => [
|
|
779
|
+
createTextVNode(toDisplayString(action.label), 1)
|
|
780
|
+
]),
|
|
781
|
+
_: 2
|
|
782
|
+
}, 1032, ["type", "disabled", "onClick"]);
|
|
783
|
+
}), 128))
|
|
784
|
+
])) : column.kind === "image" ? (openBlock(), createBlock(_component_el_image, {
|
|
785
|
+
key: 1,
|
|
786
|
+
class: "base-table__image",
|
|
787
|
+
style: normalizeStyle(getImageStyle(column)),
|
|
788
|
+
src: toImageSrc(getCellValue2(scope.row, column)),
|
|
789
|
+
"preview-src-list": getPreviewSrcList(scope.row, column),
|
|
790
|
+
fit: column.imageFit || "cover"
|
|
791
|
+
}, null, 8, ["style", "src", "preview-src-list", "fit"])) : column.kind === "tag" ? (openBlock(), createElementBlock("div", _hoisted_6, [
|
|
792
|
+
getMatchedOptions(scope.row, column).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(getMatchedOptions(scope.row, column), (option) => {
|
|
793
|
+
return openBlock(), createBlock(_component_el_tag, {
|
|
794
|
+
key: String(option.value),
|
|
795
|
+
type: option.tagType || "info",
|
|
796
|
+
style: normalizeStyle(option.color ? { color: option.color, borderColor: `${option.color}33`, backgroundColor: `${option.color}1a` } : void 0),
|
|
797
|
+
size: "small"
|
|
798
|
+
}, {
|
|
799
|
+
default: withCtx(() => [
|
|
800
|
+
createTextVNode(toDisplayString(option.label), 1)
|
|
801
|
+
]),
|
|
802
|
+
_: 2
|
|
803
|
+
}, 1032, ["type", "style"]);
|
|
804
|
+
}), 128)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(resolveEmptyText(column)), 1))
|
|
805
|
+
])) : column.kind === "html" ? (openBlock(), createElementBlock("div", {
|
|
806
|
+
key: 3,
|
|
807
|
+
innerHTML: getHtmlContent(scope.row, column)
|
|
808
|
+
}, null, 8, _hoisted_8)) : column.kind === "input" ? (openBlock(), createBlock(_component_el_input, {
|
|
809
|
+
key: 4,
|
|
810
|
+
"model-value": toDisplayValue(getCellValue2(scope.row, column), ""),
|
|
811
|
+
type: column.inputType || "text",
|
|
812
|
+
"onUpdate:modelValue": ($event) => handleInputChange($event, scope.row, column)
|
|
813
|
+
}, null, 8, ["model-value", "type", "onUpdate:modelValue"])) : isLinkColumn(column) ? (openBlock(), createElementBlock("button", {
|
|
814
|
+
key: 5,
|
|
815
|
+
class: "base-table__link",
|
|
816
|
+
type: "button",
|
|
817
|
+
onClick: ($event) => handleCellClick(scope.row, column)
|
|
818
|
+
}, toDisplayString(formatCellDisplay(scope.row, column)), 9, _hoisted_9)) : (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(formatCellDisplay(scope.row, column)), 1))
|
|
819
|
+
], 64))
|
|
820
|
+
]),
|
|
821
|
+
_: 2
|
|
822
|
+
}, [
|
|
823
|
+
hasHeaderSlot(column) ? {
|
|
824
|
+
name: "header",
|
|
825
|
+
fn: withCtx((headerScope) => [
|
|
826
|
+
renderSlot(_ctx.$slots, resolveHeaderSlotName(column), mergeProps({ ref_for: true }, headerScope, { columnConfig: column }), void 0, true)
|
|
827
|
+
]),
|
|
828
|
+
key: "0"
|
|
829
|
+
} : void 0
|
|
830
|
+
]), 1032, ["prop", "label", "type", "width", "min-width", "fixed", "align", "header-align", "sortable", "show-overflow-tooltip", "class-name", "label-class-name"]);
|
|
831
|
+
}), 128))
|
|
832
|
+
]),
|
|
833
|
+
_: 3
|
|
834
|
+
}, 8, ["data", "row-key", "height", "border", "stripe", "default-sort"])), [
|
|
835
|
+
[_directive_loading, loading.value]
|
|
836
|
+
])
|
|
837
|
+
]);
|
|
838
|
+
};
|
|
839
|
+
}
|
|
840
|
+
});
|
|
841
|
+
var BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-429ba785"]]);
|
|
842
|
+
var BaseEChart_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
843
|
+
const _sfc_main$8 = defineComponent({
|
|
844
|
+
__name: "BaseEChart",
|
|
845
|
+
props: {
|
|
846
|
+
option: { default: () => ({}) },
|
|
847
|
+
theme: {},
|
|
848
|
+
initOptions: { default: () => ({ renderer: "canvas" }) },
|
|
849
|
+
setOptionOptions: { type: Boolean, default: () => ({ notMerge: false, lazyUpdate: true }) },
|
|
850
|
+
loading: { type: Boolean, default: false },
|
|
851
|
+
loadingOptions: {},
|
|
852
|
+
autoResize: { type: Boolean, default: true },
|
|
853
|
+
useDefaultColors: { type: Boolean, default: true },
|
|
854
|
+
colorStorageKey: { default: "echartsColor" },
|
|
855
|
+
defaultColors: { default: () => [] },
|
|
856
|
+
group: { default: void 0 }
|
|
857
|
+
},
|
|
858
|
+
emits: ["ready"],
|
|
859
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
860
|
+
const props = __props;
|
|
861
|
+
const emit = __emit;
|
|
862
|
+
const containerRef = ref(null);
|
|
863
|
+
const chartRef = ref(null);
|
|
864
|
+
const chartInstance = shallowRef(null);
|
|
865
|
+
let resizeObserver = null;
|
|
866
|
+
let resizeFrameId = null;
|
|
867
|
+
let pendingResizeOptions;
|
|
868
|
+
const cancelResizeFrame = () => {
|
|
869
|
+
if (resizeFrameId !== null) {
|
|
870
|
+
cancelAnimationFrame(resizeFrameId);
|
|
871
|
+
resizeFrameId = null;
|
|
872
|
+
}
|
|
873
|
+
};
|
|
874
|
+
const getDefaultColors = () => {
|
|
875
|
+
if (!props.useDefaultColors || typeof window === "undefined") {
|
|
876
|
+
return props.defaultColors;
|
|
877
|
+
}
|
|
878
|
+
try {
|
|
879
|
+
const raw = window.sessionStorage.getItem(props.colorStorageKey);
|
|
880
|
+
const colors = raw ? JSON.parse(raw) : [];
|
|
881
|
+
return colors.length > 0 ? colors : props.defaultColors;
|
|
882
|
+
} catch {
|
|
883
|
+
return props.defaultColors;
|
|
884
|
+
}
|
|
885
|
+
};
|
|
886
|
+
const normalizeOption = (option = {}) => {
|
|
887
|
+
if (option.color) {
|
|
888
|
+
return option;
|
|
889
|
+
}
|
|
890
|
+
const colors = getDefaultColors();
|
|
891
|
+
if (!colors || colors.length === 0) {
|
|
892
|
+
return option;
|
|
893
|
+
}
|
|
894
|
+
return {
|
|
895
|
+
...option,
|
|
896
|
+
color: colors
|
|
897
|
+
};
|
|
898
|
+
};
|
|
899
|
+
const createChart = () => {
|
|
900
|
+
if (!chartRef.value) {
|
|
901
|
+
return null;
|
|
902
|
+
}
|
|
903
|
+
const existingChart = echarts.getInstanceByDom(chartRef.value);
|
|
904
|
+
existingChart == null ? void 0 : existingChart.dispose();
|
|
905
|
+
const instance = echarts.init(chartRef.value, props.theme, props.initOptions);
|
|
906
|
+
if (props.group) {
|
|
907
|
+
instance.group = props.group;
|
|
908
|
+
}
|
|
909
|
+
chartInstance.value = instance;
|
|
910
|
+
emit("ready", instance);
|
|
911
|
+
return instance;
|
|
912
|
+
};
|
|
913
|
+
const getInstance = () => chartInstance.value;
|
|
914
|
+
const ensureChart = () => {
|
|
915
|
+
var _a;
|
|
916
|
+
return (_a = chartInstance.value) != null ? _a : createChart();
|
|
917
|
+
};
|
|
918
|
+
const setOption = (option, setOptionOptions = props.setOptionOptions) => {
|
|
919
|
+
const chart = ensureChart();
|
|
920
|
+
if (!chart) {
|
|
921
|
+
return null;
|
|
922
|
+
}
|
|
923
|
+
const nextOption = normalizeOption(option);
|
|
924
|
+
if (typeof setOptionOptions === "boolean") {
|
|
925
|
+
chart.setOption(nextOption, setOptionOptions);
|
|
926
|
+
} else {
|
|
927
|
+
chart.setOption(nextOption, setOptionOptions);
|
|
928
|
+
}
|
|
929
|
+
return chart;
|
|
930
|
+
};
|
|
931
|
+
const showLoading = (type = "default", loadingOptions) => {
|
|
932
|
+
const chart = ensureChart();
|
|
933
|
+
if (!chart) {
|
|
934
|
+
return;
|
|
935
|
+
}
|
|
936
|
+
chart.showLoading(type, loadingOptions);
|
|
937
|
+
};
|
|
938
|
+
const hideLoading = () => {
|
|
939
|
+
var _a;
|
|
940
|
+
(_a = chartInstance.value) == null ? void 0 : _a.hideLoading();
|
|
941
|
+
};
|
|
942
|
+
const syncLoading = () => {
|
|
943
|
+
if (props.loading) {
|
|
944
|
+
showLoading("default", props.loadingOptions);
|
|
945
|
+
return;
|
|
946
|
+
}
|
|
947
|
+
hideLoading();
|
|
948
|
+
};
|
|
949
|
+
const resize = (resizeOptions) => {
|
|
950
|
+
pendingResizeOptions = resizeOptions;
|
|
951
|
+
cancelResizeFrame();
|
|
952
|
+
resizeFrameId = requestAnimationFrame(() => {
|
|
953
|
+
var _a;
|
|
954
|
+
(_a = chartInstance.value) == null ? void 0 : _a.resize(pendingResizeOptions);
|
|
955
|
+
pendingResizeOptions = void 0;
|
|
956
|
+
resizeFrameId = null;
|
|
957
|
+
});
|
|
958
|
+
};
|
|
959
|
+
const handleWindowResize = () => {
|
|
960
|
+
resize();
|
|
961
|
+
};
|
|
962
|
+
const stopAutoResize = () => {
|
|
963
|
+
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
964
|
+
resizeObserver = null;
|
|
965
|
+
window.removeEventListener("resize", handleWindowResize);
|
|
966
|
+
};
|
|
967
|
+
const startAutoResize = () => {
|
|
968
|
+
stopAutoResize();
|
|
969
|
+
if (!props.autoResize || !containerRef.value) {
|
|
970
|
+
return;
|
|
971
|
+
}
|
|
972
|
+
resizeObserver = new ResizeObserver(() => {
|
|
973
|
+
resize();
|
|
974
|
+
});
|
|
975
|
+
resizeObserver.observe(containerRef.value);
|
|
976
|
+
window.addEventListener("resize", handleWindowResize);
|
|
977
|
+
};
|
|
978
|
+
const clear = () => {
|
|
979
|
+
var _a;
|
|
980
|
+
(_a = chartInstance.value) == null ? void 0 : _a.clear();
|
|
981
|
+
};
|
|
982
|
+
const disposeChart = () => {
|
|
983
|
+
var _a;
|
|
984
|
+
(_a = chartInstance.value) == null ? void 0 : _a.dispose();
|
|
985
|
+
chartInstance.value = null;
|
|
986
|
+
};
|
|
987
|
+
const dispose = () => {
|
|
988
|
+
disposeChart();
|
|
989
|
+
};
|
|
990
|
+
const dispatchAction = (payload) => {
|
|
991
|
+
var _a;
|
|
992
|
+
(_a = chartInstance.value) == null ? void 0 : _a.dispatchAction(payload);
|
|
993
|
+
};
|
|
994
|
+
const on = (eventName, handler, context) => {
|
|
995
|
+
const chart = ensureChart();
|
|
996
|
+
chart == null ? void 0 : chart.on(eventName, handler, context);
|
|
997
|
+
};
|
|
998
|
+
const off = (eventName, handler) => {
|
|
999
|
+
if (!chartInstance.value) {
|
|
1000
|
+
return;
|
|
1001
|
+
}
|
|
1002
|
+
if (!eventName) {
|
|
1003
|
+
chartInstance.value.off();
|
|
1004
|
+
return;
|
|
1005
|
+
}
|
|
1006
|
+
if (handler) {
|
|
1007
|
+
chartInstance.value.off(eventName, handler);
|
|
1008
|
+
return;
|
|
1009
|
+
}
|
|
1010
|
+
chartInstance.value.off(eventName);
|
|
1011
|
+
};
|
|
1012
|
+
const reinitChart = async () => {
|
|
1013
|
+
disposeChart();
|
|
1014
|
+
await nextTick();
|
|
1015
|
+
createChart();
|
|
1016
|
+
setOption(props.option);
|
|
1017
|
+
syncLoading();
|
|
1018
|
+
resize();
|
|
1019
|
+
};
|
|
1020
|
+
watch(
|
|
1021
|
+
() => props.option,
|
|
1022
|
+
(option) => {
|
|
1023
|
+
setOption(option);
|
|
1024
|
+
},
|
|
1025
|
+
{ deep: true }
|
|
1026
|
+
);
|
|
1027
|
+
watch(
|
|
1028
|
+
() => props.loading,
|
|
1029
|
+
() => {
|
|
1030
|
+
syncLoading();
|
|
1031
|
+
}
|
|
1032
|
+
);
|
|
1033
|
+
watch(
|
|
1034
|
+
() => props.loadingOptions,
|
|
1035
|
+
() => {
|
|
1036
|
+
if (props.loading) {
|
|
1037
|
+
syncLoading();
|
|
1038
|
+
}
|
|
1039
|
+
},
|
|
1040
|
+
{ deep: true }
|
|
1041
|
+
);
|
|
1042
|
+
watch(
|
|
1043
|
+
() => props.group,
|
|
1044
|
+
(group) => {
|
|
1045
|
+
if (!chartInstance.value) {
|
|
1046
|
+
return;
|
|
1047
|
+
}
|
|
1048
|
+
chartInstance.value.group = group != null ? group : "";
|
|
1049
|
+
}
|
|
1050
|
+
);
|
|
1051
|
+
watch(
|
|
1052
|
+
() => props.autoResize,
|
|
1053
|
+
async (enabled) => {
|
|
1054
|
+
stopAutoResize();
|
|
1055
|
+
if (enabled) {
|
|
1056
|
+
await nextTick();
|
|
1057
|
+
startAutoResize();
|
|
1058
|
+
resize();
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
);
|
|
1062
|
+
watch(
|
|
1063
|
+
() => props.theme,
|
|
1064
|
+
() => {
|
|
1065
|
+
reinitChart();
|
|
1066
|
+
},
|
|
1067
|
+
{ deep: true }
|
|
1068
|
+
);
|
|
1069
|
+
watch(
|
|
1070
|
+
() => props.initOptions,
|
|
1071
|
+
() => {
|
|
1072
|
+
reinitChart();
|
|
1073
|
+
},
|
|
1074
|
+
{ deep: true }
|
|
1075
|
+
);
|
|
1076
|
+
onMounted(async () => {
|
|
1077
|
+
await nextTick();
|
|
1078
|
+
createChart();
|
|
1079
|
+
setOption(props.option);
|
|
1080
|
+
syncLoading();
|
|
1081
|
+
startAutoResize();
|
|
1082
|
+
resize();
|
|
1083
|
+
});
|
|
1084
|
+
onUnmounted(() => {
|
|
1085
|
+
stopAutoResize();
|
|
1086
|
+
cancelResizeFrame();
|
|
1087
|
+
disposeChart();
|
|
1088
|
+
});
|
|
1089
|
+
__expose({
|
|
1090
|
+
getInstance,
|
|
1091
|
+
setOption,
|
|
1092
|
+
resize,
|
|
1093
|
+
dispatchAction,
|
|
1094
|
+
showLoading,
|
|
1095
|
+
hideLoading,
|
|
1096
|
+
clear,
|
|
1097
|
+
dispose,
|
|
1098
|
+
on,
|
|
1099
|
+
off
|
|
1100
|
+
});
|
|
1101
|
+
return (_ctx, _cache) => {
|
|
1102
|
+
return openBlock(), createElementBlock("div", {
|
|
1103
|
+
ref_key: "containerRef",
|
|
1104
|
+
ref: containerRef,
|
|
1105
|
+
class: "base-echart"
|
|
1106
|
+
}, [
|
|
1107
|
+
createElementVNode("div", {
|
|
1108
|
+
ref_key: "chartRef",
|
|
1109
|
+
ref: chartRef,
|
|
1110
|
+
class: "base-echart__inner"
|
|
1111
|
+
}, null, 512)
|
|
1112
|
+
], 512);
|
|
1113
|
+
};
|
|
1114
|
+
}
|
|
1115
|
+
});
|
|
1116
|
+
var BaseEChart = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-51bc4772"]]);
|
|
5
1117
|
const DEFAULT_SHEET_NAME = "Sheet1";
|
|
6
1118
|
const DEFAULT_COLUMN_WIDTH = 16;
|
|
1119
|
+
const EXCEL_MIME_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
7
1120
|
function getLeafCount(column) {
|
|
8
1121
|
var _a;
|
|
9
1122
|
if (!((_a = column.children) == null ? void 0 : _a.length)) {
|
|
@@ -89,13 +1202,23 @@ function buildColumnWidths(leafColumns, dataRows, defaultColumnWidth, autoWidth)
|
|
|
89
1202
|
return Math.max(maxWidth, getDisplayLength(row[columnIndex]));
|
|
90
1203
|
}, 0);
|
|
91
1204
|
const targetWidth = (_a = column.width) != null ? _a : autoWidth ? Math.max(defaultColumnWidth, headerWidth, dataWidth) : defaultColumnWidth;
|
|
92
|
-
return
|
|
1205
|
+
return targetWidth;
|
|
93
1206
|
});
|
|
94
1207
|
}
|
|
95
1208
|
function normalizeFileName(fileName) {
|
|
96
1209
|
return fileName.endsWith(".xlsx") ? fileName : `${fileName}.xlsx`;
|
|
97
1210
|
}
|
|
98
|
-
function
|
|
1211
|
+
function applyColumnWidths(worksheet, columnWidths) {
|
|
1212
|
+
columnWidths.forEach((width, index) => {
|
|
1213
|
+
worksheet.getColumn(index + 1).width = width;
|
|
1214
|
+
});
|
|
1215
|
+
}
|
|
1216
|
+
function applyMerges(worksheet, merges) {
|
|
1217
|
+
merges.forEach((range) => {
|
|
1218
|
+
worksheet.mergeCells(range.s.r + 1, range.s.c + 1, range.e.r + 1, range.e.c + 1);
|
|
1219
|
+
});
|
|
1220
|
+
}
|
|
1221
|
+
async function exportExcel(options) {
|
|
99
1222
|
const {
|
|
100
1223
|
fileName,
|
|
101
1224
|
sheetName = DEFAULT_SHEET_NAME,
|
|
@@ -109,12 +1232,17 @@ function exportExcel(options) {
|
|
|
109
1232
|
}
|
|
110
1233
|
const { headerRows, leafColumns, merges } = buildHeaderMatrix(columns);
|
|
111
1234
|
const dataRows = data.map((row, rowIndex) => leafColumns.map((column) => getCellValue(row, rowIndex, column)));
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
worksheet
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
1235
|
+
const columnWidths = buildColumnWidths(leafColumns, dataRows, defaultColumnWidth, autoWidth);
|
|
1236
|
+
const workbook = new ExcelJS.Workbook();
|
|
1237
|
+
const worksheet = workbook.addWorksheet(sheetName);
|
|
1238
|
+
[...headerRows, ...dataRows].forEach((row) => {
|
|
1239
|
+
worksheet.addRow(row);
|
|
1240
|
+
});
|
|
1241
|
+
applyMerges(worksheet, merges);
|
|
1242
|
+
applyColumnWidths(worksheet, columnWidths);
|
|
1243
|
+
const buffer = await workbook.xlsx.writeBuffer();
|
|
1244
|
+
const blob = new Blob([buffer], { type: EXCEL_MIME_TYPE });
|
|
1245
|
+
saveAs(blob, normalizeFileName(fileName));
|
|
118
1246
|
}
|
|
119
1247
|
const DEFAULT_EXPORT_FILE_NAME = "export-file";
|
|
120
1248
|
function getHeaderValue(headers, headerName) {
|
|
@@ -153,7 +1281,7 @@ function downloadExportResponse(response, fallbackFileName = "") {
|
|
|
153
1281
|
saveAs(toBlob(response.data), fileName);
|
|
154
1282
|
return fileName;
|
|
155
1283
|
}
|
|
156
|
-
const _sfc_main = defineComponent({
|
|
1284
|
+
const _sfc_main$7 = defineComponent({
|
|
157
1285
|
__name: "BaseExportButton",
|
|
158
1286
|
props: {
|
|
159
1287
|
label: {
|
|
@@ -251,7 +1379,7 @@ const _sfc_main = defineComponent({
|
|
|
251
1379
|
emit("start");
|
|
252
1380
|
try {
|
|
253
1381
|
if (exportMode.value === "excel" && props.excelOptions) {
|
|
254
|
-
exportExcel(props.excelOptions);
|
|
1382
|
+
await exportExcel(props.excelOptions);
|
|
255
1383
|
if (props.autoMessage) {
|
|
256
1384
|
ElMessage.success(props.successMessage);
|
|
257
1385
|
}
|
|
@@ -305,4 +1433,1868 @@ const _sfc_main = defineComponent({
|
|
|
305
1433
|
};
|
|
306
1434
|
}
|
|
307
1435
|
});
|
|
308
|
-
|
|
1436
|
+
var OutlinedInput_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
1437
|
+
const _hoisted_1$1 = { class: "outlined-input__suffix-text" };
|
|
1438
|
+
const _sfc_main$6 = defineComponent({
|
|
1439
|
+
...{
|
|
1440
|
+
name: "OutlinedInput",
|
|
1441
|
+
inheritAttrs: false
|
|
1442
|
+
},
|
|
1443
|
+
__name: "OutlinedInput",
|
|
1444
|
+
props: {
|
|
1445
|
+
value: { default: "" },
|
|
1446
|
+
disabled: { type: Boolean, default: false },
|
|
1447
|
+
regex: {},
|
|
1448
|
+
placeholder: { default: "" },
|
|
1449
|
+
label: { default: "" },
|
|
1450
|
+
maxlength: {},
|
|
1451
|
+
max: {},
|
|
1452
|
+
min: {},
|
|
1453
|
+
typeInput: { default: "text" },
|
|
1454
|
+
showPassword: { type: Boolean, default: false },
|
|
1455
|
+
isNumber: { type: Boolean, default: false },
|
|
1456
|
+
inputHeight: { default: 40 },
|
|
1457
|
+
isBorder: { type: Boolean, default: false },
|
|
1458
|
+
suffixText: { default: "" },
|
|
1459
|
+
clearable: { type: Boolean, default: false },
|
|
1460
|
+
showWordLimit: { type: Boolean, default: true },
|
|
1461
|
+
marginBottom: { default: 20 },
|
|
1462
|
+
paddingTop: { default: 20 }
|
|
1463
|
+
},
|
|
1464
|
+
emits: ["input", "update:value", "warning", "focus", "blur", "change", "clear"],
|
|
1465
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
1466
|
+
var _a;
|
|
1467
|
+
const DEFAULT_REGEX = /^\d+$/;
|
|
1468
|
+
const props = __props;
|
|
1469
|
+
const emit = __emit;
|
|
1470
|
+
const attrs = useAttrs();
|
|
1471
|
+
const inputRef = ref(null);
|
|
1472
|
+
const inputValue = ref((_a = props.value) != null ? _a : "");
|
|
1473
|
+
const focused = ref(false);
|
|
1474
|
+
watch(
|
|
1475
|
+
() => props.value,
|
|
1476
|
+
(value) => {
|
|
1477
|
+
inputValue.value = value != null ? value : "";
|
|
1478
|
+
},
|
|
1479
|
+
{ immediate: true }
|
|
1480
|
+
);
|
|
1481
|
+
const rootClass = computed(() => attrs.class);
|
|
1482
|
+
const rootStyle = computed(() => attrs.style);
|
|
1483
|
+
const inputAttrs = computed(() => {
|
|
1484
|
+
const { class: _class, style: _style, ...rest } = attrs;
|
|
1485
|
+
return rest;
|
|
1486
|
+
});
|
|
1487
|
+
const resolvedType = computed(() => props.typeInput || "text");
|
|
1488
|
+
const hasTextareaAutosize = computed(() => {
|
|
1489
|
+
const autosize = inputAttrs.value.autosize;
|
|
1490
|
+
return autosize !== void 0 && autosize !== false;
|
|
1491
|
+
});
|
|
1492
|
+
const containerClasses = computed(() => ({
|
|
1493
|
+
"outlined-input--bordered": props.isBorder,
|
|
1494
|
+
"outlined-input--textarea-default": resolvedType.value === "textarea" && !hasTextareaAutosize.value
|
|
1495
|
+
}));
|
|
1496
|
+
const containerStyle = computed(() => ({
|
|
1497
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
1498
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
1499
|
+
}));
|
|
1500
|
+
const inputStyle = computed(() => {
|
|
1501
|
+
if (resolvedType.value === "textarea") {
|
|
1502
|
+
return void 0;
|
|
1503
|
+
}
|
|
1504
|
+
return {
|
|
1505
|
+
height: `${props.inputHeight}px`
|
|
1506
|
+
};
|
|
1507
|
+
});
|
|
1508
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
1509
|
+
const hasContent = computed(() => hasFilledValue(inputValue.value));
|
|
1510
|
+
const labelClasses = computed(() => ({
|
|
1511
|
+
"outlined-input__label--floating": focused.value || hasContent.value,
|
|
1512
|
+
"outlined-input__label--placeholder": !focused.value && !hasContent.value,
|
|
1513
|
+
"outlined-input__label--filled": hasContent.value && !focused.value
|
|
1514
|
+
}));
|
|
1515
|
+
function handleModelValueUpdate(value) {
|
|
1516
|
+
const normalizedValue = normalizeValue(value);
|
|
1517
|
+
inputValue.value = normalizedValue;
|
|
1518
|
+
emitModelValue(normalizedValue);
|
|
1519
|
+
}
|
|
1520
|
+
function handleFocus(event) {
|
|
1521
|
+
focused.value = true;
|
|
1522
|
+
emit("focus", event);
|
|
1523
|
+
}
|
|
1524
|
+
function handleBlur(event) {
|
|
1525
|
+
focused.value = false;
|
|
1526
|
+
emitModelValue(inputValue.value);
|
|
1527
|
+
emit("blur", event);
|
|
1528
|
+
}
|
|
1529
|
+
function handleChange(value) {
|
|
1530
|
+
const normalizedValue = normalizeValue(value);
|
|
1531
|
+
inputValue.value = normalizedValue;
|
|
1532
|
+
emit("change", normalizedValue);
|
|
1533
|
+
}
|
|
1534
|
+
function handleClear() {
|
|
1535
|
+
emit("clear");
|
|
1536
|
+
}
|
|
1537
|
+
function emitModelValue(value) {
|
|
1538
|
+
emit("input", value);
|
|
1539
|
+
emit("update:value", value);
|
|
1540
|
+
}
|
|
1541
|
+
function normalizeValue(value) {
|
|
1542
|
+
const normalizedValue = value != null ? value : "";
|
|
1543
|
+
if (!props.isNumber) {
|
|
1544
|
+
return normalizedValue;
|
|
1545
|
+
}
|
|
1546
|
+
const nextText = String(normalizedValue);
|
|
1547
|
+
if (!nextText) {
|
|
1548
|
+
return "";
|
|
1549
|
+
}
|
|
1550
|
+
const regex = props.regex || DEFAULT_REGEX;
|
|
1551
|
+
if (!regex.test(nextText)) {
|
|
1552
|
+
emit("warning", nextText);
|
|
1553
|
+
return "";
|
|
1554
|
+
}
|
|
1555
|
+
return normalizedValue;
|
|
1556
|
+
}
|
|
1557
|
+
function hasFilledValue(value) {
|
|
1558
|
+
return value !== void 0 && value !== null && String(value) !== "";
|
|
1559
|
+
}
|
|
1560
|
+
function toCssValue(value) {
|
|
1561
|
+
if (typeof value === "number") {
|
|
1562
|
+
return `${value}px`;
|
|
1563
|
+
}
|
|
1564
|
+
return value;
|
|
1565
|
+
}
|
|
1566
|
+
__expose({
|
|
1567
|
+
focus: () => {
|
|
1568
|
+
var _a2;
|
|
1569
|
+
(_a2 = inputRef.value) == null ? void 0 : _a2.focus();
|
|
1570
|
+
},
|
|
1571
|
+
blur: () => {
|
|
1572
|
+
var _a2;
|
|
1573
|
+
(_a2 = inputRef.value) == null ? void 0 : _a2.blur();
|
|
1574
|
+
},
|
|
1575
|
+
clear: () => {
|
|
1576
|
+
var _a2;
|
|
1577
|
+
(_a2 = inputRef.value) == null ? void 0 : _a2.clear();
|
|
1578
|
+
},
|
|
1579
|
+
select: () => {
|
|
1580
|
+
var _a2;
|
|
1581
|
+
(_a2 = inputRef.value) == null ? void 0 : _a2.select();
|
|
1582
|
+
},
|
|
1583
|
+
getInputRef: () => inputRef.value
|
|
1584
|
+
});
|
|
1585
|
+
return (_ctx, _cache) => {
|
|
1586
|
+
const _component_el_input = resolveComponent("el-input");
|
|
1587
|
+
return openBlock(), createElementBlock("div", {
|
|
1588
|
+
class: normalizeClass(["outlined-input", [containerClasses.value, rootClass.value]]),
|
|
1589
|
+
style: normalizeStyle([containerStyle.value, rootStyle.value])
|
|
1590
|
+
}, [
|
|
1591
|
+
createVNode(_component_el_input, mergeProps({
|
|
1592
|
+
ref_key: "inputRef",
|
|
1593
|
+
ref: inputRef
|
|
1594
|
+
}, inputAttrs.value, {
|
|
1595
|
+
"model-value": inputValue.value,
|
|
1596
|
+
type: resolvedType.value,
|
|
1597
|
+
placeholder: __props.placeholder,
|
|
1598
|
+
disabled: __props.disabled,
|
|
1599
|
+
maxlength: __props.maxlength,
|
|
1600
|
+
max: __props.max,
|
|
1601
|
+
min: __props.min,
|
|
1602
|
+
"show-password": __props.showPassword,
|
|
1603
|
+
"show-word-limit": __props.showWordLimit,
|
|
1604
|
+
clearable: __props.clearable,
|
|
1605
|
+
style: inputStyle.value,
|
|
1606
|
+
"onUpdate:modelValue": handleModelValueUpdate,
|
|
1607
|
+
onFocus: handleFocus,
|
|
1608
|
+
onBlur: handleBlur,
|
|
1609
|
+
onChange: handleChange,
|
|
1610
|
+
onClear: handleClear
|
|
1611
|
+
}), createSlots({ _: 2 }, [
|
|
1612
|
+
_ctx.$slots.prefix ? {
|
|
1613
|
+
name: "prefix",
|
|
1614
|
+
fn: withCtx(() => [
|
|
1615
|
+
renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
|
|
1616
|
+
]),
|
|
1617
|
+
key: "0"
|
|
1618
|
+
} : void 0,
|
|
1619
|
+
_ctx.$slots.prepend ? {
|
|
1620
|
+
name: "prepend",
|
|
1621
|
+
fn: withCtx(() => [
|
|
1622
|
+
renderSlot(_ctx.$slots, "prepend", {}, void 0, true)
|
|
1623
|
+
]),
|
|
1624
|
+
key: "1"
|
|
1625
|
+
} : void 0,
|
|
1626
|
+
_ctx.$slots.append ? {
|
|
1627
|
+
name: "append",
|
|
1628
|
+
fn: withCtx(() => [
|
|
1629
|
+
renderSlot(_ctx.$slots, "append", {}, void 0, true)
|
|
1630
|
+
]),
|
|
1631
|
+
key: "2"
|
|
1632
|
+
} : void 0,
|
|
1633
|
+
_ctx.$slots.suffix || __props.suffixText ? {
|
|
1634
|
+
name: "suffix",
|
|
1635
|
+
fn: withCtx(() => [
|
|
1636
|
+
renderSlot(_ctx.$slots, "suffix", {}, () => [
|
|
1637
|
+
createElementVNode("span", _hoisted_1$1, toDisplayString(__props.suffixText), 1)
|
|
1638
|
+
], true)
|
|
1639
|
+
]),
|
|
1640
|
+
key: "3"
|
|
1641
|
+
} : void 0
|
|
1642
|
+
]), 1040, ["model-value", "type", "placeholder", "disabled", "maxlength", "max", "min", "show-password", "show-word-limit", "clearable", "style"]),
|
|
1643
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
1644
|
+
key: 0,
|
|
1645
|
+
class: normalizeClass(["outlined-input__label", labelClasses.value])
|
|
1646
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
1647
|
+
], 6);
|
|
1648
|
+
};
|
|
1649
|
+
}
|
|
1650
|
+
});
|
|
1651
|
+
var OutlinedInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-2bf89ccd"]]);
|
|
1652
|
+
var OutlinedSelect_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
1653
|
+
const _sfc_main$5 = defineComponent({
|
|
1654
|
+
...{
|
|
1655
|
+
name: "OutlinedSelect",
|
|
1656
|
+
inheritAttrs: false
|
|
1657
|
+
},
|
|
1658
|
+
__name: "OutlinedSelect",
|
|
1659
|
+
props: {
|
|
1660
|
+
value: { type: [String, Number, Boolean, Object, null, Array], default: void 0 },
|
|
1661
|
+
options: { default: () => [] },
|
|
1662
|
+
placeholder: { default: "" },
|
|
1663
|
+
label: { default: "" },
|
|
1664
|
+
disabled: { type: Boolean, default: false },
|
|
1665
|
+
typeInput: { default: "" },
|
|
1666
|
+
showPassword: { type: Boolean, default: false },
|
|
1667
|
+
collapseTags: { type: Boolean, default: false },
|
|
1668
|
+
collapseTagsTooltip: { type: Boolean, default: true },
|
|
1669
|
+
filterable: { type: Boolean, default: true },
|
|
1670
|
+
clearable: { type: Boolean, default: true },
|
|
1671
|
+
multiple: { type: Boolean, default: false },
|
|
1672
|
+
inputHeight: { default: 40 },
|
|
1673
|
+
isBorder: { type: Boolean, default: false },
|
|
1674
|
+
keyValue: { default: "value" },
|
|
1675
|
+
labelValue: { default: "label" },
|
|
1676
|
+
noCheck: { type: Boolean, default: false },
|
|
1677
|
+
maxCollapseTags: { default: 5 },
|
|
1678
|
+
marginBottom: { default: 20 },
|
|
1679
|
+
paddingTop: { default: 20 }
|
|
1680
|
+
},
|
|
1681
|
+
emits: ["input", "update:value", "change", "focus", "blur", "visible-change", "clear"],
|
|
1682
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
1683
|
+
const props = __props;
|
|
1684
|
+
const emit = __emit;
|
|
1685
|
+
const attrs = useAttrs();
|
|
1686
|
+
const slots = useSlots();
|
|
1687
|
+
const selectRef = ref(null);
|
|
1688
|
+
const selectValue = ref(normalizeSelectValue(props.value, props.multiple));
|
|
1689
|
+
const focused = ref(false);
|
|
1690
|
+
const blurred = ref(false);
|
|
1691
|
+
const visible = ref(false);
|
|
1692
|
+
watch(
|
|
1693
|
+
() => [props.value, props.multiple],
|
|
1694
|
+
([value, multiple]) => {
|
|
1695
|
+
selectValue.value = normalizeSelectValue(value, multiple);
|
|
1696
|
+
},
|
|
1697
|
+
{ immediate: true }
|
|
1698
|
+
);
|
|
1699
|
+
const rootClass = computed(() => attrs.class);
|
|
1700
|
+
const rootStyle = computed(() => attrs.style);
|
|
1701
|
+
const selectAttrs = computed(() => {
|
|
1702
|
+
const { class: _class, style: _style, ...rest } = attrs;
|
|
1703
|
+
return rest;
|
|
1704
|
+
});
|
|
1705
|
+
const containerClasses = computed(() => ({
|
|
1706
|
+
"outlined-select--bordered": props.isBorder
|
|
1707
|
+
}));
|
|
1708
|
+
const containerStyle = computed(() => ({
|
|
1709
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
1710
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
1711
|
+
}));
|
|
1712
|
+
const selectStyle = computed(() => ({
|
|
1713
|
+
minHeight: `${props.inputHeight}px`,
|
|
1714
|
+
height: props.multiple ? "auto" : `${props.inputHeight}px`
|
|
1715
|
+
}));
|
|
1716
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
1717
|
+
const hasCustomOptionsSlot = computed(() => Boolean(slots.default));
|
|
1718
|
+
const hasContent = computed(() => {
|
|
1719
|
+
if (props.multiple) {
|
|
1720
|
+
return Array.isArray(selectValue.value) && selectValue.value.length > 0;
|
|
1721
|
+
}
|
|
1722
|
+
return hasFilledValue(selectValue.value);
|
|
1723
|
+
});
|
|
1724
|
+
const shouldFloat = computed(() => props.noCheck ? focused.value : focused.value || hasContent.value);
|
|
1725
|
+
const labelClasses = computed(() => ({
|
|
1726
|
+
"outlined-select__label--floating": shouldFloat.value,
|
|
1727
|
+
"outlined-select__label--placeholder": !shouldFloat.value,
|
|
1728
|
+
"outlined-select__label--filled": !props.noCheck && hasContent.value && !focused.value
|
|
1729
|
+
}));
|
|
1730
|
+
function handleModelValueUpdate(value) {
|
|
1731
|
+
const normalizedValue = normalizeSelectValue(value, props.multiple);
|
|
1732
|
+
selectValue.value = normalizedValue;
|
|
1733
|
+
emitModelValue(normalizedValue);
|
|
1734
|
+
}
|
|
1735
|
+
function handleChange(value) {
|
|
1736
|
+
const normalizedValue = normalizeSelectValue(value, props.multiple);
|
|
1737
|
+
selectValue.value = normalizedValue;
|
|
1738
|
+
emit("change", normalizedValue);
|
|
1739
|
+
}
|
|
1740
|
+
function handleFocus(event) {
|
|
1741
|
+
blurred.value = false;
|
|
1742
|
+
focused.value = true;
|
|
1743
|
+
emit("focus", event);
|
|
1744
|
+
}
|
|
1745
|
+
function handleBlur(event) {
|
|
1746
|
+
blurred.value = true;
|
|
1747
|
+
if (!visible.value) {
|
|
1748
|
+
focused.value = false;
|
|
1749
|
+
emitModelValue(selectValue.value);
|
|
1750
|
+
}
|
|
1751
|
+
emit("blur", event);
|
|
1752
|
+
}
|
|
1753
|
+
function handleVisibleChange(nextVisible) {
|
|
1754
|
+
visible.value = nextVisible;
|
|
1755
|
+
if (!nextVisible && blurred.value) {
|
|
1756
|
+
focused.value = false;
|
|
1757
|
+
}
|
|
1758
|
+
emit("visible-change", nextVisible);
|
|
1759
|
+
}
|
|
1760
|
+
function handleClear() {
|
|
1761
|
+
emit("clear");
|
|
1762
|
+
}
|
|
1763
|
+
function emitModelValue(value) {
|
|
1764
|
+
emit("input", value);
|
|
1765
|
+
emit("update:value", value);
|
|
1766
|
+
}
|
|
1767
|
+
function normalizeSelectValue(value, multiple) {
|
|
1768
|
+
if (multiple) {
|
|
1769
|
+
if (Array.isArray(value)) {
|
|
1770
|
+
return value;
|
|
1771
|
+
}
|
|
1772
|
+
if (value === void 0 || value === null || value === "") {
|
|
1773
|
+
return [];
|
|
1774
|
+
}
|
|
1775
|
+
return [value];
|
|
1776
|
+
}
|
|
1777
|
+
return value != null ? value : "";
|
|
1778
|
+
}
|
|
1779
|
+
function resolveOptionLabel(option) {
|
|
1780
|
+
const label = option[props.labelValue];
|
|
1781
|
+
return label === void 0 || label === null ? "" : String(label);
|
|
1782
|
+
}
|
|
1783
|
+
function resolveOptionValue(option) {
|
|
1784
|
+
var _a;
|
|
1785
|
+
return (_a = option[props.keyValue]) != null ? _a : null;
|
|
1786
|
+
}
|
|
1787
|
+
function createOptionKey(option, index) {
|
|
1788
|
+
const value = resolveOptionValue(option);
|
|
1789
|
+
return `${index}-${typeof value === "object" ? JSON.stringify(value) : String(value)}`;
|
|
1790
|
+
}
|
|
1791
|
+
function hasFilledValue(value) {
|
|
1792
|
+
return value !== void 0 && value !== null && String(value) !== "";
|
|
1793
|
+
}
|
|
1794
|
+
function toCssValue(value) {
|
|
1795
|
+
if (typeof value === "number") {
|
|
1796
|
+
return `${value}px`;
|
|
1797
|
+
}
|
|
1798
|
+
return value;
|
|
1799
|
+
}
|
|
1800
|
+
__expose({
|
|
1801
|
+
focus: () => {
|
|
1802
|
+
var _a, _b;
|
|
1803
|
+
(_b = (_a = selectRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
1804
|
+
},
|
|
1805
|
+
blur: () => {
|
|
1806
|
+
var _a, _b;
|
|
1807
|
+
(_b = (_a = selectRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
|
|
1808
|
+
},
|
|
1809
|
+
clear: () => {
|
|
1810
|
+
var _a, _b;
|
|
1811
|
+
(_b = (_a = selectRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
|
|
1812
|
+
if (props.multiple) {
|
|
1813
|
+
selectValue.value = [];
|
|
1814
|
+
emitModelValue([]);
|
|
1815
|
+
emit("change", []);
|
|
1816
|
+
emit("clear");
|
|
1817
|
+
return;
|
|
1818
|
+
}
|
|
1819
|
+
selectValue.value = "";
|
|
1820
|
+
emitModelValue("");
|
|
1821
|
+
emit("change", "");
|
|
1822
|
+
emit("clear");
|
|
1823
|
+
},
|
|
1824
|
+
toggleMenu: () => {
|
|
1825
|
+
var _a, _b;
|
|
1826
|
+
(_b = (_a = selectRef.value) == null ? void 0 : _a.toggleMenu) == null ? void 0 : _b.call(_a);
|
|
1827
|
+
},
|
|
1828
|
+
getSelectRef: () => selectRef.value
|
|
1829
|
+
});
|
|
1830
|
+
return (_ctx, _cache) => {
|
|
1831
|
+
const _component_el_option = resolveComponent("el-option");
|
|
1832
|
+
const _component_el_select = resolveComponent("el-select");
|
|
1833
|
+
return openBlock(), createElementBlock("div", {
|
|
1834
|
+
class: normalizeClass(["outlined-select", [containerClasses.value, rootClass.value]]),
|
|
1835
|
+
style: normalizeStyle([containerStyle.value, rootStyle.value])
|
|
1836
|
+
}, [
|
|
1837
|
+
createVNode(_component_el_select, mergeProps({
|
|
1838
|
+
ref_key: "selectRef",
|
|
1839
|
+
ref: selectRef
|
|
1840
|
+
}, selectAttrs.value, {
|
|
1841
|
+
class: "outlined-select__control",
|
|
1842
|
+
"model-value": selectValue.value,
|
|
1843
|
+
placeholder: __props.placeholder,
|
|
1844
|
+
disabled: __props.disabled,
|
|
1845
|
+
multiple: __props.multiple,
|
|
1846
|
+
filterable: __props.filterable,
|
|
1847
|
+
clearable: __props.clearable,
|
|
1848
|
+
"collapse-tags": __props.collapseTags,
|
|
1849
|
+
"collapse-tags-tooltip": __props.collapseTagsTooltip,
|
|
1850
|
+
"max-collapse-tags": __props.maxCollapseTags,
|
|
1851
|
+
style: selectStyle.value,
|
|
1852
|
+
"onUpdate:modelValue": handleModelValueUpdate,
|
|
1853
|
+
onFocus: handleFocus,
|
|
1854
|
+
onBlur: handleBlur,
|
|
1855
|
+
onChange: handleChange,
|
|
1856
|
+
onVisibleChange: handleVisibleChange,
|
|
1857
|
+
onClear: handleClear
|
|
1858
|
+
}), {
|
|
1859
|
+
empty: withCtx(() => [
|
|
1860
|
+
renderSlot(_ctx.$slots, "empty", {}, void 0, true)
|
|
1861
|
+
]),
|
|
1862
|
+
header: withCtx(() => [
|
|
1863
|
+
renderSlot(_ctx.$slots, "header", {}, void 0, true)
|
|
1864
|
+
]),
|
|
1865
|
+
footer: withCtx(() => [
|
|
1866
|
+
renderSlot(_ctx.$slots, "footer", {}, void 0, true)
|
|
1867
|
+
]),
|
|
1868
|
+
tag: withCtx((slotProps) => [
|
|
1869
|
+
renderSlot(_ctx.$slots, "tag", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
|
|
1870
|
+
]),
|
|
1871
|
+
default: withCtx(() => [
|
|
1872
|
+
hasCustomOptionsSlot.value ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.options, (item, index) => {
|
|
1873
|
+
return openBlock(), createBlock(_component_el_option, {
|
|
1874
|
+
key: createOptionKey(item, index),
|
|
1875
|
+
label: resolveOptionLabel(item),
|
|
1876
|
+
value: resolveOptionValue(item),
|
|
1877
|
+
disabled: Boolean(item.disabled)
|
|
1878
|
+
}, null, 8, ["label", "value", "disabled"]);
|
|
1879
|
+
}), 128))
|
|
1880
|
+
]),
|
|
1881
|
+
_: 3
|
|
1882
|
+
}, 16, ["model-value", "placeholder", "disabled", "multiple", "filterable", "clearable", "collapse-tags", "collapse-tags-tooltip", "max-collapse-tags", "style"]),
|
|
1883
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
1884
|
+
key: 0,
|
|
1885
|
+
class: normalizeClass(["outlined-select__label", labelClasses.value])
|
|
1886
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
1887
|
+
], 6);
|
|
1888
|
+
};
|
|
1889
|
+
}
|
|
1890
|
+
});
|
|
1891
|
+
var OutlinedSelect = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-7bd2b5f2"]]);
|
|
1892
|
+
var OutlinedDatePicker_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
1893
|
+
const _sfc_main$4 = defineComponent({
|
|
1894
|
+
...{
|
|
1895
|
+
name: "OutlinedDatePicker",
|
|
1896
|
+
inheritAttrs: false
|
|
1897
|
+
},
|
|
1898
|
+
__name: "OutlinedDatePicker",
|
|
1899
|
+
props: {
|
|
1900
|
+
value: { default: "" },
|
|
1901
|
+
placeholder: { default: "" },
|
|
1902
|
+
label: { default: "" },
|
|
1903
|
+
disabled: { type: Boolean, default: false },
|
|
1904
|
+
timeValue: { type: Boolean, default: false },
|
|
1905
|
+
typeDate: { default: "date" },
|
|
1906
|
+
format: { default: "YYYY-MM-DD" },
|
|
1907
|
+
valueFormat: { default: "" },
|
|
1908
|
+
showPassword: { type: Boolean, default: false },
|
|
1909
|
+
multiple: { type: Boolean, default: false },
|
|
1910
|
+
inputHeight: { default: 40 },
|
|
1911
|
+
isBorder: { type: Boolean, default: false },
|
|
1912
|
+
disabledDate: { type: [String, Number, Date, Function], default: void 0 },
|
|
1913
|
+
marginBottom: { default: 20 },
|
|
1914
|
+
paddingTop: { default: 20 }
|
|
1915
|
+
},
|
|
1916
|
+
emits: ["input", "update:value", "change", "focus", "blur", "visible-change"],
|
|
1917
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
1918
|
+
var _a;
|
|
1919
|
+
const props = __props;
|
|
1920
|
+
const emit = __emit;
|
|
1921
|
+
const attrs = useAttrs();
|
|
1922
|
+
const pickerRef = ref(null);
|
|
1923
|
+
const pickerValue = ref((_a = props.value) != null ? _a : "");
|
|
1924
|
+
const focused = ref(false);
|
|
1925
|
+
const blurred = ref(false);
|
|
1926
|
+
const visible = ref(false);
|
|
1927
|
+
watch(
|
|
1928
|
+
() => props.value,
|
|
1929
|
+
(value) => {
|
|
1930
|
+
pickerValue.value = value != null ? value : "";
|
|
1931
|
+
},
|
|
1932
|
+
{ immediate: true }
|
|
1933
|
+
);
|
|
1934
|
+
const rootClass = computed(() => attrs.class);
|
|
1935
|
+
const rootStyle = computed(() => attrs.style);
|
|
1936
|
+
const resolvedValueFormat = computed(() => props.valueFormat || props.format);
|
|
1937
|
+
const resolvedDisabledDate = computed(() => createDisabledDateHandler(props.disabledDate));
|
|
1938
|
+
const resolvedDefaultTime = computed(() => {
|
|
1939
|
+
if (attrs.defaultTime !== void 0) {
|
|
1940
|
+
return attrs.defaultTime;
|
|
1941
|
+
}
|
|
1942
|
+
if (attrs["default-time"] !== void 0) {
|
|
1943
|
+
return attrs["default-time"];
|
|
1944
|
+
}
|
|
1945
|
+
return props.timeValue ? new Date().setHours(0, 0, 0, 0) : new Date();
|
|
1946
|
+
});
|
|
1947
|
+
const resolvedDisabledHours = computed(() => {
|
|
1948
|
+
if (attrs.disabledHours !== void 0) {
|
|
1949
|
+
return attrs.disabledHours;
|
|
1950
|
+
}
|
|
1951
|
+
if (attrs["disabled-hours"] !== void 0) {
|
|
1952
|
+
return attrs["disabled-hours"];
|
|
1953
|
+
}
|
|
1954
|
+
if (!shouldLimitCurrentTime()) {
|
|
1955
|
+
return void 0;
|
|
1956
|
+
}
|
|
1957
|
+
return () => {
|
|
1958
|
+
const hours = new Date().getHours();
|
|
1959
|
+
return Array.from({ length: hours }, (_, index) => index);
|
|
1960
|
+
};
|
|
1961
|
+
});
|
|
1962
|
+
const resolvedDisabledMinutes = computed(() => {
|
|
1963
|
+
if (attrs.disabledMinutes !== void 0) {
|
|
1964
|
+
return attrs.disabledMinutes;
|
|
1965
|
+
}
|
|
1966
|
+
if (attrs["disabled-minutes"] !== void 0) {
|
|
1967
|
+
return attrs["disabled-minutes"];
|
|
1968
|
+
}
|
|
1969
|
+
if (!shouldLimitCurrentTime()) {
|
|
1970
|
+
return void 0;
|
|
1971
|
+
}
|
|
1972
|
+
return () => {
|
|
1973
|
+
const minutes = new Date().getMinutes();
|
|
1974
|
+
return Array.from({ length: minutes }, (_, index) => index);
|
|
1975
|
+
};
|
|
1976
|
+
});
|
|
1977
|
+
const pickerAttrs = computed(() => {
|
|
1978
|
+
const { class: _class, style: _style, ...rest } = attrs;
|
|
1979
|
+
return {
|
|
1980
|
+
...rest,
|
|
1981
|
+
defaultTime: resolvedDefaultTime.value,
|
|
1982
|
+
disabledDate: resolvedDisabledDate.value,
|
|
1983
|
+
disabledHours: resolvedDisabledHours.value,
|
|
1984
|
+
disabledMinutes: resolvedDisabledMinutes.value
|
|
1985
|
+
};
|
|
1986
|
+
});
|
|
1987
|
+
const containerClasses = computed(() => ({
|
|
1988
|
+
"outlined-date-picker--bordered": props.isBorder
|
|
1989
|
+
}));
|
|
1990
|
+
const containerStyle = computed(() => ({
|
|
1991
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
1992
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
1993
|
+
}));
|
|
1994
|
+
const pickerStyle = computed(() => ({
|
|
1995
|
+
height: `${props.inputHeight}px`
|
|
1996
|
+
}));
|
|
1997
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
1998
|
+
const hasContent = computed(() => hasFilledValue(pickerValue.value));
|
|
1999
|
+
const labelClasses = computed(() => ({
|
|
2000
|
+
"outlined-date-picker__label--floating": focused.value || hasContent.value,
|
|
2001
|
+
"outlined-date-picker__label--placeholder": !focused.value && !hasContent.value,
|
|
2002
|
+
"outlined-date-picker__label--filled": hasContent.value && !focused.value
|
|
2003
|
+
}));
|
|
2004
|
+
function handleModelValueUpdate(value) {
|
|
2005
|
+
const normalizedValue = normalizeValue(value);
|
|
2006
|
+
pickerValue.value = normalizedValue;
|
|
2007
|
+
emitModelValue(normalizedValue);
|
|
2008
|
+
}
|
|
2009
|
+
function handleChange(value) {
|
|
2010
|
+
const normalizedValue = normalizeValue(value);
|
|
2011
|
+
pickerValue.value = normalizedValue;
|
|
2012
|
+
emit("change", normalizedValue);
|
|
2013
|
+
}
|
|
2014
|
+
function handleFocus(event) {
|
|
2015
|
+
blurred.value = false;
|
|
2016
|
+
focused.value = true;
|
|
2017
|
+
emit("focus", event);
|
|
2018
|
+
}
|
|
2019
|
+
function handleBlur(event) {
|
|
2020
|
+
blurred.value = true;
|
|
2021
|
+
if (!visible.value) {
|
|
2022
|
+
focused.value = false;
|
|
2023
|
+
emitModelValue(pickerValue.value);
|
|
2024
|
+
}
|
|
2025
|
+
emit("blur", event);
|
|
2026
|
+
}
|
|
2027
|
+
function handleVisibleChange(nextVisible) {
|
|
2028
|
+
visible.value = nextVisible;
|
|
2029
|
+
if (!nextVisible && blurred.value) {
|
|
2030
|
+
focused.value = false;
|
|
2031
|
+
}
|
|
2032
|
+
emit("visible-change", nextVisible);
|
|
2033
|
+
}
|
|
2034
|
+
function emitModelValue(value) {
|
|
2035
|
+
emit("input", value);
|
|
2036
|
+
emit("update:value", value);
|
|
2037
|
+
}
|
|
2038
|
+
function normalizeValue(value) {
|
|
2039
|
+
return value != null ? value : "";
|
|
2040
|
+
}
|
|
2041
|
+
function createDisabledDateHandler(disabledDate) {
|
|
2042
|
+
if (!disabledDate) {
|
|
2043
|
+
return void 0;
|
|
2044
|
+
}
|
|
2045
|
+
if (typeof disabledDate === "function") {
|
|
2046
|
+
return disabledDate;
|
|
2047
|
+
}
|
|
2048
|
+
const boundary = normalizeBoundary(disabledDate);
|
|
2049
|
+
return (value) => value.getTime() < boundary - 864e5;
|
|
2050
|
+
}
|
|
2051
|
+
function normalizeBoundary(value) {
|
|
2052
|
+
if (value === "nowDate") {
|
|
2053
|
+
return Date.now();
|
|
2054
|
+
}
|
|
2055
|
+
if (value instanceof Date) {
|
|
2056
|
+
return value.getTime();
|
|
2057
|
+
}
|
|
2058
|
+
if (typeof value === "number") {
|
|
2059
|
+
return value;
|
|
2060
|
+
}
|
|
2061
|
+
return new Date(value).getTime();
|
|
2062
|
+
}
|
|
2063
|
+
function shouldLimitCurrentTime() {
|
|
2064
|
+
return Boolean(props.disabledDate) && props.typeDate.toLowerCase().includes("time");
|
|
2065
|
+
}
|
|
2066
|
+
function hasFilledValue(value) {
|
|
2067
|
+
if (Array.isArray(value)) {
|
|
2068
|
+
return value.length > 0;
|
|
2069
|
+
}
|
|
2070
|
+
return value !== void 0 && value !== null && String(value) !== "";
|
|
2071
|
+
}
|
|
2072
|
+
function toCssValue(value) {
|
|
2073
|
+
if (typeof value === "number") {
|
|
2074
|
+
return `${value}px`;
|
|
2075
|
+
}
|
|
2076
|
+
return value;
|
|
2077
|
+
}
|
|
2078
|
+
__expose({
|
|
2079
|
+
focus: () => {
|
|
2080
|
+
var _a2, _b;
|
|
2081
|
+
(_b = (_a2 = pickerRef.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
|
|
2082
|
+
},
|
|
2083
|
+
blur: () => {
|
|
2084
|
+
var _a2, _b;
|
|
2085
|
+
(_b = (_a2 = pickerRef.value) == null ? void 0 : _a2.blur) == null ? void 0 : _b.call(_a2);
|
|
2086
|
+
},
|
|
2087
|
+
handleOpen: () => {
|
|
2088
|
+
var _a2, _b;
|
|
2089
|
+
(_b = (_a2 = pickerRef.value) == null ? void 0 : _a2.handleOpen) == null ? void 0 : _b.call(_a2);
|
|
2090
|
+
},
|
|
2091
|
+
handleClose: () => {
|
|
2092
|
+
var _a2, _b;
|
|
2093
|
+
(_b = (_a2 = pickerRef.value) == null ? void 0 : _a2.handleClose) == null ? void 0 : _b.call(_a2);
|
|
2094
|
+
},
|
|
2095
|
+
getPickerRef: () => pickerRef.value
|
|
2096
|
+
});
|
|
2097
|
+
return (_ctx, _cache) => {
|
|
2098
|
+
const _component_el_date_picker = resolveComponent("el-date-picker");
|
|
2099
|
+
return openBlock(), createElementBlock("div", {
|
|
2100
|
+
class: normalizeClass(["outlined-date-picker", [containerClasses.value, rootClass.value]]),
|
|
2101
|
+
style: normalizeStyle([containerStyle.value, rootStyle.value])
|
|
2102
|
+
}, [
|
|
2103
|
+
createVNode(_component_el_date_picker, mergeProps({
|
|
2104
|
+
ref_key: "pickerRef",
|
|
2105
|
+
ref: pickerRef
|
|
2106
|
+
}, pickerAttrs.value, {
|
|
2107
|
+
class: "outlined-date-picker__control",
|
|
2108
|
+
"model-value": pickerValue.value,
|
|
2109
|
+
type: __props.typeDate,
|
|
2110
|
+
format: __props.format,
|
|
2111
|
+
"value-format": resolvedValueFormat.value,
|
|
2112
|
+
placeholder: __props.placeholder,
|
|
2113
|
+
disabled: __props.disabled,
|
|
2114
|
+
style: pickerStyle.value,
|
|
2115
|
+
"onUpdate:modelValue": handleModelValueUpdate,
|
|
2116
|
+
onFocus: handleFocus,
|
|
2117
|
+
onBlur: handleBlur,
|
|
2118
|
+
onChange: handleChange,
|
|
2119
|
+
onVisibleChange: handleVisibleChange
|
|
2120
|
+
}), null, 16, ["model-value", "type", "format", "value-format", "placeholder", "disabled", "style"]),
|
|
2121
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
2122
|
+
key: 0,
|
|
2123
|
+
class: normalizeClass(["outlined-date-picker__label", labelClasses.value])
|
|
2124
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
2125
|
+
], 6);
|
|
2126
|
+
};
|
|
2127
|
+
}
|
|
2128
|
+
});
|
|
2129
|
+
var OutlinedDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c95a293c"]]);
|
|
2130
|
+
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
2131
|
+
var dayjs_min = { exports: {} };
|
|
2132
|
+
(function(module, exports) {
|
|
2133
|
+
!function(t, e) {
|
|
2134
|
+
module.exports = e();
|
|
2135
|
+
}(commonjsGlobal, function() {
|
|
2136
|
+
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
|
|
2137
|
+
var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
|
|
2138
|
+
return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
|
|
2139
|
+
} }, m = function(t2, e2, n2) {
|
|
2140
|
+
var r2 = String(t2);
|
|
2141
|
+
return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
|
|
2142
|
+
}, v = { s: m, z: function(t2) {
|
|
2143
|
+
var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
|
|
2144
|
+
return (e2 <= 0 ? "+" : "-") + m(r2, 2, "0") + ":" + m(i2, 2, "0");
|
|
2145
|
+
}, m: function t2(e2, n2) {
|
|
2146
|
+
if (e2.date() < n2.date())
|
|
2147
|
+
return -t2(n2, e2);
|
|
2148
|
+
var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, c), s2 = n2 - i2 < 0, u2 = e2.clone().add(r2 + (s2 ? -1 : 1), c);
|
|
2149
|
+
return +(-(r2 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
|
|
2150
|
+
}, a: function(t2) {
|
|
2151
|
+
return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
|
|
2152
|
+
}, p: function(t2) {
|
|
2153
|
+
return { M: c, y: h, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: f }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
|
|
2154
|
+
}, u: function(t2) {
|
|
2155
|
+
return void 0 === t2;
|
|
2156
|
+
} }, g = "en", D = {};
|
|
2157
|
+
D[g] = M;
|
|
2158
|
+
var p = "$isDayjsObject", S = function(t2) {
|
|
2159
|
+
return t2 instanceof _ || !(!t2 || !t2[p]);
|
|
2160
|
+
}, w = function t2(e2, n2, r2) {
|
|
2161
|
+
var i2;
|
|
2162
|
+
if (!e2)
|
|
2163
|
+
return g;
|
|
2164
|
+
if ("string" == typeof e2) {
|
|
2165
|
+
var s2 = e2.toLowerCase();
|
|
2166
|
+
D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
|
|
2167
|
+
var u2 = e2.split("-");
|
|
2168
|
+
if (!i2 && u2.length > 1)
|
|
2169
|
+
return t2(u2[0]);
|
|
2170
|
+
} else {
|
|
2171
|
+
var a2 = e2.name;
|
|
2172
|
+
D[a2] = e2, i2 = a2;
|
|
2173
|
+
}
|
|
2174
|
+
return !r2 && i2 && (g = i2), i2 || !r2 && g;
|
|
2175
|
+
}, O = function(t2, e2) {
|
|
2176
|
+
if (S(t2))
|
|
2177
|
+
return t2.clone();
|
|
2178
|
+
var n2 = "object" == typeof e2 ? e2 : {};
|
|
2179
|
+
return n2.date = t2, n2.args = arguments, new _(n2);
|
|
2180
|
+
}, b = v;
|
|
2181
|
+
b.l = w, b.i = S, b.w = function(t2, e2) {
|
|
2182
|
+
return O(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
|
|
2183
|
+
};
|
|
2184
|
+
var _ = function() {
|
|
2185
|
+
function M2(t2) {
|
|
2186
|
+
this.$L = w(t2.locale, null, true), this.parse(t2), this.$x = this.$x || t2.x || {}, this[p] = true;
|
|
2187
|
+
}
|
|
2188
|
+
var m2 = M2.prototype;
|
|
2189
|
+
return m2.parse = function(t2) {
|
|
2190
|
+
this.$d = function(t3) {
|
|
2191
|
+
var e2 = t3.date, n2 = t3.utc;
|
|
2192
|
+
if (null === e2)
|
|
2193
|
+
return new Date(NaN);
|
|
2194
|
+
if (b.u(e2))
|
|
2195
|
+
return new Date();
|
|
2196
|
+
if (e2 instanceof Date)
|
|
2197
|
+
return new Date(e2);
|
|
2198
|
+
if ("string" == typeof e2 && !/Z$/i.test(e2)) {
|
|
2199
|
+
var r2 = e2.match($);
|
|
2200
|
+
if (r2) {
|
|
2201
|
+
var i2 = r2[2] - 1 || 0, s2 = (r2[7] || "0").substring(0, 3);
|
|
2202
|
+
return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2);
|
|
2203
|
+
}
|
|
2204
|
+
}
|
|
2205
|
+
return new Date(e2);
|
|
2206
|
+
}(t2), this.init();
|
|
2207
|
+
}, m2.init = function() {
|
|
2208
|
+
var t2 = this.$d;
|
|
2209
|
+
this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
|
|
2210
|
+
}, m2.$utils = function() {
|
|
2211
|
+
return b;
|
|
2212
|
+
}, m2.isValid = function() {
|
|
2213
|
+
return !(this.$d.toString() === l);
|
|
2214
|
+
}, m2.isSame = function(t2, e2) {
|
|
2215
|
+
var n2 = O(t2);
|
|
2216
|
+
return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
|
|
2217
|
+
}, m2.isAfter = function(t2, e2) {
|
|
2218
|
+
return O(t2) < this.startOf(e2);
|
|
2219
|
+
}, m2.isBefore = function(t2, e2) {
|
|
2220
|
+
return this.endOf(e2) < O(t2);
|
|
2221
|
+
}, m2.$g = function(t2, e2, n2) {
|
|
2222
|
+
return b.u(t2) ? this[e2] : this.set(n2, t2);
|
|
2223
|
+
}, m2.unix = function() {
|
|
2224
|
+
return Math.floor(this.valueOf() / 1e3);
|
|
2225
|
+
}, m2.valueOf = function() {
|
|
2226
|
+
return this.$d.getTime();
|
|
2227
|
+
}, m2.startOf = function(t2, e2) {
|
|
2228
|
+
var n2 = this, r2 = !!b.u(e2) || e2, f2 = b.p(t2), l2 = function(t3, e3) {
|
|
2229
|
+
var i2 = b.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
|
|
2230
|
+
return r2 ? i2 : i2.endOf(a);
|
|
2231
|
+
}, $2 = function(t3, e3) {
|
|
2232
|
+
return b.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
|
|
2233
|
+
}, y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
|
|
2234
|
+
switch (f2) {
|
|
2235
|
+
case h:
|
|
2236
|
+
return r2 ? l2(1, 0) : l2(31, 11);
|
|
2237
|
+
case c:
|
|
2238
|
+
return r2 ? l2(1, M3) : l2(0, M3 + 1);
|
|
2239
|
+
case o:
|
|
2240
|
+
var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
|
|
2241
|
+
return l2(r2 ? m3 - D2 : m3 + (6 - D2), M3);
|
|
2242
|
+
case a:
|
|
2243
|
+
case d:
|
|
2244
|
+
return $2(v2 + "Hours", 0);
|
|
2245
|
+
case u:
|
|
2246
|
+
return $2(v2 + "Minutes", 1);
|
|
2247
|
+
case s:
|
|
2248
|
+
return $2(v2 + "Seconds", 2);
|
|
2249
|
+
case i:
|
|
2250
|
+
return $2(v2 + "Milliseconds", 3);
|
|
2251
|
+
default:
|
|
2252
|
+
return this.clone();
|
|
2253
|
+
}
|
|
2254
|
+
}, m2.endOf = function(t2) {
|
|
2255
|
+
return this.startOf(t2, false);
|
|
2256
|
+
}, m2.$set = function(t2, e2) {
|
|
2257
|
+
var n2, o2 = b.p(t2), f2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = f2 + "Date", n2[d] = f2 + "Date", n2[c] = f2 + "Month", n2[h] = f2 + "FullYear", n2[u] = f2 + "Hours", n2[s] = f2 + "Minutes", n2[i] = f2 + "Seconds", n2[r] = f2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
|
|
2258
|
+
if (o2 === c || o2 === h) {
|
|
2259
|
+
var y2 = this.clone().set(d, 1);
|
|
2260
|
+
y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
|
|
2261
|
+
} else
|
|
2262
|
+
l2 && this.$d[l2]($2);
|
|
2263
|
+
return this.init(), this;
|
|
2264
|
+
}, m2.set = function(t2, e2) {
|
|
2265
|
+
return this.clone().$set(t2, e2);
|
|
2266
|
+
}, m2.get = function(t2) {
|
|
2267
|
+
return this[b.p(t2)]();
|
|
2268
|
+
}, m2.add = function(r2, f2) {
|
|
2269
|
+
var d2, l2 = this;
|
|
2270
|
+
r2 = Number(r2);
|
|
2271
|
+
var $2 = b.p(f2), y2 = function(t2) {
|
|
2272
|
+
var e2 = O(l2);
|
|
2273
|
+
return b.w(e2.date(e2.date() + Math.round(t2 * r2)), l2);
|
|
2274
|
+
};
|
|
2275
|
+
if ($2 === c)
|
|
2276
|
+
return this.set(c, this.$M + r2);
|
|
2277
|
+
if ($2 === h)
|
|
2278
|
+
return this.set(h, this.$y + r2);
|
|
2279
|
+
if ($2 === a)
|
|
2280
|
+
return y2(1);
|
|
2281
|
+
if ($2 === o)
|
|
2282
|
+
return y2(7);
|
|
2283
|
+
var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r2 * M3;
|
|
2284
|
+
return b.w(m3, this);
|
|
2285
|
+
}, m2.subtract = function(t2, e2) {
|
|
2286
|
+
return this.add(-1 * t2, e2);
|
|
2287
|
+
}, m2.format = function(t2) {
|
|
2288
|
+
var e2 = this, n2 = this.$locale();
|
|
2289
|
+
if (!this.isValid())
|
|
2290
|
+
return n2.invalidDate || l;
|
|
2291
|
+
var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, c2 = n2.months, f2 = n2.meridiem, h2 = function(t3, n3, i3, s3) {
|
|
2292
|
+
return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s3);
|
|
2293
|
+
}, d2 = function(t3) {
|
|
2294
|
+
return b.s(s2 % 12 || 12, t3, "0");
|
|
2295
|
+
}, $2 = f2 || function(t3, e3, n3) {
|
|
2296
|
+
var r3 = t3 < 12 ? "AM" : "PM";
|
|
2297
|
+
return n3 ? r3.toLowerCase() : r3;
|
|
2298
|
+
};
|
|
2299
|
+
return r2.replace(y, function(t3, r3) {
|
|
2300
|
+
return r3 || function(t4) {
|
|
2301
|
+
switch (t4) {
|
|
2302
|
+
case "YY":
|
|
2303
|
+
return String(e2.$y).slice(-2);
|
|
2304
|
+
case "YYYY":
|
|
2305
|
+
return b.s(e2.$y, 4, "0");
|
|
2306
|
+
case "M":
|
|
2307
|
+
return a2 + 1;
|
|
2308
|
+
case "MM":
|
|
2309
|
+
return b.s(a2 + 1, 2, "0");
|
|
2310
|
+
case "MMM":
|
|
2311
|
+
return h2(n2.monthsShort, a2, c2, 3);
|
|
2312
|
+
case "MMMM":
|
|
2313
|
+
return h2(c2, a2);
|
|
2314
|
+
case "D":
|
|
2315
|
+
return e2.$D;
|
|
2316
|
+
case "DD":
|
|
2317
|
+
return b.s(e2.$D, 2, "0");
|
|
2318
|
+
case "d":
|
|
2319
|
+
return String(e2.$W);
|
|
2320
|
+
case "dd":
|
|
2321
|
+
return h2(n2.weekdaysMin, e2.$W, o2, 2);
|
|
2322
|
+
case "ddd":
|
|
2323
|
+
return h2(n2.weekdaysShort, e2.$W, o2, 3);
|
|
2324
|
+
case "dddd":
|
|
2325
|
+
return o2[e2.$W];
|
|
2326
|
+
case "H":
|
|
2327
|
+
return String(s2);
|
|
2328
|
+
case "HH":
|
|
2329
|
+
return b.s(s2, 2, "0");
|
|
2330
|
+
case "h":
|
|
2331
|
+
return d2(1);
|
|
2332
|
+
case "hh":
|
|
2333
|
+
return d2(2);
|
|
2334
|
+
case "a":
|
|
2335
|
+
return $2(s2, u2, true);
|
|
2336
|
+
case "A":
|
|
2337
|
+
return $2(s2, u2, false);
|
|
2338
|
+
case "m":
|
|
2339
|
+
return String(u2);
|
|
2340
|
+
case "mm":
|
|
2341
|
+
return b.s(u2, 2, "0");
|
|
2342
|
+
case "s":
|
|
2343
|
+
return String(e2.$s);
|
|
2344
|
+
case "ss":
|
|
2345
|
+
return b.s(e2.$s, 2, "0");
|
|
2346
|
+
case "SSS":
|
|
2347
|
+
return b.s(e2.$ms, 3, "0");
|
|
2348
|
+
case "Z":
|
|
2349
|
+
return i2;
|
|
2350
|
+
}
|
|
2351
|
+
return null;
|
|
2352
|
+
}(t3) || i2.replace(":", "");
|
|
2353
|
+
});
|
|
2354
|
+
}, m2.utcOffset = function() {
|
|
2355
|
+
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
|
|
2356
|
+
}, m2.diff = function(r2, d2, l2) {
|
|
2357
|
+
var $2, y2 = this, M3 = b.p(d2), m3 = O(r2), v2 = (m3.utcOffset() - this.utcOffset()) * e, g2 = this - m3, D2 = function() {
|
|
2358
|
+
return b.m(y2, m3);
|
|
2359
|
+
};
|
|
2360
|
+
switch (M3) {
|
|
2361
|
+
case h:
|
|
2362
|
+
$2 = D2() / 12;
|
|
2363
|
+
break;
|
|
2364
|
+
case c:
|
|
2365
|
+
$2 = D2();
|
|
2366
|
+
break;
|
|
2367
|
+
case f:
|
|
2368
|
+
$2 = D2() / 3;
|
|
2369
|
+
break;
|
|
2370
|
+
case o:
|
|
2371
|
+
$2 = (g2 - v2) / 6048e5;
|
|
2372
|
+
break;
|
|
2373
|
+
case a:
|
|
2374
|
+
$2 = (g2 - v2) / 864e5;
|
|
2375
|
+
break;
|
|
2376
|
+
case u:
|
|
2377
|
+
$2 = g2 / n;
|
|
2378
|
+
break;
|
|
2379
|
+
case s:
|
|
2380
|
+
$2 = g2 / e;
|
|
2381
|
+
break;
|
|
2382
|
+
case i:
|
|
2383
|
+
$2 = g2 / t;
|
|
2384
|
+
break;
|
|
2385
|
+
default:
|
|
2386
|
+
$2 = g2;
|
|
2387
|
+
}
|
|
2388
|
+
return l2 ? $2 : b.a($2);
|
|
2389
|
+
}, m2.daysInMonth = function() {
|
|
2390
|
+
return this.endOf(c).$D;
|
|
2391
|
+
}, m2.$locale = function() {
|
|
2392
|
+
return D[this.$L];
|
|
2393
|
+
}, m2.locale = function(t2, e2) {
|
|
2394
|
+
if (!t2)
|
|
2395
|
+
return this.$L;
|
|
2396
|
+
var n2 = this.clone(), r2 = w(t2, e2, true);
|
|
2397
|
+
return r2 && (n2.$L = r2), n2;
|
|
2398
|
+
}, m2.clone = function() {
|
|
2399
|
+
return b.w(this.$d, this);
|
|
2400
|
+
}, m2.toDate = function() {
|
|
2401
|
+
return new Date(this.valueOf());
|
|
2402
|
+
}, m2.toJSON = function() {
|
|
2403
|
+
return this.isValid() ? this.toISOString() : null;
|
|
2404
|
+
}, m2.toISOString = function() {
|
|
2405
|
+
return this.$d.toISOString();
|
|
2406
|
+
}, m2.toString = function() {
|
|
2407
|
+
return this.$d.toUTCString();
|
|
2408
|
+
}, M2;
|
|
2409
|
+
}(), k = _.prototype;
|
|
2410
|
+
return O.prototype = k, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function(t2) {
|
|
2411
|
+
k[t2[1]] = function(e2) {
|
|
2412
|
+
return this.$g(e2, t2[0], t2[1]);
|
|
2413
|
+
};
|
|
2414
|
+
}), O.extend = function(t2, e2) {
|
|
2415
|
+
return t2.$i || (t2(e2, _, O), t2.$i = true), O;
|
|
2416
|
+
}, O.locale = w, O.isDayjs = S, O.unix = function(t2) {
|
|
2417
|
+
return O(1e3 * t2);
|
|
2418
|
+
}, O.en = D[g], O.Ls = D, O.p = {}, O;
|
|
2419
|
+
});
|
|
2420
|
+
})(dayjs_min);
|
|
2421
|
+
var dayjs = dayjs_min.exports;
|
|
2422
|
+
var OutlinedDateTimePicker_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
2423
|
+
const _hoisted_1 = { class: "outlined-date-time-picker__separator" };
|
|
2424
|
+
const _sfc_main$3 = defineComponent({
|
|
2425
|
+
...{
|
|
2426
|
+
name: "OutlinedDateTimePicker",
|
|
2427
|
+
inheritAttrs: false
|
|
2428
|
+
},
|
|
2429
|
+
__name: "OutlinedDateTimePicker",
|
|
2430
|
+
props: {
|
|
2431
|
+
value: { default: "" },
|
|
2432
|
+
placeholder: { default: "" },
|
|
2433
|
+
label: { default: "" },
|
|
2434
|
+
inputHeight: { default: 40 },
|
|
2435
|
+
isBorder: { type: Boolean, default: false },
|
|
2436
|
+
disabledDate: { type: [String, Number, Date, Function], default: void 0 },
|
|
2437
|
+
separatorText: { default: "-" },
|
|
2438
|
+
timePlaceholder: { default: "\u65F6\u95F4" },
|
|
2439
|
+
clearable: { type: Boolean, default: false },
|
|
2440
|
+
marginBottom: { default: 20 },
|
|
2441
|
+
paddingTop: { default: 20 }
|
|
2442
|
+
},
|
|
2443
|
+
emits: ["input", "update:value", "change", "focus", "blur", "visible-change"],
|
|
2444
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
2445
|
+
const props = __props;
|
|
2446
|
+
const emit = __emit;
|
|
2447
|
+
const attrs = useAttrs();
|
|
2448
|
+
const datePickerRef = ref(null);
|
|
2449
|
+
const timePickerRef = ref(null);
|
|
2450
|
+
const dateValue = ref(null);
|
|
2451
|
+
const timeValue = ref(null);
|
|
2452
|
+
const dateFocused = ref(false);
|
|
2453
|
+
const timeFocused = ref(false);
|
|
2454
|
+
const dateBlurred = ref(false);
|
|
2455
|
+
const timeBlurred = ref(false);
|
|
2456
|
+
const dateVisible = ref(false);
|
|
2457
|
+
const timeVisible = ref(false);
|
|
2458
|
+
watch(
|
|
2459
|
+
() => props.value,
|
|
2460
|
+
(value) => {
|
|
2461
|
+
syncFromValue(value);
|
|
2462
|
+
},
|
|
2463
|
+
{ immediate: true }
|
|
2464
|
+
);
|
|
2465
|
+
const rootClass = computed(() => attrs.class);
|
|
2466
|
+
const rootStyle = computed(() => attrs.style);
|
|
2467
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
2468
|
+
const fieldClasses = computed(() => ({
|
|
2469
|
+
"outlined-date-time-picker__field--bordered": props.isBorder
|
|
2470
|
+
}));
|
|
2471
|
+
const fieldStyle = computed(() => ({
|
|
2472
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
2473
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
2474
|
+
}));
|
|
2475
|
+
const controlStyle = computed(() => ({
|
|
2476
|
+
height: `${props.inputHeight}px`
|
|
2477
|
+
}));
|
|
2478
|
+
const resolvedDisabledDate = computed(() => createDisabledDateHandler(props.disabledDate));
|
|
2479
|
+
const resolvedDisabledHours = computed(() => {
|
|
2480
|
+
if (!shouldLimitCurrentTime()) {
|
|
2481
|
+
return void 0;
|
|
2482
|
+
}
|
|
2483
|
+
return () => {
|
|
2484
|
+
const hours = new Date().getHours();
|
|
2485
|
+
return Array.from({ length: hours }, (_, index) => index);
|
|
2486
|
+
};
|
|
2487
|
+
});
|
|
2488
|
+
const resolvedDisabledMinutes = computed(() => {
|
|
2489
|
+
if (!shouldLimitCurrentTime()) {
|
|
2490
|
+
return void 0;
|
|
2491
|
+
}
|
|
2492
|
+
return () => {
|
|
2493
|
+
const minutes = new Date().getMinutes();
|
|
2494
|
+
return Array.from({ length: minutes }, (_, index) => index);
|
|
2495
|
+
};
|
|
2496
|
+
});
|
|
2497
|
+
const dateLabelClasses = computed(() => ({
|
|
2498
|
+
"outlined-date-time-picker__label--floating": dateFocused.value || Boolean(dateValue.value),
|
|
2499
|
+
"outlined-date-time-picker__label--placeholder": !dateFocused.value && !dateValue.value,
|
|
2500
|
+
"outlined-date-time-picker__label--filled": Boolean(dateValue.value) && !dateFocused.value
|
|
2501
|
+
}));
|
|
2502
|
+
const timeLabelClasses = computed(() => ({
|
|
2503
|
+
"outlined-date-time-picker__label--floating": timeFocused.value || Boolean(timeValue.value),
|
|
2504
|
+
"outlined-date-time-picker__label--placeholder": !timeFocused.value && !timeValue.value,
|
|
2505
|
+
"outlined-date-time-picker__label--filled": Boolean(timeValue.value) && !timeFocused.value
|
|
2506
|
+
}));
|
|
2507
|
+
function syncFromValue(value) {
|
|
2508
|
+
if (!value) {
|
|
2509
|
+
dateValue.value = null;
|
|
2510
|
+
timeValue.value = null;
|
|
2511
|
+
return;
|
|
2512
|
+
}
|
|
2513
|
+
const [datePart, timePart] = value.split(" ");
|
|
2514
|
+
dateValue.value = datePart || null;
|
|
2515
|
+
timeValue.value = timePart || null;
|
|
2516
|
+
}
|
|
2517
|
+
function handleDateUpdate(value) {
|
|
2518
|
+
dateValue.value = value || null;
|
|
2519
|
+
}
|
|
2520
|
+
function handleTimeUpdate(value) {
|
|
2521
|
+
timeValue.value = value || null;
|
|
2522
|
+
}
|
|
2523
|
+
function handleDateChange() {
|
|
2524
|
+
if (dateValue.value && !timeValue.value) {
|
|
2525
|
+
timeValue.value = dayjs().format("HH:mm");
|
|
2526
|
+
}
|
|
2527
|
+
emitCombinedValue();
|
|
2528
|
+
}
|
|
2529
|
+
function handleTimeChange() {
|
|
2530
|
+
emitCombinedValue();
|
|
2531
|
+
}
|
|
2532
|
+
function handleFocus(field) {
|
|
2533
|
+
return (event) => {
|
|
2534
|
+
if (field === "date") {
|
|
2535
|
+
dateBlurred.value = false;
|
|
2536
|
+
dateFocused.value = true;
|
|
2537
|
+
} else {
|
|
2538
|
+
timeBlurred.value = false;
|
|
2539
|
+
timeFocused.value = true;
|
|
2540
|
+
}
|
|
2541
|
+
emit("focus", { field, event });
|
|
2542
|
+
};
|
|
2543
|
+
}
|
|
2544
|
+
function handleBlur(field, event) {
|
|
2545
|
+
if (field === "date") {
|
|
2546
|
+
dateBlurred.value = true;
|
|
2547
|
+
if (!dateVisible.value) {
|
|
2548
|
+
dateFocused.value = false;
|
|
2549
|
+
emitCombinedValue();
|
|
2550
|
+
}
|
|
2551
|
+
} else {
|
|
2552
|
+
timeBlurred.value = true;
|
|
2553
|
+
if (!timeVisible.value) {
|
|
2554
|
+
timeFocused.value = false;
|
|
2555
|
+
emitCombinedValue();
|
|
2556
|
+
}
|
|
2557
|
+
}
|
|
2558
|
+
emit("blur", { field, event });
|
|
2559
|
+
}
|
|
2560
|
+
function handleVisibleChange(field, visible) {
|
|
2561
|
+
if (field === "date") {
|
|
2562
|
+
dateVisible.value = visible;
|
|
2563
|
+
if (!visible && dateBlurred.value) {
|
|
2564
|
+
dateFocused.value = false;
|
|
2565
|
+
}
|
|
2566
|
+
} else {
|
|
2567
|
+
timeVisible.value = visible;
|
|
2568
|
+
if (!visible && timeBlurred.value) {
|
|
2569
|
+
timeFocused.value = false;
|
|
2570
|
+
}
|
|
2571
|
+
}
|
|
2572
|
+
emit("visible-change", { field, visible });
|
|
2573
|
+
}
|
|
2574
|
+
function emitCombinedValue() {
|
|
2575
|
+
const value = dateValue.value && timeValue.value ? `${dateValue.value} ${timeValue.value}` : "";
|
|
2576
|
+
emit("input", value);
|
|
2577
|
+
emit("update:value", value);
|
|
2578
|
+
emit("change", value);
|
|
2579
|
+
}
|
|
2580
|
+
function createDisabledDateHandler(disabledDate) {
|
|
2581
|
+
if (!disabledDate) {
|
|
2582
|
+
return void 0;
|
|
2583
|
+
}
|
|
2584
|
+
if (typeof disabledDate === "function") {
|
|
2585
|
+
return disabledDate;
|
|
2586
|
+
}
|
|
2587
|
+
const boundary = normalizeBoundary(disabledDate);
|
|
2588
|
+
return (value) => value.getTime() < boundary - 864e5;
|
|
2589
|
+
}
|
|
2590
|
+
function normalizeBoundary(value) {
|
|
2591
|
+
if (value === "nowDate") {
|
|
2592
|
+
return Date.now();
|
|
2593
|
+
}
|
|
2594
|
+
if (value instanceof Date) {
|
|
2595
|
+
return value.getTime();
|
|
2596
|
+
}
|
|
2597
|
+
if (typeof value === "number") {
|
|
2598
|
+
return value;
|
|
2599
|
+
}
|
|
2600
|
+
return new Date(value).getTime();
|
|
2601
|
+
}
|
|
2602
|
+
function shouldLimitCurrentTime() {
|
|
2603
|
+
return Boolean(props.disabledDate) && dateValue.value === dayjs().format("YYYY-MM-DD");
|
|
2604
|
+
}
|
|
2605
|
+
function toCssValue(value) {
|
|
2606
|
+
if (typeof value === "number") {
|
|
2607
|
+
return `${value}px`;
|
|
2608
|
+
}
|
|
2609
|
+
return value;
|
|
2610
|
+
}
|
|
2611
|
+
__expose({
|
|
2612
|
+
focusDate: () => {
|
|
2613
|
+
var _a, _b;
|
|
2614
|
+
(_b = (_a = datePickerRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
2615
|
+
},
|
|
2616
|
+
focusTime: () => {
|
|
2617
|
+
var _a, _b;
|
|
2618
|
+
(_b = (_a = timePickerRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
2619
|
+
},
|
|
2620
|
+
blurDate: () => {
|
|
2621
|
+
var _a, _b;
|
|
2622
|
+
(_b = (_a = datePickerRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
|
|
2623
|
+
},
|
|
2624
|
+
blurTime: () => {
|
|
2625
|
+
var _a, _b;
|
|
2626
|
+
(_b = (_a = timePickerRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
|
|
2627
|
+
},
|
|
2628
|
+
openDatePanel: () => {
|
|
2629
|
+
var _a, _b;
|
|
2630
|
+
(_b = (_a = datePickerRef.value) == null ? void 0 : _a.handleOpen) == null ? void 0 : _b.call(_a);
|
|
2631
|
+
},
|
|
2632
|
+
openTimePanel: () => {
|
|
2633
|
+
var _a, _b;
|
|
2634
|
+
(_b = (_a = timePickerRef.value) == null ? void 0 : _a.handleOpen) == null ? void 0 : _b.call(_a);
|
|
2635
|
+
},
|
|
2636
|
+
getDatePickerRef: () => datePickerRef.value,
|
|
2637
|
+
getTimePickerRef: () => timePickerRef.value
|
|
2638
|
+
});
|
|
2639
|
+
return (_ctx, _cache) => {
|
|
2640
|
+
const _component_el_date_picker = resolveComponent("el-date-picker");
|
|
2641
|
+
const _component_el_time_picker = resolveComponent("el-time-picker");
|
|
2642
|
+
return openBlock(), createElementBlock("div", {
|
|
2643
|
+
class: normalizeClass(["outlined-date-time-picker", [rootClass.value]]),
|
|
2644
|
+
style: normalizeStyle(rootStyle.value)
|
|
2645
|
+
}, [
|
|
2646
|
+
createElementVNode("div", {
|
|
2647
|
+
class: normalizeClass(["outlined-date-time-picker__field", fieldClasses.value]),
|
|
2648
|
+
style: normalizeStyle(fieldStyle.value)
|
|
2649
|
+
}, [
|
|
2650
|
+
createVNode(_component_el_date_picker, {
|
|
2651
|
+
ref_key: "datePickerRef",
|
|
2652
|
+
ref: datePickerRef,
|
|
2653
|
+
class: "outlined-date-time-picker__control",
|
|
2654
|
+
"model-value": dateValue.value,
|
|
2655
|
+
type: "date",
|
|
2656
|
+
format: "YYYY-MM-DD",
|
|
2657
|
+
"value-format": "YYYY-MM-DD",
|
|
2658
|
+
placeholder: __props.placeholder,
|
|
2659
|
+
clearable: __props.clearable,
|
|
2660
|
+
"disabled-date": resolvedDisabledDate.value,
|
|
2661
|
+
style: normalizeStyle(controlStyle.value),
|
|
2662
|
+
"onUpdate:modelValue": handleDateUpdate,
|
|
2663
|
+
onFocus: _cache[0] || (_cache[0] = ($event) => handleFocus("date")),
|
|
2664
|
+
onBlur: _cache[1] || (_cache[1] = ($event) => handleBlur("date", $event)),
|
|
2665
|
+
onChange: handleDateChange,
|
|
2666
|
+
onVisibleChange: _cache[2] || (_cache[2] = ($event) => handleVisibleChange("date", $event))
|
|
2667
|
+
}, null, 8, ["model-value", "placeholder", "clearable", "disabled-date", "style"]),
|
|
2668
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
2669
|
+
key: 0,
|
|
2670
|
+
class: normalizeClass(["outlined-date-time-picker__label", dateLabelClasses.value])
|
|
2671
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
2672
|
+
], 6),
|
|
2673
|
+
createElementVNode("span", _hoisted_1, toDisplayString(__props.separatorText), 1),
|
|
2674
|
+
createElementVNode("div", {
|
|
2675
|
+
class: normalizeClass(["outlined-date-time-picker__field", fieldClasses.value]),
|
|
2676
|
+
style: normalizeStyle(fieldStyle.value)
|
|
2677
|
+
}, [
|
|
2678
|
+
createVNode(_component_el_time_picker, {
|
|
2679
|
+
ref_key: "timePickerRef",
|
|
2680
|
+
ref: timePickerRef,
|
|
2681
|
+
class: "outlined-date-time-picker__control",
|
|
2682
|
+
"model-value": timeValue.value,
|
|
2683
|
+
format: "HH:mm",
|
|
2684
|
+
"value-format": "HH:mm",
|
|
2685
|
+
placeholder: __props.timePlaceholder,
|
|
2686
|
+
clearable: __props.clearable,
|
|
2687
|
+
disabled: !dateValue.value,
|
|
2688
|
+
"disabled-hours": resolvedDisabledHours.value,
|
|
2689
|
+
"disabled-minutes": resolvedDisabledMinutes.value,
|
|
2690
|
+
style: normalizeStyle(controlStyle.value),
|
|
2691
|
+
"onUpdate:modelValue": handleTimeUpdate,
|
|
2692
|
+
onFocus: _cache[3] || (_cache[3] = ($event) => handleFocus("time")),
|
|
2693
|
+
onBlur: _cache[4] || (_cache[4] = ($event) => handleBlur("time", $event)),
|
|
2694
|
+
onChange: handleTimeChange,
|
|
2695
|
+
onVisibleChange: _cache[5] || (_cache[5] = ($event) => handleVisibleChange("time", $event))
|
|
2696
|
+
}, null, 8, ["model-value", "placeholder", "clearable", "disabled", "disabled-hours", "disabled-minutes", "style"]),
|
|
2697
|
+
createElementVNode("div", {
|
|
2698
|
+
class: normalizeClass(["outlined-date-time-picker__label", timeLabelClasses.value])
|
|
2699
|
+
}, toDisplayString(__props.timePlaceholder), 3)
|
|
2700
|
+
], 6)
|
|
2701
|
+
], 6);
|
|
2702
|
+
};
|
|
2703
|
+
}
|
|
2704
|
+
});
|
|
2705
|
+
var OutlinedDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f2fefd22"]]);
|
|
2706
|
+
var OutlinedTimePicker_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
2707
|
+
const _sfc_main$2 = defineComponent({
|
|
2708
|
+
...{
|
|
2709
|
+
name: "OutlinedTimePicker",
|
|
2710
|
+
inheritAttrs: false
|
|
2711
|
+
},
|
|
2712
|
+
__name: "OutlinedTimePicker",
|
|
2713
|
+
props: {
|
|
2714
|
+
value: { default: "" },
|
|
2715
|
+
placeholder: { default: "" },
|
|
2716
|
+
label: { default: "" },
|
|
2717
|
+
disabled: { type: Boolean, default: false },
|
|
2718
|
+
clearable: { type: Boolean, default: true },
|
|
2719
|
+
isRange: { type: Boolean, default: false },
|
|
2720
|
+
startPlaceholder: { default: "\u5F00\u59CB\u65F6\u95F4" },
|
|
2721
|
+
endPlaceholder: { default: "\u7ED3\u675F\u65F6\u95F4" },
|
|
2722
|
+
rangeSeparator: { default: "-" },
|
|
2723
|
+
format: { default: "HH:mm" },
|
|
2724
|
+
valueFormat: { default: "" },
|
|
2725
|
+
arrowControl: { type: Boolean, default: false },
|
|
2726
|
+
inputHeight: { default: 40 },
|
|
2727
|
+
isBorder: { type: Boolean, default: false },
|
|
2728
|
+
marginBottom: { default: 20 },
|
|
2729
|
+
paddingTop: { default: 20 }
|
|
2730
|
+
},
|
|
2731
|
+
emits: ["input", "update:value", "change", "focus", "blur", "visible-change", "clear"],
|
|
2732
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
2733
|
+
const props = __props;
|
|
2734
|
+
const emit = __emit;
|
|
2735
|
+
const attrs = useAttrs();
|
|
2736
|
+
const pickerRef = ref(null);
|
|
2737
|
+
const pickerValue = ref(normalizeValue(props.value, props.isRange));
|
|
2738
|
+
const focused = ref(false);
|
|
2739
|
+
const blurred = ref(false);
|
|
2740
|
+
const visible = ref(false);
|
|
2741
|
+
watch(
|
|
2742
|
+
() => [props.value, props.isRange],
|
|
2743
|
+
([value, isRange]) => {
|
|
2744
|
+
pickerValue.value = normalizeValue(value, isRange);
|
|
2745
|
+
},
|
|
2746
|
+
{ immediate: true }
|
|
2747
|
+
);
|
|
2748
|
+
const rootClass = computed(() => attrs.class);
|
|
2749
|
+
const rootStyle = computed(() => attrs.style);
|
|
2750
|
+
const resolvedValueFormat = computed(() => props.valueFormat || props.format);
|
|
2751
|
+
const pickerAttrs = computed(() => {
|
|
2752
|
+
const { class: _class, style: _style, ...rest } = attrs;
|
|
2753
|
+
return rest;
|
|
2754
|
+
});
|
|
2755
|
+
const containerClasses = computed(() => ({
|
|
2756
|
+
"outlined-time-picker--bordered": props.isBorder
|
|
2757
|
+
}));
|
|
2758
|
+
const containerStyle = computed(() => ({
|
|
2759
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
2760
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
2761
|
+
}));
|
|
2762
|
+
const pickerStyle = computed(() => ({
|
|
2763
|
+
height: `${props.inputHeight}px`
|
|
2764
|
+
}));
|
|
2765
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
2766
|
+
const hasContent = computed(() => {
|
|
2767
|
+
if (Array.isArray(pickerValue.value)) {
|
|
2768
|
+
return pickerValue.value.length > 0;
|
|
2769
|
+
}
|
|
2770
|
+
return hasFilledValue(pickerValue.value);
|
|
2771
|
+
});
|
|
2772
|
+
const labelClasses = computed(() => ({
|
|
2773
|
+
"outlined-time-picker__label--floating": focused.value || hasContent.value,
|
|
2774
|
+
"outlined-time-picker__label--placeholder": !focused.value && !hasContent.value,
|
|
2775
|
+
"outlined-time-picker__label--filled": hasContent.value && !focused.value
|
|
2776
|
+
}));
|
|
2777
|
+
function handleModelValueUpdate(value) {
|
|
2778
|
+
const normalizedValue = normalizeValue(value, props.isRange);
|
|
2779
|
+
pickerValue.value = normalizedValue;
|
|
2780
|
+
emitModelValue(normalizedValue);
|
|
2781
|
+
}
|
|
2782
|
+
function handleChange(value) {
|
|
2783
|
+
const normalizedValue = normalizeValue(value, props.isRange);
|
|
2784
|
+
pickerValue.value = normalizedValue;
|
|
2785
|
+
emit("change", normalizedValue);
|
|
2786
|
+
}
|
|
2787
|
+
function handleFocus(event) {
|
|
2788
|
+
blurred.value = false;
|
|
2789
|
+
focused.value = true;
|
|
2790
|
+
emit("focus", event);
|
|
2791
|
+
}
|
|
2792
|
+
function handleBlur(event) {
|
|
2793
|
+
blurred.value = true;
|
|
2794
|
+
if (!visible.value) {
|
|
2795
|
+
focused.value = false;
|
|
2796
|
+
emitModelValue(pickerValue.value);
|
|
2797
|
+
}
|
|
2798
|
+
emit("blur", event);
|
|
2799
|
+
}
|
|
2800
|
+
function handleVisibleChange(nextVisible) {
|
|
2801
|
+
visible.value = nextVisible;
|
|
2802
|
+
if (!nextVisible && blurred.value) {
|
|
2803
|
+
focused.value = false;
|
|
2804
|
+
}
|
|
2805
|
+
emit("visible-change", nextVisible);
|
|
2806
|
+
}
|
|
2807
|
+
function handleClear() {
|
|
2808
|
+
emit("clear");
|
|
2809
|
+
}
|
|
2810
|
+
function emitModelValue(value) {
|
|
2811
|
+
emit("input", value);
|
|
2812
|
+
emit("update:value", value);
|
|
2813
|
+
}
|
|
2814
|
+
function normalizeValue(value, isRange) {
|
|
2815
|
+
if (isRange) {
|
|
2816
|
+
if (Array.isArray(value)) {
|
|
2817
|
+
return value;
|
|
2818
|
+
}
|
|
2819
|
+
if (value === void 0 || value === null || value === "") {
|
|
2820
|
+
return [];
|
|
2821
|
+
}
|
|
2822
|
+
return [value];
|
|
2823
|
+
}
|
|
2824
|
+
return value != null ? value : "";
|
|
2825
|
+
}
|
|
2826
|
+
function hasFilledValue(value) {
|
|
2827
|
+
return value !== void 0 && value !== null && String(value) !== "";
|
|
2828
|
+
}
|
|
2829
|
+
function toCssValue(value) {
|
|
2830
|
+
if (typeof value === "number") {
|
|
2831
|
+
return `${value}px`;
|
|
2832
|
+
}
|
|
2833
|
+
return value;
|
|
2834
|
+
}
|
|
2835
|
+
__expose({
|
|
2836
|
+
focus: () => {
|
|
2837
|
+
var _a, _b;
|
|
2838
|
+
(_b = (_a = pickerRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
2839
|
+
},
|
|
2840
|
+
blur: () => {
|
|
2841
|
+
var _a, _b;
|
|
2842
|
+
(_b = (_a = pickerRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
|
|
2843
|
+
},
|
|
2844
|
+
handleOpen: () => {
|
|
2845
|
+
var _a, _b;
|
|
2846
|
+
(_b = (_a = pickerRef.value) == null ? void 0 : _a.handleOpen) == null ? void 0 : _b.call(_a);
|
|
2847
|
+
},
|
|
2848
|
+
handleClose: () => {
|
|
2849
|
+
var _a, _b;
|
|
2850
|
+
(_b = (_a = pickerRef.value) == null ? void 0 : _a.handleClose) == null ? void 0 : _b.call(_a);
|
|
2851
|
+
},
|
|
2852
|
+
clear: () => {
|
|
2853
|
+
const emptyValue = props.isRange ? [] : "";
|
|
2854
|
+
pickerValue.value = emptyValue;
|
|
2855
|
+
emitModelValue(emptyValue);
|
|
2856
|
+
emit("change", emptyValue);
|
|
2857
|
+
emit("clear");
|
|
2858
|
+
},
|
|
2859
|
+
getPickerRef: () => pickerRef.value
|
|
2860
|
+
});
|
|
2861
|
+
return (_ctx, _cache) => {
|
|
2862
|
+
const _component_el_time_picker = resolveComponent("el-time-picker");
|
|
2863
|
+
return openBlock(), createElementBlock("div", {
|
|
2864
|
+
class: normalizeClass(["outlined-time-picker", [containerClasses.value, rootClass.value]]),
|
|
2865
|
+
style: normalizeStyle([containerStyle.value, rootStyle.value])
|
|
2866
|
+
}, [
|
|
2867
|
+
createVNode(_component_el_time_picker, mergeProps({
|
|
2868
|
+
ref_key: "pickerRef",
|
|
2869
|
+
ref: pickerRef
|
|
2870
|
+
}, pickerAttrs.value, {
|
|
2871
|
+
class: "outlined-time-picker__control",
|
|
2872
|
+
"model-value": pickerValue.value,
|
|
2873
|
+
"is-range": __props.isRange,
|
|
2874
|
+
format: __props.format,
|
|
2875
|
+
"value-format": resolvedValueFormat.value,
|
|
2876
|
+
placeholder: __props.placeholder,
|
|
2877
|
+
"start-placeholder": __props.startPlaceholder,
|
|
2878
|
+
"end-placeholder": __props.endPlaceholder,
|
|
2879
|
+
"range-separator": __props.rangeSeparator,
|
|
2880
|
+
disabled: __props.disabled,
|
|
2881
|
+
clearable: __props.clearable,
|
|
2882
|
+
"arrow-control": __props.arrowControl,
|
|
2883
|
+
style: pickerStyle.value,
|
|
2884
|
+
"onUpdate:modelValue": handleModelValueUpdate,
|
|
2885
|
+
onFocus: handleFocus,
|
|
2886
|
+
onBlur: handleBlur,
|
|
2887
|
+
onChange: handleChange,
|
|
2888
|
+
onVisibleChange: handleVisibleChange,
|
|
2889
|
+
onClear: handleClear
|
|
2890
|
+
}), null, 16, ["model-value", "is-range", "format", "value-format", "placeholder", "start-placeholder", "end-placeholder", "range-separator", "disabled", "clearable", "arrow-control", "style"]),
|
|
2891
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
2892
|
+
key: 0,
|
|
2893
|
+
class: normalizeClass(["outlined-time-picker__label", labelClasses.value])
|
|
2894
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
2895
|
+
], 6);
|
|
2896
|
+
};
|
|
2897
|
+
}
|
|
2898
|
+
});
|
|
2899
|
+
var OutlinedTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-6a467b88"]]);
|
|
2900
|
+
var OutlinedCascader_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
2901
|
+
const _sfc_main$1 = defineComponent({
|
|
2902
|
+
...{
|
|
2903
|
+
name: "OutlinedCascader",
|
|
2904
|
+
inheritAttrs: false
|
|
2905
|
+
},
|
|
2906
|
+
__name: "OutlinedCascader",
|
|
2907
|
+
props: {
|
|
2908
|
+
value: { default: () => [] },
|
|
2909
|
+
options: { default: () => [] },
|
|
2910
|
+
clearable: { type: Boolean, default: false },
|
|
2911
|
+
propsValue: { default: void 0 },
|
|
2912
|
+
placeholder: { default: "" },
|
|
2913
|
+
label: { default: "" },
|
|
2914
|
+
popperClass: { default: "" },
|
|
2915
|
+
disabled: { type: Boolean, default: false },
|
|
2916
|
+
inputHeight: { default: 40 },
|
|
2917
|
+
isBorder: { type: Boolean, default: false },
|
|
2918
|
+
filterable: { type: Boolean, default: true },
|
|
2919
|
+
levels: { type: Boolean, default: true },
|
|
2920
|
+
marginBottom: { default: 20 },
|
|
2921
|
+
paddingTop: { default: 20 }
|
|
2922
|
+
},
|
|
2923
|
+
emits: ["input", "update:value", "change", "focus", "blur", "visible-change"],
|
|
2924
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
2925
|
+
const props = __props;
|
|
2926
|
+
const emit = __emit;
|
|
2927
|
+
const attrs = useAttrs();
|
|
2928
|
+
const cascaderRef = ref(null);
|
|
2929
|
+
const cascaderValue = ref(normalizeValue(props.value));
|
|
2930
|
+
const focused = ref(false);
|
|
2931
|
+
const blurred = ref(false);
|
|
2932
|
+
const visible = ref(false);
|
|
2933
|
+
watch(
|
|
2934
|
+
() => props.value,
|
|
2935
|
+
(value) => {
|
|
2936
|
+
cascaderValue.value = normalizeValue(value);
|
|
2937
|
+
},
|
|
2938
|
+
{ immediate: true }
|
|
2939
|
+
);
|
|
2940
|
+
const rootClass = computed(() => attrs.class);
|
|
2941
|
+
const rootStyle = computed(() => attrs.style);
|
|
2942
|
+
const cascaderAttrs = computed(() => {
|
|
2943
|
+
const { class: _class, style: _style, ...rest } = attrs;
|
|
2944
|
+
return rest;
|
|
2945
|
+
});
|
|
2946
|
+
const containerClasses = computed(() => ({
|
|
2947
|
+
"outlined-cascader--bordered": props.isBorder
|
|
2948
|
+
}));
|
|
2949
|
+
const containerStyle = computed(() => ({
|
|
2950
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
2951
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
2952
|
+
}));
|
|
2953
|
+
const cascaderStyle = computed(() => ({
|
|
2954
|
+
width: "100%",
|
|
2955
|
+
height: `${props.inputHeight}px`
|
|
2956
|
+
}));
|
|
2957
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
2958
|
+
const hasContent = computed(() => cascaderValue.value.length > 0);
|
|
2959
|
+
const labelClasses = computed(() => ({
|
|
2960
|
+
"outlined-cascader__label--floating": focused.value || hasContent.value,
|
|
2961
|
+
"outlined-cascader__label--placeholder": !focused.value && !hasContent.value,
|
|
2962
|
+
"outlined-cascader__label--filled": hasContent.value && !focused.value
|
|
2963
|
+
}));
|
|
2964
|
+
function handleModelValueUpdate(value) {
|
|
2965
|
+
const normalizedValue = normalizeValue(value);
|
|
2966
|
+
cascaderValue.value = normalizedValue;
|
|
2967
|
+
emitModelValue(normalizedValue);
|
|
2968
|
+
}
|
|
2969
|
+
function handleChange(value) {
|
|
2970
|
+
const normalizedValue = normalizeValue(value);
|
|
2971
|
+
cascaderValue.value = normalizedValue;
|
|
2972
|
+
emit("change", normalizedValue);
|
|
2973
|
+
}
|
|
2974
|
+
function handleFocus(event) {
|
|
2975
|
+
blurred.value = false;
|
|
2976
|
+
focused.value = true;
|
|
2977
|
+
emit("focus", event);
|
|
2978
|
+
}
|
|
2979
|
+
function handleBlur(event) {
|
|
2980
|
+
blurred.value = true;
|
|
2981
|
+
if (!visible.value) {
|
|
2982
|
+
focused.value = false;
|
|
2983
|
+
emitModelValue(cascaderValue.value);
|
|
2984
|
+
}
|
|
2985
|
+
emit("blur", event);
|
|
2986
|
+
}
|
|
2987
|
+
function handleVisibleChange(nextVisible) {
|
|
2988
|
+
visible.value = nextVisible;
|
|
2989
|
+
if (!nextVisible && blurred.value) {
|
|
2990
|
+
focused.value = false;
|
|
2991
|
+
}
|
|
2992
|
+
emit("visible-change", nextVisible);
|
|
2993
|
+
}
|
|
2994
|
+
function emitModelValue(value) {
|
|
2995
|
+
emit("input", value);
|
|
2996
|
+
emit("update:value", value);
|
|
2997
|
+
}
|
|
2998
|
+
function normalizeValue(value) {
|
|
2999
|
+
return Array.isArray(value) ? value : [];
|
|
3000
|
+
}
|
|
3001
|
+
function toCssValue(value) {
|
|
3002
|
+
if (typeof value === "number") {
|
|
3003
|
+
return `${value}px`;
|
|
3004
|
+
}
|
|
3005
|
+
return value;
|
|
3006
|
+
}
|
|
3007
|
+
__expose({
|
|
3008
|
+
focus: () => {
|
|
3009
|
+
var _a, _b;
|
|
3010
|
+
(_b = (_a = cascaderRef.value) == null ? void 0 : _a.togglePopperVisible) == null ? void 0 : _b.call(_a, true);
|
|
3011
|
+
},
|
|
3012
|
+
blur: () => {
|
|
3013
|
+
var _a, _b;
|
|
3014
|
+
(_b = (_a = cascaderRef.value) == null ? void 0 : _a.togglePopperVisible) == null ? void 0 : _b.call(_a, false);
|
|
3015
|
+
},
|
|
3016
|
+
togglePopperVisible: () => {
|
|
3017
|
+
var _a, _b;
|
|
3018
|
+
(_b = (_a = cascaderRef.value) == null ? void 0 : _a.togglePopperVisible) == null ? void 0 : _b.call(_a);
|
|
3019
|
+
},
|
|
3020
|
+
clear: () => {
|
|
3021
|
+
cascaderValue.value = [];
|
|
3022
|
+
emitModelValue([]);
|
|
3023
|
+
emit("change", []);
|
|
3024
|
+
},
|
|
3025
|
+
getCascaderRef: () => cascaderRef.value
|
|
3026
|
+
});
|
|
3027
|
+
return (_ctx, _cache) => {
|
|
3028
|
+
const _component_el_cascader = resolveComponent("el-cascader");
|
|
3029
|
+
return openBlock(), createElementBlock("div", {
|
|
3030
|
+
class: normalizeClass(["outlined-cascader", [containerClasses.value, rootClass.value]]),
|
|
3031
|
+
style: normalizeStyle([containerStyle.value, rootStyle.value])
|
|
3032
|
+
}, [
|
|
3033
|
+
createVNode(_component_el_cascader, mergeProps({
|
|
3034
|
+
ref_key: "cascaderRef",
|
|
3035
|
+
ref: cascaderRef
|
|
3036
|
+
}, cascaderAttrs.value, {
|
|
3037
|
+
class: "outlined-cascader__control",
|
|
3038
|
+
"model-value": cascaderValue.value,
|
|
3039
|
+
options: __props.options,
|
|
3040
|
+
props: __props.propsValue,
|
|
3041
|
+
clearable: __props.clearable,
|
|
3042
|
+
placeholder: __props.placeholder,
|
|
3043
|
+
filterable: __props.filterable,
|
|
3044
|
+
"show-all-levels": __props.levels,
|
|
3045
|
+
disabled: __props.disabled,
|
|
3046
|
+
"popper-class": __props.popperClass,
|
|
3047
|
+
style: cascaderStyle.value,
|
|
3048
|
+
"onUpdate:modelValue": handleModelValueUpdate,
|
|
3049
|
+
onFocus: handleFocus,
|
|
3050
|
+
onBlur: handleBlur,
|
|
3051
|
+
onChange: handleChange,
|
|
3052
|
+
onVisibleChange: handleVisibleChange
|
|
3053
|
+
}), null, 16, ["model-value", "options", "props", "clearable", "placeholder", "filterable", "show-all-levels", "disabled", "popper-class", "style"]),
|
|
3054
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
3055
|
+
key: 0,
|
|
3056
|
+
class: normalizeClass(["outlined-cascader__label", labelClasses.value])
|
|
3057
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
3058
|
+
], 6);
|
|
3059
|
+
};
|
|
3060
|
+
}
|
|
3061
|
+
});
|
|
3062
|
+
var OutlinedCascader = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2c93c0e4"]]);
|
|
3063
|
+
var OutlinedTreeSelect_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
3064
|
+
const _sfc_main = defineComponent({
|
|
3065
|
+
...{
|
|
3066
|
+
name: "OutlinedTreeSelect",
|
|
3067
|
+
inheritAttrs: false
|
|
3068
|
+
},
|
|
3069
|
+
__name: "OutlinedTreeSelect",
|
|
3070
|
+
props: {
|
|
3071
|
+
value: { type: [String, Number, Boolean, Object, null, Array], default: void 0 },
|
|
3072
|
+
data: { default: () => [] },
|
|
3073
|
+
propsValue: { default: void 0 },
|
|
3074
|
+
placeholder: { default: "" },
|
|
3075
|
+
label: { default: "" },
|
|
3076
|
+
disabled: { type: Boolean, default: false },
|
|
3077
|
+
clearable: { type: Boolean, default: true },
|
|
3078
|
+
filterable: { type: Boolean, default: true },
|
|
3079
|
+
multiple: { type: Boolean, default: false },
|
|
3080
|
+
showCheckbox: { type: Boolean, default: false },
|
|
3081
|
+
checkStrictly: { type: Boolean, default: false },
|
|
3082
|
+
checkOnClickNode: { type: Boolean, default: false },
|
|
3083
|
+
defaultExpandAll: { type: Boolean, default: false },
|
|
3084
|
+
expandOnClickNode: { type: Boolean, default: false },
|
|
3085
|
+
renderAfterExpand: { type: Boolean, default: false },
|
|
3086
|
+
collapseTags: { type: Boolean, default: false },
|
|
3087
|
+
collapseTagsTooltip: { type: Boolean, default: true },
|
|
3088
|
+
maxCollapseTags: { default: 5 },
|
|
3089
|
+
popperClass: { default: "" },
|
|
3090
|
+
nodeKey: { default: "value" },
|
|
3091
|
+
keyValue: { default: "value" },
|
|
3092
|
+
labelValue: { default: "label" },
|
|
3093
|
+
childrenValue: { default: "children" },
|
|
3094
|
+
disabledValue: { default: "disabled" },
|
|
3095
|
+
inputHeight: { default: 40 },
|
|
3096
|
+
isBorder: { type: Boolean, default: false },
|
|
3097
|
+
marginBottom: { default: 20 },
|
|
3098
|
+
paddingTop: { default: 20 }
|
|
3099
|
+
},
|
|
3100
|
+
emits: ["input", "update:value", "change", "focus", "blur", "visible-change", "clear"],
|
|
3101
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
3102
|
+
const props = __props;
|
|
3103
|
+
const emit = __emit;
|
|
3104
|
+
const attrs = useAttrs();
|
|
3105
|
+
const treeSelectRef = ref(null);
|
|
3106
|
+
const treeSelectValue = ref(normalizeTreeSelectValue(props.value, isArrayMode()));
|
|
3107
|
+
const focused = ref(false);
|
|
3108
|
+
const blurred = ref(false);
|
|
3109
|
+
const visible = ref(false);
|
|
3110
|
+
watch(
|
|
3111
|
+
() => [props.value, props.multiple, props.showCheckbox],
|
|
3112
|
+
([value]) => {
|
|
3113
|
+
treeSelectValue.value = normalizeTreeSelectValue(value, isArrayMode());
|
|
3114
|
+
},
|
|
3115
|
+
{ immediate: true }
|
|
3116
|
+
);
|
|
3117
|
+
const rootClass = computed(() => attrs.class);
|
|
3118
|
+
const rootStyle = computed(() => attrs.style);
|
|
3119
|
+
const treeSelectAttrs = computed(() => {
|
|
3120
|
+
const { class: _class, style: _style, ...rest } = attrs;
|
|
3121
|
+
return rest;
|
|
3122
|
+
});
|
|
3123
|
+
const containerClasses = computed(() => ({
|
|
3124
|
+
"outlined-tree-select--bordered": props.isBorder
|
|
3125
|
+
}));
|
|
3126
|
+
const containerStyle = computed(() => ({
|
|
3127
|
+
marginBottom: toCssValue(props.marginBottom),
|
|
3128
|
+
paddingTop: toCssValue(props.paddingTop)
|
|
3129
|
+
}));
|
|
3130
|
+
const treeSelectStyle = computed(() => ({
|
|
3131
|
+
minHeight: `${props.inputHeight}px`,
|
|
3132
|
+
height: isArrayMode() ? "auto" : `${props.inputHeight}px`
|
|
3133
|
+
}));
|
|
3134
|
+
const resolvedTreeProps = computed(() => {
|
|
3135
|
+
if (props.propsValue) {
|
|
3136
|
+
return props.propsValue;
|
|
3137
|
+
}
|
|
3138
|
+
return {
|
|
3139
|
+
value: props.keyValue,
|
|
3140
|
+
label: props.labelValue,
|
|
3141
|
+
children: props.childrenValue,
|
|
3142
|
+
disabled: props.disabledValue
|
|
3143
|
+
};
|
|
3144
|
+
});
|
|
3145
|
+
const floatingLabel = computed(() => props.label || props.placeholder || "");
|
|
3146
|
+
const hasContent = computed(() => {
|
|
3147
|
+
if (isArrayMode()) {
|
|
3148
|
+
return Array.isArray(treeSelectValue.value) && treeSelectValue.value.length > 0;
|
|
3149
|
+
}
|
|
3150
|
+
return hasFilledValue(treeSelectValue.value);
|
|
3151
|
+
});
|
|
3152
|
+
const labelClasses = computed(() => ({
|
|
3153
|
+
"outlined-tree-select__label--floating": focused.value || hasContent.value,
|
|
3154
|
+
"outlined-tree-select__label--placeholder": !focused.value && !hasContent.value,
|
|
3155
|
+
"outlined-tree-select__label--filled": hasContent.value && !focused.value
|
|
3156
|
+
}));
|
|
3157
|
+
function isArrayMode() {
|
|
3158
|
+
return props.multiple || props.showCheckbox;
|
|
3159
|
+
}
|
|
3160
|
+
function handleModelValueUpdate(value) {
|
|
3161
|
+
const normalizedValue = normalizeTreeSelectValue(value, isArrayMode());
|
|
3162
|
+
treeSelectValue.value = normalizedValue;
|
|
3163
|
+
emitModelValue(normalizedValue);
|
|
3164
|
+
}
|
|
3165
|
+
function handleChange(value) {
|
|
3166
|
+
const normalizedValue = normalizeTreeSelectValue(value, isArrayMode());
|
|
3167
|
+
treeSelectValue.value = normalizedValue;
|
|
3168
|
+
emit("change", normalizedValue);
|
|
3169
|
+
}
|
|
3170
|
+
function handleFocus(event) {
|
|
3171
|
+
blurred.value = false;
|
|
3172
|
+
focused.value = true;
|
|
3173
|
+
emit("focus", event);
|
|
3174
|
+
}
|
|
3175
|
+
function handleBlur(event) {
|
|
3176
|
+
blurred.value = true;
|
|
3177
|
+
if (!visible.value) {
|
|
3178
|
+
focused.value = false;
|
|
3179
|
+
emitModelValue(treeSelectValue.value);
|
|
3180
|
+
}
|
|
3181
|
+
emit("blur", event);
|
|
3182
|
+
}
|
|
3183
|
+
function handleVisibleChange(nextVisible) {
|
|
3184
|
+
visible.value = nextVisible;
|
|
3185
|
+
if (!nextVisible && blurred.value) {
|
|
3186
|
+
focused.value = false;
|
|
3187
|
+
}
|
|
3188
|
+
emit("visible-change", nextVisible);
|
|
3189
|
+
}
|
|
3190
|
+
function handleClear() {
|
|
3191
|
+
emit("clear");
|
|
3192
|
+
}
|
|
3193
|
+
function emitModelValue(value) {
|
|
3194
|
+
emit("input", value);
|
|
3195
|
+
emit("update:value", value);
|
|
3196
|
+
}
|
|
3197
|
+
function normalizeTreeSelectValue(value, arrayMode) {
|
|
3198
|
+
if (arrayMode) {
|
|
3199
|
+
if (Array.isArray(value)) {
|
|
3200
|
+
return value;
|
|
3201
|
+
}
|
|
3202
|
+
if (value === void 0 || value === null || value === "") {
|
|
3203
|
+
return [];
|
|
3204
|
+
}
|
|
3205
|
+
return [value];
|
|
3206
|
+
}
|
|
3207
|
+
return value != null ? value : "";
|
|
3208
|
+
}
|
|
3209
|
+
function hasFilledValue(value) {
|
|
3210
|
+
return value !== void 0 && value !== null && String(value) !== "";
|
|
3211
|
+
}
|
|
3212
|
+
function toCssValue(value) {
|
|
3213
|
+
if (typeof value === "number") {
|
|
3214
|
+
return `${value}px`;
|
|
3215
|
+
}
|
|
3216
|
+
return value;
|
|
3217
|
+
}
|
|
3218
|
+
__expose({
|
|
3219
|
+
focus: () => {
|
|
3220
|
+
var _a, _b;
|
|
3221
|
+
(_b = (_a = treeSelectRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
3222
|
+
},
|
|
3223
|
+
blur: () => {
|
|
3224
|
+
var _a, _b;
|
|
3225
|
+
(_b = (_a = treeSelectRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
|
|
3226
|
+
},
|
|
3227
|
+
clear: () => {
|
|
3228
|
+
if (isArrayMode()) {
|
|
3229
|
+
treeSelectValue.value = [];
|
|
3230
|
+
emitModelValue([]);
|
|
3231
|
+
emit("change", []);
|
|
3232
|
+
emit("clear");
|
|
3233
|
+
return;
|
|
3234
|
+
}
|
|
3235
|
+
treeSelectValue.value = "";
|
|
3236
|
+
emitModelValue("");
|
|
3237
|
+
emit("change", "");
|
|
3238
|
+
emit("clear");
|
|
3239
|
+
},
|
|
3240
|
+
getTreeSelectRef: () => treeSelectRef.value
|
|
3241
|
+
});
|
|
3242
|
+
return (_ctx, _cache) => {
|
|
3243
|
+
const _component_el_tree_select = resolveComponent("el-tree-select");
|
|
3244
|
+
return openBlock(), createElementBlock("div", {
|
|
3245
|
+
class: normalizeClass(["outlined-tree-select", [containerClasses.value, rootClass.value]]),
|
|
3246
|
+
style: normalizeStyle([containerStyle.value, rootStyle.value])
|
|
3247
|
+
}, [
|
|
3248
|
+
createVNode(_component_el_tree_select, mergeProps({
|
|
3249
|
+
ref_key: "treeSelectRef",
|
|
3250
|
+
ref: treeSelectRef
|
|
3251
|
+
}, treeSelectAttrs.value, {
|
|
3252
|
+
class: "outlined-tree-select__control",
|
|
3253
|
+
"model-value": treeSelectValue.value,
|
|
3254
|
+
data: __props.data,
|
|
3255
|
+
props: resolvedTreeProps.value,
|
|
3256
|
+
placeholder: __props.placeholder,
|
|
3257
|
+
disabled: __props.disabled,
|
|
3258
|
+
clearable: __props.clearable,
|
|
3259
|
+
filterable: __props.filterable,
|
|
3260
|
+
multiple: __props.multiple,
|
|
3261
|
+
"show-checkbox": __props.showCheckbox,
|
|
3262
|
+
"check-strictly": __props.checkStrictly,
|
|
3263
|
+
"check-on-click-node": __props.checkOnClickNode,
|
|
3264
|
+
"default-expand-all": __props.defaultExpandAll,
|
|
3265
|
+
"expand-on-click-node": __props.expandOnClickNode,
|
|
3266
|
+
"render-after-expand": __props.renderAfterExpand,
|
|
3267
|
+
"collapse-tags": __props.collapseTags,
|
|
3268
|
+
"collapse-tags-tooltip": __props.collapseTagsTooltip,
|
|
3269
|
+
"max-collapse-tags": __props.maxCollapseTags,
|
|
3270
|
+
"popper-class": __props.popperClass,
|
|
3271
|
+
"node-key": __props.nodeKey,
|
|
3272
|
+
style: treeSelectStyle.value,
|
|
3273
|
+
"onUpdate:modelValue": handleModelValueUpdate,
|
|
3274
|
+
onFocus: handleFocus,
|
|
3275
|
+
onBlur: handleBlur,
|
|
3276
|
+
onChange: handleChange,
|
|
3277
|
+
onVisibleChange: handleVisibleChange,
|
|
3278
|
+
onClear: handleClear
|
|
3279
|
+
}), {
|
|
3280
|
+
empty: withCtx(() => [
|
|
3281
|
+
renderSlot(_ctx.$slots, "empty", {}, void 0, true)
|
|
3282
|
+
]),
|
|
3283
|
+
header: withCtx(() => [
|
|
3284
|
+
renderSlot(_ctx.$slots, "header", {}, void 0, true)
|
|
3285
|
+
]),
|
|
3286
|
+
footer: withCtx(() => [
|
|
3287
|
+
renderSlot(_ctx.$slots, "footer", {}, void 0, true)
|
|
3288
|
+
]),
|
|
3289
|
+
_: 3
|
|
3290
|
+
}, 16, ["model-value", "data", "props", "placeholder", "disabled", "clearable", "filterable", "multiple", "show-checkbox", "check-strictly", "check-on-click-node", "default-expand-all", "expand-on-click-node", "render-after-expand", "collapse-tags", "collapse-tags-tooltip", "max-collapse-tags", "popper-class", "node-key", "style"]),
|
|
3291
|
+
floatingLabel.value ? (openBlock(), createElementBlock("div", {
|
|
3292
|
+
key: 0,
|
|
3293
|
+
class: normalizeClass(["outlined-tree-select__label", labelClasses.value])
|
|
3294
|
+
}, toDisplayString(floatingLabel.value), 3)) : createCommentVNode("", true)
|
|
3295
|
+
], 6);
|
|
3296
|
+
};
|
|
3297
|
+
}
|
|
3298
|
+
});
|
|
3299
|
+
var OutlinedTreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8403e6ea"]]);
|
|
3300
|
+
export { BaseCard, BaseEChart, _sfc_main$7 as BaseExportButton, BaseTable, OutlinedCascader, OutlinedDatePicker, OutlinedDateTimePicker, OutlinedInput, OutlinedSelect, OutlinedTimePicker, OutlinedTreeSelect, downloadExportResponse, exportExcel, extractFileNameFromDisposition, normalizeExportFileName };
|