@itfin/components 2.0.29 → 2.0.31

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0003 15.8337C13.222 15.8337 15.8337 13.222 15.8337 10.0003C15.8337 6.77866 13.222 4.16699 10.0003 4.16699C6.77866 4.16699 4.16699 6.77866 4.16699 10.0003C4.16699 13.222 6.77866 15.8337 10.0003 15.8337ZM7.91697 10.0003C7.91697 8.84973 8.84971 7.91699 10.0003 7.91699C11.1509 7.91699 12.0836 8.84973 12.0836 10.0003C12.0836 11.1509 11.1509 12.0837 10.0003 12.0837C8.84971 12.0837 7.91697 11.1509 7.91697 10.0003ZM10.0003 6.25032C7.92924 6.25032 6.25031 7.92925 6.25031 10.0003C6.25031 12.0714 7.92924 13.7503 10.0003 13.7503C12.0714 13.7503 13.7503 12.0714 13.7503 10.0003C13.7503 7.92925 12.0714 6.25032 10.0003 6.25032Z" fill="currentColor"/>
+</svg>

package/src/components/panels/Panel.vue

@@ -1,9 +1,6 @@
 <template>
   <div tabindex="-1" :class="{'b-panel': !nocard, 'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
-    <div v-if="alert" class="b-panel-alert d-flex align-items-center justify-content-center gap-2" :class="[`b-panel-alert--${alertType}`]">
-      <itf-icon name="bell" :size="24" new class="b-panel-alert__icon" />
-      <p class="mb-0">{{ alert }}</p>
-    </div>
+    <slot name="before-header"></slot>
     <div v-if="collapsed && !nocard" class="b-panel__expand" @click.stop.prevent="expandPanel">
       <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
         <itf-icon name="cross" />
@@ -26,9 +23,14 @@
         </div>
         <div class="d-flex gap-1">
           <slot name="buttons"></slot>
-          <itf-button v-if="expandable" icon default class="b-panel__expand_button d-none d-md-block" @click="fullsizePanel">
-            <itf-icon new name="expand" />
-          </itf-button>
+          <template v-if="expandable">
+            <itf-button v-if="!isFullSize" icon default class="b-panel__expand_button d-none d-md-block" @click="fullsizePanel">
+              <itf-icon new name="expand" />
+            </itf-button>
+            <itf-button v-else icon default class="b-panel__expand_button d-none d-md-block" @click="collapsePanel">
+              <itf-icon new name="collapse" />
+            </itf-button>
+          </template>
           <itf-button v-if="closeable" icon default class="b-panel__expand_button" @click="closePanel">
             <itf-icon new name="close" />
           </itf-button>
@@ -161,29 +163,6 @@
   top: 0;
   z-index: 10;
 }
-.b-panel-alert {
-  border-radius: 6px 6px 0 0;
-  padding: 2px 16px;
-  font-size: 12px;
-  line-height: 16px;
-  text-align: center;
-  color: var(--b-panel-white);
-  background-color: var(--b-panel-info);
-
-  &__icon {
-    animation: bellRing 5s ease-in-out infinite;
-  }
-
-  &--success {
-    background-color: var(--b-panel-success);
-  }
-  &--warning {
-    background-color: var(--b-panel-warning);
-  }
-  &--danger {
-    background-color: var(--b-panel-danger);
-  }
-}
 </style>
 <script>
 import { Vue, Prop, Component } from 'vue-property-decorator';
