@itfin/components 1.3.88 → 1.3.90

package/package.json

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

package/src/ITFSettings.js

@@ -10,15 +10,41 @@ class ITFSettings {
     defaultLocale: 'en_US',
     defaultDisplayDateFormat: 'MM/dd/yyyy',
     // defaultDisplayDateFormat: 'dd.MM.yyyy',
-    currencies: []
+    currencies: [],
+    moneyDisplayFormat: '{symbol}{value}',
+    moneyThousandSeparator: ',',
+    moneyDecimalSeparator: '.',
+    supportLanguages: [
+      { shortCode: 'en', locale: 'en_US', name: 'English', dateFormat: 'MM/dd/yyyy', moneyDisplayFormat: '{symbol}{value}', moneyThousandSeparator: ',', moneyDecimalSeparator: '.' },
+      { shortCode: 'uk', locale: 'uk_UA', name: 'Українська (Ukrainian)', dateFormat: 'dd.MM.yyyy', moneyDisplayFormat: '{value}\xA0{symbol}', moneyThousandSeparator: '\xA0', moneyDecimalSeparator: ',' },
+    ]
   };
 
+  get moneyDisplayFormat() {
+    return this.options.moneyDisplayFormat;
+  }
+
+  get moneyThousandSeparator() {
+    return this.options.moneyThousandSeparator;
+  }
+
+  get moneyDecimalSeparator() {
+    return this.options.moneyDecimalSeparator;
+  }
+
   get defaultLocale() {
     return this.options.defaultLocale;
   }
 
   set defaultLocale(val) {
-    this.options.defaultLocale = val;
+    let lang = this.options.supportLanguages.find((l) => l.shortCode === val || l.locale === val);
+    if (!lang) {
+      lang = this.options.supportLanguages[0];
+    }
+    this.options.defaultLocale = lang.locale;
+    this.options.moneyDisplayFormat = lang.moneyDisplayFormat;
+    this.options.moneyDecimalSeparator = lang.moneyDecimalSeparator;
+    this.options.moneyThousandSeparator = lang.moneyThousandSeparator;
   }
 
   get currencies() {
@@ -30,10 +56,7 @@ class ITFSettings {
   }
 
   get supportLanguages() {
-    return [
-      { locale: 'en_US', name: 'English', dateFormat: 'MM/dd/yyyy' },
-      { locale: 'uk_UA', name: 'Українська (Ukrainian)', dateFormat: 'dd.MM.yyyy' },
-    ];
+    return this.options.supportLanguages;
   }
 
   get firstDayOfWeek() {

package/src/assets/scss/icons.scss

@@ -768,7 +768,7 @@ $bootstrap-icons-map: (
         //"gear-fill": "\f3e2",
         //"gear-wide-connected": "\f3e3",
         //"gear-wide": "\f3e4",
-        //"gear": "\f3e5",
+        "gear": "\f3e5",
         //"gem": "\f3e6",
         //"geo-alt-fill": "\f3e7",
         //"geo-alt": "\f3e8",
@@ -896,7 +896,7 @@ $bootstrap-icons-map: (
         //"layout-text-sidebar": "\f462",
         //"layout-text-window-reverse": "\f463",
         //"layout-text-window": "\f464",
-        "layout-three-columns": "\f465",
+        //"layout-three-columns": "\f465",
         //"layout-wtf": "\f466",
         //"life-preserver": "\f467",
         //"lightbulb-fill": "\f468",

package/src/components/filter/FilterPanel.vue

@@ -39,7 +39,7 @@ import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfTextField from '../text-field/TextField.vue';
-import { formatDateonly, formatMoney, formatRangeDates } from '../../helpers/formatters';
+import { formatMoney, formatRangeDates } from '../../helpers/formatters';
 import FilterBadge from './FilterBadge.vue';
 
 export default @Component({
@@ -52,10 +52,6 @@ export default @Component({
   },
   directives: {
     tooltip
-  },
-  filters: {
-    formatMoney,
-    formatDateonly
   }
 })
 class FilterPanel extends Vue {
@@ -155,7 +151,7 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      value.label = formatDateonly(date.isValid ? value.value : facet.options.defaultValue.value, 'dd MMM yyyy');
+      value.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));

package/src/components/table/Table2.vue

@@ -25,6 +25,7 @@
             :show-grouping="showGrouping"
             :show-summary="showSummary"
             :show-add-column="showAddColumn"
+            :show-actions="showActions"
             :show-header="!noHeader"
             :schema="schema"
             :editable="editable"
@@ -106,6 +107,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showGrouping;
+  @Prop(Boolean) showActions;
   @Prop(Boolean) showSummary;
   @Prop(Boolean) noHeader;
   @Prop(Boolean) noColumnMenu;

package/src/components/table/TableBody.vue

@@ -8,6 +8,7 @@
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
       :show-add-column="showAddColumn"
+      :show-actions="showActions"
       :no-select-all="noSelectAll"
       :editable="editable"
       :currency="currency"
@@ -118,38 +119,6 @@
   }
 }
 
-.table-item-inner .boundary {
-  z-index: 3;
-  position: absolute;
-}
-
-.table-item-inner .boundary.top, .table-item-inner .boundary.bottom {
-  width: 100%;
-  border-top: thin solid #0000;
-  top: 0;
-}
-
-.table-item-inner .boundary {
-  z-index: 3;
-  position: absolute;
-}
-
-.table-item-inner .boundary.left, .table-item-inner .boundary.right {
-  height: 100%;
-  border-left: thin solid #0000;
-  left: 0;
-}
-
-.table-item-inner .boundary.right {
-  left: auto;
-  border-right: 1px solid var(--itf-table-border-color);
-  right: 0;
-}
-
-.table-item-inner .boundary.bottom {
-  top: auto;
-  bottom: 0;
-}
 .table-small-row .table-view-item {
   // height: var(--table-row-height);
 }
@@ -185,6 +154,7 @@ class itfTableBody extends Vue {
   @Prop() subrowsProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
+  @Prop(Boolean) showActions;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;

package/src/components/table/TableGroup.vue

@@ -37,6 +37,7 @@
             :column-resizing="columnResizing"
             :column-sorting="columnSorting"
             :show-add-column="showAddColumn"
+            :show-actions="showActions"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -69,6 +70,7 @@
             :expanded-all="expandedAll"
             :striped="striped"
             :show-add-column="showAddColumn"
+            :show-actions="showActions"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
             :editable-property="editableProperty"
@@ -349,6 +351,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
+  @Prop(Boolean) showActions;
   @Prop(Boolean) showHeader;
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;

package/src/components/table/TableHeader.vue

@@ -33,9 +33,9 @@
                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 class="itf-table2__header-title text-truncate" :title="column.title[locale] || column.title['en_US']" :class="{'ms-auto': column.align === 'end'}">
+                <span class="itf-table2__header-title text-truncate" :title="getTitle(column.title)" :class="{'ms-auto': column.align === 'end'}">
                   <span v-if="column.icon" :class="column.icon"></span>
-                  {{column.title[locale] || column.title['en_US']}}
+                  {{getTitle(column.title)}}
                   <div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
                 </span>
                 <itf-icon v-if="_sorting[column.property]" :name="_sorting[column.property] === 'asc' ? 'arrow_up' : 'arrow_down'" :size="16" class="ms-1" />
@@ -85,10 +85,10 @@
           <div v-if="visibleHeader && columnResizing && !column.grow" ref="resizeHandle" class="resize-handle"></div>
         </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-context shadow autoclose="outside" class="table-header table-header-add-column" data-test="table-header-add-column">
+      <div class="table-view-item-value extra flex-grow-1"></div>
+      <itf-dropdown v-if="showAddColumn && visibleHeader" ref="newDd" text append-to-context shadow autoclose="outside" class="table-header-add-column table-view-item-actions" data-test="table-header-add-column">
           <template #button>
-            <span class="nom-layout-three-columns"></span>
+            <itf-button icon small><span class="nom-gear"></span></itf-button>
           </template>
 
           <itf-sortable :value="sortedColumns" @input="onSortColumns">
@@ -99,7 +99,7 @@
                     <div>
                       <span class="nom-grip-vertical"></span>
                       <span v-if="column.icon" :class="column.icon"></span>
-                      {{column.title[locale] || column.title['en_US']}}
+                      {{getTitle(column.title)}}
                     </div>
                     <span v-if="column.pinned" class="nom-pin-fill"></span>
                   </div>
@@ -117,13 +117,17 @@
               <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>
                   <span class="nom-plus"></span>
-                  {{column.title[locale] || column.title['en_US']}}
+                  {{getTitle(column.title)}}
                 </div>
               </a>
             </template>
           </div>
         </itf-dropdown>
-      </div>
+
+      <div class="boundary top"></div>
+      <div class="boundary right"></div>
+      <div class="boundary bottom"></div>
+      <div class="boundary left"></div>
     </div>
   </div>
 
@@ -182,6 +186,13 @@ class itfTableHeader extends Vue {
     }
   }
 
+  getTitle(title) {
+    if (typeof title === 'string') {
+      return title;
+    }
+    return title[this.locale] || title['en_US'];
+  }
+
   get locale() {
     return settings.defaultLocale;
   }

package/src/components/table/TableRows.vue

@@ -78,7 +78,10 @@
                 </slot>
               </div>
             </template>
-            <div v-if="showAddColumn" class="table-view-item-value extra bg-light"></div>
+            <div class="table-view-item-value extra"></div>
+            <div v-if="showActions" class="table-view-item-actions">
+              <slot name="actions" :level="level" :toggle="() => $emit('toggle', item)" :item="item"></slot>
+            </div>
             <div class="boundary top"></div>
             <div class="boundary right"></div>
             <div class="boundary bottom"></div>
@@ -95,6 +98,7 @@
           :id-property="idProperty"
           :subrows-property="subrowsProperty"
           :show-add-column="showAddColumn"
+          :show-actions="showActions"
           :no-select-all="noSelectAll"
           :editable="editable"
           :currency="currency"
@@ -157,6 +161,7 @@ class itfTableRows extends Vue {
   @Prop(Boolean) editable;
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
+  @Prop(Boolean) showActions;
   @Prop() editableProperty;
   @Prop() selectedIds;
   @Prop() expandedIds;

package/src/components/table/table2.scss

@@ -67,8 +67,35 @@ body[data-theme="dark"] {
       cursor: pointer;
     }
   }
+  .table-view-item-actions {
+    background-image: linear-gradient(90deg, transparent 0, var(--itf-table2-row-bg) 10px);
+    position: sticky;
+    top: 0;
+    bottom: 0;
+    right: -5px;
+    padding-right: 5px;
+    padding-left: 5px;
+    display: flex;
+    align-items: center;
+  }
+  .on-hover {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .table-row-template:hover .on-hover {
+    opacity: 1;
+    pointer-events: all;
+  }
+  .table-row-template:hover .hide-hover {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .table-header-add-column {
+    background-image: linear-gradient(90deg, transparent 0, var(--itf-table-header-bg) 10px);
+  }
 
   &__header {
+    --itf-table2-row-bg: --itf-table-header-bg;
     background-color: var(--itf-table-header-bg);
     position: sticky;
     top: 0;
@@ -87,8 +114,12 @@ body[data-theme="dark"] {
       z-index: 100000001;
       background: rgba(235,237,239,0.75);
     }
+    .itf-table2 & .boundary.top, .itf-table2 & .boundary.bottom {
+      border-color: var(--itf-table-border-color)
+    }
     .table-row-template {
       display: flex;
+      position: relative;
       align-items: stretch;
       height: auto;
       user-select: none;
@@ -305,4 +336,33 @@ body[data-theme="dark"] {
       position: sticky;
     }
   }
+
+
+  .boundary {
+    z-index: 3;
+    position: absolute;
+
+    &.top, &.bottom {
+      width: 100%;
+      border-top: thin solid #0000;
+      top: 0;
+    }
+
+    &.left, &.right {
+      height: 100%;
+      border-left: thin solid #0000;
+      left: 0;
+    }
+
+    &.right {
+      left: auto;
+      border-right: 1px solid var(--itf-table-border-color);
+      right: 0;
+    }
+
+    &.bottom {
+      top: auto;
+      bottom: 0;
+    }
+  }
 }

package/src/helpers/formatters.js

@@ -36,6 +36,33 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   return isNegative * seconds;
 }
 
+
+// https://stptrans.com/wp-content/uploads/2020/02/Working-with-currency-number-and-date-formats.pdf
+export function formatMoney (val, symbol = '', digits = null) {
+  const format = ITFSettings.moneyDisplayFormat || '{symbol}{value}';
+  const thousandSeparator = ITFSettings.moneyThousandSeparator || ',';
+  const decimalSeparator = ITFSettings.moneyDecimalSeparator || '.';
+
+  if (Number.isNaN(val) || val === null) {
+    return '—';
+  }
+  let symbolStr = symbol?.currencySymbol ?? symbol?.symbol ?? symbol?.Symbol ?? '';
+  if (typeof symbol === 'string') {
+    symbolStr = symbol;
+  }
+  if (digits === null) {
+    digits = symbol.precision ?? symbol.Precision ?? 2;
+  }
+  const value = parseFloat(val.toString()).toFixed(digits)
+    .replace(/\d(?=(\d{3})+\.)/g, '$&' + thousandSeparator)
+    .replace(/\.(\d+)$/, decimalSeparator + '$1')
+  ;
+  return format
+    .replace('{value}', value)
+    .replace('{symbol}', symbolStr)
+    .trim();
+}
+
 export function formatDate (date, inputFormat = 'yyyy-MM-dd', toFormat) {
   if (!date) {
     return date;
@@ -89,7 +116,7 @@ export function firstLetters(name) {
 export function formatHours (val, removeEmptyMinutes = false) {
   let hours = Math.floor(Math.abs(val) / 60);
   let minutes = Math.abs(val) - hours * 60;
-  if (isNaN(minutes)) {
+  if (Number.isNaN(minutes)) {
     return '—';
   }
   minutes = Math.floor(minutes);

package/src/helpers/formatters.spec.js

@@ -1,6 +1,7 @@
 import {
-  parseHours
+  parseHours, formatMoney
 } from './formatters';
+import ITFSettings from "../ITFSettings";
 
 describe('Formatters', () => {
   const $t = (str) => str;
@@ -14,4 +15,20 @@ describe('Formatters', () => {
     expect(parseHours('12h 10m 10s')).toEqual(12 * 60 * 60 + 10 * 60 + 10);
     expect(parseHours('1d 12h 10m 10s')).toEqual(8 * 60 * 60 + 12 * 60 * 60 + 10 * 60 + 10);
   });
+
+  test('formatMoney', () => {
+    ITFSettings.defaultLocale = 'uk_UA';
+    let currency = { Id: 1, Symbol: '#', IsCryptoCurrency: false, Code: 'TTT' };
+    expect(formatMoney(1, '$')).toEqual('1,00 $');
+    expect(formatMoney(-1, '$')).toEqual('-1,00 $');
+    expect(formatMoney(-1000000, currency)).toEqual('-1 000 000,00 #');
+    expect(formatMoney(NaN)).toEqual('—');
+
+    ITFSettings.defaultLocale = 'en_US';
+    currency = { Id: 1, Symbol: '#', IsCryptoCurrency: false, Code: 'TTT' };
+    expect(formatMoney(1, '$')).toEqual('$1.00');
+    expect(formatMoney(-1, '$')).toEqual('$-1.00');
+    expect(formatMoney(-1, currency)).toEqual('#-1.00');
+    expect(formatMoney(NaN)).toEqual('—');
+  });
 });