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

refactor: styling

Browse source
This commit is contained in:
Methapon Metanipat 2024-09-13 09:43:21 +07:00
parent 4cd0fdc085
commit ea98e13524
1 changed files with 19 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,12 +19,9 @@ type Props = {
};
const props = defineProps<Props>();
const currentStyle = props.decoration?.find((v) => {
return v.level === (props.level || 0);
});
const nodes = defineModel<Node[]>('nodes', { required: true });
const dec = props.decoration?.find((v) => v.level === (props.level || 0));
</script>
<template>
@ -35,18 +32,17 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
name="item"
:data="{ node, onclick: () => (node.selected = !node.selected) }"
/>
<template v-else>
<label class="row items-center">
<label class="item__content row items-center">
<input
class="item__checkbox"
type="checkbox"
v-model="node.selected"
/>
<Icon
v-if="currentStyle?.icon"
:icon="currentStyle.icon"
class="item__icon"
/>
<Icon v-if="dec && dec.icon" :icon="dec.icon" class="item__icon" />
<div class="column">
<span class="item__title">
{{ node[keyTitle || 'title'] || 'No Title' }}
@ -57,8 +53,10 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
</div>
</label>
</template>
<div class="q-pl-xl">
<TreeView
class="item__children"
v-if="node.children"
v-model:nodes="node.children"
:level="(level || 0) + 1"
@ -73,9 +71,19 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
.tree-container {
display: flex;
flex-direction: column;
user-select: none;
gap: 1rem;
& .tree-item {
& .item__content {
padding: 0.2rem 0.5rem;
&:hover {
background: hsla(0 0% 0% / 0.1);
border-radius: var(--radius-2);
}
}
& .item__checkbox {
margin-right: 1rem;
}