@itfin/components 1.3.51 → 1.3.53

package/package.json

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

package/src/components/panels/Panel.vue

@@ -11,20 +11,22 @@
       </a>
     </div>
     <div v-show="!collapsed" class="b-panel-header">
-      <div>
-        <slot name="title">
-          <div class="b-panel__title" v-text="title"></div>
-        </slot>
-      </div>
-      <div>
-        <slot name="buttons"></slot>
-        <itf-button v-if="expandable" icon small class="b-panel__expand_button" @click="fullsizePanel">
-          <itf-icon name="expand" />
-        </itf-button>
-        <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
-          <itf-icon name="cross" />
-        </itf-button>
-      </div>
+      <slot name="header">
+        <div>
+          <slot name="title">
+            <div class="b-panel__title" v-text="title"></div>
+          </slot>
+        </div>
+        <div class="d-flex gap-1">
+          <slot name="buttons"></slot>
+          <itf-button v-if="expandable" icon small class="b-panel__expand_button" @click="fullsizePanel">
+            <itf-icon name="expand" />
+          </itf-button>
+          <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
+            <itf-icon name="cross" />
+          </itf-button>
+        </div>
+      </slot>
     </div>
     <div v-show="!collapsed" class="b-panel-body">
       <slot></slot>

package/src/components/panels/PanelList.vue

@@ -23,9 +23,9 @@
             :close="() => closePanel(panel)"
             :expand="() => expandPanel(panel)"
             :fullsize="() => fullsizePanel(panel)">
-            <component :is="panels[panel.type]" :panel="panel" :payload="panel.payload" />
+            <component :is="panels[panel.type].default || panels[panel.type]" :panel="panel" :payload="panel.payload" />
           </slot>
-          <template v-if="$scopedSlots[`${panel.type}.title`]" #title>
+          <template v-if="$scopedSlots[`${panel.type}.title`] || panels[panel.type].title" #title>
             <slot
               :name="`${panel.type}.title`"
               :panel="panel"
@@ -35,9 +35,10 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
+              <component v-if="panels[panel.type].title" :is="panels[panel.type].title" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
-          <template v-if="$scopedSlots[`${panel.type}.buttons`]" #buttons>
+          <template v-if="$scopedSlots[`${panel.type}.buttons`] || panels[panel.type].buttons" #buttons>
             <slot
               :name="`${panel.type}.buttons`"
               :panel="panel"
@@ -47,6 +48,20 @@
               :close="() => closePanel(panel)"
               :expand="() => expandPanel(panel)"
               :fullsize="() => fullsizePanel(panel)">
+              <component v-if="panels[panel.type].buttons" :is="panels[panel.type].buttons" :panel="panel" :payload="panel.payload" />
+            </slot>
+          </template>
+          <template v-if="$scopedSlots[`${panel.type}.header`] || panels[panel.type].header" #header>
+            <slot
+              :name="`${panel.type}.header`"
+              :panel="panel"
+              :payload="panel.payload"
+              :multiple="isOpenMultiple"
+              :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+              :close="() => closePanel(panel)"
+              :expand="() => expandPanel(panel)"
+              :fullsize="() => fullsizePanel(panel)">
+              <component v-if="panels[panel.type].header" :is="panels[panel.type].header" :panel="panel" :payload="panel.payload" />
             </slot>
           </template>
         </panel>
@@ -78,6 +93,11 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import Panel from './Panel.vue';
 
