@itfin/components 1.5.1 → 1.5.3

package/src/components/table/TableHeader.vue

@@ -29,90 +29,88 @@
           <div v-if="visibleHeader" group="tablecolumns"
                class="table-header"
                @drop="reorderColumns"
-               v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
-            <div class="d-flex align-items-center gap-1">
-              <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" :disabled="noColumnMenu">
-                <template #button>
-                  <div class="d-flex align-items-start justify-content-between">
-                    <div class="itf-table2__header-title d-flex w-100 align-items-center" :title="getTitle(column.title)">
-                      <itf-icon class="itf-table2__header-icon" new v-if="column.icon" :name="column.icon"></itf-icon>
-                      <div class="flex-grow-1 w-100 itf-table2__title-container d-flex align-items-center" :class="{'justify-content-end': column.align === 'end'}">
-                        <div class="itf-table2__title text-truncate">{{getTitle(column.title)}}</div>
-                        <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" v-text="column.prefix" />
-                      </div>
+               v-draggable="{ dragHandleClass: null, handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
+            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" :disabled="noColumnMenu">
+              <template #button>
+                <div class="itf-table2__header-title d-flex w-100 align-items-center" :title="getTitle(column.title)">
+                  <itf-icon class="itf-table2__header-icon" new v-if="column.icon" :name="column.icon"></itf-icon>
+                  <div class="flex-grow-1 w-100 itf-table2__title-container d-flex align-items-center" :class="{'justify-content-end': column.align === 'end'}">
+                    <div class="itf-table2__title text-truncate">
+                      {{getTitle(column.title)}}
+                      <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" :class="{'text-end': column.align === 'end'}" v-text="column.prefix" />
                     </div>
-                    <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
                   </div>
-                </template>
-                <div class="dropdown-header">
-                  {{$t('components.table.actions')}}
                 </div>
-
-                <div v-if="column.groupable">
-                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                    <itf-icon name="episodes" :size="16" class="me-1" />
-                    {{$t('components.table.groupBy')}}
-                  </a>
+                <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
+              </template>
+              <div class="dropdown-header">
+                {{$t('components.table.actions')}}
+              </div>
+
+              <div v-if="column.groupable">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                  <itf-icon name="episodes" :size="16" class="me-1" />
+                  {{$t('components.table.groupBy')}}
+                </a>
+              </div>
+              <div>
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="togglePinned(n)">
+                  <itf-icon v-if="column.pinned" name="pin" new />
+                  <itf-icon v-else name="pin" new />
+
+                  <span v-if="column.pinned">{{$t('components.table.unfreezeColumn')}}</span>
+                  <span v-else>{{$t('components.table.freezeColumn')}}</span>
+                </a>
+              </div>
+              <div v-if="showAddColumn">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="hideColumn(n)">
+                  <itf-icon name="hide" new />
+
+                  {{$t('components.table.hideColumn')}}
+                </a>
+              </div>
+              <div v-if="column.filtrable">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="$emit('filter', column)">
+                  <itf-icon name="filter" new />
+
+                  {{$t('components.table.filter')}}
+                </a>
+              </div>
+              <div v-if="canMoveColumn(1, column)">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(1, column)">
+                  <itf-icon name="move-right" new />
+
+                  {{$t('components.table.moveRight')}}
+                </a>
+              </div>
+
+              <div v-if="canMoveColumn(-1, column)">
+                <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(-1, column)">
+                  <itf-icon name="move-left" new />
+
+                  {{$t('components.table.moveLeft')}}
+                </a>
+              </div>
+
+              <template v-if="column.sortable">
+                <div class="dropdown-header">
+                  {{$t('components.table.sorting')}}
                 </div>
                 <div>
-                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="togglePinned(n)">
-                    <itf-icon v-if="column.pinned" name="pin" new />
-                    <itf-icon v-else name="pin" new />
-
-                    <span v-if="column.pinned">{{$t('components.table.unfreezeColumn')}}</span>
-                    <span v-else>{{$t('components.table.freezeColumn')}}</span>
-                  </a>
-                </div>
-                <div v-if="showAddColumn">
-                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="hideColumn(n)">
-                    <itf-icon name="hide" new />
-
-                    {{$t('components.table.hideColumn')}}
-                  </a>
-                </div>
-                <div v-if="column.filtrable">
-                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="$emit('filter', column)">
-                    <itf-icon name="filter" new />
-
-                    {{$t('components.table.filter')}}
+                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'asc')">
+                    <itf-icon name="sort-asc" new />
+                    {{$t('components.table.sortAscending')}}
                   </a>
                 </div>
