@itfin/components 1.3.89 → 1.3.90

package/package.json

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

package/src/ITFSettings.js

@@ -14,6 +14,10 @@ class ITFSettings {
     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() {
@@ -33,16 +37,14 @@ class ITFSettings {
   }
 
   set defaultLocale(val) {
-    this.options.defaultLocale = val;
-    if (val === 'uk_UA') {
-      this.options.moneyDisplayFormat = '{value}\xA0{symbol}';
-      this.options.moneyThousandSeparator = '\xA0';
-      this.options.moneyDecimalSeparator = ',';
-    } else {
-      this.options.moneyDisplayFormat = '{symbol}{value}';
-      this.options.moneyThousandSeparator = ',';
-      this.options.moneyDecimalSeparator = '.';
+    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() {
@@ -54,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/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

@@ -46,8 +46,10 @@ export function formatMoney (val, symbol = '', digits = null) {
   if (Number.isNaN(val) || val === null) {
     return '—';
   }
-
-  let symbolStr = symbol?.symbol ?? symbol?.Symbol ?? symbol ?? '';
+  let symbolStr = symbol?.currencySymbol ?? symbol?.symbol ?? symbol?.Symbol ?? '';
+  if (typeof symbol === 'string') {
+    symbolStr = symbol;
+  }
   if (digits === null) {
     digits = symbol.precision ?? symbol.Precision ?? 2;
   }