@itfin/components 1.4.40 → 1.5.1

package/src/components/panels/PanelList.vue

@@ -10,6 +10,7 @@
       <template v-for="(panel, n) of panelsStack">
         <panel
           :key="n"
+          :ref="`panel-${panel.id}`"
           :index="n"
           :panel="panel"
           :title="panel.title"
@@ -17,14 +18,22 @@
           :icon="panel.icon"
           :payload="panel.payload"
           :expandable="panelsStack.length > 1"
+          :isFullSize="isFullSize"
           :collapsed="panel.isCollapsed"
           :closeable="panel.isCloseable"
           :animate="panel.isAnimate"
           @open="openPanel($event[0], $event[1], n + 1)"
           @expand="expandPanel(panel)"
           @fullsize="fullsizePanel(panel)"
+          @collapse="collapsePanel(panel)"
           @close="closePanel(panel)"
+          @open-menu="$emit('open-menu', panel.type, panel.payload)"
+          @onboarding-progress="$emit('onboarding-progress', $event)"
+          @onboarding-step-viewed="$emit('onboarding-step-viewed', $event)"
         >
+          <template #before-header>
+            <slot name="before-header" :panel="panel" :index="n" :payload="panel.payload"></slot>
+          </template>
           <slot
             :name="panel.type"
             :panel="panel"
@@ -34,9 +43,9 @@
             :close="() => closePanel(panel)"
             :expand="() => expandPanel(panel)"
             :fullsize="() => fullsizePanel(panel)">
-            <component :is="panels[panel.type].default || panels[panel.type]" :panel="panel" :payload="panel.payload" />
+            <component v-if="panel.components.default" :is="panel.components.default" :panel="panel" :payload="panel.payload" />
           </slot>
-          <template v-if="$scopedSlots[`${panel.type}.title`] || panels[panel.type].title" #title>
+          <template v-if="$scopedSlots[`${panel.type}.title`] || panel.components.title" #title>
             <slot
               :name="`${panel.type}.title`"
               :panel="panel"
@@ -46,10 +55,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panels[panel.type].title" :is="panels[panel.type].title" :panel="panel" :payload="panel.payload" />
+              <component v-if="panel.components.title" :is="panel.components.title" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panels[panel.type].buttons" #buttons>
+          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panel.components.buttons" #buttons>
             <slot
               :name="`${panel.type}.buttons`"
               :panel="panel"
