@itfin/components 1.3.39 → 1.3.41

package/package.json

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

package/src/ITFSettings.js

@@ -10,6 +10,7 @@ class ITFSettings {
     defaultLocale: 'en_US',
     defaultDisplayDateFormat: 'MM/dd/yyyy',
     // defaultDisplayDateFormat: 'dd.MM.yyyy',
+    currencies: []
   };
 
   get defaultLocale() {
@@ -20,6 +21,14 @@ class ITFSettings {
     this.options.defaultLocale = val;
   }
 
+  get currencies() {
+    return this.options.currencies;
+  }
+
+  set currencies(val) {
+    this.options.currencies = val;
+  }
+
   get supportLanguages() {
     return [
       { locale: 'en_US', name: 'English', dateFormat: 'MM/dd/yyyy' },

package/src/assets/scss/components/_text-field.scss

@@ -2,7 +2,10 @@
 
 .itf-text-field {
   &__input {
-    border-radius: $input-border-radius !important;
+    .addon + & {
+      border-top-left-radius: $input-border-radius !important;
+      border-bottom-left-radius: $input-border-radius !important;
+    }
     -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
 
     &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
@@ -27,7 +30,10 @@
     z-index: 10;
   }
   &__input {
-    border-radius: $input-border-radius !important;
+    .addon + & {
+      border-top-left-radius: $input-border-radius !important;
+      border-bottom-left-radius: $input-border-radius !important;
+    }
     resize: none;
   }
   &__autogrow &__input {

package/src/assets/scss/components/select/_dropdown-toggle.scss

@@ -16,6 +16,8 @@ $border-radius: $vs-border-radius;
   appearance: none;
   display: flex;
   white-space: normal;
+  height: 100%;
+  width: 100%;
 }
 
 .vs__selected-options {

package/src/components/datepicker/DatePickerInline.vue

@@ -39,6 +39,7 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: Boolean, default: false }) range;
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) maxDate;
   @Prop({
     type: Array,
     default: function () {
@@ -90,6 +91,7 @@ class itfDatePickerInline extends Vue {
       view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
       minView: this.minView,
       minDate: this.minDate,
+      maxDate: this.maxDate,
       selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
       onSelect: ({ date }) => {
         if (this.range && !this.calendar.rangeDateTo) {

package/src/components/datepicker/MonthPicker.vue

@@ -6,28 +6,29 @@
       </slot>
     </div>
     <input
-        ref="input"
-        readonly
-        :disabled="disabled"
-        class="form-control text-capitalize"
-        :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
-        @focus="onFocus"
-        @blur="onBlur"
-        :value="displayValue"
-        :placeholder="placeholder"
+      ref="input"
+      readonly
+      :disabled="disabled"
+      class="form-control text-capitalize"
+      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+      @focus="onFocus"
+      @blur="onBlur"
+      :value="displayValue"
+      :placeholder="placeholder"
     />
     <div style="display: none">
       <div ref="dropdown" class="itf-monthpicker__dropdown border rounded">
         <div>
           <itf-date-picker-inline
-              :value="value"
-              start-view="months"
-              min-view="months"
-              :min-date="minDate"
-              only-calendar
-              :display-format="displayFormat"
-              :value-format="valueFormat"
-              @input="selectInlineDate"
+            :value="value"
+            start-view="months"
+            min-view="months"
+            :min-date="minDate"
+            :max-date="maxDate"
+            only-calendar
+            :display-format="displayFormat"
+            :value-format="valueFormat"
+            @input="selectInlineDate"
           />
         </div>
         <slot name="after-calendar" />
@@ -57,6 +58,7 @@ class itfMonthPicker extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
   @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) maxDate;
   @Prop({ type: String, default: 'LLLL, yyyy' }) displayFormat;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;

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

@@ -42,6 +42,8 @@ storiesOf('Common', module)
       }
     },
     template: `<div>
+      <itf-app ref="app">
+
       <p>You need wrap whole application with this tag</p>
 
       <h2>Usage</h2>
@@ -57,8 +59,6 @@ storiesOf('Common', module)
 
       <h2>Example</h2>
 
-      <itf-app ref="app">
-
         <itf-form ref="form">
 
           <itf-icon name="project_tnm" size="32" />
@@ -71,6 +71,7 @@ storiesOf('Common', module)
 
                 <itf-select
                   :options="['tnm', 'fixed', 'nonprofit']"
+                  append-to-body
                   v-model="text">
 
                   <template #selected-option="{ option }">
@@ -96,7 +97,11 @@ storiesOf('Common', module)
             <div class="col-12">
               <itf-label :rules="[$v.emptyValidation()]" :value="text" label="Text field" required>
 
-                <itf-text-field v-model="text"></itf-text-field>
+                  <itf-text-field v-model="text">
+                    <template #addon>
+                      <span class="input-group-text" id="basic-addon1">@</span>
+                    </template>
+                  </itf-text-field>
 
               </itf-label>
             </div>

package/src/components/table/Table2.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="scrollable scrollable-x big-scrollbar" :class="{'permanent-checkboxes': selectedIds.length}">
+  <div class="itf-table2 scrollable scrollable-x" :class="{'permanent-checkboxes': selectedIds.length}">
     <itf-checkbox-group v-model="selectedIds">
       <template v-for="(group, index) in groups">
         <div class="table-view-body">
@@ -21,8 +21,11 @@
             :show-add-column="showAddColumn"
             :show-header="!noHeader"
             :schema="schema"
+            :editable="editable"
             :no-column-menu="noColumnMenu"
             :no-select-all="noSelectAll"
+            :currencies="currencies"
+            :currency="currency"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
           >
@@ -39,37 +42,6 @@
   </div>
 
 </template>
-<style lang="scss">
-.scrollable {
-  --itf-table-hover-bg: #f2f2f2;
-  --itf-table-min-width: 45px;
-
-  body[data-theme="dark"] & {
-    --itf-table-hover-bg: #393b41;
-  }
-
-  -webkit-overflow-scrolling: touch;
-  overflow: hidden scroll;
-
-  &.scrollable-x {
-    overflow-x: scroll;
-    padding-right: 4px;
-  }
-}
-.last-sticky-column:after {
-  content: '';
-  background: linear-gradient(to right,#dfe0e2,rgba(255,0,0,0));
-  height: 100%;
-  width: 6px;
-  position: absolute;
-  bottom: 0;
-  right: -7px;
-
-  body[data-theme="dark"] & {
-    background: linear-gradient(to right, #707070,rgba(255,0,0,0));
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import itfCheckboxGroup from '../checkbox/CheckboxGroup.vue';
@@ -77,6 +49,7 @@ import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
 import itfTableHeader from './TableHeader.vue';
+import './table2.scss';
 
 export default @Component({
   name: 'itfTable2',
@@ -95,9 +68,11 @@ class itfTable2 extends Vue {
   // @Prop({ required: true, type: Array }) columns;
   @Prop({ required: true, type: Array }) rows;
   @Prop({ type: String, default: null }) groupBy;
-  @Prop({ type: String, default: 'Id' }) idProperty;
+  @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;
+  @Prop() currency;
+  @Prop() currencies;
   @Prop(Boolean) addNewRows;
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;
@@ -107,6 +82,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) noHeader;
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
+  @Prop(Boolean) editable;
 
   state = {
     selectedIds: [],
@@ -166,10 +142,11 @@ class itfTable2 extends Vue {
 
   get groups() {
     const { groupBy, rows } = this;
-    if (!groupBy) {
-      return this.rows ? [{ name: '', rows: this.rows }] : []
+    const indexedRows = (rows || []).map((row, index) => ({ ...row, $index: index }));
+    if (!groupBy || !indexedRows.length) {
+      return [{ name: '', rows: indexedRows }]
     }
-    const groups = rows.reduce((acc, row) => {
+    const groups = indexedRows.reduce((acc, row) => {
       const group = row[groupBy];
       if (!acc[group]) {
         acc[group] = [];

package/src/components/table/TableBody.vue

@@ -4,7 +4,11 @@
     <div
       v-for="(item, n) in rows"
       :key="n"
-      group="items" data-test="table-item" class="table-view-item grouped draggable-item">
+      group="items"
+      data-test="table-item"
+      class="table-view-item grouped draggable-item"
+      :class="{'selected': selectedIds.includes(item[idProperty])}"
+    >
       <div class="table-row-template">
         <div accept-group="items" class="table-view-body-space"></div>
         <div class="shadow-area">
@@ -19,7 +23,8 @@
         </div>
         <div class="indicator sticky">
           <div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
-            <span>{{ item[idProperty] }}</span>
+            <span v-if="idProperty">{{ item[idProperty] }}</span>
+            <span v-else>{{ (n + 1) }}</span>
           </div>
           <div v-if="!noSelectAll" class="fill on-hover">
             <itf-checkbox :value="item[idProperty]" />
@@ -31,28 +36,28 @@
               v-if="column.visible !== false"
               :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">
+              :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
+              class="table-view-item-value d-flex h-100">
               <slot :name="`column.${column.property}`" :item="item" :column="column">
-                <template v-if="column.editable">
+                <template v-if="column.editable && editable">
                   <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"
+                      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="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)" />
+                    <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)" />
                   </slot>
                 </template>
-                <template v-else>
-                  <slot :name="`format.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                <div v-else>
+                  <slot :name="`format.${column.type}`" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
                     {{getValue(item, column)}}
                   </slot>
-                </template>
+                </div>
               </slot>
             </div>
           </template>
@@ -92,45 +97,6 @@
   flex-direction: row;
 }
 
-.table-view-item-value {
-  text-overflow: ellipsis;
-  background-color: var(--bs-body-bg);
-  border-right: 1px solid var(--bs-border-color);
-  border-bottom: 1px solid var(--bs-border-color);
-  align-items: stretch;
-  display: flex;
-  position: relative;
-  min-width: var(--itf-table-min-width);
-
-  &.highlight-drop-column {
-    position: relative;
-
-    &:after {
-      content: "";
-      height: 100%;
-      z-index: 100;
-      width: 2px;
-      background: #47beff;
-      margin-left: -1px;
-      position: absolute;
-      left: 0;
-    }
-    &.right:after {
-      left: auto;
-      right: 0;
-    }
-  }
-  &:hover {
-    background-color: var(--bs-tertiary-bg);
-  }
-
-  &.sticky {
-    z-index: 4;
-    position: -webkit-sticky;
-    position: sticky;
-  }
-}
-
 .table-item-inner .extra {
   flex-grow: 1;
   border-color: var(--bs-border-color);
@@ -143,9 +109,9 @@
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
-  background-color: var(--bs-body-bg);
+  background-color: var(--itf-table2-row-bg);
   //border-right: 1px solid var(--bs-border-color);
-  border-bottom: 1px solid var(--bs-border-color);
+  //border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,6 +167,7 @@
 
 .table-item-inner .boundary.right {
   left: auto;
+  border-right: 1px solid var(--itf-table-border-color);
   right: 0;
 }
 
@@ -255,6 +222,10 @@ class itfTableBody extends Vue {
   @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;
+  @Prop(Boolean) editable;
+  @Prop() selectedIds;
+  @Prop() currency;
+  @Prop() currencies;
 
   getValue(item, column) {
     return get(item, column.property);

package/src/components/table/TableGroup.vue

@@ -22,11 +22,8 @@
                   </span>
                   <span class="d-flex align-items-center line-overflow group-header-value"
                         data-test="group-value-group-label-value">
-                    {{ title }}
+                    <slot name="group-title" :rows="rows" :title="rows">{{ title }}</slot>
                   </span>
-                  <div data-test="table-group-item-count" class="table-group-item-count">
-                    {{ rows.length }}
-                  </div>
                 </a>
               </div>
             </div>
@@ -42,6 +39,7 @@
             :show-add-column="showAddColumn"
             :rows="rows"
             :schema="schema"
+            :editable="editable"
             :no-column-menu="noColumnMenu"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -57,8 +55,12 @@
             @update="$emit('update', $event)"
             :id-property="idProperty"
             :rows="rows"
+            :editable="editable"
+            :currency="currency"
+            :currencies="currencies"
             :columns="visibleColumns"
             :no-select-all="noSelectAll"
+            :selected-ids="selectedIds"
             :show-add-column="showAddColumn">
             <template v-for="(_, name) in $slots" #[name]="slotData">
               <slot :name="name" v-bind="slotData || {}"/>
@@ -74,8 +76,8 @@
              class="table-row-template 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 py-1 text-decoration-none">
-            <span class="d-sticky d-flex align-items-center">
+             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">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -89,6 +91,7 @@
           <div class="table-summary-columns d-flex tw-flex-row align-items-center">
             <span
               v-for="(column, n) in visibleColumns"
+              v-if="column.visible !== false"
               :key="n"
               :data-column="n"
               class="position-relative line-overflow"
@@ -203,13 +206,13 @@
     font-size: 1.25rem;
     border-left: 0;
     border-bottom: 0;
-    border-right: 1px solid var(--bs-border-color);
+    //border-right: 1px solid var(--bs-border-color);
 
     &.header-additional-column {
       border-radius: 0;
     }
     &:hover {
-      background: var(--hover-bg);
+      background: var(--itf-table-hover-bg);
     }
   }
 
@@ -228,7 +231,7 @@
 
   .table-group-item-count {
     padding: 0.125rem 0.5rem;
-    background-color: rgb(250 251 252 / 1);
+    //background-color: rgb(250 251 252 / 1);
     border-radius: 0.1875rem;
     font-weight: normal;
     font-size: 1rem;
@@ -243,17 +246,19 @@
   }
 
   .table-add-new-item {
-    border-right: 1px solid rgb(238 238 238 / 1);
-    border-bottom: 1px solid rgb(238 238 238 / 1);
+    border-right: 1px solid var(--itf-table-border-color);
+    border-bottom: 1px solid var(--itf-table-border-color);
     outline: none;
 
     & > span {
       left: var(--shadow-area-width);
       position: sticky;
       padding-left: var(--shadow-area-width);
+      border-left: 1px solid var(--itf-table-border-color);
+      height: 100%;
     }
     &:hover, &:active {
-      background: var(--hover-bg);
+      background: var(--itf-table-hover-bg);
     }
   }
 
@@ -272,7 +277,7 @@
       padding-right: .25rem;
     }
     .summary-text {
-      color: var(--bs-tertiary-color);
+      color: var(--itf-table-summary-text);
     }
     &.table-summary-persist .table-summary-column,
     &:hover .table-summary-column {
@@ -315,6 +320,8 @@ class itfTableGroup extends Vue {
   @Prop() selectedIds;
   @Prop() title;
   @Prop() idProperty;
+  @Prop() currency;
+  @Prop() currencies;
   @Prop(Boolean) showGrouping;
   @Prop(Boolean) showSummary;
   @Prop(Boolean) addNewRows;
@@ -324,6 +331,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) showHeader;
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
+  @Prop(Boolean) editable;
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
 
@@ -374,7 +382,7 @@ class itfTableGroup extends Vue {
   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: 'total', title: this.$t('components.table.calculateTotal'), summary: 'Total', func: (rows, column) => round(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);

package/src/components/table/TableHeader.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="itf-table-header" :class="{'no-header': !visibleHeader}">
+  <div class="itf-table2__header" :class="{'no-header': !visibleHeader}">
     <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>
@@ -33,11 +33,12 @@
                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>
-                <span :title="column.title[locale] || column.title['en_US']">
+                <span class="itf-table2__header-title" :title="column.title[locale] || column.title['en_US']">
                   <span v-if="column.icon" :class="column.icon"></span>
                   {{column.title[locale] || column.title['en_US']}}
+                  <div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
                 </span>
-<!--                <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
+                <!--                <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
               </template>
 
               <div v-if="column.sortable">
@@ -127,162 +128,6 @@
   </div>
 
 </template>
-<style lang="scss">
-.itf-table-header {
-  position: sticky;
-  top: 0;
-  z-index: calc(var(--row-count) + 1);
-
-  &.no-header {
-    --table-row-height: 0px;
-    --table-small-row-size: 0px;
-
-    .table-view-header-value {
-      border-top: 0 none;
-      border-bottom: 0 none;
-    }
-  }
-  .table-header.draggable-mirror{
-    z-index: 100000001;
-    background: rgba(235,237,239,0.75);
-  }
-  .table-row-template {
-    display: flex;
-    align-items: stretch;
-    height: var(--table-small-row-size);
-    user-select: none;
-  }
-  .table-view-header-value {
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    height: var(--table-row-height);
-    white-space: nowrap;
-    //border-top: 0;
-    border-top: 1px solid transparent;
-    border-left: 0;
-    border-right-width: thin;
-    border-bottom-width: thin;
-    border-style: solid;
-    position: relative;
-    display: flex;
-    min-width: var(--itf-table-min-width);
-    border-right-color: transparent;
-    border-bottom-color: var(--bs-border-color);
-    background-color: var(--bs-body-bg);
-    //background-color: rgb(238 238 238 / 1);
-    font-weight: 500;
-
-    &.last-sticky-column {
-      border-right-color: var(--bs-border-color);
-    }
-    &.reserved {
-      left: var(--shadow-area-width);
-      width: var(--indicator-area-width);
-    }
-    &.sticky {
-      position: sticky;
-      position: -webkit-sticky;
-      z-index: calc(var(--row-count) + 4);
-    }
-  }
-  .table-header {
-    flex: 0 0 auto;
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    gap: 0.25rem;
-    align-items: center;
-    & > div {
-      min-height: var(--table-row-height);
-      align-items: center;
-      justify-content: space-between;
-      display: flex;
-    }
-
-    &.table-header-add-column {
-      text-overflow: clip;
-    }
-  }
-  .resize-handle {
-    width: 4px;
-    height: var(--table-row-height);
-    position: absolute;
-    right: -2px;
-    top: 0;
-    background: #29ACE1;
-    border-radius: 2px;
-    z-index: 100;
-    opacity: 0;
-    cursor: ew-resize;
-    transition: .2s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-  .context-menu-toggle {
-    flex: 1 1 auto;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    span {
-      font-size: 12px;
-      line-height: 36px;
-    }
-  }
-  .itf-sortable-list {
-    display: flex;
-  }
-  .table-view-header-space {
-    height: 100%;
-    position: absolute;
-    left: 0;
-    display: none;
-    background: transparent;
-    z-index: 100;
-    width: 2px;
-    margin-left: -1px;
-
-    &.right {
-      left: auto;
-      right: 0;
-      top: 0;
-    }
-    &.active {
-      display: block;
-      &.over {
-        background: #47BEFF;
-      }
-    }
-  }
-  .draggable-mirror {
-    opacity: .5;
-  }
-  .draggable-container--over .table-view-header-space {
-    display: block;
-  }
-  .draggable-container--over .draggable--over .table-view-header-space {
-    background: #47BEFF;
-  }
-  .table-view-header-space > .table-view-header-dropzone {
-    position: absolute;
-    top: 0;
-    right: -50px;
-    bottom: 0;
-    left: -50px;
-  }
-  .table-view-header-value:not(.reserved):hover {
-    background-color: var(--bs-tertiary-bg);
-  }
-  .draggable-source--is-dragging {
-    z-index: 100;
-  }
-}
-</style>
 <script>
 import {Vue, Component, Prop, PropSync, Watch, Inject} from 'vue-property-decorator';
 import itfCheckbox from '../checkbox/Checkbox.vue';
@@ -323,6 +168,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) visibleHeader;
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
+  @Prop(Boolean) editable;
 
   @Watch('selectedIds')
   @Watch('rows')

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

@@ -1,8 +1,10 @@
 import { storiesOf } from '@storybook/vue';
+import ITFSettings from '../../ITFSettings';
 import itfApp from '../app/App.vue';
 import itfButton from '../button/Button.vue';
 import itfTable from './Table.vue';
 import itfTable2 from './Table2.vue';
+import itfSelect from '../select/Select.vue';
 
 const exampleData = [{
   Employee: 'Cool',
@@ -72,12 +74,17 @@ const exampleData = [{
   Notes: 'Test'
 }];
 
+ITFSettings.currencies = [
+  { Id: '1', Code: 'USD', Title: 'USD', IsDefault: true, Symbol: '$' }
+];
+
 storiesOf('Common', module)
   .add('Simple Table', () => ({
     components: {
       itfTable,
       itfButton,
-      itfTable2
+      itfTable2,
+      itfSelect
     },
     data() {
       return {
@@ -110,8 +117,8 @@ storiesOf('Common', module)
           {
             Id: 1,
             summary: true,
-            Description: 'Total',
-            EmployeeId: 'Vitalii Savchuk',
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
             Total: 100,
             FTE: 1.0,
             Position: { Title: 'Developer', Id: 1 },
@@ -131,7 +138,7 @@ storiesOf('Common', module)
             {
               "property": "Description",
               "title": { "en_US": "Description", "uk_UA": "Прізвище" },
-              "type": "textarea",
+              "type": "text",
               "editable": true,
               "sortable": false,
               width: 200,
@@ -140,7 +147,8 @@ storiesOf('Common', module)
             },
             {
               "property": "EmployeeId",
-              "title": { "en_US": "Employee", "uk_UA": "Імʼя" },
+              "title": { "en_US": "Employee full name", "uk_UA": "Імʼя" },
+              prefix: 'USD',
               "type": "employee",
               "copy": true,
               "editable": true,
@@ -331,8 +339,35 @@ storiesOf('Common', module)
           {{item.EmployeeId}}
         </template>
         <template #edit.employee="{ item }">
+          <itf-select
+            class="w-100"
+            v-model="item.EmployeeId"
+            :reduce="item => item.Id"
+            :get-option-label="item => item.Name"
+            :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
+        </template>
+      </itf-table2>
+
+      <itf-table2
+        editable
+        add-new-rows
+        @new="onAdd"
+        state-name="test"
+        :schema="schema"
+        :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>
+        <template #edit.employee="{ item }">
+          <itf-select
+            class="w-100"
+            v-model="item.EmployeeId"
+            :reduce="item => item.Id"
+            :get-option-label="item => item.Name"
+            :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
+        </template>
       </itf-table2>
 
       <br />
@@ -439,7 +474,7 @@ storiesOf('Common', module)
         list2: [
           {
             summary: true,
-            Employee: 'Total',
+            Employee: 'Total asda das dasd ada dad adaddas',
             Total: 100,
             FTE: 1.0,
             Position: 'Developer',

package/src/components/table/table.js

@@ -0,0 +1,16 @@
+class Table {
+
+}
+
+class TableGroup {
+  header = null;
+  data = null;
+}
+
+class TableHeader {
+
+}
+
+class TableData {
+
+}

package/src/components/table/table2.scss

@@ -0,0 +1,271 @@
+.itf-table2 {
+  --itf-table-border-color: #dbddd1;
+  --itf-table-header-bg: #f9faf5;
+  --itf-table-hover-header-bg: var(--bs-tertiary-bg);
+  --itf-table-hover-bg: #f2f2f2;
+  --itf-table-bg: var(--bs-body-bg);
+  --itf-table-min-width: 45px;
+  --itf-table-input-border-color: #aaaba6;
+  --itf-table-input-focus-border-color: #0028aa;
+  --itf-table-selected-bg: #cbd6f4;
+  --itf-table-header-subtitle-color: #aeafaa;
+  --itf-table-summary-text: var(--bs-tertiary-color);
+
+  // dark
+  body[data-theme="dark"] & {
+    --itf-table-hover-bg: #393b41;
+    --itf-table-header-bg: #0f0f0f;
+    --itf-table-hover-header-bg: #252525;
+    --itf-table-border-color: var(--bs-card-border-color);
+    --itf-table-input-focus-border-color: #252525;
+    --itf-table-selected-bg: #011534;
+    --itf-table-summary-text: #82909d80;
+  }
+
+  &.scrollable {
+    -webkit-overflow-scrolling: touch;
+    overflow: hidden scroll;
+  }
+  &.scrollable-x {
+    overflow-x: scroll;
+    padding-right: 4px;
+  }
+
+  &__header {
+    background-color: var(--itf-table-header-bg);
+    position: sticky;
+    top: 0;
+    z-index: calc(var(--row-count) + 1);
+
+    &.no-header {
+      --table-row-height: 0px;
+      --table-small-row-size: 0px;
+
+      .table-view-header-value {
+        border-top: 0 none;
+        border-bottom: 0 none;
+      }
+    }
+    .table-header.draggable-mirror{
+      z-index: 100000001;
+      background: rgba(235,237,239,0.75);
+    }
+    .table-row-template {
+      display: flex;
+      align-items: stretch;
+      height: auto;
+      user-select: none;
+    }
+    .table-view-header-value {
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+      white-space: nowrap;
+      //border-top: 0;
+      border-top: 1px solid var(--itf-table-border-color);
+      border-left: 0;
+      border-right: 1px solid var(--itf-table-border-color);
+      border-bottom: 1px solid var(--itf-table-border-color);
+      position: relative;
+      display: flex;
+      min-width: var(--itf-table-min-width);
+      background-color: var(--itf-table-header-bg);
+      //background-color: var(--bs-body-bg);
+      //background-color: rgb(238 238 238 / 1);
+      //font-weight: 500;
+
+      &.last-sticky-column {
+        border-right-color: var(--bs-border-color);
+      }
+      &.reserved {
+        border-left: 1px solid var(--itf-table-border-color);
+        left: var(--shadow-area-width);
+        width: var(--indicator-area-width);
+      }
+      &.sticky {
+        position: sticky;
+        position: -webkit-sticky;
+        z-index: calc(var(--row-count) + 4);
+      }
+    }
+    .table-header {
+      flex: 0 0 auto;
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      padding-left: 0.75rem;
+      padding-right: 0.5rem;
+      gap: 0.25rem;
+      align-items: center;
+      & > div {
+        min-height: var(--table-row-height);
+        align-items: center;
+        justify-content: space-between;
+        display: flex;
+      }
+
+      &.table-header-add-column {
+        text-overflow: clip;
+      }
+    }
+    .resize-handle {
+      width: 4px;
+      bottom: 0;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      background: #29ACE1;
+      border-radius: 2px;
+      z-index: 100;
+      opacity: 0;
+      cursor: ew-resize;
+      transition: .2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+    .context-menu-toggle {
+      flex: 1 1 auto;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      span {
+        font-size: 12px;
+        line-height: 36px;
+      }
+    }
+    .itf-sortable-list {
+      display: flex;
+    }
+    .table-view-header-space {
+      height: 100%;
+      position: absolute;
+      left: 0;
+      display: none;
+      background: transparent;
+      z-index: 100;
+      width: 2px;
+      margin-left: -1px;
+
+      &.right {
+        left: auto;
+        right: 0;
+        top: 0;
+      }
+      &.active {
+        display: block;
+        &.over {
+          background: #47BEFF;
+        }
+      }
+    }
+    .draggable-mirror {
+      opacity: .5;
+    }
+    .draggable-container--over .table-view-header-space {
+      display: block;
+    }
+    .draggable-container--over .draggable--over .table-view-header-space {
+      background: #47BEFF;
+    }
+    .table-view-header-space > .table-view-header-dropzone {
+      position: absolute;
+      top: 0;
+      right: -50px;
+      bottom: 0;
+      left: -50px;
+    }
+    .table-view-header-value:not(.reserved):hover {
+      background-color: var(--itf-table-hover-header-bg);
+    }
+    .draggable-source--is-dragging {
+      z-index: 100;
+    }
+  }
+
+  &__subtitle {
+    color: var(--itf-table-header-subtitle-color);
+  }
+
+  .table-view-item {
+    --itf-table2-row-bg: var(--itf-table-bg);
+
+    background-color: var(--itf-table2-row-bg);
+
+    &.selected {
+      --itf-table2-row-bg: var(--itf-table-selected-bg);
+    }
+    &:hover {
+      --itf-table2-row-bg: var(--itf-table-selected-bg);
+    }
+
+    .indicator {
+      border-left: 1px solid var(--itf-table-border-color);
+    }
+  }
+
+
+  &:hover {
+    .table-view-item-value.editable {
+      .form-control {
+        border: 1px solid var(--itf-table-input-border-color);
+      }
+    }
+  }
+  .table-view-item-value {
+    text-overflow: ellipsis;
+    align-items: stretch;
+    display: flex;
+    position: relative;
+    min-width: var(--itf-table-min-width);
+    background: var(--itf-table2-row-bg);
+
+    .itf-table2__striped & {
+      border-right: 1px solid var(--bs-border-color);
+      border-bottom: 1px solid var(--bs-border-color);
+    }
+
+    &.editable {
+      padding: 2px;
+
+      .form-control {
+        border-radius: 0;
+        border: 1px solid transparent;
+        background-color: transparent;
+        box-shadow: none;
+
+        &:focus {
+          border-color: var(--itf-table-input-focus-border-color);
+        }
+      }
+    }
+
+    &.highlight-drop-column {
+      position: relative;
+
+      &:after {
+        content: "";
+        height: 100%;
+        z-index: 100;
+        width: 2px;
+        background: #47beff;
+        margin-left: -1px;
+        position: absolute;
+        left: 0;
+      }
+      &.right:after {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    &.sticky {
+      z-index: 4;
+      position: -webkit-sticky;
+      position: sticky;
+    }
+  }
+}

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

@@ -15,9 +15,9 @@
     </div>
 
     <div v-if="currencySelect" class="itf-money-field__currency">
-      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled" name="chevron_down" /></span>
+      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
       <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
-        <option v-for="currency in currencies" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
+        <option v-for="currency in currenciesList" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
           {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
         </option>
       </select>
@@ -77,6 +77,7 @@ import itfSelect from '../select/Select';
 import itfLabel from '../form/Label';
 import itfIcon from '../icon/Icon';
 import {stringToNumber} from '../../helpers/formatters';
+import ITFSettings from '../../ITFSettings';
 
 export default @Component({
   name: 'itfMoneyField',
@@ -101,6 +102,10 @@ class itfMoneyField extends Vue {
   @Prop({ type: Number, default: -1000000000}) minValue;
   @Prop({ type: Number, default: 1000000000}) maxValue;
 
+  get currenciesList() {
+    return this.currencies?.length ? this.currencies : ITFSettings.currencies;
+  }
+
   get mask() {
     return {
       mask: Number,
@@ -128,11 +133,11 @@ class itfMoneyField extends Vue {
   }
 
   onCurrencyChanged(e) {
-    const currency = this.currencies.find((c) => c.Id === parseInt(e.target.value));
+    const currency = this.currenciesList.find((c) => c.Id === parseInt(e.target.value));
     this.$emit('update:currency', currency)
   }
 
-  get  precition() {
+  get precition() {
     return this.selectedCurrency ? this.selectedCurrency.Precision : 2;
   }
 
@@ -149,10 +154,10 @@ class itfMoneyField extends Vue {
   }
 
   get selectedCurrency() {
-    if (!this.currency || !this.currencies) {
-      return null;
+    if (!this.currency || !this.currenciesList) {
+      return this.currenciesList.find(({ IsDefault }) => IsDefault) || null;
     }
-    return this.currencies.find(({ Id }) => this.currency.Id === Id);
+    return this.currenciesList.find(({ Id }) => this.currency.Id === Id);
   }
 
   setValue (val) {

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

@@ -1,11 +1,11 @@
 <template>
 
   <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
-    <div class="addon" v-if="prependIcon || $slots.addon">
-      <slot name="addon">
+    <slot name="addon">
+      <div class="addon" v-if="prependIcon">
         <itf-icon :name="prependIcon"/>
-      </slot>
-    </div>
+      </div>
+    </slot>
 
     <input
       ref="input"

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

@@ -5,7 +5,7 @@
       <slot></slot>
     </div>
 
-    <div class="position-relative input-group">
+    <div class="position-relative" :class="{'input-group': prependIcon}">
       <div class="addon" v-if="prependIcon">
         <slot name="addon">
           <itf-icon :name="prependIcon"/>