jadq-x-vue/es/attachments/FileList/FileListCard.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as z, toRef as M, createVNode as e, computed as n, watch as V, Fragment as E, mergeProps as U } from "vue";
import { F as $, d as W, e as G, f as K, g as Z, h as Y, i as q, j as H, b as J, C as Q } from "../../chunks/module-chunk.mjs";
import { useTemplateRef as _ } from "../../_util/useTemplateRef.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 = " ", s = "#8c8c8c", be = /* @__PURE__ */ z({
  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
  }) {
    M(l, "prefixCls");
    const x = [{
      key: "default",
      icon: e($, null, null),
      color: s,
      ext: /* @__PURE__ */ new Set([])
    }, {
      key: "excel",
      icon: e(W, null, null),
      color: "#22b35e",
      ext: re
    }, {
      key: "image",
      icon: e(G, null, null),
      color: s,
      ext: h
    }, {
      key: "markdown",
      icon: e(K, null, null),
      color: s,
      ext: ue
    }, {
      key: "pdf",
      icon: e(Z, null, null),
      color: "#ff4d4f",
      ext: se
    }, {
      key: "ppt",
      icon: e(Y, null, null),
      color: "#ff6e31",
      ext: me
    }, {
      key: "word",
      icon: e(q, null, null),
      color: "#1677ff",
      ext: fe
    }, {
      key: "zip",
      icon: e(H, 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(o) {
      let t = o;
      const a = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
      let r = 0;
      for (; t >= 1024 && r < a.length - 1; )
        t /= 1024, r++;
      return `${t.toFixed(0)} ${a[r]}`;
    }
    const w = ie(), T = n(() => w.value.disabled), b = n(() => l.item.name), F = n(() => l.item.size), m = n(() => l.item.percent), c = n(() => l.item.status || "done"), g = n(() => l.item.description), {
      getPrefixCls: O
    } = Fe(), y = n(() => O("attachment", l.prefixCls)), i = `${y.value}-list-card`, [X, R, A] = te(y), B = _("file-list-card-container"), u = n(() => {
      const o = b.value || "", t = o.match(/^(.*)\.[^.]+$/);
      return {
        namePrefix: t ? t[1] : o,
        nameSuffix: t ? o.slice(t[1].length) : ""
      };
    }), j = n(() => P(u.value.nameSuffix, h)), S = n(() => g.value ? g.value : c.value === "uploading" ? `${m.value || 0}%` : c.value === "error" ? l.item.response || v : F.value ? p(F.value) : v), C = n(() => {
      if (l.icon)
        if (typeof l.icon == "string") {
          const o = x.find((t) => t.key === l.icon);
          if (o)
            return {
              icon: o.icon,
              color: o.color
            };
        } else
          return {
            icon: l.icon,
            color: void 0
          };
      for (const {
        ext: o,
        icon: t,
        color: a
      } of x)
        if (P(u.value.nameSuffix, o))
          return {
            icon: t,
            iconColor: a
          };
      return {
        icon: e($, {
          key: "defaultIcon"
        }, null),
        iconColor: s
      };
    }), [D, I] = oe();
    V(() => l.item.originFileObj, (o, t, a) => {
      if (l.item.originFileObj) {
        let r = !0;
        ne(l.item.originFileObj).then((N) => {
          r && I(N);
        }), a(() => {
          r = !1;
        });
      }
      I(void 0);
    }, {
      immediate: !0
    });
    const f = n(() => l.item.thumbUrl || l.item.url || D.value), d = n(() => l.type === "image" || l.type !== "file" && j.value && (l.item.originFileObj || f.value)), L = n(() => d.value ? e(E, null, [f.value && e(ce, U(l.imageProps, {
      alt: "preview",
      src: f.value
    }), null), c.value !== "done" && e("div", {
      class: `${i}-img-mask`
    }, [c.value === "uploading" && m.value !== void 0 && e(ae, {
      percent: m.value,
      prefixCls: i
    }, null), c.value === "error" && e("div", {
      class: `${i}-desc`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [S.value])])])]) : e(E, null, [e("div", {
      class: `${i}-icon`,
      style: {
        color: C.value.iconColor
      }
    }, [C.value.icon]), e("div", {
      class: `${i}-content`
    }, [e("div", {
      class: `${i}-name`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [u.value.namePrefix ?? v]), e("div", {
      class: `${i}-ellipsis-suffix`
    }, [u.value.nameSuffix])]), e("div", {
      class: `${i}-desc`
    }, [e("div", {
      class: `${i}-ellipsis-prefix`
    }, [S.value])])])]));
    return k({
      nativeElement: B
    }), () => X(e("div", {
      class: J(i, {
        [`${i}-status-${c.value}`]: c.value,
        [`${i}-type-preview`]: d.value,
        [`${i}-type-overview`]: !d.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(Q, null, null)])]));
  }
});
export {
  be as default
};