vuestic-ui
Version:
Vue 3 UI Framework
183 lines (182 loc) • 6.07 kB
JavaScript
import { computed, toRefs, ref, provide } from "vue";
import { b as useTreeHelpers } from "./useTreeHelpers.mjs";
import { T as TreeViewKey } from "../types.mjs";
import { u as useTreeKeyboardNavigation } from "./useTreeKeyboardNavigation.mjs";
import { u as useColors } from "../../../composables/useColors.mjs";
import { b as useStateful } from "../../../composables/useStateful.mjs";
const useTreeView = (props, emit) => {
const { getColor } = useColors();
const colorComputed = computed(() => getColor(props.color));
const isLeafSelectionComputed = computed(() => props.selectionType === "leaf");
const {
getText,
getValue,
getChecked,
getTrackBy,
getChildren,
getDisabled,
getExpanded,
iterateNodes,
getNodeProperty
} = useTreeHelpers(props);
const { nodes, expandAll, filter, filterMethod, textBy } = toRefs(props);
const { valueComputed: expandedList } = useStateful(props, emit, "expanded");
const { valueComputed: checkedList } = useStateful(props, emit, "checked");
const selectedNode = ref();
const selectedNodeComputed = computed({
get: () => selectedNode.value,
set: (node) => {
const value = getValue(node);
if (selectedNode.value !== value) {
selectedNode.value = value;
emit("update:selected", node);
}
}
});
const updateModel = (model, values, state) => {
if (state) {
model.value = model.value.concat(values).filter((value, idx, self) => self.indexOf(value) === idx);
} else {
model.value = model.value.filter((v) => !values.includes(v));
}
};
const toggleCheckbox = (node, state) => {
let stateValue = state === null ? true : state;
if (state && node.indeterminate) {
stateValue = false;
}
const values = [getValue(node)];
if (isLeafSelectionComputed.value && node.hasChildren) {
const toggleChildren = (nodes2) => {
nodes2.forEach((node2) => {
if (node2.disabled) {
return;
}
const children = getChildren(node2);
if (children.length) {
toggleChildren(children);
}
values.push(getValue(node2));
});
};
toggleChildren(getChildren(node));
}
updateModel(checkedList, values, stateValue);
};
const toggleNode = (node) => {
node.expanded = !node.expanded;
};
const createNode = ({ node, level, children = [], computedFilterMethod: computedFilterMethod2 }) => {
var _a;
const valueBy = getValue(node);
let matchesFilter = true;
const hasChildren = !!children.length;
let indeterminate = false;
let checked = checkedList.value.includes(valueBy) || false;
if (isLeafSelectionComputed.value && hasChildren) {
const isAllChildrenChecked = children.every((c) => c.checked);
checked = isAllChildrenChecked;
indeterminate = !isAllChildrenChecked && children.some((c) => c.indeterminate || c.checked);
if (indeterminate) {
checked = null;
}
}
if (filter.value) {
matchesFilter = (children == null ? void 0 : children.some((c) => c.matchesFilter)) || ((_a = computedFilterMethod2.value) == null ? void 0 : _a.call(computedFilterMethod2, node, filter.value, textBy.value));
}
return {
...node,
level,
checked,
children,
get disabled() {
return getDisabled(node) || false;
},
get expanded() {
const expandKey = props.expandedBy;
return expandKey in node ? node[expandKey] : expandedList.value.includes(valueBy) || false;
},
set expanded(value) {
const expandKey = props.expandedBy;
node[expandKey] = value;
if (hasChildren) {
updateModel(expandedList, [getValue(node)], value);
}
},
hasChildren,
matchesFilter,
indeterminate
};
};
const computedFilterMethod = computed(() => {
if (filterMethod == null ? void 0 : filterMethod.value) {
return filterMethod.value;
}
return (node, filter2) => getText(node).toLowerCase().includes(filter2.toLowerCase());
});
const buildTree = (nodes2, level = 0) => nodes2.map((node) => {
const treeItemChildren = getChildren(node);
if (treeItemChildren.length) {
const children = buildTree(treeItemChildren, level + 1);
return createNode({ node, level, children, computedFilterMethod });
}
return createNode({ node, level, computedFilterMethod });
});
const getFilteredNodes = (nodes2) => nodes2.filter((node) => {
if (node.children) {
node.children = getFilteredNodes(node.children);
}
if (node.children.length === 0) {
node.hasChildren = false;
}
return node.matchesFilter;
});
const { handleKeyboardNavigation } = useTreeKeyboardNavigation(props, { emit, toggleCheckbox, toggleNode });
provide(TreeViewKey, {
selectedNodeComputed,
colorComputed,
iconBy: props.iconBy,
selectable: props.selectable,
expandNodeBy: props.expandNodeBy,
getText,
getValue,
getTrackBy,
toggleNode,
toggleCheckbox,
getNodeProperty,
handleKeyboardNavigation
});
const treeItems = computed(() => buildTree(nodes.value));
const checkForInitialValues = () => {
const expandedValues = [];
const checkedValues = [];
iterateNodes(nodes.value, (node) => {
if (expandAll.value) {
expandedValues.push(getValue(node));
} else {
getExpanded(node) && expandedValues.push(getValue(node));
}
if (getChecked(node)) {
checkedValues.push(getValue(node));
}
});
if (expandedValues.length) {
updateModel(expandedList, expandedValues, true);
}
if (checkedValues.length) {
updateModel(checkedList, checkedValues, true);
}
};
checkForInitialValues();
return {
treeItems: computed(() => getFilteredNodes(treeItems.value)),
getText,
getTrackBy,
toggleCheckbox
};
};
const useTreeView$1 = useTreeView;
export {
useTreeView$1 as u
};
//# sourceMappingURL=useTreeView.mjs.map