@itfin/components 1.4.35 → 1.4.40

package/package.json

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

package/src/components/app/App.vue

@@ -74,12 +74,9 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      if (err.code !== 'ERR_CANCELED') {
-        console.error(err);
-        this.showError(err.message);
-        if (errFunc) {
-          errFunc(err);
-        }
+      this.showError(err.message);
+      if (errFunc) {
+        errFunc(err);
       }
     }
   }

package/src/components/checkbox/Checkbox.vue

@@ -2,7 +2,7 @@
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
     <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
-    <label :for="id" class="form-check-label w-100" :class="{ 'disabled': isDisabled }">
+    <label :for="id" class="form-check-label">
       <slot name="label">
         {{label}}
         <slot name="icon"></slot>

package/src/components/checkbox/RadioBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-radio-box form-check card" :class="{ 'disabled': disabled, 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
+  <div class="itf-radio-box form-check card" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
     <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
     <label :for="id" slot="label" class="form-check-label card-body">
 
@@ -18,17 +18,6 @@
   position: relative;
   cursor: pointer;
 
-  &:not(.disabled) {
-    cursor: pointer;
-
-    .form-check-label {
-      cursor: pointer;
-    }
-  }
-
-  .form-check-label {
-    cursor: not-allowed;
-  }
   &.left {
     padding: 0 0 0 2.5rem;
 
@@ -49,9 +38,13 @@
   &.active {
     background-color: rgba(var(--bs-primary-rgb),.1) !important;
   }
-  &:hover:not(.disabled) {
+  &:hover {
     background-color: rgba(0,0,0,.05);
   }
+
+  .form-check-label {
+    cursor: pointer;
+  }
 }
 </style>
 <script>

package/src/components/filter/FilterBadge.vue

@@ -40,6 +40,11 @@
         <itf-date-picker-inline
           style="margin: -.5rem"
           :value="value.value"
+          :only-calendar="options.calendarOptions && options.calendarOptions.onlyCalendar"
+          :max-date="options.calendarOptions && options.calendarOptions.maxDate"
+          :min-date="options.calendarOptions && options.calendarOptions.minDate"
+          :start-view="options.calendarOptions && options.calendarOptions.startView"
+          :min-view="options.calendarOptions && options.calendarOptions.minView"
           @input="onFilterChange({ value: $event })"
         />
       </template>

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,28 @@ 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 ?? DateTime.now())).toFormat('dd MMM yyyy');
+      const effectiveDate = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now().toISO()));
+      // Якщо календарь в режимі вибору місяця (startView/minView === 'month'),
+      // відображаємо весь місяць, наприклад: "01 - 31 Mar 2026"
+      if (
+        facet.options?.calendarOptions &&
+        facet.options.calendarOptions.startView === 'months' &&
+        facet.options.calendarOptions.minView === 'months'
+      ) {
+        const startOfMonth = effectiveDate.startOf('month');
+        const endOfMonth = effectiveDate.endOf('month');
+        const startLabel = startOfMonth.toFormat('dd');
+        const endLabel = endOfMonth.toFormat('dd MMM yyyy');
+        value.label = `${startLabel} - ${endLabel}`;
+      } else {
+        // Стандартний сценарій: одиночна дата
+        value.label = effectiveDate.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 +436,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-arrow-right.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-cash-repeat.vue

@@ -0,0 +1,6 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 5C16.8856 5 17.8283 5.00015 18.4141 5.58594C18.9998 6.17172 19 7.11438 19 9V11C19 11.389 18.9973 11.7379 18.9922 12.0518C18.4552 11.8439 17.823 11.9563 17.3896 12.3896C17.2259 12.5534 17.1091 12.7457 17.0371 12.9502H15.2002C13.8757 12.9502 12.7541 13.8093 12.3564 15H9C7.11438 15 6.17172 14.9998 5.58594 14.4141C5.00015 13.8283 5 12.8856 5 11V9C5 7.11438 5.00015 6.17172 5.58594 5.58594C6.17172 5.00015 7.11438 5 9 5H15ZM12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8ZM8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9ZM16 9C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1318 13.1318C18.3076 12.9561 18.5928 12.9561 18.7686 13.1318L19.7686 14.1318C19.9443 14.3075 19.9443 14.5928 19.7686 14.7685L18.7686 15.7685C18.5928 15.9442 18.3076 15.9442 18.1318 15.7685C17.9561 15.5928 17.9561 15.3075 18.1318 15.1318L18.3633 14.9004H15.2002C14.6203 14.9004 14.1504 15.3703 14.1504 15.9502V16.9502C14.1504 17.1987 13.9487 17.4004 13.7002 17.4004C13.4517 17.4004 13.25 17.1987 13.25 16.9502V15.9502C13.25 14.8732 14.1232 14 15.2002 14H18.3633L18.1318 13.7685C17.9561 13.5928 17.9561 13.3075 18.1318 13.1318Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2002 16.4999C19.4487 16.5 19.6504 16.7016 19.6504 16.9501V17.9501C19.6504 19.0271 18.7771 19.9003 17.7002 19.9003H14.5371L14.7685 20.1318C14.9442 20.3075 14.9442 20.5928 14.7685 20.7685C14.5928 20.9442 14.3075 20.9442 14.1318 20.7685L13.1318 19.7685C12.9561 19.5928 12.9561 19.3075 13.1318 19.1318L14.1318 18.1318C14.3075 17.9561 14.5928 17.956 14.7685 18.1318C14.9442 18.3075 14.9442 18.5928 14.7685 18.7685L14.5371 18.9999H17.7002C18.28 18.9999 18.75 18.53 18.75 17.9501V16.9501C18.75 16.7016 18.9516 16.4999 19.2002 16.4999Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-chavron-up.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 14L12 10L8 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10L12 14L16 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 14L12 10L8 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-chevron-up.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 14L12 10L8 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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

@@ -0,0 +1,7 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.3535 7.47363V11.6419" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M15.966 13.7257L12.3535 11.6416" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.47353 9.18446H4V5.71094" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.9525 17.0431C8.02097 18.1124 9.38259 18.8409 10.8651 19.1362C12.3476 19.4316 13.8845 19.2806 15.2812 18.7024C16.6779 18.1242 17.8717 17.1448 18.7117 15.8879C19.5517 14.6311 20 13.1534 20 11.6418C20 10.1301 19.5517 8.6524 18.7117 7.39558C17.8717 6.13876 16.6779 5.1593 15.2812 4.5811C13.8845 4.0029 12.3476 3.85193 10.8651 4.14729C9.38259 4.44266 8.02097 5.17109 6.9525 6.24043L4 9.18424" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-pen-alt.vue

@@ -0,0 +1,4 @@
+<template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 11.9316V13.6002C6 13.8211 6.17909 14.0002 6.4 14.0002H8.06863C8.2808 14.0002 8.48429 13.9159 8.63432 13.7659L14.2343 8.16588C14.5467 7.85346 14.5467 7.34693 14.2343 7.03451L12.9657 5.76588C12.6533 5.45346 12.1467 5.45346 11.8343 5.76588L6.23431 11.3659C6.08429 11.5159 6 11.7194 6 11.9316Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/panels/PanelItemEdit.vue

@@ -1,19 +1,19 @@
 <template>
-  <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column">
+  <div v-loading="loading" class="px-3 pt-2 h-100">
     <itf-form
       ref="editForm"
-      class="d-flex flex-column justify-content-between flex-grow-1"
+      class="d-flex flex-column justify-content-between h-100"
       @keydown.native.shift.enter.stop.prevent="onSaveClick"
       @keydown.native.esc.stop.prevent="$emit('cancel')"
     >
       <slot></slot>
       <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
         <div v-if="!hideFooter">
-          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
-            <span>{{ cancelBtnText }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary :loading="loading" :disabled="loading" @click="$emit('cancel')">
+            <span>{{ $t('components.modal.cancel') }}</span>
           </itf-button>
-          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
-            <span>{{ saveBtnText }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary :loading="loading" :disabled="loading" @click="onSaveClick">
+            <span>{{ $t('components.modal.save') }}</span>
           </itf-button>
         </div>
       </div>
@@ -51,8 +51,6 @@ import itfButton from '../button/Button.vue';
 export default class PanelItemEdit extends Vue {
   @Prop(Boolean) loading;
   @Prop(Boolean) hideFooter;
-  @Prop({ type: String, default: function() { return this.$t('components.modal.save') } }) saveBtnText;
-  @Prop({ type: String, default: function() { return this.$t('components.modal.cancel') } }) cancelBtnText;
 
   onSaveClick() {
     if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {

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,15 +208,12 @@ 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;
 
   panelsStack:IPanel[] = [];
 
   nextId:number = 0;
 
   created() {
-    setRootPanelList(this);
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
@@ -278,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,
@@ -312,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;
       }
@@ -322,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]) {
@@ -367,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;
@@ -381,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]) {
@@ -423,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);
   }
@@ -466,19 +403,14 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routeType === 'path').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.routeType === 'path');
+      const panels = hashToStack(hash);
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -499,7 +431,6 @@ export default class PanelList extends Vue {
       }
       this.panelsStack = newStack;
       this.emitEvent('panels.changed', this.panelsStack);
-      this.updateTitle();
     }
   }