-                <div v-if="canMoveColumn(1, column)">
-                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(1, column)">
-                    <itf-icon name="move-right" new />
-
-                    {{$t('components.table.moveRight')}}
-                  </a>
-                </div>
-
-                <div v-if="canMoveColumn(-1, column)">
-                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="moveColumn(-1, column)">
-                    <itf-icon name="move-left" new />
-
-                    {{$t('components.table.moveLeft')}}
+                <div>
+                  <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'desc')">
+                    <itf-icon name="sort-desc" new />
+                    {{$t('components.table.sortDescending')}}
                   </a>
                 </div>
-
-                <template v-if="column.sortable">
-                  <div class="dropdown-header">
-                    {{$t('components.table.sorting')}}
-                  </div>
-                  <div>
-                    <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'asc')">
-                      <itf-icon name="sort-asc" new />
-                      {{$t('components.table.sortAscending')}}
-                    </a>
-                  </div>
-                  <div>
-                    <a class="dropdown-item d-flex align-items-center gap-1"  href="javascript:;" @click="sortBy(column, 'desc')">
-                      <itf-icon name="sort-desc" new />
-                      {{$t('components.table.sortDescending')}}
-                    </a>
-                  </div>
-                </template>
-              </itf-dropdown>
+              </template>
               <slot :name="`header.${column.property}.after`" v-bind="{ column }"></slot>
-            </div>
+            </itf-dropdown>
             <div v-if="columnSorting" v-drag-handle class="itf-table2__drag-column">
               <svg width="35" height="23" viewBox="0 0 35 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g filter="url(#filter0_d_1081_25763)">
@@ -200,6 +198,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop(Boolean) sortAsString;
   @Prop() idProperty;
   @Prop() indicatorType;
 
@@ -421,8 +420,10 @@ class itfTableHeader extends Vue {
   }
 
   sortBy(column, order) {
-    let sort = order === 'desc' ? `-${column.property}` : column.property;
-    console.info(sort);
+    let sort = { [column.property]: order };
+    if (this.sortAsString) {
+      sort = order === 'desc' ? `-${column.property}` : column.property;
+    }
     this.$emit('update:sorting', sort);
   }
 }

package/src/components/table/TableRowToggle.vue

@@ -2,7 +2,10 @@
   <div>
     <div @click.prevent.stop="toggle" class="d-flex align-items-center flex-nowrap" :class="{'active-toggle': visible}">
       <div class="item-toggle text-muted">
-        <template v-if="visible && expanded">
+        <template v-if="visible && loading">
+          <div class="itf-spinner"></div>
+        </template>
+        <template v-else-if="visible && expanded">
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                width="16" height="16" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 <path d="M184.7,413.1l2.1-1.8l156.5-136c5.3-4.6,8.6-11.5,8.6-19.2c0-7.7-3.4-14.6-8.6-19.2L187.1,101l-2.6-2.3
@@ -23,6 +26,10 @@
   </div>
 </template>
 <style lang="scss" scoped>
+.itf-spinner {
+  width: 1rem;
+  height: 1rem;
+}
 .active-toggle {
   cursor: pointer;
 }
