@itfin/components 1.4.27 → 1.4.30

package/src/components/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
+  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
     <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
         <div>
@@ -35,8 +35,8 @@
           class="itf-filter-panel__badge"
           :ref="'item-' + n"
           v-model="filter[facet.name]"
-          :is-default="filter[facet.name].isDefault"
-          :text="filter[facet.name].label"
+          :is-default="filter[facet.name] && filter[facet.name].isDefault"
+          :text="filter[facet.name] && filter[facet.name].label"
           :type="facet.type"
           :icon="facet.icon"
           :options="facet.options"
@@ -52,7 +52,7 @@
       </div>
       <slot name="after-filters"></slot>
     </div>
-    <div v-if="loading">
+    <div v-if="loading && !visibleFilters.length">
       <span class="itf-spinner"></span>
       {{$t('loading')}}
     </div>
@@ -177,6 +177,8 @@ class FilterPanel extends Vue {
       (entries) => {
         entries.forEach(entry => {
           const index = parseInt(entry.target.dataset.index);
+          const filter = this.filters[index];
+          const value = this.filter[filter.name];
           if (entry.isIntersecting) {
             this.visibleItems.add(index); // Додаємо, якщо елемент у полі зору
           } else {
@@ -206,7 +208,7 @@ class FilterPanel extends Vue {
 
   get visibleFilters() {
     if (this.mini) {
-      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden).slice(0, 2);
+      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden);
     }
     return this.filters.filter(f => !f.options?.hidden);
   }
@@ -233,15 +235,7 @@ class FilterPanel extends Vue {
 
     this.filters = this.staticFilters ?? [];
     if (this.endpoint) {
-      this.loading = true;
-      await this.$try(async () => {
-        const payload = this.panel ? this.panel.getPayload() : {};
-        const {filters, tableSchema} = await this.$axios.$get(this.endpoint, { params: payload });
-        this.filters = filters;
-        this.$emit('set-table-schema', tableSchema);
-        this.loadFiltersValue();
-      });
-      this.loading = false;
+      this.loadData();
     } else {
       this.loadFiltersValue();
     }
@@ -250,6 +244,23 @@ class FilterPanel extends Vue {
     }
   }
 
+  async loadData() {
+    this.loading = true;
+    await this.$try(async () => {
+      const payload = this.panel ? this.panel.getPayload() : {};
+      const {filters, tableSchema} = await this.$axios.$get(this.endpoint, {
+        preventRaceCondition: true,
+        params: payload
+      });
+      this.filters = filters;
+      this.loading = false;
+      this.$emit('set-table-schema', tableSchema);
+      this.loadFiltersValue();
+    }, () => {
+      this.loading = false;
+    });
+  }
+
   toggleFilters() {
     this.showFilters = !this.showFilters;
     if (this.stateName) {
@@ -269,7 +280,7 @@ class FilterPanel extends Vue {
           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] ?? filter[item.name].value;
+          filterValue[item.name] = payload[item.name];
         }
       }
     }
@@ -282,6 +293,7 @@ class FilterPanel extends Vue {
       this.filter = filter;
       this.filterValue = filterValue;
       this.$emit('input', this.filterValue);
+      this.$emit('loaded', this.filterValue);
       this.initObserver();
     }
   }
@@ -318,6 +330,7 @@ class FilterPanel extends Vue {
       this.panel.setPayload({ ...payload, ...this.filterValue });
     }
     this.$emit('input', this.filterValue);
+    this.$emit('change', this.filterValue);
   }
 
   get daysList() {
@@ -363,7 +376,11 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      value.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
+      value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now().toISO())).toFormat('dd MMM yyyy');
+      value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
+    } else if  (facet.type === 'month') {
+      const date = DateTime.fromISO(value.value);
+      value.label = capitalizeFirstLetter((date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('LLLL yyyy'));
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));
@@ -402,6 +419,10 @@ class FilterPanel extends Vue {
     }
     value.hidden = facet.options?.hidden ?? false;
     return value;
+
+    function capitalizeFirstLetter(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
   }
 }
 </script>

package/src/components/icon/components/nomi-chart-funnel.vue

