@itfin/components 1.2.73 → 1.2.75

package/package.json

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

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

@@ -496,7 +496,19 @@
     border-radius: 0;
 
     &:hover {
-      background: var(--adp-cell-background-color-in-range-hover);
+      position: relative;
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--adp-cell-border-radius);
+        background: var(--adp-cell-background-color-in-range-hover);
+        opacity: .5;
+        pointer-events: none;
+      }
     }
   }
 
@@ -999,6 +1011,10 @@ $rangeThumbSize: 12px;
     padding: 0;
     max-width: 100px;
 
+    &.placeholder-visible {
+      max-width: none;
+    }
+
     &:focus, &:active {
       border: 0;
       box-shadow: none;

package/src/components/app/App.vue

@@ -74,7 +74,7 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      this.showError(this.$t('components.sorrySomethingWentWrongPleaseTryAgainOrContactSupport'));
+      this.showError(err.message);
       if (errFunc) {
         errFunc(err);
       }

package/src/components/datepicker/DatePicker.vue

@@ -156,6 +156,10 @@ class itfDatePicker extends Vue {
     return this.valueAsLuxon.toFormat(this.dateFormat);
   }
 
+  get minDateLuxon() {
+    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
+  }
+
   updateValue(value, emitEmpty = false) {
     const val = value && DateTime.fromFormat(value, this.dateFormat, { zone: 'UTC' });
     if (!val || !val.isValid) {
@@ -164,6 +168,9 @@ class itfDatePicker extends Vue {
       }
       return;
     }
+    if (this.minDateLuxon && val < this.minDateLuxon) {
+      return;
+    }
     this.setValue(this.valueFormat === 'ISO' ? val.toISO() : val.toFormat(this.valueFormat));
   }
 

package/src/components/datepicker/DatePickerInline.vue

@@ -11,6 +11,7 @@
         <button
           v-for="(item, n) in daysList"
           :key="n"
+          :disabled="!isEnabled(item.date)"
           :class="{'active': isSelected(item.date)}"
           @click="selectDate(item.date)"
           class="btn btn-outline-primary btn-sm text-start">
@@ -162,9 +163,31 @@ class itfDatePickerInline extends Vue {
     return this.valueAsLuxon.hasSame(DateTime.local().plus(date), 'day');
   }
 
-  selectDate(date) {
+  get minDateLuxon() {
+    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
+  }
+
+  isEnabled(date) {
     const lxDate = DateTime.local().plus(date);
+    return !(this.minDateLuxon && lxDate < this.minDateLuxon);
+  }
+
+  selectDate(date) {
+    let lxDate = DateTime.local().plus(date);
+    if (this.minDateLuxon && lxDate < this.minDateLuxon) {
+      return;
+    }
+    this.calendar.selectDate(lxDate.toJSDate());
     this.updateValue(lxDate.toFormat(this.displayFormat));
   }
+
+  @Watch('value')
+  onValueChanged() {
+    if (!this.valueAsLuxon) {
+      this.calendar.clear({ silent: true });
+      return;
+    }
+    this.calendar.selectDate(this.valueAsLuxon.toJSDate(), { silent: true });
+  }
 }
 </script>

package/src/components/datepicker/DateRangePicker.vue

@@ -11,6 +11,7 @@
       <i-mask-component
         ref="input"
         class="form-control"
+        :class="{ 'placeholder-visible': !displayValue || !displayValue[0] }"
         @input="updateValue($event, 0)"
         @focus="onFocus"
         @blur="onBlur($event, 0)"
@@ -24,9 +25,10 @@
         :lazy="!focused"
         :placeholder="placeholder"
       />
-      <span class="input-group-text" :class="{'hidden': !focused && (value && !value[0])}">-</span>
+      <span v-if="displayValue && displayValue[0]" class="input-group-text" :class="{'hidden': !focused && (value && !value[0])}">-</span>
 
       <i-mask-component
+        v-if="displayValue && displayValue[0]"
         ref="input2"
         class="form-control"
         @input="updateValue($event, 1)"
@@ -179,6 +181,10 @@ class itfDateRangePicker extends Vue {
     ];
   }
 
+  get minDateLuxon() {
+    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
+  }
+
   updateValue(value, index, emitEmpty = false) {
     const val = value && DateTime.fromFormat(value, this.dateFormat);
     if (!val || !val.isValid) {
@@ -191,6 +197,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) {
+      return;
+    }
     this.$emit('input', current);
   }
 
@@ -209,7 +218,10 @@ 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]) {
-      this.$emit('input', [this.value[1], this.value[0]]);
+      if (this.minDateLuxon && (this.valueAsLuxon[0] < this.minDateLuxon || this.valueAsLuxon[1] < this.minDateLuxon)) {
+        return;
+      }
+      this.$emit('input', [this.value[0], this.value[1]]);
     }
   }
 

package/src/components/datepicker/DateRangePickerInline.vue

@@ -11,6 +11,7 @@
         <button
           v-for="(item, n) in daysList"
           :key="n"
+          :disabled="!isEnabled(item.date())"
           :class="{'active': isSelected(item.date())}"
           @click="selectDate(item.date())"
           class="btn btn-outline-primary btn-sm text-start">