@@ -43,6 +50,7 @@ export default @Component({
 class itfTableRowToggle extends Vue {
   @Prop(Boolean) expanded;
   @Prop(Boolean) visible;
+  @Prop(Boolean) loading;
 
   toggle() {
     this.$emit('toggle');

package/src/components/table/TableRows.vue

@@ -25,6 +25,22 @@
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
               <span v-else-if="indicatorType === 'checkbox'"><itf-checkbox :disabled="item.isDisabled" :value="item[idProperty]" /></span>
+              <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
+                <template v-if="subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length">
+                  <template v-if="item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item)">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
+                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+                    </svg>
+                  </template>
+                  <template v-else>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16">
+                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+                      <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/>
+                    </svg>
+                  </template>
+                </template>
+              </a>
             </div>
           </div>
           <div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
@@ -35,35 +51,35 @@
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
                 :class="{[column.cssClass]: !!column.cssClass, 'justify-content-end': column.align === 'end', 'sticky': column.pinned && !getIsMobileView(), 'last-sticky-column': k === lastPinnedIndex && !getIsMobileView(), 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
-                <div class="table-view-item-value-content" :class="{'px-2': !(column.editable && editable), 'py-1': (column.editable && editable)}">
-                  <slot
-                    :name="`column.${column.property}`"
-                    :toggle="() => $emit('toggle', item)"
-                    :hasSubitems="!!(subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length)"
-                    :isExpanded="!!(item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item))"
-                    :level="level" :editable="column.editable && editable" :item="item" :column="column" :updateFields="(val) => updateValues(item, val, n, column)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
-                    <template v-if="column.editable && editable && (!editableProperty || item[editableProperty])">
-                      <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
-                        <itf-text-field class="w-100" v-if="column.type === 'text'" :postfix="column.postfix" :maxlength="column.maxlength" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-text-field class="w-100" v-if="column.type === 'number'" :postfix="column.postfix" :max="column.max" :min="column.min" :step="column.step" :maxlength="column.maxlength" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-hours-field
-                          class="w-100 h-100"
-                          placeholder="00h 00m"
-                          v-else-if="column.type === 'time'"
-                          :hours="getValue(item, column)"
-                          @update:hours="updateValue(item, $event, n, column)"
-                        />
-                        <itf-textarea class="w-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                        <itf-select class="w-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
-                      </slot>
-                    </template>
-                    <div v-else class="h-100 align-items-center d-flex w-100">
-                      <slot :name="`format.${column.type}`" :toggle="() => $emit('toggle', item)" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
-                        {{getValue(item, column)}}
-                      </slot>
-                    </div>
-                  </slot>
+                <div class="table-view-item-value-content align-items-center" :class="{'justify-content-end': column.align === 'end', 'px-2': !(column.editable && editable)}">
+                <slot
+                  :name="`column.${column.property}`"
+                  :toggle="() => $emit('toggle', item)"
+                  :hasSubitems="hasSubitems(item)"
+                  :isExpanded="!!(hasSubitems(item) && !isExpanded(item))"
+                  :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
+                  <template v-if="column.editable && editable && (!editableProperty || item[editableProperty])">
+                    <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-hours-field
+                        class="w-100 h-100"
+                        placeholder="00h 00m"
+                        v-else-if="column.type === 'time'"
+                        :hours="getValue(item, column)"
+                        @update:hours="updateValue(item, $event, n, column)"
+                      />
+                      <itf-textarea class="w-100 h-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-money-field class="w-100 h-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-select class="w-100 h-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
+                    </slot>
+                  </template>
+                  <span v-else class="text-truncate">
+                    <slot :name="`format.${column.type}`" :toggle="() => $emit('toggle', item)" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
+                      {{getValue(item, column)}}
+                    </slot>
+                  </span>
+                </slot>
                 </div>
               </div>
             </template>
@@ -86,6 +102,7 @@
           :columns="columns"
           :id-property="idProperty"
           :subrows-property="subrowsProperty"
+          :async-subrows-property="asyncSubrowsProperty"
           :show-add-column="showAddColumn"
           :show-actions="showActions"
           :no-select-all="noSelectAll"
@@ -147,6 +164,7 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -176,6 +194,12 @@ class itfTableRows extends Vue {
     return this.columns.findIndex((column) => column.lastPinned);
   }
 
+  hasSubitems(item) {
+    const hasFactItems = this.subrowsProperty && item[this.subrowsProperty] && item[this.subrowsProperty].length;
+    const hasPlanItems = this.asyncSubrowsProperty && item[this.asyncSubrowsProperty] && item[this.asyncSubrowsProperty];
+    return !!(hasFactItems || hasPlanItems);
+  }
+
   getIsMobileView() {
     return getIsMobileView();
   }
@@ -207,7 +231,7 @@ class itfTableRows extends Vue {
   }
 
   isActive(id) {
-    if (!this.idProperty) {
+    if (!this.idProperty || !this.active) {
       return false;
     }
     if (Array.isArray(this.active)) {

package/src/components/table/table2.scss

@@ -7,10 +7,10 @@
   --itf-table-alt-bg: #F9FAFB;
   --itf-table-alt-selected-bg: #eff1f3;
   --itf-table-header-bg: #f5f7f8;
-  --itf-table-header-color: #7A818EA5;
+  --itf-table-header-color: #575b63;
   --itf-table-mirror-bg: #F2F4F7;
   --itf-table-border-color: transparent; //var(--itf-table-header-bg);
-  --itf-table-header-border-color: #7A818E33;
+  --itf-table-header-border-color: #8E97A533;
   --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
   --itf-table-border-base-width: 2px;
   --itf-table-hover-header-bg: #dfe5ef;
@@ -23,6 +23,8 @@
   --itf-table-summary-text: var(--bs-tertiary-color);
   --itf-table-table-border-radius: 1rem;
   --itf-table-header-height: 2.25rem;
+  --itf-table-divider-bg: #F7F8FA;
+  --itf-table-divider-border: rgba(238, 238, 238, 1);
 
   --group-title-height: 40px;
   --table-row-height: none;
@@ -43,6 +45,9 @@ body[data-theme="dark"] {
   --itf-table-selected-bg: #011534;
   --itf-table-active-bg: #022e72;
   --itf-table-summary-text: #82909d80;
+  --itf-table-border-base-color: var(--itf-table-header-bg);
+  --itf-table-divider-bg: #0f0f0f;
+  --itf-table-divider-border: rgb(100, 100, 100, .1);
 }
 .itf-table2 {
   font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
@@ -60,7 +65,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    margin-bottom: 12px;
+    //margin-bottom: .5rem;
   }
   .scrollable-x {
     overflow-x: scroll;
@@ -97,34 +102,18 @@ body[data-theme="dark"] {
     position: sticky;
     top: 0;
     bottom: 0;
-    right: -.5rem;
+    right: -5px;
     z-index: 8;
+    padding-right: 5px;
+    padding-left: 5px;
     display: flex;
     align-items: center;
-
-    @media (max-width: 768px) {
-      position: relative;
-      opacity: 1;
-    }
   }
   .on-hover {
     opacity: 0;
-    width: 0;
-    padding: 4px .5rem;
-    overflow: hidden;
     pointer-events: none;
-    position: absolute;
-    right: 0;
-    background: linear-gradient(90deg, transparent 0, var(--itf-table2-row-bg) 10px);
-
-    @media (max-width: 768px) {
-      width: max-content;
-      opacity: 1;
-      position: relative;
-    }
   }
   .table-row-template:hover .on-hover {
-    width: max-content;
     opacity: 1;
     pointer-events: all;
   }
@@ -240,9 +229,6 @@ body[data-theme="dark"] {
       &:not(.draggable-container--is-dragging):hover .table-view-header-value {
         z-index: 39;
       }
-      &:not(.draggable-container--is-dragging):hover .sticky {
-        z-index: 40;
-      }
       &:after {
         content: "";
         position: absolute;
@@ -451,20 +437,14 @@ body[data-theme="dark"] {
     .indicator {
       border-left: var(--itf-table-border-base-width) solid var(--itf-table2-border-color);
     }
-
-    &.disabled {
-      .table-view-item-value {
-        opacity: 0.5;
-      }
-    }
   }
 
   &__row-divider {
-    background-color: #F7F8FA;
+    background-color: var(--itf-table-divider-bg);
     height: 5px;
     padding: 0;
-    border-top: 1px solid rgba(238, 238, 238, 1);
-    border-bottom: 1px solid rgba(238, 238, 238, 1);
+    border-top: 1px solid var(--itf-table-divider-border);
+    border-bottom: 1px solid var(--itf-table-divider-border);
   }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
@@ -477,6 +457,7 @@ body[data-theme="dark"] {
     position: relative;
     z-index: 2;
     width: 100%;
+    display: flex;
     height: 100%;
     background: var(--itf-table2-row-bg)
   }

package/src/components/text-field/TextField.vue

@@ -24,6 +24,7 @@
       @keypress="$emit('keypress', $event)"
       @blur="$emit('blur', $event)"
       @focus="$emit('focus', $event)"
+      @wheel="onWheel"
       @change="$emit('change', $event.target.value)"
       :maxlength="maxlength"
       :min="min"
@@ -109,5 +110,12 @@ class itfTextField extends Vue {
   blur() {
     this.$refs.input.blur();
   }
+
+  onWheel(event) {
+    // prevent value change on scroll
+    if (this.type === 'number' && document.activeElement === this.$refs.input) {
+      event.preventDefault();
+    }
+  }
 }
 </script>

package/src/components/tree/TreeEditor.vue

@@ -25,11 +25,10 @@
           @keyup.enter="(e)=>{$emit('click',{event:e,ele:e.target,node,knode})}"
           @click="(e)=>{$emit('click',{event:e,ele:e.target,node,knode})}"
         >
-          <div v-if="node.level >= toggleStartLevel" class="itf-tree-editor_node_toggle">
+          <div v-if="node.level >= toggleStartLevel" class="itf-tree-editor_node_toggle ps-2">
             <itf-button
-              v-if="autoToggleTree && node.level >= toggleStartLevel && node[itemChildren] && node[itemChildren].length > 0"
+              v-if="autoToggleTree && node.level >= toggleStartLevel && node.Children && node.Children.length > 0"
               small
-              icon
               @click.stop="toggleNode($event, node, knode)"
             >
               <itf-icon v-if="isNodeToggled(node)" name="plus" size="24" />