sard 1.0.0 → 1.0.2

package/components/tree/tree.js

@@ -0,0 +1,696 @@
+import { createBem, cssVar } from "../../utils/bem.js";
+import { uniqid } from "../../utils/string.js";
+import { getTreeCheckedKeys, getTreeHalfCheckedKeys, initializeCheckNodes, setCheckedRecursively, updateAncestorsChecked, walkAncestor, walkDescendant, walkNodes } from "../../utils/tree.js";
+import { useRtl } from "../../use/useRtl.js";
+import loading_default from "../loading/loading.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import input_default from "../input/input.js";
+import popover_default from "../popover/popover.js";
+import menu_default from "../menu/menu.js";
+import menu_item_default from "../menu/menu-item.js";
+import dialog_default from "../dialog/dialog.js";
+import toast_default from "../toast/toast.js";
+import { defaultNodeKeys, defaultTreeProps, treeContextKey } from "./common.js";
+import tree_node_default from "./tree-node.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, openBlock, provide, reactive, ref, renderList, shallowRef, toDisplayString, toRef, unref, useAttrs, useTemplateRef, watch, withCtx } from "vue";
+import { Left, Minus, PencilSquare, Plus, Right } from "@sard/icons";
+//#region packages/sard/components/tree/tree.vue
+const _hoisted_1 = { key: 2 };
+var tree_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "tree",
+	props: /*@__PURE__*/ mergeDefaults({
+		data: {
+			type: Array,
+			required: false
+		},
+		nodeKeys: {
+			type: Object,
+			required: false
+		},
+		defaultExpandAll: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandedKeys: {
+			type: Array,
+			required: false
+		},
+		accordion: {
+			type: Boolean,
+			required: false
+		},
+		selectable: {
+			type: Boolean,
+			required: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			required: false
+		},
+		singleSelectable: {
+			type: Boolean,
+			required: false
+		},
+		leafOnly: {
+			type: Boolean,
+			required: false
+		},
+		current: {
+			type: [String, Number],
+			required: false
+		},
+		defaultCheckedKeys: {
+			type: Array,
+			required: false
+		},
+		draggable: {
+			type: Boolean,
+			required: false
+		},
+		editable: {
+			type: Boolean,
+			required: false
+		},
+		filterMode: {
+			type: String,
+			required: false
+		},
+		filterMethod: {
+			type: Function,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		},
+		load: {
+			type: Function,
+			required: false
+		},
+		autoHeight: {
+			type: Boolean,
+			required: false
+		},
+		allowDrag: {
+			type: Function,
+			required: false
+		},
+		beforeDrop: {
+			type: Function,
+			required: false
+		},
+		beforeEdit: {
+			type: Function,
+			required: false
+		}
+	}, defaultTreeProps),
+	emits: [
+		"update:current",
+		"select",
+		"check",
+		"node-click"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const bem = createBem("tree");
+		const { t } = useTranslateWithPrefix("tree");
+		const fieldKeys = computed(() => {
+			return Object.assign({}, defaultNodeKeys, props.nodeKeys);
+		});
+		const treeData = ref([]);
+		const treeMap = {};
+		const totalLevel = ref(0);
+		const toTreeStateNodes = (nodes, parent) => {
+			return nodes.map((node) => {
+				const key = node[fieldKeys.value.key] ?? uniqid();
+				const stateNode = reactive({
+					title: node[fieldKeys.value.title],
+					key,
+					expanded: props.defaultExpandAll ? true : false,
+					checked: false,
+					indeterminate: false,
+					parent,
+					level: 0,
+					offsetLevel: 0,
+					visible: true,
+					disabled: !!node.disabled,
+					isLeaf: node[fieldKeys.value.isLeaf],
+					loadStatus: "idle",
+					depth: parent ? parent.depth + 1 : 0
+				});
+				if (node.children && node.children.length) stateNode.children = toTreeStateNodes(node.children, stateNode);
+				treeMap[key] = stateNode;
+				return stateNode;
+			});
+		};
+		const setExpandedByNode = (node, expanded, reflow = true) => {
+			node.expanded = expanded;
+			if (node.expanded) {
+				walkAncestor(node.parent, (node) => {
+					node.expanded = true;
+				});
+				if (props.accordion) (node.parent ? node.parent.children : treeData.value).forEach((sibling) => {
+					if (sibling !== node) sibling.expanded = false;
+				});
+			}
+			if (reflow) setRenderPosition();
+		};
+		const toggleExpandedByNode = (node) => {
+			setExpandedByNode(node, !node.expanded);
+		};
+		const setExpanded = (key, expanded) => {
+			const node = treeMap[key];
+			if (node && node.expanded !== expanded) setExpandedByNode(node, expanded);
+		};
+		const toggleExpanded = (key) => {
+			const node = treeMap[key];
+			if (node) toggleExpandedByNode(node);
+		};
+		const setExpandedKeys = (keys) => {
+			walkNodes(treeData.value, (node) => {
+				node.expanded = false;
+			});
+			keys.forEach((key) => {
+				const node = treeMap[key];
+				if (node && !node.expanded) setExpandedByNode(node, true, false);
+			});
+			setRenderPosition();
+		};
+		const getExpandedKeys = () => {
+			const expandedKeys = [];
+			walkNodes(treeData.value, (node) => {
+				if (node.expanded) expandedKeys.push(node.key);
+			});
+			return expandedKeys;
+		};
+		const setCheckedByNode = (node, checked) => {
+			setCheckedRecursively(node, checked, props.checkStrictly);
+		};
+		const bubbleChecked = (parentNode) => {
+			updateAncestorsChecked(parentNode, props.checkStrictly);
+		};
+		const setCheckedKeys = (keys) => {
+			initializeCheckNodes(treeData.value, treeMap, keys, props.checkStrictly);
+		};
+		const setChecked = (key, checked) => {
+			const node = treeMap[key];
+			if (node) setCheckedByNode(node, checked);
+		};
+		const getCheckedKeys = () => {
+			return getTreeCheckedKeys(treeData.value);
+		};
+		const getHalfCheckedKeys = () => {
+			return getTreeHalfCheckedKeys(treeData.value);
+		};
+		const prepend = (node, newNode) => {
+			(node.children ??= []).unshift(newNode);
+			newNode.parent = node;
+			node.expanded = true;
+			bubbleChecked(node.parent);
+			walkDescendant(newNode, (node) => {
+				treeMap[node.key] = node;
+			});
+			setRenderPosition();
+		};
+		const append = (node, newNode) => {
+			(node.children ??= []).push(newNode);
+			newNode.parent = node;
+			node.expanded = true;
+			bubbleChecked(node.parent);
+			walkDescendant(newNode, (node) => {
+				treeMap[node.key] = node;
+			});
+			setRenderPosition();
+		};
+		const appendRoot = (newNode) => {
+			treeData.value.push(newNode);
+			newNode.parent = null;
+			walkDescendant(newNode, (node) => {
+				treeMap[node.key] = node;
+			});
+			setRenderPosition();
+		};
+		const before = (node, newNode) => {
+			const siblings = node.parent ? node.parent.children : treeData.value;
+			siblings.splice(siblings.indexOf(node), 0, newNode);
+			newNode.parent = node.parent;
+			bubbleChecked(node.parent);
+			walkDescendant(newNode, (node) => {
+				treeMap[node.key] = node;
+			});
+			setRenderPosition();
+		};
+		const after = (node, newNode) => {
+			const siblings = node.parent ? node.parent.children : treeData.value;
+			siblings.splice(siblings.indexOf(node) + 1, 0, newNode);
+			newNode.parent = node.parent;
+			bubbleChecked(node.parent);
+			walkDescendant(newNode, (node) => {
+				treeMap[node.key] = node;
+			});
+			setRenderPosition();
+		};
+		const remove = (node, reflow = true) => {
+			const siblings = node.parent ? node.parent.children : treeData.value;
+			siblings.splice(siblings.indexOf(node), 1);
+			if (siblings.length === 0 && node.parent) node.parent.children = void 0;
+			bubbleChecked(node.parent);
+			walkDescendant(node, (node) => {
+				delete treeMap[node.key];
+			});
+			if (reflow) setRenderPosition();
+		};
+		const levelup = async (node) => {
+			if (node.parent) {
+				await beforeDrop(node, node.parent, "after");
+				remove(node, false);
+				after(node.parent, node);
+			}
+		};
+		const leveldown = async (node) => {
+			const siblings = node.parent ? node.parent.children : treeData.value;
+			const index = siblings.indexOf(node);
+			if (index > 0) {
+				const prevNode = siblings[index - 1];
+				await beforeDrop(node, prevNode, "append");
+				remove(node, false);
+				prevNode.expanded = true;
+				append(prevNode, node);
+			}
+		};
+		const beforeDrop = async (draggingNode, dropNode, type) => {
+			if (props.beforeDrop) {
+				const result = props.beforeDrop(draggingNode, dropNode, type);
+				if (result instanceof Promise) await result;
+				else if (result === false) return Promise.reject();
+			}
+		};
+		const drop = async (draggingNode, dropNode, position) => {
+			if (position === -1) {
+				await beforeDrop(draggingNode, dropNode, "before");
+				remove(draggingNode, false);
+				before(dropNode, draggingNode);
+			} else if (dropNode.children && dropNode.expanded) {
+				await beforeDrop(draggingNode, dropNode, "prepend");
+				remove(draggingNode, false);
+				prepend(dropNode, draggingNode);
+			} else {
+				await beforeDrop(draggingNode, dropNode, "after");
+				remove(draggingNode, false);
+				after(dropNode, draggingNode);
+			}
+		};
+		const addRootNode = () => {
+			currentEditValue.value = "";
+			currentEditType.value = "addRoot";
+			dialogVisible.value = true;
+		};
+		const getCleanTreeData = () => {
+			function recur(nodes) {
+				return nodes.map((node) => {
+					const cleanNode = {
+						title: node.title,
+						key: node.key
+					};
+					if (node.children) cleanNode.children = recur(node.children);
+					return cleanNode;
+				});
+			}
+			return recur(treeData.value);
+		};
+		const setRenderPosition = () => {
+			let count = 0;
+			function recur(nodes, parent) {
+				nodes.forEach((node) => {
+					node.depth = parent ? parent.depth + 1 : 0;
+					if (node.visible) node.level = count++;
+					if (node.children && node.expanded) recur(node.children, node);
+				});
+			}
+			recur(treeData.value, null);
+			totalLevel.value = count;
+		};
+		const toggleCheck = (node, checked) => {
+			setCheckedByNode(node, checked);
+			emit("check", {
+				checked,
+				node
+			});
+		};
+		const loadStatus = ref("loaded");
+		const initialize = async () => {
+			if (props.lazy && props.load) try {
+				loadStatus.value = "loading";
+				const data = await props.load();
+				loadStatus.value = "loaded";
+				initializeTree(data);
+			} catch {
+				loadStatus.value = "error";
+			}
+			else initializeTree(props.data);
+		};
+		const initializeTree = (data) => {
+			treeData.value = toTreeStateNodes(data, null);
+			if (props.defaultCheckedKeys && props.defaultCheckedKeys.length > 0) setCheckedKeys(props.defaultCheckedKeys);
+			if (props.defaultExpandedKeys && props.defaultExpandedKeys.length > 0) setExpandedKeys(props.defaultExpandedKeys);
+			setRenderPosition();
+		};
+		const onErrorClick = () => {
+			initialize();
+		};
+		watch(() => props.data, () => {
+			initializeTree(props.data);
+		});
+		initialize();
+		const inputRef = useTemplateRef("input");
+		let currentEditNode;
+		const currentEditType = ref();
+		const currentEditValue = ref("");
+		const mapEditTypeTitle = {
+			addSibling: t("addSibling"),
+			addChild: t("addChild"),
+			addRoot: t("addRoot"),
+			edit: t("edit"),
+			delete: t("removeNode")
+		};
+		const currentEditTitle = computed(() => {
+			return mapEditTypeTitle[currentEditType.value];
+		});
+		const dialogVisible = ref(false);
+		const toastVisible = ref(false);
+		const onEditPopoverSelect = (option) => {
+			currentEditType.value = option.value;
+			if (currentEditNode) switch (option.value) {
+				case "addSibling":
+				case "addChild":
+				case "edit":
+				case "delete":
+					currentEditValue.value = option.value === "edit" || option.value === "delete" ? String(currentEditNode.title) : "";
+					dialogVisible.value = true;
+					break;
+			}
+			editPopoverVisible.value = false;
+		};
+		const beforeClose = async (type) => {
+			if (type === "confirm") {
+				if (currentEditValue.value.trim() === "") {
+					toastVisible.value = true;
+					return Promise.reject();
+				}
+				if (props.beforeEdit) {
+					const result = props.beforeEdit(currentEditNode, currentEditValue.value, currentEditType.value);
+					if (result instanceof Promise) try {
+						await result;
+					} catch {
+						return Promise.reject();
+					}
+					else if (result === false) return Promise.reject();
+				}
+				switch (currentEditType.value) {
+					case "addSibling":
+					case "addChild":
+					case "addRoot": {
+						const newNode = reactive({
+							title: currentEditValue.value,
+							key: uniqid(),
+							expanded: false,
+							checked: false,
+							indeterminate: false,
+							parent: null,
+							level: 0,
+							offsetLevel: 0,
+							visible: true,
+							disabled: false,
+							isLeaf: false,
+							loadStatus: "idle",
+							depth: 0
+						});
+						switch (currentEditType.value) {
+							case "addSibling":
+								after(currentEditNode, newNode);
+								break;
+							case "addChild":
+								append(currentEditNode, newNode);
+								break;
+							case "addRoot":
+								appendRoot(newNode);
+								break;
+						}
+						break;
+					}
+					case "edit":
+						currentEditNode.title = currentEditValue.value;
+						break;
+					case "delete":
+						remove(currentEditNode);
+						break;
+				}
+			}
+		};
+		const onVisibleHook = (name) => {
+			if (name === "after-enter") inputRef.value?.focus();
+		};
+		const editPopoverVisible = ref(false);
+		let editDomRect = new DOMRect();
+		const editPopoverReference = { getBoundingClientRect() {
+			return editDomRect;
+		} };
+		const edit = (node, getEditRect) => {
+			dragPopoverVisible.value = false;
+			if (editPopoverVisible.value && currentEditNode === node) editPopoverVisible.value = false;
+			else {
+				currentEditNode = node;
+				editDomRect = getEditRect();
+				editPopoverVisible.value = true;
+			}
+		};
+		const dragPopoverVisible = ref(false);
+		const dragRef = ref();
+		const dragOptions = ref([]);
+		let dragResolver;
+		const dragIndent = (options, el, resolver) => {
+			editPopoverVisible.value = false;
+			if (options.length === 0 || dragPopoverVisible.value && el === dragRef.value) dragPopoverVisible.value = false;
+			else {
+				dragOptions.value = options;
+				dragRef.value = el;
+				dragPopoverVisible.value = true;
+				dragResolver = resolver;
+			}
+		};
+		const onDragPopoverSelect = ({ value }) => {
+			dragResolver.resolve(value);
+			dragPopoverVisible.value = false;
+		};
+		function defaultFilterMethod(value, node) {
+			return String(node.title).includes(value);
+		}
+		function filter(searchString) {
+			const filterMethod = props.filterMethod || defaultFilterMethod;
+			function recur(nodes) {
+				nodes.forEach((node) => {
+					node.visible = filterMethod(searchString, node);
+					if (node.children) {
+						if (node.visible && props.filterMode === "lenient") walkNodes(node.children, (node) => {
+							node.visible = true;
+						});
+						else recur(node.children);
+						if (!node.visible && node.children.some((node) => node.visible)) node.visible = true;
+					}
+					if (node.visible) walkAncestor(node.parent, (node) => {
+						node.expanded = true;
+					});
+				});
+			}
+			recur(treeData.value);
+			setRenderPosition();
+		}
+		const currentKey = shallowRef(props.current);
+		watch(() => props.current, () => {
+			currentKey.value = props.current;
+		});
+		const singleSelect = (node) => {
+			if (currentKey.value !== node.key) {
+				currentKey.value = node.key;
+				emit("update:current", node.key, node);
+				emit("select", node.key, node);
+			}
+		};
+		const nodeClick = (node, event) => {
+			emit("node-click", {
+				node,
+				event
+			});
+		};
+		const isRtl = useRtl(useTemplateRef("root"));
+		provide(treeContextKey, reactive({
+			selectable: toRef(() => props.selectable),
+			draggable: toRef(() => props.draggable),
+			editable: toRef(() => props.editable),
+			autoHeight: toRef(() => props.autoHeight),
+			singleSelectable: toRef(() => props.singleSelectable),
+			leafOnly: toRef(() => props.leafOnly),
+			allowDrag: toRef(() => props.allowDrag),
+			treeData: toRef(() => treeData.value),
+			load: toRef(() => props.load),
+			lazy: toRef(() => props.lazy),
+			setExpandedByNode,
+			toggleExpandedByNode,
+			setCheckedByNode,
+			levelup,
+			leveldown,
+			drop,
+			toggleCheck,
+			edit,
+			currentKey,
+			singleSelect,
+			nodeClick,
+			toTreeStateNodes,
+			setRenderPosition,
+			isRtl,
+			dragIndent
+		}));
+		__expose({
+			setExpanded,
+			toggleExpanded,
+			setExpandedKeys,
+			getExpandedKeys,
+			getCheckedKeys,
+			getHalfCheckedKeys,
+			setCheckedKeys,
+			setChecked,
+			filter,
+			addRootNode,
+			getCleanTreeData
+		});
+		const treeStyle = computed(() => {
+			return props.draggable ? { height: `calc(${cssVar("tree-node-height")} * ${totalLevel.value})` } : null;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("div", mergeProps({ ref: "root" }, unref(attrs), {
+					class: unref(bem).b(),
+					style: treeStyle.value
+				}), [__props.lazy && !!__props.load && (loadStatus.value !== "loaded" || treeData.value.length === 0) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("status"))
+				}, [loadStatus.value === "loading" ? (openBlock(), createBlock(loading_default, { key: 0 })) : loadStatus.value === "error" ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("error")),
+					onClick: onErrorClick
+				}, toDisplayString(unref(t)("error")), 3)) : loadStatus.value === "loaded" && treeData.value.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(t)("noData")), 1)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(treeData.value, (node, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: node.key }, [node.visible ? (openBlock(), createBlock(tree_node_default, {
+						key: 0,
+						index,
+						node
+					}, null, 8, ["index", "node"])) : createCommentVNode("v-if", true)], 64);
+				}), 128))], 16),
+				__props.editable ? (openBlock(), createBlock(popover_default, {
+					key: 0,
+					visible: editPopoverVisible.value,
+					"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => editPopoverVisible.value = $event),
+					theme: "dark",
+					position: "left",
+					reference: editPopoverReference
+				}, {
+					default: withCtx(() => [createVNode(menu_default, {
+						direction: "vertical",
+						theme: "dark",
+						onSelect: onEditPopoverSelect
+					}, {
+						default: withCtx(() => [
+							createVNode(menu_item_default, {
+								value: "addSibling",
+								label: unref(t)("addSibling")
+							}, {
+								icon: withCtx(() => [createVNode(unref(Plus))]),
+								_: 1
+							}, 8, ["label"]),
+							createVNode(menu_item_default, {
+								value: "addChild",
+								label: unref(t)("addChild")
+							}, {
+								icon: withCtx(() => [createVNode(unref(Plus))]),
+								_: 1
+							}, 8, ["label"]),
+							createVNode(menu_item_default, {
+								value: "delete",
+								label: unref(t)("removeNode")
+							}, {
+								icon: withCtx(() => [createVNode(unref(Minus))]),
+								_: 1
+							}, 8, ["label"]),
+							createVNode(menu_item_default, {
+								value: "edit",
+								label: unref(t)("edit")
+							}, {
+								icon: withCtx(() => [createVNode(unref(PencilSquare))]),
+								_: 1
+							}, 8, ["label"])
+						]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["visible"])) : createCommentVNode("v-if", true),
+				__props.draggable ? (openBlock(), createBlock(popover_default, {
+					key: 1,
+					visible: dragPopoverVisible.value,
+					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => dragPopoverVisible.value = $event),
+					theme: "dark",
+					position: "left",
+					reference: dragRef.value
+				}, {
+					default: withCtx(() => [createVNode(menu_default, {
+						theme: "dark",
+						position: "left",
+						direction: "horizontal",
+						onSelect: onDragPopoverSelect
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(dragOptions.value, (option) => {
+							return openBlock(), createBlock(menu_item_default, {
+								key: option.id,
+								value: option.id
+							}, {
+								icon: withCtx(() => [option.icon === "left" ? (openBlock(), createBlock(unref(Left), { key: 0 })) : createCommentVNode("v-if", true), option.icon === "right" ? (openBlock(), createBlock(unref(Right), { key: 1 })) : createCommentVNode("v-if", true)]),
+								_: 2
+							}, 1032, ["value"]);
+						}), 128))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["visible", "reference"])) : createCommentVNode("v-if", true),
+				createVNode(dialog_default, {
+					visible: dialogVisible.value,
+					"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => dialogVisible.value = $event),
+					title: currentEditTitle.value,
+					"before-close": beforeClose,
+					headed: false,
+					"button-variant": "text",
+					onVisibleHook
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(bem).e("input-wrapper")) }, [currentEditType.value === "delete" ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("input-text"))
+					}, toDisplayString(currentEditValue.value), 3)) : (openBlock(), createBlock(input_default, {
+						key: 1,
+						ref: "input",
+						modelValue: currentEditValue.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => currentEditValue.value = $event),
+						placeholder: unref(t)("please")
+					}, null, 8, ["modelValue", "placeholder"]))], 2)]),
+					_: 1
+				}, 8, ["visible", "title"]),
+				createVNode(toast_default, {
+					visible: toastVisible.value,
+					"onUpdate:visible": _cache[4] || (_cache[4] = ($event) => toastVisible.value = $event),
+					title: unref(t)("please")
+				}, null, 8, ["visible", "title"])
+			], 64);
+		};
+	}
+});
+//#endregion
+export { tree_default as default };