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

Craft AI-driven interfaces effortlessly

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