@itfin/components 1.3.58 → 1.3.60

package/package.json

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

package/src/components/panels/Panel.vue

@@ -1,10 +1,10 @@
 <template>
   <div tabindex="-1" class="b-panel" :class="{'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
-    <div v-if="collapsed" class="b-panel__expand">
+    <div v-if="collapsed" class="b-panel__expand" @click.stop.prevent="expandPanel">
       <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
         <itf-icon name="cross" />
       </itf-button>
-      <a href="" class="b-panel__expand_text_container" @click.stop.prevent="expandPanel">
+      <a href="" class="b-panel__expand_text_container">
         <itf-icon v-if="icon" :name="icon" class="mt-2" />
 
         <div class="b-panel__expand_text" v-text="title"></div>
@@ -74,6 +74,7 @@
     height: 100%;
     position: relative;
     padding-top: 2px;
+    cursor: pointer;
   }
   &__expand_text_container {
     text-decoration: none;

package/src/components/panels/PanelList.vue

@@ -19,7 +19,7 @@
             :panel="panel"
             :payload="panel.payload"
             :multiple="isOpenMultiple"
-            :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+            :open="(title, icon, type, payload) => openPanel(type, payload, n + 1)"
             :close="() => closePanel(panel)"
             :expand="() => expandPanel(panel)"
             :fullsize="() => fullsizePanel(panel)">
@@ -31,7 +31,7 @@
               :panel="panel"
               :payload="panel.payload"
               :multiple="isOpenMultiple"
-              :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+              :open="(title, icon, type, payload) => openPanel(type, payload, n + 1)"
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
@@ -44,7 +44,7 @@
               :panel="panel"
               :payload="panel.payload"
               :multiple="isOpenMultiple"
-              :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+              :open="(title, icon, type, payload) => openPanel(type, payload, n + 1)"
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
@@ -57,7 +57,7 @@
               :panel="panel"
               :payload="panel.payload"
               :multiple="isOpenMultiple"
-              :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+              :open="(title, icon, type, payload) => openPanel(type, payload, n + 1)"
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
@@ -139,9 +139,14 @@ export default class PanelList extends Vue {
 
   created() {
     if (this.firstPanel) {
-      this.internalOpenPanel(this.firstPanel.title, this.firstPanel.icon, this.firstPanel.type, this.firstPanel.payload);
+      this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
-    this.parsePanelHash();
+    this.parsePanelHash(); // щоб панелі змінювались при перезавантаженні
+    window.addEventListener('popstate', this.handlePopState); // щоб панелі змінювались при навігації
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('popstate', this.handlePopState);
   }
 
   get isOpenMultiple() {
@@ -185,11 +190,16 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  internalOpenPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
+  internalOpenPanel(type: string, payload: any = {}, openIndex?: number) {
+    if (!this.panels[type]) {
+      return;
+    }
+    if (typeof this.panels[type].caption !== 'function') {
+      throw new Error('Panel component must have a "caption" function');
+    }
     const newPanel:any = {
       id: this.nextId++,
-      title,
-      icon,
+      title: this.panels[type].caption(this.$t.bind(this), payload),
       type,
       payload,
       isCollapsed: false,
@@ -208,9 +218,13 @@ export default class PanelList extends Vue {
       this.$nextTick(() => { // щоб панелі змінювались при редагуванні
         const n = newStack.length;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
-        newPanel.open = (type, visOptions, payload) => this.openPanel(visOptions.title, visOptions.icon, type, payload, n + 1);
+        newPanel.open = (type, payload) => this.openPanel(type, payload, n + 1);
         newPanel.close = () => this.closePanel(newPanel);
         newPanel.expand = () => this.expandPanel(newPanel);
+        newPanel.getTitle = () => newPanel.title;
+        newPanel.getIcon = () => newPanel.icon;
+        newPanel.setTitle = (title: string) => { newPanel.title = title; };
+        newPanel.setIcon = (icon: string) => { newPanel.icon = icon; };
         newPanel.on = (eventName, func: (event: string, ...args: any[]) => any) => {
           if (!newPanel.__events[eventName]) {
             newPanel.__events[eventName] = [];
@@ -244,8 +258,8 @@ export default class PanelList extends Vue {
     });
   }
 
-  async openPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
-    await this.internalOpenPanel(title, icon, type, payload, openIndex);
+  async openPanel(type: string, payload: any, openIndex?: number) {
+    await this.internalOpenPanel(type, payload, openIndex);
     this.setPanelHash()
   }
 
@@ -299,9 +313,20 @@ export default class PanelList extends Vue {
           payload: JSON.parse(decodeURIComponent(payload))
         };
       });
+      const newStack = [];
       for (const panel of panels) {
-        await this.internalOpenPanel('', '', panel.type, panel.payload);
+        const resPanel = await this.internalOpenPanel(panel.type, panel.payload);
+        newStack.push(resPanel);
       }
+      this.panelsStack = newStack;
+    }
+  }
+
+  handlePopState() {
+    this.parsePanelHash();
+    // виправляє проблему відкритої панелі при натисканні кнопки "назад" до першої панелі
+    if (this.panelsStack.length === 2) {
+      this.panelsStack = this.panelsStack.slice(0, 1);
     }
   }
 }

package/src/components/table/Table2.vue

@@ -34,6 +34,7 @@
             :striped="striped"
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
+            :sorting.sync="_sorting"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
@@ -85,6 +86,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;
   @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;

package/src/components/table/TableGroup.vue

@@ -44,6 +44,7 @@
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
             :indicatorType="indicatorType"
+            :sorting.sync="_sorting"
             @update:selectedIds="$emit('update:selectedIds', $event)"
             @update:columns="$emit('update:columns', $event)"
             @add-column="$emit('add-column', $event)"
@@ -347,6 +348,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) striped;
   @Prop() indicatorWidth;
   @Prop() cssProperty;
+  @PropSync('sorting', { type: Object, default: () => ({}) }) _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

@@ -33,24 +33,24 @@
                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" :title="column.title[locale] || column.title['en_US']">
+                <span class="itf-table2__header-title text-truncate" :title="column.title[locale] || column.title['en_US']" :class="{'ms-auto': column.align === 'end'}">
                   <span v-if="column.icon" :class="column.icon"></span>
                   {{column.title[locale] || column.title['en_US']}}
                   <div v-if="column.prefix" class="itf-table2__subtitle" v-text="column.prefix" />
                 </span>
-                <!--                <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
+                <itf-icon v-if="_sorting[column.property]" :name="_sorting[column.property] === 'asc' ? 'arrow_up' : 'arrow_down'" :size="16" class="ms-1" />
               </template>
 
               <div v-if="column.sortable">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="sortBy(column, 'asc')">
                   <itf-icon name="arrow_up" :size="16" class="me-1" />
                   {{$t('components.table.sortAscending')}}
                 </a>
               </div>
               <div v-if="column.sortable">
-                <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
+                <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="sortBy(column, 'desc')">
                   <itf-icon name="arrow_down" :size="16" class="me-1" />
-                  {{$t('components.table.sortAscending')}}
+                  {{$t('components.table.sortDescending')}}
                 </a>
               </div>
               <div v-if="column.groupable">
@@ -159,6 +159,7 @@ class itfTableHeader extends Vue {
   @Inject() tableEl;
 
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
+  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
   @Prop({ type: Array, default: () => ([]) }) rows;
   @Prop({ type: Array, default: () => ([]) }) selectedIds;
   @Prop({ type: Object, default: () => ({}) }) schema;
@@ -335,5 +336,10 @@ class itfTableHeader extends Vue {
   onSortColumns(items) {
     this.$emit('update:columns', items);
   }
+
+  sortBy(column, order) {
+    console.info({ [column.property]: order });
+    this.$emit('update:sorting', { [column.property]: order });
+  }
 }
 </script>

package/src/components/table/TableRows.vue

@@ -51,7 +51,7 @@
                 v-if="column.visible !== false"
                 :data-column="k"
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-                :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
+                :class="{'justify-content-end': column.align === 'end', 'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
                 <slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
                   <template v-if="column.editable && editable">

package/src/components/table/table2.scss

@@ -51,7 +51,7 @@ body[data-theme="dark"] {
     bottom: 0;
   }
   &.table-striped {
-    .table-view-item:nth-child(odd) {
+    .table-view-item:nth-child(even) {
       --itf-table2-row-bg: var(--itf-table-alt-bg);
     }
   }