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

refactor: tree styling

Browse source
This commit is contained in:
Methapon Metanipat 2024-09-30 16:54:50 +07:00
parent e4b9e186a8
commit 5754db419e
1 changed files with 36 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -71,19 +71,11 @@ function toggleExpand(node: Node, ancestor?: []) {
<div
class="tree-container"
:class="{
'q-pl-lg': level && level > 0,
'q-pl-xl': level && level > 0,
'last-children': level && level === maxLevel,
}"
>
<div
v-for="(node, i) in nodes"
class="tree-item"
:class="{
'q-pt-sm': level !== 0 && level !== maxLevel && i !== 0,
'q-pt-xs': level === maxLevel && i === 0,
}"
:key="i"
>
<div v-for="(node, i) in nodes" class="tree-item" :key="i">
<slot
v-if="$slots['item']"
name="item"
@ -98,29 +90,31 @@ function toggleExpand(node: Node, ancestor?: []) {
() => (selectable ? $emit('select', node) : toggleExpand(node))
"
>
<div
v-if="level !== maxLevel"
class="q-mr-md"
:style="`color: ${
!node.displayDropIcon &&
(!node.children || node.children.length === 0)
? 'transparent'
: $q.dark.isActive
? 'var(--gray-7)'
: 'var(--gray-4)'
}`"
>
<q-icon
name="mdi-chevron-down-circle"
size="sm"
:style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
@click.stop="
<div style="width: var(--size-6); margin-right: var(--size-1)">
<div
v-if="level !== maxLevel"
class="q-mr-md"
:style="`color: ${
!node.displayDropIcon &&
(!node.children || node.children.length === 0)
? $emit('select', node)
: toggleExpand(node)
"
/>
? 'transparent'
: $q.dark.isActive
? 'var(--gray-7)'
: 'var(--gray-4)'
}`"
>
<q-icon
name="mdi-chevron-down-circle"
size="sm"
:style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
@click.stop="
!node.displayDropIcon &&
(!node.children || node.children.length === 0)
? $emit('select', node)
: toggleExpand(node)
"
/>
</div>
</div>
<label
@ -131,6 +125,7 @@ function toggleExpand(node: Node, ancestor?: []) {
<input
type="checkbox"
v-model="node.checked"
:style="`accent-color: var(--blue-7)`"
@click="toggleCheck(node)"
/>
</label>
@ -161,10 +156,12 @@ function toggleExpand(node: Node, ancestor?: []) {
</div>
</div>
</template>
<q-separator v-if="!level" class="q-mt-sm"></q-separator>
<transition name="slide">
<div v-if="node.opened && node.children && node.children.length > 0">
<div
v-if="node.opened && node.children && node.children.length > 0"
class="tree-children"
>
<TreeView
:iconSize
:hideCheckBox
@ -220,16 +217,16 @@ function toggleExpand(node: Node, ancestor?: []) {
display: flex;
flex-direction: column;
user-select: none;
gap: 8px;
gap: var(--size-2);
& .tree-item {
& .item__content {
border: solid 1px transparent;
border-radius: var(--radius-2);
padding: 0.1rem 0.5rem;
&:hover {
background: hsla(0 0% 0% / 0.1);
border-radius: var(--radius-2);
}
}
@ -254,6 +251,10 @@ function toggleExpand(node: Node, ancestor?: []) {
color: hsla(var(--text-mute-2));
}
& .tree-children {
padding-top: var(--size-2);
}
& .active {
border-radius: var(--radius-2);
border: solid 1px hsl(var(--info-bg));
@ -262,10 +263,6 @@ function toggleExpand(node: Node, ancestor?: []) {
}
}
.last-children {
margin-left: 50px;
}
.slide-enter-active {
transition: all 0.1s ease-out;
}