@itfin/components 2.0.9 → 2.0.11

package/src/components/icon/new-icons/pen.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 18L17 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+  <path d="M7 13.4142V15.5C7 15.7761 7.22386 16 7.5 16H9.58579C9.851 16 10.1054 15.8946 10.2929 15.7071L17.2929 8.70711C17.6834 8.31658 17.6834 7.68342 17.2929 7.29289L15.7071 5.70711C15.3166 5.31658 14.6834 5.31658 14.2929 5.70711L7.29289 12.7071C7.10536 12.8946 7 13.149 7 13.4142Z" fill="currentColor"/>
+</svg>

package/src/components/icon/new-icons/trash.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0004 5.40039C9.66902 5.40039 9.40039 5.66902 9.40039 6.00039C9.40039 6.33176 9.66902 6.60039 10.0004 6.60039H14.0004C14.3318 6.60039 14.6004 6.33176 14.6004 6.00039C14.6004 5.66902 14.3318 5.40039 14.0004 5.40039H10.0004ZM5.40039 8.00039C5.40039 7.66902 5.66902 7.40039 6.00039 7.40039L18.0004 7.40039C18.3318 7.40039 18.6004 7.66902 18.6004 8.00039C18.6004 8.33176 18.3318 8.60039 18.0004 8.60039H16.9458L16.0831 18.0909C16.0362 18.606 15.6044 19.0004 15.0872 19.0004H8.91361C8.3964 19.0004 7.96454 18.606 7.91771 18.0909L7.05494 8.60039H6.00039C5.66902 8.60039 5.40039 8.33176 5.40039 8.00039Z" fill="currentColor"/>
+</svg>

package/src/components/pagination/Pagination2.vue

