feat: add tree spacing and move arrage outside

src/components/shared/TreeView.vue

@@ -107,14 +107,7 @@ function toggleExpand(node: Node, ancestor?: []) {
         :data="{ node, toggleExpand, toggleCheck }"
       />
 
-      <template v-else>
+      <div class="row items-center" v-else>
-        <div
-          class="item__content row items-center no-wrap"
-          :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"
@@ -142,7 +135,13 @@ function toggleExpand(node: Node, ancestor?: []) {
             @click.stop="$emit('moveDown', node)"
           />
         </div>
-
+        <div
+          class="item__content row items-center no-wrap col"
+          :class="{ active: selectedNode?.includes(node) }"
+          @click="
+            () => (selectable ? $emit('select', node) : toggleExpand(node))
+          "
+        >
           <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;