@itfin/components 1.2.92 → 1.2.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.92",
+  "version": "1.2.94",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -24,24 +24,23 @@
     "@popperjs/core": "^2.11.8",
     "@shopify/draggable": "^1.0.0-beta.8",
     "@vue/cli-service": "^5.0.1",
-    "@vue/composition-api": "^1.7.1",
     "air-datepicker": "^3.3.5",
-    "bootstrap": "^5.2.3",
-    "core-js": "^3.7.0",
+    "bootstrap": "^5.3.0",
+    "core-js": "^3.31.1",
     "debug": "^4.2.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
-    "pdfjs-dist": "^2.10.377",
+    "pdfjs-dist": "^3.8.162",
     "tippy.js": "^6.3.2",
-    "vue": "^2.6.12",
     "vue-imask": "^6.6.3",
     "vue-property-decorator": "^9.1.2",
     "vue-swatches": "^2.1.1",
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.19.1",
+    "vue": "^2.6.12",
+    "@babel/eslint-parser": "^7.22.9",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
     "@storybook/addon-docs": "=6.3.8",
@@ -53,10 +52,10 @@
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/test-utils": "^1.1.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.30.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^8.45.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.9.0",
+    "eslint-plugin-vue": "^9.15.1",
     "fibers": "^5.0.0",
     "marked": "^4.2.5",
     "sass": "^1.29.0",

package/src/assets/scss/_bootstrap.scss

@@ -3,6 +3,7 @@
 
 // Include remainder of required Bootstrap stylesheets
 @import "~bootstrap/scss/variables.scss";
+$enable-dark-mode: false;
 @import "~bootstrap/scss/mixins.scss";
 @import "~bootstrap/scss/maps.scss";
 @import "~bootstrap/scss/utilities.scss";
@@ -31,4 +32,4 @@ $utilities: map-merge(
       ),
     )
 );
-//@import "~bootstrap/scss/utilities/api"; // створює дублікати класів, які вже є в bootstrap
+//@import "~bootstrap/scss/utilities/api"; // створює дублікати класів, які вже є в bootstrap

package/src/assets/scss/main.scss

@@ -50,11 +50,11 @@
 
 kbd {
   background-color: rgba(0, 0, 0, .15) !important;
-  color: #000 !important;
+  color: var(--bs-body-color) !important;
   font-size: .75rem !important;
 
   [data-theme="dark"] &, .btn-primary & {
     background-color: rgba(255, 255, 255, .25) !important;
-    color: #fff !important;
+    color: var(--bs-primary-color) !important
   }
 }

package/src/components/customize/Inline/Select.vue

@@ -0,0 +1,52 @@
+<template>
+  <itf-select
+    ref="input"
+    class="itf-inline-edit flex-grow-1"
+    role="button"
+    :placeholder="focused ? 'Search for an option...' : 'Empty'"
+    :tabindex="1"
+    :disabled="!editable"
+    :options="field && field.Options"
+    :reduce="option => option.Name"
+    :get-option-label="option => option.Name"
+    @search:focus="$emit('focus')"
+    @search:blur="$emit('blur')">
+    <template #option="{ option }">
+      <div>{{ option.Name }}</div>
+    </template>
+  </itf-select>
+</template>
+<style lang="scss">
+.itf-inline-edit.itf-select .form-control {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  min-height: auto;
+  padding: 0.1rem 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  box-shadow: none !important;
+  background: transparent !important;
+}
+</style>
+<script>
+import {Vue, Component, Model, Watch, Prop} from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+import itfSelect from '../../select/Select.vue';
+
+export default @Component({
+  name: 'itfCustomizeInlineSelect',
+  components: {
+    itfTextField,
+    itfSelect
+  }
+})
+
+class itfCustomizeInlineSelect extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) focused;
+  @Prop(Boolean) editable;
+  @Prop() field;
+}
+</script>

package/src/components/customize/PropertyInlineEdit.vue

@@ -1,17 +1,16 @@
 <template>
