@itfin/components 1.3.38 → 1.3.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.38",
+  "version": "1.3.40",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -37,14 +37,13 @@
     "@mdi/js": "^7.2.96",
     "@popperjs/core": "^2.11.8",
     "@shopify/draggable": "^1.0.0-beta.8",
-    "@vue/cli-service": "^5.0.1",
     "@vue/composition-api": "^1.7.1",
     "@vue/web-component-wrapper": "^1.3.0",
     "air-datepicker": "^3.3.5",
     "bootstrap": "^5.3.x",
     "bpmn-js": "^17.0.2",
+    "clipboard": "^2.0.11",
     "core-js": "^3.7.0",
-    "debug": "^4.2.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
@@ -57,6 +56,7 @@
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
+    "@vue/cli-service": "^5.0.1",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
@@ -76,6 +76,7 @@
     "eslint-plugin-vue": "^9.9.0",
     "fibers": "^5.0.0",
     "marked": "^4.2.5",
+    "postcss-cli": "^11.0.0",
     "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
     "vue": "^2.6.12",

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/_dark-theme.scss

@@ -1,4 +1,9 @@
 body[data-theme="dark"] {
+  $primary: #ffe870;
+
+  --bs-primary: $primary !important;
+  --bs-link-color-rgb: 255, 232, 112 !important;
+
   --bs-body-bg: #{$dark-body-bg};
   --bs-body-color: #{$dark-body-color};
   --bs-link-color: #{$dark-link-color};

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

@@ -2,7 +2,6 @@
 
 .itf-text-field {
   &__input {
-    border-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 +26,6 @@
     z-index: 10;
   }
   &__input {
-    border-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/assets/scss/main.scss

@@ -1,5 +1,4 @@
 @import './css_variables.scss';
-@import './fonts.scss';
 @import './icons.scss';
 @import './dark-theme.scss';
 @import './scrollbar';

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">
@@ -40,22 +40,6 @@
 
 </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));
@@ -77,6 +61,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',

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">
@@ -31,7 +35,7 @@
               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="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !column.editable, 'editable': column.editable}"
               class="table-view-item-value d-flex h-100 align-items-stretch">
               <slot :name="`column.${column.property}`" :item="item" :column="column">
                 <template v-if="column.editable">
@@ -45,7 +49,7 @@
                       @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-select v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                   </slot>
                 </template>
                 <template v-else>
@@ -92,45 +96,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 +108,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 +166,7 @@
 
 .table-item-inner .boundary.right {
   left: auto;
+  border-right: 1px solid var(--itf-table-border-color);
   right: 0;
 }
 
@@ -255,6 +221,7 @@ class itfTableBody extends Vue {
   @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;
+  @Prop() selectedIds;
 
   getValue(item, column) {
     return get(item, column.property);

package/src/components/table/TableGroup.vue

@@ -59,6 +59,7 @@
             :rows="rows"
             :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 || {}"/>
@@ -243,8 +244,9 @@
   }
 
   .table-add-new-item {
-    border-right: 1px solid rgb(238 238 238 / 1);
-    border-bottom: 1px solid rgb(238 238 238 / 1);
+    border-left: 1px solid var(--itf-table-border-color);
+    border-right: 1px solid var(--itf-table-border-color);
+    border-bottom: 1px solid var(--itf-table-border-color);
     outline: none;
 
     & > span {

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>
@@ -36,8 +36,9 @@
                 <span :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 class="itf-table2__subtitle">kr</div>
                 </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';

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 {
@@ -111,7 +118,7 @@ storiesOf('Common', module)
             Id: 1,
             summary: true,
             Description: 'Total',
-            EmployeeId: 'Vitalii Savchuk',
+            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,
@@ -331,7 +338,12 @@ storiesOf('Common', module)
           {{item.EmployeeId}}
         </template>
         <template #edit.employee="{ item }">
-          {{item.EmployeeId}}
+          <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>