@@ -78,6 +79,7 @@ class itfDatePickerInline extends Vue {
       minDate: this.minDate,
       locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       range: true,
+      dynamicRange: true,
       toggleSelected: false,
       selectedDates: this.valueAsLuxon
         ? [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()]
@@ -139,12 +141,15 @@ class itfDatePickerInline extends Vue {
   updateValue(date1, date2, emitEmpty = false) {
     const val = date1 && DateTime.fromFormat(date1, this.displayFormat);
     const val2 = date2 && DateTime.fromFormat(date2, this.displayFormat);
-    if (!val || !val.isValid) {
+    if (!val || !val.isValid || !val2 || !val2.isValid) {
       if (emitEmpty) {
         this.$emit('input', null);
       }
       return;
     }
+    if (this.minDateLuxon && (val < this.minDateLuxon || val2 < this.minDateLuxon)) {
+      return;
+    }
     if (this.valueFormat === 'ISO') {
       return this.$emit('input', [val.toISO(), val2.toISO()]);
     }
@@ -154,6 +159,16 @@ class itfDatePickerInline extends Vue {
     ]);
   }
 
+  get minDateLuxon() {
+    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
+  }
+
+  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);
+  }
+
   isSelected(date) {
     if (!this.valueAsLuxon || this.valueAsLuxon.length < 2) {
       return false;
@@ -166,6 +181,22 @@ class itfDatePickerInline extends Vue {
     const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
     const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
     this.updateValue(lxDate1.toFormat(this.displayFormat), lxDate2.toFormat(this.displayFormat));
+    this.calendar.selectDate([lxDate1.toJSDate(), lxDate2.toJSDate()], { silent: true });
+  }
+
+  @Watch('value')
+  onValueChanged() {
+    if (!this.valueAsLuxon) {
+      this.calendar.clear({ silent: true });
+      return;
+    }
+    const date1 = this.calendar.rangeDateFrom && DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat('yyyy-MM-dd')
+    const date2 = this.calendar.rangeDateTo && DateTime.fromJSDate(this.calendar.rangeDateTo).toFormat('yyyy-MM-dd')
+    if (date1 !== this.valueAsLuxon[0].toFormat('yyyy-MM-dd') || date2 !== this.valueAsLuxon[1].toFormat('yyyy-MM-dd')) {
+      this.$nextTick(() => {
+        this.calendar.selectDate(this.valueAsLuxon && [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()], { silent: true });
+      });
+    }
   }
 }
 </script>

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

@@ -51,6 +51,8 @@ storiesOf('Common', module)
         <br />
         <itf-date-picker-inline value-format="yyyy-MM-dd" :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>
 
+        <itf-date-picker-inline value-format="yyyy-MM-dd" :custom-days="customDays" min-date="2023-05-01" :value="date" v-model.lazy="date"></itf-date-picker-inline>
+
         <br />
         <br />
 
@@ -59,7 +61,7 @@ storiesOf('Common', module)
         <br />
         <br />
 
-        <itf-date-picker value-format="yyyy-MM-dd" :value="date" v-model.lazy="date"></itf-date-picker>
+        <itf-date-picker value-format="yyyy-MM-dd" :value="date"  clearable min-date="2023-05-01" v-model.lazy="date"></itf-date-picker>
 
         <br />
         <br />
@@ -68,7 +70,7 @@ storiesOf('Common', module)
 
         <h2>Range</h2>
 
-        <itf-date-range-picker value-format="yyyy-MM-dd" v-model="dateRange"></itf-date-range-picker>
+        <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>
 

package/src/locales/en.js

@@ -46,7 +46,6 @@ module.exports = {
   invalidTimeValueShouldBeInFormat: 'Invalid time value. Should be in format 0d 0h 0m',
   yourTitleShouldDescribeTheWorkYouDo: 'Your title should describe the work you do',
   pleaseEnterValidCommaSeparatedEmailAddressesToSendInvoicing: 'Please enter valid, comma separated (,) email addresses to send invoicing',
-  sorrySomethingWentWrongPleaseTryAgainOrContactSupport: 'Sorry, something went wrong. Please try again or contact support. Include a screenshot of this entire page so we can troubleshoot this issue faster.',
   noResults: 'No results',
   search: 'Search',
   dateBefore: 'The date should be before {date}',

package/src/locales/uk.js

@@ -46,7 +46,6 @@ module.exports = {
   invalidTimeValueShouldBeInFormat: 'Недійсне значення часу. Має бути у форматі 0d 0h 0m',
   yourTitleShouldDescribeTheWorkYouDo: 'Ваша назва має описувати роботу, яку ви виконуєте',
   pleaseEnterValidCommaSeparatedEmailAddressesToSendInvoicing: 'Будь ласка, введіть дійсні адреси електронної пошти, розділені комами (,)',
-  sorrySomethingWentWrongPleaseTryAgainOrContactSupport: 'Вибачте, щось пішло не так. Спробуйте ще раз або зверніться до служби підтримки. Додайте знімок екрана всієї сторінки, щоб ми могли швидше вирішити цю проблему.',
   noResults: 'Немає результатів',
   search: 'Пошук',
   dateBefore: 'Дата має бути раніше {date}',