@@ -59,10 +68,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panels[panel.type].buttons" :is="panels[panel.type].buttons" :panel="panel" :payload="panel.payload" />
+              <component v-if="panel.components.buttons" :is="panel.components.buttons" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.header`] || panels[panel.type].header" #header>
+          <template v-if="$scopedSlots[`${panel.type}.header`] || panel.components.header" #header>
             <slot
               :name="`${panel.type}.header`"
               :panel="panel"
@@ -72,7 +81,7 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panels[panel.type].header" :is="panels[panel.type].header" :panel="panel" :payload="panel.payload" />
+              <component v-if="panel.components.header" :is="panel.components.header" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
         </panel>
@@ -148,7 +157,6 @@ $double-an-time: $an-time * 2;
     //transition: opacity $an-time linear;
   }
 }
-
 //.slide-enter-active > div {
 //  opacity: 0;
 //}
@@ -158,9 +166,11 @@ $double-an-time: $an-time * 2;
 //}
 </style>
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import Panel from './Panel';
-import {hashToStack, stackToHash} from "./helpers";
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon.vue';
+import Panel from './Panel.vue';
+import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
+import {emitGlobalEvent, setRootPanelList} from "@itfin/components/src/components/panels";
 
 interface VisualOptions {
   title: string;
@@ -175,6 +185,7 @@ export interface IPanel {
   payload: any;
   nocard?: boolean;
   isCollapsed: boolean;
+  isExpanded: boolean;
   isCloseable: boolean;
   isAnimate: boolean;
   open: (type: string, visOptions: VisualOptions, payload: any) => void;
@@ -195,6 +206,7 @@ export interface IPanel {
 
 @Component({
   components: {
+    itfIcon,
     Panel
   },
   directives: {
@@ -208,12 +220,27 @@ export interface IPanel {
 export default class PanelList extends Vue {
   @Prop() firstPanel: IPanel;
   @Prop() panels: Record<string, Component>;
+  @Prop({ default: () => {} }) searchPanel: (type: string) => boolean;
+  @Prop({ type: String, default: 'path' }) routeType: string;
+  @Prop({ type: String, default: '' }) routePrefix: string;
 
   panelsStack:IPanel[] = [];
 
   nextId:number = 0;
 
+  @Watch('panels', { deep: true })
+  onPanelsPropChanged(newPanels: Record<string, Component>) {
+    this.panelsStack.forEach(stackedPanel => {
+      const newPanel = newPanels[stackedPanel.type];
+      if (newPanel && typeof newPanel.inAppOnboarding === 'function') {
+        const updatedOnboarding = newPanel.inAppOnboarding(this.$t.bind(this));
+        stackedPanel.inAppOnboarding = updatedOnboarding;
+      }
+    });
+  }
+
   created() {
+    setRootPanelList(this);
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
@@ -233,6 +260,7 @@ export default class PanelList extends Vue {
     const newStack = [...this.panelsStack];
     const index = newStack.findIndex(p => p.id === panel.id);
     newStack[index].isCollapsed = false;
+    newStack[index].isExpanded = true;
     this.panelsStack = newStack;
     this.ensureOnlyTwoOpenPanels(panel.id);
     this.setPanelHash();
@@ -254,10 +282,12 @@ export default class PanelList extends Vue {
         keepOpenIds.push(panel2.id);
       }
       if (keepOpenIds.length === 1) {
-        if (newStack.length - 1 === indexKeep) {
-          keepOpenIds.push(newStack[indexKeep - 1].id);
-        } else {
-          keepOpenIds.push(newStack[indexKeep + 1].id);
+        if (!openPanels.find(p => p.id === keepOpenId).isExpanded) {
+          if (newStack.length - 1 === indexKeep) {
+            keepOpenIds.push(newStack[indexKeep - 1].id);
+          } else {
+            keepOpenIds.push(newStack[indexKeep + 1].id);
+          }
         }
       }
       for (const panel of newStack) {
@@ -267,29 +297,42 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false) {
-    if (!this.panels[type]) {
-      return;
+  async internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false, noExpand = false) {
+    let panel = this.panels[type];
+    if (!panel) {
+      panel = await this.searchPanel(type, this.panels);
+      if (!panel) {
+        console.error(`Panel type "${type}" not found`);
+        return;
+      }
+      panel.type = type;
     }
-    if (typeof this.panels[type].caption !== 'function') {
+    if (typeof panel.caption !== 'function') {
       throw new Error('Panel component must have a "caption" function');
     }
     const newPanel:any = {
       id: this.nextId++,
-      nocard: this.panels[type].nocard,
-      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,
+      nocard: panel.nocard,
+      title: panel.caption(this.$t.bind(this), payload),
+      icon: panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
+      components: {
+        default: panel.default ?? undefined,
+        buttons: panel.buttons ?? undefined,
+        header: panel.header ?? undefined,
+        title: panel.title ?? undefined,
+      },
       type,
       payload,
       isCollapsed: false,
       isCloseable: true,
       __events: {},
+      inAppOnboarding: panel.inAppOnboarding ? panel.inAppOnboarding(this.$t.bind(this)) : null,
     };
     if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
     }
     let newStack = [...this.panelsStack];
-    if (this.panels[type].permanentExpanded && newStack.length) {
+    if (panel.permanentExpanded && newStack.length) {
       for (const panel of newStack) {
         panel.isCollapsed = true;
       }
@@ -299,25 +342,32 @@ export default class PanelList extends Vue {
       isAnimation = newStack.length === openIndex;
       newStack = newStack.slice(0, openIndex);
     }
+    if (newStack.length > 0 && !newStack.find(p => !p.isCollapsed) && !noExpand) {
+      // якщо немає відкритих панелей, то перша панель має бути розгорнута
+      newStack[0].isCollapsed = false;
+    }
     this.panelsStack = newStack;
     return new Promise(res => {
       this.$nextTick(() => { // щоб панелі змінювались при редагуванні
         const n = newStack.length;
         newPanel.isAnimate = isAnimation;
-        newPanel.permanentExpanded = !!this.panels[type].permanentExpanded;
+        newPanel.permanentExpanded = !!panel.permanentExpanded;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
-        newPanel.open = (type, payload) => this.openPanel(type, payload, n + 1);
+        newPanel.open = (type, payload, index?:number) => this.openPanel(type, payload, index ?? 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.setTitle = (title: string) => { newPanel.title = title; this.updateTitle() };
         newPanel.setIcon = (icon: string) => { newPanel.icon = icon; };
-        newPanel.on = (eventName, func: (event: string, ...args: any[]) => any) => {
-          if (!newPanel.__events[eventName]) {
-            newPanel.__events[eventName] = [];
+        newPanel.on = (eventName: string|string[], func: (event: string, ...args: any[]) => any) => {
+          const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+          for (const evName of eventNames) {
+            if (!newPanel.__events[evName]) {
+              newPanel.__events[evName] = [];
+            }
+            newPanel.__events[evName].push(func);
           }
-          newPanel.__events[eventName].push(func);
         };
         newPanel.off = (eventName, func: (event: string, ...args: any[]) => any) => {
           if (newPanel.__events[eventName]) {
@@ -337,9 +387,11 @@ 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()
+          this.setPanelHash();
+        }
+        newPanel.rebuildAllOnboardingPopovers = (refreshDelay?: number) => this.rebuildAllOnboardingPopovers(refreshDelay);
+        newPanel.rebuildPanelOnboardingPopovers = (panelId: string | number, refreshDelay?: number) => {
+          this.rebuildPanelOnboardingPopovers(panelId, refreshDelay);
         }
         newStack.push(newPanel);
         this.panelsStack = newStack;
@@ -353,12 +405,20 @@ export default class PanelList extends Vue {
     });
   }
 
+  updateTitle() {
+    const titles = this.panelsStack.map(p => p.getTitle()).filter(Boolean).reverse();
+    this.$root.$options.head.titleChunk = titles.join(' / ');
+    this.$meta().refresh();
+  }
+
   async openPanel(type: string, payload: any, openIndex?: number) {
     await this.internalOpenPanel(type, payload, openIndex);
-    this.setPanelHash()
+    this.setPanelHash();
+    if(openIndex) this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   emitEvent(event: string, ...args: any[]) {
+    emitGlobalEvent(event, ...args);
     for (const panel of this.panelsStack) {
       if (panel.__events[event]) {
         for (const func of panel.__events[event]) {
@@ -376,22 +436,63 @@ export default class PanelList extends Vue {
       openPanel.isCollapsed = false;
     }
     const openPanelIndex = this.panelsStack.findIndex(p => p === openPanel);
-    if (openPanelIndex > 0 && !openPanel?.permanentExpanded) {
+    if (openPanelIndex > 0 && !openPanel?.permanentExpanded && !openPanel.isExpanded) {
       this.panelsStack[openPanelIndex - 1].isCollapsed = false;
     }
     this.ensureOnlyTwoOpenPanels(openPanel.id);
     this.setPanelHash();
     this.emitEvent('panels.closed', panel);
     this.emitEvent('panels.changed', this.panelsStack);
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   fullsizePanel(panel: IPanel) {
     const newStack = [...this.panelsStack];
     for (const p of newStack) {
+      p.isLastOpened = !p.isCollapsed && p !== panel;
       p.isCollapsed = p !== panel;
+      if (!p.isCollapsed) {
+        p.isExpanded = true;
+      }
+    }
+    this.panelsStack = newStack;
+    this.setPanelHash();
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
+  }
+
+  get isFullSize() {
+    return this.panelsStack.filter(p => !p.isCollapsed).length === 1;
+  }
+
+  expandPanel(panel: IPanel) {
+    const newStack = [...this.panelsStack];
+    const index = newStack.findIndex(p => p.id === panel.id);
+    newStack[index].isCollapsed = false;
+    for (const p of newStack) {
+      p.isExpanded = false;
+    }
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
+    this.setPanelHash();
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
+  }
+
+  collapsePanel(panel: IPanel) {
+    const newStack = [...this.panelsStack];
+    const currenctIndex = newStack.findIndex(p => p.id === panel.id);
+    const lastOpenedIndex = newStack.findIndex(p => p.isLastOpened);
+    if (lastOpenedIndex !== -1) { // якщо зебрежена остання відкрита панель
+      newStack[lastOpenedIndex].isCollapsed = false;
+    } else if (newStack[currenctIndex-1]) { // якщо після оновлення сторінки відсутнє значення "остання відкрита", то відкриваємо ту, що зліва
+      newStack[currenctIndex-1].isCollapsed = false;
+    }
+    for (const p of newStack) {
+      p.isExpanded = false;
     }
     this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
     this.setPanelHash();
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   getPanels(type) {
@@ -403,14 +504,19 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack).replace(/^#/, '');
-    this.$router.push({ hash });
+    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
+    if (this.routeType === 'path') {
+      this.$router.push({ path: `${hash}` });
+    } else {
+      this.$router.push({ hash });
+    }
+    this.updateTitle();
   }
 
   async parsePanelHash() {
-    const {hash} = location;
+    const hash = this.routeType === 'path' ? location.pathname : location.hash;
     if (hash) {
-      const panels = hashToStack(hash);
+      const panels = hashToStack(hash, this.routePrefix);
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -419,18 +525,25 @@ export default class PanelList extends Vue {
           // reuse panel
           this.panelsStack[panelIndex].payload = panel.payload;
           this.panelsStack[panelIndex].isCollapsed = panel.isCollapsed;
+          this.panelsStack[panelIndex].isExpanded = false;
           newStack.push(this.panelsStack[panelIndex]);
         } else {
-          const resPanel = await this.internalOpenPanel(panel.type, panel.payload, undefined, true);
+          const resPanel = await this.internalOpenPanel(panel.type, panel.payload, undefined, true, true);
           if (resPanel) {
             resPanel.isCollapsed = panel.isCollapsed;
+            resPanel.isExpanded = false;
             resPanel.isAnimate = false;
             newStack.push(resPanel);
           }
         }
       }
+      const hasExpanded = newStack.length > 1 && newStack.filter(p => !p.isCollapsed).length === 1;
+      if (hasExpanded) {
+        newStack[newStack.findIndex(p => !p.isCollapsed)].isExpanded = true;
+      }
       this.panelsStack = newStack;
       this.emitEvent('panels.changed', this.panelsStack);
+      this.updateTitle();
     }
   }
 
@@ -452,5 +565,16 @@ export default class PanelList extends Vue {
       element.classList.add('animate');
     }
   }
+
+  rebuildPanelOnboardingPopovers(panelId: string | number, refreshDelay?: number) {
+    const panelRef = this.$refs[`panel-${panelId}`];
+    if (panelRef?.[0]) panelRef[0].rebuildOnboardingPopovers(refreshDelay);
+  }
+
+  rebuildAllOnboardingPopovers(refreshDelay?: number) {
+    this.panelsStack.forEach((panel) => {
+      this.rebuildPanelOnboardingPopovers(panel.id, refreshDelay);
+    });
+  }
 }
 </script>

package/src/components/panels/helpers.ts

@@ -1,33 +1,61 @@
+import JSON5 from 'json5'
+import {isPathType} from "./index";
+
 export interface IPanel {
   type: string;
   payload?: any;
   isCollapsed?: boolean;
 }
 
-export function stackToHash(stack: IPanel[]) {
+const COLLAPSE_SYMBOL = '~'
+const PARAMS_SYMBOL = ';'
+
+export function stackToHash(stack: IPanel[], routePrefix: string = '') {
   const hash = stack.map(panel => {
-    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
-  }).join('&');
-  return `#${hash}`;
+    let json = JSON5.stringify(panel.payload || {});
+    json = json.substring(1, json.length - 1); // Remove the outer {}
+    return `${panel.type}${panel.isCollapsed ? COLLAPSE_SYMBOL : ''}${json ? PARAMS_SYMBOL : ''}${json}`;
+  }).join(isPathType() ? '/' : '&');
+  let url = hash;
+  if (routePrefix) {
+    url = `${routePrefix}/` + url;
+  }
+  return isPathType() ? `/${url}` : `#${url}`;
 }
 
 
