refactor: component dialog, select input, select zone, tree view

src/components/shared/TreeView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
 import { computed } from 'vue';
+import DeleteButton from '../button/DeleteButton.vue';
 
 type Node = {
   [key: string]: any;
@@ -17,10 +18,14 @@ type Props = {
   level?: number;
   keyTitle?: string;
   keySubtitle?: string;
-  expandable?: boolean;
-  hideCheckBox?: boolean;
   iconSize?: string;
+
+  hideCheckBox?: boolean;
+  expandable?: boolean;
   selectable?: boolean;
+  deleteable?: boolean;
+  movable?: boolean;
+
   selectedNode?: Node[];
   ancestorNode?: Node[];
   decoration?: {
@@ -38,6 +43,9 @@ const emits = defineEmits<{
   (e: 'checked'): void;
   (e: 'select', node: Node, ancestor?: Node[]): void;
   (e: 'open', node: Node, ancestor?: Node[]): void;
+  (e: 'delete', node: Node): void;
+  (e: 'moveUp', node: Node): void;
+  (e: 'moveDown', node: Node): void;
 }>();
 
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
@@ -90,6 +98,34 @@ function toggleExpand(node: Node, ancestor?: []) {
             () => (selectable ? $emit('select', node) : toggleExpand(node))
           "
         >
+          <div v-if="!level" style="margin-right: var(--size-1)">
+            <q-btn
+              id="btn-up"
+              for="btn-up"
+              icon="mdi-arrow-up"
+              size="sm"
+              dense
+              flat
+              round
+              :disable="i === 0"
+              style="color: hsl(var(--text-mute-2))"
+              @click.stop="$emit('moveUp', node)"
+            />
+            <q-btn
+              id="btn-down"
+              for="btn-down"
+              icon="mdi-arrow-down"
+              size="sm"
+              dense
+              flat
+              round
+              class="q-mx-sm"
+              :disable="i === nodes.length - 1"
+              style="color: hsl(var(--text-mute-2))"
+              @click.stop="$emit('moveDown', node)"
+            />
+          </div>
+
           <div style="width: var(--size-6); margin-right: var(--size-1)">
             <div
               v-if="level !== maxLevel"
@@ -154,6 +190,13 @@ function toggleExpand(node: Node, ancestor?: []) {
               {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
             </span>
           </div>
+
+          <DeleteButton
+            v-if="!level"
+            class="q-ml-auto"
+            icon-only
+            @click.stop="$emit('delete', node)"
+          />
         </div>
       </template>
 
@@ -208,6 +251,7 @@ function toggleExpand(node: Node, ancestor?: []) {
           />
         </div>
       </transition>
+      <q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
     </div>
   </div>
 </template>