-  <div>
-    <component
-      v-if="component"
-      :is="component"
-      :value="value"
-      :field="field"
-      :focused="focused"
-      :editable="editable"
-      @input="$emit('input', $event)"
-      @focus="$emit('focus')"
-      @blur="$emit('blur')"
-    />
-  </div>
+  <component
+    v-if="component"
+    class="h-100 w-100 d-flex align-items-center"
+    :is="component"
+    :value="value"
+    :field="field"
+    :focused="focused"
+    :editable="editable"
+    @input="$emit('input', $event)"
+    @focus="onFocus(); $emit('focus')"
+    @blur="onBlur(); $emit('blur')"
+  />
 </template>
 <script>
 import { Vue, Component, Model, Prop } from 'vue-property-decorator';
@@ -33,6 +32,16 @@ class itfPropertyInlineEdit extends Vue {
   @Prop(Boolean) focused;
   @Prop(Boolean) editable;
 
+  isFocused = false;
+
+  onFocus() {
+    this.isFocused = true;
+  }
+
+  onBlur() {
+    this.isFocused = false;
+  }
+
   get component() {
     if (!this.field) {
       return null;

package/src/components/customize/constants.js

@@ -1,9 +1,11 @@
 import InlineText from './Inline/Text';
 import InlineDate from './Inline/Date';
 import InlineMultiselect from './Inline/Multiselect.vue';
+import InlineSelect from './Inline/Select.vue';
 
 export const INLINE_TYPES = [
   { Type: 'text', Name: 'Text', Icon: 'type_text', Component: InlineText },
   { Type: 'date', Name: 'Date', Icon: 'type_date', Component: InlineDate },
   { Type: 'multiselect', Name: 'Multiselect', Icon: 'type_multiselect', Component: InlineMultiselect },
+  { Type: 'select', Name: 'Select', Icon: 'type_select', Component: InlineSelect },
 ];

package/src/components/modal/ItemEditor.vue

@@ -152,6 +152,9 @@ class itfItemEditor extends Vue {
       this.$refs.modal.scrollModalTop();
       return;
     }
+    if (this.loading) {
+      return;
+    }
 
     this.loading = true;
     this.showError = false;

package/src/components/select/Select.vue

@@ -626,7 +626,8 @@ export default {
       default(dropdownList, component, { width, top, left }) {
         dropdownList.style.top = top
         dropdownList.style.left = left
-        dropdownList.style.width = width
+        dropdownList.style.minWidth = width
+        dropdownList.style.width = 'max-content';
       },
     },
     /**

package/src/components/table/Table2.vue

@@ -0,0 +1,48 @@
+<template>
+
+  <div class="scrollable scrollable-x big-scrollbar">
+    <itf-table-group
+      :columns="columns"
+      :rows="rows"
+      :add-new-rows="addNewRows"
+    >
+      <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-group>
+  </div>
+
+</template>
+<style lang="scss">
+//.scrollable {
+//  -webkit-overflow-scrolling: touch;
+//  overflow: hidden auto;
+//
+//  &.scrollable-x {
+//    overflow-x: auto;
+//  }
+//}
+</style>
+<script>
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfTableGroup from './TableGroup.vue';
+
+export default @Component({
+  name: 'itfTable2',
+  components: {
+    itfButton,
+    itfIcon,
+    itfTableGroup
+  }
+})
+class itfTable2 extends Vue {
+  @Prop({ required: true, type: Array }) columns;
+  @Prop({ required: true, type: Array }) rows;
+  @Prop(Boolean) addNewRows;
+}
+</script>

package/src/components/table/TableBody.vue

@@ -38,11 +38,13 @@
           </div>
         </div>
         <div accept-group="items" class="hbox table-item-inner">
-          <div v-for="(column, n) in columns" :data-column="n" :style="`width: ${column.width}px`">
-            <div
-              class="table-view-item-value tw-flex tw-relative tw-h-full tw-border-b tw-border-r tw-border-gray tw-bg-white dark:tw-bg-white-invert dark:tw-border-gray-invert hover:tw-bg-light dark:hover:tw-bg-gray-invert tw-items-stretch">
-              {{ item.Name }}
-            </div>
+          <div v-for="(column, n) in columns" :data-column="n" :style="`width: ${column.width}px`" class="table-view-item-value d-flex position-relative h-100 align-items-stretch px-2">
+            <slot :name="`column.${column.name}`" :item="item" :column="column">
+              <template v-if="editTypes[column.Type]">
+                <property-inline-edit :value="item[column.field]" :field="column" editable focused />
+              </template>
+              <div v-else v-text="item.Name" />
+            </slot>
           </div>
 
           <div class="table-view-item-value extra"></div>
@@ -79,6 +81,7 @@
   height: 100%;
   display: flex;
   position: relative;
+  line-height: 35px;
 
   &:hover {
     background-color: rgb(250 251 252 / 1);
@@ -101,6 +104,9 @@
   background-color: rgb(255 255 255 / 1);
   border-right: 1px solid rgb(238 238 238 / 1);
   border-bottom: 1px solid rgb(238 238 238 / 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .table-item-inner .boundary {
@@ -140,23 +146,44 @@
 .vue-recycle-scroller {
   position: relative;
 }
+.resize-observer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+}
 </style>
-
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { RecycleScroller } from 'vue-virtual-scroller'
+import PropertyInlineEdit from '../customize/PropertyInlineEdit.vue';
+import { INLINE_TYPES } from '@/components/customize/constants';
 
 export default @Component({
   name: 'itfTableBody',
   components: {
-    RecycleScroller
+    RecycleScroller,
+    PropertyInlineEdit
   }
 })
 class itfTableBody extends Vue {
   @Prop() columns;
   @Prop() rows;
 
+  editTypes = {};
+
   mounted() {
+    for (const { Type } of INLINE_TYPES) {
+      this.editTypes[Type] = true;
+    }
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -2,11 +2,10 @@
 
   <div class="itf-table-group table-small-row">
     <!-- Тут показується лінія при драг н дропі -->
-    <div accept-group="tablegroups" class="preline over">
+    <div accept-group="tablegroups" class="preline">
       <div class="line"></div>
     </div>
 
-
     <div data-test="table-group-wrapper" class="table-group-wrapper" :style="`--row-count: ${isShowTable ? rows.length : 0}`">
       <div class="">
         <div data-test="table-group" class="position-relative me-4">
@@ -18,11 +17,11 @@
                   <a href="" class="collapse-arrow" @click.prevent="toggleGroup">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'" />
                   </a>
-                  <a href="" class="d-flex align-items-center line-overflow group-header-value" data-test="group-value-group-label-value">
+                  <span class="d-flex align-items-center line-overflow group-header-value" data-test="group-value-group-label-value">
                     <span title="To Do" class="badge text-decoration-none" style="background-color: #FFA2A2; color: #4C4E69;">To Do</span>
-                  </a>
+                  </span>
                   <div data-test="table-group-item-count" class="table-group-item-count">
-                    16
+                    {{rows.length}}
                   </div>
                 </div>
               </div>
@@ -32,25 +31,32 @@
           <!-- Сама таблиця -->
           <div v-if="isShowTable" class="table-view-body">
             <itf-table-header :columns="columns" />
-            <itf-table-body :rows="rows" :columns="columns" />
+            <itf-table-body :rows="rows" :columns="columns">
+              <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-body>
           </div>
 
           <!-- Лінія додати нову -->
-          <div v-if="isShowTable" data-v-54c5481c="" data-v-1fb25116=""
-               class="table-row-template tw-flex tw-items-stretch tw-h-[var(--table-small-row-size)]">
-            <div data-v-54c5481c="" class="tw-bg-light dark:tw-bg-light-invert shadow-area"></div>
-            <a data-v-54c5481c="" href="" data-test="table-add-new-item"
-               class="tw-flex tw-items-center tw-flex-grow tw-rounded-b tw-border-b-1 tw-border-r-1 tw-border-gray dark:tw-border-gray-invert tw-bg-white dark:tw-bg-white-invert hover:tw-bg-gray dark:hover:tw-bg-gray-invert tw-text-blue"><span
-              data-v-54c5481c=""
-              class="tw-sticky tw-left-[var(--shadow-area-width)] tw-flex tw-items-center tw-gap-3 tw-px-4"><i
-              data-v-54c5481c="" class="ic-plus"></i> <span
-              data-v-54c5481c="">Add new row</span></span></a></div>
+          <div v-if="isShowTable && addNewRows" class="table-row-template d-flex align-items-stretch">
+            <div class="shadow-area"></div>
+            <a href="" data-test="table-add-new-item" class="d-flex align-items-center flex-grow-1 table-add-new-item">
+              <span class="d-sticky d-flex align-items-center px-2">
+                <itf-icon name="plus" />
+                <span>Add new row</span>
+              </span>
+            </a>
+          </div>
+
           <!-- Групування -->
-          <div v-if="isShowTable" data-v-54c5481c="" data-v-1fb25116=""
-               class="table-row-template tw-flex tw-items-stretch tw-h-[var(--table-small-row-size)] table-summary">
-            <div data-v-54c5481c="" class="tw-bg-light dark:tw-bg-light-invert shadow-area"></div>
-            <div data-v-54c5481c=""
-                 class="tw-flex tw-flex-row tw-items-center tw-ml-[var(--indicator-area-width)]"><span
+          <div v-if="showGrouping"
+               class="table-row-template d-flex align-items-stretch tw-h-[var(--table-small-row-size)] table-summary">
+            <div class="tw-bg-light dark:tw-bg-light-invert shadow-area"></div>
+            <div class="d-flex tw-flex-row align-items-center tw-ml-[var(--indicator-area-width)]"><span
               data-v-54c5481c="" data-column="0" class="tw-relative line-overflow"
               style="width: 400px;"><a href=""
                                        class="context-menu-toggle tw-w-full tw-text-gray dark:tw-text-gray-invert tw-text-sm tw-flex tw-pr-3 tw-flex tw-items-stretch tw-justify-end"
@@ -112,6 +118,13 @@
   --shadow-area-width: 45px;
   --indicator-area-width: 38px;
 
+  flex-direction: column;
+  min-width: 100%;
+  display: flex;
+  width: fit-content;
+  margin-top: 20px;
+  margin-bottom: 20px;
+
   .preline {
     display: flex;
     align-items: center;
@@ -140,6 +153,7 @@
     position: sticky;
     left: 0;
     background: #fff;
+    border-right: 1px solid rgb(238, 238, 238);
   }
   .header-wrapper:not(.collapsed *) {
     flex-grow: 1;
@@ -174,14 +188,8 @@
     background-color: rgb(250 251 252 / 1);
     border-radius: 0.1875rem;
   }
-  .vue-recycle-scroller__item-wrapper {
-    -webkit-box-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
+  .table-view-wrapper .vue-recycle-scroller__item-wrapper {
+    overflow: visible;
   }
   .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
     width: 100%;
@@ -195,6 +203,18 @@
     left: 0;
     will-change: transform;
   }
+  .table-row-template {
+    height: var(--table-small-row-size);
+  }
+  .table-add-new-item {
+    border-right: 1px solid rgb(238 238 238 / 1);
+    border-bottom: 1px solid rgb(238 238 238 / 1);
+
+    & > span {
+      left: var(--shadow-area-width);
+      position: sticky;
+    }
+  }
 }
 </style>
 <script>
@@ -216,6 +236,8 @@ export default @Component({
 class itfTableGroup extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop(Boolean) showGrouping;
+  @Prop(Boolean) addNewRows;
 
   isShowTable = true;
 

package/src/components/table/TableHeader.vue

@@ -7,38 +7,40 @@
       <div class="table-view-header-value reserved sticky"></div>
 
         <div v-for="(column, n) in sortedColumns" :key="n" data-test="table-header-column" :data-column="n" :data-id="column.Id"
-             class="table-view-header-value" style="width: 100px; left: 0px;">
+             class="table-view-header-value" :style="`width: ${column.width}px; left: 0px;`">
           <div accept-group="tablecolumns" class="table-view-header-space">
             <div class="table-view-header-dropzone"></div>
           </div>
-          <div group="tablecolumns" class="table-header draggable-item drag-handle" data-draggable-mirror="{&quot;yAxis&quot;:false}">
-            <a href="" class="context-menu-toggle tw-flex-auto line-overflow">
-              <span title="Name">
-                <itf-icon name="type_select" :size="16" /> {{n}}
+          <div group="tablecolumns" class="table-header draggable-item drag-handle">
+            <span href="" class="context-menu-toggle flex-auto line-overflow">
+              <span :title="column.text">
+<!--                <itf-icon name="type_select" :size="16" />-->
+                {{column.text}}
               </span>
-            </a>
+            </span>
           </div>
-          <div ref="resizeHandle" class="resize-handle"></div>
+          <div v-if="columnResizing" ref="resizeHandle" class="resize-handle"></div>
         </div>
 
-      <div class="table-view-header-value">
-        <div data-v-14c77b30="" class="attribute-creator" data-v-54c5481c="">
-          <div data-v-fd8e8e6a="" data-test="dropdown"
-               class="dropdown-body tw-relative tw-cursor-pointer tw-w-full"><!---->
-            <div data-v-fd8e8e6a="" tabindex="0" data-test="dropdown-toggle">
-              <div data-v-fd8e8e6a=""
-                   class="hbox tw-flex-auto tw-items-center tw-justify-center"><a
-                data-v-14c77b30="" data-v-fd8e8e6a="" href=""
-                data-test="table-header-add-column" class="tw-text-blue tw-mx-4"><span
-                data-v-14c77b30="" data-v-fd8e8e6a="" class="ic-plus"></span>
-                Add column
-              </a></div>
+      <!--div class="table-view-header-value">
+        <div class="attribute-creator">
+          <div data-test="dropdown"
+               class="dropdown-body tw-relative tw-cursor-pointer tw-w-full">
+            <div tabindex="0" data-test="dropdown-toggle">
+              <div class="hbox tw-flex-auto tw-items-center tw-justify-center">
+                <a href="" data-test="table-header-add-column" class="tw-text-blue tw-mx-4">
+                  <span class="ic-plus"></span>
+                  Add column
+                </a>
+              </div>
             </div>
-            <span data-v-b4d986ec="" data-v-fd8e8e6a="" style="display: none;"> <div
-              data-v-b4d986ec="" class="context-modal-backdrop"></div><div
-              data-v-b4d986ec="" class="context-modal tw-min-w-[280px]"><!----> <!---->
-              <!----></div></span></div> <!----></div>
-      </div>
+            <span style="display: none;">
+              <div class="context-modal-backdrop"></div>
+              <div class="context-modal tw-min-w-[280px]"></div>
+            </span>
+          </div>
+        </div>
+      </div-->
     </div>
   </div>
 
@@ -161,7 +163,7 @@
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
-import { Draggable, Droppable } from '@shopify/draggable';
+import { Draggable, Droppable, Sortable } from '@shopify/draggable';
 
 export default @Component({
   name: 'itfTableHeader',
@@ -172,24 +174,28 @@ export default @Component({
 })
 class itfTable extends Vue {
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
+  @Prop(Boolean) columnSorting;
+  @Prop(Boolean) columnResizing;
 
-  mounted() {
-    const draggable = new Draggable(this.$refs.container, {
-      draggable: '[group="tablecolumns"]',
+  initDraggable() {
+    const draggable = new Sortable(this.$refs.container, {
+      // draggable: '[group="tablecolumns"]',
+      draggable: '[data-test="table-header-column"]',
       mirror: {
         yAxis: false,
         appendTo: this.$refs.container
       }
     });
-    const droppable = new Droppable(this.$refs.container, {
-      draggable: '[group="tablecolumns"]',
-      dropzone: '[accept-group="tablecolumns"]'
-    });
+    // const droppable = new Droppable(this.$refs.container, {
+    //   draggable: '[group="tablecolumns"]',
+    //   dropzone: '[accept-group="tablecolumns"]'
+    // });
     draggable.on('drag:stop', (event) => {
       console.info('dropped', event);
     });
+  }
 
-    // resize
+  initResizing() {
     const resizeHandle = this.$refs.resizeHandle;
     resizeHandle.forEach((handle) => {
       handle.addEventListener('mousedown', (event) => {
@@ -216,6 +222,15 @@ class itfTable extends Vue {
     });
   }
 
+  mounted() {
+    if (this.columnSorting) {
+      this.initDraggable();
+    }
+    if (this.columnResizing) {
+      this.initResizing();
+    }
+  }
+
   changeColumn(index, params) {
     console.info(index, params);
   }

package/src/components/table/TableRow.vue

@@ -14,8 +14,7 @@
           class="ic-drag"></i>
         </div> <!----></a></div>
     </div>
-    <div
-      class="indicator sticky border-gray dark:border-gray-invert border-r bg-white dark:bg-white-invert border-b ">
+    <div class="indicator">
       <div class="fill on-rest table-view-row-count"><span
       >1</span></div>
       <div class="fill on-hover"><a

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

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import itfApp from '../app/App.vue';
 import itfButton from '../button/Button.vue';
 import itfTable from './Table.vue';
-import itfTableGroup from './TableGroup.vue';
+import itfTable2 from './Table2.vue';
 
 const exampleData = [{
   Employee: 'Cool',
@@ -77,82 +77,41 @@ storiesOf('Common', module)
     components: {
       itfTable,
       itfButton,
-      itfTableGroup
+      itfTable2
     },
     data() {
       return {
-        list: Array.from({length: 30}).map((_, i) => ({
+        list: Array.from({length: 10}).map((_, i) => ({
           Id: i,
+          text: `Рахунок`,
           Name: `Item #${i}`
         })),
         columns: [{
-          text: 'Employee',
-          name: 'Employee',
+          text: 'Рахунок',
+          name: 'Account',
           width: 200,
           min: 250,
           max: 250
         }, {
-          text: 'Total',
+          text: 'Dr',
           name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: '10.10.12.31 - test фів фівіф в вфів фвф' }
+          ],
           width: 200,
           min: 150,
           max: 150
         }, {
-          text: 'FTE',
-          name: 'FTE',
-          width: 200,
-          min: 100,
-          max: 100
-        }, {
-          text: 'Position',
-          name: 'Position',
-          width: 200,
-          min: 200,
-          max: 200
-        }, {
-          text: 'Office',
-          name: 'Office',
-          width: 200,
-          min: 150,
-          max: 150
-        }, {
-          text: 'Internal',
-          name: 'MinutesInternal',
-          width: 200,
-          min: 150,
-          max: 150,
-          sortable: true
-        }, {
-          text: 'External',
-          name: 'MinutesExternal',
-          width: 200,
-          min: 150,
-          max: 150,
-          sortable: true
-        }, {
-          text: 'Compensation (Internal)',
-          name: 'AmountInternal',
-          width: 200,
-          min: 200,
-          max: 200
-        }, {
-          text: 'Compensation (External)',
-          name: 'AmountExternal',
-          width: 200,
-          min: 150,
-          max: 150
-        }, {
-          text: 'Bonus/Commission',
-          name: 'AmountShare',
+          text: 'Cr',
+          name: 'Total',
+          Type: 'select',
+          Options: [
+            { Id: 1, Name: 'test' }
+          ],
           width: 200,
           min: 150,
           max: 150
-        }, {
-          text: 'Actions',
-          name: 'Notes',
-          width: 200,
-          min: 80,
-          max: 80
         }]
       }
     },
@@ -172,9 +131,14 @@ storiesOf('Common', module)
 
       <h3>Example</h3>
 
-      <itf-table-group :columns="columns" :rows="list" />
-
-      <itf-table-group :columns="columns" :rows="list" />
+      <itf-table2 :columns="columns" :rows="list">
+        <template #column.Account="{ item }">
+          {{item.text}}
+        </template>
+        <template #column.FTE="{ item }">
+          {{item}}
+        </template>
+      </itf-table2>
 
       <!--itf-table
         :columns="columns"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled}">
+  <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>
       <itf-text-field
@@ -27,15 +27,19 @@
 
   .itf-text-field input {
     padding-left: var(--itf-money-field-padding-left, 1.5rem);
-    padding-right: 3rem;
 
     &.is-invalid, &.is-valid {
       padding-right: 4rem;
     }
   }
-  &.currency-arrow {
+  &.currency-select {
     .itf-text-field input {
-      padding-right: 4.5rem;
+      padding-right: 3rem;
+    }
+    &.currency-arrow {
+      .itf-text-field input {
+        padding-right: 4.5rem;
+      }
     }
   }
 

package/src/assets/scss/boostrap.scss

@@ -1,124 +0,0 @@
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-@import "~bootstrap/scss/functions.scss";
-
-// 2. Include any default variable overrides here
-$font-family-base: 'Fira Sans', sans-serif;
-$headings-font-family: 'Fira Sans', sans-serif;
-$font-family-monospace: "Fira Mono", "Courier New", monospace;
-
-$headings-font-size-base:     1rem;
-$h1-font-size:                $headings-font-size-base * 2;
-$h2-font-size:                $headings-font-size-base * 1.75;
-$h3-font-size:                $headings-font-size-base * 1.5;
-$h4-font-size:                $headings-font-size-base * 1.25;
-$h5-font-size:                $headings-font-size-base * 1.125;
-$h6-font-size:                $headings-font-size-base;
-
-$zindex-toaster:                    1071 !default;
-
-$border-radius: .5rem;
-$border-radius-sm: .375rem;
-$border-radius-lg: .75rem;
-
-$project-tnm: #311b92;
-$project-fixed: #388E3C;
-$project-nonprofit: #D32F2F;
-
-$info: #5981c0;
-$success: #10834e;
-$warning: #cda277;
-$danger: #cb4839;
-
-$primary: #0B314F;
-$link-color: #0B314F;
-$input-btn-focus-width: .125rem;
-
-$input-bg: #f3f3f3;
-$input-border-color: rgba(#000, .08);
-$input-border-radius: 10px;
-$input-font-size: 0.875rem;
-$input-font-family: "Fira Mono", "Courier New", monospace;
-
-$input-focus-bg: #fff;
-$input-focus-border-color: #fff;
-
-$form-label-margin-bottom: .1rem;
-$input-focus-border: rgb(11 49 79 / 25%);
-
-$form-check-input-border: 1px solid rgba(#000, .08);
-$form-switch-focus-color: tint-color($primary, 50%);
-
-$modal-backdrop-bg: #999;
-$modal-backdrop-opacity: .25;
-$modal-content-border-radius: 0;
-
-$secondary: #dfe1e6;
-
-// popover
-$popover-border-width: 2px;
-
-// dropdown
-
-// Dark theme
-$dark-body-bg: #2e3136;
-$dark-border-color: #4a4a4a;
-$dark-body-color: #ddd;
-$dark-input-bg: #383b41;
-
-$dark-primary: #FFCC00;
-$dark-link-color: #ead272;
-$dark-secondary: #464a53;
-$dark-input-focus-border-color: #3d3d3d;
-$dark-btn-primary-color: $dark-primary;
-$dark-btn-secondary-color: $dark-secondary;
-$dark-input-box-shadow: #3d3d3d;
-$dark-input-focus-border: rgb(244 206 176 / 25%);
-
-$pagination-border-width: 0;
-
-// 3. Include remainder of required Bootstrap stylesheets
-@import "~bootstrap/scss/variables.scss";
-@import "~bootstrap/scss/mixins.scss";
-@import "~bootstrap/scss/maps.scss";
-@import "~bootstrap/scss/utilities.scss";
-
-$custom-colors: (
-  "white": #fff,
-  "black": #1e1e1e
-);
-$theme-colors: map-merge($theme-colors, $custom-colors);
-
-// Text colors
-$all-colors: map-merge-multiple($theme-colors, $custom-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
-$utilities: map-merge(
-    $utilities,
-    (
-      "color": map-merge(
-          map-get($utilities, "color"),
-          (
-            values: map-merge(
-                map-get(map-get($utilities, "color"), "values"),
-                  (
-                    $all-colors
-                  ),
-            ),
-          ),
-      ),
-    )
-);
-@import "~bootstrap/scss/utilities/api";
-
-// Fonts
-$baseFontSize: 16px;
-$hintFontSize: 12px;
-
-// Border radius
-$borderRadiusM: 4px;
-$borderRadiusL: 8px;
-
-// Colors
-$primaryColor: #0B314F;
-$primaryColor15: #DAE0E5;
-$baseText: #1e1e1e;
-$gray5: #F0F0F1;
-$gray50: #787885;