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

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

import { defineComponent as z, useSlots as G, ref as p, watch as C, computed as F, createVNode as m } from "vue";
import { b as B } from "../chunks/module-chunk.mjs";
import H from "../_util/hooks/use-x-component-config.mjs";
import J from "../locale/useLocale.mjs";
import "../x-provider/index.mjs";
import O from "./DirectoryTree.mjs";
import Q from "./FilePreview.mjs";
import Y from "./style/index.mjs";
import { findNodeAndValidate as N, walkTree as w, getNodeByPath as Z } from "./utils.mjs";
import ee from "../x-provider/hooks/use-x-provider-context.mjs";
const ue = /* @__PURE__ */ z({
  name: "AXFolder",
  __name: "Folder",
  props: {
    prefixCls: null,
    rootClassName: null,
    className: null,
    class: null,
    style: null,
    classNames: {
      default: () => ({})
    },
    styles: {
      default: () => ({})
    },
    directoryIcons: {
      type: Boolean
    },
    treeData: null,
    selectable: {
      type: Boolean,
      default: !0
    },
    selectedFile: {
      default: void 0
    },
    defaultSelectedFile: null,
    onSelectedFileChange: {
      type: Function
    },
    directoryTreeWith: {
      default: 278
    },
    emptyRender: {
      type: Boolean
    },
    previewRender: {
      type: Function
    },
    defaultExpandedPaths: null,
    expandedPaths: {
      default: void 0
    },
    defaultExpandAll: {
      type: Boolean,
      default: !0
    },
    onExpandedPathsChange: {
      type: Function
    },
    fileContentService: null,
    onFileClick: {
      type: Function
    },
    onFolderClick: {
      type: Function
    },
    directoryTitle: {
      type: Boolean
    },
    previewTitle: {
      type: [Boolean, Function]
    },
    contextMenu: {
      type: Function
    },
    onRightClick: {
      type: Function
    }
  },
  emits: ["selectedFileChange", "update:selectedFile", "expandedPathsChange", "update:expandedPaths", "fileClick", "folderClick", "rightClick"],
  setup(A, {
    expose: _,
    emit: b
  }) {
    const e = A, v = G(), o = b, [P] = J("Folder"), T = p(null), y = (t) => !!(t && t.length > 0 && N(e.treeData || [], t, !0).isValid), s = p(y(e.selectedFile || e.defaultSelectedFile)), n = p(y(e.defaultSelectedFile) ? [...e.defaultSelectedFile || []] : []), x = p(e.expandedPaths !== void 0 ? e.expandedPaths : e.defaultExpandedPaths ? [...e.defaultExpandedPaths] : void 0);
    C(() => e.selectedFile, (t) => {
      t !== void 0 && (n.value = [...t], s.value = y(t));
    }, {
      deep: !0
    }), C(() => [e.treeData, e.defaultSelectedFile], () => {
      const t = e.selectedFile ?? e.defaultSelectedFile;
      s.value = y(t);
    }, {
      deep: !0
    }), C(() => e.expandedPaths, (t) => {
      t !== void 0 && (x.value = [...t]);
    }, {
      deep: !0
    });
    const r = p(""), c = p(!1), {
      getPrefixCls: V,
      direction: g
    } = ee(), u = F(() => V("folder", e.prefixCls)), S = H("folder"), [I, M, W] = Y(u), X = F(() => {
      var t;
      return B(u.value, S.value.className, e.className, e.class, e.rootClassName, (t = e.classNames) == null ? void 0 : t.root, M.value, W, {
        [`${u.value}-rtl`]: (g == null ? void 0 : g.value) === "rtl",
        [`${u.value}-selectable`]: e.selectable
      });
    }), j = F(() => {
      var t;
      return {
        ...S.value.style,
        ...(t = e.styles) == null ? void 0 : t.root,
        ...e.style
      };
    }), K = F(() => {
      const t = e.directoryTreeWith ?? 278;
      return typeof t == "number" ? `${t}px` : t;
    });
    C(() => [s.value, n.value, e.treeData, e.fileContentService], async () => {
      if (!s.value || n.value.length === 0) {
        r.value = "", c.value = !1;
        return;
      }
      const t = n.value.join("/"), {
        node: l
      } = N(e.treeData || [], n.value);
      if (e.fileContentService) {
        c.value = !0;
        try {
          r.value = await e.fileContentService.loadFileContent(t);
        } catch (a) {
          r.value = `// ${P.value.loadError}: ${a instanceof Error ? a.message : "Unknown error"}`;
        } finally {
          c.value = !1;
        }
      } else l != null && l.content ? (r.value = l.content, c.value = !1) : (r.value = `// ${P.value.noService}`, c.value = !1);
    }, {
      immediate: !0,
      deep: !0
    });
    const L = (t, l) => {
      var k, E, R, $;
      const a = Array.isArray(l.selectedNodes) ? l.selectedNodes : l.selectedNodes ? [l.selectedNodes] : l.node ? [l.node] : [];
      if (a.some((i) => !i.isLeaf)) {
        if (a.length === 1) {
          const i = a[0];
          (k = e.onFolderClick) == null || k.call(e, i.path), o("folderClick", i.path);
        }
        return;
      }
      const d = ((E = t[0]) == null ? void 0 : E.split("/").filter(Boolean)) || [];
      if (d.length === 0) return;
      const f = a[0], D = {
        path: d,
        title: f == null ? void 0 : f.title,
        content: f == null ? void 0 : f.content
      };
      if ((R = e.onSelectedFileChange) == null || R.call(e, D), o("selectedFileChange", D), o("update:selectedFile", d), e.selectedFile === void 0 && (s.value = !0, n.value = d), a.length === 1) {
        const i = a[0];
        ($ = e.onFileClick) == null || $.call(e, i.path, i.content), o("fileClick", i.path, i.content);
      }
    }, U = (t) => {
      var l;
      e.expandedPaths === void 0 && (x.value = t), (l = e.onExpandedPathsChange) == null || l.call(e, t), o("expandedPathsChange", t), o("update:expandedPaths", t);
    }, q = (t) => {
      var l;
      (l = e.onRightClick) == null || l.call(e, t), o("rightClick", t);
    };
    return _({
      get nativeElement() {
        return T.value;
      },
      getNode: (t) => Z(e.treeData, t),
      updateNode: (t, l) => e.treeData ? w(e.treeData, t, 0, "update", l) : [],
      deleteNode: (t) => e.treeData ? w(e.treeData, t, 0, "delete").filter(Boolean) : [],
      addNode: (t, l) => e.treeData ? w(e.treeData, t, 0, "add", l) : []
    }), () => {
      var t, l, a;
      return I(m("div", {
        ref: T,
        class: X.value,
        style: j.value
      }, [m("div", {
        class: `${u.value}-container`
      }, [m("div", {
        class: B(`${u.value}-directory-tree`, (t = e.classNames) == null ? void 0 : t.directoryTree),
        style: {
          width: K.value,
          ...(l = S.value.styles) == null ? void 0 : l.directoryTree,
          ...(a = e.styles) == null ? void 0 : a.directoryTree
        }
      }, [m(O, {
        directoryIcons: e.directoryIcons,
        prefixCls: e.prefixCls,
        treeData: e.treeData,
        selectedKeys: e.selectable && n.value && s.value ? [n.value.join("/")] : [],
        classNames: e.classNames,
        styles: e.styles,
        expandedKeys: x.value,
        onSelect: L,
        onExpand: U,
        defaultExpandAll: e.defaultExpandAll,
        directoryTitle: v.directoryTitle ? () => v.directoryTitle() : e.directoryTitle,
        contextMenu: e.contextMenu,
        onRightClick: q
      }, null)]), m(Q, {
        emptyRender: e.emptyRender,
        prefixCls: e.prefixCls,
        classNames: e.classNames,
        styles: e.styles,
        selectedFile: s.value ? n.value : [],
        fileContent: r.value,
        loading: c.value,
        previewTitle: e.previewTitle,
        previewRender: e.previewRender,
        getFileNode: (h) => {
          if (!h || h.length === 0) return;
          const {
            node: d
          } = N(e.treeData || [], h);
          return d ? {
            title: d.title,
            path: d.path,
            content: d.content
          } : void 0;
        }
      }, {
        empty: v.empty,
        previewTitle: v.previewTitle,
        preview: v.preview
      })])]));
    };
  }
});
export {
  ue as default
};