antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/tree/DirectoryTree.js

@@ -0,0 +1,408 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import Tree_default from "./Tree.js";
+import { calcRangeKeys, convertDirectoryKeysToNodes } from "./utils/dictUtil.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty, getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+import { FileOutlined, FolderOpenOutlined, FolderOutlined } from "@antdv-next/icons";
+import { omit } from "es-toolkit";
+import { conductExpandParent, convertDataToEntities, convertTreeToData } from "@v-c/tree";
+
+//#region src/tree/DirectoryTree.tsx
+function getIcon(props) {
+	const { isLeaf, expanded } = props;
+	if (isLeaf) return createVNode(FileOutlined, null, null);
+	return expanded ? createVNode(FolderOpenOutlined, null, null) : createVNode(FolderOutlined, null, null);
+}
+function getTreeData({ treeData, children }) {
+	return treeData || convertTreeToData(children);
+}
+const DirectoryTree = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, attrs }) => {
+	const lastSelectedKey = shallowRef();
+	const cachedSelectedKeys = shallowRef();
+	const children = computed(() => filterEmpty(slots?.default?.()));
+	const getInitExpandedKeys = () => {
+		const { defaultExpandAll, defaultExpandParent } = props;
+		let _children = children.value;
+		if (_children.length < 1) _children = void 0;
+		const { keyEntities } = convertDataToEntities(getTreeData({
+			...props,
+			children: _children
+		}), { fieldNames: props.fieldNames });
+		let initExpandedKeys;
+		if (defaultExpandAll) initExpandedKeys = Object.keys(keyEntities);
+		else if (defaultExpandParent) initExpandedKeys = conductExpandParent(props.expandedKeys || props?.defaultExpandedKeys || [], keyEntities);
+		else initExpandedKeys = props?.expandedKeys || props?.defaultExpandedKeys || [];
+		return initExpandedKeys;
+	};
+	const selectedKeys = shallowRef(props?.selectedKeys || props?.defaultSelectedKeys || []);
+	const expandedKeys = shallowRef(getInitExpandedKeys());
+	watch(() => props.selectedKeys, () => {
+		if (props.selectedKeys !== selectedKeys.value) selectedKeys.value = props?.selectedKeys || [];
+	});
+	watch(() => props.expandedKeys, () => {
+		if (props.expandedKeys !== expandedKeys.value) expandedKeys.value = props?.expandedKeys || [];
+	});
+	const onExpand = (keys, info) => {
+		emit("update:expandedKeys", keys);
+		emit("expand", keys, info);
+	};
+	const onSelect = (keys, event) => {
+		const { multiple, fieldNames } = props;
+		const { node, nativeEvent } = event;
+		const { key = "" } = node;
+		let _children = children.value;
+		if (_children.length < 1) _children = void 0;
+		const treeData = getTreeData({
+			...props,
+			children: _children
+		});
+		const newEvent = {
+			...event,
+			selected: true
+		};
+		const ctrlPick = nativeEvent?.ctrlKey || nativeEvent?.metaKey;
+		const shiftPick = nativeEvent?.shiftKey;
+		let newSelectedKeys;
+		if (multiple && ctrlPick) {
+			newSelectedKeys = keys;
+			lastSelectedKey.value = key;
+			cachedSelectedKeys.value = newSelectedKeys;
+			newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys, fieldNames);
+		} else if (multiple && shiftPick) {
+			newSelectedKeys = Array.from(new Set([...cachedSelectedKeys.value || [], ...calcRangeKeys({
+				treeData,
+				expandedKeys: expandedKeys.value,
+				startKey: key,
+				endKey: lastSelectedKey.value,
+				fieldNames
+			})]));
+			newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys, fieldNames);
+		} else {
+			newSelectedKeys = [key];
+			lastSelectedKey.value = key;
+			cachedSelectedKeys.value = newSelectedKeys;
+			newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys, fieldNames);
+		}
+		emit("update:expandedKeys", newSelectedKeys);
+		emit("select", newSelectedKeys, newEvent);
+	};
+	const { prefixCls, direction } = useComponentBaseConfig("tree", props);
+	const treeRef = shallowRef();
+	expose({ scrollTo(...args) {
+		return treeRef.value?.scrollTo?.(...args);
+	} });
+	return () => {
+		const { showIcon = true, expandAction = "click",...otherProps } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const connectClassName = clsx(`${prefixCls}-directory`, { [`${prefixCls.value}-directory-rtl`]: direction.value === "rtl" }, className);
+		const onAttrs = {
+			onCheck(checked, info) {
+				emit("check", checked, info);
+				emit("update:checkedKeys", checked);
+			},
+			onClick(...args) {
+				emit("click", ...args);
+			},
+			onBlur(e) {
+				emit("blur", e);
+			},
+			onLoad(loadKeys, info) {
+				emit("load", loadKeys, info);
+			},
+			onFocus(e) {
+				emit("focus", e);
+			},
+			onActiveChange(key) {
+				emit("activeChange", key);
+				emit("update:activeKey", key);
+			},
+			onDrop(info) {
+				emit("drop", info);
+			},
+			onDragend(info) {
+				emit("dragend", info);
+			},
+			onDragenter(info) {
+				emit("dragenter", info);
+			},
+			onDragleave(info) {
+				emit("dragleave", info);
+			},
+			onDragover(info) {
+				emit("dragover", info);
+			},
+			onDoubleClick(e) {
+				emit("doubleClick", e);
+				emit("dblclick", e);
+			},
+			onContextmenu(e) {
+				emit("contextmenu", e);
+			},
+			onKeydown(e) {
+				emit("keydown", e);
+			},
+			onScroll(e) {
+				emit("scroll", e);
+			},
+			onRightClick(info) {
+				emit("rightClick", info);
+			},
+			onDragstart(info) {
+				emit("dragstart", info);
+			},
+			onMouseenter(e) {
+				emit("mouseenter", e);
+			},
+			onMouseleave(e) {
+				emit("mouseleave", e);
+			}
+		};
+		return createVNode(Tree_default, mergeProps({ "ref": treeRef }, restAttrs, omit(otherProps, ["prefixCls"]), onAttrs, {
+			"icon": props?.icon ?? getIcon,
+			"blockNode": props?.blockNode ?? true,
+			"showIcon": showIcon,
+			"expandAction": expandAction,
+			"prefixCls": prefixCls.value,
+			"class": connectClassName,
+			"style": style,
+			"expandedKeys": expandedKeys.value,
+			"selectedKeys": selectedKeys.value,
+			"onSelect": onSelect,
+			"onExpand": onExpand
+		}), slots);
+	};
+}, {
+	emits: [
+		"click",
+		"check",
+		"expand",
+		"select",
+		"blur",
+		"focus",
+		"rightClick",
+		"dblclick",
+		"doubleClick",
+		"contextmenu",
+		"dragstart",
+		"dragenter",
+		"dragover",
+		"dragleave",
+		"drop",
+		"dragend",
+		"load",
+		"mouseleave",
+		"mouseenter",
+		"scroll",
+		"activeChange",
+		"update:expandedKeys",
+		"update:checkedKeys",
+		"update:selectedKeys",
+		"update:activeKey"
+	],
+	props: {
+		expandAction: {
+			type: [Boolean, String],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		showLine: {
+			type: [Boolean, Object],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		autoExpandParent: {
+			type: Boolean,
+			required: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			required: false
+		},
+		checkable: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandAll: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandParent: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandedKeys: {
+			type: Array,
+			required: false
+		},
+		expandedKeys: {
+			type: Array,
+			required: false
+		},
+		checkedKeys: {
+			type: [Array, Object],
+			required: false
+		},
+		defaultCheckedKeys: {
+			type: Array,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		defaultSelectedKeys: {
+			type: Array,
+			required: false
+		},
+		selectable: {
+			type: Boolean,
+			required: false
+		},
+		filterAntTreeNode: {
+			type: Function,
+			required: false
+		},
+		loadedKeys: {
+			type: Array,
+			required: false
+		},
+		draggable: {
+			type: [
+				Function,
+				Boolean,
+				Object
+			],
+			required: false
+		},
+		showIcon: {
+			type: Boolean,
+			required: false
+		},
+		icon: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		switcherIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		switcherLoadingIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		blockNode: {
+			type: Boolean,
+			required: false
+		},
+		tabindex: {
+			type: Number,
+			required: false
+		},
+		focusable: {
+			type: Boolean,
+			required: false
+		},
+		activeKey: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		treeData: {
+			type: Array,
+			required: false
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		allowDrop: {
+			type: Function,
+			required: false
+		},
+		titleRender: {
+			type: Function,
+			required: false
+		},
+		dropIndicatorRender: {
+			type: Function,
+			required: false
+		},
+		loadData: {
+			type: Function,
+			required: false
+		},
+		filterTreeNode: {
+			type: Function,
+			required: false
+		},
+		motion: {
+			type: Object,
+			required: false
+		},
+		height: {
+			type: Number,
+			required: false
+		},
+		itemHeight: {
+			type: Number,
+			required: false
+		},
+		scrollWidth: {
+			type: Number,
+			required: false
+		},
+		itemScrollOffset: {
+			type: Number,
+			required: false
+		},
+		virtual: {
+			type: Boolean,
+			required: false
+		},
+		rootStyle: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "ADirectoryTree",
+	inheritAttrs: false
+});
+var DirectoryTree_default = DirectoryTree;
+
+//#endregion
+export { DirectoryTree_default as default };

package/dist/tree/Tree.d.ts

@@ -0,0 +1,173 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import * as vue285 from "vue";
+import { SlotsType } from "vue";
+import { BasicDataNode, DataNode, TreeProps } from "@v-c/tree";
+import { Key } from "@v-c/util/dist/type";
+
+//#region src/tree/Tree.d.ts
+type SwitcherIcon = any | ((props: AntTreeNodeProps) => any);
+type TreeLeafIcon = any | ((props: AntTreeNodeProps) => any);
+type TreeIcon = any | ((props: AntdTreeNodeAttribute) => any);
+interface AntdTreeNodeAttribute {
+  eventKey: string;
+  prefixCls: string;
+  className: string;
+  expanded: boolean;
+  selected: boolean;
+  checked: boolean;
+  halfChecked: boolean;
+  title: VueNode;
+  children: VueNode;
+  pos: string;
+  dragOver: boolean;
+  dragOverGapTop: boolean;
+  dragOverGapBottom: boolean;
+  isLeaf: boolean;
+  selectable: boolean;
+  disabled: boolean;
+  disableCheckbox: boolean;
+}
+interface AntTreeNodeProps {
+  className?: string;
+  checkable?: boolean;
+  disabled?: boolean;
+  disableCheckbox?: boolean;
+  title?: any | ((data: DataNode) => any);
+  key?: Key;
+  eventKey?: Key;
+  isLeaf?: boolean;
+  checked?: boolean;
+  expanded?: boolean;
+  loading?: boolean;
+  selected?: boolean;
+  selectable?: boolean;
+  icon?: TreeIcon;
+  children?: VueNode;
+  [customProp: string]: any;
+}
+type AntTreeNode = AntTreeNodeProps;
+interface AntTreeNodeBaseEvent {
+  node: any;
+  nativeEvent: MouseEvent;
+}
+interface AntTreeNodeCheckedEvent extends AntTreeNodeBaseEvent {
+  event: 'check';
+  checked?: boolean;
+  checkedNodes?: AntTreeNode[];
+}
+interface AntTreeNodeSelectedEvent extends AntTreeNodeBaseEvent {
+  event: 'select';
+  selected?: boolean;
+  selectedNodes?: DataNode[];
+}
+interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
+  expanded?: boolean;
+}
+interface AntTreeNodeMouseEvent {
+  node: AntTreeNode;
+  event: (e: DragEvent) => void;
+}
+type DraggableFn = (node: DataNode) => boolean;
+interface DraggableConfig {
+  icon?: VueNode;
+  nodeDraggable?: DraggableFn;
+}
+type TreeSemanticName = 'root' | 'item' | 'itemIcon' | 'itemTitle';
+type TreeClassNamesType = SemanticClassNamesType<TreeProps$1, TreeSemanticName>;
+type TreeStylesType = SemanticStylesType<TreeProps$1, TreeSemanticName>;
+interface TreeProps$1<T extends BasicDataNode = DataNode> extends Omit<TreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'className' | 'icon' | 'switcherIcon' | 'classNames' | 'rootClassName' | 'styles' | 'onCheck' | 'onClick' | 'onBlur' | 'onDrop' | 'onLoad' | 'onActiveChange' | 'onContextMenu' | 'onDoubleClick' | 'onExpand' | 'onKeyDown' | 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDragLeave' | 'onDragEnter' | 'tabIndex' | 'onSelect' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'onRightClick' | 'onScroll' | 'style'> {
+  rootClass?: string;
+  showLine?: boolean | {
+    showLeafIcon: boolean | TreeLeafIcon;
+  };
+  classes?: TreeClassNamesType;
+  styles?: TreeStylesType;
+  /** Whether to support multiple selection */
+  multiple?: boolean;
+  /** Whether to automatically expand the parent node */
+  autoExpandParent?: boolean;
+  /** Node selection in Checkable state is fully controlled (the selected state of parent and child nodes is no longer associated) */
+  checkStrictly?: boolean;
+  /** Whether to support selection */
+  checkable?: boolean;
+  /** whether to disable the tree */
+  disabled?: boolean;
+  /** Expand all tree nodes by default */
+  defaultExpandAll?: boolean;
+  /** Expand the corresponding tree node by default */
+  defaultExpandParent?: boolean;
+  /** Expand the specified tree node by default */
+  defaultExpandedKeys?: Key[];
+  /** (Controlled) Expand the specified tree node */
+  expandedKeys?: Key[];
+  /** (Controlled) Tree node with checked checkbox */
+  checkedKeys?: Key[] | {
+    checked: Key[];
+    halfChecked: Key[];
+  };
+  /** Tree node with checkbox checked by default */
+  defaultCheckedKeys?: Key[];
+  /** (Controlled) Set the selected tree node */
+  selectedKeys?: Key[];
+  /** Tree node selected by default */
+  defaultSelectedKeys?: Key[];
+  selectable?: boolean;
+  /** Click on the tree node to trigger */
+  filterAntTreeNode?: (node: AntTreeNode) => boolean;
+  loadedKeys?: Key[];
+  /** Set the node to be draggable (IE>8) */
+  draggable?: DraggableFn | boolean | DraggableConfig;
+  showIcon?: boolean;
+  icon?: TreeIcon;
+  switcherIcon?: SwitcherIcon;
+  switcherLoadingIcon?: VueNode;
+  prefixCls?: string;
+  blockNode?: boolean;
+  tabindex?: number;
+}
+interface TreeEmits {
+  'click': NonNullable<TreeProps['onClick']>;
+  'check': NonNullable<TreeProps['onCheck']>;
+  'expand': NonNullable<TreeProps['onExpand']>;
+  'select': NonNullable<TreeProps['onSelect']>;
+  'blur': NonNullable<TreeProps['onBlur']>;
+  'focus': NonNullable<TreeProps['onFocus']>;
+  'rightClick': NonNullable<TreeProps['onRightClick']>;
+  'dblclick': NonNullable<TreeProps['onDoubleClick']>;
+  'doubleClick': NonNullable<TreeProps['onDoubleClick']>;
+  'contextmenu': NonNullable<TreeProps['onContextMenu']>;
+  'dragstart': NonNullable<TreeProps['onDragStart']>;
+  'dragenter': NonNullable<TreeProps['onDragEnter']>;
+  'dragover': NonNullable<TreeProps['onDragOver']>;
+  'dragleave': NonNullable<TreeProps['onDragLeave']>;
+  'drop': NonNullable<TreeProps['onDrop']>;
+  'dragend': NonNullable<TreeProps['onDragEnd']>;
+  'load': NonNullable<TreeProps['onLoad']>;
+  'mouseleave': NonNullable<TreeProps['onMouseLeave']>;
+  'mouseenter': NonNullable<TreeProps['onMouseEnter']>;
+  'scroll': NonNullable<TreeProps['onScroll']>;
+  'activeChange': NonNullable<TreeProps['onActiveChange']>;
+  'update:expandedKeys': (keys: Key[]) => void;
+  'update:checkedKeys': (keys: Key[] | {
+    checked: Key[];
+    halfChecked: Key[];
+  }) => void;
+  'update:selectedKeys': (keys: Key[]) => void;
+  'update:activeKey': (key: Key) => void;
+  [key: string]: (...args: any) => void;
+}
+interface TreeSlots {
+  switcherLoadingIcon: () => any;
+  switcherIcon: (props: AntTreeNodeProps) => any;
+  default: () => any;
+  draggableIcon: () => any;
+  icon: (props: AntdTreeNodeAttribute) => any;
+  titleRender: TreeProps['titleRender'];
+}
+declare const Tree: vue285.DefineSetupFnComponent<TreeProps$1<DataNode>, TreeEmits, SlotsType<TreeSlots>, TreeProps$1<DataNode> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue285.PublicProps>;
+//#endregion
+export { AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, SwitcherIcon, Tree, TreeEmits, TreeProps$1 as TreeProps, TreeSlots };