1,456th Commit

Shyam-Chen · May 11, 2024 · 4853fc4 · 4853fc4
1 parent a32f911
commit 4853fc4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 43 deletions.
diff --git a/ui/src/components/chip-field/ChipField.vue b/ui/src/components/chip-field/ChipField.vue
@@ -11,14 +11,26 @@ defineOptions({
 
 const valueModel = defineModel<string[]>('value', { default: [] });
 
-defineProps<{
-  label?: string;
-  required?: boolean;
-  invalid?: boolean | string;
-  help?: string;
-  placeholder?: string;
-  disabled?: boolean;
-}>();
+withDefaults(
+  defineProps<{
+    label?: string;
+    required?: boolean;
+    invalid?: boolean | string;
+    help?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    closable?: boolean;
+  }>(),
+  {
+    label: '',
+    required: false,
+    invalid: undefined,
+    help: '',
+    placeholder: '',
+    disabled: false,
+    closable: true,
+  },
+);
 
 const emit = defineEmits<{
   (evt: 'input', val: string): void;
@@ -92,13 +104,7 @@ defineExpose({
       ]"
       @click="flux.onFocus"
     >
-      <Chip
-        v-for="(val, idx) in value"
-        :key="val"
-        closable
-        :disabled="disabled"
-        @close="flux.onClose(idx)"
-      >
+      <Chip v-for="(val, idx) in value" :key="val" :closable :disabled @close="flux.onClose(idx)">
         {{ val }}
       </Chip>
 
@@ -109,8 +115,8 @@ defineExpose({
         v-bind="$attrs"
         class="outline-none w-fit bg-inherit"
         :class="{ 'cursor-not-allowed': disabled }"
-        :placeholder="placeholder"
-        :disabled="disabled"
+        :placeholder
+        :disabled
         @input.stop="emit('input', flux.text)"
         @keyup.enter="flux.onEnter"
         @keyup.delete="flux.onDelete"

diff --git a/ui/src/components/tree-select/TreeSelect.vue b/ui/src/components/tree-select/TreeSelect.vue
@@ -34,13 +34,14 @@ const status = ref(false);
         "
         :invalid="!!invalid"
         readonly
-        :placeholder="'Please select'"
-        @click="status = !status"
+        :placeholder="valueModel.length ? '' : 'Please select'"
+        :closable="false"
+        @focus="status = !status"
         @append="status = !status"
       />
 
       <template #content>
-        <div class="p-2">
+        <div class="p-2 max-h-50 overflow-auto">
           <Tree v-model="valueModel" :nodes="options" multiple />
         </div>
       </template>

diff --git a/ui/src/components/tree/Tree.vue b/ui/src/components/tree/Tree.vue
@@ -20,34 +20,21 @@ const emit = defineEmits<{
   (evt: 'select', val: Node): void;
 }>();
 
-const createTree = (
-  arr: Node[] = [],
-  level = 1,
-  status = false,
-): Array<Node & { level?: number; status?: boolean }> => {
+const createTree = (arr: Node[] = [], level = 1): Node[] => {
   return [...arr].map((item) => {
-    if (item.children) {
-      return {
-        ...item,
-        level,
-        status,
-        children: createTree(item.children, level + 1),
-        checked: props.multiple ? false : undefined,
-        indeterminate: props.multiple ? false : undefined,
-      };
+    const selected = props.multiple
+      ? (defaultModel.value as Node['value'][]).includes(item.value)
+      : undefined;
+
+    if (item.children?.length) {
+      return { ...item, level, children: createTree(item.children, level + 1), checked: selected };
     }
 
-    return {
-      ...item,
-      level,
-      status,
-      checked: props.multiple ? false : undefined,
-      indeterminate: props.multiple ? false : undefined,
-    };
+    return { ...item, level, checked: selected };
   });
 };
 
-const nodesRef = ref<Array<Node & { level?: number; status?: boolean }>>([]);
+const nodesRef = ref<Node[]>([]);
 
 watch(
   () => props.nodes,
@@ -138,7 +125,7 @@ watch(
     getCheckedValues(values, nodesRef.value);
     defaultModel.value = values;
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
 const onToggleAll = (nodes: Node[], status: boolean) => {