ant-design-x-vue/es/attachments/FileList/FileListCard.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as M, toRef as V, createVNode as e, computed as o, useTemplateRef as U, watch as X, onWatcherCleanup as G, Fragment as h, mergeProps as W } from "vue";
import { F as k, d as D, e as K, f as Y, g as Z, h as q, i as H, j as J, b as Q, C as _ } from "../../chunks/module-chunk.mjs";
import ee from "./AudioIcon.mjs";
import le from "./VideoIcon.mjs";
import { useAttachmentContextInject as ie } from "../context.mjs";
import "../../x-provider/index.mjs";
import { previewImage as ne } from "../util.mjs";
import te from "../style/index.mjs";
import oe from "../../_util/hooks/use-state.mjs";
import { Image as ae, Progress as ce } from "ant-design-vue";
import re from "../../x-provider/hooks/use-x-provider-context.mjs";
const v = " ", s = "#8c8c8c", Ce = /* @__PURE__ */ M({
  name: "AXAttachmentsFileListCard",
  __name: "FileListCard",
  props: {
    prefixCls: null,
    item: null,
    onRemove: {
      type: Function
    },
    className: null,
    style: null,
    imageProps: null,
    icon: null,
    type: null
  },
  setup(l, {
    expose: S
  }) {
    V(l, "prefixCls");
    const x = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"], g = [{
      key: "default",
      icon: e(k, null, null),
      color: s,
      ext: []
    }, {
      key: "excel",
      icon: e(D, null, null),
      color: "#22b35e",
      ext: ["xlsx", "xls"]
    }, {
      key: "image",
      icon: e(K, null, null),
      color: s,
      ext: x
    }, {
      key: "markdown",
      icon: e(Y, null, null),
      color: s,
      ext: ["md", "mdx"]
    }, {
      key: "pdf",
      icon: e(Z, null, null),
      color: "#ff4d4f",
      ext: ["pdf"]
    }, {
      key: "ppt",
      icon: e(q, null, null),
      color: "#ff6e31",
      ext: ["ppt", "pptx"]
    }, {
      key: "word",
      icon: e(H, null, null),
      color: "#1677ff",
      ext: ["doc", "docx"]
    }, {
      key: "zip",
      icon: e(J, null, null),
      color: "#fab714",
      ext: ["zip", "rar", "7z", "tar", "gz"]
    }, {
      key: "video",
      icon: e(le, null, null),
      color: "#ff4d4f",
      ext: ["mp4", "avi", "mov", "wmv", "flv", "mkv"]
    }, {
      key: "audio",
      icon: e(ee, null, null),
      color: "#8c8c8c",
      ext: ["mp3", "wav", "flac", "ape", "aac", "ogg"]
    }];
    function p(n, t) {
      return t.some((c) => n.toLowerCase() === `.${c}`);
    }
    function P(n) {
      let t = n;
      const c = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
      let d = 0;
      for (; t >= 1024 && d < c.length - 1; )
        t /= 1024, d++;
      return `${t.toFixed(0)} ${c[d]}`;
    }
    const b = ie(), E = o(() => b.value.disabled), j = o(() => l.item.name), F = o(() => l.item.size), u = o(() => l.item.percent), a = o(() => l.item.status || "done"), y = o(() => l.item.description), {
      getPrefixCls: z
    } = re(), C = o(() => z("attachment", l.prefixCls)), i = `${C.value}-list-card`, [O, R, B] = te(C), T = U("file-list-card-container"), r = o(() => {
      const n = j.value || "", t = n.match(/^(.*)\.[^.]+$/);
      return {
        namePrefix: t ? t[1] : n,
        nameSuffix: t ? n.slice(t[1].length) : ""
      };
    }), A = o(() => p(r.value.nameSuffix, x)), $ = o(() => y.value ? y.value : a.value === "uploading" ? `${u.value || 0}%` : a.value === "error" ? l.item.response || v : F.value ? P(F.value) : v), w = o(() => {
      if (l.icon)
        if (typeof l.icon == "string") {
          const n = g.find((t) => t.key === l.icon);
          if (n)
            return {
              icon: n.icon,
              color: n.color
            };
        } else
          return {
            icon: l.icon,
            color: void 0
          };
      for (const {
        ext: n,
        icon: t,
        color: c
      } of g)
        if (p(r.value.nameSuffix, n))
          return {
            icon: t,
            iconColor: c
          };
      return {
        icon: e(k, {
          key: "defaultIcon"
        }, null),
        iconColor: s
      };
    }), [L, I] = oe();
    X(() => l.item.originFileObj, () => {
      if (l.item.originFileObj) {
        let n = !0;
        ne(l.item.originFileObj).then((t) => {
          n && I(t);
        }), G(() => {
          n = !1;
        });
      }
      I(void 0);
    }, {
      immediate: !0
    });
    const m = o(() => l.item.thumbUrl || l.item.url || L.value), f = o(() => l.type === "image" || l.type !== "file" && A.value && (l.item.originFileObj || m.value)), N = o(() => f.value ? e(h, null, [m.value && e(ae, W(l.imageProps, {
      alt: "preview",
      src: m.value
    }), null), a.value !== "done" && e("div", {
      class: `${i}-img-mask`
    }, [a.value === "uploading" && u.value !== void 0 && e(ce, {
      percent: u.value,
      prefixCls: i
    }, null), a.value === "error" && e("div", {
      class: `${i}-desc`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [$.value])])])]) : e(h, null, [e("div", {
      class: `${i}-icon`,
      style: {
        color: w.value.iconColor
      }
    }, [w.value.icon]), e("div", {
      class: `${i}-content`
    }, [e("div", {
      class: `${i}-name`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [r.value.namePrefix ?? v]), e("div", {
      class: `${i}-ellipsis-suffix`
    }, [r.value.nameSuffix])]), e("div", {
      class: `${i}-desc`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [$.value])])])]));
    return S({
      nativeElement: T
    }), () => O(e("div", {
      class: Q(i, {
        [`${i}-status-${a.value}`]: a.value,
        [`${i}-type-preview`]: f.value,
        [`${i}-type-overview`]: !f.value
      }, l.className, R.value, B),
      style: l.style,
      ref: "file-list-card-container"
    }, [N.value, !E.value && l.onRemove && e("button", {
      type: "button",
      class: `${i}-remove`,
      onClick: () => {
        l.onRemove(l.item);
      }
    }, [e(_, null, null)])]));
  }
});
export {
  Ce as default
};