ant-design-x-vue-next/es/folder/DirectoryTree.mjs

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

import { defineComponent as P, computed as g, ref as a, watch as L, createVNode as i, Fragment as N } from "vue";
import { Dropdown as O, Tree as R } from "ant-design-vue";
import { b as C, t as A, v as B } from "../chunks/module-chunk.mjs";
import "../x-provider/index.mjs";
import { isFolderNode as M } from "./utils.mjs";
import _ from "../x-provider/hooks/use-x-provider-context.mjs";
const z = /* @__PURE__ */ P({
  name: "AXFolderDirectoryTree",
  __name: "DirectoryTree",
  props: {
    treeData: null,
    directoryIcons: {
      type: Boolean
    },
    selectedKeys: {
      default: () => []
    },
    expandedKeys: null,
    onSelect: {
      type: Function
    },
    onExpand: {
      type: Function
    },
    showLine: {
      type: Boolean,
      default: !1
    },
    defaultExpandAll: {
      type: Boolean,
      default: !0
    },
    className: null,
    classNames: null,
    styles: null,
    style: null,
    directoryTitle: {
      type: Boolean
    },
    prefixCls: null,
    contextMenu: {
      type: Function
    },
    onRightClick: {
      type: Function
    }
  },
  emits: ["select", "expand", "rightClick"],
  setup(T, {
    emit: D
  }) {
    const e = T, u = D, {
      getPrefixCls: I
    } = _(), f = g(() => I("folder", e.prefixCls)), d = a(!1), y = a(void 0), p = a(/* @__PURE__ */ new Map()), s = a(!1), m = (t) => typeof t == "function" ? t() : t || null, k = (t) => {
      var l, r;
      if (e.directoryIcons === !1 || e.directoryIcons == null)
        return null;
      if (M(t)) {
        const c = (l = e.directoryIcons) == null ? void 0 : l.directory;
        return m(c) || i(A, null, null);
      }
      const n = t.path.toLowerCase().split(".").pop();
      if (n) {
        const c = (r = e.directoryIcons) == null ? void 0 : r[n];
        if (c) return m(c);
      }
      return i(B, null, null);
    }, w = (t, o = []) => t.path === "/" && o.length === 0 ? ["/"] : [...o, t.path].filter((n) => n !== ""), h = (t, o, n = []) => t.map((l) => {
      const r = w(l, n), c = r.join("/").replace(/^\/+/, "");
      return o.set(c, l), {
        ...l,
        key: c,
        path: c,
        pathSegments: r,
        title: l.title,
        icon: k(l),
        isLeaf: !M(l),
        children: l.children ? h(l.children, o, r) : void 0
      };
    }), x = a([]);
    L(() => [e.treeData, e.directoryIcons], () => {
      const t = /* @__PURE__ */ new Map();
      x.value = h(e.treeData || [], t), p.value = t;
    }, {
      immediate: !0,
      deep: !0
    });
    const v = g(() => e.directoryTitle === !1 || e.directoryTitle == null ? null : typeof e.directoryTitle == "function" ? e.directoryTitle() : e.directoryTitle), F = (t) => {
      var r;
      const o = String(t.node.key), n = p.value.get(o);
      s.value = !0;
      let l;
      (n == null ? void 0 : n.contextMenu) === !1 ? l = void 0 : n != null && n.contextMenu ? l = typeof n.contextMenu == "function" ? n.contextMenu(o) : n.contextMenu : e.contextMenu && (l = typeof e.contextMenu == "function" ? e.contextMenu(n || {}, o) : e.contextMenu), l && l.length > 0 ? (y.value = l, d.value = !0) : s.value = !1, (r = e.onRightClick) == null || r.call(e, t), u("rightClick", t);
    }, K = (t, o) => {
      var l;
      if (s.value) {
        s.value = !1;
        return;
      }
      const n = t.map(String);
      (l = e.onSelect) == null || l.call(e, n, o), u("select", n, o);
    }, S = (t) => {
      var n;
      const o = t.map(String);
      (n = e.onExpand) == null || n.call(e, o), u("expand", o);
    }, E = (t) => {
      t && !s.value || (d.value = t, t || (s.value = !1));
    };
    return () => {
      var t, o;
      return i(N, null, [v.value ? i("div", {
        style: {
          ...(t = e.styles) == null ? void 0 : t.directoryTitle,
          ...e.style
        },
        class: C(`${f.value}-directory-tree-title`, e.className, (o = e.classNames) == null ? void 0 : o.directoryTitle)
      }, [v.value]) : null, i(O, {
        menu: {
          items: y.value || []
        },
        open: d.value,
        onOpenChange: E,
        trigger: ["contextmenu"]
      }, {
        default: () => [i("div", {
          style: {
            height: "100%"
          }
        }, [i(R.DirectoryTree, {
          treeData: x.value,
          selectedKeys: e.selectedKeys,
          expandedKeys: e.expandedKeys,
          onSelect: K,
          onExpand: S,
          onRightClick: F,
          multiple: !1,
          blockNode: !0,
          showIcon: e.directoryIcons !== !1,
          showLine: e.showLine,
          defaultExpandAll: e.defaultExpandAll,
          class: C(`${f.value}-directory-tree-content`)
        }, null)])]
      })]);
    };
  }
});
export {
  z as default
};