@itfin/components 2.0.30 → 2.0.31

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() {
@@ -57,11 +57,13 @@ export default class PanelLink extends Vue {
         type: this.panel,
         payload: this.payload || {}
       }
-    ], true);
+    ]);
     return hash;
   }
 
   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: {
@@ -223,6 +224,7 @@ export default class PanelList extends Vue {
   nextId:number = 0;
 
   created() {
+    setRootPanelList(this);
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
     }
@@ -289,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,
@@ -325,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(() => { // щоб панелі змінювались при редагуванні
@@ -364,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()
         }
@@ -416,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);
   }

package/src/components/panels/helpers.ts

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

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;
+}