@@ -0,0 +1,6 @@
+<template><svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M10.809 11C9.18 11 8 12.334 8 13.81v2.798c0 1.476 1.181 2.81 2.809 2.81H53.19c1.628 0 2.809-1.334 2.809-2.81V13.81c0-1.476-1.181-2.81-2.809-2.81H10.81Zm5.436 11.194c-1.628 0-2.809 1.334-2.809 2.81v2.798c0 1.476 1.181 2.81 2.809 2.81h31.51c1.628 0 2.809-1.334 2.809-2.81v-2.798c0-1.476-1.181-2.81-2.809-2.81h-31.51Zm5.436 11.194c-1.627 0-2.809 1.334-2.809 2.81v2.798c0 1.476 1.182 2.81 2.81 2.81h20.637c1.627 0 2.808-1.334 2.808-2.81v-2.798c0-1.476-1.18-2.81-2.808-2.81H21.68Zm5.436 11.194c-1.627 0-2.808 1.334-2.808 2.81v2.798c0 1.476 1.18 2.81 2.808 2.81h9.765c1.628 0 2.81-1.334 2.81-2.81v-2.798c0-1.476-1.182-2.81-2.81-2.81h-9.764Z"
+          fill="currentColor"></path>
+</svg>
+</template>

package/src/components/icon/components/nomi-chart-kpi.vue

@@ -0,0 +1,8 @@
+<template><svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.761 40.248h-3.974l-4.324-6.954-1.48 1.06v5.894h-3.5V23.742h3.5v7.553l1.378-1.942 4.471-5.611h3.884l-5.758 7.305 5.803 9.201ZM34.339 31.51h1.151c1.077 0 1.882-.211 2.416-.633.535-.429.802-1.05.802-1.862 0-.82-.226-1.427-.677-1.818-.444-.392-1.144-.587-2.1-.587h-1.592v4.9Zm7.903-2.62c0 1.777-.557 3.135-1.671 4.076-1.106.941-2.683 1.411-4.73 1.411h-1.502v5.871h-3.5V23.742h5.272c2.003 0 3.523.433 4.562 1.298 1.046.858 1.569 2.142 1.569 3.85ZM45.358 40.248V23.742h3.5v16.506h-3.5Z"
+      fill="currentColor"></path>
+<path fill-rule="evenodd" clip-rule="evenodd"
+      d="M9.29 12.903c0-.855.743-1.548 1.66-1.548h43.133c.916 0 1.66.693 1.66 1.548 0 .855-.744 1.549-1.66 1.549H10.95c-.917 0-1.66-.694-1.66-1.549ZM9.29 51.097c0-.855.743-1.549 1.66-1.549h43.133c.916 0 1.66.694 1.66 1.549s-.744 1.548-1.66 1.548H10.95c-.917 0-1.66-.693-1.66-1.548Z"
+      fill="currentColor"></path>
+</svg>
+</template>

package/src/components/icon/components/nomi-control-panel.vue

@@ -0,0 +1,8 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 9L9 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13 15H5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M19 15L17 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="15" cy="15" r="2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="7" cy="9" r="2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/panels/Panel.vue

@@ -1,5 +1,6 @@
 <template>
   <div tabindex="-1" :class="{'b-panel': !nocard, 'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
+    <slot name="before-header"></slot>
     <div v-if="collapsed && !nocard" 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" />
@@ -12,19 +13,24 @@
     </div>
     <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3 pb-2">
       <slot name="header">
-        <div class="d-flex gap-3 align-items-center">
-          <itf-button v-if="closeable" icon default class="d-md-none" @click="closePanel">
-            <itf-icon name="chevron_left" />
+        <div class="d-flex gap-3 align-items-center" style="min-width: 0">
+          <itf-button icon default class="d-md-none open-menu-button" @click="$emit('open-menu')">
+            <itf-icon name="menu" new />
           </itf-button>
           <slot name="title">
-            <div class="b-panel__title fw-bold mb-0 h2" v-text="title"></div>
+            <div style="min-width: 0" class="b-panel__title fw-bold mb-0 h2 text-truncate" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">
           <slot name="buttons"></slot>
-          <itf-button v-if="expandable" icon default class="b-panel__expand_button d-none d-md-block" @click="fullsizePanel">
-            <itf-icon new name="expand" />
-          </itf-button>
+          <template v-if="expandable">
+            <itf-button v-if="!isFullSize" icon default class="b-panel__expand_button d-none d-md-block" @click="fullsizePanel">
+              <itf-icon new name="expand" />
+            </itf-button>
+            <itf-button v-else icon default class="b-panel__expand_button d-none d-md-block" @click="collapsePanel">
+              <itf-icon new name="collapse" />
+            </itf-button>
+          </template>
           <itf-button v-if="closeable" icon default class="b-panel__expand_button" @click="closePanel">
             <itf-icon new name="close" />
           </itf-button>
@@ -37,10 +43,36 @@
   </div>
 </template>
 <style lang="scss">
