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

feat: add tree spacing and move arrage outside

Browse source
This commit is contained in:
Methapon Metanipat 2024-10-15 10:23:02 +07:00
parent 7f242ea2ad
commit 4dd6002753
1 changed files with 32 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -107,42 +107,41 @@ function toggleExpand(node: Node, ancestor?: []) {
:data="{ node, toggleExpand, toggleCheck }"
/>
<template v-else>
<div class="row items-center" v-else>
<div v-if="!level && movable" style="width: var(--size-16)">
<q-btn
id="btn-up"
for="btn-up"
icon="mdi-arrow-up"
size="sm"
dense
flat
round
:disable="i === 0"
style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveUp', node)"
/>
<q-btn
id="btn-down"
for="btn-down"
icon="mdi-arrow-down"
size="sm"
dense
flat
round
class="q-mx-sm"
:disable="i === nodes.length - 1"
style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveDown', node)"
/>
</div>
<div
class="item__content row items-center no-wrap"
class="item__content row items-center no-wrap col"
:class="{ active: selectedNode?.includes(node) }"
@click="
() => (selectable ? $emit('select', node) : toggleExpand(node))
"
>
<div v-if="!level && movable" style="width: var(--size-16)">
<q-btn
id="btn-up"
for="btn-up"
icon="mdi-arrow-up"
size="sm"
dense
flat
round
:disable="i === 0"
style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveUp', node)"
/>
<q-btn
id="btn-down"
for="btn-down"
icon="mdi-arrow-down"
size="sm"
dense
flat
round
class="q-mx-sm"
:disable="i === nodes.length - 1"
style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveDown', node)"
/>
</div>
<div style="width: var(--size-6); margin-right: var(--size-1)">
<div
v-if="level !== maxLevel"
@ -219,11 +218,12 @@ function toggleExpand(node: Node, ancestor?: []) {
@click.stop="$emit('delete', node)"
/>
</div>
</template>
</div>
<transition name="slide">
<div
v-if="node.opened && node.children && node.children.length > 0"
:class="{ 'q-pl-xl': movable }"
class="tree-children"
>
<TreeView
@ -285,7 +285,7 @@ function toggleExpand(node: Node, ancestor?: []) {
</div>
</template>
<style lang="css">
<style lang="css" scoped>
.tree-container {
display: flex;
flex-direction: column;