@zl-ui-kit/components 0.26.1 → 0.27.0

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.
Files changed (112) hide show
  1. package/README.md +22 -18
  2. package/dist/components/ZlAction/List.vue.mjs +46 -49
  3. package/dist/components/ZlAction/index.vue.d.ts +1 -7
  4. package/dist/components/ZlAction/index.vue.mjs +8 -12
  5. package/dist/components/ZlAction/types.d.ts +2 -5
  6. package/dist/components/ZlAppLayout/Horizontal.css +1 -1
  7. package/dist/components/ZlAppLayout/Vertical.css +1 -1
  8. package/dist/components/ZlAppLayout/Vertical2.vue.mjs +41 -39
  9. package/dist/components/ZlAppLayout/index.vue.d.ts +6 -6
  10. package/dist/components/ZlAppLayout/index.vue.mjs +8 -8
  11. package/dist/components/ZlAppMenu/AppMenu.css +1 -0
  12. package/dist/components/ZlAppMenu/AppMenu.vue.d.ts +27 -0
  13. package/dist/components/ZlAppMenu/AppMenu.vue.mjs +37 -0
  14. package/dist/components/ZlAppMenu/AppMenu3.vue.mjs +6 -0
  15. package/dist/components/ZlAppMenu/AppMenuItem.vue.d.ts +11 -0
  16. package/dist/components/ZlAppMenu/AppMenuItem.vue.mjs +58 -0
  17. package/dist/components/ZlAppMenu/AppMenuItem2.vue.mjs +5 -0
  18. package/dist/components/ZlAppSlogan/index.css +1 -1
  19. package/dist/components/ZlAppSlogan/index.vue.d.ts +1 -1
  20. package/dist/components/ZlAppSlogan/index.vue.mjs +12 -19
  21. package/dist/components/ZlCardPage/index.vue.d.ts +3 -41
  22. package/dist/components/ZlCardPage/index.vue.mjs +68 -68
  23. package/dist/components/ZlCheckboxTag/index.css +1 -1
  24. package/dist/components/ZlCheckboxTag/index.vue.d.ts +4 -4
  25. package/dist/components/ZlCheckboxTag/index.vue.mjs +30 -34
  26. package/dist/components/ZlCopy/copy.mjs +7 -17
  27. package/dist/components/ZlCopy/index.css +1 -1
  28. package/dist/components/ZlCopy/index.vue.mjs +2 -2
  29. package/dist/components/ZlCopy/index2.vue.mjs +36 -34
  30. package/dist/components/ZlDescription/index.css +1 -1
  31. package/dist/components/ZlDescription/index.vue.mjs +24 -28
  32. package/dist/components/ZlDialog/index.css +1 -1
  33. package/dist/components/ZlDialog/index.vue.d.ts +0 -3
  34. package/dist/components/ZlDialog/index.vue.mjs +35 -39
  35. package/dist/components/ZlDictTag/index.vue.d.ts +3 -12
  36. package/dist/components/ZlDictTag/index.vue.mjs +26 -31
  37. package/dist/components/ZlDrawer/index.css +1 -1
  38. package/dist/components/ZlDrawer/index.vue.d.ts +0 -3
  39. package/dist/components/ZlDrawer/index.vue.mjs +32 -36
  40. package/dist/components/ZlDynamicComponent/index.vue.d.ts +3 -5
  41. package/dist/components/ZlForm/index.css +1 -1
  42. package/dist/components/ZlForm/index.vue.d.ts +0 -7
  43. package/dist/components/ZlForm/index.vue.mjs +47 -50
  44. package/dist/components/ZlLayoutSwitch/index.css +1 -1
  45. package/dist/components/ZlLayoutSwitch/index.vue.d.ts +0 -10
  46. package/dist/components/ZlLayoutSwitch/index.vue.mjs +1 -1
  47. package/dist/components/ZlLayoutSwitch/index2.vue.mjs +19 -27
  48. package/dist/components/ZlLogin/components/LoginForm.css +1 -1
  49. package/dist/components/ZlLogin/components/LoginForm.vue.mjs +1 -1
  50. package/dist/components/ZlLogin/components/LoginForm2.vue.mjs +25 -26
  51. package/dist/components/ZlPageContainer/index.css +1 -1
  52. package/dist/components/ZlPageContainer/index.vue.mjs +1 -1
  53. package/dist/components/ZlPagination/index.css +1 -1
  54. package/dist/components/ZlPagination/index.vue.d.ts +1 -21
  55. package/dist/components/ZlPagination/index.vue.mjs +1 -1
  56. package/dist/components/ZlPagination/index2.vue.mjs +33 -59
  57. package/dist/components/ZlPagination/usePagination.d.ts +0 -1
  58. package/dist/components/ZlPagination/usePagination.mjs +34 -51
  59. package/dist/components/ZlPopconfirm/index.vue.mjs +24 -25
  60. package/dist/components/ZlSearch/index.vue.d.ts +0 -25
  61. package/dist/components/ZlSearch/index.vue.mjs +205 -202
  62. package/dist/components/ZlSearchTable/index.vue.d.ts +2 -40
  63. package/dist/components/ZlSearchTable/index.vue.mjs +55 -59
  64. package/dist/components/ZlTable/useTablePagination.d.ts +0 -1
  65. package/dist/components/ZlTable/useTablePagination.mjs +23 -37
  66. package/dist/components/ZlTabs/index.vue.d.ts +3 -16
  67. package/dist/components/ZlTag/ZlCornerTag.css +1 -1
  68. package/dist/components/ZlTag/ZlCornerTag.vue.d.ts +1 -14
  69. package/dist/components/ZlTag/ZlCornerTag.vue.mjs +14 -25
  70. package/dist/components/ZlTag/index.vue.mjs +4 -4
  71. package/dist/components/ZlUpload/index.css +1 -1
  72. package/dist/components/ZlUpload/index.vue.d.ts +3 -44
  73. package/dist/components/ZlUpload/index.vue.mjs +3 -3
  74. package/dist/components/ZlUpload/index2.vue.mjs +79 -119
  75. package/dist/index.d.ts +2 -8
  76. package/dist/index.mjs +169 -183
  77. package/dist/locales/en.mjs +2 -2
  78. package/dist/locales/zh-cn.mjs +3 -3
  79. package/package.json +6 -6
  80. package/dist/components/ZlAppLayout/HeaderAside.css +0 -1
  81. package/dist/components/ZlAppLayout/HeaderAside.vue.d.ts +0 -25
  82. package/dist/components/ZlAppLayout/HeaderAside.vue.mjs +0 -6
  83. package/dist/components/ZlAppLayout/HeaderAside2.vue.mjs +0 -65
  84. package/dist/components/ZlBreadcrumb/index.css +0 -1
  85. package/dist/components/ZlBreadcrumb/index.vue.d.ts +0 -32
  86. package/dist/components/ZlBreadcrumb/index.vue.mjs +0 -58
  87. package/dist/components/ZlBreadcrumb/index3.vue.mjs +0 -6
  88. package/dist/components/ZlBreadcrumb/types.d.ts +0 -16
  89. package/dist/components/ZlButton/index.vue.d.ts +0 -81
  90. package/dist/components/ZlButton/index.vue.mjs +0 -60
  91. package/dist/components/ZlButton/index2.vue.mjs +0 -5
  92. package/dist/components/ZlCardPage/resolvePagination.d.ts +0 -20
  93. package/dist/components/ZlCardPage/resolvePagination.mjs +0 -24
  94. package/dist/components/ZlDevMenu/index.css +0 -1
  95. package/dist/components/ZlDevMenu/index.vue.d.ts +0 -33
  96. package/dist/components/ZlDevMenu/index.vue.mjs +0 -110
  97. package/dist/components/ZlDevMenu/index3.vue.mjs +0 -6
  98. package/dist/components/ZlDevMenu/types.d.ts +0 -8
  99. package/dist/components/ZlLoading/index.css +0 -1
  100. package/dist/components/ZlLoading/index.vue.d.ts +0 -27
  101. package/dist/components/ZlLoading/index.vue.mjs +0 -8
  102. package/dist/components/ZlLoading/index2.vue.mjs +0 -30
  103. package/dist/components/ZlMenu/MenuIcon.d.ts +0 -17
  104. package/dist/components/ZlMenu/MenuIcon.mjs +0 -21
  105. package/dist/components/ZlMenu/ZlMenuItem.vue.d.ts +0 -7
  106. package/dist/components/ZlMenu/ZlMenuItem.vue.mjs +0 -53
  107. package/dist/components/ZlMenu/ZlMenuItem2.vue.mjs +0 -5
  108. package/dist/components/ZlMenu/index.css +0 -1
  109. package/dist/components/ZlMenu/index.vue.d.ts +0 -40
  110. package/dist/components/ZlMenu/index.vue.mjs +0 -60
  111. package/dist/components/ZlMenu/index3.vue.mjs +0 -6
  112. package/dist/components/ZlMenu/types.d.ts +0 -20
