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

Craft AI-driven interfaces effortlessly

import { defineComponent as z, toRef as D, createVNode as e, computed as o, useTemplateRef as N, watch as M, onWatcherCleanup as U, Fragment as h, mergeProps as V } from "vue";
import { F as E, d as W, e as G, f as K, g as Z, h as Y, 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 { matchExt as I, previewImage as te } from "../util.mjs";
import ne from "../style/index.mjs";
import oe from "../../_util/hooks/use-state.mjs";
import { Image as re, Progress as ae } from "ant-design-vue";
import { EXCEL_EXTS as ce, IMG_EXTS as $, MARKDOWN_EXTS as se, PDF_EXTS as ue, PPT_EXTS as me, WORD_EXTS as fe, ZIP_EXTS as de, VIDEO_EXTS as ve, AUDIO_EXTS as xe } from "../constants.mjs";
import ge from "../../x-provider/hooks/use-x-provider-context.mjs";
import { _ as Fe } from "../../chunks/helper-chunk.mjs";
const v = " ", s = "#8c8c8c", ye = /* @__PURE__ */ z({
  name: "AXAttachmentsFileListCard",
  __name: "FileListCard",
  props: {
    prefixCls: {
      type: String,
      required: !1
    },
    item: {
      type: Object,
      required: !0
    },
    onRemove: {
      type: Function,
      required: !1
    },
    className: {
      type: String,
      required: !1
    },
    style: {
      required: !1
    },
    imageProps: {
      required: !1
    },
    icon: {
      required: !1
    },
    type: {
      type: String,
      required: !1
    }
  },
  setup(l, {
    expose: P
  }) {
    D(l, "prefixCls");
    const x = [{
      key: "default",
      icon: e(E, null, null),
      color: s,
      ext: /* @__PURE__ */ new Set([])
    }, {
      key: "excel",
      icon: e(W, null, null),
      color: "#22b35e",
      ext: ce
    }, {
      key: "image",
      icon: e(G, null, null),
      color: s,
      ext: $
    }, {
      key: "markdown",
      icon: e(K, null, null),
      color: s,
      ext: se
    }, {
      key: "pdf",
      icon: e(Z, null, null),
      color: "#ff4d4f",
      ext: ue
    }, {
      key: "ppt",
      icon: e(Y, null, null),
      color: "#ff6e31",
      ext: me
    }, {
      key: "word",
      icon: e(H, null, null),
      color: "#1677ff",
      ext: fe
    }, {
      key: "zip",
      icon: e(J, null, null),
      color: "#fab714",
      ext: de
    }, {
      key: "video",
      icon: e(le, null, null),
      color: "#ff4d4f",
      ext: ve
    }, {
      key: "audio",
      icon: e(ee, null, null),
      color: "#8c8c8c",
      ext: xe
    }];
    function w(t) {
      let n = t;
      const c = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
      let d = 0;
      for (; n >= 1024 && d < c.length - 1; )
        n /= 1024, d++;
      return `${n.toFixed(0)} ${c[d]}`;
    }
    const k = ie(), T = o(() => k.value.disabled), b = o(() => l.item.name), g = o(() => l.item.size), u = o(() => l.item.percent), r = o(() => l.item.status || "done"), F = o(() => l.item.description), {
      getPrefixCls: O
    } = ge(), y = o(() => O("attachment", l.prefixCls)), i = `${y.value}-list-card`, [X, R, L] = ne(y), q = N("file-list-card-container"), a = o(() => {
      const t = b.value || "", n = t.match(/^(.*)\.[^.]+$/);
      return {
        namePrefix: n ? n[1] : t,
        nameSuffix: n ? t.slice(n[1].length) : ""
      };
    }), A = o(() => I(a.value.nameSuffix, $)), C = o(() => F.value ? F.value : r.value === "uploading" ? `${u.value || 0}%` : r.value === "error" ? l.item.response || v : g.value ? w(g.value) : v), S = o(() => {
      if (l.icon)
        if (typeof l.icon == "string") {
          const t = x.find((n) => n.key === l.icon);
          if (t)
            return {
              icon: t.icon,
              color: t.color
            };
        } else
          return {
            icon: l.icon,
            color: void 0
          };
      for (const {
        ext: t,
        icon: n,
        color: c
      } of x)
        if (I(a.value.nameSuffix, t))
          return {
            icon: n,
            iconColor: c
          };
      return {
        icon: e(E, {
          key: "defaultIcon"
        }, null),
        iconColor: s
      };
    }), [j, p] = oe();
    M(() => l.item.originFileObj, () => {
      if (l.item.originFileObj) {
        let t = !0;
        te(l.item.originFileObj).then((n) => {
          t && p(n);
        }), U(() => {
          t = !1;
        });
      }
      p(void 0);
    }, {
      immediate: !0
    });
    const m = o(() => l.item.thumbUrl || l.item.url || j.value), f = o(() => l.type === "image" || l.type !== "file" && A.value && (l.item.originFileObj || m.value)), B = o(() => f.value ? e(h, null, [m.value && e(re, V(l.imageProps, {
      alt: "preview",
      src: m.value
    }), null), r.value !== "done" && e("div", {
      class: `${i}-img-mask`
    }, [r.value === "uploading" && u.value !== void 0 && e(ae, {
      percent: u.value,
      prefixCls: i
    }, null), r.value === "error" && e("div", {
      class: `${i}-desc`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [C.value])])])]) : e(h, null, [e("div", {
      class: `${i}-icon`,
      style: {
        color: S.value.iconColor
      }
    }, [S.value.icon]), e("div", {
      class: `${i}-content`
    }, [e("div", {
      class: `${i}-name`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [a.value.namePrefix ?? v]), e("div", {
      class: `${i}-ellipsis-suffix`
    }, [a.value.nameSuffix])]), e("div", {
      class: `${i}-desc`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [C.value])])])]));
    return P({
      nativeElement: q
    }), () => X(e("div", {
      class: Q(i, {
        [`${i}-status-${r.value}`]: r.value,
        [`${i}-type-preview`]: f.value,
        [`${i}-type-overview`]: !f.value
      }, l.className, R.value, L),
      style: l.style,
      ref: "file-list-card-container"
    }, [B.value, !T.value && l.onRemove && e("button", {
      type: "button",
      class: `${i}-remove`,
      onClick: () => {
        l.onRemove(l.item);
      }
    }, [e(_, null, null)])]));
  }
}), Xe = /* @__PURE__ */ Fe(ye, [["__file", "/Users/wangzhichao/办公/code/github/ant-design-x-vue-pure/ant-design-x-vue/src/attachments/FileList/FileListCard.vue"]]);
export {
  Xe as default
};