@itfin/components 1.3.72 → 1.3.74

package/package.json

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

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

@@ -6,16 +6,7 @@
   &.-range-from-:not(.-range-to-),
   &.-range-to-:not(.-range-from-) {
     position: relative;
-    border: 0 none !important;
     color: #fff;
-
-    &.-selected-, &.-selected-.-current- {
-      background: var(--adp-cell-background-color-in-range);
-
-      &:hover {
-        background: var(--adp-cell-background-color-in-range-hover);
-      }
-    }
   }
 
   &.-range-from-:not(.-range-to-) {
@@ -28,7 +19,6 @@
       bottom: 0;
       z-index: -1;
       border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
-      background: var(--adp-cell-background-color-selected);
     }
 
     &:before {
@@ -46,7 +36,6 @@
       bottom: 0;
       z-index: -1;
       border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius)  0;
-      background: var(--adp-cell-background-color-selected);
     }
 
     &:before {
@@ -155,7 +144,7 @@
   --adp-day-name-color: #666;
 
   --adp-day-cell-width: 1fr;
-  --adp-day-cell-height: 32px;
+  --adp-day-cell-height: 34px;
   --adp-month-cell-height: 42px;
   --adp-year-cell-height: 56px;
 
@@ -168,6 +157,7 @@
   --adp-cell-background-color-in-range: #{mix($primary, $body-bg, 20%)};
   --adp-cell-background-color-in-range-hover: #{mix($primary, $body-bg, 40%)};
   --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
+  --adp-cell-compare-color: #8649e1;
 
   --adp-btn-height: 32px;
   --adp-btn-color: var(--adp-accent-color);
@@ -199,9 +189,9 @@
 
   &.-selected- {
     color: #fff;
-    background: var(--adp-background-color-selected-other-month);
+    background-color: var(--adp-background-color-selected-other-month);
     &.-focus- {
-      background: var(--adp-background-color-selected-other-month-focused);
+      background-color: var(--adp-background-color-selected-other-month-focused);
     }
   }
 
@@ -443,6 +433,8 @@
   align-items: center;
   justify-content: center;
   z-index: 1; // ?
+  margin-bottom: 1px;
+  margin-top: 1px;
 
   &.-focus- {
     background: var(--adp-background-color-hover);
@@ -450,6 +442,18 @@
 
   &.-current- {
     color: var(--adp-color-current-date);
+    position: relative;
+
+    &:after {
+      border-radius: 9px;
+      content: '';
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border: 1px solid var(--adp-color-secondary);
+      position: absolute;
+    }
 
     &.-focus- {
       color: var(--adp-color);
@@ -501,32 +505,69 @@
   }
 
   &.-range-from- {
-    border: 1px solid var(--adp-cell-border-color-in-range);
-    background-color: var(--adp-cell-background-color-in-range);
+    background-color: var(--adp-cell-background-color-selected);
     border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
   }
   &.-range-to- {
-    border: 1px solid var(--adp-cell-border-color-in-range);
-    background-color: var(--adp-cell-background-color-in-range);
+    background-color: var(--adp-cell-background-color-selected);
     border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
   }
 
   &.-range-to-.-range-from- {
     border-radius: var(--adp-cell-border-radius);
   }
+  &.-day-.-compare-range-from- {
+    &, &.-other-month- {
+      border: none;
+      background-color: var(--adp-cell-compare-color);//var(--adp-cell-background-color-in-range);
+      border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
+      color: #fff !important;
+      &:hover, &.-focus- {
+        background-color: var(--adp-cell-compare-color);
+      }
+    }
+  }
+  &.-day-.-compare-range-to- {
+    &, &.-other-month- {
+      border: none;
+      background-color: var(--adp-cell-compare-color);
+      border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
+      color: #fff !important;
+      &:hover, &.-focus- {
+        background-color: var(--adp-cell-compare-color);
+      }
+    }
+  }
+  &.-in-compare-range- {
+    --space-size: 10px;
+    --dash-size: 17px;
+    background-image: repeating-linear-gradient(0deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size)), repeating-linear-gradient(90deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size)), repeating-linear-gradient(180deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size)), repeating-linear-gradient(270deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size));
+    background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
+    background-position: -2px 0, 0px 0, 40px 0, 0 100%;
+    background-repeat: no-repeat;
+    border-radius: 0;
+
+    &:hover, &.-focus- {
+      //background: var(--adp-cell-background-color-in-range-hover);
+    }
+  }
+
+  &.-compare-range-to-.-compare-range-from- {
+    border-radius: var(--adp-cell-border-radius);
+  }
+  &.-compare-range-to-.-in-range-, &.-compare-range-from-.-in-range-,
+  &.-compare-range-to-.-range-from-, &.-compare-range-to-.-range-to-,
+  &.-compare-range-from-.-range-from-, &.-compare-range-from-.-range-to- {
+    border-radius: 0;
+  }
 
   &.-selected- {
     color: #fff;
-    border: none;
-    background: var(--adp-cell-background-color-selected);
-
-    &.-current- {
-      color: #fff;
-      background: var(--adp-cell-background-color-selected);
-    }
+    border: 0;
+    background-color: var(--adp-cell-background-color-selected);
 
     &.-focus- {
-      background: var(--adp-cell-background-color-selected-hover);
+      background-color: var(--adp-cell-background-color-selected-hover);
     }
   }
 }
