mwl-components 0.1.5 → 0.1.6

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/dist/index.es.js DELETED
@@ -1,1013 +0,0 @@
1
- import { defineComponent as E, useAttrs as ce, ref as w, resolveComponent as y, createBlock as g, openBlock as s, mergeProps as T, withCtx as h, renderSlot as M, useSlots as F, normalizeClass as de, createSlots as U, createElementVNode as Y, createElementBlock as b, createCommentVNode as I, toDisplayString as D, watch as me, nextTick as pe, computed as P, unref as W, normalizeStyle as V, createTextVNode as X, createVNode as N, mergeModels as he, useModel as fe, getCurrentInstance as K, Fragment as H, renderList as z, resolveDynamicComponent as L, h as O, inject as ye, onMounted as G, onUnmounted as ge, withDirectives as J, vShow as Q, normalizeProps as ve, guardReactiveProps as be, withModifiers as xe } from "vue";
2
- import { configProviderContextKey as ke } from "element-plus";
3
- const Z = /* @__PURE__ */ E({
4
- name: "EasyButton",
5
- inheritAttrs: !1,
6
- __name: "index",
7
- setup(e) {
8
- const { onClick: n, ...t } = ce(), l = w(!1), i = async () => {
9
- console.log("Button clicked"), l.value = !0;
10
- try {
11
- await n?.();
12
- } catch (u) {
13
- console.error("Error in button onClick handler:", u);
14
- } finally {
15
- l.value = !1;
16
- }
17
- };
18
- return (u, c) => {
19
- const a = y("el-button");
20
- return s(), g(a, T(t, {
21
- loading: l.value,
22
- onClick: i
23
- }), {
24
- default: h(() => [
25
- M(u.$slots, "default")
26
- ]),
27
- _: 3
28
- }, 16, ["loading"]);
29
- };
30
- }
31
- }), Ce = { class: "card-header" }, we = {
32
- key: 0,
33
- class: "card-header__message"
34
- }, _e = /* @__PURE__ */ E({
35
- name: "ContentWarp",
36
- __name: "index",
37
- props: {
38
- title: String,
39
- message: String
40
- },
41
- setup(e) {
42
- const n = F(), t = w("content-wrap");
43
- return (l, i) => {
44
- const u = y("ElCard");
45
- return s(), g(u, {
46
- class: de([t.value]),
47
- shadow: "never"
48
- }, U({
49
- default: h(() => [
50
- M(l.$slots, "default", {}, void 0, !0)
51
- ]),
52
- _: 2
53
- }, [
54
- e.title ? {
55
- name: "header",
56
- fn: h(() => [
57
- Y("div", Ce, [
58
- Y("span", null, D(e.title), 1),
59
- e.message ? (s(), b("span", we, D(e.message), 1)) : I("", !0)
60
- ])
61
- ]),
62
- key: "0"
63
- } : void 0,
64
- n.footer ? {
65
- name: "footer",
66
- fn: h(() => [
67
- M(l.$slots, "footer", {}, void 0, !0)
68
- ]),
69
- key: "1"
70
- } : void 0
71
- ]), 1032, ["class"]);
72
- };
73
- }
74
- }), B = (e, n) => {
75
- const t = e.__vccOpts || e;
76
- for (const [l, i] of n)
77
- t[l] = i;
78
- return t;
79
- }, ee = /* @__PURE__ */ B(_e, [["__scopeId", "data-v-fdaaba5e"]]), Se = { class: "dialog-header" }, te = /* @__PURE__ */ E({
80
- name: "Dialog",
81
- __name: "index",
82
- props: {
83
- title: {
84
- type: String,
85
- default: ""
86
- },
87
- fullscreen: {
88
- type: Boolean,
89
- default: !1
90
- },
91
- scroll: {
92
- type: Boolean,
93
- default: !1
94
- },
95
- width: {
96
- type: String,
97
- default: "61.8%"
98
- },
99
- maxHeight: {
100
- type: [String, Number],
101
- default: ""
102
- }
103
- },
104
- setup(e) {
105
- const n = F(), t = e, l = w(t.fullscreen), i = () => {
106
- l.value = !W(l);
107
- }, u = w(t.maxHeight);
108
- me(
109
- () => l.value,
110
- async (a) => {
111
- if (await pe(), a) {
112
- const o = document.documentElement.offsetHeight;
113
- u.value = `${o - 55 - 40 - (n.footer ? 63 : 0)}px`;
114
- } else
115
- u.value = t.maxHeight;
116
- },
117
- {
118
- immediate: !0
119
- }
120
- );
121
- const c = P(() => {
122
- if (t.maxHeight)
123
- return {
124
- height: W(u)
125
- };
126
- });
127
- return (a, o) => {
128
- const m = y("FullScreen"), d = y("el-icon"), f = y("ElScrollbar"), v = y("ElDialog");
129
- return s(), g(v, T({
130
- "close-on-click-modal": !1,
131
- "destroy-on-close": "",
132
- draggable: "",
133
- "lock-scroll": "",
134
- class: "custom-dialog",
135
- "append-to-body": ""
136
- }, a.$attrs, {
137
- fullscreen: l.value,
138
- width: e.width
139
- }), U({
140
- default: h(() => [
141
- e.scroll ? (s(), g(f, {
142
- key: 0,
143
- style: V(c.value)
144
- }, {
145
- default: h(() => [
146
- M(a.$slots, "default")
147
- ]),
148
- _: 3
149
- }, 8, ["style"])) : M(a.$slots, "default", { key: 1 })
150
- ]),
151
- _: 2
152
- }, [
153
- e.title ? {
154
- name: "header",
155
- fn: h(() => [
156
- Y("div", Se, [
157
- M(a.$slots, "title", {}, () => [
158
- X(D(e.title), 1)
159
- ]),
160
- Y("div", { onClick: i }, [
161
- N(d, { class: "fullScreen" }, {
162
- default: h(() => [
163
- N(m)
164
- ]),
165
- _: 1
166
- })
167
- ])
168
- ])
169
- ]),
170
- key: "0"
171
- } : void 0,
172
- n.footer ? {
173
- name: "footer",
174
- fn: h(() => [
175
- M(a.$slots, "footer")
176
- ]),
177
- key: "1"
178
- } : void 0
179
- ]), 1040, ["fullscreen", "width"]);
180
- };
181
- }
182
- }), Me = { key: 1 }, ne = (e) => {
183
- let n = e.label;
184
- if (e.label && typeof e.label == "function" && (n = e.label()), e.type.indexOf("select") > -1 || e.type.indexOf("cascader") > -1 || e.type.indexOf("date") > -1)
185
- return `请选择${n}`;
186
- if (e.type.indexOf("text") > -1 || e.type.indexOf("number") > -1)
187
- return `请输入${n}`;
188
- }, R = {
189
- valueFormat: "YYYY-MM-DD HH:mm:ss",
190
- format: "YYYY-MM-DD HH:mm:ss"
191
- }, $e = (e) => {
192
- const { options: n } = e;
193
- return {
194
- default: () => n?.map((t) => O(y("el-option"), {
195
- label: t.label,
196
- value: t.value,
197
- key: t.value
198
- }))
199
- };
200
- }, A = {
201
- clearable: !0
202
- }, oe = [
203
- {
204
- type: "slider",
205
- component: "el-slider"
206
- },
207
- {
208
- type: "text",
209
- component: "el-input",
210
- attrs: {
211
- ...A
212
- }
213
- },
214
- {
215
- type: "textarea",
216
- component: "el-input",
217
- attrs: {
218
- ...A
219
- }
220
- },
221
- {
222
- type: "number",
223
- component: "el-input-number",
224
- attrs: {
225
- controlsPosition: "right"
226
- }
227
- },
228
- {
229
- type: "switch",
230
- component: "el-switch"
231
- },
232
- {
233
- type: "checkbox",
234
- component: "el-checkbox-group",
235
- slots: (e) => {
236
- const { options: n } = e;
237
- return {
238
- default: () => n?.map((t) => O(
239
- y("el-checkbox"),
240
- {
241
- value: t.value
242
- },
243
- {
244
- default: () => t.label
245
- }
246
- ))
247
- };
248
- }
249
- },
250
- {
251
- type: "radio",
252
- component: "el-radio-group",
253
- slots: (e) => {
254
- const { options: n } = e;
255
- return {
256
- default: () => n?.map((t) => O(
257
- y("el-radio"),
258
- {
259
- value: t.value
260
- },
261
- {
262
- default: () => t.label
263
- }
264
- ))
265
- };
266
- }
267
- },
268
- {
269
- type: "select",
270
- component: "el-select",
271
- slots: $e
272
- },
273
- {
274
- type: "select-v2",
275
- component: "el-select-v2"
276
- },
277
- {
278
- type: "tree-select",
279
- component: "el-tree-select",
280
- attrs: {
281
- ...A,
282
- checkStrictly: !0,
283
- //是否严格的遵循父子不互相关联的做法,默认为 false
284
- renderAfterExpand: !0
285
- // 是否在第一次展开时即渲染子节点,默认为 false
286
- }
287
- },
288
- {
289
- type: "date,dates",
290
- component: "el-date-picker",
291
- attrs: {
292
- showConfirm: !1,
293
- valueFormat: "YYYY-MM-DD",
294
- format: "YYYY-MM-DD"
295
- }
296
- },
297
- {
298
- type: "datetime,week",
299
- component: "el-date-picker",
300
- attrs: {
301
- showConfirm: !1,
302
- ...R
303
- }
304
- },
305
- {
306
- type: "month,months",
307
- component: "el-date-picker",
308
- attrs: {
309
- showConfirm: !1,
310
- valueFormat: "YYYY-MM",
311
- format: "YYYY-MM"
312
- }
313
- },
314
- {
315
- type: "year,years",
316
- component: "el-date-picker",
317
- attrs: {
318
- showConfirm: !1,
319
- valueFormat: "YYYY",
320
- format: "YYYY"
321
- }
322
- },
323
- {
324
- type: "datetimerange,daterange,monthrange,yearrange",
325
- component: "el-date-picker",
326
- attrs: {
327
- showConfirm: !1,
328
- rangeSeparator: "至",
329
- startPlaceholder: "开始日期",
330
- endPlaceholder: "结束日期",
331
- ...R
332
- }
333
- },
334
- {
335
- type: "cascader",
336
- component: "el-cascader",
337
- attrs: {
338
- clearable: !0
339
- }
340
- },
341
- {
342
- type: "upload",
343
- component: "el-upload"
344
- },
345
- {
346
- type: "custom",
347
- component: "el-form-item"
348
- }
349
- ], Ee = /* @__PURE__ */ E({
350
- name: "EasyForm",
351
- __name: "index",
352
- props: /* @__PURE__ */ he({
353
- inline: {
354
- type: Boolean,
355
- default: !0
356
- },
357
- // // 表单数据对象
358
- // formData: {
359
- // type: Object as PropType<Record<string, any>>,
360
- // required: true,
361
- // },
362
- // 表单项配置数组
363
- formItems: {
364
- type: Array,
365
- default: () => []
366
- },
367
- // 表单标签宽度
368
- labelWidth: {
369
- type: [String, Number],
370
- default: "120px"
371
- },
372
- // 表单项宽度
373
- itemWidth: {
374
- type: [String],
375
- default: "200px"
376
- }
377
- }, {
378
- modelValue: {
379
- default: {},
380
- type: Object
381
- },
382
- modelModifiers: {}
383
- }),
384
- emits: ["update:modelValue"],
385
- setup(e) {
386
- const n = fe(e, "modelValue"), t = K(), l = (a) => {
387
- i(a, "formRef");
388
- }, i = (a, o) => {
389
- if (!a) {
390
- delete t?.exposeProxy?.[o], delete t?.exposed?.[o];
391
- return;
392
- }
393
- t.exposeProxy = {
394
- ...t?.exposed,
395
- [o]: a
396
- }, t.exposed = {
397
- ...t?.exposed,
398
- [o]: a
399
- };
400
- }, u = F(), c = (a, o, m) => {
401
- const { value: d, component: f, ...v } = o, p = oe.find(
402
- (k) => !!a && k.type.indexOf(a) > -1
403
- ), _ = p?.component === "el-select" && o.props, x = o.options && !_ ? p?.slots?.(o) : {};
404
- if (!p && !o.component)
405
- return new Error(`未找到type为${a}的组件且当前也未传递component`);
406
- const r = L(p?.component || f);
407
- if (r)
408
- return O(
409
- r,
410
- {
411
- ...p?.attrs,
412
- // 这里的ref还是从配置注入吧。不是每次都要用到ref
413
- // ref: (el: any) => {
414
- // setRefs(el, formItem.prop)
415
- // },
416
- ...v,
417
- //外部传入的 优先级最高
418
- placeholder: v.placeholder || ne(o)
419
- },
420
- { ...x, ...m }
421
- );
422
- };
423
- return (a, o) => {
424
- const m = y("el-form-item"), d = y("el-form");
425
- return s(), g(d, T({
426
- model: n.value,
427
- "label-width": e.labelWidth,
428
- inline: e.inline,
429
- "scroll-to-error": !0
430
- }, { ...a.$attrs }, {
431
- ref: l,
432
- class: "easy-form"
433
- }), {
434
- default: h(() => [
435
- (s(!0), b(H, null, z(e.formItems, ({ id: f, type: v, rule: p, width: _, slots: x, ...r }, k) => (s(), b(H, null, [
436
- v != "custom" && !r.hidden ? (s(), g(m, {
437
- prop: r.prop,
438
- key: k,
439
- "label-width": r.labelWidth,
440
- rules: p,
441
- required: r.required
442
- }, {
443
- label: h(() => [
444
- r.label && typeof r.label == "function" ? (s(), g(L(r.label), { key: 0 })) : (s(), b("span", Me, D(r.label), 1))
445
- ]),
446
- default: h(() => [
447
- u[r.prop] ? M(a.$slots, r.prop, {
448
- key: 0,
449
- item: r
450
- }, void 0, !0) : (s(), g(L(c(v, { ...r, type: v }, x)), {
451
- key: 1,
452
- modelValue: n.value[r.prop],
453
- "onUpdate:modelValue": (C) => n.value[r.prop] = C,
454
- modelModifiers: { trim: !0 },
455
- style: V({ width: _ || e.itemWidth })
456
- }, null, 8, ["modelValue", "onUpdate:modelValue", "style"]))
457
- ]),
458
- _: 2
459
- }, 1032, ["prop", "label-width", "rules", "required"])) : I("", !0),
460
- v == "custom" ? (s(), b(H, { key: 1 }, [
461
- x?.[r.prop] ? (s(), g(L(x[r.prop]), { key: 0 })) : M(a.$slots, r.prop, {
462
- key: 1,
463
- item: { width: _, rule: p, ...r }
464
- }, void 0, !0)
465
- ], 64)) : I("", !0)
466
- ], 64))), 256)),
467
- u.append ? (s(), g(m, { key: 0 }, {
468
- default: h(() => [
469
- M(a.$slots, "append", {}, void 0, !0)
470
- ]),
471
- _: 3
472
- })) : I("", !0)
473
- ]),
474
- _: 3
475
- }, 16, ["model", "label-width", "inline"]);
476
- };
477
- }
478
- }), ae = /* @__PURE__ */ B(Ee, [["__scopeId", "data-v-ebcd5674"]]), He = /* @__PURE__ */ E({
479
- name: "EasyTable",
480
- __name: "index",
481
- props: {
482
- data: {
483
- type: Array,
484
- required: !0,
485
- default: () => []
486
- },
487
- tableColumns: {
488
- type: Array,
489
- default: () => []
490
- },
491
- buttons: {
492
- type: Array,
493
- default: () => []
494
- },
495
- buttonWidth: {
496
- type: [Number, String],
497
- default: 120
498
- },
499
- align: {
500
- type: String,
501
- default: "center"
502
- },
503
- height: {
504
- type: Number || String,
505
- default: void 0
506
- },
507
- maxHeight: {
508
- type: String || Number,
509
- default: void 0
510
- },
511
- footerHeight: {
512
- type: Number,
513
- default: 65
514
- }
515
- },
516
- setup(e) {
517
- const n = ye(ke), t = e, l = P(() => t.buttonWidth.toString().indexOf("px") > -1 ? t.buttonWidth.toString().slice(0, -2) : t.buttonWidth), i = w(), u = w("auto");
518
- let c = K();
519
- const a = () => {
520
- let p = "auto";
521
- if (c?.parent?.attrs?.class?.indexOf("content-wrap") > -1) {
522
- let r = t.footerHeight;
523
- n?.value?.size === "small" ? r = r - 8 : n?.value?.size === "large" && (r = r + 8);
524
- try {
525
- const k = c?.refs.tableRef, { top: C } = k?.getBoundingClientRect();
526
- p = document.documentElement.clientHeight - C - r - 20;
527
- } catch {
528
- }
529
- return p;
530
- }
531
- return p;
532
- }, o = w(), m = () => {
533
- o.value && clearTimeout(o.value), o.value = setTimeout(() => {
534
- u.value = a(), o.value = null;
535
- }, 100);
536
- };
537
- G(() => {
538
- u.value = a(), window.addEventListener("resize", m);
539
- }), ge(() => {
540
- window.removeEventListener("resize", m);
541
- });
542
- const d = y("el-table-column"), f = F(), v = (p) => {
543
- const { slots: _ = {}, children: x = [], ...r } = p;
544
- if (x && x.length > 0) {
545
- const k = x.map((C) => v(C));
546
- return O(
547
- d,
548
- {
549
- align: t.align,
550
- ...r
551
- },
552
- // default 插槽默认使用 childrenNode 不能被slots 覆盖
553
- { ..._, default: () => k }
554
- );
555
- }
556
- return O(
557
- d,
558
- {
559
- align: t.align,
560
- ...r
561
- },
562
- // 最里层的表格列 default 插槽 slots传递的优先级最高 模版直接传递的可被 slots 覆盖
563
- {
564
- default: (k) => f[p.prop] && f[p.prop](k),
565
- ..._
566
- }
567
- );
568
- };
569
- return (p, _) => {
570
- const x = y("el-button"), r = y("el-table-column"), k = y("el-table");
571
- return s(), b("div", {
572
- ref_key: "tableRef",
573
- ref: i
574
- }, [
575
- N(k, T({ style: { width: "100%" } }, p.$attrs, {
576
- data: e.data,
577
- height: e.height,
578
- maxHeight: e.maxHeight ? e.maxHeight : u.value
579
- }), {
580
- default: h(() => [
581
- (s(!0), b(H, null, z(e.tableColumns, (C, $) => (s(), g(L(v(C)), { key: $ }))), 128)),
582
- e.buttons && e.buttons.length ? (s(), g(r, {
583
- key: 0,
584
- align: "center",
585
- fixed: "right",
586
- label: "操作",
587
- width: l.value
588
- }, {
589
- default: h((C) => [
590
- (s(!0), b(H, null, z(e.buttons, ($, ue) => J((s(), g(x, T({ ref_for: !0 }, { ...$ }, {
591
- key: ue,
592
- type: $.type.includes("del") ? "danger" : "primary",
593
- onClick: () => {
594
- $.click?.(C.row);
595
- },
596
- disabled: $.disabled?.(C.row) || !1,
597
- link: $.link?.(C.row) || !0
598
- }), {
599
- default: h(() => [
600
- X(D($.label), 1)
601
- ]),
602
- _: 2
603
- }, 1040, ["type", "onClick", "disabled", "link"])), [
604
- [Q, $.show?.(C.row) || !0]
605
- ])), 128))
606
- ]),
607
- _: 1
608
- }, 8, ["width"])) : I("", !0)
609
- ]),
610
- _: 1
611
- }, 16, ["data", "height", "maxHeight"])
612
- ], 512);
613
- };
614
- }
615
- }), le = /* @__PURE__ */ B(He, [["__scopeId", "data-v-1c87357b"]]), De = {
616
- name: "",
617
- components: {},
618
- props: {
619
- icon: {
620
- type: String,
621
- default: ""
622
- }
623
- }
624
- };
625
- function Ye(e, n, t, l, i, u) {
626
- return t.icon ? (s(), g(L(t.icon), {
627
- key: 0,
628
- class: "menu_icon"
629
- })) : I("", !0);
630
- }
631
- const j = /* @__PURE__ */ B(De, [["render", Ye], ["__scopeId", "data-v-261ce99a"]]), Le = /* @__PURE__ */ E({
632
- name: "subMenu",
633
- __name: "subMenu",
634
- props: {
635
- routeData: {
636
- type: Object,
637
- default: () => ({})
638
- }
639
- },
640
- emits: ["handleMenuItemClick"],
641
- setup(e, { emit: n }) {
642
- const t = n;
643
- function l(i) {
644
- t("handleMenuItemClick", i);
645
- }
646
- return (i, u) => {
647
- const c = y("subMenu", !0), a = y("el-sub-menu"), o = y("el-menu-item");
648
- return e.routeData.children && e.routeData.children.length > 0 ? (s(), g(a, {
649
- key: 0,
650
- index: e.routeData.path
651
- }, {
652
- title: h(() => [
653
- N(j, {
654
- icon: e.routeData.meta.icon
655
- }, null, 8, ["icon"]),
656
- Y("span", null, D(e.routeData.meta.title), 1)
657
- ]),
658
- default: h(() => [
659
- (s(!0), b(H, null, z(e.routeData.children, (m, d) => (s(), g(c, {
660
- onHandleMenuItemClick: l,
661
- routeData: m,
662
- key: d
663
- }, null, 8, ["routeData"]))), 128))
664
- ]),
665
- _: 1
666
- }, 8, ["index"])) : (s(), b("div", {
667
- key: 1,
668
- onClick: u[0] || (u[0] = (m) => l(e.routeData))
669
- }, [
670
- N(o, {
671
- index: e.routeData.path
672
- }, {
673
- title: h(() => [
674
- Y("span", null, D(e.routeData.meta.title), 1)
675
- ]),
676
- default: h(() => [
677
- N(j, {
678
- icon: e.routeData.meta.icon
679
- }, null, 8, ["icon"])
680
- ]),
681
- _: 1
682
- }, 8, ["index"])
683
- ]));
684
- };
685
- }
686
- }), se = /* @__PURE__ */ E({
687
- name: "MenuTree",
688
- __name: "index",
689
- props: {
690
- menuList: {
691
- type: Array,
692
- default: () => []
693
- }
694
- },
695
- emits: ["handleMenuItemClick"],
696
- setup(e, { emit: n }) {
697
- const t = n, l = (i) => {
698
- t("handleMenuItemClick", i);
699
- };
700
- return (i, u) => {
701
- const c = y("el-menu");
702
- return s(), g(c, ve(be(i.$attrs)), {
703
- default: h(() => [
704
- (s(!0), b(H, null, z(e.menuList, (a) => (s(), g(Le, {
705
- routeData: a,
706
- onHandleMenuItemClick: l
707
- }, null, 8, ["routeData"]))), 256))
708
- ]),
709
- _: 1
710
- }, 16);
711
- };
712
- }
713
- }), Ie = /* @__PURE__ */ E({
714
- name: "Pagination",
715
- __name: "index",
716
- props: {
717
- // 总条目数
718
- total: {
719
- required: !0,
720
- type: Number
721
- },
722
- // 当前页数:pageNo
723
- page: {
724
- type: Number,
725
- default: 1
726
- },
727
- // 每页显示条目个数:pageSize
728
- limit: {
729
- type: Number,
730
- default: 20
731
- },
732
- // 设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠
733
- // 移动端页码按钮的数量端默认值 5
734
- pagerCount: {
735
- type: Number,
736
- default: document.body.clientWidth < 992 ? 5 : 7
737
- },
738
- onPagination: { type: Function }
739
- },
740
- emits: ["update:page", "update:limit", "pagination"],
741
- setup(e, { emit: n }) {
742
- const t = e, l = n, i = P({
743
- get() {
744
- return t.page;
745
- },
746
- set(o) {
747
- l("update:page", o);
748
- }
749
- }), u = P({
750
- get() {
751
- return t.limit;
752
- },
753
- set(o) {
754
- l("update:limit", o);
755
- }
756
- }), c = (o) => {
757
- i.value * o > t.total && (i.value = 1), l("pagination", { page: i.value, limit: o });
758
- }, a = (o) => {
759
- l("pagination", { page: o, limit: u.value });
760
- };
761
- return (o, m) => {
762
- const d = y("el-pagination");
763
- return J((s(), g(d, {
764
- "current-page": i.value,
765
- "onUpdate:currentPage": m[0] || (m[0] = (f) => i.value = f),
766
- "page-size": u.value,
767
- "onUpdate:pageSize": m[1] || (m[1] = (f) => u.value = f),
768
- background: !0,
769
- "page-sizes": [10, 20, 30, 50, 100],
770
- "pager-count": e.pagerCount,
771
- total: e.total,
772
- class: "pagination",
773
- layout: "total, sizes, prev, pager, next, jumper",
774
- onSizeChange: c,
775
- onCurrentChange: a
776
- }, null, 8, ["current-page", "page-size", "pager-count", "total"])), [
777
- [Q, e.total > 0]
778
- ]);
779
- };
780
- }
781
- }), re = /* @__PURE__ */ B(Ie, [["__scopeId", "data-v-1e34e383"]]), Ne = ["onClick", "onMouseover"], Te = /* @__PURE__ */ E({
782
- name: "EasyContextMenu",
783
- __name: "index",
784
- props: {
785
- // 菜单列表
786
- menuList: {
787
- type: Array,
788
- default: () => []
789
- },
790
- // 菜单最大高度
791
- maxHeight: {
792
- type: [String, Number],
793
- default: 200
794
- },
795
- // 菜单背景颜色
796
- backgroundColor: {
797
- type: String,
798
- default: "#fff"
799
- },
800
- // 当前hover的菜单样式
801
- hoverItemStyle: {
802
- type: Object,
803
- default: () => ({
804
- backgroundColor: "#ddd"
805
- })
806
- },
807
- // 菜单显示动画曲线
808
- animationCurve: {
809
- type: String,
810
- default: "linear"
811
- }
812
- },
813
- setup(e) {
814
- const n = e, t = w(-1), l = w(!1), i = w({ x: 0, y: 0 }), u = (d) => {
815
- l.value = !1, d.preventDefault(), d.stopPropagation(), setTimeout(() => {
816
- l.value = !0;
817
- const { clientX: f, clientY: v } = d;
818
- i.value = { x: f, y: v }, c.value?.scrollTo(0, 0);
819
- }, 0);
820
- }, c = w(null), a = w(null);
821
- G(() => {
822
- const d = a.value?.parentElement;
823
- d?.addEventListener("contextmenu", u), document.addEventListener("click", () => {
824
- l.value = !1;
825
- }), d?.addEventListener("blur", () => {
826
- console.log("blur"), l.value = !1;
827
- });
828
- });
829
- const o = P(() => n.maxHeight == "auto" ? "auto" : n.maxHeight.toString().indexOf("px") > -1 ? n.maxHeight : `${n.maxHeight}px`), m = P(() => ({
830
- backgroundColor: n.backgroundColor,
831
- left: `${i.value.x}px`,
832
- top: `${i.value.y}px`,
833
- maxHeight: l.value ? o.value : "0px",
834
- transition: l.value ? `max-height .2s ${n.animationCurve}` : "none"
835
- }));
836
- return (d, f) => (s(), b("div", {
837
- ref_key: "contextMenu",
838
- ref: a
839
- }, [
840
- Y("div", T({ class: "easy-context-menu" }, d.$attrs, {
841
- style: { ...W(m) },
842
- ref_key: "menuListRef",
843
- ref: c
844
- }), [
845
- (s(!0), b(H, null, z(e.menuList, (v, p) => (s(), b("div", {
846
- key: p,
847
- onContextmenu: f[0] || (f[0] = xe(() => {
848
- }, ["stop"])),
849
- onClick: v.onClick,
850
- onMouseover: (_) => t.value = p,
851
- onMouseout: f[1] || (f[1] = (_) => t.value = -1),
852
- style: V(W(t) === p ? n.hoverItemStyle : "")
853
- }, D(v.label), 45, Ne))), 128))
854
- ], 16)
855
- ], 512));
856
- }
857
- }), ie = /* @__PURE__ */ B(Te, [["__scopeId", "data-v-f9f5bc05"]]);
858
- class S {
859
- // 右键菜单的节点
860
- vnode = null;
861
- // 右键菜单的配置
862
- #e = {
863
- bindEvent: !0
864
- //初始化绑定事件
865
- };
866
- // 右键菜单的默认样式
867
- defaultStyle = {
868
- position: "fixed",
869
- "z-index": 1e3,
870
- "border-radius": "4px",
871
- color: "#666",
872
- "font-size": "14px",
873
- "min-width": "100px",
874
- "box-shadow": "1px 1px 11px 0px #a6b5ba",
875
- "background-color": "#fff",
876
- padding: "4px",
877
- overflow: "hidden"
878
- };
879
- // 右键菜单hover的样式
880
- hoverStyle = {
881
- "background-color": "#8f9f80ff"
882
- };
883
- // 当前右键菜单的dom节点
884
- menu = null;
885
- // 实例
886
- static #t = null;
887
- static getInstance() {
888
- return S.#t || (S.#t = new S()), S.#t;
889
- }
890
- constructor() {
891
- S.#t || (S.#t = this);
892
- }
893
- create(n) {
894
- const t = S.getInstance();
895
- return t.vnode !== n.target && t.destroy(), t.vnode = n.target || null, t.#e = { ...t.#e, ...n }, t.#o(), t;
896
- }
897
- // 初始化
898
- #o() {
899
- this.defaultStyle = { ...this.defaultStyle, ...this.#e.style }, this.hoverStyle = { ...this.hoverStyle, ...this.#e.hoverStyle }, this.vnode && this.vnode?.addEventListener(this.#e.event || "contextmenu", this.showMenu), document.addEventListener("click", this.hideMenu), document.addEventListener("keydown", this.hideMenu);
900
- }
901
- // 销毁右键菜单
902
- destroy() {
903
- this.vnode?.removeEventListener(this.#e.event || "contextmenu", this.showMenu), document.removeEventListener("click", this.hideMenu), document.removeEventListener("keydown", this.hideMenu), this.resetContextMenu();
904
- }
905
- // 重置右键菜单
906
- resetContextMenu() {
907
- this.#e.appendToBody ? this.menu && document.body.removeChild(this.menu) : this.vnode?.contains(this.menu) && this.menu && this.vnode?.removeChild(this.menu), this.menu = null;
908
- }
909
- // 隐藏右键菜单
910
- #n() {
911
- this.menu && (this.menu.style.transition = "none", this.menu.style.maxHeight = "0", this.menu.style.display = "none");
912
- }
913
- /**
914
- * 这个函数的用途写在这里
915
- * @param {menuList Array<MenuItem> } 右键菜单的列表
916
- */
917
- setMenuList(n) {
918
- this.#e.menuList = n;
919
- }
920
- /**
921
- * 手动显示右键菜单 需要传入一个事件对象
922
- */
923
- showMenu(n) {
924
- S.#t.#a(n);
925
- }
926
- /**
927
- * 隐藏右键菜单
928
- */
929
- hideMenu() {
930
- S.#t.#n();
931
- }
932
- // 显示右键菜单
933
- #a(n) {
934
- if (n.preventDefault(), n.stopPropagation(), this.#e.menuList.length === 0)
935
- return;
936
- if (this.vnode || (this.vnode = n.target), console.log(this, "this"), this.#n(), !this.menu) {
937
- const c = document.createElement("div");
938
- c.className = this.#e.classNames || "", this.menu = c, this.#e.menuList.forEach((a) => {
939
- const o = document.createElement("div");
940
- if (!a.label && a.divider) {
941
- o.style = "padding: 0; margin: 5px 0; border-top: 1px solid #e6e6e6;", c.appendChild(o);
942
- return;
943
- }
944
- const m = ";padding: 5px 10px; cursor: pointer;";
945
- if (o.style = m, o.innerText = a.label, a.disabled) {
946
- o.style.cssText += "color: #ccc; cursor: not-allowed;", c.appendChild(o);
947
- return;
948
- }
949
- c.appendChild(o), o.addEventListener("click", (d) => {
950
- n.stopPropagation(), a.onClick && a.onClick(d), this.#n();
951
- }), o.addEventListener("mouseover", () => {
952
- o.style.cssText = Object.entries(this.hoverStyle).map(([d, f]) => `${d}:${f}`).join(";") + m;
953
- }), o.addEventListener("mouseout", () => {
954
- o.style = m;
955
- });
956
- }), this.#e.appendToBody ? document.body.appendChild(c) : this.vnode?.appendChild(c);
957
- }
958
- const { clientX: t, clientY: l } = n, i = {
959
- display: "block",
960
- ...this.defaultStyle,
961
- left: `${t}px`,
962
- top: `${l}px`
963
- };
964
- let u = Object.entries(i).map(([c, a]) => `${c}:${a}`).join(";");
965
- this.menu.style.cssText = u, this.menu.style.transition = "none", this.menu.style.maxHeight = "0", setTimeout(() => {
966
- this.menu && (this.menu.style.maxHeight = `${this.#e.style?.["max-height"] || "200px"}`, this.menu.style.transition = `${this.#e.style?.transition || "max-height 0.1s ease-in-out"}`);
967
- }, 0), this.menu.scrollTo(0, 0);
968
- }
969
- }
970
- const Pe = S.getInstance(), ze = [
971
- Z,
972
- ee,
973
- te,
974
- ae,
975
- // EasyFormH,
976
- le,
977
- se,
978
- re,
979
- ie
980
- ], q = [], Oe = (e, n) => {
981
- ze.forEach((t) => {
982
- q.push(t.name), e.component(t.name, t);
983
- }), console.log("mwl-components", q);
984
- }, Fe = {
985
- install: Oe,
986
- EasyButton: Z,
987
- ContentWarp: ee,
988
- Dialog: te,
989
- EasyForm: ae,
990
- // EasyFormH,
991
- EasyTable: le,
992
- MenuTree: se,
993
- Pagination: re,
994
- EasyContextMenu: ie,
995
- componentsMap: oe,
996
- getPlaceholder: ne,
997
- ContextMenu: Pe
998
- };
999
- export {
1000
- ee as ContentWarp,
1001
- Pe as ContextMenu,
1002
- te as Dialog,
1003
- Z as EasyButton,
1004
- ie as EasyContextMenu,
1005
- ae as EasyForm,
1006
- le as EasyTable,
1007
- se as MenuTree,
1008
- re as Pagination,
1009
- oe as componentsMap,
1010
- Fe as default,
1011
- ne as getPlaceholder,
1012
- Oe as install
1013
- };