@itfin/components 1.4.36 → 1.5.0

package/src/components/panels/PanelList.vue

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

package/src/components/panels/helpers.ts

@@ -1,33 +1,51 @@
+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[]) {
   const hash = stack.map(panel => {
-    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
-  }).join('&');
-  return `#${hash}`;
+    let json = JSON5.stringify(panel.payload || {});
+    json = json.substring(1, json.length - 1); // Remove the outer {}
+    return `${panel.type}${panel.isCollapsed ? COLLAPSE_SYMBOL : ''}${json ? PARAMS_SYMBOL : ''}${json}`;
+  }).join(isPathType() ? '/' : '&');
+  return isPathType() ? `/${hash}` : `#${hash}`;
 }
 
 
 export function hashToStack(hash: string|undefined): IPanel[] {
   let stack:IPanel[] = [];
-  if (hash) {
-    const str = hash.replace(/^#/, '');
-
-    stack = str.split('&').map(item => {
-      const [type, payload] = item.split('=');
-      const isCollapsed = !type.includes('!');
+  const str = hash.replace(isPathType() ? /^\// : /^#/, '');
+  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
       };

package/src/components/popover/Popover.vue

@@ -24,20 +24,26 @@ export default @Component({
 class itfPopover extends Vue {
   @PropSync('visible') value;
 
-  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
+  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top', 'auto'].includes(value) }) placement;
 
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
   @Prop({ type: String, default: '' }) customClass;
+  @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
+  @Prop({ type: String }) locator;
+  @Prop({ type: Boolean, default: false }) isActivatorHighlighted;
 
   modalId = '';
-
   modalEl = null;
+  targetEl = null;
 
   ignoreUpdate = false; // потрібно щоб не оновлювалось visible декілька разів, бо буде баг коли вікно відкривається і одразу закривається
 
+  initTimeout = null;
+
   beforeDestroy() {
-    this.hide();
+    this.destroy();
   }
 
   @Watch('value')
@@ -46,9 +52,26 @@ class itfPopover extends Vue {
       return;
     }
     if (newValue) {
-      this.modalEl.show();
+      this.modalEl?.show();
+    } else {
+      this.modalEl?.hide();
+    }
+  }
+
+  @Watch('locator')
+  onLocatorChanged(newValue, oldValue) {
+    if (newValue !== oldValue && newValue && this.modalEl) {
+      this.initPopover();
+    }
+  }
+
+  @Watch('isActivatorHighlighted')
+  onIsActivatorHighlightedChanged(newValue, oldValue) {
+    if (!this.targetEl) return;
+    if (newValue) {
+      this.targetEl.classList.add('pulsing');
     } else {
-      this.modalEl.hide();
+      this.targetEl.classList.remove('pulsing');
     }
   }
 
@@ -58,14 +81,62 @@ class itfPopover extends Vue {
   }
 
   async mounted() {
+    this.refresh(100);
+  }
+
+  destroy() {
+    if (this.initTimeout) {
+      clearTimeout(this.initTimeout);
+      this.initTimeout = null;
+    }
+    if (this.modalEl) {
+      this.modalEl.dispose();
+      this.modalEl = null;
+    }
+    if (this.targetEl) this.resetTargetEl();
+  }
+
+  refresh(delay = 300) {
+    this.destroy();
+
+    if (this.initTimeout) clearTimeout(this.initTimeout);
+    this.initTimeout = setTimeout(() => this.initPopover(), delay);
+  }
+
+  async initPopover() {
     if (typeof window === 'undefined') {
       return;
     }
-    const el = this.$refs.popover;
+
+    // Remove listeners from the previous target element before finding the new one
+    if (this.modalEl) this.destroy();
+
+    // Determine target
+    if (this.locator) {
+      this.targetEl = document.querySelector(this.locator);
+      if (!this.targetEl) return;
+    } else {
+      this.targetEl = this.$el;
+    }
+
+    if (this.isActivatorHighlighted) this.targetEl.classList.add('pulsing');
+
+    const el = this.$refs.popover || "";
     const { default: Popover } = await import('bootstrap/js/src/popover');
 
-    const context = this.$el.closest('.itf-append-context') || document.body;
-    this.modalEl = new Popover(this.$el, {
+    if (this._isDestroyed) return;
+
+    let context = document.body;
+    if (this.appendToContext && this.targetEl instanceof Node && this.targetEl.parentNode) {
+      context = this.targetEl.closest('.itf-append-context') || document.body;
+      this.targetEl.parentNode.removeChild(this.targetEl);
+      context.appendChild(this.targetEl); // should append only to body
+    } else if (this.appendToBody && this.targetEl instanceof Node && this.targetEl.parentNode) {
+      this.targetEl.parentNode.removeChild(this.targetEl);
+      context.appendChild(this.targetEl); // should append only to body
+    }
+
+    this.modalEl = new Popover(this.targetEl, {
       content: el,
       container: context,
       sanitize: false,
@@ -74,26 +145,38 @@ class itfPopover extends Vue {
       placement: this.placement,
       trigger: this.trigger,
     });
+
     this.onVisibleChanged(this.value);
-    this.$el.addEventListener('shown.bs.popover', () => {
-      this.ignoreUpdate = true;
-      this.value = true;
-      document.body.addEventListener('click', this.clickOutside);
-      this.$nextTick(() => this.ignoreUpdate = false);
-    });
-    this.$el.addEventListener('hidden.bs.popover', () => {
-      this.ignoreUpdate = true;
-      this.value = false;
-      document.body.removeEventListener('click', this.clickOutside);
-      this.$nextTick(() => this.ignoreUpdate = false);
-    });
+    this.targetEl.addEventListener('shown.bs.popover', this.handleShown);
+    this.targetEl.addEventListener('hidden.bs.popover', this.handleHidden);
+  }
+
+  resetTargetEl() {
+    this.targetEl.removeEventListener('shown.bs.popover', this.handleShown);
+    this.targetEl.removeEventListener('hidden.bs.popover', this.handleHidden);
+    this.targetEl.classList.remove('pulsing');
+    this.targetEl = null;
+  }
+
+  handleShown() {
+    this.ignoreUpdate = true;
+    this.value = true;
+    document.body.addEventListener('click', this.clickOutside);
+    this.$nextTick(() => this.ignoreUpdate = false);
+  }
+
+  handleHidden() {
+    this.ignoreUpdate = true;
+    this.value = false;
+    document.body.removeEventListener('click', this.clickOutside);
+    this.$nextTick(() => this.ignoreUpdate = false);
   }
 
   clickOutside(e) {
     if (this.trigger !== 'click' || !e.target) {
       return;
     }
-    if (this.$el !== e.target && e.target.closest('.itf-popover') !== this.$refs.popover) {
+    if (this.targetEl !== e.target && e.target.closest('.itf-popover') !== this.$refs.popover) {
       this.hide();
     }
   }
@@ -107,7 +190,7 @@ class itfPopover extends Vue {
   hide() {
     if (this.modalEl) {
       // треба затримка щоб попав не показався знову через отримання фокусу
-      setTimeout(() => this.modalEl.hide(), 10);
+      setTimeout(() => this.modalEl?.hide(), 10);
     }
   }
 }