fix(tree-components): add default indent props (#3613)

Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Apr 25, 2024 · 3960d38 · 3960d38 · vercel · Apr 25, 2024
1 parent 12c4cfa
commit 3960d38
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/mirinae/src/data-display/tree/tree-view/PTreeItem.vue b/packages/mirinae/src/data-display/tree/tree-view/PTreeItem.vue
@@ -16,6 +16,7 @@ interface Props {
     node: TreeNode;
     selectedId?: string;
     isOpen?: boolean;
+    useDefaultIndent?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -78,13 +79,13 @@ onMounted(() => {
                    :style="{ 'padding-left': `${0.125 + (props.node.depth || 0) * 1}rem`}"
                    @click.native="handleClickItem"
         >
-            <div v-if="isExpandable(slots)"
+            <div v-if="isExpandable(slots) || props.useDefaultIndent"
                  class="toggle-icon"
             >
                 <p-spinner v-if="props.node.loading"
                            size="sm"
                 />
-                <p-i v-else
+                <p-i v-else-if="isExpandable(slots)"
                      :name="state.toggleIcon"
                      width="1rem"
                      height="1rem"
@@ -118,6 +119,10 @@ onMounted(() => {
             @apply bg-blue-100 cursor-pointer;
         }
 
+        .toggle-icon {
+            min-width: 1rem;
+        }
+
         &.selected {
             @apply bg-blue-200;
         }

diff --git a/packages/mirinae/src/data-display/tree/tree-view/PTreeView.vue b/packages/mirinae/src/data-display/tree/tree-view/PTreeView.vue
@@ -22,6 +22,7 @@ interface Props {
     treeData: TreeNode[];
     treeDisplayMap?: TreeDisplayMap;
     selectedId?: string;
+    useDefaultIndent?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,6 +63,7 @@ const handleUpdateTreeDisplayMap = (id: string|undefined, isOpen: boolean) => {
                      :node="item"
                      :selected-id="selectedId"
                      :is-open="state.proxyTreeDisplayMap[item.id]?.isOpen"
+                     :use-default-indent="useDefaultIndent"
                      @click-toggle="handleClickToggle"
                      @click-item="handleClickItem"
                      @update:is-open="handleUpdateTreeDisplayMap(item.id, $event)"
@@ -77,6 +79,7 @@ const handleUpdateTreeDisplayMap = (id: string|undefined, isOpen: boolean) => {
                 <p-tree-view :tree-data="item.children"
                              :tree-display-map.sync="state.proxyTreeDisplayMap"
                              :selected-id="selectedId"
+                             :use-default-indent="useDefaultIndent"
                              @click-toggle="handleClickToggle"
                              @click-item="handleClickItem"
                 >