@antdv-next/x 1.0.2 → 1.1.1

package/dist/attachments/index.js

@@ -118,7 +118,7 @@ var XAttachments = /* @__PURE__ */ defineComponent({
 			default: true
 		}
 	},
-	emits: ["change"],
+	emits: ["update:items", "change"],
 	setup(props, { attrs, emit, slots, expose }) {
 		const configCtx = useConfig();
 		const contextConfig = useXComponentConfig("attachments");
@@ -142,6 +142,7 @@ var XAttachments = /* @__PURE__ */ defineComponent({
 		});
 		const triggerChange = (info) => {
 			fileList.value = info.fileList;
+			emit("update:items", info.fileList);
 			emit("change", info);
 		};
 		const onUploadChange = (info) => {

package/dist/folder/DirectoryTree.d.ts

@@ -0,0 +1,124 @@
+import { PropType, VNodeChild } from 'vue';
+import { DirectoryIconsMap, DirectoryTitleRender, FolderProps, FolderTreeData } from './interface';
+export interface DirectoryTreeNode {
+    key: string;
+    path: string;
+    pathSegments: string[];
+    title: VNodeChild;
+    icon?: VNodeChild;
+    isLeaf?: boolean;
+    content?: string;
+    children?: DirectoryTreeNode[];
+}
+export interface DirectoryTreeProps {
+    prefixCls: string;
+    treeData: FolderTreeData[];
+    directoryIcons?: DirectoryIconsMap;
+    selectedKeys?: string[];
+    expandedKeys?: string[];
+    defaultExpandAll?: boolean;
+    showLine?: boolean;
+    classes?: FolderProps["classes"];
+    styles?: FolderProps["styles"];
+    directoryTitle?: DirectoryTitleRender;
+}
+declare const FolderDirectoryTree: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    treeData: {
+        type: PropType<FolderTreeData[]>;
+        default: () => never[];
+    };
+    directoryIcons: {
+        type: PropType<DirectoryIconsMap>;
+        default: undefined;
+    };
+    selectedKeys: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    expandedKeys: {
+        type: PropType<string[] | undefined>;
+        default: undefined;
+    };
+    defaultExpandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    classes: {
+        type: PropType<FolderProps["classes"]>;
+        default: () => {};
+    };
+    styles: {
+        type: PropType<FolderProps["styles"]>;
+        default: () => {};
+    };
+    directoryTitle: {
+        type: PropType<DirectoryTitleRender>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (_keys: string[], _info: any) => true;
+    expand: (_keys: string[], _info: any) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    treeData: {
+        type: PropType<FolderTreeData[]>;
+        default: () => never[];
+    };
+    directoryIcons: {
+        type: PropType<DirectoryIconsMap>;
+        default: undefined;
+    };
+    selectedKeys: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    expandedKeys: {
+        type: PropType<string[] | undefined>;
+        default: undefined;
+    };
+    defaultExpandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    classes: {
+        type: PropType<FolderProps["classes"]>;
+        default: () => {};
+    };
+    styles: {
+        type: PropType<FolderProps["styles"]>;
+        default: () => {};
+    };
+    directoryTitle: {
+        type: PropType<DirectoryTitleRender>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSelect?: ((_keys: string[], _info: any) => any) | undefined;
+    onExpand?: ((_keys: string[], _info: any) => any) | undefined;
+}>, {
+    classes: Partial<Record<import('./interface').SemanticType, string>> | undefined;
+    styles: Partial<Record<import('./interface').SemanticType, import('vue').CSSProperties>> | undefined;
+    selectedKeys: string[];
+    directoryTitle: DirectoryTitleRender;
+    expandedKeys: string[] | undefined;
+    treeData: FolderTreeData[];
+    directoryIcons: DirectoryIconsMap;
+    defaultExpandAll: boolean;
+    showLine: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default FolderDirectoryTree;

package/dist/folder/DirectoryTree.js

@@ -0,0 +1,128 @@
+import { Fragment, computed, createVNode, defineComponent } from "vue";
+import { DirectoryTree } from "antdv-next";
+import { FileOutlined, FolderOutlined } from "@antdv-next/icons";
+//#region components/folder/DirectoryTree.tsx
+function isFolder(node) {
+	return !!node.children && node.children.length > 0;
+}
+function buildPathSegments(node, parentSegments) {
+	if (node.path === "/" && parentSegments.length === 0) return ["/"];
+	return [...parentSegments, node.path].filter((seg) => seg !== "");
+}
+function getIcon(node, directoryIcons) {
+	if (directoryIcons === false || directoryIcons === null) return null;
+	if (isFolder(node)) {
+		const icon = directoryIcons?.directory;
+		if (typeof icon === "function") return icon();
+		return icon ?? createVNode(FolderOutlined, null, null);
+	}
+	const ext = node.path.toLowerCase().split(".").pop();
+	if (ext) {
+		const icon = directoryIcons?.[ext];
+		if (icon) return typeof icon === "function" ? icon() : icon;
+	}
+	return createVNode(FileOutlined, null, null);
+}
+function convertToTreeData(nodes, directoryIcons, parentSegments = []) {
+	return nodes.map((node) => {
+		const pathSegments = buildPathSegments(node, parentSegments);
+		const fullPath = pathSegments.join("/").replace(/^\/+/, "");
+		return {
+			key: fullPath,
+			path: fullPath,
+			pathSegments,
+			title: node.title,
+			icon: getIcon(node, directoryIcons),
+			isLeaf: !isFolder(node),
+			content: node.content,
+			children: node.children ? convertToTreeData(node.children, directoryIcons, pathSegments) : void 0
+		};
+	});
+}
+var FolderDirectoryTree = /* @__PURE__ */ defineComponent({
+	name: "AxFolderDirectoryTree",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		treeData: {
+			type: Array,
+			default: () => []
+		},
+		directoryIcons: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		selectedKeys: {
+			type: Array,
+			default: () => []
+		},
+		expandedKeys: {
+			type: Array,
+			default: void 0
+		},
+		defaultExpandAll: {
+			type: Boolean,
+			default: true
+		},
+		showLine: {
+			type: Boolean,
+			default: false
+		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
+		styles: {
+			type: Object,
+			default: () => ({})
+		},
+		directoryTitle: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		}
+	},
+	emits: {
+		select: (_keys, _info) => true,
+		expand: (_keys, _info) => true
+	},
+	setup(props, { emit }) {
+		const treeDataConverted = computed(() => convertToTreeData(props.treeData, props.directoryIcons));
+		const titleNode = computed(() => {
+			const t = props.directoryTitle;
+			if (t === false || t === null || t === void 0) return null;
+			if (typeof t === "function") return t();
+			return t;
+		});
+		return () => {
+			const { prefixCls } = props;
+			return createVNode(Fragment, null, [titleNode.value ? createVNode("div", {
+				"class": [`${prefixCls}-directory-tree-title`, props.classes?.directoryTitle],
+				"style": props.styles?.directoryTitle
+			}, [titleNode.value]) : null, createVNode(DirectoryTree, {
+				treeData: treeDataConverted.value,
+				selectedKeys: props.selectedKeys,
+				expandedKeys: props.expandedKeys,
+				multiple: false,
+				blockNode: true,
+				showLine: props.showLine,
+				defaultExpandAll: props.defaultExpandAll,
+				class: [`${prefixCls}-directory-tree-content`, props.classes?.directoryTree],
+				style: props.styles?.directoryTree,
+				classes: { itemTitle: `${prefixCls}-directory-tree-item-title` },
+				onSelect: (keys, info) => emit("select", keys, info),
+				onExpand: (keys, info) => emit("expand", keys, info)
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { FolderDirectoryTree as default };

package/dist/folder/FilePreview.d.ts

@@ -0,0 +1,125 @@
+import { CSSProperties, PropType } from 'vue';
+import { EmptyRender, FolderProps, FolderTreeData, PreviewRender, PreviewTitleRender } from './interface';
+export interface FilePreviewProps {
+    prefixCls: string;
+    classes?: FolderProps["classes"];
+    styles?: FolderProps["styles"];
+    selectedFile?: string[] | null;
+    fileContent?: string;
+    loading?: boolean;
+    previewTitle?: PreviewTitleRender;
+    previewRender?: PreviewRender;
+    emptyRender?: EmptyRender;
+    getFileNode?: (path: string[]) => {
+        title: FolderTreeData["title"];
+        path: string;
+        content?: string;
+    } | undefined;
+}
+declare const FilePreview: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    classes: {
+        type: PropType<FilePreviewProps["classes"]>;
+        default: () => {};
+    };
+    styles: {
+        type: PropType<FilePreviewProps["styles"]>;
+        default: () => {};
+    };
+    style: {
+        type: PropType<CSSProperties>;
+        default: undefined;
+    };
+    selectedFile: {
+        type: PropType<string[] | null>;
+        default: () => never[];
+    };
+    fileContent: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewTitle: {
+        type: PropType<PreviewTitleRender>;
+        default: undefined;
+    };
+    previewRender: {
+        type: PropType<PreviewRender>;
+        default: undefined;
+    };
+    emptyRender: {
+        type: PropType<EmptyRender>;
+        default: undefined;
+    };
+    getFileNode: {
+        type: PropType<FilePreviewProps["getFileNode"]>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    classes: {
+        type: PropType<FilePreviewProps["classes"]>;
+        default: () => {};
+    };
+    styles: {
+        type: PropType<FilePreviewProps["styles"]>;
+        default: () => {};
+    };
+    style: {
+        type: PropType<CSSProperties>;
+        default: undefined;
+    };
+    selectedFile: {
+        type: PropType<string[] | null>;
+        default: () => never[];
+    };
+    fileContent: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    previewTitle: {
+        type: PropType<PreviewTitleRender>;
+        default: undefined;
+    };
+    previewRender: {
+        type: PropType<PreviewRender>;
+        default: undefined;
+    };
+    emptyRender: {
+        type: PropType<EmptyRender>;
+        default: undefined;
+    };
+    getFileNode: {
+        type: PropType<FilePreviewProps["getFileNode"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    style: CSSProperties;
+    loading: boolean;
+    classes: Partial<Record<import('./interface').SemanticType, string>> | undefined;
+    styles: Partial<Record<import('./interface').SemanticType, CSSProperties>> | undefined;
+    previewTitle: PreviewTitleRender;
+    previewRender: PreviewRender;
+    getFileNode: ((path: string[]) => {
+        title: FolderTreeData["title"];
+        path: string;
+        content?: string;
+    } | undefined) | undefined;
+    selectedFile: string[] | null;
+    fileContent: string;
+    emptyRender: EmptyRender;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default FilePreview;

package/dist/folder/FilePreview.js

@@ -0,0 +1,170 @@
+import useXComponentConfig from "../_utils/hooks/use-x-component-config.js";
+import { XActionsCopy } from "../actions/ActionsCopy.js";
+import localeValues from "../locale/en_US.js";
+import useLocale from "../locale/useLocale.js";
+import code_highlighter_default from "../code-highlighter/index.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent } from "vue";
+import { Empty, Spin } from "antdv-next";
+//#region components/folder/FilePreview.tsx
+function getFileExtension(path = "") {
+	const parts = path.split(".");
+	return parts[parts.length - 1] || "";
+}
+function getLanguageFromExtension(ext) {
+	return ext.toLowerCase() || "txt";
+}
+var FilePreview = /* @__PURE__ */ defineComponent({
+	name: "AxFolderFilePreview",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
+		styles: {
+			type: Object,
+			default: () => ({})
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		selectedFile: {
+			type: Array,
+			default: () => []
+		},
+		fileContent: {
+			type: String,
+			default: ""
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		previewTitle: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		previewRender: {
+			type: [
+				String,
+				Number,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		emptyRender: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		getFileNode: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const [locale] = useLocale("Folder", localeValues.Folder);
+		const contextConfig = useXComponentConfig("folder");
+		const [hashId, cssVarCls] = style_default(computed(() => props.prefixCls));
+		const previewCls = computed(() => `${props.prefixCls}-preview`);
+		const renderOriginContent = (fileContent, language) => createVNode(code_highlighter_default, {
+			"content": fileContent.replace(/\n$/, ""),
+			"language": language,
+			"showLanguage": false,
+			"showLineNumbers": false,
+			"showCopyButton": false,
+			"style": {
+				background: "transparent",
+				border: 0,
+				borderRadius: 0,
+				padding: 0
+			}
+		}, null);
+		const renderEmpty = () => {
+			if (props.emptyRender === false || props.emptyRender === null) return null;
+			const node = typeof props.emptyRender === "function" ? props.emptyRender() : props.emptyRender ?? createVNode(Empty, {
+				"image": Empty.PRESENTED_IMAGE_SIMPLE,
+				"description": locale.value.selectFile
+			}, null);
+			return createVNode("div", {
+				"class": [`${previewCls.value}-empty-container`, props.classes?.previewRender],
+				"style": props.styles?.previewRender
+			}, [node]);
+		};
+		const renderContent = () => {
+			if (props.loading) return createVNode("div", {
+				"class": [`${previewCls.value}-loading-container`, props.classes?.previewRender],
+				"style": props.styles?.previewRender
+			}, [createVNode(Spin, null, null)]);
+			if (!props.selectedFile || props.selectedFile.length === 0) return renderEmpty();
+			const selected = props.selectedFile;
+			const fileNode = props.getFileNode?.(selected);
+			const title = fileNode?.title ?? selected[selected.length - 1];
+			const fileName = selected[selected.length - 1];
+			const language = getLanguageFromExtension(getFileExtension(fileName));
+			let headerNode;
+			if (props.previewTitle === false || props.previewTitle === null) headerNode = null;
+			else if (props.previewTitle) headerNode = typeof props.previewTitle === "function" ? props.previewTitle({
+				title,
+				path: selected,
+				content: props.fileContent ?? ""
+			}) : props.previewTitle;
+			else headerNode = createVNode("div", { "class": `${previewCls.value}-title` }, [createVNode("span", { "class": `${previewCls.value}-filename` }, [title]), createVNode(XActionsCopy, {
+				"text": props.fileContent ?? "",
+				"class": `${previewCls.value}-copy`
+			}, null)]);
+			const originNode = renderOriginContent(props.fileContent ?? "", language);
+			let contentNode;
+			if (props.previewRender !== void 0 && props.previewRender !== null) if (typeof props.previewRender === "function") contentNode = props.previewRender({
+				content: props.fileContent,
+				path: selected,
+				title: fileNode?.title,
+				language
+			}, { originNode });
+			else contentNode = props.previewRender;
+			else contentNode = originNode;
+			return createVNode(Fragment, null, [headerNode && createVNode("div", {
+				"class": [`${previewCls.value}-title-wrapper`, props.classes?.previewTitle],
+				"style": props.styles?.previewTitle
+			}, [headerNode]), createVNode("div", {
+				"class": [`${previewCls.value}-content`, props.classes?.previewRender],
+				"style": props.styles?.previewRender
+			}, [contentNode])]);
+		};
+		return () => createVNode("div", {
+			"class": [
+				`${previewCls.value}`,
+				props.classes?.filePreview,
+				hashId.value,
+				cssVarCls.value
+			],
+			"style": [
+				contextConfig.value.styles?.filePreview,
+				props.styles?.filePreview,
+				props.style
+			]
+		}, [renderContent()]);
+	}
+});
+//#endregion
+export { FilePreview as default };