@itfin/components 1.3.91 → 1.3.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.91",
+  "version": "1.3.94",
   "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/popover/NoticePopout.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="notice p-2" ref="notice">
+    <slot></slot>
+  </div>
+</template>
+<style scoped lang="scss">
+.notice {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  max-width: 740px;
+  z-index: 10;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: translateX(-50%) translateY(100%) translateZ(0px);
+  background: var(--bs-body-bg);
+  box-shadow: 0 2px 10px 0 hsl(0 calc(1 * 0%) 0% /.1);
+  overflow: hidden;
+  border-radius: 5px;
+  pointer-events: none;
+
+  &.show {
+    opacity: 1;
+    pointer-events: all;
+    transform: translate3d(-50%, 0%, 0px);
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Watch, Component } from 'vue-property-decorator';
+
+export default @Component({
+  components: {
+  }
+})
+class NoticePopout extends Vue {
+  @Prop(Boolean) visible;
+
+  @Watch('visible')
+  toggle(show = true) {
+    if (show) {
+      this.$refs.notice.classList.add('show');
+    } else {
+      this.$refs.notice.classList.remove('show');
+    }
+  }
+}
+</script>

package/src/components/table/Table2.vue

@@ -1,11 +1,20 @@
 <template>
 
-  <div class="itf-table2 scrollable scrollable-x" :class="{
+  <div class="itf-table2" :class="{
     'table-striped': striped,
     'table-absolute': absolute,
     'table-clickable': clickable,
     'permanent-checkboxes': selectedIds.length
   }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}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>
+        <div>
+          <slot name="group-operations"></slot>
+        </div>
+      </div>
+    </itf-notice-popout>
+    <div class="scrollable scrollable-x">
     <itf-checkbox-group v-model="selectedIds">
       <template v-for="(group, index) in groups">
         <div class="table-view-body">
@@ -58,6 +67,7 @@
         </div>
       </template>
     </itf-checkbox-group>
+    </div>
   </div>
 
 </template>
@@ -68,6 +78,7 @@ import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
 import itfTableHeader from './TableHeader.vue';
+import itfNoticePopout from '../popover/NoticePopout.vue';
 import './table2.scss';
 
 export default @Component({
@@ -80,7 +91,8 @@ export default @Component({
     itfTableHeader,
     itfButton,
     itfIcon,
-    itfTableGroup
+    itfTableGroup,
+    itfNoticePopout
   }
 })
 class itfTable2 extends Vue {
@@ -97,7 +109,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;
@@ -123,6 +135,10 @@ class itfTable2 extends Vue {
     columns: []
   };
 
+  get showGroupOperations() {
+    return !!this.$slots['group-operations'] && this.selectedIds.length > 0;
+  }
+
   getTableState() {
     const list = this.schema?.properties || [];
     let state = this.stateName ? JSON.parse(localStorage.getItem(this.stateKey) || 'null') : null;
@@ -163,6 +179,7 @@ class itfTable2 extends Vue {
   }
 
   mounted() {
+    console.info(this.$scopedSlots)
     this.onSchemaUpdate();
   }
 

package/src/components/table/TableBody.vue

@@ -114,6 +114,7 @@
     }
 
     .on-hover {
+      opacity: 1;
       display: block;
     }
   }

package/src/components/table/TableGroup.vue

@@ -38,6 +38,7 @@
             :column-sorting="columnSorting"
             :show-add-column="showAddColumn"
             :show-actions="showActions"
+            :id-property="idProperty"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -362,7 +363,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">
@@ -174,6 +174,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop() idProperty;
   @Prop() indicatorType;
 
   @Watch('selectedIds')
@@ -186,6 +187,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;
@@ -203,7 +212,7 @@ class itfTableHeader extends Vue {
 
   set selectAll(val) {
     if (val) {
-      this.$emit('update:selectedIds', this.rows.map(r => r.Id));
+      this.$emit('update:selectedIds', this.rows.map(r => r[this.idProperty]));
     } else {
       this.$emit('update:selectedIds', []);
     }
@@ -350,8 +359,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/table/TableRows.vue

@@ -21,7 +21,7 @@
             </div>
           </div>
           <div v-if="indicatorType !== 'none'" class="indicator sticky">
-            <div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
+            <div class="fill table-view-row-count" :class="{'on-rest': indicatorType !== 'checkbox'}">
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
               <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
@@ -41,7 +41,7 @@
                 </template>
               </a>
             </div>
-            <div v-if="!noSelectAll" class="fill on-hover">
+            <div class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
               <itf-checkbox :value="item[idProperty]" />
             </div>
           </div>

package/src/components/table/table2.scss

@@ -365,4 +365,19 @@ body[data-theme="dark"] {
       bottom: 0;
     }
   }
+
+  .table-group-operations {
+    background: red;
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    right: 1rem;
+    height: 2rem;
+    transform: rotateX(90deg);
+    transition: transform 0.3s;
+
+    &.visible {
+      transform: rotateX(0deg);
+    }
+  }
 }

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/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}/;