@itfin/components 1.3.70 → 1.3.72

package/package.json

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

package/src/assets/scss/components/select/_selected.scss

@@ -18,7 +18,11 @@
   background-color: #ccc;
 
   &.badge {
-    padding: 0.1875rem 0.5rem;
+    padding: 0.075rem 0.1rem 0.075rem  0.5rem;
+    border-radius: .325rem !important;
+    font-size: 0.875rem;
+    font-family: var(--bs-font-sans-serif);
+    padding-right: .1rem;
   }
 }
 [data-theme="dark"] {

package/src/components/datepicker/DateRangePicker.vue

@@ -83,7 +83,7 @@ import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
 import ITFSettings from '../../ITFSettings';
-import itfDatePickerInline from "@/components/datepicker/DatePickerInline.vue";
+import itfDatePickerInline from "./DatePickerInline.vue";
 
 export default @Component({
   name: 'itfDateRangePicker',

package/src/components/panels/Panel.vue

@@ -131,9 +131,13 @@ export default @Component({
   directives: {
   },
   filters: {
+  },
+  provide() {
+    return { currentPanel: this };
   }
 })
 class Panel extends Vue {
+  @Prop(Number) index;
   @Prop() title;
   @Prop() icon;
   @Prop() payload;

package/src/components/panels/PanelLink.vue

@@ -0,0 +1,55 @@
+<template>
+  <a :href="link" :target="target" v-on="on"><slot></slot></a>
+</template>
+<script lang="ts">
+import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
+import { IPanel } from './PanelList.vue';
+
+@Component({
+  components: {
+  },
+  directives: {
+  },
+  filters: {
+  }
+})
+export default class PanelLink extends Vue {
+  @Inject({ default: null }) panelList;
+  @Inject({ default: null }) currentPanel;
+
+  @Prop(String) panel: string;
+  @Prop() payload: payload;
+  @Prop() target: string;
+  @Prop(Boolean) append: boolean;
+
+  get on() {
+    const handlers = {};
+    if (!this.target) {
+      handlers.click = this.onClick;
+    }
+    return handlers;
+  }
+
+  get link() {
+    let stack = this.panelList.getCurrentStack();
+    if (!this.append) {
+      stack = stack.splice(0, this.currentPanel.index + 1);
+    }
+    const hash = this.panelList.getLink([
+      ...stack,
+      {
+        type: this.panel,
+        payload: this.payload || {}
+      }
+    ]);
+    return `#${hash}`;
+  }
+
+  onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const stack = this.panelList.getCurrentStack();
+    stack[stack.length - 1].open(this.panel, this.payload || {});
+  }
+}
+</script>

package/src/components/panels/PanelList.vue

@@ -10,6 +10,7 @@
       <template v-for="(panel, n) of panelsStack">
         <panel
           :key="n"
+          :index="n"
           :title="panel.title"
           :icon="panel.icon"
           :payload="panel.payload"
@@ -144,7 +145,7 @@ interface VisualOptions {
   icon?: string;
 }
 
-interface IPanel {
+export interface IPanel {
   id: number;
   title: string;
   icon: string;
@@ -161,6 +162,7 @@ interface IPanel {
   emit: (event: string, ...args: any[]) => void;
   isMultiple: () => boolean;
   fullsize: () => void;
+  getPanels: (type: string) => any;
   getPayload: () => any;
   setPayload: (value: any) => void;
   __events: Record<string, ((event: string, ...args: any[]) => any)[]>;
@@ -173,6 +175,9 @@ interface IPanel {
   directives: {
   },
   filters: {
+  },
+  provide() {
+    return { panelList: this };
   }
 })
 export default class PanelList extends Vue {
@@ -254,7 +259,7 @@ export default class PanelList extends Vue {
       isCloseable: true,
       __events: {},
     };
-    if (!this.panelsStack.length) {
+    if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
     }
     let newStack = [...this.panelsStack];
@@ -301,6 +306,7 @@ export default class PanelList extends Vue {
         };
         newPanel.isMultiple = () => this.isOpenMultiple;
         newPanel.fullsize = () => this.fullsizePanel(newPanel);
+        newPanel.getPanels = (type) => this.getPanels(type);
         newPanel.getPayload = () => newPanel.payload;
         newPanel.setPayload = (value: any) => {
           newPanel.payload = value;
@@ -311,6 +317,8 @@ export default class PanelList extends Vue {
         newStack.push(newPanel);
         this.panelsStack = newStack;
         this.ensureOnlyTwoOpenPanels(newPanel.id);
+        this.emitEvent('panel.open', newPanel);
+        this.emitEvent('panels.changed', this.panelsStack);
         return res(newPanel);
       })
     });
@@ -343,7 +351,9 @@ export default class PanelList extends Vue {
       this.panelsStack[openPanelIndex - 1].isCollapsed = false;
     }
     this.ensureOnlyTwoOpenPanels(openPanel.id);
-    this.setPanelHash()
+    this.setPanelHash();
+    this.emitEvent('panels.closed', panel);
+    this.emitEvent('panels.changed', this.panelsStack);
   }
 
   fullsizePanel(panel: IPanel) {
@@ -354,10 +364,22 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  setPanelHash() {
-    const hash = this.panelsStack.map(panel => {
+  getPanels(type) {
+    return this.panelsStack.filter(panel => panel.type === type);
+  }
+
+  getCurrentStack() {
+    return [...this.panelsStack];
+  }
+
+  getLink(stack: IPanel[]) {
+    return stack.map(panel => {
       return `${panel.type}=${JSON.stringify(panel.payload || {})}`;
     }).join('&');
+  }
+
+  setPanelHash() {
+    const hash = this.getLink(this.panelsStack);
     this.$router.push({ hash });
   }
 
@@ -377,6 +399,7 @@ export default class PanelList extends Vue {
         newStack.push(resPanel);
       }
       this.panelsStack = newStack;
+      this.emitEvent('panels.changed', this.panelsStack);
     }
   }
 

package/src/components/table/Table2.vue

@@ -42,6 +42,7 @@
             :sticky-header="stickyHeader"
             :editable-property="editableProperty"
             :sorting.sync="_sorting"
+            :active="active"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
             @add-column="$emit('add-column', $event)"
@@ -89,6 +90,7 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
   @Prop({ type: String, default: null }) editableProperty;
+  @Prop({ default: null }) active;
   @Prop({ default: 45 }) indicatorWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage

package/src/components/table/TableBody.vue

@@ -18,6 +18,7 @@
       :expanded-all="expandedAll"
       :css-property="cssProperty"
       :editable-property="editableProperty"
+      :active="active"
       @update:expanded-ids="$emit('update:expanded-ids', $event)"
       @row-click="$emit('row-click', $event)"
       @update="$emit('update', $event)"
@@ -182,6 +183,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;

package/src/components/table/TableGroup.vue

@@ -72,6 +72,7 @@
             :expanded-ids="expandedIds"
             :css-property="cssProperty"
             :editable-property="editableProperty"
+            :active="active"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -341,6 +342,7 @@ class itfTableGroup extends Vue {
   @Prop() subrowsProperty;
   @Prop() currency;
   @Prop() currencies;
+  @Prop() active;
   @Prop(Boolean) showGrouping;
   @Prop(Boolean) showSummary;
   @Prop(Boolean) addNewRows;

package/src/components/table/TableRows.vue

@@ -6,7 +6,7 @@
         group="items"
         data-test="table-item"
         class="table-view-item grouped draggable-item"
-        :class="{'selected': selectedIds.includes(item[idProperty]), [cssProperty && item[cssProperty]]: !!item[cssProperty]}"
+        :class="{'selected': selectedIds.includes(item[idProperty]), 'active': isActive(item[idProperty]), [cssProperty && item[cssProperty]]: !!item[cssProperty]}"
       >
         <div class="table-row-template">
           <div accept-group="items" class="table-view-body-space"></div>
@@ -151,6 +151,7 @@ class itfTableRows extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
@@ -191,6 +192,13 @@ class itfTableRows extends Vue {
     }
   }
 
+  isActive(id) {
+    if (Array.isArray(this.active)) {
+      return this.active.includes(id);
+    }
+    return this.active === id;
+  }
+
   isExpanded(item) {
     const isExpanded = this.expandedIds.includes(item[this.idProperty]);
     return this.expandedAll ? !isExpanded : isExpanded;

package/src/components/table/table2.scss

@@ -3,6 +3,7 @@
   --itf-table-header-bg: #f8f8f8;
   --itf-table-font-size: 1rem;
   --itf-table-selected-bg: #f0f0f0;
+  --itf-table-active-bg: #e0e0e0;
   --itf-table-alt-bg: #f9f9f9;
   //--itf-table-border-color: #e1e1e1;
   //--itf-table-header-bg: #f9faf5;
@@ -35,6 +36,7 @@ body[data-theme="dark"] {
   --itf-table-border-color: #383b41;
   --itf-table-input-focus-border-color: #252525;
   --itf-table-selected-bg: #011534;
+  --itf-table-active-bg: #022e72;
   --itf-table-summary-text: #82909d80;
 }
 .itf-table2 {
@@ -233,6 +235,9 @@ body[data-theme="dark"] {
     &.selected, &:hover {
       --itf-table2-row-bg: var(--itf-table-selected-bg) !important;
     }
+    &.active {
+      --itf-table2-row-bg: var(--itf-table-active-bg) !important;
+    }
 
     .indicator {
       border-left: 1px solid var(--itf-table-border-color);