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

src/components/shared/SelectInput.vue

@@ -18,14 +18,23 @@ const props = withDefaults(
     option: Record<string, unknown>[];
     optionLabel?: string;
     optionValue?: string;
+    placeholder?: string;
 
+    hideSelected?: boolean;
     readonly?: boolean;
     clearable?: boolean;
     incremental?: boolean;
+    fillInput?: boolean;
 
     rules?: ((value: string) => string | true)[];
   }>(),
-  { option: () => [], optionLabel: 'label', optionValue: 'value' },
+  {
+    option: () => [],
+    optionLabel: 'label',
+    optionValue: 'value',
+    hideSelected: true,
+    fillInput: true,
+  },
 );
 
 defineEmits<{
@@ -53,14 +62,15 @@ watch(
 </script>
 <template>
   <q-select
+    :placeholder="placeholder"
     outlined
     :clearable
     use-input
     emit-value
     map-options
-    hide-selected
+    :hideSelected
     hide-bottom-space
-    :fill-input="!!model"
+    :fill-input="fillInput && !!model"
     :hide-dropdown-icon="readonly"
     input-debounce="0"
     :option-value="optionValue"
@@ -70,7 +80,7 @@ watch(
     :readonly
     :label="label"
     :options="incremental ? option : options"
-    :for="`select-${id}`"
+    :for="`${id}`"
     @filter="
       (val, update) => {
         incremental ? $emit('filter', val, update) : defaultFilter(val, update);
@@ -88,8 +98,8 @@ watch(
       </q-item>
     </template>
 
-    <template v-if="$slots.name" v-slot:selected-item="scope">
-      <slot name="selected-item" :scope="scope"></slot>
+    <template v-if="$slots.selectedItem" v-slot:selected-item="scope">
+      <slot name="selectedItem" :scope="scope"></slot>
     </template>
 
     <template v-if="$slots.option" v-slot:option="scope">