@@ -1,25 +1,12 @@
1
1
  type __VLS_Props = {
2
2
  /** 文案前的图标名,走 ZlIcon 渲染(ribbon 形态下不展示图标) */
3
3
  icon?: string;
4
- /**
5
- * 背景色。两种写法:
6
- * ① 内置主题色名(`primary` / `success` / `green` …),走色板 6→3 渐变;
7
- * ② 原生 CSS 颜色值(`#ff7d45` / `rgb(255 125 69)` / `var(--zl-primary-6)`),**原样纯色填充、不自动渐变**,
8
- * 需要渐变时自己传 `linear-gradient(...)`。
9
- * 含 `#` / `(` / 逗号 / 空格的值一律按 ② 处理(想写 `red` 这类关键字请写成 `#f00`,否则会被当成色名)。
10
- */
4
+ /** 背景渐变的主色,取内置主题色名 */
11
5
  color?: string;
12
6
  /** 贴在容器的哪个角,默认右上角 */
13
7
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
14
8
  /** 形态:`badge` 贴边小标签(默认)/ `ribbon` 斜跨角上的绶带 */
15
9
  variant?: 'badge' | 'ribbon';
16
- /**
17
- * 绶带的梯形高度(斜带宽度的垂直值),只在 `variant="ribbon"` 下生效。
18
- * 数字按 px 处理,字符串原样当 CSS 长度(`36px` / `2rem`);默认 `28px`。
19
- * 加大后正方形底图会自动跟着长开,不会把斜带裁掉;带内文字字号也按该高度等比缩放,
20
- * 窄带不会把字撑出带外、宽带也不会显得字过小(可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号)。
21
- */
22
- ribbonHeight?: number | string;
23
10
  };
