@itfin/components 1.3.53 → 1.3.56

package/package.json

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

package/src/assets/scss/components/_datepicker.scss

@@ -929,7 +929,7 @@ $rangeThumbSize: 12px;
   }
 }
 
-.itf-datepicker {
+.itf-datepicker, .itf-monthpicker {
   &.with-addon .addon-end {
     pointer-events: all;
     padding-right: 0.25rem;

package/src/components/datepicker/MonthPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-monthpicker" :class="{'with-addon addon-start': prependIcon}">
+  <div class="itf-monthpicker input-group" :class="{'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable}">
     <div class="addon" v-if="prependIcon">
       <slot name="addon">
         <itf-icon :name="prependIcon" />
@@ -16,6 +16,17 @@
       :value="displayValue"
       :placeholder="placeholder"
     />
+    <div class="addon-end" v-if="clearable && value">
+      <slot name="clear">
+        <itf-button
+          icon
+          small
+          @click="$emit('input', '')"
+        >
+          <itf-icon name="close" />
+        </itf-button>
+      </slot>
+    </div>
     <div style="display: none">
       <div ref="dropdown" class="itf-monthpicker__dropdown border rounded">
         <div>
@@ -42,10 +53,12 @@ import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
 import itfIcon from '../icon/Icon';
 import itfDatePickerInline from './DatePickerInline.vue';
+import itfButton from "@/components/button/Button.vue";
 
 export default @Component({
   name: 'itfMonthPicker',
   components: {
+    itfButton,
     itfIcon,
     itfDatePickerInline
   },
@@ -64,6 +77,8 @@ class itfMonthPicker extends Vue {
   @Prop({ type: String, default: '' }) prependIcon;
   @Prop({ type: String, default: 'bottom-start' }) placement;
 
+  @Prop(Boolean) clearable;
+
   focused = false;
 
   tooltip = null;

package/src/components/datepicker/index.stories.js

@@ -77,6 +77,8 @@ storiesOf('Common', module)
         <h2>Month</h2>
 
         <itf-month-picker :value="month" v-model.lazy="month"></itf-month-picker>
+        <br />
+        <itf-month-picker clearable :value="month" v-model.lazy="month"></itf-month-picker>
 
         <h2>Period</h2>
 

package/src/components/modal/Modal.vue

@@ -73,7 +73,7 @@ class itfModal extends Vue {
 
   @Watch('value')
   onVisibleChanged(newValue, oldValue) {
-    if (!this.modalEl || this.preventEvents || (typeof oldValue === 'undefined' && !newValue)) {
+    if (!this.modalEl || (this.preventEvents && oldValue !== true) || (typeof oldValue === 'undefined' && !newValue)) {
       return;
     }
     if (newValue) {

package/src/components/panels/PanelList.vue

@@ -114,6 +114,9 @@ interface IPanel {
   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)[]>;
 }
 
@@ -136,8 +139,9 @@ export default class PanelList extends Vue {
 
   created() {
     if (this.firstPanel) {
-      this.openPanel(this.firstPanel.title, this.firstPanel.icon, this.firstPanel.type, this.firstPanel.payload);
+      this.internalOpenPanel(this.firstPanel.title, this.firstPanel.icon, this.firstPanel.type, this.firstPanel.payload);
     }
+    this.parsePanelHash();
   }
 
   get isOpenMultiple() {
@@ -181,8 +185,8 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  openPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
-    const newPanel:IPanel = {
+  internalOpenPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
+    const newPanel:any = {
       id: this.nextId++,
       title,
       icon,
@@ -190,7 +194,7 @@ export default class PanelList extends Vue {
       payload,
       isCollapsed: false,
       isCloseable: true,
-      __events: {}
+      __events: {},
     };
     if (!this.panelsStack.length) {
       newPanel.isCloseable = false;
@@ -200,42 +204,51 @@ export default class PanelList extends Vue {
       newStack = newStack.slice(0, openIndex);
     }
     this.panelsStack = newStack;
-    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);
+    return new Promise(res => {
+      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.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);
+        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(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;
+          this.setPanelHash()
+        }
+        newStack.push(newPanel);
+        this.panelsStack = newStack;
+        this.ensureOnlyTwoOpenPanels(newPanel.id);
+        return res(newPanel);
+      })
     });
   }
 
+  async openPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
+    await this.internalOpenPanel(title, icon, type, payload, openIndex);
+    this.setPanelHash()
+  }
+
   emitEvent(event: string, ...args: any[]) {
     for (const panel of this.panelsStack) {
       if (panel.__events[event]) {
@@ -258,6 +271,7 @@ export default class PanelList extends Vue {
       this.panelsStack[openPanelIndex - 1].isCollapsed = false;
     }
     this.ensureOnlyTwoOpenPanels(openPanel.id);
+    this.setPanelHash()
   }
 
   fullsizePanel(panel: IPanel) {
@@ -267,5 +281,28 @@ export default class PanelList extends Vue {
     }
     this.panelsStack = newStack;
   }
+
+  setPanelHash() {
+    const hash = this.panelsStack.map(panel => {
+      return `${panel.type}=${JSON.stringify(panel.payload || {})}`;
+    }).join('&');
+    this.$router.push({ hash });
+  }
+
+  async parsePanelHash() {
+    const hash = this.$route.hash;
+    if (hash) {
+      const panels = hash.slice(1).split('&').map(item => {
+        const [type, payload] = item.split('=');
+        return {
+          type,
+          payload: JSON.parse(decodeURIComponent(payload))
+        };
+      });
+      for (const panel of panels) {
+        await this.internalOpenPanel('', '', panel.type, panel.payload);
+      }
+    }
+  }
 }
 </script>

package/src/components/table/TableBody.vue

@@ -26,16 +26,18 @@
         <slot :name="name" v-bind="slotData || {}"/>
       </template>
     </itf-table-rows>
-    <div v-if="!rows.length" data-test="table-no-results" class="table-view-item">
-      <div class="table-row-template">
-        <div accept-group="items" class="table-view-body-space"></div>
-        <div class="shadow-area"></div>
-        <div class="indicator sticky"></div>
-        <div class="table-item-inner">
-          <div class="table-view-item-value w-100 align-items-center p-3 no-results">
-            {{$t('components.table.noResults')}}
+    <div v-if="!rows.length" data-test="table-no-results" class="scroller">
+      <div class="table-view-item">
+        <div class="table-row-template">
+          <div accept-group="items" class="table-view-body-space"></div>
+          <div class="shadow-area"></div>
+          <div class="indicator sticky"></div>
+          <div class="table-item-inner">
+            <div class="table-view-item-value w-100 align-items-center p-3 no-results">
+              {{$t('components.table.noResults')}}
+            </div>
+            <div class="boundary right"></div>
           </div>
-          <div class="boundary right"></div>
         </div>
       </div>
     </div>

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"
@@ -22,7 +22,7 @@
                   </span>
                   <span class="d-flex align-items-center line-overflow group-header-value"
                         data-test="group-value-group-label-value">
-                    <slot name="group-title" :rows="rows" :title="rows">{{ title }}</slot>
+                    <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
                   </span>
                 </a>
               </div>
@@ -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);
   });