@itfin/components 1.5.0 → 1.5.1

package/src/components/icon/components/nomi-budget.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0059 9.66699L18.0273 12.0977C18.3384 12.4736 18.5786 12.8947 18.7471 13.3613C18.9155 13.8279 19 14.3073 19 14.7998C19 15.9799 18.5919 16.9753 17.7754 17.7852C16.9587 18.5951 15.9665 19 14.7998 19H9.2002C8.02113 19.0005 7.02625 18.5955 6.21582 17.7852C5.40538 16.9747 5 15.9794 5 14.7998C5.00002 14.3073 5.08447 13.8279 5.25293 13.3613C5.42144 12.8947 5.66156 12.4736 5.97266 12.0977L7.99414 9.66699H16.0059ZM12 12C11.5733 12.001 11.2068 12.1532 10.9014 12.457C10.596 12.7609 10.4438 13.1274 10.4443 13.5557C10.4449 13.9838 10.5972 14.35 10.9014 14.6543C11.2057 14.9587 11.5722 15.1113 12 15.1113C12.4298 15.1134 12.7958 14.9607 13.0986 14.6543C13.4014 14.3479 13.5541 13.9818 13.5557 13.5557C13.5572 13.1294 13.4046 12.763 13.0986 12.457C12.7928 12.1513 12.4266 11.999 12 12ZM15.8887 5C16.1863 5 16.4102 5.12292 16.5596 5.36914C16.7089 5.61544 16.7185 5.86867 16.5889 6.12793L15.5977 8.11133H8.40234L7.41113 6.12793C7.28202 5.86867 7.29161 5.61544 7.44043 5.36914C7.58924 5.12292 7.81323 5 8.11133 5H15.8887Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-delta.vue

@@ -0,0 +1,7 @@
+<template><svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="1.5"
+          stroke="currentColor" d="M8.00016 5.17996L12.2602 12H3.74016L8.00016 5.17996Z"
+          fill="none"
+          fill-opacity="currentColor"></path>
+</svg>
+</template>

package/src/components/icon/new-icons/delta.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="1.5"
+          stroke="currentColor" d="M8.00016 5.17996L12.2602 12H3.74016L8.00016 5.17996Z"
+          fill="none"
+          fill-opacity="currentColor"></path>
+</svg>

package/src/components/panels/PanelList.vue

@@ -222,6 +222,7 @@ 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[] = [];
 
@@ -503,7 +504,7 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
+    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
     if (this.routeType === 'path') {
       this.$router.push({ path: `${hash}` });
     } else {
@@ -515,7 +516,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.routeType === 'path');
+      const panels = hashToStack(hash, this.routePrefix);
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {

package/src/components/panels/helpers.ts

@@ -10,19 +10,29 @@ export interface IPanel {
 const COLLAPSE_SYMBOL = '~'
 const PARAMS_SYMBOL = ';'
 
-export function stackToHash(stack: IPanel[]) {
+export function stackToHash(stack: IPanel[], routePrefix: string = '') {
   const hash = stack.map(panel => {
     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}`;
+  let url = hash;
+  if (routePrefix) {
+    url = `${routePrefix}/` + url;
+  }
+  return isPathType() ? `/${url}` : `#${url}`;
 }
 
 
-export function hashToStack(hash: string|undefined): IPanel[] {
+export function hashToStack(hash: string|undefined, routePrefix: string = ''): IPanel[] {
   let stack:IPanel[] = [];
-  const str = hash.replace(isPathType() ? /^\// : /^#/, '');
+  let str = hash.replace(isPathType() ? /^\// : /^#/, '');
+  if (routePrefix) {
+    const prefix = isPathType() ? `${routePrefix}/` : `${routePrefix}`;
+    if (str.startsWith(prefix)) {
+      str = str.substring(prefix.length);
+    }
+  }
   if (str) {
     stack = str.split(isPathType() ? '/' : '&').map(item => {
       if (!item.includes(PARAMS_SYMBOL)) {

package/src/components/view/View.vue

@@ -57,6 +57,8 @@
           column-resizing
           :indicator-type="indicatorType"
           class="permanent-checkboxes"
+          divider-property="hasDivider"
+          subrows-property="children"
           :state-name="stateName"
           id-property="id"
           :rows="preparedItems"
@@ -64,6 +66,7 @@
           :sorting="sorting"
           :active="activeIds"
           :show-actions="showActions"
+          :expanded-ids.sync="expandedIds"
           v-model="selectedIds"
           @row-click="$emit('open', $event)"
           @update:sorting="updateSorting($event)"
@@ -150,6 +153,7 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
+  expandedIds = [];
 
   get preparedItems() {
     const disabledIdsSet = new Set(this.disabledIds);
@@ -199,6 +203,10 @@ class itfView extends Vue {
       this.page = res.meta.page;
       this.total = res.meta.total;
       this.size = res.meta.size;
+      if (res.columns) {
+        this.$emit('columns-loaded', res.columns);
+      }
+
       this.$emit('update:items', this.items);
       this.loadingData = false;
     }, () => {