@@ -816,7 +857,7 @@ $rangeThumbSize: 12px;
   &:after {
     content: '';
     background: var(--adp-background-color-hover);
-    border-radius: var(--adp-border-radius);
+    border-radius: 6px;
     position: absolute;
     left: -2px;
     top: -3px;
@@ -997,7 +1038,8 @@ $rangeThumbSize: 12px;
   .form-control input.form-control {
     border: 0 none;
     padding: 0;
-    max-width: 100px;
+    max-width: 84px;
+    box-shadow: none;
 
     &.placeholder-visible {
       max-width: none;

package/src/components/datepicker/DatePickerInline.vue

@@ -72,7 +72,7 @@ class itfDatePickerInline extends Vue {
       { default: localeUk },
       { default: localeDe }
     ] = await Promise.all([
-      import('babel-loader!air-datepicker/air-datepicker.js'),
+      import('babel-loader!../../../packages/air-datepicker/dist/air-datepicker'),
       import('babel-loader!air-datepicker/locale/en'),
       import('babel-loader!air-datepicker/locale/uk'),
       import('babel-loader!air-datepicker/locale/de')

package/src/components/datepicker/DateRangePicker.vue

@@ -48,6 +48,8 @@
     <div style="display: none">
       <div ref="dropdown" class="itf-daterange-picker__dropdown">
         <itf-date-range-picker-inline
+          :compare="compare"
+          :range="range"
           :value="value"
           :start-view="startView"
           :only-calendar="onlyCalendar"
@@ -111,6 +113,8 @@ class itfDateRangePicker extends Vue {
   @Prop({ type: [String, Date], default: '' }) minDate;
   @Prop({ type: [String, Date], default: ''}) maxDate;
   @Prop(Boolean) disabled;
+  @Prop(Boolean) compare;
+  @Prop({ type: Array }) range; // for compare mode
 
   focused = false;
 
@@ -233,7 +237,7 @@ class itfDateRangePicker extends Vue {
     this.focused = true;
   }
 
-  onBlur(e, index) {
+  onBlur() {
     this.focused = false;
     if (this.valueAsLuxon && this.valueAsLuxon[0] && this.valueAsLuxon[1] && this.valueAsLuxon[0] > this.valueAsLuxon[1]) {
       if ((this.minDateLuxon && (this.valueAsLuxon[0] < this.minDateLuxon || this.valueAsLuxon[1] < this.minDateLuxon)) ||

package/src/components/datepicker/DateRangePickerInline.vue

@@ -53,6 +53,8 @@ class itfDatePickerInline extends Vue {
       ];
     }
   }) daysList;
+  @Prop(Boolean) compare;
+  @Prop({ type: Array }) range; // for compare mode
 
   calendar = null;
 
@@ -60,6 +62,10 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
+  compareMode(value) {
+    return this.calendar.compareMode(value);
+  }
+
   @Watch('minDate')
   @Watch('maxDate')
   @Watch('minView')
@@ -73,7 +79,7 @@ class itfDatePickerInline extends Vue {
       { default: localeUk },
       { default: localeDe }
     ] = await Promise.all([
-      import('babel-loader!air-datepicker/air-datepicker.js'),
+      import('babel-loader!../../../packages/air-datepicker/dist/air-datepicker'),
       import('babel-loader!air-datepicker/locale/en'),
       import('babel-loader!air-datepicker/locale/uk'),
       import('babel-loader!air-datepicker/locale/de')
@@ -84,7 +90,7 @@ class itfDatePickerInline extends Vue {
       uk: localeUk,
       de: localeDe,
     };
-    this.calendar = new AirDatepicker(this.$refs.calendar, {
+    const opts = {
       locale: locales[this.$i18n.locale] || locales.en,
       firstDay: 1,
       altFieldDateFormat: this.valueFormat,
@@ -93,6 +99,7 @@ class itfDatePickerInline extends Vue {
       view: this.minView,
       minView: this.minView,
       range: true,
+      compareRange: true,
       dynamicRange: true,
       toggleSelected: false,
       selectedDates: this.valueAsLuxon
@@ -118,10 +125,19 @@ class itfDatePickerInline extends Vue {
           classes: this.customDays[strDate].class || false,
         };
       },
-    });
+    };
+    if (this.compare) {
+      opts.compareRange = true;
+    }
+
+    this.calendar = new AirDatepicker(this.$refs.calendar, opts);
     if (this.valueAsLuxon) {
       this.calendar.setViewDate(this.valueAsLuxon[0].toJSDate());
     }
+    if (this.compare) {
+      this.calendar.compareMode(true);
+    }
+    this.onRangeChange();
   }
 
   beforeDestroy() {
@@ -219,6 +235,17 @@ class itfDatePickerInline extends Vue {
     this.calendar.selectDate([lxDate1.toJSDate(), lxDate2.toJSDate()], { silent: true });
   }
 
+  @Watch('range')
+  onRangeChange() {
+    if (!this.calendar) {
+      return;
+    }
+    this.calendar.selectCompareRange(this.range ? [
+      DateTime.fromFormat(this.range[0], this.valueFormat).toJSDate(),
+      DateTime.fromFormat(this.range[1], this.valueFormat).toJSDate(),
+    ] : []);
+  }
+
   @Watch('value')
   onValueChanged() {
     if (!this.valueAsLuxon || !this.calendar) {

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

@@ -25,6 +25,7 @@ storiesOf('Common', module)
           '2021-10-21': { text: '🎉', class: 'test' }
         },
         dateRange: null,
+        compareDateRange: null,
         month: '09-2021'
       }
     },
@@ -72,7 +73,9 @@ storiesOf('Common', module)
 
         <itf-date-range-picker value-format="yyyy-MM-dd" min-date="2023-03-01" placeholder="loooooooooooooooong placeholder" v-model="dateRange"></itf-date-range-picker>
 
-        <itf-date-range-picker-inline value-format="yyyy-MM-dd" v-model="dateRange"></itf-date-range-picker-inline>
+        <itf-date-range-picker-inline value-format="yyyy-MM-dd" v-model="dateRange" :range="compareDateRange"></itf-date-range-picker-inline>
+
+        <itf-date-range-picker value-format="yyyy-MM-dd" min-date="2023-03-01" v-model="compareDateRange" :range="dateRange" compare></itf-date-range-picker>
 
         <h2>Month</h2>
 

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

@@ -1,8 +1,4 @@
 import { storiesOf } from '@storybook/vue';
-import itfRule from './Rule.vue';
-import itfRuleGroup from './RuleGroup.vue';
-import itfFilterBadge from './FilterBadge.vue';
-import itfFilterControl from './FilterControl.vue';
 
 storiesOf('Common', module)
   .add('Filter', () => ({

package/src/components/panels/Panel.vue

@@ -10,11 +10,11 @@
         <div class="b-panel__expand_text" v-text="title"></div>
       </a>
     </div>
-    <div v-show="!collapsed" class="b-panel-header">
+    <div v-show="!collapsed" class="b-panel-header p-3">
       <slot name="header">
         <div>
           <slot name="title">
-            <div class="b-panel__title ps-2" v-text="title"></div>
+            <div class="b-panel__title ps-1 fw-bold h5" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">

package/src/components/table/TableRows.vue

@@ -130,7 +130,7 @@ import itfMoneyField from '../text-field/MoneyField.vue';
 import itfTextarea from '../text-field/Textarea.vue';
 import itfHoursField from '../text-field/HoursField.vue';
 import itfSelect from '../select/Select.vue';
-import itfTableBody from '@itfin/components/src/components/table/TableBody.vue';
+import itfTableBody from './TableBody.vue';
 // import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({