sard 1.0.0 → 1.0.1

package/components/tree/tree-node.js

@@ -0,0 +1,360 @@
+import { createBem, cssVar } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import { getNodeLevel, walkDescendant } from "../../utils/tree.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useSimulatedClick } from "../../use/useSimulatedClick.js";
+import { useSimulatedPress } from "../../use/useSimulatedPress.js";
+import "../../use/index.js";
+import { withResolvers } from "../../utils/polyfill.js";
+import "../../utils/index.js";
+import collapse_default from "../collapse/collapse.js";
+import loading_default from "../loading/loading.js";
+import checkbox_default from "../checkbox/checkbox.js";
+import radio_default from "../radio/radio.js";
+import { treeContextKey } from "./common.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, useTemplateRef, withCtx, withModifiers } from "vue";
+import { Left, List, PencilSquare, Right } from "@sard/icons";
+//#region packages/sard/components/tree/tree-node.vue
+var tree_node_default = /*@__PURE__*/ defineComponent({
+	name: "TreeNode",
+	__name: "tree-node",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("tree");
+		const treeContext = inject(treeContextKey);
+		const level = computed(() => {
+			return getNodeLevel(props.node);
+		});
+		const nodeOpacity = ref(0);
+		onMounted(() => {
+			setTimeout(() => {
+				nodeOpacity.value = 1;
+			}, 30);
+		});
+		const nodeRef = useTemplateRef("node");
+		const dragRef = useTemplateRef("drag");
+		const allowDrag = computed(() => {
+			return !treeContext.allowDrag || treeContext.allowDrag(props.node);
+		});
+		let dropNode;
+		let dropPosition;
+		const dragging = ref(false);
+		let nodeRect;
+		const dropLoading = ref(false);
+		const translateY = ref(0);
+		let obviousNodes = [];
+		const onDragStart = () => {
+			dragging.value = true;
+			obviousNodes = [];
+			treeContext.treeData.forEach((node) => {
+				walkDescendant(node, (node) => {
+					obviousNodes.push(node);
+					if (!node.expanded) return true;
+				});
+			});
+		};
+		const onDragMove = (offset) => {
+			translateY.value = offset.y;
+			const nodeHeight = nodeRect.height;
+			const currentIndex = obviousNodes.findIndex((node) => node === props.node);
+			const targetIndex = clamp(currentIndex + Math.floor(Math.abs(offset.y) / nodeHeight + .5) * (offset.y < 0 ? -1 : 1), 0, obviousNodes.length - 1);
+			const targetNode = obviousNodes[targetIndex];
+			if (dropNode !== targetNode) {
+				obviousNodes.forEach((node, index) => {
+					node.offsetLevel = index < currentIndex ? index >= targetIndex ? 1 : 0 : index > currentIndex ? index <= targetIndex ? -1 : 0 : 0;
+				});
+				dropNode = targetNode;
+				dropPosition = targetNode === props.node ? 0 : offset.y < 0 ? -1 : 1;
+			}
+		};
+		const onDragEnd = async () => {
+			try {
+				dropLoading.value = true;
+				if (dropNode && dropPosition && dropNode !== props.node) await treeContext.drop(props.node, dropNode, dropPosition);
+			} catch {} finally {
+				dropLoading.value = false;
+				dragging.value = false;
+				dropNode = void 0;
+				dropPosition = void 0;
+				obviousNodes.forEach((node) => {
+					node.offsetLevel = 0;
+				});
+				translateY.value = 0;
+			}
+		};
+		const [onDragSimulatedClickTouchStart, onDragSimulatedClickTouchEnd] = useSimulatedClick({
+			onClick: () => {
+				const resolver = withResolvers();
+				resolver.promise.then((indent) => {
+					onPopoverSelect(indent);
+				});
+				treeContext.dragIndent(popoverOptions.value, dragRef.value, resolver);
+			},
+			duration: 300
+		});
+		const [onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd] = useSimulatedPress({
+			start: () => {
+				treeContext.setExpandedByNode(props.node, false);
+				onDragStart();
+			},
+			move: (_, { delta }) => {
+				if (nodeRect) onDragMove(delta);
+			},
+			end: () => {
+				onDragEnd();
+			},
+			duration: 150
+		});
+		const onDragTouchStart = async (event) => {
+			if (!allowDrag.value || dropLoading.value) return;
+			onDragSimulatedPressTouchStart(event);
+			onDragSimulatedClickTouchStart(event);
+			nodeRect = nodeRef.value.getBoundingClientRect();
+		};
+		const onDragTouchMove = (event) => {
+			if (!allowDrag.value || dropLoading.value) return;
+			onDragSimulatedPressTouchMove(event);
+		};
+		const onDragTouchEnd = (event) => {
+			if (!allowDrag.value || dropLoading.value) return;
+			nodeRect = void 0;
+			onDragSimulatedClickTouchEnd(event);
+			onDragSimulatedPressTouchEnd();
+		};
+		const onDragPointerDown = usePointerDown(onDragTouchStart, onDragTouchMove, onDragTouchEnd);
+		const isLastNode = computed(() => {
+			return props.node.parent && props.node.parent.children.length - 1 === props.index;
+		});
+		const popoverOptions = computed(() => {
+			const options = [];
+			if (isLastNode.value) options.push({
+				icon: treeContext.isRtl ? "right" : "left",
+				id: "left"
+			});
+			if (props.index !== 0) options.push({
+				icon: treeContext.isRtl ? "left" : "right",
+				id: "right"
+			});
+			return options;
+		});
+		const onPopoverSelect = async (value) => {
+			try {
+				dropLoading.value = true;
+				switch (value) {
+					case "left":
+						await treeContext.levelup(props.node);
+						break;
+					case "right":
+						await treeContext.leveldown(props.node);
+						break;
+				}
+			} catch {} finally {
+				dropLoading.value = false;
+			}
+		};
+		const isMergedLeaf = computed(() => {
+			const { children, isLeaf } = props.node;
+			return treeContext.lazy && treeContext.load ? isLeaf : !children || children.length === 0;
+		});
+		const onNodeClick = async (event) => {
+			if (dropLoading.value) return;
+			const node = props.node;
+			const { loadStatus, isLeaf } = node;
+			if (loadStatus === "loading") return;
+			if (treeContext.lazy && treeContext.load && !isLeaf && loadStatus === "idle") try {
+				node.loadStatus = "loading";
+				const treeNodes = await treeContext.load(node) || [];
+				node.loadStatus = "loaded";
+				node.children = treeContext.toTreeStateNodes(treeNodes, node);
+				if (node.children.length === 0) node.isLeaf = true;
+				else {
+					treeContext.setRenderPosition();
+					if (node.checked) treeContext.setCheckedByNode(props.node, true);
+				}
+			} catch {
+				node.loadStatus = "idle";
+				return;
+			}
+			if (!isMergedLeaf.value) treeContext.toggleExpandedByNode(node);
+			if (treeContext.selectable && !node.disabled && isMergedLeaf.value) treeContext.toggleCheck(node, !node.checked);
+			if (canSingleSelectable.value && !node.disabled && isMergedLeaf.value) treeContext.singleSelect(node);
+			treeContext.nodeClick(node, event);
+		};
+		const nodeActive = ref(false);
+		const onNodeTouchStart = () => {
+			if (dropLoading.value) return;
+			if (!isMergedLeaf.value || canSingleSelectable.value && treeContext.leafOnly) nodeActive.value = true;
+		};
+		const onNodeTouchEnd = () => {
+			nodeActive.value = false;
+		};
+		const onNodePointerDown = usePointerDown(onNodeTouchStart, void 0, onNodeTouchEnd);
+		const canSingleSelectable = computed(() => {
+			return treeContext.singleSelectable && (!treeContext.leafOnly || isMergedLeaf.value);
+		});
+		const isSingleChecked = computed(() => props.node.key === treeContext.currentKey);
+		const [onSelectionTouchStart, onSelectionTouchEnd] = useSimulatedClick({ onClick: () => {
+			if (!props.node.disabled) {
+				if (treeContext.selectable) treeContext.toggleCheck(props.node, !props.node.checked);
+				if (canSingleSelectable.value) treeContext.singleSelect(props.node);
+			}
+		} });
+		const onSelectionPointerDown = usePointerDown(onSelectionTouchStart, void 0, onSelectionTouchEnd);
+		const editRef = useTemplateRef("edit");
+		const getEditRect = () => {
+			return editRef.value.getBoundingClientRect();
+		};
+		const [onEditTouchStart, onEditTouchEnd] = useSimulatedClick({ onClick: () => {
+			if (dropLoading.value) return;
+			treeContext.edit(props.node, getEditRect);
+		} });
+		const onEditPointerDown = usePointerDown(onEditTouchStart, void 0, onEditTouchEnd);
+		const nodeClass = computed(() => {
+			return [
+				bem.e("node"),
+				bem.em("node", "dragging", dragging.value),
+				bem.em("node", "selectable", treeContext.selectable),
+				bem.em("node", "active", nodeActive.value),
+				bem.em("node", "current", isSingleChecked.value),
+				bem.em("node", "draggable", treeContext.draggable),
+				bem.em("node", "disallowed", !allowDrag.value),
+				bem.em("node", "truncated", treeContext.draggable || !treeContext.autoHeight)
+			];
+		});
+		const nodeStyle = computed(() => {
+			return treeContext.draggable ? {
+				transform: `translate3d(0,calc(${cssVar("tree-node-height")} * ${props.node.level + props.node.offsetLevel} + ${dragging.value ? translateY.value : 0}px),0)`,
+				opacity: nodeOpacity.value
+			} : "";
+		});
+		const editClass = computed(() => {
+			return bem.e("edit");
+		});
+		const indentStyle = computed(() => {
+			return {
+				width: `calc(${cssVar("tree-indent-width")} * ${level.value})`,
+				transition: `width 300ms`
+			};
+		});
+		const arrowClass = computed(() => {
+			return [
+				bem.e("arrow"),
+				bem.em("arrow", "expanded", props.node.expanded),
+				bem.em("arrow", "is-leaf", isMergedLeaf.value)
+			];
+		});
+		const selectionClass = computed(() => {
+			return [bem.e("selection"), bem.em("selection", "disabled", props.node.disabled)];
+		});
+		return (_ctx, _cache) => {
+			const _component_TreeNode = resolveComponent("TreeNode", true);
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("div", {
+					ref: "node",
+					class: normalizeClass(nodeClass.value),
+					style: normalizeStyle(nodeStyle.value),
+					onTouchstart: onNodeTouchStart,
+					onTouchend: onNodeTouchEnd,
+					onTouchcancel: onNodeTouchEnd,
+					onPointerdown: _cache[12] || (_cache[12] = (...args) => unref(onNodePointerDown) && unref(onNodePointerDown)(...args)),
+					onClick: onNodeClick
+				}, [
+					createElementVNode("div", { style: normalizeStyle(indentStyle.value) }, null, 4),
+					createElementVNode("div", { class: normalizeClass(arrowClass.value) }, [createVNode(unref(Right), { class: normalizeClass(unref(bem).e("arrow-icon")) }, null, 8, ["class"])], 2),
+					__props.node.loadStatus === "loading" ? (openBlock(), createBlock(loading_default, {
+						key: 0,
+						class: normalizeClass(unref(bem).e("loading"))
+					}, null, 8, ["class"])) : createCommentVNode("v-if", true),
+					unref(treeContext).selectable || canSingleSelectable.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(selectionClass.value),
+						onTouchstart: _cache[0] || (_cache[0] = withModifiers((...args) => unref(onSelectionTouchStart) && unref(onSelectionTouchStart)(...args), ["stop"])),
+						onTouchend: _cache[1] || (_cache[1] = withModifiers((...args) => unref(onSelectionTouchEnd) && unref(onSelectionTouchEnd)(...args), ["stop"])),
+						onTouchcancel: _cache[2] || (_cache[2] = withModifiers((...args) => unref(onSelectionTouchEnd) && unref(onSelectionTouchEnd)(...args), ["stop"])),
+						onPointerdown: _cache[3] || (_cache[3] = withModifiers((...args) => unref(onSelectionPointerDown) && unref(onSelectionPointerDown)(...args), ["stop"])),
+						onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+					}, [unref(treeContext).selectable ? (openBlock(), createBlock(checkbox_default, {
+						key: 0,
+						readonly: "",
+						checked: __props.node.checked,
+						indeterminate: __props.node.indeterminate,
+						disabled: __props.node.disabled
+					}, null, 8, [
+						"checked",
+						"indeterminate",
+						"disabled"
+					])) : createCommentVNode("v-if", true), canSingleSelectable.value ? (openBlock(), createBlock(radio_default, {
+						key: 1,
+						readonly: "",
+						checked: isSingleChecked.value,
+						disabled: __props.node.disabled
+					}, null, 8, ["checked", "disabled"])) : createCommentVNode("v-if", true)], 34)) : createCommentVNode("v-if", true),
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, toDisplayString(__props.node.title), 3),
+					unref(treeContext).draggable || unref(treeContext).editable ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(bem).e("toolbar"))
+					}, [unref(treeContext).editable ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref: "edit",
+						class: normalizeClass(editClass.value),
+						onTouchstart: _cache[5] || (_cache[5] = withModifiers((...args) => unref(onEditTouchStart) && unref(onEditTouchStart)(...args), ["stop", "prevent"])),
+						onTouchend: _cache[6] || (_cache[6] = (...args) => unref(onEditTouchEnd) && unref(onEditTouchEnd)(...args)),
+						onTouchcancel: _cache[7] || (_cache[7] = (...args) => unref(onEditTouchEnd) && unref(onEditTouchEnd)(...args)),
+						onPointerdown: _cache[8] || (_cache[8] = withModifiers((...args) => unref(onEditPointerDown) && unref(onEditPointerDown)(...args), ["stop"])),
+						onClick: _cache[9] || (_cache[9] = withModifiers(() => {}, ["stop"]))
+					}, [createVNode(unref(PencilSquare))], 34)) : createCommentVNode("v-if", true), unref(treeContext).draggable ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						ref: "drag",
+						class: normalizeClass(unref(bem).e("drag")),
+						onTouchstart: withModifiers(onDragTouchStart, ["stop", "prevent"]),
+						onTouchmove: withModifiers(onDragTouchMove, ["stop", "prevent"]),
+						onTouchend: onDragTouchEnd,
+						onTouchcancel: onDragTouchEnd,
+						onPointerdown: _cache[10] || (_cache[10] = withModifiers((...args) => unref(onDragPointerDown) && unref(onDragPointerDown)(...args), ["stop"])),
+						onClick: _cache[11] || (_cache[11] = withModifiers(() => {}, ["stop"]))
+					}, [dropLoading.value ? (openBlock(), createBlock(loading_default, { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(List)), createElementVNode("div", { class: normalizeClass(unref(bem).e("level-btn")) }, [isLastNode.value ? (openBlock(), createBlock(unref(Left), {
+						key: 0,
+						class: normalizeClass(unref(bem).e("level-btn-icon"))
+					}, null, 8, ["class"])) : createCommentVNode("v-if", true), __props.index !== 0 ? (openBlock(), createBlock(unref(Right), {
+						key: 1,
+						class: normalizeClass(unref(bem).e("level-btn-icon"))
+					}, null, 8, ["class"])) : createCommentVNode("v-if", true)], 2)], 64))], 34)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)
+				], 38),
+				unref(treeContext).draggable && !isMergedLeaf.value && __props.node.expanded && __props.node.children && __props.node.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.node.children, (subNode, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: subNode.key }, [subNode.visible ? (openBlock(), createBlock(_component_TreeNode, {
+						key: 0,
+						index,
+						node: subNode
+					}, null, 8, ["index", "node"])) : createCommentVNode("v-if", true)], 64);
+				}), 128)) : createCommentVNode("v-if", true),
+				!unref(treeContext).draggable && !isMergedLeaf.value && __props.node.children && __props.node.children.length > 0 ? (openBlock(), createBlock(collapse_default, {
+					key: 1,
+					lazy: "",
+					"destroy-on-close": "",
+					visible: __props.node.expanded
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, (subNode, index) => {
+						return openBlock(), createElementBlock(Fragment, { key: subNode.key }, [subNode.visible ? (openBlock(), createBlock(_component_TreeNode, {
+							key: 0,
+							index,
+							node: subNode
+						}, null, 8, ["index", "node"])) : createCommentVNode("v-if", true)], 64);
+					}), 128))]),
+					_: 1
+				}, 8, ["visible"])) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { tree_node_default as default };

