ling-yun-custom-components 0.0.10

package/es/chunks/layout.CiNI5oQK.js

@@ -0,0 +1,149 @@
+import { useCssVars as U, ref as j, watch as D, createElementBlock as u, createCommentVNode as v, openBlock as a, Fragment as x, renderList as I, normalizeClass as _, unref as o, createElementVNode as f, createBlock as m, normalizeStyle as O, withCtx as z, resolveDynamicComponent as E, toDisplayString as S, renderSlot as k, createVNode as T } from "vue";
+import { ElImage as R, ElIcon as M } from "element-plus";
+import { emitsMap as c, uploadFileTypeMap as q, uploadFileType as r } from "ling-yun-methods";
+import { p as A, q as w, r as F, s as b, t as G, f as K } from "./index.DfOANPhX.js";
+import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/layout6.css';const i = {
+  uploading: "uploading",
+  success: "success",
+  error: "error"
+}, J = {
+  key: 0,
+  class: "file-list display-grid pd-t-12 pd-b-12"
+}, P = { class: "flex overflow-hidden flex-1 pd-r-10" }, Q = { class: "pd-l-8 flex-1 overflow-hidden" }, W = ["title"], X = { class: "fz-12 text-ellipsis lh-16" }, Y = {
+  key: 1,
+  class: "text-74798c"
+}, Z = /* @__PURE__ */ Object.assign({
+  name: "FileList"
+}, {
+  __name: "layout",
+  props: {
+    // 文件列表数据
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示删除按钮
+    showDelete: {
+      type: Boolean,
+      default: !0
+    },
+    // 字段映射配置
+    fieldMapping: {
+      type: Object,
+      default: () => ({
+        // fileName: 'fileName',
+        // fileUrl: 'fileUrl',
+      })
+    },
+    rowCount: {
+      type: Number,
+      default: 2
+    },
+    // 图标大小
+    iconSize: {
+      type: Number,
+      default: 36
+    }
+  },
+  emits: [c.delete, c.change, c.updateModelValue],
+  setup(l, { emit: B }) {
+    U((e) => ({
+      v247946fe: l.rowCount
+    }));
+    const p = l, y = B, n = j(p.modelValue), C = Object.fromEntries(
+      Object.entries(q).map(([e, s]) => [s, e])
+    ), g = (e) => e[p.fieldMapping.fileUrl] ? e[p.fieldMapping.fileUrl] : e.raw && e.raw instanceof File ? URL.createObjectURL(e.raw) : e instanceof File ? URL.createObjectURL(e) : "", V = {
+      [r.pdf]: G,
+      [r.doc]: b,
+      [r.docx]: b,
+      [r.xls]: F,
+      [r.xlsx]: F,
+      [r.ppt]: w,
+      [r.pptx]: w,
+      [r.txt]: A
+    }, $ = (e) => e?.includes("image"), L = (e) => {
+      const s = C[e];
+      return V[s];
+    }, h = (e) => {
+      if (!e || e === 0) return "0 B";
+      const s = 1024, t = ["B", "KB", "MB", "GB"], d = Math.floor(Math.log(e) / Math.log(s));
+      return `${parseFloat((e / Math.pow(s, d)).toFixed(2))} ${t[d]}`;
+    }, N = (e, s) => {
+      n.value.splice(s, 1), y(c.delete, e), y(c.updateModelValue, n.value), y(c.change, n.value);
+    };
+    return D(
+      () => p.modelValue,
+      (e) => {
+        n.value = e;
+      },
+      { immediate: !0 }
+    ), (e, s) => n.value?.length ? (a(), u("div", J, [
+      (a(!0), u(x, null, I(n.value, (t, d) => (a(), u("div", {
+        key: d,
+        class: _(["pd-l-8 pd-r-8 pd-t-6 pd-b-6 radius-8 file-item overflow-hidden flex items-center", {
+          "bg-uploading": t.fileStatus === o(i).uploading,
+          "bg-fcfdff": t.fileStatus !== o(i).uploading,
+          "border-error": t.fileStatus === o(i).error,
+          "border-normal": t.fileStatus !== o(i).error
+        }])
+      }, [
+        f("div", P, [
+          $(t?.type) && g(t) ? (a(), m(o(R), {
+            key: 0,
+            src: g(t),
+            class: "radius-4",
+            fit: "cover",
+            style: O({ width: `${l.iconSize}px`, height: `${l.iconSize}px` })
+          }, null, 8, ["src", "style"])) : (a(), m(o(M), {
+            key: 1,
+            size: l.iconSize,
+            class: "pointer"
+          }, {
+            default: z(() => [
+              (a(), m(E(L(t?.type))))
+            ]),
+            _: 2
+          }, 1032, ["size"])),
+          f("div", Q, [
+            f("div", {
+              class: _(["fz-14 text-ellipsis lh-20 flex-1", {
+                "text-ec0e13": t.fileStatus === o(i).error,
+                "text-262626": t.fileStatus !== o(i).error
+              }]),
+              title: t[l.fieldMapping.fileName]
+            }, S(t[l.fieldMapping.fileName]), 11, W),
+            f("div", X, [
+              e.$slots.status ? k(e.$slots, "status", {
+                key: 0,
+                file: t
+              }, void 0, !0) : (a(), u(x, { key: 1 }, [
+                e.$slots.size ? k(e.$slots, "size", {
+                  key: 0,
+                  file: t,
+                  size: h(t.size)
+                }, void 0, !0) : (a(), u("span", Y, S(h(t.size)), 1))
+              ], 64))
+            ])
+          ])
+        ]),
+        l.showDelete ? (a(), m(o(M), {
+          key: 0,
+          size: 16,
+          color: t.fileStatus === o(i).error ? "var(--error-color-1)" : "var(--text-color-4)",
+          class: "pointer",
+          onClick: (ee) => N(t, d)
+        }, {
+          default: z(() => [
+            T(o(K))
+          ]),
+          _: 1
+        }, 8, ["color", "onClick"])) : v("", !0)
+      ], 2))), 128))
+    ])) : v("", !0);
+  }
+}), re = /* @__PURE__ */ H(Z, [["__scopeId", "data-v-0980a743"]]);
+export {
+  re as _,
+  i as u
+};