@@ -83,6 +83,7 @@ export default @Component({
 })
 class itfPagination extends Vue {
   @Model('input') value;
+  @Prop() items; // deprecated
   @Prop({ type: [String, Number], default: 0 }) length;
   @Prop({ type: [String, Number], default: 20 }) size;
   @Prop({ type: [String, Number] }) pages;

package/src/components/panels/PanelList.vue

@@ -276,8 +276,6 @@ export default class PanelList extends Vue {
     if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
     }
-    console.info(newPanel, this.panelsStack)
-    console.trace();
     let newStack = [...this.panelsStack];
     if (this.panels[type].permanentExpanded && newStack.length) {
       for (const panel of newStack) {

package/src/components/table/Table2.vue

@@ -6,9 +6,11 @@
     'table-clickable': clickable,
     'permanent-checkboxes': selectedIds.length
   }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px`, '--shadow-area-width': `${shadowWidth}px` }">
-    <itf-notice-popout :visible="showGroupOperations" class="rounded-pill bg-dark text-light">
-      <div class="d-flex gap-3 px-3 align-items-center">
-        <div><strong>{{selectedIds.length}}</strong> selected</div>
+    <itf-notice-popout :visible="showGroupOperations" class="rounded-3 bg-black text-white">
+      <div class="d-flex gap-2 ps-3 align-items-center small itf-table2_mass-operations">
+        <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
+        <div class="opacity-50">•</div>
+        <a href="" class="me-3 opacity-50 text-white text-decoration-none" @click.stop.prevent="selectedIds = []">{{$t('components.table.cancelSelected')}}</a>
         <div>
           <slot name="group-operations"></slot>
         </div>
@@ -141,7 +143,7 @@ class itfTable2 extends Vue {
   };
 
   get showGroupOperations() {
-    return !!this.$slots['group-operations'] && this.selectedIds.length > 0;
+    return !!(this.$slots['group-operations'] || this.$scopedSlots['group-operations']) && this.selectedIds.length > 0;
   }
 
   resetSettings() {

package/src/components/table/TableRowToggle.vue

@@ -28,6 +28,7 @@
 }
 .item-toggle {
   width: 1.5rem;
+  min-width: 1.5rem;
   display: flex;
   align-items: center;
 }

package/src/components/table/table2.scss

@@ -84,12 +84,21 @@ body[data-theme="dark"] {
       cursor: pointer;
     }
   }
+
+  &_mass-operations {
+    .btn-default {
+      color: #fff !important;
+      background-color: #494A55;
+    }
+  }
+
   .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;
+    z-index: 8;
     padding-right: 5px;
     padding-left: 5px;
     display: flex;
@@ -130,6 +139,7 @@ body[data-theme="dark"] {
   }
   .last-sticky-column {
     position: relative;
+    border-right: 0 none !important;
     &:after {
       content: "";
       position: absolute;
@@ -528,7 +538,6 @@ body[data-theme="dark"] {
   }
 
   .table-group-operations {
-    background: red;
     position: absolute;
     bottom: 1rem;
     left: 1rem;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="itf-money-field ph-no-capture" :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`">
-      <span class="input-group-text pe-1" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
+    <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"
         v-bind="mask"
@@ -12,23 +12,67 @@
         :unmask="false"
         :disabled="disabled"
       />
-      <span v-if="currencySelect" class="input-group-text ps-1">{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
-      <select v-if="currencySelect && !disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
-        <option v-for="currency in currenciesList" :key="currency[itemKey]" :value="currency[itemKey]" :selected="currencyId === currency[itemKey]">
-          {{ currency[symbolKey] }}, {{ currency[codeKey] }} - {{ currency[titleKey] }}
-        </option>
-      </select>
-      <slot name="postfix"></slot>
     </div>
+    <slot name="postfix">
+      <div v-if="currencySelect" class="itf-money-field__currency">
+        <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
+        <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
+          <option v-for="currency in currenciesList" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
+            {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
+          </option>
+        </select>
+      </div>
+    </slot>
   </div>
 </template>
 <style lang="scss">
 .itf-money-field {
   position: relative;
 
-  .form-control {
-    padding-left: 0;
-    padding-right: 0;
+  input {
+    padding-left: var(--itf-money-field-padding-left, 1.5rem);
+
+    &.is-invalid, &.is-valid {
+      padding-right: 4rem;
+    }
+  }
+  &.currency-select {
+    input {
+      padding-right: 3rem;
+    }
+    &.currency-arrow {
+      input {
+        padding-right: 4.5rem;
+      }
+    }
+  }
+
+  &__prepend {
+    position: absolute;
+    left: .75rem;
+    top: .5rem;
+    bottom: .5rem;
+    display: flex;
+    align-items: center;
+  }
+  &__currency {
+    position: absolute;
+    right: .75rem;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    .is-invalid &, .is-valid & {
+      right: 1.75rem;
+    }
+
+    select {
+      position: absolute;
+      height: 100%;
+      right: 0;
+      opacity: 0;
+      left: 0;
+    }
   }
 }
 </style>
@@ -62,11 +106,6 @@ class itfMoneyField extends Vue {
   @Prop({ type: Boolean, default: true }) currencySelect;
   @Prop({ type: Array, default: () => ([]) }) currencies;
   @Prop({ type: Boolean, default: false }) currencyDisabled;
-  @Prop({ type: String, default: 'Id' }) itemKey;
-  @Prop({ type: String, default: 'Code' }) codeKey;
-  @Prop({ type: String, default: 'Symbol' }) symbolKey;
-  @Prop({ type: String, default: 'Title' }) titleKey;
-  @Prop({ type: String, default: 'Precision' }) precisionKey;
   @Prop({ type: Number, default: -1000000000}) minValue;
   @Prop({ type: Number, default: 1000000000}) maxValue;
 
@@ -101,31 +140,31 @@ class itfMoneyField extends Vue {
   }
 
   onCurrencyChanged(e) {
-    const currency = this.currenciesList.find((c) => c[this.itemKey] === parseInt(e.target.value));
+    const currency = this.currenciesList.find((c) => c.Id === parseInt(e.target.value));
     this.$emit('update:currency', currency)
   }
 
   get precition() {
-    return this.selectedCurrency ? this.selectedCurrency[this.precisionKey] : 2;
+    return this.selectedCurrency ? this.selectedCurrency.Precision : 2;
   }
 
   get selectedCurrencySymbol() {
-    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '#';
+    return this.selectedCurrency ? this.selectedCurrency.Symbol : '#';
   }
 
   get selectedCurrencyCode() {
-    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '###';
+    return this.selectedCurrency ? this.selectedCurrency.Code : '###';
   }
 
   get currencyId() {
-    return this.selectedCurrency && this.selectedCurrency[this.itemKey];
+    return this.selectedCurrency && this.selectedCurrency.Id;
   }
 
   get selectedCurrency() {
     if (!this.currency || !this.currenciesList) {
       return this.currenciesList.find(({ IsDefault }) => IsDefault) || null;
     }
-    return this.currenciesList.find((itm) => this.currency[this.itemKey] === itm[this.itemKey]);
+    return this.currenciesList.find(({ Id }) => this.currency.Id === Id);
   }
 
   setValue (val) {

package/src/components/view/View.vue

@@ -50,12 +50,15 @@
           clickable
           column-sorting
           column-resizing
+          indicator-type="checkbox"
           class="permanent-checkboxes"
+          :state-name="stateName"
           id-property="id"
           :rows="items"
           :schema="schema"
           :sorting="sorting"
           :active="activeIds"
+          :show-actions="showActions"
           v-model="selectedIds"
           @row-click="$emit('open', $event)"
           @update:sorting="updateSorting($event)"
@@ -88,7 +91,7 @@
 
 </template>
 <script>
-import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -112,6 +115,7 @@ export default @Component({
 })
 class itfView extends Vue {
   @Inject({ default: null }) panelList;
+  @ModelSync('value', 'input') selectedIds;
 
   @Prop({ type: Boolean }) loading;
   @Prop({ type: Array }) filters;
@@ -123,8 +127,10 @@ class itfView extends Vue {
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
   @Prop(String) panelKey;
+  @Prop(String) stateName;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
+  @Prop(Boolean) showActions;
 
   page = 1;
   total = 0;
@@ -134,7 +140,6 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
-  selectedIds = [];
 
   created() {
     const defaultSize = localStorage.getItem('sizePerPage') ?? 20;

package/src/locales/en.js

@@ -128,6 +128,8 @@ module.exports = {
     columns: 'Columns',
     resetTableSettings: 'Reset table settings',
     search: 'Search',
+    selectedItems: '{n} item selected|{n} items selected',
+    cancelSelected: 'Cancel',
   },
   pagination: {
     itemsPerPage: 'Items per page',

package/src/locales/uk.js

@@ -133,6 +133,8 @@ module.exports = {
     columns: 'Колонки',
     resetTableSettings: 'Скинути налаштування таблиці',
     search: 'Пошук',
+    selectedItems: '{n} елемент вибрано|{n} елементи вибрано|{n} елементів вибрано',
+    cancelSelected: 'Скасувати',
   },
   filter: {
     search: 'Пошук',