@itfin/components 1.2.77 → 1.2.79

package/package.json

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

package/src/ITFSettings.js

@@ -1,4 +1,4 @@
-if ("paintWorklet" in CSS) {
+if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
   CSS.paintWorklet.addModule(
     "https://www.unpkg.com/css-houdini-squircle@0.1.3/squircle.min.js"
   );

package/src/components/datepicker/DatePickerInline.vue

@@ -183,7 +183,7 @@ class itfDatePickerInline extends Vue {
 
   @Watch('value')
   onValueChanged() {
-    if (!this.valueAsLuxon) {
+    if (!this.valueAsLuxon || !this.calendar) {
       this.calendar && this.calendar.clear({ silent: true });
       return;
     }

package/src/components/datepicker/DateRangePicker.vue

@@ -53,6 +53,7 @@
           :display-format="displayFormat"
           :value-format="valueFormat"
           :min-date="minDate"
+          :max-date="maxDate"
           @input="selectInlineDate"
         ></itf-date-range-picker-inline>
       </div>
@@ -102,7 +103,8 @@ class itfDateRangePicker extends Vue {
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
   @Prop({ type: String, default: 'bottom-start' }) placement;
-  @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type: [String, Date], default: '' }) minDate;
+  @Prop({ type: [String, Date], default: ''}) maxDate;
 
   focused = false;
 
@@ -182,7 +184,15 @@ class itfDateRangePicker extends Vue {
   }
 
   get minDateLuxon() {
-    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
+    return this.minDate && this.dateLuxon(this.minDate);
+  }
+
+  get maxDateLuxon() {
+    return this.maxDate && this.dateLuxon(this.maxDate);
+  }
+
+  dateLuxon(date) {
+    return (typeof date === 'string' ? DateTime.fromISO(date) : DateTime.fromJSDate(date));
   }
 
   updateValue(value, index, emitEmpty = false) {
@@ -197,7 +207,9 @@ class itfDateRangePicker extends Vue {
     current[0] = current[0] || null;
     current[1] = current[1] || null;
     current[index] = (this.valueFormat === 'ISO') ? val.toISO() : val.toFormat(this.valueFormat);
-    if (this.minDateLuxon && val < this.minDateLuxon) {
+    if ((this.minDateLuxon && val < this.minDateLuxon) ||
+      (this.maxDateLuxon && val > this.maxDateLuxon)
+    ) {
       return;
     }
     this.$emit('input', current);
@@ -218,7 +230,9 @@ class itfDateRangePicker extends Vue {
   onBlur(e, index) {
     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)) {
+      if ((this.minDateLuxon && (this.valueAsLuxon[0] < this.minDateLuxon || this.valueAsLuxon[1] < this.minDateLuxon)) ||
+        (this.maxDateLuxon && (this.valueAsLuxon[0] > this.maxDateLuxon || this.valueAsLuxon[1] > this.maxDateLuxon))
+      ) {
         return;
       }
       this.$emit('input', [this.value[0], this.value[1]]);

package/src/components/datepicker/DateRangePickerInline.vue

@@ -36,6 +36,7 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) maxDate;
   @Prop({
     type: Array,
     default: function () {
@@ -59,6 +60,7 @@ class itfDatePickerInline extends Vue {
   }
 
   @Watch('minDate')
+  @Watch('maxDate')
   async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();
@@ -77,6 +79,7 @@ class itfDatePickerInline extends Vue {
       firstDay: 1,
       altFieldDateFormat: this.valueFormat,
       minDate: this.minDate,
+      maxDate: this.maxDate,
       locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       range: true,
       dynamicRange: true,
@@ -147,9 +150,12 @@ class itfDatePickerInline extends Vue {
       }
       return;
     }
-    if (this.minDateLuxon && (val < this.minDateLuxon || val2 < this.minDateLuxon)) {
+    if ((this.minDateLuxon && (val < this.minDateLuxon || val2 < this.minDateLuxon)) ||
+      (this.maxDateLuxon && (val > this.maxDateLuxon || val2 > this.maxDateLuxon))
+    ) {
       return;
     }
+
     if (this.valueFormat === 'ISO') {
       return this.$emit('input', [val.toISO(), val2.toISO()]);
     }
@@ -160,13 +166,31 @@ class itfDatePickerInline extends Vue {
   }
 
   get minDateLuxon() {
-    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
+    return this.minDate && this.dateLuxon(this.minDate);
+  }
+  get maxDateLuxon() {
+    return this.maxDate && this.dateLuxon(this.maxDate);
+  }
+
+  dateLuxon(date) {
+    return typeof date === 'string' ? DateTime.fromISO(date) : DateTime.fromJSDate(date);
   }
 
   isEnabled(date) {
     const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
     const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
-    return !this.minDateLuxon || (lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon);
+
+    if (this.minDateLuxon) {
+      if (this.maxDateLuxon) {
+        return lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon && lxDate1 < this.maxDateLuxon && lxDate2 < this.maxDateLuxon;
+      } else {
+        return lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon;
+      }
+    } else if (this.maxDateLuxon) {
+      return lxDate1 < this.maxDateLuxon && lxDate2 < this.maxDateLuxon;
+    }
+
+    return true;
   }
 
   isSelected(date) {