@@ -211,11 +190,10 @@ class Panel extends Vue {
   @Prop() panel;
   @Prop(Boolean) collapsed;
   @Prop(Boolean) closeable;
+  @Prop(Boolean) isFullSize;
   @Prop(Boolean) expandable;
   @Prop(Boolean) animate;
   @Prop(Boolean) nocard;
-  @Prop(String) alert;
-  @Prop({ type: String, default: 'info' }) alertType; // info | success | warning | danger
 
   openPanel(...args) {
     this.$emit('open', args);
@@ -225,6 +203,10 @@ class Panel extends Vue {
     this.$emit('expand');
   }
 
+  collapsePanel() {
+    this.$emit('collapse');
+  }
+
   fullsizePanel() {
     this.$emit('fullsize');
   }

package/src/components/panels/PanelLink.vue

@@ -5,6 +5,7 @@
 import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
 import { IPanel } from './PanelList.vue';
 import {stackToHash} from "@itfin/components/src/components/panels/helpers";
+import {getRootPanelList} from "@itfin/components/src/components/panels";
 
 @Component({
   components: {
@@ -15,7 +16,6 @@ import {stackToHash} from "@itfin/components/src/components/panels/helpers";
   }
 })
 export default class PanelLink extends Vue {
-  @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
   @Prop(Boolean) global: boolean;
@@ -35,7 +35,7 @@ export default class PanelLink extends Vue {
   }
 
   get activeList() {
-    return this.list ?? this.panelList;
+    return this.list ?? getRootPanelList();
   }
 
   get isActive() {
@@ -62,6 +62,8 @@ export default class PanelLink extends Vue {
   }
 
   onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
     this.$emit('open', {
       panel: this.panel,
       payload: this.payload || {},
@@ -70,8 +72,6 @@ export default class PanelLink extends Vue {
     if (!this.activeList) {
       return;
     }
-    e.preventDefault();
-    e.stopPropagation();
     this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
   }
 }

package/src/components/panels/PanelList.vue

@@ -17,17 +17,20 @@
           :icon="panel.icon"
           :payload="panel.payload"
           :expandable="panelsStack.length > 1"
+          :isFullSize="isFullSize"
           :collapsed="panel.isCollapsed"
           :closeable="panel.isCloseable"
           :animate="panel.isAnimate"
-          :alert="panel.alert"
-          :alertType="panel.alertType"
           @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)"
         >
+          <template #before-header>
+            <slot name="before-header" :panel="panel" :index="n" :payload="panel.payload"></slot>
+          </template>
           <slot
             :name="panel.type"
             :panel="panel"
@@ -151,7 +154,6 @@ $double-an-time: $an-time * 2;
     //transition: opacity $an-time linear;
   }
 }
-
 //.slide-enter-active > div {
 //  opacity: 0;
 //}
@@ -162,16 +164,16 @@ $double-an-time: $an-time * 2;
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } 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 {setRootPanelList} from "@itfin/components/src/components/panels";
 
 interface VisualOptions {
   title: string;
   icon?: string;
 }
 
-export type PanelAlertType = 'info' | 'success' | 'warning' | 'danger';
-
 export interface IPanel {
   id: number;
   title: string;
@@ -182,8 +184,6 @@ export interface IPanel {
   isCollapsed: boolean;
   isCloseable: boolean;
   isAnimate: boolean;
-  alert?: string;
-  alertType?: PanelAlertType;
   open: (type: string, visOptions: VisualOptions, payload: any) => void;
   close: () => void;
   expand: () => void;
@@ -202,6 +202,7 @@ export interface IPanel {
 
 @Component({
   components: {
+    itfIcon,
     Panel
   },
   directives: {
@@ -216,12 +217,14 @@ 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;
 
   created() {
+    setRootPanelList(this);
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
@@ -288,15 +291,10 @@ export default class PanelList extends Vue {
     if (typeof panel.caption !== 'function') {
       throw new Error('Panel component must have a "caption" function');
     }
-    if (this.panels[type].alert && typeof this.panels[type].alert !== 'function') {
-      throw new Error('Panel component "alert" field must have function type');
-    }
     const newPanel:any = {
       id: this.nextId++,
       nocard: panel.nocard,
       title: panel.caption(this.$t.bind(this), payload),
-      alert: this.panels[type].alert ? this.panels[type].alert(this.$t.bind(this), payload) : undefined,
-      alertType: this.panels[type].alertType,
       icon: panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
       components: {
         default: panel.default ?? undefined,
@@ -324,6 +322,10 @@ export default class PanelList extends Vue {
       isAnimation = newStack.length === openIndex;
       newStack = newStack.slice(0, openIndex);
     }
+    if (newStack.length > 0 && !newStack.find(p => !p.isCollapsed)) {
+      // якщо немає відкритих панелей, то перша панель має бути розгорнута
+      newStack[0].isCollapsed = false;
+    }
     this.panelsStack = newStack;
     return new Promise(res => {
       this.$nextTick(() => { // щоб панелі змінювались при редагуванні
@@ -363,8 +365,6 @@ export default class PanelList extends Vue {
         newPanel.setPayload = (value: any) => {
           newPanel.payload = value;
           newPanel.title = panel.caption(this.$t.bind(this), value);
-          newPanel.alert = panel.alert ? panel.alert(this.$t.bind(this), payload) : undefined;
-          newPanel.alertType = panel.alertType;
           newPanel.icon = panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
             this.setPanelHash()
         }
@@ -415,12 +415,40 @@ export default class PanelList extends Vue {
   fullsizePanel(panel: IPanel) {
     const newStack = [...this.panelsStack];
     for (const p of newStack) {
+      p.isLastOpened = !p.isCollapsed && p !== panel;
       p.isCollapsed = p !== panel;
     }
     this.panelsStack = newStack;
     this.setPanelHash();
   }
 
+  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;
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
+    this.setPanelHash();
+  }
+
+  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;
+    }
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
+    this.setPanelHash();
+  }
+
   getPanels(type) {
     return this.panelsStack.filter(panel => panel.type === type);
   }
@@ -430,14 +458,18 @@ 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 });
+    }
   }
 
   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) {

package/src/components/panels/helpers.ts

@@ -1,3 +1,6 @@
+import JSON5 from 'json5'
+import {isPathType} from "@itfin/components/src/components/panels";
+
 export interface IPanel {
   type: string;
   payload?: any;
@@ -6,25 +9,38 @@ export interface IPanel {
 
 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 ? '!' : ''}${json ? '=' : ''}${json}`;
+  }).join(isPathType() ? '/' : '&');
+  return isPathType() ? `/${hash}` : `#${hash}`;
 }
 
 
 export function hashToStack(hash: string|undefined): IPanel[] {
   let stack:IPanel[] = [];
   if (hash) {
-    const str = hash.replace(/^#/, '');
+    const str = hash.replace(isPathType() ? /^\// : /^#/, '');
 
-    stack = str.split('&').map(item => {
+    stack = str.split(isPathType() ? '/' : '&').map(item => {
+      if (!item.includes('=')) {
+        return { type: item.replace('!', ''), isCollapsed: item.includes('!'), payload: {} };
+      }
       const [type, payload] = item.split('=');
-      const isCollapsed = !type.includes('!');
+      const isCollapsed = type.includes('!');
       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('!', ''),

package/src/components/panels/index.ts

@@ -0,0 +1,24 @@
+const PanelsSettings = {
+  pathType: 'path', // 'hash' | 'path'
+  rootPanelList: null, // This will be set to the root panel list when the app is initialized
+};
+
+export function getPanelsSettings() {
+  return PanelsSettings;
+}
+
+export function getRootPanelList() {
+  return PanelsSettings.rootPanelList;
+}
+
+export function isPathType() {
+  return PanelsSettings.pathType === 'path';
+}
+
+export function setPanelsPathType(settings: any) {
+  PanelsSettings.pathType = settings.pathType ?? 'path';
+}
+
+export function setRootPanelList(rootPanelList: any) {
+  PanelsSettings.rootPanelList = rootPanelList;
+}

package/src/components/view/View.vue

@@ -4,6 +4,7 @@
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
       search
+      ref="filters"
       :mini="panel.isMultiple()"
       class="py-2 px-3"
       :endpoint="filtersEndpoint"
@@ -161,14 +162,18 @@ class itfView extends Vue {
     }
   }
 
-  async loadData() {
+  async loadData(reloadFilters = false) {
     if (!this.endpoint) {
       return;
     }
+    if (reloadFilters) {
+      this.loadFilters();
+    }
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
       const res = await this.$axios.$get(this.endpoint, {
+        preventRaceCondition: true,
         params: {
           ...this.filter,
           page: this.page,
@@ -240,5 +245,11 @@ class itfView extends Vue {
     this.setPanelPayload({ ...filter, page: 1 });
     this.loadData();
   }
+
+  loadFilters() {
+    if (this.filtersEndpoint) {
+      this.$refs.filters?.loadData();
+    }
+  }
 }
 </script>