@itfin/components 1.4.35 → 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"
@@ -27,6 +28,8 @@
           @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>
@@ -163,7 +166,7 @@ $double-an-time: $an-time * 2;
 //}
 </style>
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+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";
@@ -182,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;
@@ -223,6 +227,17 @@ export default class PanelList extends Vue {
 
   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) {
@@ -244,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();
@@ -265,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) {
@@ -278,7 +296,7 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  async internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false) {
+  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);
@@ -307,6 +325,7 @@ export default class PanelList extends Vue {
       isCollapsed: false,
       isCloseable: true,
       __events: {},
+      inAppOnboarding: panel.inAppOnboarding ? panel.inAppOnboarding(this.$t.bind(this)) : null,
     };
     if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
@@ -322,7 +341,7 @@ export default class PanelList extends Vue {
       isAnimation = newStack.length === openIndex;
       newStack = newStack.slice(0, openIndex);
     }
-    if (newStack.length > 0 && !newStack.find(p => !p.isCollapsed)) {
+    if (newStack.length > 0 && !newStack.find(p => !p.isCollapsed) && !noExpand) {
       // якщо немає відкритих панелей, то перша панель має бути розгорнута
       newStack[0].isCollapsed = false;
     }
@@ -369,6 +388,10 @@ export default class PanelList extends Vue {
           newPanel.payload = value;
           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;
         this.ensureOnlyTwoOpenPanels(newPanel.id);
@@ -390,6 +413,7 @@ export default class PanelList extends Vue {
   async openPanel(type: string, payload: any, openIndex?: number) {
     await this.internalOpenPanel(type, payload, openIndex);
     this.setPanelHash();
+    if(openIndex) this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   emitEvent(event: string, ...args: any[]) {
@@ -411,13 +435,14 @@ 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) {
@@ -425,9 +450,13 @@ export default class PanelList extends Vue {
     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() {
@@ -438,9 +467,13 @@ export default class PanelList extends Vue {
     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) {
@@ -448,13 +481,17 @@ export default class PanelList extends Vue {
     const currenctIndex = newStack.findIndex(p => p.id === panel.id);
     const lastOpenedIndex = newStack.findIndex(p => p.isLastOpened);
     if (lastOpenedIndex !== -1) { // якщо зебрежена остання відкрита панель
-      newStack[lastOpenedIndex].isCollapsed = false
+      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) {
@@ -468,7 +505,7 @@ 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}` });
+      this.$router.push({ path: `${hash}` });
     } else {
       this.$router.push({ hash });
     }
@@ -487,16 +524,22 @@ 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();
@@ -521,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/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);
     }
   }
 }

package/src/components/segmented-control/SegmentedControl.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div class="itf-segmeneted-control d-none d-lg-grid">
+    <div class="itf-segmeneted-control d-none d-lg-grid" :class="{'small': small}">
       <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
 
       <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
-        <label>
+        <label v-tooltip="tooltipCallback(item)" :key="n" :class="{'disabled': disabled || item[itemDisabled]}">
           <slot name="itemMarkup" :item="item" />
           <input
             ref="input"
             type="radio"
             :name="name"
             :value="n"
-            v-tooltip="tooltipCallback(item)"
+            :disabled="disabled || item[itemDisabled]"
             :checked="isChecked(item)"
             @change="onItemChanged(item)" />
           <span>
@@ -24,6 +24,7 @@
       <itf-select
         :value="value"
         @input="$emit('input', $event)"
+        :disabled="disabled"
         :options="itemsWithNames"
         :reduce="(item) => item[itemKey]"
         :get-option-label="(item) => item[itemText]"
@@ -50,8 +51,10 @@ class itfSegmentedControl extends Vue {
   @Prop({ type: Array, required: true }) items;
   @Prop({ type: String, default: 'Id' }) itemKey;
   @Prop({ type: String, default: 'Name' }) itemText;
+  @Prop({ type: String, default: 'Disabled' }) itemDisabled;
   @Prop({ type: Boolean, default: false }) returnObject;
   @Prop({ type: Boolean, default: false }) disabled;
+  @Prop({ type: Boolean, default: false }) small;
   @Prop({ type: Function, default: () => null }) tooltipCallback;
 
   timers = [];
@@ -127,6 +130,9 @@ class itfSegmentedControl extends Vue {
   }
 
   onItemChanged (item) {
+    if (this.disabled) {
+      return;
+    }
     this.$emit('input', this.returnObject ? item : item[this.itemKey]);
   }
 }

package/src/components/sortable/draggable.js

@@ -7,7 +7,7 @@ const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
 
 const DEFAULT_OPTIONS = {
   draggableClass: DRAGGABLE_CLASS,
-  dragHandleClass: DRAG_HANDLE_CLASS,
+  // dragHandleClass: DRAG_HANDLE_CLASS,
   delay: 200,
   tresholdDistance: 2,
   draggable: `.${DRAGGABLE_CLASS}`,

package/src/components/table/Table2.vue

@@ -19,7 +19,7 @@
       </div>
     </itf-notice-popout>
     <div class="scrollable scrollable-x">
-      <itf-checkbox-group v-model="selectedIds">
+      <itf-checkbox-group v-model="selectedIds" class="d-flex flex-column" style="min-width: 100%; width: max-content">
         <template v-for="(group, index) in groups">
           <div class="table-view-body">
             <itf-table-group
@@ -59,7 +59,10 @@
               :editable-property="editableProperty"
               :sorting.sync="_sorting"
               :active="active"
+              :new-label="newLabel"
+              :collapsed-group-ids="collapsedGroupIds"
               @update:expanded-ids="$emit('update:expanded-ids', $event)"
+              @update:collapsed-group-ids="$emit('update:collapsed-group-ids', $event)"
               @new="$emit('new', $event)"
               @filter="$emit('filter', $event)"
               @add-column="$emit('add-column', $event)"
@@ -120,6 +123,7 @@ class itfTable2 extends Vue {
   @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
   @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => [] }) expandedIds;
+  @Prop({ type: Array }) collapsedGroupIds;
   @Prop() currency;
   @Prop() currencies;
   @Prop(Boolean) stickyHeader;
@@ -138,6 +142,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) striped;
   @Prop(Boolean) absolute;
   @Prop(Boolean) clickable;
+  @Prop({type: String, default: function() { return this.$t('components.table.new'); } }) newLabel;
 
   state = {
     selectedIds: [],
@@ -186,7 +191,7 @@ class itfTable2 extends Vue {
       if (stateColumnIndex === -1) {
         state.columns.push(column);
       } else {
-        state.columns[stateColumnIndex] = { ...column, width: state.columns[stateColumnIndex].width };
+        state.columns[stateColumnIndex] = { ...column, width: state.columns[stateColumnIndex].width, visible: state.columns[stateColumnIndex].visible };
       }
     }
     for (const column of state.columns) {
@@ -206,7 +211,7 @@ class itfTable2 extends Vue {
     if (!this.stateName) {
       return;
     }
-    const columns = this.state.columns.map((s) => ({ property: s.property, width: s.width, index: s.index }));
+    const columns = this.state.columns.map((s) => ({ property: s.property, width: s.width, index: s.index, visible: s.visible }));
     localStorage.setItem(this.stateKey, JSON.stringify({ columns }));
   }
 

package/src/components/table/TableBody.vue

@@ -1,6 +1,22 @@
 <template>
   <div>
+    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
+      <div class="table-view-item">
+        <div class="table-row-template">
+          <div accept-group="items" class="table-view-body-space"></div>
+          <div class="shadow-area"></div>
+          <div class="indicator sticky"></div>
+          <div class="table-item-inner">
+            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
+              {{$t('components.table.noResults')}}
+            </div>
+            <div class="boundary right"></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <itf-table-rows
+      v-else
       class="scroller"
       :rows="rows"
       :selected-ids="selectedIds"
@@ -33,21 +49,6 @@
         <slot :name="name" v-bind="slotData || {}"/>
       </template>
     </itf-table-rows>
-    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
-      <div class="table-view-item">
-        <div class="table-row-template">
-          <div accept-group="items" class="table-view-body-space"></div>
-          <div class="shadow-area"></div>
-          <div class="indicator sticky"></div>
-          <div class="table-item-inner">
-            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
-              {{$t('components.table.noResults')}}
-            </div>
-            <div class="boundary right"></div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <style lang="scss">
@@ -92,7 +93,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1rem;//var(--itf-table-min-width);
+  min-width: 1rem; // важливо для скруглення //var(--itf-table-min-width);
 }
 
 .table-row-template, .table-view-header-value {