@itfin/components 1.3.52 → 1.3.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.52",
+  "version": "1.3.54",
   "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

@@ -93,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;
@@ -101,6 +106,18 @@ 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;
+  fullsize: () => void;
+  getPayload: () => any;
+  setPayload: (value: any) => void;
+  __events: Record<string, ((event: string, ...args: any[]) => any)[]>;
 }
 
 @Component({
@@ -110,9 +127,6 @@ interface IPanel {
   directives: {
   },
   filters: {
-  },
-  provide() {
-    return { panelList: this }; // do not use Provide from vue-property-decorator
   }
 })
 export default class PanelList extends Vue {
@@ -171,14 +185,15 @@ export default class PanelList extends Vue {
   }
 
   openPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
-    const newPanel:IPanel = {
+    const newPanel:any = {
       id: this.nextId++,
       title,
       icon,
       type,
       payload,
       isCollapsed: false,
-      isCloseable: true
+      isCloseable: true,
+      __events: {},
     };
     if (!this.panelsStack.length) {
       newPanel.isCloseable = false;
@@ -187,9 +202,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: any[]) => {
+          func(eventName, ...args);
+          newPanel.off(eventName, wrapper);
+        };
+        newPanel.on(eventName, wrapper);
+      };
+      newPanel.isMultiple = () => this.isOpenMultiple;
+      newPanel.fullsize = () => this.fullsizePanel(newPanel);
+      newPanel.getPayload = () => newPanel.payload;
+      newPanel.setPayload = (value: any) => {
+        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/TableGroup.vue

@@ -7,7 +7,7 @@
     </div-->
 
     <div data-test="table-group-wrapper" class="table-group-wrapper flex-grow-1 w-100 d-block"
-         :style="`--row-count: ${isShowTable ? rows.length : 0}`" data-sticky-container>
+         :style="`--row-count: ${isShowTable ? rows.length : 0}`">
       <div data-test="table-group" class="position-relative">
         <div :class="stickyId" class="sticky-group">
           <div v-if="title" group="tablegroups" class="draggable-item"
@@ -132,13 +132,6 @@
 </template>
 <style lang="scss">
 .itf-table-group {
-  --group-title-height: 40px;
-  --table-row-height: 36px;
-  --table-small-row-size: var(--table-row-height);
-  --shadow-area-width: 12px;
-  --indicator-area-width: 38px;
-  --hover-bg: var(--bs-tertiary-bg);
-
   flex-direction: column;
   min-width: 100%;
   display: flex;
@@ -268,6 +261,11 @@
     }
   }
 
+  .sticky-group {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
   .table-summary {
     .shadow-area {
       border-right: 0;

package/src/components/table/table2.scss

@@ -1,4 +1,7 @@
-.itf-table2 {
+:root {
+  --itf-table-border-color: #e1e1e1;
+  --itf-table-header-bg: #f8f8f8;
+  --itf-table-selected-bg: #f0f0f0;
   --itf-table-border-color: #dbddd1;
   --itf-table-header-bg: #f9faf5;
   --itf-table-hover-header-bg: var(--bs-tertiary-bg);
@@ -11,17 +14,24 @@
   --itf-table-header-subtitle-color: #aeafaa;
   --itf-table-summary-text: var(--bs-tertiary-color);
 
-  // dark
-  body[data-theme="dark"] & {
-    --itf-table-hover-bg: #393b41;
-    --itf-table-header-bg: #0f0f0f;
-    --itf-table-hover-header-bg: #252525;
-    --itf-table-border-color: var(--bs-card-border-color);
-    --itf-table-input-focus-border-color: #252525;
-    --itf-table-selected-bg: #011534;
-    --itf-table-summary-text: #82909d80;
-  }
-
+  --group-title-height: 40px;
+  --table-row-height: 36px;
+  --table-small-row-size: var(--table-row-height);
+  --shadow-area-width: 12px;
+  --indicator-area-width: 38px;
+  --hover-bg: var(--bs-tertiary-bg);
+}
+// dark
+body[data-theme="dark"] {
+  --itf-table-hover-bg: #393b41;
+  --itf-table-header-bg: #0f0f0f;
+  --itf-table-hover-header-bg: #252525;
+  --itf-table-border-color: var(--bs-card-border-color);
+  --itf-table-input-focus-border-color: #252525;
+  --itf-table-selected-bg: #011534;
+  --itf-table-summary-text: #82909d80;
+}
+.itf-table2 {
   &.scrollable {
     -webkit-overflow-scrolling: touch;
     overflow: hidden scroll;

package/src/helpers/validators.spec.js

@@ -42,24 +42,24 @@ describe('Validators', () => {
     expect(dateBeforeValidation()(null, $t)).toEqual(true);
     expect(dateBeforeValidation()(undefined, $t)).toEqual(true);
     expect(dateBeforeValidation('2020-01-02')('2020-01-01', $t)).toEqual(true);
-    expect(dateBeforeValidation('2020-01-01')('2020-01-02', $t)).toEqual('validators.dateBefore');
-    expect(dateBeforeValidation('2020-01-01')('2020-01-01', $t)).toEqual('validators.dateBefore');
+    expect(dateBeforeValidation('2020-01-01')('2020-01-02', $t)).toEqual('components.dateBefore');
+    expect(dateBeforeValidation('2020-01-01')('2020-01-01', $t)).toEqual('components.dateBefore');
   });
 
   test('dateAfterValidation', () => {
     expect(dateAfterValidation()(0, $t)).toEqual(true);
     expect(dateAfterValidation()(null, $t)).toEqual(true);
     expect(dateAfterValidation()(undefined, $t)).toEqual(true);
-    expect(dateAfterValidation('2020-01-02')('2020-01-01', $t)).toEqual('validators.dateAfter');
+    expect(dateAfterValidation('2020-01-02')('2020-01-01', $t)).toEqual('components.dateAfter');
     expect(dateAfterValidation('2020-01-01')('2020-01-02', $t)).toEqual(true);
-    expect(dateAfterValidation('2020-01-01')('2020-01-01', $t)).toEqual('validators.dateAfter');
+    expect(dateAfterValidation('2020-01-01')('2020-01-01', $t)).toEqual('components.dateAfter');
   });
 
   test('dateSameOrAfterValidation', () => {
     expect(dateSameOrAfterValidation()(0, $t)).toEqual(true);
     expect(dateSameOrAfterValidation()(null, $t)).toEqual(true);
     expect(dateSameOrAfterValidation()(undefined, $t)).toEqual(true);
-    expect(dateSameOrAfterValidation('2020-01-02')('2020-01-01', $t)).toEqual('validators.dateSameOrAfter');
+    expect(dateSameOrAfterValidation('2020-01-02')('2020-01-01', $t)).toEqual('components.dateSameOrAfter');
     expect(dateSameOrAfterValidation('2020-01-01')('2020-01-02', $t)).toEqual(true);
     expect(dateSameOrAfterValidation('2020-01-01')('2020-01-01', $t)).toEqual(true);
   });
@@ -69,7 +69,7 @@ describe('Validators', () => {
     expect(dateSameOrBeforeValidation()(null, $t)).toEqual(true);
     expect(dateSameOrBeforeValidation()(undefined, $t)).toEqual(true);
     expect(dateSameOrBeforeValidation('2020-01-02')('2020-01-01', $t)).toEqual(true);
-    expect(dateSameOrBeforeValidation('2020-01-01')('2020-01-02', $t)).toEqual('validators.dateSameOrBefore');
+    expect(dateSameOrBeforeValidation('2020-01-01')('2020-01-02', $t)).toEqual('components.dateSameOrBefore');
     expect(dateSameOrBeforeValidation('2020-01-01')('2020-01-01', $t)).toEqual(true);
   });