+interface VisualOptions {
+  title: string;
+  icon?: string;
+}
+
 interface IPanel {
   id: number;
   title: string;
@@ -86,6 +106,15 @@ interface IPanel {
   payload: any;
   isCollapsed: boolean;
   isCloseable: boolean;
+  open: (type: string, visOptions: VisualOptions, payload: any) => void;
+  close: () => void;
+  expand: () => void;
+  on: (eventName: string, func: (event: string, ...args: any[]) => any) => void;
+  off: (eventName: string, func: (event: string, ...args: any[]) => any) => void;
+  once: (eventName: string, func: (event: string, ...args: any[]) => any) => void;
+  emit: (event: string, ...args: any[]) => void;
+  isMultiple: () => boolean;
+  __events: Record<string, ((event: string, ...args: any[]) => any)[]>;
 }
 
 @Component({
@@ -95,9 +124,6 @@ interface IPanel {
   directives: {
   },
   filters: {
-  },
-  provide() {
-    return { panelList: this }; // do not use Provide from vue-property-decorator
   }
 })
 export default class PanelList extends Vue {
@@ -163,7 +189,8 @@ export default class PanelList extends Vue {
       type,
       payload,
       isCollapsed: false,
-      isCloseable: true
+      isCloseable: true,
+      __events: {}
     };
     if (!this.panelsStack.length) {
       newPanel.isCloseable = false;
@@ -172,9 +199,51 @@ export default class PanelList extends Vue {
     if (openIndex) {
       newStack = newStack.slice(0, openIndex);
     }
-    newStack.push(newPanel);
     this.panelsStack = newStack;
-    this.ensureOnlyTwoOpenPanels(newPanel.id);
+    this.$nextTick(() => { // щоб панелі змінювались при редагуванні
+      const n = newStack.length;
+      newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
+      newPanel.open = (type, visOptions, payload) => this.openPanel(visOptions.title, visOptions.icon, type, payload, n + 1);
+      newPanel.close = () => this.closePanel(newPanel);
+      newPanel.expand = () => this.expandPanel(newPanel);
+      newPanel.on = (eventName, func: (event: string, ...args: any[]) => any) => {
+        if (!newPanel.__events[eventName]) {
+          newPanel.__events[eventName] = [];
+        }
+        newPanel.__events[eventName].push(func);
+      };
+      newPanel.off = (eventName, func: (event: string, ...args: any[]) => any) => {
+        if (newPanel.__events[eventName]) {
+          newPanel.__events[eventName] = newPanel.__events[eventName].filter(f => f !== func);
+        }
+      };
+      newPanel.once = (eventName, func: (event: string, ...args: any[]) => any) => {
+        const wrapper = (...args) => {
+          func(...args);
+          newPanel.off(eventName, wrapper);
+        };
+        newPanel.on(eventName, wrapper);
+      };
+      newPanel.isMultiple = () => this.isOpenMultiple;
+      newPanel.getPayload = () => newPanel.payload;
+      newPanel.setPayload = (value: any) => {
+        console.info(value);
+        newPanel.payload = value;
+      }
+      newStack.push(newPanel);
+      this.panelsStack = newStack;
+      this.ensureOnlyTwoOpenPanels(newPanel.id);
+    });
+  }
+
+  emitEvent(event: string, ...args: any[]) {
+    for (const panel of this.panelsStack) {
+      if (panel.__events[event]) {
+        for (const func of panel.__events[event]) {
+          func(event, ...args);
+        }
+      }
+    }
   }
 
   closePanel(panel: IPanel) {

package/src/components/table/Table2.vue

@@ -47,7 +47,7 @@
 
 </template>
 <script>
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, ModelSync } from 'vue-property-decorator';
 import itfCheckboxGroup from '../checkbox/CheckboxGroup.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
@@ -77,6 +77,7 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;
+  @ModelSync('value', 'input', { type: Array, default: () => ([]) }) selectedIds;
   @Prop() currency;
   @Prop() currencies;
   @Prop(Boolean) addNewRows;
@@ -95,7 +96,6 @@ class itfTable2 extends Vue {
     selectedIds: [],
     columns: []
   };
-  selectedIds = [];
 
   getTableState() {
     const list = this.schema?.properties || [];

package/src/components/table/TableRows.vue

@@ -27,14 +27,13 @@
               <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
                 <template v-if="subrowsProperty && item[subrowsProperty] && item[subrowsProperty].length">
                   <template v-if="item[subrowsProperty] && item[subrowsProperty].length && !isExpanded(item)">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
-                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
+                      <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
                     </svg>
                   </template>
                   <template v-else>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16">
-                      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+                      <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                     </svg>
                   </template>
                 </template>
@@ -52,9 +51,9 @@
                 :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
                 :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
                 class="table-view-item-value d-flex h-100">
-                <slot :name="`column.${column.property}`" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
+                <slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
                   <template v-if="column.editable && editable">
-                    <slot :name="`edit.${column.type}`" :level="level" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
+                    <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
                       <itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                       <itf-hours-field
                         class="w-100"
@@ -69,7 +68,7 @@
                     </slot>
                   </template>
                   <div v-else class="h-100 align-items-center d-flex w-100">
-                    <slot :name="`format.${column.type}`" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
+                    <slot :name="`format.${column.type}`" :toggle="() => $emit('toggle', item)" :level="level" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
                       {{getValue(item, column)}}
                     </slot>
                   </div>