@itfin/components 1.4.33 → 1.4.35

package/package.json

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

package/src/components/app/App.vue

@@ -74,9 +74,12 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      this.showError(err.message);
-      if (errFunc) {
-        errFunc(err);
+      if (err.code !== 'ERR_CANCELED') {
+        console.error(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">
+    <label :for="id" class="form-check-label w-100" :class="{ 'disabled': isDisabled }">
       <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="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
+  <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 }">
     <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,6 +18,17 @@
   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;
 
@@ -38,13 +49,9 @@
   &.active {
     background-color: rgba(var(--bs-primary-rgb),.1) !important;
   }
-  &:hover {
+  &:hover:not(.disabled) {
     background-color: rgba(0,0,0,.05);
   }
-
-  .form-check-label {
-    cursor: pointer;
-  }
 }
 </style>
 <script>

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/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
+  <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
     <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] && filter[facet.name].isDefault"
-          :text="filter[facet.name] && filter[facet.name].label"
+          :is-default="filter[facet.name].isDefault"
+          :text="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 && !visibleFilters.length">
+    <div v-if="loading">
       <span class="itf-spinner"></span>
       {{$t('loading')}}
     </div>
@@ -177,8 +177,6 @@ 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 {
@@ -208,7 +206,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);
+      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden).slice(0, 2);
     }
     return this.filters.filter(f => !f.options?.hidden);
   }
@@ -235,7 +233,15 @@ class FilterPanel extends Vue {
 
     this.filters = this.staticFilters ?? [];
     if (this.endpoint) {
-      this.loadData();
+      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;
     } else {
       this.loadFiltersValue();
     }
@@ -244,23 +250,6 @@ 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) {
@@ -280,7 +269,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];
+          filterValue[item.name] = payload[item.name] ?? filter[item.name].value;
         }
       }
     }
@@ -293,7 +282,6 @@ class FilterPanel extends Vue {
       this.filter = filter;
       this.filterValue = filterValue;
       this.$emit('input', this.filterValue);
-      this.$emit('loaded', this.filterValue);
       this.initObserver();
     }
   }
@@ -330,7 +318,6 @@ class FilterPanel extends Vue {
       this.panel.setPayload({ ...payload, ...this.filterValue });
     }
     this.$emit('input', this.filterValue);
-    this.$emit('change', this.filterValue);
   }
 
   get daysList() {
@@ -376,11 +363,7 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      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.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now())).toFormat('dd MMM 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));
@@ -419,10 +402,6 @@ 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-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/PanelItemEdit.vue

@@ -1,19 +1,19 @@
 <template>
-  <div v-loading="loading" class="px-3 pt-2 h-100">
+  <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column">
     <itf-form
       ref="editForm"
-      class="d-flex flex-column justify-content-between h-100"
+      class="d-flex flex-column justify-content-between flex-grow-1"
       @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 :loading="loading" :disabled="loading" @click="$emit('cancel')">
-            <span>{{ $t('components.modal.cancel') }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
+            <span>{{ cancelBtnText }}</span>
           </itf-button>
-          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary :loading="loading" :disabled="loading" @click="onSaveClick">
-            <span>{{ $t('components.modal.save') }}</span>
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
+            <span>{{ saveBtnText }}</span>
           </itf-button>
         </div>
       </div>
@@ -51,6 +51,8 @@ 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/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

@@ -218,7 +218,6 @@ export default class PanelList extends Vue {
   @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[] = [];
 
@@ -229,7 +228,6 @@ export default class PanelList extends Vue {
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
-    console.info('created');
     this.parsePanelHash(); // щоб панелі змінювались при перезавантаженні
     window.addEventListener('popstate', this.handlePopState); // щоб панелі змінювались при навігації
   }
@@ -468,9 +466,9 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
+    const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
     if (this.routeType === 'path') {
-      this.$router.push({ path: hash });
+      this.$router.push({ path: `/${hash}` });
     } else {
       this.$router.push({ hash });
     }
@@ -480,7 +478,7 @@ export default class PanelList extends Vue {
   async parsePanelHash() {
     const hash = this.routeType === 'path' ? location.pathname : location.hash;
     if (hash) {
-      const panels = hashToStack(hash, this.routePrefix);
+      const panels = hashToStack(hash, this.routeType === 'path');
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {
@@ -500,14 +498,12 @@ 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) {