24
11
  declare function __VLS_template(): {
25
12
  attrs: Partial<{}>;
@@ -1,45 +1,34 @@
1
- import { defineComponent as i, computed as n, openBlock as l, createElementBlock as s, normalizeStyle as u, normalizeClass as g, createBlock as d, createCommentVNode as m, createElementVNode as b, renderSlot as f } from "vue";
2
- import v from "../ZlIcon/index.vue.mjs";
3
- const z = { class: "zl-corner-tag__text" }, y = /* @__PURE__ */ i({
1
+ import { defineComponent as n, openBlock as o, createElementBlock as a, normalizeClass as r, createBlock as c, createCommentVNode as l, createElementVNode as i, renderSlot as s } from "vue";
2
+ import m from "../ZlIcon/index.vue.mjs";
3
+ const d = { class: "zl-corner-tag__text" }, z = /* @__PURE__ */ n({
4
4
  name: "ZlCornerTag",
5
5
  __name: "ZlCornerTag",
6
6
  props: {
7
7
  icon: {},
8
8
  color: {},
9
9
  position: { default: "top-right" },
10
- variant: { default: "badge" },
11
- ribbonHeight: {}
10
+ variant: { default: "badge" }
12
11
  },
13
12
  setup(e) {
14
- const t = e, r = n(() => !!t.color && /[#(,\s]/.test(t.color)), a = n(() => {
15
- const { color: o } = t;
16
- return !o || !r.value ? {} : /gradient\(|url\(/i.test(o) ? { backgroundImage: o } : { backgroundColor: o };
17
- }), c = n(() => {
18
- const { ribbonHeight: o } = t;
19
- return o == null || o === "" ? {} : {
20
- "--zl-corner-tag-ribbon-width": typeof o == "number" ? `${o}px` : String(o)
21
- };
22
- });
23
- return (o, C) => (l(), s("div", {
24
- class: g(["zl-corner-tag", {
13
+ return (t, g) => (o(), a("div", {
14
+ class: r(["zl-corner-tag", {
25
15
  [`zl-corner-tag-position-${e.position}`]: e.position,
26
- [`zl-corner-tag-color-${e.color}`]: e.color && !r.value,
16
+ [`zl-corner-tag-color-${e.color}`]: e.color,
27
17
  [`zl-corner-tag-variant-${e.variant}`]: e.variant !== "badge"
28
- }]),
29
- style: u([a.value, c.value])
18
+ }])
30
19
  }, [
31
- e.icon ? (l(), d(v, {
20
+ e.icon ? (o(), c(m, {
32
21
  key: 0,
33
22
  class: "zl-corner-tag__icon",
34
23
  icon: e.icon
35
- }, null, 8, ["icon"])) : m("", !0),
36
- b("span", z, [
37
- f(o.$slots, "default")
24
+ }, null, 8, ["icon"])) : l("", !0),
25
+ i("span", d, [
26
+ s(t.$slots, "default")
38
27
  ])
39
- ], 6));
28
+ ], 2));
40
29
  }
41
30
  });
42
31
  export {
43
- y as default
32
+ z as default
44
33
  };
45
34
  //# sourceMappingURL=ZlCornerTag.vue.mjs.map
@@ -1,4 +1,4 @@
1
- import { defineComponent as k, computed as t, ref as s, openBlock as c, createElementBlock as u, normalizeClass as f, createBlock as h, createCommentVNode as r, createVNode as g, withCtx as V, createElementVNode as x, renderSlot as I } from "vue";
1
+ import { defineComponent as k, computed as t, ref as i, openBlock as c, createElementBlock as u, normalizeClass as f, createBlock as h, createCommentVNode as r, createVNode as g, withCtx as V, createElementVNode as x, renderSlot as I } from "vue";
2
2
  import $ from "../ZlAutoTooltip/index.vue.mjs";
3
3
  import v from "../ZlIcon/index.vue.mjs";
4
4
  const N = { class: "zl-tag__text" }, A = /* @__PURE__ */ k({
@@ -38,9 +38,9 @@ const N = { class: "zl-tag__text" }, A = /* @__PURE__ */ k({
38
38
  },
39
39
  emits: ["close", "update:visible", "update:selected", "select"],
40
40
  setup(e, { emit: b }) {
41
- const l = e, o = b, m = t(() => l.size ?? "small"), z = t(() => l.disabled), n = t(() => l.dotIcon ? "zl:dot-fill" : l.icon), i = s(l.defaultVisible), y = t(() => l.visible ?? i.value), B = t(() => !l.selectable && l.fill), a = s(l.defaultSelected), p = t(() => l.selected ?? a.value);
41
+ const l = e, o = b, m = t(() => l.size ?? "small"), z = t(() => l.disabled), n = t(() => l.dotIcon ? "zl:dot-fill" : l.icon), s = i(l.defaultVisible), y = t(() => l.visible ?? s.value), B = t(() => !l.selectable && l.fill), a = i(l.defaultSelected), p = t(() => l.selected ?? a.value);
42
42
  function C(d) {
43
- i.value = !1, o("update:visible", !1), o("close", d);
43
+ s.value = !1, o("update:visible", !1), o("close", d);
44
44
  }
45
45
  function S() {
46
46
  l.selectable && (a.value = !a.value, o("update:selected", a.value), o("select", a.value));
@@ -83,7 +83,7 @@ const N = { class: "zl-tag__text" }, A = /* @__PURE__ */ k({
83
83
  class: "zl-tag__close",
84
84
  onClick: C
85
85
  }, [
86
- g(v, { icon: "zl:disagree" })
86
+ g(v, { icon: "zl:cross" })
87
87
  ])) : r("", !0)
88
88
  ], 2));
89
89
  }
@@ -1 +1 @@
1
- .zl-upload[data-v-9fa4ae68]{width:100%}.zl-upload__trigger[data-v-9fa4ae68]{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--zl-border-3, var(--el-border-color));border-radius:6px;cursor:pointer}.zl-upload__trigger[data-v-9fa4ae68]:hover{border-color:var(--zl-primary-6, var(--el-color-primary))}.zl-upload__item[data-v-9fa4ae68]{display:flex;align-items:center;gap:8px;padding:4px 8px;width:100%}.zl-upload__item[data-v-9fa4ae68]:hover{background:var(--zl-fill-1, var(--el-fill-color-light))}.zl-upload__item-thumbnail[data-v-9fa4ae68]{height:32px;width:32px;object-fit:cover;cursor:pointer}.zl-upload__item-name[data-v-9fa4ae68]{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zl-upload__item-op[data-v-9fa4ae68]{color:var(--zl-text-2)}.zl-upload__tip[data-v-9fa4ae68]{font-size:12px;color:var(--zl-text-3);line-height:18px;white-space:pre-wrap;word-break:break-all}
1
+ .zl-upload[data-v-dacf78f1]{width:100%}.zl-upload__trigger[data-v-dacf78f1]{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--zl-border-3, var(--el-border-color));border-radius:6px;cursor:pointer}.zl-upload__trigger[data-v-dacf78f1]:hover{border-color:var(--zl-primary-6, var(--el-color-primary))}.zl-upload__item[data-v-dacf78f1]{display:flex;align-items:center;gap:8px;padding:4px 8px;width:100%}.zl-upload__item[data-v-dacf78f1]:hover{background:var(--zl-fill-1, var(--el-fill-color-light))}.zl-upload__item-thumbnail[data-v-dacf78f1]{height:32px;width:32px;object-fit:cover;cursor:pointer}.zl-upload__item-name[data-v-dacf78f1]{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zl-upload__item-op[data-v-dacf78f1]{color:var(--zl-text-2)}.zl-upload__tip[data-v-dacf78f1]{font-size:12px;color:var(--zl-text-3);line-height:18px;white-space:pre-wrap;word-break:break-all}
@@ -1,4 +1,3 @@
1
- import { UploadFile, UploadRawFile } from 'element-plus';
2
1
  type __VLS_Props = {
3
2
  /** 自定义上传函数(form, config)→ Promise */
4
3
  request?: (form: FormData, config: Record<string, any>) => Promise<any>;
@@ -25,22 +24,6 @@ type __VLS_Props = {
25
24
  showTip?: boolean;
26
25
  /** 校验文件名不得含空格 */
27
26
  verifySpace?: boolean;
28
- /** 文件列表展示形态,透传 `el-upload` 的 list-type(默认 picture) */
29
- listType?: 'text' | 'picture' | 'picture-card';
30
- /** 是否禁用上传;未设置时沿用 `el-form` 的 disabled */
31
- disabled?: boolean;
32
- /** 是否启用拖拽上传(配合默认插槽自定义上传区) */
33
- drag?: boolean;
34
- /** 是否支持选择文件夹 */
35
- directory?: boolean;
36
- /** 是否允许多选文件;未设置时按 limit 推导(limit 未设置或大于 1 时多选) */
37
- multiple?: boolean;
38
- /** 是否展示文件列表(默认 true) */
39
- showFileList?: boolean;
40
- /** 是否选择文件后立即上传(默认 true);设为 false 后用 `submit()` 手动提交 */
41
- autoUpload?: boolean;
42
- /** 移除文件前的钩子,返回 false 或 reject 时中止移除 */
43
- beforeRemove?: (file: UploadFile, fileList: UploadFile[]) => any;
44
27
  };
45
28
  type __VLS_PublicProps = {
46
29
  modelValue?: any;
@@ -49,35 +32,17 @@ declare function __VLS_template(): {
49
32
  attrs: Partial<{}>;
50
33
  slots: {
51
34
  default?(_: {}): any;
52
- file?(_: any): any;
53
- tip?(_: {}): any;
54
- };
55
- refs: {
56
- uploadRef: unknown;
57
35
  };
36
+ refs: {};
58
37
  rootEl: any;
59
38
  };
60
39
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
61
- declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
62
- /** 取消(中止)正在进行的上传请求 */
63
- abort: () => void | undefined;
64
- /** 手动提交文件列表,配合 `auto-upload=false` 使用 */
65
- submit: () => void | undefined;
66
- /** 清空文件列表;可传状态数组只清指定状态(如 `['ready']`) */
67
- clearFiles: (status?: ("ready" | "uploading" | "success" | "fail")[]) => void | undefined;
68
- /** 手动把文件加入上传列表(等价于用户选择文件) */
69
- handleStart: (file: UploadRawFile) => void | undefined;
70
- /** 手动从列表移除某个文件 */
71
- handleRemove: (file: UploadFile | UploadRawFile) => void | undefined;
72
- }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
40
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
73
41
  "update:modelValue": (value: any) => any;
74
42
  }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
75
43
  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
76
44
  }>, {
77
45
  separator: string;
78
- drag: boolean;
79
- multiple: boolean;
80
- disabled: boolean;
81
46
  modelValue: any;
82
47
  responseUrlKey: string;
83
48
  downloadButtonVisible: boolean;
@@ -85,13 +50,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
85
50
  showDownloadButton: boolean;
86
51
  showTip: boolean;
87
52
  verifySpace: boolean;
88
- listType: "text" | "picture" | "picture-card";
89
- directory: boolean;
90
- showFileList: boolean;
91
- autoUpload: boolean;
92
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
93
- uploadRef: unknown;
94
- }, any>;
53
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
95
54
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
96
55
  export default _default;
97
56
  type __VLS_WithTemplateSlots<T, S> = T & {
@@ -1,8 +1,8 @@
1
1
  import o from "./index2.vue.mjs";
2
2
  import './index.css';/* empty css */
3
- import a from "../../_virtual/_plugin-vue_export-helper.mjs";
4
- const f = /* @__PURE__ */ a(o, [["__scopeId", "data-v-9fa4ae68"]]);
3
+ import t from "../../_virtual/_plugin-vue_export-helper.mjs";
4
+ const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-dacf78f1"]]);
5
5
  export {
6
- f as default
6
+ r as default
7
7
  };
8
8
  //# sourceMappingURL=index.vue.mjs.map
@@ -1,19 +1,16 @@
1
- import { defineComponent as I, computed as n, useModel as N, ref as h, useAttrs as Z, resolveComponent as O, resolveDirective as W, withDirectives as G, openBlock as f, createElementBlock as m, createVNode as b, mergeProps as H, withCtx as g, renderSlot as w, createElementVNode as z, normalizeProps as J, guardReactiveProps as Q, toDisplayString as $, createCommentVNode as x, mergeModels as X } from "vue";
2
- import { useZlT as Y } from "@zl-ui-kit/composables";
3
- import { joinFilePrefix as ee } from "@zl-ui-kit/utils";
4
- import { ElMessage as B } from "element-plus";
5
- import R from "../ZlIcon/index.vue.mjs";
6
- const te = { class: "zl-upload" }, le = { class: "zl-upload__trigger" }, oe = {
7
- key: 1,
8
- class: "zl-upload__item"
9
- }, ae = ["src", "onClick"], ie = ["title"], se = ["href", "download"], re = {
1
+ import { defineComponent as K, computed as n, useModel as T, ref as S, useAttrs as q, resolveComponent as N, resolveDirective as R, withDirectives as Z, openBlock as v, createElementBlock as g, createVNode as w, mergeProps as O, withCtx as B, renderSlot as W, createElementVNode as d, toDisplayString as x, createCommentVNode as V, mergeModels as G } from "vue";
2
+ import { useZlT as H } from "@zl-ui-kit/composables";
3
+ import { joinFilePrefix as J } from "@zl-ui-kit/utils";
4
+ import { ElMessage as z } from "element-plus";
5
+ import U from "../ZlIcon/index.vue.mjs";
6
+ const Q = { class: "zl-upload" }, X = { class: "zl-upload__trigger" }, Y = { class: "zl-upload__item" }, ee = ["src", "onClick"], te = ["title"], oe = ["href", "download"], le = {
10
7
  key: 0,
11
8
  class: "zl-upload__tip"
12
- }, fe = /* @__PURE__ */ I({
9
+ }, ue = /* @__PURE__ */ K({
13
10
  name: "ZlUpload",
14
11
  inheritAttrs: !1,
15
12
  __name: "index",
16
- props: /* @__PURE__ */ X({
13
+ props: /* @__PURE__ */ G({
17
14
  request: {},
18
15
  modelValue: { default: "" },
19
16
  accept: {},
@@ -26,170 +23,133 @@ const te = { class: "zl-upload" }, le = { class: "zl-upload__trigger" }, oe = {
26
23
  tipVisible: { type: Boolean, default: void 0 },
27
24
  showDownloadButton: { type: Boolean, default: void 0 },
28
25
  showTip: { type: Boolean, default: void 0 },
29
- verifySpace: { type: Boolean, default: !1 },
30
- listType: { default: "picture" },
31
- disabled: { type: Boolean, default: void 0 },
32
- drag: { type: Boolean, default: void 0 },
33
- directory: { type: Boolean, default: void 0 },
34
- multiple: { type: Boolean, default: void 0 },
35
- showFileList: { type: Boolean, default: !0 },
36
- autoUpload: { type: Boolean, default: !0 },
37
- beforeRemove: {}
26
+ verifySpace: { type: Boolean, default: !1 }
38
27
  }, {
39
28
  modelValue: { default: "" },
40
29
  modelModifiers: {}
41
30
  }),
42
31
  emits: ["update:modelValue"],
43
- setup(S, { expose: L }) {
44
- const { t: d } = Y(), t = S, k = n(() => t.downloadButtonVisible ?? t.showDownloadButton ?? !0), P = n(() => t.tipVisible ?? t.showTip ?? !0), u = N(S, "modelValue"), v = h([]);
32
+ setup(h) {
33
+ const { t: u } = H(), t = h, $ = n(() => t.downloadButtonVisible ?? t.showDownloadButton ?? !0), j = n(() => t.tipVisible ?? t.showTip ?? !0), r = T(h, "modelValue"), m = S([]);
45
34
  function C(e) {
46
- return e.split(t.separator).filter((l) => !!l).map((l) => {
47
- const a = v.value.filter((i) => i.status === "success").find((i) => i.response?.[t.responseUrlKey] === l);
35
+ return e.split(t.separator).filter((o) => !!o).map((o) => {
36
+ const s = m.value.filter((a) => a.status === "success").find((a) => a.response?.[t.responseUrlKey] === o);
48
37
  return {
49
- url: a ? a.url : ee(l),
50
- name: (l.match(/[^/\\]+$/)?.[0] ?? l).split("-").pop() ?? l,
51
- isImage: /\.(?:jpe?g|png|gif|bmp|webp)$/i.test(l),
38
+ url: s ? s.url : J(o),
39
+ name: (o.match(/[^/\\]+$/)?.[0] ?? o).split("-").pop() ?? o,
40
+ isImage: /\.(?:jpe?g|png|gif|bmp|webp)$/i.test(o),
52
41
  response: {
53
- [t.responseUrlKey]: l
42
+ [t.responseUrlKey]: o
54
43
  },
55
44
  status: "success"
56
45
  };
57
46
  });
58
47
  }
59
- function T(e) {
60
- return e.filter((l) => l.status === "success").map((l) => l.response?.[t.responseUrlKey]).filter(Boolean).join(t.separator);
48
+ function F(e) {
49
+ return e.filter((o) => o.status === "success").map((o) => o.response?.[t.responseUrlKey]).filter(Boolean).join(t.separator);
61
50
  }
62
- const U = n({
51
+ const b = n({
63
52
  get() {
64
- return typeof u.value == "string" ? [...C(u.value), ...v.value.filter((e) => e.status !== "success")] : u.value;
53
+ return typeof r.value == "string" ? [...C(r.value), ...m.value.filter((e) => e.status !== "success")] : r.value;
65
54
  },
66
55
  set(e) {
67
- u.value = typeof u.value == "string" ? T(e) : e, v.value = e;
56
+ r.value = typeof r.value == "string" ? F(e) : e, m.value = e;
68
57
  }
69
- }), V = Z(), j = n(() => t.accept ? t.accept.split(",") : []);
70
- function D(e) {
71
- const { file: l, onSuccess: a, onError: i, onProgress: o } = e, y = new AbortController(), K = (s) => {
72
- const q = s.total > 0 ? s.loaded / s.total * 90 : 0;
73
- o({ percent: q });
74
- }, F = new FormData();
75
- return F.append("file", l), t.request?.(F, { signal: y.signal, onUploadProgress: K }).then((s) => {
76
- a({ ...s.data });
77
- }).catch((s) => {
78
- i(s);
58
+ }), k = q(), D = n(() => t.accept ? t.accept.split(",") : []);
59
+ function L(e) {
60
+ const { file: o, onSuccess: s, onError: a, onProgress: l } = e, _ = new AbortController(), E = (i) => {
61
+ const I = i.total > 0 ? i.loaded / i.total * 90 : 0;
62
+ l({ percent: I });
63
+ }, y = new FormData();
64
+ return y.append("file", o), t.request?.(y, { signal: _.signal, onUploadProgress: E }).then((i) => {
65
+ s({ ...i.data });
66
+ }).catch((i) => {
67
+ a(i);
79
68
  }), {
80
69
  abort() {
81
- y.abort();
70
+ _.abort();
82
71
  }
83
72
  };
84
73
  }
85
74
  const c = n(() => {
86
75
  const e = {};
87
- return t.accept && (e.accept = d("zl.upload.accept", `仅支持${t.accept}格式的文件`, { accept: t.accept })), t.limit && (e.limit = d("zl.upload.limit", `最多可上传${t.limit}个`, { limit: t.limit })), t.maxSize && (e.maxSize = d("zl.upload.maxSize", `大小不超过${t.maxSize}MB`, { maxSize: t.maxSize })), e;
88
- }), _ = n(() => {
76
+ return t.accept && (e.accept = u("zl.upload.accept", `仅支持${t.accept}格式的文件`, { accept: t.accept })), t.limit && (e.limit = u("zl.upload.limit", `最多可上传${t.limit}个`, { limit: t.limit })), t.maxSize && (e.maxSize = u("zl.upload.maxSize", `大小不超过${t.maxSize}MB`, { maxSize: t.maxSize })), e;
77
+ }), f = n(() => {
89
78
  const e = [t.tip, ...Object.values(c.value)].filter(Boolean).join(", ");
90
79
  return {
91
80
  accept: t.accept,
92
81
  limit: t.limit,
93
- listType: t.listType,
94
- disabled: t.disabled,
95
- drag: t.drag,
96
- directory: t.directory,
97
- showFileList: t.showFileList,
98
- autoUpload: t.autoUpload,
99
- beforeRemove: t.beforeRemove,
100
- multiple: t.multiple ?? (t.limit ? t.limit > 1 : !0),
101
- httpRequest: D,
102
- fileList: U.value,
103
- "onUpdate:fileList": (l) => U.value = l,
104
- ...V,
82
+ multiple: t.limit ? t.limit > 1 : !0,
83
+ httpRequest: L,
84
+ fileList: b.value,
85
+ "onUpdate:fileList": (o) => b.value = o,
86
+ ...k,
105
87
  // tip 不透传 el-upload(无此属性),由组件尾部渲染
106
88
  tip: void 0,
107
- __tip: P.value ? e : ""
89
+ __tip: j.value ? e : ""
108
90
  };
109
91
  });
110
- function A(e) {
111
- return j.value.some((l) => l.includes("/") ? e.type.startsWith(l.replace(/\*$/, "")) : e.name.endsWith(l));
92
+ function P(e) {
93
+ return D.value.some((o) => o.includes("/") ? e.type.startsWith(o.replace(/\*$/, "")) : e.name.endsWith(o));
112
94
  }
113
- async function M(e) {
114
- const l = V.beforeUpload;
115
- if (typeof l == "function")
116
- try {
117
- if (await l(e) === !1) return !1;
118
- } catch {
119
- return !1;
120
- }
121
- return t.verifySpace && /\s/.test(e.name) ? (B.warning(d("zl.upload.nameSpace", "文件名中不得包含空格")), !1) : c.value.accept && !A(e) ? (B.warning(c.value.accept), !1) : t.maxSize && e.size > t.maxSize * 1024 * 1024 ? (B.warning(c.value.maxSize), !1) : !0;
95
+ function A(e) {
96
+ return t.verifySpace && /\s/.test(e.name) ? (z.warning(u("zl.upload.nameSpace", "文件名中不得包含空格")), !1) : c.value.accept && !P(e) ? (z.warning(c.value.accept), !1) : t.maxSize && e.size > t.maxSize * 1024 * 1024 ? (z.warning(c.value.maxSize), !1) : !0;
122
97
  }
123
- const p = h(!1);
124
- function E(e) {
125
- e.status === "success" && (p.value = !0, fetch(e.url ?? "").then((l) => l.blob()).then((l) => {
98
+ const p = S(!1);
99
+ function M(e) {
100
+ e.status === "success" && (p.value = !0, fetch(e.url ?? "").then((o) => o.blob()).then((o) => {
126
101
  p.value = !1;
127
- const a = URL.createObjectURL(l);
128
- window.open(a);
102
+ const s = URL.createObjectURL(o);
103
+ window.open(s);
129
104
  }).catch(() => {
130
105
  p.value = !1;
131
106
  }));
132
107
  }
133
- const r = h();
134
- return L({
135
- /** 取消(中止)正在进行的上传请求 */
136
- abort: () => r.value?.abort(),
137
- /** 手动提交文件列表,配合 `auto-upload=false` 使用 */
138
- submit: () => r.value?.submit(),
139
- /** 清空文件列表;可传状态数组只清指定状态(如 `['ready']`) */
140
- clearFiles: (e) => r.value?.clearFiles(e),
141
- /** 手动把文件加入上传列表(等价于用户选择文件) */
142
- handleStart: (e) => r.value?.handleStart(e),
143
- /** 手动从列表移除某个文件 */
144
- handleRemove: (e) => r.value?.handleRemove(e)
145
- }), (e, l) => {
146
- const a = O("el-upload"), i = W("loading");
147
- return G((f(), m("div", te, [
148
- b(a, H({
149
- ref_key: "uploadRef",
150
- ref: r
151
- }, _.value, { "before-upload": M }), {
152
- file: g((o) => [
153
- e.$slots.file ? w(e.$slots, "file", J(Q(o)), void 0, !0, 0) : (f(), m("div", oe, [
154
- z("img", {
108
+ return (e, o) => {
109
+ const s = N("el-upload"), a = R("loading");
110
+ return Z((v(), g("div", Q, [
111
+ w(s, O(f.value, {
112
+ "before-upload": A,
113
+ "list-type": "picture"
114
+ }), {
115
+ file: B(({ file: l }) => [
116
+ d("div", Y, [
117
+ d("img", {
155
118
  class: "zl-upload__item-thumbnail",
156
- src: o.file.url,
157
- onClick: (y) => E(o.file)
158
- }, null, 8, ae),
159
- z("span", {
119
+ src: (l.isImage !== !1 && /\.(?:jpe?g|png|gif|bmp|webp)$/i.test(l.name), l.url),
120
+ onClick: (_) => M(l)
121
+ }, null, 8, ee),
122
+ d("span", {
160
123
  class: "zl-upload__item-name",
161
- title: o.file.name
162
- }, $(o.file.name), 9, ie),
163
- k.value && o.file.status === "success" && o.file.url ? (f(), m("a", {
124
+ title: l.name
125
+ }, x(l.name), 9, te),
126
+ $.value && l.status === "success" && l.url ? (v(), g("a", {
164
127
  key: 0,
165
128
  class: "zl-upload__item-op",
166
- href: o.file.url,
167
- download: o.file.name
129
+ href: l.url,
130
+ download: l.name
168
131
  }, [
169
- b(R, { icon: "zl:download" })
170
- ], 8, se)) : x("", !0)
171
- ]))
172
- ]),
173
- tip: g(() => [
174
- w(e.$slots, "tip", {}, void 0, !0)
132
+ w(U, { icon: "zl:download" })
133
+ ], 8, oe)) : V("", !0)
134
+ ])
175
135
  ]),
176
- default: g(() => [
177
- w(e.$slots, "default", {}, () => [
178
- z("div", le, [
179
- b(R, { icon: "zl:add" })
136
+ default: B(() => [
137
+ W(e.$slots, "default", {}, () => [
138
+ d("div", X, [
139
+ w(U, { icon: "zl:add" })
180
140
  ])
181
141
  ], !0)
182
142
  ]),
183
143
  _: 3
184
144
  }, 16),
185
- _.value.__tip && !e.$slots.tip ? (f(), m("div", re, $(_.value.__tip), 1)) : x("", !0)
145
+ f.value.__tip ? (v(), g("div", le, x(f.value.__tip), 1)) : V("", !0)
186
146
  ])), [
187
- [i, p.value]
147
+ [a, p.value]
188
148
  ]);
189
149
  };
190
150
  }
191
151
  });
192
152
  export {
193
- fe as default
153
+ ue as default
194
154
  };
195
155
  //# sourceMappingURL=index2.vue.mjs.map
package/dist/index.d.ts CHANGED
@@ -3,28 +3,24 @@ export { default as ZlAction } from './components/ZlAction/index.vue';
3
3
  export { default as ZlActionList } from './components/ZlAction/List.vue';
4
4
  export { default as ZlAddSub } from './components/ZlAddSub/index.vue';
5
5
  export { default as ZlAppLayout } from './components/ZlAppLayout/index.vue';
6
+ export { default as ZlAppMenu } from './components/ZlAppMenu/AppMenu.vue';
6
7
  export { default as ZlAppSlogan } from './components/ZlAppSlogan/index.vue';
7
8
  export { default as ZlAutoTooltip } from './components/ZlAutoTooltip/index.vue';
8
9
  export { default as ZlAvatar } from './components/ZlAvatar/index.vue';
9
10
  export { default as ZlAvatarGroup } from './components/ZlAvatar/Group.vue';
10
- export { default as ZlBreadcrumb } from './components/ZlBreadcrumb/index.vue';
11
- export { default as ZlButton } from './components/ZlButton/index.vue';
12
11
  export { default as ZlCard } from './components/ZlCard/index.vue';
13
12
  export { default as ZlCardPage } from './components/ZlCardPage/index.vue';
14
13
  export { default as ZlCheckAll } from './components/ZlCheckAll/index.vue';
15
14
  export { default as ZlCheckboxTag } from './components/ZlCheckboxTag/index.vue';
16
15
  export { default as ZlCopy } from './components/ZlCopy/index.vue';
17
16
  export { default as ZlDescription } from './components/ZlDescription/index.vue';
18
- export { default as ZlDevMenu } from './components/ZlDevMenu/index.vue';
19
17
  export { default as ZlDialog } from './components/ZlDialog/index.vue';
20
18
  export { default as ZlDictTag } from './components/ZlDictTag/index.vue';
21
19
  export { default as ZlDrawer } from './components/ZlDrawer/index.vue';
22
20
  export { default as ZlDynamicComponent } from './components/ZlDynamicComponent/index.vue';
23
21
  export { default as ZlPdfViewer } from './components/ZlPdfViewer/index.vue';
24
- export { default as ZlLoading } from './components/ZlLoading/index.vue';
25
22
  export { default as ZlLogin } from './components/ZlLogin/index.vue';
26
23
  export { default as ZlLoginForm } from './components/ZlLogin/components/LoginForm.vue';
27
- export { default as ZlMenu } from './components/ZlMenu/index.vue';
28
24
  export { default as ZlEmpty } from './components/ZlEmpty/index.vue';
29
25
  export { default as ZlForm } from './components/ZlForm/index.vue';
30
26
  export { default as ZlFormChild } from './components/ZlForm/ZlFormChild.vue';
@@ -63,10 +59,8 @@ export * from './components/ZlIcon/presetIconifyIcon';
63
59
  export { usePagination } from './components/ZlPagination/usePagination';
64
60
  export { useTablePagination } from './components/ZlTable/useTablePagination';
65
61
  export { usePermission, usePermissionProvider } from './components/ZlPermission/usePermission';
66
- export type { MenuOption } from './components/ZlMenu/types';
62
+ export type { MenuItem } from './components/ZlAppMenu/AppMenu.vue';
67
63
  export type { StepItem } from './components/ZlStep/index.vue';
68
- export type { BreadcrumbItem } from './components/ZlBreadcrumb/types';
69
- export type { DevMenuRoute } from './components/ZlDevMenu/types';
70
64
  export type { ActionItem, FormItem, SearchItem, TableColumn } from './types';
71
65
  export type { IGridItem } from './components/ZlGrid/types';
72
66
  export type { IComponent, IComponentSlot, VForSlot, VModelSlot, ComponentOrSlot, } from './components/ZlDynamicComponent/types';