@itfin/components 1.3.35 → 1.3.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.35",
+  "version": "1.3.37",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/components/_pagination.scss

@@ -8,5 +8,9 @@
     .page-link {
       border-radius: .5rem;
     }
+
+    &.disabled .page-link {
+      background-color: transparent;
+    }
   }
 }

package/src/assets/scss/icons.scss

@@ -1,6 +1,6 @@
 
 $bootstrap-icons-font: "bootstrap-icons" !default;
-$bootstrap-icons-font-dir: "../fonts" !default;
+$bootstrap-icons-font-dir: "/fonts" !default;
 $bootstrap-icons-font-file: "#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}" !default;
 $bootstrap-icons-font-hash: "24e3eb84d0bcaf83d77f904c78ac1f47" !default;
 $bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"),

package/src/components/dropdown/Dropdown.vue

@@ -24,6 +24,7 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
   @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
   @Prop({ type: Object, default: () => ({}) }) menuOptions;
@@ -31,7 +32,7 @@ class itfDropdown extends Vue {
   modalId = '';
 
   render (createElement, context) {
-    const { props, slots, data } = context;
+    const { props, slots, data, listeners } = context;
     const modalId = `dropdownId${globalModalIndex++}`;
     const { buttonOptions, toggle, text, disabled, label, appendToBody } = props;
     const { button, default: defaultSlot } = slots();
@@ -51,6 +52,18 @@ class itfDropdown extends Vue {
         {
           ref: data.ref,
           props: { ...props, toggleId: modalId },
+          on: {
+            open: () => {
+              if (listeners.open) {
+                listeners.open();
+              }
+            },
+            close: () => {
+              if (listeners.close) {
+                listeners.close();
+              }
+            }
+          }
         },
         defaultSlot
       )

package/src/components/dropdown/DropdownMenu.vue

@@ -22,6 +22,7 @@ class itfDropdownMenu extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
   @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
   @Prop({ type: String }) toggleId;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
@@ -39,32 +40,39 @@ class itfDropdownMenu extends Vue {
     const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');
     let context = document.body;
     this.modalEl = new Dropdown(toggle, {
-      reference: 'toggle',
+      reference: 'parent',
       autoClose: this.autoclose
     });
-    if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
+    if (this.appendToContext && this.$el instanceof Node && this.$el.parentNode) {
+      context = this.$el.closest('.itf-append-context') || document.body;
+      this.$el.parentNode.removeChild(this.$el);
+      context.appendChild(this.$el); // should append only to body
+    } else if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
       context.appendChild(this.$el); // should append only to body
     }
 
-    this.$el.addEventListener('shown.bs.dropdown', () => {
-      setTimeout(() => {
-        this.$emit('open');
-      }, 500);
+    toggle.addEventListener('shown.bs.dropdown', () => {
+      this.$emit('open');
     });
-    this.$el.addEventListener('hidden.bs.dropdown', () => {
+    toggle.addEventListener('hidden.bs.dropdown', () => {
       this.$emit('close');
     });
   }
 
   beforeDestroy() {
-    if (this.modalEl) {
-      this.modalEl.hide();
-      this.modalEl.dispose();
+    try {
+      if (this.modalEl) {
+        this.modalEl.hide();
+        this.modalEl.dispose();
+      }
+    } catch (err) {
+      // ignore
     }
   }
 
   show() {
+    console.info('p[en')
     if (this.modalEl) {
       this.modalEl.show();
     }

package/src/components/pagination/Pagination.vue

@@ -1,7 +1,7 @@
 <template>
 
   <nav aria-label="Page navigation example">
-    <ul class="pagination itf-pagination">
+    <ul class="pagination itf-pagination px-3">
       <li
         v-for="(page, n) in pagesArr"
         :key="n"

package/src/components/table/Table2.vue

@@ -6,6 +6,7 @@
         <div class="table-view-body">
           <itf-table-group
             :key="index"
+            @update="$emit('update', { ...$event, group, groupIndex: index })"
             :id-property="idProperty"
             :columns="columns"
             @update:columns="onColumnsUpdate"
@@ -20,6 +21,8 @@
             :show-add-column="showAddColumn"
             :show-header="!noHeader"
             :schema="schema"
+            :no-column-menu="noColumnMenu"
+            :no-select-all="noSelectAll"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
           >
@@ -40,7 +43,6 @@
 .scrollable {
   --itf-table-hover-bg: #f2f2f2;
   --itf-table-min-width: 45px;
-  --itf-table-line-height: 35px;
 
   body[data-theme="dark"] & {
     --itf-table-hover-bg: #393b41;
@@ -103,6 +105,8 @@ class itfTable2 extends Vue {
   @Prop(Boolean) showGrouping;
   @Prop(Boolean) showSummary;
   @Prop(Boolean) noHeader;
+  @Prop(Boolean) noColumnMenu;
+  @Prop(Boolean) noSelectAll;
 
   state = {
     selectedIds: [],
@@ -123,7 +127,10 @@ class itfTable2 extends Vue {
     for (const column of list) {
       const stateColumn = state.columns.find(i => i.property === column.property);
       if (stateColumn) {
-        Object.assign(stateColumn, column);
+        Object.assign(stateColumn, {
+          ...column,
+          width: stateColumn.width
+        });
       } else {
         state.columns.push(column);
       }

package/src/components/table/TableBody.vue

@@ -18,30 +18,39 @@
           </div>
         </div>
         <div class="indicator sticky">
-          <div class="fill on-rest table-view-row-count">
-<!--            <span>{{ item[idProperty] }}</span>-->
+          <div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
+            <span>{{ item[idProperty] }}</span>
           </div>
-          <div class="fill on-hover">
+          <div v-if="!noSelectAll" class="fill on-hover">
             <itf-checkbox :value="item[idProperty]" />
           </div>
         </div>
         <div accept-group="items" class="table-item-inner">
-          <template v-for="(column, n) in visibleAttributes">
+          <template v-for="(column, k) in visibleAttributes">
             <div
               v-if="column.visible !== false"
-              :data-column="n"
-              :style="`width: ${column.width}px; left: ${column.left}px;`"
-              :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow}"
+              :data-column="k"
+              :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
+              :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !column.editable, 'p-1': column.editable}"
               class="table-view-item-value d-flex h-100 align-items-stretch">
-              <slot :name="`column.${column.name}`" :item="item" :column="column">
+              <slot :name="`column.${column.property}`" :item="item" :column="column">
                 <template v-if="column.editable">
-                  <slot :name="`edit.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
-                    <div class="px-1 py-1 w-100"><itf-text-field :value="getValue(item, column)" /></div>
+                  <slot :name="`edit.${column.type}`" :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'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                    <itf-hours-field
+                      class="w-100"
+                      placeholder="0h 0m"
+                      v-else-if="column.type === 'time'"
+                      :hours="getValue(item, column)"
+                      @update:hours="updateValue(item, $event, n, column)"
+                    />
+                    <itf-textarea class="w-100" :rows="2" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                    <itf-money-field class="w-100" v-else-if="column.type === 'money'" no-currency-sign currency-disabled :currency-select="false" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                   </slot>
                 </template>
                 <template v-else>
                   <slot :name="`format.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
-                    <div class="px-2 w-100">{{getValue(item, column)}}</div>
+                    {{getValue(item, column)}}
                   </slot>
                 </template>
               </slot>
@@ -55,6 +64,19 @@
         </div>
       </div>
     </div>
+
+    <div v-if="!rows.length" data-test="table-no-results" class="table-view-item">
+      <div class="table-row-template">
+        <div accept-group="items" class="table-view-body-space"></div>
+        <div class="shadow-area"></div>
+        <div class="indicator sticky"></div>
+        <div class="table-item-inner">
+          <div class="table-view-item-value w-100 align-items-center p-3">
+            {{$t('components.table.noResults')}}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <style lang="scss">
@@ -78,7 +100,6 @@
   align-items: stretch;
   display: flex;
   position: relative;
-  line-height: var(--itf-table-line-height);
   min-width: var(--itf-table-min-width);
 
   &.highlight-drop-column {
@@ -208,18 +229,24 @@
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import get from 'lodash/get';
-import { RecycleScroller } from 'vue-virtual-scroller'
+import set from 'lodash/set';
+// import { RecycleScroller } from 'vue-virtual-scroller'
 import itfCheckbox from '../checkbox/Checkbox.vue';
 import itfTextField from '../text-field/TextField.vue';
-import { INLINE_TYPES } from '../customize/constants';
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+import itfMoneyField from '../text-field/MoneyField.vue';
+import itfTextarea from '../text-field/Textarea.vue';
+import itfHoursField from '../text-field/HoursField.vue';
+// import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
   name: 'itfTableBody',
   components: {
     itfCheckbox,
+    itfMoneyField,
+    itfHoursField,
+    itfTextarea,
     itfTextField,
-    RecycleScroller
+    // RecycleScroller
   }
 })
 class itfTableBody extends Vue {
@@ -227,8 +254,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
-
-  editTypes = {};
+  @Prop(Boolean) noSelectAll;
 
   getValue(item, column) {
     return get(item, column.property);
@@ -242,10 +268,10 @@ class itfTableBody extends Vue {
     return this.columns.findIndex((column) => column.lastPinned);
   }
 
-  mounted() {
-    for (const { Type } of INLINE_TYPES) {
-      this.editTypes[Type] = true;
-    }
+  updateValue(item, value, index, column) {
+    const newItem = { ...item };
+    set(newItem, column.property, value);
+    this.$emit('update', { index, item, value: newItem });
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -42,6 +42,8 @@
             :show-add-column="showAddColumn"
             :rows="rows"
             :schema="schema"
+            :no-column-menu="noColumnMenu"
+            :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
             @update:selectedIds="$emit('update:selectedIds', $event)"
             @update:columns="$emit('update:columns', $event)"
@@ -52,9 +54,11 @@
         <!-- Сама таблиця -->
         <div v-if="isShowTable">
           <itf-table-body
+            @update="$emit('update', $event)"
             :id-property="idProperty"
             :rows="rows"
             :columns="visibleColumns"
+            :no-select-all="noSelectAll"
             :show-add-column="showAddColumn">
             <template v-for="(_, name) in $slots" #[name]="slotData">
               <slot :name="name" v-bind="slotData || {}"/>
@@ -79,7 +83,7 @@
         </div>
 
         <!-- Групування -->
-        <div v-if="isShowTable && showSummary" class="table-row-template d-flex align-items-stretch table-summary">
+        <div v-if="isShowTable && showSummary" class="table-row-template d-flex align-items-stretch table-summary" :class="{'table-summary-persist': persistSummary}">
           <div class="shadow-area"></div>
 
           <div class="table-summary-columns d-flex tw-flex-row align-items-center">
@@ -87,51 +91,27 @@
               v-for="(column, n) in visibleColumns"
               :key="n"
               :data-column="n"
-              class="table-summary-column position-relative line-overflow"
-              :style="`width: ${column.width}px;`">
-              <itf-dropdown text>
+              class="position-relative line-overflow"
+              :style="`width: ${column.width}px; max-width: ${column.width}px;`">
+              <itf-dropdown append-to-context text right @open="persistSummary = true" @close="persistSummary = false">
                 <template #button>
                   <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
-                    <span class="summary-placeholder align-items-center justify-content-center">
-                      Summary
+                    <span v-if="column.calculate === 'none' || !column.calculate" class="table-summary-column summary-placeholder align-items-center justify-content-center">
+                      {{$t('components.table.calculate')}}
                       <itf-icon name="chevron_down" />
                     </span>
+                    <span v-else>
+                      <span class="summary-text text-uppercase pe-2">{{getCalculateMethodTitle(column.calculate)}}</span>
+                      <span>{{getCalculateMethodValue(column.calculate, column)}}</span>
+                    </span>
                   </span>
                 </template>
 
-                <ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
-                  <li v-if="column.sortable">
-                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                      <itf-icon name="arrow_up" :size="16" class="me-1" />
-                      Sort By Asc
-                    </a>
-                  </li>
-                  <li v-if="column.sortable">
-                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                      <itf-icon name="arrow_down" :size="16" class="me-1" />
-                      Sort By Desc
-                    </a>
-                  </li>
-                  <li v-if="column.groupable">
-                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
-                      <itf-icon name="episodes" :size="16" class="me-1" />
-                      Group By
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
-                      <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
-                      <span v-if="column.pinned">Unpin Column</span>
-                      <span v-else>Pin Column</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
-                      <itf-icon name="eye_no" :size="16" class="me-1" />
-                      Hide
-                    </a>
-                  </li>
-                </ul>
+                <div v-for="(method, m) in calculateMethods" :key="method.id">
+                  <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="selectSummary(method, n)">
+                    {{method.title}}
+                  </a>
+                </div>
               </itf-dropdown>
             </span>
           </div>
@@ -289,23 +269,34 @@
       opacity: 0.05;
       font-size: .85rem;
       padding-right: .25rem;
-
-      &:hover {
-        opacity: 1;
-      }
+    }
+    .summary-text {
+      color: var(--bs-tertiary-color);
+    }
+    &.table-summary-persist .table-summary-column,
+    &:hover .table-summary-column {
+      opacity: 1;
     }
   }
 }
 </style>
 <script>
+import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
+import uniq from "lodash/uniq";
+import round from "lodash/round";
 import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableBody from './TableBody.vue';
 import itfTableHeader from './TableHeader.vue';
-import Sticky from "@/components/table/sticky";
+import Sticky from "./sticky";
+
+function getNumber(item, prop) {
+  const num = Number(get(item, prop));
+  return Number.isNaN(num) ? 0 : num;
+}
 
 export default @Component({
   name: 'itfTableGroup',
@@ -330,10 +321,13 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showHeader;
+  @Prop(Boolean) noColumnMenu;
+  @Prop(Boolean) noSelectAll;
   @Prop({type: String, default: function() { return this.$t('components.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
 
   isShowTable = true;
+  persistSummary = false;
 
   get visibleColumns() {
     let list = this.columns;
@@ -368,7 +362,47 @@ class itfTableGroup extends Vue {
       wrap: true,
       stickyClass: 'sticky',
     });
-    console.info(this.sticky);
+  }
+
+  selectSummary(method, index) {
+    const columns = [...this.columns];
+    columns[index].calculate = method.id;
+    this.$emit('update:columns', columns);
+  }
+
+  get calculateMethods() {
+    return [
+      { id: 'none', title: this.$t('components.table.calculateNone') },
+      { id: 'total', title: this.$t('components.table.calculateTotal'), summary: 'Total', func: (rows, column) => rows.reduce((acc, row) => acc + (getNumber(row, column.property)), 0) },
+      { id: 'average', title: this.$t('components.table.calculateAverage'), summary: 'Average', func: (rows, column) => {
+        const sum = rows.reduce((acc, row) => acc + (getNumber(row, column.property)), 0);
+        return round(sum / rows.length, 3);
+      } },
+      { id: 'min', title: this.$t('components.table.calculateMin'), summary: 'Min', func: (rows, column) => Math.min(...rows.map(row => getNumber(row, column.property))) },
+      { id: 'max', title: this.$t('components.table.calculateMax'), summary: 'Max', func: (rows, column) => Math.max(...rows.map(row => getNumber(row, column.property))) },
+      { id: 'countAll', title: this.$t('components.table.calculateCountAll'), summary: 'Count', func: (rows) => rows.length },
+      { id: 'countValues', title: this.$t('components.table.calculateCountValues'), summary: 'Values', func: (rows, column) => rows.filter(row => !!get(row, column.property)).length },
+      { id: 'countUniqueValues', title: this.$t('components.table.calculateCountUniqueValues'), summary: 'Unique', func: (rows, column) => uniq(rows.filter(row => !!get(row, column.property))).length },
+      { id: 'countEmpty', title: this.$t('components.table.calculateCountEmpty'), summary: 'Empty', func: (rows, column) => rows.filter(row => !get(row, column.property)).length },
+      { id: 'countNotEmpty', title: this.$t('components.table.calculateCountNotEmpty'), summary: 'Not Empty', func: (rows, column) => rows.filter(row => !!get(row, column.property)).length },
+      { id: 'percentEmpty', title: this.$t('components.table.calculatePercentEmpty'), summary: 'Empty', func: (rows, column) => {
+        const empty = rows.filter(row => !get(row, column.property)).length;
+        return round(empty / rows.length * 100, 3) + '%';
+      } },
+      { id: 'percentNotEmpty', title: this.$t('components.table.calculatePercentNotEmpty'), summary: 'Not Empty', func: (rows, column) => {
+        const notEmpty = rows.filter(row => !!get(row, column.property)).length;
+        return round(notEmpty / rows.length * 100, 3) + '%';
+      } },
+    ];
+  }
+
+  getCalculateMethodTitle(methodName) {
+    return this.calculateMethods.find(method => method.id === methodName)?.summary;
+  }
+
+  getCalculateMethodValue(methodName, column) {
+    const method = this.calculateMethods.find(method => method.id === methodName);
+    return method?.func ? method.func(this.rows, column) : '';
   }
 }
 </script>

package/src/components/table/TableHeader.vue

@@ -5,7 +5,7 @@
       <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">
-        <itf-checkbox v-if="visibleHeader" ungrouped value="all" v-model="selectAll" ref="selectAll" />
+        <itf-checkbox v-if="visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 
       <template v-for="(column, n) in visibleAttributes">
@@ -17,7 +17,7 @@
           :data-id="column.Id"
           :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
-          :style="`width: ${column.width}px; left: ${column.left}px;`">
+          :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`">
           <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
           <div v-if="visibleHeader" accept-group="tablecolumns"
                class="table-view-header-space"
@@ -31,7 +31,7 @@
                @drop="reorderColumns"
                v-drag-handle
                v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
-            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100">
+            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" :disabled="noColumnMenu">
               <template #button>
                 <span :title="column.title[locale] || column.title['en_US']">
                   <span v-if="column.icon" :class="column.icon"></span>
@@ -43,32 +43,32 @@
               <div v-if="column.sortable">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
                   <itf-icon name="arrow_up" :size="16" class="me-1" />
-                  Sort ascending
+                  {{$t('components.table.sortAscending')}}
                 </a>
               </div>
               <div v-if="column.sortable">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
                   <itf-icon name="arrow_down" :size="16" class="me-1" />
-                  Sort descending
+                  {{$t('components.table.sortAscending')}}
                 </a>
               </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" />
-                  Group By
+                  {{$t('components.table.groupBy')}}
                 </a>
               </div>
               <div>
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
                   <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
-                  <span v-if="column.pinned">Unfreeze column</span>
-                  <span v-else>Freeze up to column</span>
+                  <span v-if="column.pinned">{{$t('components.table.unfreezeColumn')}}</span>
+                  <span v-else>{{$t('components.table.freezeColumn')}}</span>
                 </a>
               </div>
-              <div>
+              <div v-if="showAddColumn">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
                   <itf-icon name="eye_no" :size="16" class="me-1" />
-                  Hide in view
+                  {{$t('components.table.hideColumn')}}
                 </a>
               </div>
             </itf-dropdown>
@@ -85,14 +85,14 @@
         </div>
       </template>
       <div v-if="showAddColumn" class="table-view-header-value flex-grow-1 justify-content-start">
-        <itf-dropdown v-if="visibleHeader" ref="newDd" text append-to-body shadow autoclose="outside" class="table-header table-header-add-column" data-test="table-header-add-column">
+        <itf-dropdown v-if="visibleHeader" ref="newDd" text append-to-context shadow autoclose="outside" class="table-header table-header-add-column" data-test="table-header-add-column">
           <template #button>
             <span class="nom-layout-three-columns"></span>
           </template>
 
           <itf-sortable :value="sortedColumns" @input="onSortColumns">
             <template v-for="(column, k) in sortedColumns">
-              <div :key="`column${k}`" class="d-flex align-items-center justify-content-between px-2 py-1">
+              <div :key="`column${k}`" class="d-flex align-items-center justify-content-between" :class="{'px-2 py-1': column.visible !== false}">
                 <template v-if="column.visible !== false">
                   <div class="d-flex justify-content-between flex-grow-1">
                     <div>
@@ -111,7 +111,7 @@
           </itf-sortable>
 
           <div v-if="invisibleColumns.length">
-            <div class="dropdown-header">Add column</div>
+            <div class="dropdown-header">{{$t('components.table.addColumn')}}</div>
             <template v-for="(column, k) in invisibleColumns">
               <a href="" @click.prevent="addColumn(column)" :key="`inv-column${k}`" class="dropdown-item d-flex align-items-center justify-content-between px-2 py-1">
                 <div>
@@ -321,6 +321,8 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) visibleHeader;
+  @Prop(Boolean) noColumnMenu;
+  @Prop(Boolean) noSelectAll;
 
   @Watch('selectedIds')
   @Watch('rows')
@@ -433,6 +435,7 @@ class itfTableHeader extends Vue {
           newWidth = Math.max(columnWidth + delta, 100);
           columns.forEach((column) => {
             column.style.width = `${newWidth}px`;
+            column.style['max-width'] = `${newWidth}px`;
           });
         };
         const mouseUpHandler = () => {

package/src/components/table/index.stories.js

@@ -131,7 +131,7 @@ storiesOf('Common', module)
             {
               "property": "Description",
               "title": { "en_US": "Description", "uk_UA": "Прізвище" },
-              "type": "text",
+              "type": "textarea",
               "editable": true,
               "sortable": false,
               width: 200,
@@ -324,7 +324,9 @@ storiesOf('Common', module)
         @new="onAdd"
         state-name="test"
         :schema="schema"
-        :columns.sync="columns2" :rows="list2" column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
+        :columns.sync="columns2" :rows="list2"
+        show-summary
+        column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
         <template #format.employee="{ item }">
           {{item.EmployeeId}}
         </template>

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

@@ -1,16 +1,16 @@
 <template>
   <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div :style="`--itf-money-field-padding-left: ${selectedCurrencySymbol.length * 0.6 + 1}rem`">
-      <span class="itf-money-field__prepend">{{ selectedCurrencySymbol }}</span>
+    <div class="input-group h-100" :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"
-          v-bind="mask"
-          class="form-control"
-          :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
-          @input="setValue"
-          :value="maskedValue"
-          :unmask="false"
-          :disabled="disabled"
+        ref="input"
+        v-bind="mask"
+        class="form-control"
+        :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+        @input="setValue"
+        :value="maskedValue"
+        :unmask="false"
+        :disabled="disabled"
       />
     </div>
 
@@ -93,6 +93,7 @@ class itfMoneyField extends Vue {
 
   @Model('input', { default: '' }) value;
   @Prop({ type: Object, default: null }) currency;
+  @Prop({ type: Boolean, default: false }) noCurrencySign;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: Boolean, default: true }) currencySelect;
   @Prop({ type: Array, default: () => ([]) }) currencies;

package/src/locales/en.js

@@ -96,5 +96,29 @@ module.exports = {
   },
   copyToClipboard: {
     copyingToClipboardWasSuccessful: 'Copying to clipboard was successful',
+  },
+  table: {
+    new: 'New',
+    noResults: 'No items',
+    sortAscending: 'Sort ascending',
+    sortDescending: 'Sort descending',
+    groupBy: 'Group by',
+    hideColumn: 'Hide in view',
+    freezeColumn: 'Freeze up to column',
+    unfreezeColumn: 'Unfreeze column',
+    addColumn: 'Add column',
+    calculate: 'Calculate',
+    calculateNone: 'None',
+    calculateTotal: 'Total',
+    calculateCountAll: 'Count all',
+    calculateAverage: 'Average',
+    calculateMin: 'Min',
+    calculateMax: 'Max',
+    calculateCountValues: 'Count values',
+    calculateCountUniqueValues: 'Count unique values',
+    calculateCountEmpty: 'Count empty',
+    calculateCountNotEmpty: 'Count not empty',
+    calculatePercentEmpty: 'Percent empty',
+    calculatePercentNotEmpty: 'Percent not empty',
   }
 };

package/src/locales/uk.js

@@ -96,5 +96,29 @@ module.exports = {
   },
   copyToClipboard: {
     copyingToClipboardWasSuccessful: 'Скопійовано в буфер',
+  },
+  table: {
+    new: 'Додати',
+    noResults: 'Немає записів',
+    sortAscending: 'Сортувати за зростанням',
+    sortDescending: 'Сортувати за спаданням',
+    groupBy: 'Групувати',
+    hideColumn: 'Приховати колонку',
+    freezeColumn: 'Закріпити колонку',
+    unfreezeColumn: 'Відкріпити колонку',
+    addColumn: 'Додати колонку',
+    calculate: 'Обчислення',
+    calculateNone: 'Немає',
+    calculateTotal: 'Всього',
+    calculateCountAll: 'Кількість',
+    calculateAverage: 'Середнє',
+    calculateMin: 'Мінімум',
+    calculateMax: 'Максимум',
+    calculateCountValues: 'Кількість значень',
+    calculateCountUniqueValues: 'Кількість унікальних значень',
+    calculateCountEmpty: 'Кількість порожніх',
+    calculateCountNotEmpty: 'Кількість не порожніх',
+    calculatePercentEmpty: 'Відсоток порожніх',
+    calculatePercentNotEmpty: 'Відсоток не порожніх',
   }
 };

package/src/components/button/1.html

@@ -1,30 +0,0 @@
-<div class="notion-overlay-container notion-default-overlay-container"
-     style="position: fixed; inset: 0px; z-index: 999; pointer-events: none; overflow: hidden;">
-    <div style="position: relative; z-index: 0;"></div>
-    <div data-overlay="true" style="pointer-events: auto; position: relative; z-index: 0;">
-        <div>
-            <div style="position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh;"></div>
-            <div style="position: fixed; left: 347px; top: 463.398px; pointer-events: none;">
-                <div style="width: 280px; height: 0px;"></div>
-                <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;">
-                    <div style="position: relative; top: 100%; pointer-events: auto;">
-                        <div style="display: flex; align-items: center; position: relative; flex-direction: column-reverse; transform-origin: 0% top; left: 0px; top: 0px;">
-                            <div role="dialog"
-                                 style="border-radius: 6px; background: white; backdrop-filter: none; position: relative; max-width: calc(-24px + 100vw); box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; overflow: visible; width: 280px; min-height: 34px; max-height: 634px; display: flex; flex-direction: column;">
-                                <div style="display: flex; flex-direction: column; overflow-y: auto; flex-grow: 1; height: 100%;">
-                                    <div style="padding: 6px 9px; font-size: 14px; min-height: 34px; display: flex; height: 100%; flex-direction: column; justify-content: space-between; flex-grow: 1; font-weight: 500;">
-                                        <div class="notranslate" spellcheck="true" placeholder=" "
-                                             data-content-editable-leaf="true" contenteditable="true"
-                                             style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47);">
-                                            d
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>