-export function hashToStack(hash: string|undefined): IPanel[] {
+export function hashToStack(hash: string|undefined, routePrefix: string = ''): IPanel[] {
   let stack:IPanel[] = [];
-  if (hash) {
-    const str = hash.replace(/^#/, '');
-
-    stack = str.split('&').map(item => {
-      const [type, payload] = item.split('=');
-      const isCollapsed = !type.includes('!');
+  let str = hash.replace(isPathType() ? /^\// : /^#/, '');
+  if (routePrefix) {
+    const prefix = isPathType() ? `${routePrefix}/` : `${routePrefix}`;
+    if (str.startsWith(prefix)) {
+      str = str.substring(prefix.length);
+    }
+  }
+  if (str) {
+    stack = str.split(isPathType() ? '/' : '&').map(item => {
+      if (!item.includes(PARAMS_SYMBOL)) {
+        return { type: item.replace(COLLAPSE_SYMBOL, ''), isCollapsed: item.includes(COLLAPSE_SYMBOL), payload: {} };
+      }
+      const [type, payload] = item.split(PARAMS_SYMBOL);
+      const isCollapsed = type.includes(COLLAPSE_SYMBOL);
       let payloadObj:any = {};
       try {
-        payloadObj = JSON.parse(decodeURIComponent(payload));
+        let json = decodeURIComponent(payload);
+        if (!json.startsWith('{')) {
+          json = `{${json}`; // Ensure it starts with a '{' to be valid JSON
+        }
+        if (!json.endsWith('}')) {
+          json += '}'; // Ensure it ends with a '}' to be valid JSON
+        }
+        payloadObj = JSON5.parse(json);
       } catch (e) {
         // ignore
+        console.warn(`Error parsing payload for type ${type}:`, payload, e);
       }
       return {
-        type: type.replace('!', ''),
+        type: type.replace(COLLAPSE_SYMBOL, ''),
         isCollapsed,
         payload: payloadObj
       };