@itfin/components 1.4.33 → 1.4.36

package/package.json

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

package/src/components/datepicker/DatePickerInline.vue

@@ -11,9 +11,9 @@
         <button
           v-for="(item, n) in daysList"
           :key="n"
-          :disabled="!isEnabled(item.date())"
-          :class="{'active': isSelected(item.date())}"
-          @click="selectDate(item.date())"
+          :disabled="!isEnabled(item.date)"
+          :class="{'active': isSelected(item.date)}"
+          @click="selectDate(item.date)"
           class="btn btn-outline-primary btn-sm text-start">
           {{item.title}}
         </button>
@@ -30,31 +30,29 @@ export default @Component({
   name: 'itfDatePickerInline',
 })
 class itfDatePickerInline extends Vue {
-  @Prop() value;
+  @Prop({ type: String }) value;
   @Prop({ type: String, default: 'yyyy-MM-dd' }) valueFormat;
   @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
+  @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
+  @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) minView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
+  @Prop({ type: Boolean, default: false }) range;
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop({ type:  [String, Date], default: '' }) maxDate;
-  @Prop({ type:  String, default: 'days' }) minView;
   @Prop({
     type: Array,
     default: function () {
-      return [// { title: 'Today', date: () => [DateTime.local(), DateTime.local()] },
-        { title: this.$t('components.thisWeek'), date: () => [DateTime.local().startOf('week'), DateTime.local().endOf('week')] },
-        { title: this.$t('components.lastWeek'), date: () => [DateTime.local().minus({ week: 1 }).startOf('week'), DateTime.local().minus({ week: 1 }).endOf('week')] },
-        { title: this.$t('components.thisMonth'), date: () => [DateTime.local().startOf('month'), DateTime.local().endOf('month')] },
-        { title: this.$t('components.lastMonth'), date: () => [DateTime.local().minus({ months: 1 }).startOf('month'), DateTime.local().minus({ months: 1 }).endOf('month')] },
-        { title: this.$t('components.thisQuarter'), date: () => [DateTime.local().startOf('quarter'), DateTime.local().endOf('quarter')] },
-        { title: this.$t('components.lastQuarter'), date: () => [DateTime.local().minus({ quarter: 1 }).startOf('quarter'), DateTime.local().minus({ quarter: 1 }).endOf('quarter')] },
-        { title: this.$t('components.thisYear'), date: () => [DateTime.local().startOf('year'), DateTime.local().endOf('year')] },
-        { title: this.$t('components.lastYear'), date: () => [DateTime.local().minus({ year: 1 }).startOf('year'), DateTime.local().minus({ year: 1 }).endOf('year')] },
+      return [
+        { title: this.$t('components.today'), date: {} },
+        { title: this.$t('components.tomorrow'), date: { days: 1 } },
+        { title: this.$t('components.inAWeek'), date: { week: 1 } },
+        { title: this.$t('components.inAMonth'), date: { month: 1 } },
+        { title: this.$t('components.inAHalfYear'), date: { month: 6 } },
+        { title: this.$t('components.inAYear'), date: { year: 1 } },
       ];
     }
   }) daysList;
-  @Prop(Boolean) compare;
-  @Prop({ type: Array }) range; // for compare mode
 
   calendar = null;
 
@@ -62,17 +60,12 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
-  compareMode(value) {
-    return this.calendar.compareMode(value);
-  }
-
   @Watch('minDate')
-  @Watch('maxDate')
-  @Watch('minView')
   async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();
     }
