@itfin/components 1.4.35 → 1.5.0

package/src/components/table/TableGroup.vue

@@ -15,14 +15,14 @@
             <div class="table-row-template d-flex align-items-stretch"
                  style="min-height: var(--group-title-height)">
               <div class="shadow-area"></div>
-              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
+              <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="() => toggleGroup(!isShowTable)">
                 <a class="header-content position-sticky d-flex align-items-center">
                   <itf-button squircle icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
                   </itf-button>
                   <span class="d-flex align-items-center line-overflow group-header-value text-primary"
                         data-test="group-value-group-label-value">
-                    <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
+                    <slot name="group-title" :rows="rows" :title="title" :collapsed="!isShowTable">{{ title }}</slot>
                   </span>
                 </a>
               </div>
@@ -51,7 +51,14 @@
             @update:columns="$emit('update:columns', $event)"
             @filter="$emit('filter', $event)"
             @add-column="$emit('add-column', $event)"
-          />
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}"/>
+            </template>
+            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}"/>
+            </template>
+          </itf-table-header>
         </div>
 
         <!-- Сама таблиця -->
@@ -91,11 +98,11 @@
 
         <!-- Лінія додати нову -->
         <div v-if="isShowTable && addNewRows"
-             class="table-row-template d-flex align-items-stretch">
+             class="d-flex align-items-stretch">
           <div class="shadow-area"></div>
           <a href="" @click.prevent="$emit('new', title)" data-test="table-add-new-item"
              class="d-flex align-items-center flex-grow-1 table-add-new-item text-decoration-none">
