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

feat: quatation tree

Browse source
This commit is contained in:
puriphatt 2024-09-16 10:32:06 +07:00
parent 58fd3da83e
commit f7bf9fa91b
4 changed files with 121 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
<template>
<div class="tree-container">
<div v-for="node in nodes" class="tree-item">
<div v-for="(node, i) in nodes" class="tree-item" :key="i">
<slot
v-if="$slots['item']"
name="item"
@ -39,14 +39,19 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
<template v-else>
<div
class="item__content row items-center"
class="item__content row items-center no-wrap"
@click="open = expandable ? !open : open"
>
<label class="item__checkbox" @click.stop>
<label class="flex items-center item__checkbox" @click.stop>
<input type="checkbox" v-model="node.selected" />
</label>
<Icon v-if="dec && dec.icon" :icon="dec.icon" class="item__icon" />
<div
class="item__icon flex items-center justify-center"
:style="`background: ${dec?.bg}; color: ${dec?.fg}`"
>
<Icon v-if="dec && dec.icon" :icon="dec.icon" />
</div>
<div class="column">
<span class="item__title">
@ -58,17 +63,23 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
</div>
</div>
</template>
<q-separator v-if="!level"></q-separator>
<div class="q-pl-lg" v-if="open">
<TreeView
class="item__children"
v-if="node.children"
v-model:nodes="node.children"
:level="(level || 0) + 1"
:expandable
:decoration
/>
</div>
<transition name="slide">
<div
class="q-pl-lg q-pt-sm"
v-if="open && node.children && node.children.length > 0"
>
<TreeView
class="item__children"
v-if="node.children"
v-model:nodes="node.children"
:level="(level || 0) + 1"
:expandable
:decoration
/>
</div>
</transition>
</div>
</div>
</template>
@ -78,7 +89,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
display: flex;
flex-direction: column;
user-select: none;
gap: 1rem;
gap: 8px;
& .tree-item {
& .item__content {
@ -97,11 +108,13 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
& .item__icon {
margin-right: 1rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
& .item__title {
font-weight: 600;
color: var(--brand-1);
}
& .item__subtitle {
@ -110,4 +123,18 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
}
}
}
.slide-enter-active {
transition: all 0.1s ease-out;
}
.slide-leave-active {
transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-enter-from,
.slide-leave-to {
transform: translateY(-20px);
opacity: 0;
}
</style>