@itfin/components 1.3.37 → 1.3.38

package/package.json

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

package/src/assets/scss/components/_tabs.scss

@@ -36,7 +36,7 @@
       left: 0;
       width: 100%;
       height: 0px;
-      background-color: #000;
+      background-color: var(--bs-body-color);
       transition: height 0.3s ease;
     }
 

package/src/components/table/TableGroup.vue

@@ -93,7 +93,7 @@
               :data-column="n"
               class="position-relative line-overflow"
               :style="`width: ${column.width}px; max-width: ${column.width}px;`">
-              <itf-dropdown append-to-context text right @open="persistSummary = true" @close="persistSummary = false">
+              <itf-dropdown append-to-context text right @open="persistSummary = true" @close="persistSummary = false" autoclose="outside">
                 <template #button>
                   <span data-test="summary-column" class="invisible-summary d-flex align-items-center justify-content-end flex-auto">
                     <span v-if="column.calculate === 'none' || !column.calculate" class="table-summary-column summary-placeholder align-items-center justify-content-center">
@@ -245,13 +245,14 @@
   .table-add-new-item {
     border-right: 1px solid rgb(238 238 238 / 1);
     border-bottom: 1px solid rgb(238 238 238 / 1);
+    outline: none;
 
     & > span {
       left: var(--shadow-area-width);
       position: sticky;
       padding-left: var(--shadow-area-width);
     }
-    &:hover {
+    &:hover, &:active {
       background: var(--hover-bg);
     }
   }
@@ -323,7 +324,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) showHeader;
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
-  @Prop({type: String, default: function() { return this.$t('components.new'); } }) newLabel;
+  @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;
 
   isShowTable = true;
@@ -375,24 +376,24 @@ class itfTableGroup extends Vue {
       { 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: '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);
-      } },
+          const sum = rows.reduce((acc, row) => acc + (getNumber(row, column.property)), 0);
+          return round(sum / rows.length, 3);
+        } },
       { id: 'min', title: this.$t('components.table.calculateMin'), summary: 'Min', func: (rows, column) => Math.min(...rows.map(row => getNumber(row, column.property))) },
       { id: 'max', title: this.$t('components.table.calculateMax'), summary: 'Max', func: (rows, column) => Math.max(...rows.map(row => getNumber(row, column.property))) },
       { id: 'countAll', title: this.$t('components.table.calculateCountAll'), summary: 'Count', func: (rows) => rows.length },
       { id: 'countValues', title: this.$t('components.table.calculateCountValues'), summary: 'Values', func: (rows, column) => rows.filter(row => !!get(row, column.property)).length },
-      { id: 'countUniqueValues', title: this.$t('components.table.calculateCountUniqueValues'), summary: 'Unique', func: (rows, column) => uniq(rows.filter(row => !!get(row, column.property))).length },
+      { id: 'countUniqueValues', title: this.$t('components.table.calculateCountUniqueValues'), summary: 'Unique', func: (rows, column) => uniq(rows.map(row => get(row, column.property)).filter(item => !!item)).length },
       { id: 'countEmpty', title: this.$t('components.table.calculateCountEmpty'), summary: 'Empty', func: (rows, column) => rows.filter(row => !get(row, column.property)).length },
       { id: 'countNotEmpty', title: this.$t('components.table.calculateCountNotEmpty'), summary: 'Not Empty', func: (rows, column) => rows.filter(row => !!get(row, column.property)).length },
       { id: 'percentEmpty', title: this.$t('components.table.calculatePercentEmpty'), summary: 'Empty', func: (rows, column) => {
-        const empty = rows.filter(row => !get(row, column.property)).length;
-        return round(empty / rows.length * 100, 3) + '%';
-      } },
+          const empty = rows.filter(row => !get(row, column.property)).length;
+          return round(empty / rows.length * 100, 3) + '%';
+        } },
       { id: 'percentNotEmpty', title: this.$t('components.table.calculatePercentNotEmpty'), summary: 'Not Empty', func: (rows, column) => {
-        const notEmpty = rows.filter(row => !!get(row, column.property)).length;
-        return round(notEmpty / rows.length * 100, 3) + '%';
-      } },
+          const notEmpty = rows.filter(row => !!get(row, column.property)).length;
+          return round(notEmpty / rows.length * 100, 3) + '%';
+        } },
     ];
   }
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div class="input-group h-100" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+    <div :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"