ant-design-x-vue-next/es/file-card/List.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as X, ref as c, watch as h, computed as d, onMounted as M, nextTick as $, createVNode as o, mergeProps as V, Fragment as W } from "vue";
import { b as p, p as B, g as H, R as A } from "../chunks/module-chunk.mjs";
import { Button as N } from "ant-design-vue";
import "../x-provider/index.mjs";
import E from "./FileCard.mjs";
import I from "./style/index.mjs";
import Y from "../x-provider/hooks/use-x-provider-context.mjs";
const U = /* @__PURE__ */ X({
  name: "AXFileCardList",
  __name: "List",
  props: {
    prefixCls: null,
    className: null,
    class: null,
    rootClassName: null,
    classNames: {
      default: () => ({})
    },
    style: null,
    styles: {
      default: () => ({})
    },
    items: null,
    size: null,
    removable: {
      type: [Boolean, Function]
    },
    onRemove: {
      type: Function
    },
    extension: null,
    overflow: null
  },
  emits: ["remove"],
  setup(g, {
    emit: w
  }) {
    const l = g, k = w, i = c(null), n = c([]);
    h(() => l.items, (e) => {
      n.value = e.map((s, r) => ({
        ...s,
        key: s.key ?? `${s.name}-${r}`
      }));
    }, {
      immediate: !0,
      deep: !0
    });
    const {
      direction: y,
      getPrefixCls: b
    } = Y(), u = d(() => b("file-card", l.prefixCls)), [x, R, _] = I(u), a = d(() => `${u.value}-list`), v = c(!1), m = c(!1), f = () => {
      const e = i.value;
      e && (l.overflow === "scrollX" ? (v.value = Math.abs(e.scrollLeft) >= 1, m.value = e.scrollWidth - e.clientWidth - Math.abs(e.scrollLeft) >= 1) : l.overflow === "scrollY" && (v.value = e.scrollTop !== 0, m.value = e.scrollHeight - e.clientHeight !== e.scrollTop));
    };
    M(() => {
      $(f);
    }), h(() => [n.value, l.overflow], () => $(f));
    const C = (e) => {
      const s = i.value;
      s && s.scrollTo({
        left: s.scrollLeft + e * s.clientWidth,
        behavior: "smooth"
      });
    }, z = (e) => {
      var s;
      n.value = n.value.filter((r) => r.key !== e.key), (s = l.onRemove) == null || s.call(l, e), k("remove", e);
    }, L = d(() => p(a.value, l.rootClassName, l.className, l.class, l.classNames.root, R.value, _, {
      [`${u.value}-rtl`]: y.value === "rtl"
    }));
    return () => {
      const {
        root: e,
        card: s,
        ...r
      } = l.classNames || {}, {
        root: S,
        card: F,
        ...O
      } = l.styles || {};
      return x(o("div", {
        class: L.value
      }, [o("div", {
        ref: i,
        class: p(`${a.value}-content`, {
          [`${a.value}-overflow-${l.overflow}`]: l.overflow,
          [`${a.value}-overflow-ping-start`]: v.value,
          [`${a.value}-overflow-ping-end`]: m.value,
          [`${a.value}-small`]: l.size === "small"
        }),
        dir: y.value,
        style: {
          ...l.style,
          ...S
        },
        onScroll: f
      }, [n.value.map((t) => {
        const {
          key: P,
          ...T
        } = t;
        return o("div", {
          class: `${a.value}-item`,
          key: P
        }, [o(E, V(T, {
          size: l.size,
          className: p(t.className, s),
          classNames: {
            ...r,
            ...t.classNames
          },
          style: {
            ...t.style,
            ...F
          },
          styles: O
        }), null), (typeof l.removable == "function" ? l.removable(t) : l.removable) && o("div", {
          class: `${a.value}-remove`,
          onClick: () => z(t)
        }, [o(B, null, null)])]);
      }), l.overflow === "scrollX" && o(W, null, [o(N, {
        size: "small",
        shape: "circle",
        class: `${a.value}-prev-btn`,
        icon: o(H, null, null),
        onClick: () => C(-1)
      }, null), o(N, {
        size: "small",
        shape: "circle",
        class: `${a.value}-next-btn`,
        icon: o(A, null, null),
        onClick: () => C(1)
      }, null)]), l.extension])]));
    };
  }
});
export {
  U as default
};