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