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

Craft AI-driven interfaces effortlessly

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