@itfin/components 1.3.90 → 1.3.93

package/package.json

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

package/src/components/filter/FilterAmountRange.vue

@@ -31,6 +31,7 @@
   justify-content: space-between;
   align-items: end;
   gap: .25rem;
+  border-bottom: 1px solid #AAA;
 
   & > div {
     background: var(--bs-primary);

package/src/components/filter/FilterPanel.vue

@@ -81,11 +81,12 @@ class FilterPanel extends Vue {
     const filter = {};
     const filterValue = {};
     for (const item of this.filters) {
-      filter[item.name] = payload[item.name] ? this.formatValue(item, { value: payload[item.name] }) : { isDefault: true, ...item.options.defaultValue };
       if (item.type === 'period') {
+        filter[item.name] = payload.from ? this.formatValue(item, { value: [payload.from, payload.to] }) : { isDefault: true, ...item.options.defaultValue };
         filterValue.from = payload.from;
         filterValue.to = payload.to;
       } else {
+        filter[item.name] = payload[item.name] ? this.formatValue(item, { value: payload[item.name] }) : { isDefault: true, ...item.options.defaultValue };
         filterValue[item.name] = payload[item.name];
       }
     }
@@ -97,6 +98,14 @@ class FilterPanel extends Vue {
     this.$emit('input', this.filterValue);
   }
 
+  setFilter(field, value) {
+    const facet = this.filters.find(facet => facet.name === field);
+    if (!facet) {
+      throw new Error(`Facet ${field} not found`);
+    }
+    this.onFilterChange(facet, { value });
+  }
+
   onFilterChange(facet, value) {
     this.filter[facet.name] = this.formatValue(facet, value);
     if (facet.type === 'period') {
@@ -128,11 +137,11 @@ class FilterPanel extends Vue {
   formatValue(facet, value) {
     if (facet.type === 'period') {
       if (value.value) {
-        let from = DateTime.fromISO(value.value[0]);
-        let to = DateTime.fromISO(value.value[1]);
+        let from = DateTime.fromFormat(value.value[0], 'yyyy-MM-dd');
+        let to = DateTime.fromFormat(value.value[1], 'yyyy-MM-dd');
         if (!from.isValid || !to.isValid) {
-          from = DateTime.fromISO(facet.options.defaultValue.value[0]);
-          to = DateTime.fromISO(facet.options.defaultValue.value[1]);
+          from = DateTime.fromFormat(facet.options.defaultValue.value[0], 'yyyy-MM-dd');
+          to = DateTime.fromFormat(facet.options.defaultValue.value[1], 'yyyy-MM-dd');
         }
         const namedItem = this.daysList.find(item => {
           const [start, end] = item.date();
@@ -141,7 +150,7 @@ class FilterPanel extends Vue {
         if (namedItem) {
           value.label = namedItem.title;
         } else {
-          value.label = formatRangeDates(from, to);
+          value.label = formatRangeDates(from.toJSDate(), to.toJSDate());
         }
       }
       if (facet.options.defaultValue?.value) {

package/src/components/panels/Panel.vue

@@ -10,7 +10,7 @@
         <div class="b-panel__expand_text" v-text="title"></div>
       </a>
     </div>
-    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header p-3">
+    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3">
       <slot name="header">
         <div>
           <slot name="title">
@@ -112,7 +112,6 @@
   justify-content: space-between;
   min-height: 45px;
   min-width: 0;
-  padding: 8px;
   position: sticky;
   top: 0;
   z-index: 10;

package/src/components/table/Table2.vue

@@ -97,7 +97,7 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;
   @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
-  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
+  @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;

package/src/components/table/TableGroup.vue

@@ -362,7 +362,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) stickyHeader;
   @Prop() indicatorWidth;
   @Prop() cssProperty;
-  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
+  @PropSync('sorting') _sorting;
   @Prop({ type: String, default: null }) indicatorType;
   @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
   @Prop({type: Object, default: () => ({})}) schema;

package/src/components/table/TableHeader.vue

@@ -38,7 +38,7 @@
                   {{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" />
+                <itf-icon v-if="sortColumnParams[column.property]" :name="sortColumnParams[column.property] === 'asc' ? 'arrow_up' : 'arrow_down'" :size="16" class="ms-1" />
               </template>
 
               <div v-if="column.sortable">
@@ -186,6 +186,14 @@ class itfTableHeader extends Vue {
     }
   }
 
+  get sortColumnParams() {
+    if (typeof this._sorting === 'string'){
+      return this._sorting[0] === '-' ? {[this._sorting.substring(1)]: 'desc'} : {[this._sorting]: 'asc'};
+    } else {
+      return this._sorting;
+    }
+  }
+
   getTitle(title) {
     if (typeof title === 'string') {
       return title;
@@ -350,8 +358,9 @@ class itfTableHeader extends Vue {
   }
 
   sortBy(column, order) {
-    console.info({ [column.property]: order });
-    this.$emit('update:sorting', { [column.property]: order });
+    let sort = order === 'desc' ? `-${column.property}` : column.property;
+    console.info(sort);
+    this.$emit('update:sorting', sort);
   }
 }
 </script>

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

@@ -67,7 +67,7 @@
 
     select {
       position: absolute;
-      top: 0;
+      height: 100%;
       right: 0;
       opacity: 0;
       left: 0;

package/src/helpers/formatters.js

@@ -51,7 +51,7 @@ export function formatMoney (val, symbol = '', digits = null) {
     symbolStr = symbol;
   }
   if (digits === null) {
-    digits = symbol.precision ?? symbol.Precision ?? 2;
+    digits = symbol?.precision ?? symbol?.Precision ?? 2;
   }
   const value = parseFloat(val.toString()).toFixed(digits)
     .replace(/\d(?=(\d{3})+\.)/g, '$&' + thousandSeparator)

package/src/helpers/validators.js

@@ -8,7 +8,7 @@ const LINKED_IN_REGEXP = /(http(s)?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profi
 const SPECIAL_CHARS_REGEXP = /^[\w_\-+~,/\\:'"().&*|[\]?# ]+$/i;
 const GREETINGS_REGEXP = /\b(dr|mr|mister|mrs|ms|miss|sir|hello|hi)\b/i;
 const PHONE_REGEXP = /(\+?\(?\+?[0-9]{1,3}\)?[-. ]+([0-9]{2,4})[-. ]?([0-9]{3,5}))|\+?[0-9]{7,}/gi;
-const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,4}){0,1}$/;
+const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,8}){0,1}$/;
 const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
 const EMAIL_LIST_REGEXP = /^(\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,4}\s*?,?\s*?)+$/g;
 const HEX_REGEXP = /[0-9A-Fa-f]{6}/;