-            <span class="d-sticky d-flex align-items-center py-1">
+            <span class="d-sticky d-flex align-items-center py-2 px-2">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -265,12 +272,17 @@
   }
 
   .table-add-new-item {
-    border-right:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
-    border-left:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+    margin-top: -12px;
     border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
     outline: none;
     border-bottom-left-radius: var(--itf-table-table-border-radius);
     border-bottom-right-radius: var(--itf-table-table-border-radius);
+    border-right: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+
+    > .d-sticky {
+      border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
+      border-bottom-left-radius: var(--itf-table-table-border-radius);
+    }
 
     & > span {
       left: var(--shadow-area-width);
@@ -336,6 +348,7 @@ import itfIcon from '../icon/Icon.vue';
 import itfTableBody from './TableBody.vue';
 import itfTableHeader from './TableHeader.vue';
 import Sticky from "./sticky";
+import { getIsMobileView } from "./mobile";
 
 function getNumber(item, prop) {
   const num = Number(get(item, prop));
@@ -386,10 +399,14 @@ class itfTableGroup extends Vue {
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
   @Prop() expandedIds;
+  @Prop() collapsedGroupIds;
 
-  isShowTable = true;
   persistSummary = false;
 
+  get isShowTable() {
+    return typeof this.collapsedGroupIds !== 'undefined' ? !this.collapsedGroupIds.includes(this.title) : true;
+  }
+
   get visibleColumns() {
     let list = this.columns;
     list = sortBy(list, (column) => column.index);
@@ -397,8 +414,8 @@ class itfTableGroup extends Vue {
     const pinned = list.filter((column) => column.pinned && column.visible !== false);
     list = list.map((column, index) => {
       const item = {...column};
-      item.left = (item.pinned && item.visible !== false) ? left : 0;
-      left = (item.pinned && item.visible !== false) ? left + column.width : left;
+      item.left = (item.pinned && !getIsMobileView() && item.visible !== false) ? left : 0;
+      left = (item.pinned && !getIsMobileView() && item.visible !== false) ? left + column.width : left;
       item.lastPinned = index === pinned.length - 1;
       return item
     });
@@ -410,8 +427,17 @@ class itfTableGroup extends Vue {
     this.$emit('update:columns', columns);
   }
 
-  toggleGroup() {
-    this.isShowTable = !this.isShowTable;
+  toggleGroup(val) {
+    let expanded = this.collapsedGroupIds ? [...this.collapsedGroupIds] : [];
+    if (!val) {
+      if (!expanded.includes(this.title)) {
+        expanded.push(this.title);
+      }
+    } else {
+      expanded = expanded.filter(id => id !== this.title);
+    }
+    console.info(expanded, this.title, val);
+    this.$emit('update:collapsed-group-ids', expanded);
   }
 
   get stickyId() {

package/src/components/table/TableHeader.vue

@@ -4,7 +4,7 @@
     <div ref="container" class="table-row-template">
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
-      <div class="table-view-header-value reserved sticky">
+      <div class="table-view-header-value reserved sticky" data-test="table-header-checkbox">
         <itf-checkbox v-if="indicatorType === 'checkbox' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 
@@ -15,7 +15,7 @@
           data-test="table-header-column"
           :data-column="n"
           :data-id="column.Id"
-          :class="{'sticky': column.pinned, 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex, [`justify-content-${column.align || 'start'}`]: true}"
+          :class="{'sticky': column.pinned && !getIsMobileView(), 'active': sortColumnParams[column.property], 'last-sticky-column': n === lastPinnedIndex && !getIsMobileView(), [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
           :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
           <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
@@ -30,84 +30,89 @@
                class="table-header"
                @drop="reorderColumns"
                v-draggable="{ 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>
-                    <div v-if="column.prefix" class="itf-table2__subtitle text-truncate" v-text="column.prefix" />
+            <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>
+                    </div>
+                    <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'sort-asc' : 'sort-desc'" new :size="20" class="ms-1" />
                   </div>
-                </div>
-                <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">
+                </template>
                 <div class="dropdown-header">
-                  {{$t('components.table.sorting')}}
+                  {{$t('components.table.actions')}}
                 </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')}}
+
+                <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="sortBy(column, 'desc')">
-                    <itf-icon name="sort-desc" new />
-                    {{$t('components.table.sortDescending')}}
+                  <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>
-            </itf-dropdown>
+
+                <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>
+              <slot :name="`header.${column.property}.after`" v-bind="{ column }"></slot>
+            </div>
             <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)">
@@ -162,6 +167,7 @@ import createDraggable from '../sortable/draggable';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfSortable from '../sortable/Sortable.vue';
 import settings from "../../ITFSettings";
+import { getIsMobileView } from "./mobile";
 
 const { Node, ...draggableDirectives } = createDraggable();
 
@@ -207,6 +213,10 @@ class itfTableHeader extends Vue {
     }
   }
 
+  getIsMobileView() {
+    return getIsMobileView();
+  }
+
   get sortColumnParams() {
     if (typeof this._sorting === 'string'){
       return this._sorting[0] === '-' ? {[this._sorting.substring(1)]: 'desc'} : {[this._sorting]: 'asc'};
@@ -232,7 +242,7 @@ class itfTableHeader extends Vue {
 
   set selectAll(val) {
     if (val) {
-      this.$emit('update:selectedIds', this.rows.map(r => r[this.idProperty]));
+      this.$emit('update:selectedIds', this.rows.filter(r => !r.isDisabled).map(r => r[this.idProperty]));
     } else {
       this.$emit('update:selectedIds', []);
     }

package/src/components/table/TableRows.vue

@@ -6,7 +6,7 @@
         group="items"
         data-test="table-item"
         class="table-view-item grouped draggable-item"
-        :class="{'selected': selectedIds.includes(item[idProperty]), 'active': isActive(item[idProperty]), [cssProperty && item[cssProperty]]: !!item[cssProperty]}"
+        :class="{'selected': selectedIds.includes(item[idProperty]), 'active': isActive(item[idProperty]), 'disabled': item.isDisabled, [cssProperty && item[cssProperty]]: !!item[cssProperty]}"
       >
         <div class="table-row-template">
           <div accept-group="items" class="table-view-body-space"></div>
@@ -24,7 +24,7 @@
             <div v-if="indicatorType !== 'none'" class="table-view-row-count">
               <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 :value="item[idProperty]" /></span>
+              <span v-else-if="indicatorType === 'checkbox'"><itf-checkbox :disabled="item.isDisabled" :value="item[idProperty]" /></span>
             </div>
           </div>
           <div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
@@ -33,9 +33,9 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'editable': column.editable && editable}"
+                :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)}">
+                <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)"
@@ -44,8 +44,8 @@
                     :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 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-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"
@@ -53,9 +53,9 @@
                           :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>
+                        <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">
@@ -98,6 +98,7 @@
           :expanded-all="expandedAll"
           :css-property="cssProperty"
           :editable-property="editableProperty"
+          :active="active"
           @update="$emit('update', $event)"
           @toggle="$emit('toggle', $event)"
         >
@@ -125,6 +126,7 @@ import itfTextarea from '../text-field/Textarea.vue';
 import itfHoursField from '../text-field/HoursField.vue';
 import itfSelect from '../select/Select.vue';
 import itfTableBody from './TableBody.vue';
+import { getIsMobileView } from "./mobile";
 // import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
@@ -174,6 +176,10 @@ class itfTableRows extends Vue {
     return this.columns.findIndex((column) => column.lastPinned);
   }
 
+  getIsMobileView() {
+    return getIsMobileView();
+  }
+
   updateValue(item, value, index, column) {
     const newItem = { ...item };
     if (newItem[column.property] !== value) {

package/src/components/table/mobile.js

@@ -0,0 +1,4 @@
+export 
+function getIsMobileView() {
+  return window.matchMedia('(max-width: 768px)').matches;
+}

package/src/components/table/table2.scss

@@ -240,6 +240,9 @@ 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;
@@ -448,6 +451,12 @@ 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 {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+    <div class="h-100" :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"
@@ -9,6 +9,7 @@
         :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
         @input="setValue"
         :value="maskedValue"
+        :placeholder="placeholder"
         :unmask="false"
         :disabled="disabled"
       />
@@ -100,6 +101,7 @@ class itfMoneyField extends Vue {
   @Inject({ default: null }) itemLabel;
 
   @Model('input', { default: '' }) value;
+  @Prop({ default: '' }) placeholder;
   @Prop({ type: Object, default: null }) currency;
   @Prop({ type: Boolean, default: false }) noCurrencySign;
   @Prop({ type: Boolean, default: false }) disabled;
@@ -145,7 +147,7 @@ class itfMoneyField extends Vue {
   }
 
   onCurrencyChanged(e) {
-    const currency = this.currenciesList.find((c) => c[this.itemKey] === parseInt(e.target.value));
+    const currency = this.currenciesList.find((c) => `${c[this.itemKey]}` === `${e.target.value}`);
     this.$emit('update:currency', currency)
   }
 
@@ -154,11 +156,11 @@ class itfMoneyField extends Vue {
   }
 
   get selectedCurrencySymbol() {
-    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '#';
+    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '';
   }
 
   get selectedCurrencyCode() {
-    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '###';
+    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '';
   }
 
   get currencyId() {
@@ -173,6 +175,10 @@ class itfMoneyField extends Vue {
   }
 
   setValue (val) {
+    if (val === '') {
+      this.$emit('input', '');
+      return;
+    }
     if (!isNumeric(val) || (val || '').toString().match(/\..*0$/)) { // що не видаляло останній нуль вкінці
       return;
     }

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

@@ -1,17 +1,18 @@
 <template>
 
-  <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
+  <div class="itf-text-field input-group form-control p-0" :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }">
     <slot name="addon">
-      <div class="addon" v-if="prependIcon">
-        <itf-icon :name="prependIcon"/>
+      <div class="input-group-text prepend text-muted" v-if="prependIcon">
+        <itf-icon :size="small ? 18 : 20" :name="prependIcon"/>
       </div>
     </slot>
 
     <input
+      :name="`text-field-${_uid}`"
       ref="input"
       autocomplete="off"
       :placeholder="placeholder"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'form-control-sm': small }"
+      :class="{ 'form-control-sm': small }"
       class="itf-text-field__input form-control"
       :type="type"
       :value="value"
@@ -24,12 +25,16 @@
       @blur="$emit('blur', $event)"
       @focus="$emit('focus', $event)"
       @change="$emit('change', $event.target.value)"
+      :maxlength="maxlength"
       :min="min"
       :max="max"
       :step="step"
     />
+    <div class="input-group-text append text-muted" v-if="postfix">
+      {{ postfix }}
+    </div>
 
-    <div class="addon-end" v-if="clearable && value">
+    <template v-if="clearable && value">
       <slot name="clear">
         <itf-button
           icon
@@ -39,7 +44,7 @@
           <itf-icon name="close" />
         </itf-button>
       </slot>
-    </div>
+    </template>
   </div>
 
 </template>
@@ -64,10 +69,14 @@ class itfTextField extends Vue {
   @Prop() step;
   @Prop() min;
   @Prop() max;
+  @Prop() maxlength;
+  @Prop() postfix;
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
   @Prop(Boolean) small;
+  @Prop({ type: Boolean, default: undefined }) invalid;
+  @Prop({ type: Boolean, default: undefined }) valid;
   @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
@@ -78,11 +87,11 @@ class itfTextField extends Vue {
   }
 
   isInvalid() {
-    return this.itemLabel && this.itemLabel.isHasError();
+    return typeof this.invalid !== 'undefined' ? this.invalid : (this.itemLabel && this.itemLabel.isHasError());
   }
 
   isSuccess() {
-    return this.itemLabel && this.itemLabel.isHasSuccess();
+    return typeof this.valid !== 'undefined' ? this.valid : (this.itemLabel && this.itemLabel.isHasSuccess());
   }
 
   insertTextToCurrentPosition(text) {

package/src/components/tree/TreeEditor.vue

@@ -25,10 +25,11 @@
           @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 ps-2">
+          <div v-if="node.level >= toggleStartLevel" class="itf-tree-editor_node_toggle">
             <itf-button
-              v-if="autoToggleTree && node.level >= toggleStartLevel && node.Children && node.Children.length > 0"
+              v-if="autoToggleTree && node.level >= toggleStartLevel && node[itemChildren] && node[itemChildren].length > 0"
               small
+              icon
               @click.stop="toggleNode($event, node, knode)"
             >
               <itf-icon v-if="isNodeToggled(node)" name="plus" size="24" />