package/components/tree/tree.d.ts

@@ -0,0 +1,48 @@
+import { type TreeProps, type TreeExpose, type TreeNaturalNode, type TreeStateNode, type TreeDropType, type TreeEditType } from './common';
+declare const __VLS_export: import("vue").DefineComponent<TreeProps, TreeExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (key: string | number, node: TreeStateNode) => any;
+    check: (event: {
+        checked: boolean;
+        node: TreeStateNode;
+    }) => any;
+    "update:current": (key: string | number, node: TreeStateNode) => any;
+    "node-click": (event: {
+        event: any;
+        node: TreeStateNode;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
+    onSelect?: ((key: string | number, node: TreeStateNode) => any) | undefined;
+    onCheck?: ((event: {
+        checked: boolean;
+        node: TreeStateNode;
+    }) => any) | undefined;
+    "onUpdate:current"?: ((key: string | number, node: TreeStateNode) => any) | undefined;
+    "onNode-click"?: ((event: {
+        event: any;
+        node: TreeStateNode;
+    }) => any) | undefined;
+}>, {
+    data: TreeNaturalNode[];
+    load: (node?: TreeStateNode) => Promise<TreeNaturalNode[]> | TreeNaturalNode[];
+    lazy: boolean;
+    accordion: boolean;
+    autoHeight: boolean;
+    checkStrictly: boolean;
+    draggable: boolean;
+    current: string | number;
+    filterMethod: (value: string, node: TreeStateNode) => boolean;
+    nodeKeys: import("./common").TreeNodeKeys;
+    defaultExpandAll: boolean;
+    defaultExpandedKeys: (string | number)[];
+    selectable: boolean;
+    singleSelectable: boolean;
+    leafOnly: boolean;
+    defaultCheckedKeys: (string | number)[];
+    editable: boolean;
+    filterMode: "lenient" | "strict";
+    allowDrag: (node: TreeStateNode) => boolean;
+    beforeDrop: (draggingNode: TreeStateNode, dropNode: TreeStateNode, type: TreeDropType) => any;
+    beforeEdit: (node: TreeStateNode, title: string, type: TreeEditType) => any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;