@itfin/components 1.3.59 → 1.3.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.59",
+  "version": "1.3.61",
   "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,17 @@ 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),
+      icon: this.panels[type].icon ? this.panels[type].icon(this.$t.bind(this), payload) : null,
       type,
       payload,
       isCollapsed: false,
@@ -208,9 +219,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] = [];
@@ -234,6 +249,8 @@ export default class PanelList extends Vue {
         newPanel.getPayload = () => newPanel.payload;
         newPanel.setPayload = (value: any) => {
           newPanel.payload = value;
+          newPanel.title = this.panels[type].caption(this.$t.bind(this), value);
+          newPanel.icon = this.panels[type].icon ? this.panels[type].icon(this.$t.bind(this), payload) : null,
           this.setPanelHash()
         }
         newStack.push(newPanel);
@@ -244,8 +261,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 +316,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);
     }
   }
 }