@artmate/chat/dist/es/attachment/index.vue.js

借鉴字节开源react库AntX，通过vue实现的版本

import { defineComponent as P, useSlots as z, ref as c, watch as F, computed as $, createElementBlock as k, unref as y, openBlock as w, Fragment as I, createVNode as i, withCtx as t, renderSlot as n, normalizeStyle as R, normalizeClass as T } from "vue";
import q from "../fileList/index.vue.js";
/* empty css                     */
import { useNamespace as A } from "../hooks/useNamespace.js";
import S from "./DropArea.vue.js";
/* empty css              */
import b from "./PlaceholderUploader.vue.js";
/* empty css                         */
import U from "./silentUploader.vue.js";
const V = ["dir"], X = /* @__PURE__ */ P({
  name: "Attachment",
  __name: "index",
  props: {
    direction: {},
    uploadProps: {},
    items: { default: () => [] },
    rootClassName: {},
    getDropContainer: {},
    className: {},
    classNames: {},
    styles: {},
    rootStyle: {},
    onChange: {},
    disabled: { type: Boolean },
    overflow: {}
  },
  setup(L, { expose: D }) {
    const e = L, v = A("attachment"), E = z(), p = c(), u = c(), f = c(), r = c(e.items);
    F(() => e.items, (s) => {
      r.value = s;
    });
    const _ = (s, a) => {
      var o;
      const l = {
        file: s,
        fileList: a
      };
      r.value = a, (o = e.onChange) == null || o.call(e, l);
    }, d = $(() => ({
      ...e.uploadProps,
      fileList: r.value,
      onChange: _
    })), B = (s) => {
      const a = r.value.filter(
        (l) => l.uid !== s.uid
      );
      _(s, a);
    }, g = $(() => r.value.length > 0);
    return D({
      ref: p.value,
      nativeElement: f.value,
      upload: (s) => {
        var l;
        const a = ((l = u.value) == null ? void 0 : l.$el).querySelector('input[type="file"]');
        if (a) {
          const o = new DataTransfer();
          o.items.add(s), a.files = o.files, a.dispatchEvent(new Event("change", { bubbles: !0 }));
        }
      }
    }), (s, a) => {
      var l, o, h, C, N;
      return y(E).default ? (w(), k(I, { key: 0 }, [
        i(U, {
          ref_key: "uploadRef",
          ref: u,
          disabled: e.disabled,
          "root-class-name": e.rootClassName,
          upload: d.value
        }, {
          default: t(() => [
            n(s.$slots, "default")
          ]),
          _: 3
        }, 8, ["disabled", "root-class-name", "upload"]),
        i(S, {
          "class-name": e.rootClassName,
          disabled: e.disabled,
          "get-drop-container": e.getDropContainer
        }, {
          default: t(() => {
            var m;
            return [
              i(b, {
                ref_key: "CurrentRef",
                ref: p,
                "class-name": (m = e.classNames) == null ? void 0 : m.placeholder,
                disabled: e.disabled,
                upload: d.value,
                type: "drop"
              }, null, 8, ["class-name", "disabled", "upload"])
            ];
          }),
          _: 1
        }, 8, ["class-name", "disabled", "get-drop-container"])
      ], 64)) : (w(), k("div", {
        key: 1,
        ref_key: "containerRef",
        ref: f,
        class: T([
          y(v).b(),
          e.direction === "rtl" && [y(v).b("rtl")],
          e.className,
          e.rootClassName
        ]),
        dir: e.direction || "ltr",
        style: R(e.rootStyle)
      }, [
        i(q, {
          disabled: e.disabled,
          "item-class-name": (l = e.classNames) == null ? void 0 : l.item,
          "item-style": (o = e.styles) == null ? void 0 : o.item,
          items: r.value,
          "list-class-name": (h = e.classNames) == null ? void 0 : h.list,
          "list-style": {
            ...(C = e.styles) == null ? void 0 : C.list,
            display: g.value ? "" : "none"
          },
          "on-remove": B,
          overflow: e.overflow,
          upload: d.value
        }, null, 8, ["disabled", "item-class-name", "item-style", "items", "list-class-name", "list-style", "overflow", "upload"]),
        i(b, {
          ref_key: "uploadRef",
          ref: u,
          "class-name": (N = e.classNames) == null ? void 0 : N.placeholder,
          disabled: e.disabled,
          style: R(g.value ? { display: "none" } : {}),
          upload: d.value,
          type: "inline"
        }, {
          icon: t(() => [
            n(s.$slots, "icon")
          ]),
          title: t(() => [
            n(s.$slots, "title")
          ]),
          description: t(() => [
            n(s.$slots, "description")
          ]),
          _: 3
        }, 8, ["class-name", "disabled", "style", "upload"]),
        i(S, {
          disabled: e.disabled,
          "get-drop-container": e.getDropContainer || (() => f.value)
        }, {
          default: t(() => {
            var m;
            return [
              i(b, {
                ref_key: "CurrentRef",
                ref: p,
                "class-name": (m = e.classNames) == null ? void 0 : m.placeholder,
                disabled: e.disabled,
                upload: d.value,
                type: "drop"
              }, {
                icon: t(() => [
                  n(s.$slots, "default")
                ]),
                title: t(() => [
                  n(s.$slots, "title")
                ]),
                description: t(() => [
                  n(s.$slots, "description")
                ]),
                _: 3
              }, 8, ["class-name", "disabled", "upload"])
            ];
          }),
          _: 3
        }, 8, ["disabled", "get-drop-container"])
      ], 14, V));
    };
  }
});
export {
  X as default
};