+
     const [
       { default: AirDatepicker },
       { default: localeEn },
@@ -90,35 +83,28 @@ class itfDatePickerInline extends Vue {
       uk: localeUk,
       de: localeDe,
     };
-    const opts = {
+    this.calendar = new AirDatepicker(this.$refs.calendar, {
       locale: locales[this.$i18n.locale] || locales.en,
       firstDay: 1,
       altFieldDateFormat: this.valueFormat,
+      range: this.range,
+      view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
+      minView: this.minView,
       minDate: this.minDate,
       maxDate: this.maxDate,
-      view: this.minView,
-      minView: this.minView,
-      range: true,
-      compareRange: true,
-      dynamicRange: true,
-      toggleSelected: function({ date, datepicker }) {
-        if (datepicker.selectedDates.length > 1) {
-          datepicker.selectDate(date);
-        }
-        return false;
-      },
-      selectedDates: this.valueAsLuxon
-        ? [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()]
-        : [],
-      onSelect: () => {
-        if (!this.calendar.rangeDateTo) {
+      selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
+      onSelect: ({ date }) => {
+        if (this.range && !this.calendar.rangeDateTo) {
           return;
         }
-        this.updateValue(
-          DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat),
-          DateTime.fromJSDate(this.calendar.rangeDateTo).toFormat(this.displayFormat),
-          false,
-        );
+        if (this.range) {
+          this.updateValue(
+            DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat),
+            false
+          );
+        } else {
+          this.updateValue(DateTime.fromJSDate(date).toFormat(this.displayFormat));
+        }
       },
       onRenderCell: ({ date }) => {
         const strDate = DateTime.fromJSDate(date).toFormat('yyyy-MM-dd');
@@ -127,22 +113,13 @@ class itfDatePickerInline extends Vue {
         }
         return {
           html: this.customDays[strDate].text || false,
-          classes: this.customDays[strDate].class || false,
+          classes: this.customDays[strDate].class || false
         };
       },
-    };
-    if (this.compare) {
-      opts.compareRange = true;
-    }
-
-    this.calendar = new AirDatepicker(this.$refs.calendar, opts);
+    });
     if (this.valueAsLuxon) {
-      this.calendar.setViewDate(this.valueAsLuxon[0].toJSDate());
-    }
-    if (this.compare) {
-      this.calendar.compareMode(true);
+      this.calendar.setViewDate(this.valueAsLuxon.toJSDate());
     }
-    this.onRangeChange();
   }
 
   beforeDestroy() {
@@ -158,97 +135,59 @@ class itfDatePickerInline extends Vue {
   }
 
   get valueAsLuxon() {
-    if (!this.value || this.value.length < 2 || !this.value[0] || !this.value[1]) {
+    if (!this.value) {
       return null;
     }
     if (this.valueFormat === 'ISO') {
-      return [
-        DateTime.fromISO(this.value[0]),
-        DateTime.fromISO(this.value[1]),
-      ];
+      return DateTime.fromISO(this.value);
+    }
+    return DateTime.fromFormat(this.value, this.valueFormat);
+  }
+
+  get displayValue() {
+    if (!this.valueAsLuxon) {
+      return '';
     }
-    return [
-      DateTime.fromFormat(this.value[0], this.valueFormat),
-      DateTime.fromFormat(this.value[1], this.valueFormat),
-    ];
+    return this.valueAsLuxon.toFormat(this.displayFormat);
   }
 
-  updateValue(date1, date2, emitEmpty = false) {
-    const val = date1 && DateTime.fromFormat(date1, this.displayFormat);
-    const val2 = date2 && DateTime.fromFormat(date2, this.displayFormat);
-    if (!val || !val.isValid || !val2 || !val2.isValid) {
+  updateValue(value, emitEmpty = false) {
+    const val = value && DateTime.fromFormat(value, this.displayFormat);
+    if (!val || !val.isValid) {
       if (emitEmpty) {
         this.$emit('input', null);
       }
       return;
     }
-    if ((this.minDateLuxon && (val < this.minDateLuxon || val2 < this.minDateLuxon)) ||
-      (this.maxDateLuxon && (val > this.maxDateLuxon || val2 > this.maxDateLuxon))
-    ) {
-      return;
-    }
-
     if (this.valueFormat === 'ISO') {
-      return this.$emit('input', [val.toISO(), val2.toISO()]);
+      return this.$emit('input', val.toISO());
     }
-    this.$emit('input', [
-      val.toFormat(this.valueFormat),
-      val2.toFormat(this.valueFormat),
-    ]);
+    this.$emit('input', val.toFormat(this.valueFormat));
   }
 
-  get minDateLuxon() {
-    return this.minDate && this.dateLuxon(this.minDate);
-  }
-  get maxDateLuxon() {
-    return this.maxDate && this.dateLuxon(this.maxDate);
+  isSelected(date) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.valueAsLuxon.hasSame(DateTime.local().plus(date), 'day');
   }
 
-  dateLuxon(date) {
-    return typeof date === 'string' ? DateTime.fromISO(date) : DateTime.fromJSDate(date);
+  get minDateLuxon() {
+    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
   }
 
   isEnabled(date) {
-    const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
-    const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
-
-    if (this.minDateLuxon) {
-      if (this.maxDateLuxon) {
-        return lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon && lxDate1 < this.maxDateLuxon && lxDate2 < this.maxDateLuxon;
-      } else {
-        return lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon;
-      }
-    } else if (this.maxDateLuxon) {
-      return lxDate1 < this.maxDateLuxon && lxDate2 < this.maxDateLuxon;
-    }
-
-    return true;
-  }
-
-  isSelected(date) {
-    if (!this.valueAsLuxon || this.valueAsLuxon.length < 2) {
-      return false;
-    }
-    return this.valueAsLuxon[0].hasSame(date[0], 'day') &&
-      this.valueAsLuxon[1].hasSame(date[1], 'day');
+    const lxDate = DateTime.local().plus(date);
+    return !(this.minDateLuxon && lxDate < this.minDateLuxon);
   }
 
   selectDate(date) {
-    const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
-    const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
-    this.updateValue(lxDate1.toFormat(this.displayFormat), lxDate2.toFormat(this.displayFormat));
-    this.calendar.selectDate([lxDate1.toJSDate(), lxDate2.toJSDate()], { silent: true });
-  }
-
-  @Watch('range')
-  onRangeChange() {
-    if (!this.calendar) {
+    let lxDate = DateTime.local().plus(date);
+    if (this.minDateLuxon && lxDate < this.minDateLuxon) {
       return;
     }
-    this.calendar.selectCompareRange(this.range ? [
-      DateTime.fromFormat(this.range[0], this.valueFormat).toJSDate(),
-      DateTime.fromFormat(this.range[1], this.valueFormat).toJSDate(),
-    ] : []);
+    this.calendar.selectDate(lxDate.toJSDate());
+    this.updateValue(lxDate.toFormat(this.displayFormat));
   }
 
   @Watch('value')
@@ -257,13 +196,7 @@ class itfDatePickerInline extends Vue {
       this.calendar && this.calendar.clear({ silent: true });
       return;
     }
-    const date1 = this.calendar.rangeDateFrom && DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat('yyyy-MM-dd')
-    const date2 = this.calendar.rangeDateTo && DateTime.fromJSDate(this.calendar.rangeDateTo).toFormat('yyyy-MM-dd')
-    if (date1 !== this.valueAsLuxon[0].toFormat('yyyy-MM-dd') || date2 !== this.valueAsLuxon[1].toFormat('yyyy-MM-dd')) {
-      this.$nextTick(() => {
-        this.calendar.selectDate(this.valueAsLuxon && [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()], { silent: true });
-      });
-    }
+    this.calendar.selectDate(this.valueAsLuxon.toJSDate(), { silent: true });
   }
 }
 </script>

package/src/components/icon/components/nomi-duplicate.vue

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 14L9 14C7.11438 14 6.17157 14 5.58579 13.4142C5 12.8284 5 11.8856 5 10L5 9C5 7.11438 5 6.17157 5.58579 5.58579C6.17157 5 7.11438 5 9 5L10 5C11.8856 5 12.8284 5 13.4142 5.58579C14 6.17157 14 7.11438 14 9L14 10C14 11.8856 14 12.8284 13.4142 13.4142C12.8284 14 11.8856 14 10 14Z" fill="currentColor"/>
+    <path d="M9.40039 14C9.40039 13.0742 9.39868 12.3195 9.47852 11.7256C9.56068 11.1144 9.73818 10.5841 10.1611 10.1611C10.5841 9.73818 11.1144 9.56068 11.7256 9.47852C12.3195 9.39868 13.0742 9.40039 14 9.40039L15 9.40039C15.9258 9.40039 16.6805 9.39868 17.2744 9.47852C17.8856 9.56068 18.4159 9.73818 18.8389 10.1611C19.2618 10.5841 19.4393 11.1144 19.5215 11.7256C19.6013 12.3195 19.5996 13.0742 19.5996 14L19.5996 15C19.5996 15.9258 19.6013 16.6805 19.5215 17.2744C19.4393 17.8856 19.2618 18.4159 18.8389 18.8389C18.4159 19.2618 17.8856 19.4393 17.2744 19.5215C16.6805 19.6013 15.9258 19.5996 15 19.5996L14 19.5996C13.0742 19.5996 12.3195 19.6013 11.7256 19.5215C11.1144 19.4393 10.5841 19.2618 10.1611 18.8389C9.73818 18.4159 9.56068 17.8856 9.47852 17.2744C9.39868 16.6805 9.40039 15.9258 9.40039 15L9.40039 14Z" fill="currentColor" stroke="white" stroke-width="1.2"/>
+</svg>
+</template>

package/src/components/panels/PanelLink.vue

@@ -5,6 +5,7 @@
 import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
 import { IPanel } from './PanelList.vue';
 import {stackToHash} from "@itfin/components/src/components/panels/helpers";
+import {getRootPanelList} from "@itfin/components/src/components/panels";
 
 @Component({
   components: {
@@ -15,7 +16,6 @@ import {stackToHash} from "@itfin/components/src/components/panels/helpers";
   }
 })
 export default class PanelLink extends Vue {
-  @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
   @Prop(Boolean) global: boolean;
@@ -25,6 +25,7 @@ export default class PanelLink extends Vue {
   @Prop() list;
   @Prop({ type: String, default: 'active' }) activeClass: string;
   @Prop(Boolean) append: boolean;
+  @Prop(Boolean) replace: boolean;
 
   get on() {
     const handlers = {};
@@ -35,7 +36,7 @@ export default class PanelLink extends Vue {
   }
 
   get activeList() {
-    return this.list ?? this.panelList;
+    return this.list ?? getRootPanelList();
   }
 
   get isActive() {
@@ -51,6 +52,9 @@ export default class PanelLink extends Vue {
     if (!this.append) {
       stack = stack.splice(0, this.currentPanel?.index + 1);
     }
+    if (this.replace) {
+      stack = [];
+    }
     const hash = stackToHash([
       ...stack,
       {
@@ -62,13 +66,18 @@ export default class PanelLink extends Vue {
   }
 
   onClick(e) {
-    console.info(this.activeList);
+    e.preventDefault();
+    e.stopPropagation();
+    const index = this.replace ? 0 : (this.append ? undefined : this.currentPanel?.index + 1);
+    this.$emit('open', {
+      panel: this.panel,
+      payload: this.payload || {},
+      index
+    });
     if (!this.activeList) {
       return;
     }
-    e.preventDefault();
-    e.stopPropagation();
-    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
+    this.activeList.openPanel(this.panel, this.payload || {}, index);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -17,20 +17,14 @@
           :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"
@@ -40,9 +34,9 @@
             :close="() => closePanel(panel)"
             :expand="() => expandPanel(panel)"
             :fullsize="() => fullsizePanel(panel)">
-            <component v-if="panel.components.default" :is="panel.components.default" :panel="panel" :payload="panel.payload" />
+            <component :is="panels[panel.type].default || panels[panel.type]" :panel="panel" :payload="panel.payload" />
           </slot>
-          <template v-if="$scopedSlots[`${panel.type}.title`] || panel.components.title" #title>
+          <template v-if="$scopedSlots[`${panel.type}.title`] || panels[panel.type].title" #title>
             <slot
               :name="`${panel.type}.title`"
               :panel="panel"
@@ -52,10 +46,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panel.components.title" :is="panel.components.title" :panel="panel" :payload="panel.payload" />
+              <component v-if="panels[panel.type].title" :is="panels[panel.type].title" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panel.components.buttons" #buttons>
+          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panels[panel.type].buttons" #buttons>
             <slot
               :name="`${panel.type}.buttons`"
               :panel="panel"
@@ -65,10 +59,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panel.components.buttons" :is="panel.components.buttons" :panel="panel" :payload="panel.payload" />
+              <component v-if="panels[panel.type].buttons" :is="panels[panel.type].buttons" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.header`] || panel.components.header" #header>
+          <template v-if="$scopedSlots[`${panel.type}.header`] || panels[panel.type].header" #header>
             <slot
               :name="`${panel.type}.header`"
               :panel="panel"
@@ -78,7 +72,7 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
-              <component v-if="panel.components.header" :is="panel.components.header" :panel="panel" :payload="panel.payload" />
+              <component v-if="panels[panel.type].header" :is="panels[panel.type].header" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
         </panel>
@@ -154,6 +148,7 @@ $double-an-time: $an-time * 2;
     //transition: opacity $an-time linear;
   }
 }
+
 //.slide-enter-active > div {
 //  opacity: 0;
 //}
@@ -164,10 +159,8 @@ $double-an-time: $an-time * 2;
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } 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";
+import Panel from './Panel';
+import {hashToStack, stackToHash} from "./helpers";
 
 interface VisualOptions {
   title: string;
@@ -202,7 +195,6 @@ export interface IPanel {
 
 @Component({
   components: {
-    itfIcon,
     Panel
   },
   directives: {
@@ -216,20 +208,15 @@ 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); // щоб панелі змінювались при навігації
   }
@@ -280,30 +267,18 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  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;
+  internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false) {
+    if (!this.panels[type]) {
+      return;
     }
-    if (typeof panel.caption !== 'function') {
+    if (typeof this.panels[type].caption !== 'function') {
       throw new Error('Panel component must have a "caption" function');
     }
     const newPanel:any = {
       id: this.nextId++,
-      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,
-      },
+      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,
       type,
       payload,
       isCollapsed: false,
@@ -314,7 +289,7 @@ export default class PanelList extends Vue {
       newPanel.isCloseable = false;
     }
     let newStack = [...this.panelsStack];
-    if (panel.permanentExpanded && newStack.length) {
+    if (this.panels[type].permanentExpanded && newStack.length) {
       for (const panel of newStack) {
         panel.isCollapsed = true;
       }
@@ -324,32 +299,25 @@ 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 = !!panel.permanentExpanded;
+        newPanel.permanentExpanded = !!this.panels[type].permanentExpanded;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
-        newPanel.open = (type, payload, index?:number) => this.openPanel(type, payload, index ?? 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; this.updateTitle() };
+        newPanel.setTitle = (title: string) => { newPanel.title = title; };
         newPanel.setIcon = (icon: string) => { newPanel.icon = icon; };
-        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.on = (eventName, func: (event: string, ...args: any[]) => any) => {
+          if (!newPanel.__events[eventName]) {
+            newPanel.__events[eventName] = [];
           }
+          newPanel.__events[eventName].push(func);
         };
         newPanel.off = (eventName, func: (event: string, ...args: any[]) => any) => {
           if (newPanel.__events[eventName]) {
@@ -369,7 +337,9 @@ export default class PanelList extends Vue {
         newPanel.getPayload = () => newPanel.payload;
         newPanel.setPayload = (value: any) => {
           newPanel.payload = value;
-          this.setPanelHash();
+          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);
         this.panelsStack = newStack;
@@ -383,19 +353,12 @@ 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]) {
@@ -425,40 +388,12 @@ 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);
   }
@@ -468,19 +403,14 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
-    if (this.routeType === 'path') {
-      this.$router.push({ path: hash });
-    } else {
-      this.$router.push({ hash });
-    }
-    this.updateTitle();
+    const hash = stackToHash(this.panelsStack).replace(/^#/, '');
+    this.$router.push({ hash });
   }
 
   async parsePanelHash() {
-    const hash = this.routeType === 'path' ? location.pathname : location.hash;
+    const {hash} = location;
     if (hash) {
-      const panels = hashToStack(hash, this.routePrefix);
+      const panels = hashToStack(hash);
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -500,14 +430,11 @@ 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,57 +1,33 @@
-import JSON5 from 'json5'
-import {isPathType} from "./index";
-
 export interface IPanel {
   type: string;
   payload?: any;
   isCollapsed?: boolean;
 }
 
-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 stackToHash(stack: IPanel[]) {
+  const hash = stack.map(panel => {
+    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
+  }).join('&');
+  return `#${hash}`;
 }
 
 
-export function hashToStack(hash: string|undefined, prefix: string = ''): IPanel[] {
+export function hashToStack(hash: string|undefined): IPanel[] {
   let stack:IPanel[] = [];
-  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);
+  if (hash) {
+    const str = hash.replace(/^#/, '');
+
+    stack = str.split('&').map(item => {
+      const [type, payload] = item.split('=');
+      const isCollapsed = !type.includes('!');
       let payloadObj:any = {};
       try {
-        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);
+        payloadObj = JSON.parse(decodeURIComponent(payload));
       } catch (e) {
         // ignore
-        console.warn(`Error parsing payload for type ${type}:`, payload, e);
       }
       return {
-        type: type.replace(COLLAPSE_SYMBOL, ''),
+        type: type.replace('!', ''),
         isCollapsed,
         payload: payloadObj
       };