From ea98e135244a4088f40018fd1d40df7515dcd282 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Fri, 13 Sep 2024 09:43:21 +0700
Subject: [PATCH] refactor: styling

---
 src/components/shared/TreeView.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/shared/TreeView.vue b/src/components/shared/TreeView.vue
index 338f02bf..6f3acf49 100644
--- a/src/components/shared/TreeView.vue
+++ b/src/components/shared/TreeView.vue
@@ -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;
     }