@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/tree/Tree.vue.d.ts

@@ -0,0 +1,62 @@
+import type { Key } from '../_util/type';
+import type { TreeCheckedKeys, TreeCheckInfo, TreeEventDataNode, TreeProps, TreeScrollToConfig, TreeSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = TreeSlots;
+declare function scrollTo(target: number | TreeScrollToConfig): void;
+declare const __VLS_base: import("vue").DefineComponent<TreeProps, {
+    scrollTo: typeof scrollTo;
+    /** the scroll container */
+    readonly nativeElement: HTMLElement | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (selectedKeys: Key[], info: import("./interface").TreeSelectInfo) => any;
+    click: (event: MouseEvent, node: TreeEventDataNode) => any;
+    load: (loadedKeys: Key[], info: import("./interface").TreeLoadInfo) => any;
+    scroll: (event: Event) => any;
+    check: (checkedKeys: TreeCheckedKeys, info: TreeCheckInfo) => any;
+    "update:expandedKeys": (expandedKeys: Key[]) => any;
+    "update:selectedKeys": (selectedKeys: Key[]) => any;
+    "update:checkedKeys": (checkedKeys: Key[]) => any;
+    expand: (expandedKeys: Key[], info: import("./interface").TreeExpandInfo) => any;
+}, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
+    onSelect?: ((selectedKeys: Key[], info: import("./interface").TreeSelectInfo) => any) | undefined;
+    onClick?: ((event: MouseEvent, node: TreeEventDataNode) => any) | undefined;
+    onLoad?: ((loadedKeys: Key[], info: import("./interface").TreeLoadInfo) => any) | undefined;
+    onScroll?: ((event: Event) => any) | undefined;
+    onCheck?: ((checkedKeys: TreeCheckedKeys, info: TreeCheckInfo) => any) | undefined;
+    "onUpdate:expandedKeys"?: ((expandedKeys: Key[]) => any) | undefined;
+    "onUpdate:selectedKeys"?: ((selectedKeys: Key[]) => any) | undefined;
+    "onUpdate:checkedKeys"?: ((checkedKeys: Key[]) => any) | undefined;
+    onExpand?: ((expandedKeys: Key[], info: import("./interface").TreeExpandInfo) => any) | undefined;
+}>, {
+    icon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | ((ctx: import("./interface").TreeNodeAttribute) => import("vue").VNodeChild) | null;
+    multiple: boolean;
+    disabled: boolean;
+    showIcon: boolean;
+    virtual: boolean;
+    selectable: boolean;
+    checkable: boolean;
+    switcherIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | ((ctx: import("./interface").TreeNodeAttribute) => import("vue").VNodeChild) | null;
+    defaultExpandAll: boolean;
+    autoExpandParent: boolean;
+    defaultExpandParent: boolean;
+    checkStrictly: boolean;
+    blockNode: boolean;
+    showLine: boolean | import("./interface").TreeShowLineConfig;
+    switcherLoadingIcon: string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | (() => import("vue").VNodeChild) | null;
+    expandAction: import("./interface").TreeExpandAction;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tree/Tree.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,460 @@
+import { addUnit, noop } from "../_util/index.js";
+import { useControlled } from "../_util/hooks/useControlled.js";
+import { useDisabled } from "../config-provider/context.js";
+import { formItemInputContextKey, useFormItemInputContext } from "../form/context.js";
+import VirtualList_default from "../virtual-list/VirtualList.js";
+import { treeContextKey } from "./context.js";
+import TreeNode_default from "./TreeNode.js";
+import { arrAdd, arrDel, calcSelectedKeys, conductCheck, conductExpandParent, convertDataToEntities, fillFieldNames, flattenTreeData, parseCheckedKeys } from "./util.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createVNode, defineComponent, mergeProps, nextTick, onBeforeUpdate, onMounted, openBlock, provide, reactive, ref, unref, useSlots, watch, withCtx } from "vue";
+// src/tree/Tree.vue?vue&type=script&setup=true&lang.ts
+var DEFAULT_ITEM_HEIGHT = 44;
+var MAX_RETRY_TIMES = 10;
+var Tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmTree",
+	inheritAttrs: false,
+	__name: "Tree",
+	props: {
+		treeData: {},
+		fieldNames: {},
+		expandedKeys: {},
+		defaultExpandedKeys: {},
+		defaultExpandAll: {
+			type: Boolean,
+			default: false
+		},
+		autoExpandParent: {
+			type: Boolean,
+			default: false
+		},
+		defaultExpandParent: {
+			type: Boolean,
+			default: true
+		},
+		selectedKeys: {},
+		defaultSelectedKeys: {},
+		checkedKeys: {},
+		defaultCheckedKeys: {},
+		checkable: {
+			type: Boolean,
+			default: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: false
+		},
+		selectable: {
+			type: Boolean,
+			default: true
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		blockNode: {
+			type: Boolean,
+			default: true
+		},
+		showIcon: {
+			type: Boolean,
+			default: false
+		},
+		showLine: {
+			type: [Boolean, Object],
+			default: false
+		},
+		icon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		switcherIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		switcherLoadingIcon: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		titleRender: {},
+		loadData: {},
+		loadedKeys: {},
+		filterTreeNode: {},
+		expandAction: {
+			type: [Boolean, String],
+			default: false
+		},
+		virtual: {
+			type: Boolean,
+			default: true
+		},
+		height: {},
+		itemHeight: {},
+		listHeight: {},
+		listItemHeight: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:expandedKeys",
+		"update:selectedKeys",
+		"update:checkedKeys",
+		"expand",
+		"select",
+		"check",
+		"load",
+		"click",
+		"scroll"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		function readSlotFlags() {
+			return {
+				title: !!slots.title,
+				titleRender: !!slots.titleRender,
+				icon: !!slots.icon,
+				switcherIcon: !!slots.switcherIcon,
+				switcherLoadingIcon: !!slots.switcherLoadingIcon
+			};
+		}
+		const hasSlot = reactive(readSlotFlags());
+		onBeforeUpdate(() => Object.assign(hasSlot, readSlotFlags()));
+		/** fallback of `--am-tree-item-height`, the estimate used before a row is measured */
+		const disabled = useDisabled(() => props.disabled);
+		const formItem = useFormItemInputContext();
+		provide(formItemInputContextKey, {
+			status: formItem.status,
+			id: computed(() => void 0),
+			onFieldChange: noop,
+			onFieldBlur: noop,
+			isFormItemInput: false
+		});
+		const fieldNames = computed(() => fillFieldNames(props.fieldNames));
+		const entities = computed(() => convertDataToEntities(props.treeData, fieldNames.value));
+		function getNode(key) {
+			return entities.value.keyEntities.get(key)?.node;
+		}
+		function getNodes(keys) {
+			const nodes = [];
+			keys.forEach((key) => {
+				const node = getNode(key);
+				if (node) nodes.push(node);
+			});
+			return nodes;
+		}
+		function getInitExpandedKeys() {
+			const { keyEntities } = entities.value;
+			const keys = props.defaultExpandAll ? Array.from(keyEntities.keys()) : props.expandedKeys ?? props.defaultExpandedKeys ?? [];
+			return props.defaultExpandParent ? conductExpandParent(keys, keyEntities) : keys;
+		}
+		const initExpandedProp = props.expandedKeys;
+		const initExpandedKeys = getInitExpandedKeys();
+		const [innerExpandedKeys, setExpandedKeys] = useControlled(props, "expandedKeys", {
+			defaultValue: () => initExpandedKeys,
+			onChange: (keys) => emit("update:expandedKeys", keys)
+		});
+		const expandedKeys = computed(() => {
+			const keys = innerExpandedKeys.value ?? [];
+			if (props.expandedKeys === void 0) return keys;
+			if (props.expandedKeys === initExpandedProp) return initExpandedKeys;
+			return props.autoExpandParent ? conductExpandParent(keys, entities.value.keyEntities) : keys;
+		});
+		const expandedSet = computed(() => new Set(expandedKeys.value));
+		const flatNodes = computed(() => flattenTreeData(props.treeData, expandedSet.value, fieldNames.value));
+		const [innerSelectedKeys, setSelectedKeys] = useControlled(props, "selectedKeys", {
+			defaultValue: () => props.defaultSelectedKeys ?? [],
+			onChange: (keys) => emit("update:selectedKeys", keys)
+		});
+		const selectedKeys = computed(() => calcSelectedKeys(innerSelectedKeys.value, props.multiple));
+		const selectedSet = computed(() => new Set(selectedKeys.value));
+		const [rawCheckedKeys, setRawCheckedKeys] = useControlled(props, "checkedKeys", {
+			defaultValue: () => props.defaultCheckedKeys ?? [],
+			onChange: (keys) => emit("update:checkedKeys", Array.isArray(keys) ? keys : keys.checked)
+		});
+		const mergedChecked = computed(() => {
+			if (!props.checkable) return {
+				checkedKeys: [],
+				halfCheckedKeys: []
+			};
+			const parsed = parseCheckedKeys(rawCheckedKeys.value);
+			if (props.checkStrictly || !entities.value.keyEntities.size) return parsed;
+			return conductCheck(parsed.checkedKeys, true, entities.value);
+		});
+		const checkedSet = computed(() => new Set(mergedChecked.value.checkedKeys));
+		const halfCheckedSet = computed(() => new Set(mergedChecked.value.halfCheckedKeys));
+		const [loadedKeys, setLoadedKeys] = useControlled(props, "loadedKeys", { defaultValue: () => [] });
+		const loadedSet = computed(() => new Set(loadedKeys.value ?? []));
+		const loadingKeys = ref([]);
+		const loadingSet = computed(() => new Set(loadingKeys.value));
+		const retryTimes = /* @__PURE__ */ new Map();
+		function getEventNode(key) {
+			const entity = entities.value.keyEntities.get(key);
+			return {
+				...entity?.node,
+				key,
+				expanded: expandedSet.value.has(key),
+				selected: selectedSet.value.has(key),
+				checked: checkedSet.value.has(key),
+				halfChecked: halfCheckedSet.value.has(key),
+				loaded: loadedSet.value.has(key),
+				loading: loadingSet.value.has(key),
+				pos: entity?.pos ?? ""
+			};
+		}
+		function onNodeLoad(node) {
+			const key = node.key;
+			const { loadData } = props;
+			if (!loadData || entities.value.keyEntities.get(key)?.children.length) return void 0;
+			if (loadedSet.value.has(key) || loadingSet.value.has(key)) return void 0;
+			loadingKeys.value = arrAdd(loadingKeys.value, key);
+			let result;
+			try {
+				result = loadData(node);
+			} catch (error) {
+				result = Promise.reject(error);
+			}
+			return Promise.resolve(result).then(() => {
+				const nextLoadedKeys = arrAdd(loadedKeys.value ?? [], key);
+				setLoadedKeys(nextLoadedKeys);
+				loadingKeys.value = arrDel(loadingKeys.value, key);
+				emit("load", nextLoadedKeys, {
+					event: "load",
+					node
+				});
+			}, (error) => {
+				loadingKeys.value = arrDel(loadingKeys.value, key);
+				const times = (retryTimes.get(key) ?? 0) + 1;
+				retryTimes.set(key, times);
+				if (times >= MAX_RETRY_TIMES) {
+					setLoadedKeys(arrAdd(loadedKeys.value ?? [], key));
+					return;
+				}
+				throw error;
+			});
+		}
+		/** nodes that are expanded without children (`defaultExpandedKeys`, controlled keys) load on their own */
+		function loadExpandedNodes() {
+			if (!props.loadData) return;
+			const { keyEntities } = entities.value;
+			flatNodes.value.forEach((item) => {
+				if (!expandedSet.value.has(item.key) || item.data.isLeaf === true) return;
+				if (keyEntities.get(item.key)?.children.length) return;
+				onNodeLoad(getEventNode(item.key))?.catch(noop);
+			});
+		}
+		onMounted(loadExpandedNodes);
+		watch([
+			flatNodes,
+			loadedSet,
+			() => props.loadData
+		], loadExpandedNodes, { flush: "post" });
+		function onNodeExpand(event, node) {
+			const key = node.key;
+			const targetExpanded = !expandedSet.value.has(key);
+			const nextExpandedKeys = targetExpanded ? arrAdd(expandedKeys.value, key) : arrDel(expandedKeys.value, key);
+			setExpandedKeys(nextExpandedKeys);
+			emit("expand", nextExpandedKeys, {
+				node,
+				expanded: targetExpanded,
+				nativeEvent: event
+			});
+			if (targetExpanded && props.loadData) onNodeLoad(node)?.catch(() => {
+				if (expandedSet.value.has(key)) setExpandedKeys(arrDel(expandedKeys.value, key));
+			});
+		}
+		function onNodeSelect(event, node) {
+			const key = node.key;
+			const targetSelected = !selectedSet.value.has(key);
+			let nextSelectedKeys;
+			if (!targetSelected) nextSelectedKeys = arrDel(selectedKeys.value, key);
+			else if (!props.multiple) nextSelectedKeys = [key];
+			else nextSelectedKeys = arrAdd(selectedKeys.value, key);
+			setSelectedKeys(nextSelectedKeys);
+			emit("select", nextSelectedKeys, {
+				event: "select",
+				selected: targetSelected,
+				node,
+				selectedNodes: getNodes(nextSelectedKeys),
+				nativeEvent: event
+			});
+			formItem.onFieldChange();
+		}
+		function onNodeCheck(event, node, checked) {
+			const { checkedKeys: oriCheckedKeys, halfCheckedKeys: oriHalfCheckedKeys } = mergedChecked.value;
+			const key = node.key;
+			const info = {
+				event: "check",
+				node,
+				checked,
+				nativeEvent: event,
+				checkedNodes: []
+			};
+			let checkedValue;
+			if (props.checkStrictly) {
+				const nextCheckedKeys = checked ? arrAdd(oriCheckedKeys, key) : arrDel(oriCheckedKeys, key);
+				checkedValue = {
+					checked: nextCheckedKeys,
+					halfChecked: arrDel(oriHalfCheckedKeys, key)
+				};
+				info.checkedNodes = getNodes(nextCheckedKeys);
+			} else {
+				let conducted = conductCheck([...oriCheckedKeys, key], true, entities.value);
+				if (!checked) {
+					const keySet = new Set(conducted.checkedKeys);
+					keySet.delete(key);
+					conducted = conductCheck(Array.from(keySet), {
+						checked: false,
+						halfCheckedKeys: conducted.halfCheckedKeys
+					}, entities.value);
+				}
+				checkedValue = conducted.checkedKeys;
+				info.halfCheckedKeys = conducted.halfCheckedKeys;
+				info.checkedNodesPositions = [];
+				conducted.checkedKeys.forEach((checkedKey) => {
+					const entity = entities.value.keyEntities.get(checkedKey);
+					if (!entity) return;
+					info.checkedNodes.push(entity.node);
+					info.checkedNodesPositions.push({
+						node: entity.node,
+						pos: entity.pos
+					});
+				});
+			}
+			setRawCheckedKeys(checkedValue);
+			emit("check", checkedValue, info);
+			formItem.onFieldChange();
+		}
+		function onNodeClick(event, node) {
+			emit("click", event, node);
+		}
+		provide(treeContextKey, {
+			props,
+			slots,
+			hasSlot,
+			disabled,
+			fieldNames,
+			expandedKeys: expandedSet,
+			selectedKeys: selectedSet,
+			checkedKeys: checkedSet,
+			halfCheckedKeys: halfCheckedSet,
+			loadedKeys: loadedSet,
+			loadingKeys: loadingSet,
+			getEventNode,
+			onNodeClick,
+			onNodeExpand,
+			onNodeSelect,
+			onNodeCheck
+		});
+		const listRef = ref();
+		const mergedHeight = computed(() => props.height ?? props.listHeight);
+		const mergedItemHeight = computed(() => props.itemHeight ?? props.listItemHeight);
+		/** windowing needs a scroll container of its own; without `height` the tree grows with its content */
+		const mergedVirtual = computed(() => props.virtual && mergedHeight.value !== void 0 && mergedHeight.value !== "");
+		const classNames = computed(() => [
+			"am-tree",
+			{
+				"am-tree-block-node": props.blockNode,
+				"am-tree-show-line": !!props.showLine,
+				"am-tree-checkable": props.checkable,
+				"am-tree-unselectable": !props.selectable,
+				"am-tree-disabled": disabled.value
+			},
+			props.rootClass,
+			props.classes?.root
+		]);
+		const ALIGN = {
+			top: "start",
+			bottom: "end",
+			center: "center",
+			auto: "auto"
+		};
+		function scrollTo(target) {
+			if (typeof target === "number") {
+				listRef.value?.scrollTo(target);
+				return;
+			}
+			if (!target || target.key === void 0) return;
+			const run = () => listRef.value?.scrollTo({
+				key: target.key,
+				align: ALIGN[target.align ?? "top"] ?? "start",
+				offset: target.offset
+			});
+			if (target.autoExpand && props.expandedKeys === void 0 && !expandedSet.value.has(target.key)) {
+				setExpandedKeys(arrAdd(expandedKeys.value, target.key));
+				nextTick(run);
+				return;
+			}
+			run();
+		}
+		__expose({
+			scrollTo,
+			/** the scroll container */
+			get nativeElement() {
+				return listRef.value?.nativeElement;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(VirtualList_default, mergeProps({
+				ref_key: "listRef",
+				ref: listRef
+			}, _ctx.$attrs, {
+				role: "tree",
+				class: classNames.value,
+				style: [{ "--am-tree-item-height": unref(addUnit)(mergedItemHeight.value) }, __props.styles?.root],
+				"aria-multiselectable": __props.multiple || void 0,
+				"aria-disabled": unref(disabled) || void 0,
+				data: flatNodes.value,
+				"item-key": "key",
+				virtual: mergedVirtual.value,
+				height: mergedHeight.value,
+				"item-height": mergedItemHeight.value ?? DEFAULT_ITEM_HEIGHT,
+				onScroll: _cache[0] || (_cache[0] = ($event) => emit("scroll", $event))
+			}), {
+				default: withCtx(({ item }) => [createVNode(TreeNode_default, { node: item }, null, 8, ["node"])]),
+				_: 1
+			}, 16, [
+				"class",
+				"style",
+				"aria-multiselectable",
+				"aria-disabled",
+				"data",
+				"virtual",
+				"height",
+				"item-height"
+			]);
+		};
+	}
+});
+export { Tree_vue_vue_type_script_setup_true_lang_default as default };

package/dist/tree/TreeNode.js

@@ -0,0 +1,4 @@
+import TreeNode_vue_vue_type_script_setup_true_lang_default from "./TreeNode.vue_vue_type_script_setup_true_lang.js";
+// src/tree/TreeNode.vue
+var TreeNode_default = TreeNode_vue_vue_type_script_setup_true_lang_default;
+export { TreeNode_default as default };

package/dist/tree/TreeNode.vue.d.ts

@@ -0,0 +1,7 @@
+import type { TreeFlattenNode } from './util';
+type __VLS_Props = {
+    node: TreeFlattenNode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;