+@keyframes bellRing {
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(30deg);
+  }
+  20% {
+    transform: rotate(0deg);
+  }
+  30% {
+    transform: rotate(30deg);
+  }
+  40% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 .b-panel {
   --b-panel-bg: var(--bs-body-bg);
   --b-panel-color: var(--bs-body-color);
   --b-panel-box-shadow: 0px 2px 6px 0px rgba(21,23,25,.05);
+  --b-panel-white: #ffffff;
+  --b-panel-info: #5981c0;
+  --b-panel-success: #10834e;
+  --b-panel-warning: #cda277;
+  --b-panel-danger: #A90B00;
 
   margin-left: 8px;
 
@@ -158,6 +190,7 @@ class Panel extends Vue {
   @Prop() panel;
   @Prop(Boolean) collapsed;
   @Prop(Boolean) closeable;
+  @Prop(Boolean) isFullSize;
   @Prop(Boolean) expandable;
   @Prop(Boolean) animate;
   @Prop(Boolean) nocard;
@@ -170,6 +203,10 @@ class Panel extends Vue {
     this.$emit('expand');
   }
 
+  collapsePanel() {
+    this.$emit('collapse');
+  }
+
   fullsizePanel() {
     this.$emit('fullsize');
   }

package/src/components/panels/PanelList.vue

@@ -17,14 +17,20 @@
           :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)"
         >
+          <template #before-header>
+            <slot name="before-header" :panel="panel" :index="n" :payload="panel.payload"></slot>
+          </template>
           <slot
             :name="panel.type"
             :panel="panel"
@@ -34,9 +40,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 +52,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 +65,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 +78,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 +154,6 @@ $double-an-time: $an-time * 2;
     //transition: opacity $an-time linear;
   }
 }
-
 //.slide-enter-active > div {
 //  opacity: 0;
 //}
@@ -159,8 +164,10 @@ $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 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;
@@ -195,6 +202,7 @@ export interface IPanel {
 
 @Component({
   components: {
+    itfIcon,
     Panel
   },
   directives: {
@@ -208,15 +216,20 @@ 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;
 
   created() {
+    setRootPanelList(this);
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
+    console.info('created');
     this.parsePanelHash(); // щоб панелі змінювались при перезавантаженні
     window.addEventListener('popstate', this.handlePopState); // щоб панелі змінювались при навігації
   }
@@ -267,18 +280,30 @@ 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) {
+    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,
@@ -289,7 +314,7 @@ export default class PanelList extends Vue {
       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 +324,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)) {
+      // якщо немає відкритих панелей, то перша панель має бути розгорнута
+      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 +369,7 @@ 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();
         }
         newStack.push(newPanel);
         this.panelsStack = newStack;
@@ -353,12 +383,19 @@ 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();
   }
 
   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]) {
@@ -388,12 +425,40 @@ export default class PanelList extends Vue {
   fullsizePanel(panel: IPanel) {
     const newStack = [...this.panelsStack];
     for (const p of newStack) {
+      p.isLastOpened = !p.isCollapsed && p !== panel;
       p.isCollapsed = p !== panel;
     }
     this.panelsStack = newStack;
     this.setPanelHash();
   }
 
+  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;
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
+    this.setPanelHash();
+  }
+
+  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;
+    }
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
+    this.setPanelHash();
+  }
+
   getPanels(type) {
     return this.panelsStack.filter(panel => panel.type === type);
   }
@@ -403,14 +468,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) {
@@ -430,11 +500,14 @@ export default class PanelList extends Vue {
         }
       }
       this.panelsStack = newStack;
+      console.info('set', newStack);
       this.emitEvent('panels.changed', this.panelsStack);
+      this.updateTitle();
     }
   }
 
   handlePopState() {
+    console.info('handlePopState')
     this.parsePanelHash();
     // виправляє проблему відкритої панелі при натисканні кнопки "назад" до першої панелі
     if (this.panelsStack.length === 2) {

package/src/components/panels/helpers.ts

@@ -1,33 +1,57 @@
+import JSON5 from 'json5'
+import {isPathType} from "./index";
+
 export interface IPanel {
   type: string;
   payload?: any;
   isCollapsed?: boolean;
 }
 
-export function stackToHash(stack: IPanel[]) {
-  const hash = stack.map(panel => {
-    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
-  }).join('&');
-  return `#${hash}`;
+const COLLAPSE_SYMBOL = '~'
+const PARAMS_SYMBOL = ';'
+
+export function stackToHash(stack: IPanel[], prefix: string = '') {
+  let hash = stack.map(panel => {
+    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() ? '/' : '&');
+  if (prefix) {
+    hash = `${prefix}/${hash}`;
+  }
+  return isPathType() ? `/${hash}` : `#${hash}`;
 }
 
 
-export function hashToStack(hash: string|undefined): IPanel[] {
+export function hashToStack(hash: string|undefined, prefix: 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 (str && prefix) {
+    str = str.replace(new RegExp(`^${prefix}\/?`), '');
+  }
+  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
       };