chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: add check behaviour

Browse source
This commit is contained in:
Methapon Metanipat 2024-09-18 18:02:18 +07:00
parent d057499418
commit 479b933a54
1 changed files with 33 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/shared/TreeView.vue
View file

@ -24,7 +24,27 @@ type Props = {
const props = defineProps<Props>();
const nodes = defineModel<Node[]>('nodes', { required: true });
const emits = defineEmits<{ (e: 'checked'): void }>();
const dec = props.decoration?.find((v) => v.level === (props.level || 0));
function recursiveDeselect(node: Node) {
if (node.children) {
node.children.forEach((v) => {
v.selected = false;
recursiveDeselect(v);
});
}
}
function toggleCheck(node: Node) {
node.selected = !node.selected;
if (node.selected === false) recursiveDeselect(node);
if (node.selected === true) emits('checked');
}
function toggleExpand(node: Node) {
node.opened = !node.opened;
}
</script>
<template>
@ -33,16 +53,20 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
<slot
v-if="$slots['item']"
name="item"
:data="{ node, onclick: () => (node.selected = !node.selected) }"
:data="{ node, toggleExpand, toggleCheck }"
/>
<template v-else>
<div
class="item__content row items-center no-wrap"
@click="node.opened = expandable ? !node.opened : node.opened"
@click="toggleExpand(node)"
>
<label class="flex items-center item__checkbox" @click.stop>
<input type="checkbox" v-model="node.selected" />
<input
type="checkbox"
v-model="node.selected"
@click="toggleCheck(node)"
/>
</label>
<div
@ -73,6 +97,12 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
class="item__children"
v-if="node.children"
v-model:nodes="node.children"
@checked="
() => {
node.selected = true;
$emit('checked');
}
"
:level="(level || 0) + 1"
:expandable
:decoration