@itfin/components 1.4.40 → 1.5.1

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

@@ -7,9 +7,11 @@
     'permanent-checkboxes': selectedIds.length
   }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px`, '--shadow-area-width': `${shadowWidth}px` }">
     <itf-notice-popout :visible="showGroupOperations" class="rounded-3 bg-black text-white">
-      <div class="d-flex gap-2 ps-3 align-items-center small itf-table2_mass-operations">
-        <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
-        <div class="opacity-50">•</div>
+      <div class="d-flex gap-2 ps-2 align-items-center small itf-table2_mass-operations">
+        <slot name="group-operations-count">
+          <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
+          <div class="opacity-50">•</div>
+        </slot>
         <a href="" class="me-3 opacity-50 text-white text-decoration-none" @click.stop.prevent="selectedIds = []">{{$t('components.table.cancelSelected')}}</a>
         <div>
           <slot name="group-operations"></slot>
@@ -17,64 +19,64 @@
       </div>
     </itf-notice-popout>
     <div class="scrollable scrollable-x">
-    <itf-checkbox-group v-model="selectedIds">
-      <template v-for="(group, index) in groups">
-        <div class="table-view-body">
-          <itf-table-group
-            :key="index"
-            @update="$emit('update', { ...$event, group, groupIndex: index })"
-            @row-click="$emit('row-click', $event)"
-            :id-property="idProperty"
-            :columns="columns"
-            @update:columns="onColumnsUpdate"
-            :rows="group.rows"
-            :title="group.name"
-            :selected-ids.sync="selectedIds"
-            :add-new-rows="addNewRows"
-            :shadow-width="shadowWidth"
-            :column-sorting="columnSorting"
-            :column-resizing="columnResizing"
-            :show-grouping="showGrouping"
-            :show-summary="showSummary"
-            :show-add-column="showAddColumn"
-            :show-actions="showActions"
-            :show-header="!noHeader"
-            :schema="schema"
-            :editable="editable"
-            :no-column-menu="noColumnMenu"
-            :no-select-all="noSelectAll"
-            :currencies="currencies"
-            :currency="currency"
-            :subrows-property="subrowsProperty"
-            :async-subrows-property="asyncSubrowsProperty"
-            :divider-property="dividerProperty"
-            :indicator-type="indicatorType"
-            :expanded-all="expandedAll"
-            :indicatorWidth="indicatorWidth"
-            :striped="striped"
-            :expanded-ids="expandedIds"
-            :css-property="cssProperty"
-            :sticky-header="stickyHeader"
-            :editable-property="editableProperty"
-            :sorting.sync="_sorting"
-            :sort-as-string="sortAsString"
-            :active="active"
-            @loadChildren="$emit('loadChildren', $event)"
-            @update:expanded-ids="$emit('update:expanded-ids', $event)"
-            @new="$emit('new', $event)"
-            @filter="$emit('filter', $event)"
-            @add-column="$emit('add-column', $event)"
-          >
-            <template v-for="(_, name) in $slots" #[name]="slotData">
-              <slot :name="name" v-bind="slotData || {}" />
-            </template>
-            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-              <slot :name="name" v-bind="slotData || {}" />
-            </template>
-          </itf-table-group>
-        </div>
-      </template>
-    </itf-checkbox-group>
+      <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
+              :key="index"
+              @update="$emit('update', { ...$event, group, groupIndex: index })"
+              @row-click="$emit('row-click', $event)"
+              :id-property="idProperty"
+              :columns="columns"
+              @update:columns="onColumnsUpdate"
+              :rows="group.rows"
+              :title="group.name"
+              :selected-ids.sync="selectedIds"
+              :add-new-rows="addNewRows"
+              :shadow-width="shadowWidth"
+              :column-sorting="columnSorting"
+              :column-resizing="columnResizing"
+              :show-grouping="showGrouping"
+              :show-summary="showSummary"
+              :show-add-column="showAddColumn"
+              :show-actions="showActions"
+              :show-header="!noHeader"
+              :schema="schema"
+              :editable="editable"
+              :no-column-menu="noColumnMenu"
+              :no-select-all="noSelectAll"
+              :currencies="currencies"
+              :currency="currency"
+              :subrows-property="subrowsProperty"
+              :divider-property="dividerProperty"
+              :indicator-type="indicatorType"
+              :expanded-all="expandedAll"
+              :indicatorWidth="indicatorWidth"
+              :striped="striped"
+              :expanded-ids="expandedIds"
+              :css-property="cssProperty"
+              :sticky-header="stickyHeader"
+              :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)"
+            >
+              <template v-for="(_, name) in $slots" #[name]="slotData">
+                <slot :name="name" v-bind="slotData || {}" />
+              </template>
+              <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+                <slot :name="name" v-bind="slotData || {}" />
+              </template>
+            </itf-table-group>
+          </div>
+        </template>
+      </itf-checkbox-group>
     </div>
   </div>
 
@@ -105,13 +107,11 @@ export default @Component({
 })
 class itfTable2 extends Vue {
   // @Prop({ required: true, type: Array }) columns;
-  @Prop(Boolean) sortAsString;
   @Prop({ required: true, type: Array }) rows;
   @Prop({ type: String, default: null }) groupBy;
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
-  @Prop({ type: String, default: null }) asyncSubrowsProperty;
   @Prop({ type: String, default: null }) dividerProperty;
   @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: null }) active;
@@ -123,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;
@@ -141,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: [],
@@ -189,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) {
@@ -209,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 }));
   }
 
@@ -247,8 +249,7 @@ class itfTable2 extends Vue {
   @Watch('selectedIds')
   onSelectedIdsUpdate(selectedIds) {
     this.state.selectedIds = selectedIds;
-    // метод saveTableState не зберігає selectedIds в localStorage, не впевнений що він тут треба
-    // this.saveTableState();
+    this.saveTableState();
   }
 
   onColumnsUpdate(columns) {

package/src/components/table/TableBody.vue

@@ -1,13 +1,28 @@
 <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"
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
-      :async-subrows-property="asyncSubrowsProperty"
       :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
@@ -34,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">
@@ -93,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 {
@@ -145,7 +145,6 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
-  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -166,10 +165,6 @@ class itfTableBody extends Vue {
     this.$emit('update:expanded-ids', this.expandedIds.includes(item[this.idProperty])
       ? this.expandedIds.filter((id) => id !== item[this.idProperty])
       : [...this.expandedIds, item[this.idProperty]]);
-
-    if (this.asyncSubrowsProperty && item[this.asyncSubrowsProperty] && item[this.asyncSubrowsProperty]) {
-      this.$emit('loadChildren', item);
-    }
   }
 }
 </script>