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

refactor(tree): functionality

Browse source
This commit is contained in:
Methapon Metanipat 2024-09-13 09:50:27 +07:00
parent ea98e13524
commit 487347d538
1 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import { ref } from 'vue';
type Node = { type Node = {
[key: string]: any; [key: string]: any;
selected?: boolean; selected?: boolean;
@ -10,6 +11,8 @@ type Props = {
level?: number; level?: number;
keyTitle?: string; keyTitle?: string;
keySubtitle?: string; keySubtitle?: string;
collapse?: boolean;
expandable?: boolean;
decoration?: { decoration?: {
level?: number; level?: number;
bg?: string; bg?: string;
@ -20,6 +23,7 @@ type Props = {
const props = defineProps<Props>(); const props = defineProps<Props>();
const nodes = defineModel<Node[]>('nodes', { required: true }); const nodes = defineModel<Node[]>('nodes', { required: true });
const open = ref<boolean>(!props.collapse);
const dec = props.decoration?.find((v) => v.level === (props.level || 0)); const dec = props.decoration?.find((v) => v.level === (props.level || 0));
</script> </script>
@ -34,12 +38,13 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
/> />
<template v-else> <template v-else>
<label class="item__content row items-center"> <div
<input class="item__content row items-center"
class="item__checkbox" @click="open = expandable ? !open : open"
type="checkbox" >
v-model="node.selected" <label class="item__checkbox" @click.stop>
/> <input type="checkbox" v-model="node.selected" />
</label>
<Icon v-if="dec && dec.icon" :icon="dec.icon" class="item__icon" /> <Icon v-if="dec && dec.icon" :icon="dec.icon" class="item__icon" />
@ -51,15 +56,16 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
{{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }} {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
</span> </span>
</div> </div>
</label> </div>
</template> </template>
<div class="q-pl-xl"> <div class="q-pl-lg" v-if="open">
<TreeView <TreeView
class="item__children" class="item__children"
v-if="node.children" v-if="node.children"
v-model:nodes="node.children" v-model:nodes="node.children"
:level="(level || 0) + 1" :level="(level || 0) + 1"
:expandable
:decoration :decoration
/> />
</div> </div>
@ -76,7 +82,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
& .tree-item { & .tree-item {
& .item__content { & .item__content {
padding: 0.2rem 0.5rem; padding: 0.1rem 0.5rem;
&:hover { &:hover {
background: hsla(0 0% 0% / 0.1); background: hsla(0 0% 0% / 0.1);
@ -85,6 +91,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
} }
& .item__checkbox { & .item__checkbox {
padding: 0.1rem 0.5rem;
margin-right: 1rem; margin-right: 1rem;
} }