@itfin/components 1.2.15 → 1.2.18

package/package.json

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

package/src/assets/scss/_dark-theme.scss

@@ -1,15 +1,17 @@
 body[data-theme="dark"] {
   --bs-body-bg: #{$dark-body-bg};
   --bs-body-color: #{$dark-body-color};
-  background-color: $dark-body-bg !important;
-  color: $dark-body-color !important;
+  --bs-link-color: #{$dark-link-color};
+  --bs-link-hover-color: #{darken($dark-link-color, 10%)};
 
-  a {
-    color: $dark-link-color;
-
-    &:hover, &:active, &:focus {
-      color: darken($dark-link-color, 10%);
-    }
+  .color-project-tnm {
+    color: lighten($project-tnm, 50%);
+  }
+  .color-project-fixed {
+    color: $project-fixed;
+  }
+  .color-project-nonprofit {
+    color: $project-nonprofit;
   }
 
   .form-control {
@@ -46,4 +48,10 @@ body[data-theme="dark"] {
   .modal-backdrop {
     background-color: #000;
   }
+
+  .dropdown-menu {
+    --bs-dropdown-link-color: #{$dark-link-color};
+    --bs-dropdown-link-hover-color: #1e2125;
+    --bs-dropdown-link-hover-bg: #{$dark-link-color};
+  }
 }

package/src/components/app/App.vue

@@ -140,7 +140,7 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      this.showError('Sorry, something went wrong. Please try again or contact support. Include a screenshot of this entire page so we can troubleshoot this issue faster.');
+      this.showError(this.$t('components.sorrySomethingWentWrongPleaseTryAgainOrContactSupport'));
       if (errFunc) {
         errFunc(err);
       }

package/src/components/datepicker/DatePickerInline.vue

@@ -4,7 +4,7 @@
 
     <div class="air-datepicker -inline-" v-if="!onlyCalendar">
       <nav class="air-datepicker-nav align-items-center">
-        <div class="air-datepicker-title">Relative dates</div>
+        <div class="air-datepicker-title">{{$t('components.relativeDates')}}</div>
       </nav>
 
       <div class="d-grid gap-1 p-2">
@@ -64,6 +64,7 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
 import AirDatepicker from 'air-datepicker';
 import localeEn from 'air-datepicker/locale/en';
+import localeUk from 'air-datepicker/locale/uk';
 import ITFSettings from '../../ITFSettings';
 
 export default @Component({
@@ -81,14 +82,16 @@ class itfDatePickerInline extends Vue {
   @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop({
     type: Array,
-    default: () => ([
-      { title: 'Today', date: {} },
-      { title: 'Tomorrow', date: { days: 1 } },
-      { title: 'In a week', date: { week: 1 } },
-      { title: 'In a month', date: { month: 1 } },
-      { title: 'In a half-year', date: { month: 6 } },
-      { title: 'In a year', date: { year: 1 } },
-    ])
+    default: function () {
+      return [
+        { title: this.$t('components.today'), date: {} },
+        { title: this.$t('components.tomorrow'), date: { days: 1 } },
+        { title: this.$t('components.inAWeek'), date: { week: 1 } },
+        { title: this.$t('components.inAMonth'), date: { month: 1 } },
+        { title: this.$t('components.inAHalfYear'), date: { month: 6 } },
+        { title: this.$t('components.inAYear'), date: { year: 1 } },
+      ];
+    }
   }) daysList;
 
   calendar = null;
@@ -107,7 +110,7 @@ class itfDatePickerInline extends Vue {
     }
 
     this.calendar = new AirDatepicker(this.$refs.calendar, {
-      locale: localeEn,
+      locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       firstDay: 1,
       range: this.range,
       view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,

package/src/components/datepicker/DateRangePickerInline.vue

@@ -4,7 +4,7 @@
 
     <div class="air-datepicker -inline-" v-if="!onlyCalendar">
       <nav class="air-datepicker-nav align-items-center">
-        <div class="air-datepicker-title">Relative periods</div>
+        <div class="air-datepicker-title">{{$t('components.relativeDates')}}</div>
       </nav>
 
       <div class="d-grid gap-1 p-2">
@@ -60,6 +60,7 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
 import AirDatepicker from 'air-datepicker/air-datepicker.js';
 import localeEn from 'air-datepicker/locale/en';
+import localeUk from 'air-datepicker/locale/uk';
 import ITFSettings from '../../ITFSettings';
 
 export default @Component({
@@ -73,17 +74,18 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({
     type: Array,
-    default: () => ([
-      // { title: 'Today', date: () => [DateTime.local(), DateTime.local()] },
-      { title: 'This week', date: () => [DateTime.local().startOf('week'), DateTime.local().endOf('week')] },
-      { title: 'Last week', date: () => [DateTime.local().minus({ week: 1 }).startOf('week'), DateTime.local().minus({ week: 1 }).endOf('week')] },
-      { title: 'This month', date: () => [DateTime.local().startOf('month'), DateTime.local().endOf('month')] },
-      { title: 'Last month', date: () => [DateTime.local().minus({ months: 1 }).startOf('month'), DateTime.local().minus({ months: 1 }).endOf('month')] },
-      { title: 'This quarter', date: () => [DateTime.local().startOf('quarter'), DateTime.local().endOf('quarter')] },
-      { title: 'Last quarter', date: () => [DateTime.local().minus({ quarter: 1 }).startOf('quarter'), DateTime.local().minus({ quarter: 1 }).endOf('quarter')] },
-      { title: 'This year', date: () => [DateTime.local().startOf('year'), DateTime.local().endOf('year')] },
-      { title: 'Last year', date: () => [DateTime.local().minus({ year: 1 }).startOf('year'), DateTime.local().minus({ year: 1 }).endOf('year')] },
-    ])
+    default: function () {
+      return [// { title: 'Today', date: () => [DateTime.local(), DateTime.local()] },
+        { title: this.$t('components.thisWeek'), date: () => [DateTime.local().startOf('week'), DateTime.local().endOf('week')] },
+        { title: this.$t('components.lastWeek'), date: () => [DateTime.local().minus({ week: 1 }).startOf('week'), DateTime.local().minus({ week: 1 }).endOf('week')] },
+        { title: this.$t('components.thisMonth'), date: () => [DateTime.local().startOf('month'), DateTime.local().endOf('month')] },
+        { title: this.$t('components.lastMonth'), date: () => [DateTime.local().minus({ months: 1 }).startOf('month'), DateTime.local().minus({ months: 1 }).endOf('month')] },
+        { title: this.$t('components.thisQuarter'), date: () => [DateTime.local().startOf('quarter'), DateTime.local().endOf('quarter')] },
+        { title: this.$t('components.lastQuarter'), date: () => [DateTime.local().minus({ quarter: 1 }).startOf('quarter'), DateTime.local().minus({ quarter: 1 }).endOf('quarter')] },
+        { title: this.$t('components.thisYear'), date: () => [DateTime.local().startOf('year'), DateTime.local().endOf('year')] },
+        { title: this.$t('components.lastYear'), date: () => [DateTime.local().minus({ year: 1 }).startOf('year'), DateTime.local().minus({ year: 1 }).endOf('year')] },
+      ];
+    }
   }) daysList;
 
   calendar = null;
@@ -103,7 +105,7 @@ class itfDatePickerInline extends Vue {
 
     this.calendar = new AirDatepicker(this.$refs.calendar, {
       firstDay: 1,
-      locale: localeEn,
+      locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       range: true,
       toggleSelected: false,
       selectedDates: this.valueAsLuxon

package/src/components/datepicker/MonthPicker.vue

@@ -9,7 +9,7 @@
       ref="input"
       readonly
       :disabled="disabled"
-      class="form-control"
+      class="form-control text-capitalize"
       :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
       @focus="onFocus"
       @blur="onBlur"
@@ -85,7 +85,7 @@ class itfMonthPicker extends Vue {
   @Prop({ type: String }) value;
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
-  @Prop({ type: String, default: 'MMMM, yyyy' }) displayFormat;
+  @Prop({ type: String, default: 'LLLL, yyyy' }) displayFormat;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
   @Prop({ type: String, default: 'bottom-start' }) placement;

package/src/components/datepicker/PeriodPicker.vue

@@ -201,17 +201,19 @@ class itfPeriodPicker extends Vue {
 
   year = DateTime.local().year;
 
-  quarters = [
-    { Name: 'Quarter 1', Months: [1, 2, 3], Number: 1 },
-    { Name: 'Quarter 2', Months: [4, 5, 6], Number: 2 },
-    { Name: 'Quarter 3', Months: [7, 8, 9], Number: 3 },
-    { Name: 'Quarter 4', Months: [10, 11, 12], Number: 4 },
-  ];
-
   focused = false;
 
   tooltip = null;
 
+  get quarters() {
+    return [
+      { Name: `${this.$t('quarter')} 1`, Months: [1, 2, 3], Number: 1 },
+      { Name: `${this.$t('quarter')} 2`, Months: [4, 5, 6], Number: 2 },
+      { Name: `${this.$t('quarter')} 3`, Months: [7, 8, 9], Number: 3 },
+      { Name: `${this.$t('quarter')} 4`, Months: [10, 11, 12], Number: 4 },
+    ];
+  }
+
   get nextYear() {
     return this.year + 1;
   }

package/src/components/form/Form.vue

@@ -97,8 +97,7 @@ class itfForm extends Vue {
     // @todo remove validate when migrate from vuetify
     const isValid = !invalidComponents.length;
     if (showError && !isValid && this.$showError) {
-      console.debug('Invalid', invalidComponents);
-      this.$showError('Please fix the errors below to proceed.', { duration: 3000 });
+      this.$showError(this.$t('components.pleaseFixTheErrorsBelowToProceed'), { duration: 3000 });
     }
     return isValid;
   }

package/src/components/popover/ConfirmPopover.vue

@@ -6,7 +6,7 @@
 
     <div class="modal-body p-4 text-center">
       <slot>
-        <h5 class="mb-0" v-if="title" v-html="title"></h5>
+        <div class="mb-0" v-if="title" v-html="title"></div>
         <p class="mb-0" v-if="message" v-html="message"></p>
       </slot>
     </div>
@@ -37,13 +37,13 @@ export default @Component({
 })
 class itfConfirmPopover extends Vue {
   @PropSync('visible') value;
-  @Prop({ type: String, default: 'Are you sure<br/> to delete this?' }) title;
+  @Prop({ type: String, default: function() { this.$t('areYouSureToDeleteThis'); } }) title;
   @Prop({ type: String, default: '' }) message;
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
-  @Prop({ type: String, default: 'No,&nbsp;keep it' }) cancelCaption;
-  @Prop({ type: String, default: 'Yes,&nbsp;delete' }) confirmCaption;
+  @Prop({ type: String, default: function() { this.$t('noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default: function() { this.$t('yesDelete'); } }) confirmCaption;
   @Prop({ type: String, default: '' }) cancelClass;
   @Prop({ type: String, default: 'text-danger' }) confirmClass;
 

package/src/components/popover/Popover.vue

@@ -69,13 +69,15 @@ class itfPopover extends Vue {
 
   modalEl = null;
 
+  ignoreUpdate = false; // потрібно щоб не оновлювалось visible декілька разів, бо буде баг коли вікно відкривається і одразу закривається
+
   beforeDestroy() {
     this.hide();
   }
 
   @Watch('value')
-  onVisibleChanged(newValue) {
-    if (!this.modalEl) {
+  onVisibleChanged(newValue, oldValue) {
+    if (!this.modalEl || this.ignoreUpdate) {
       return;
     }
     if (newValue) {
@@ -109,13 +111,16 @@ class itfPopover extends Vue {
     });
     this.onVisibleChanged(this.value);
     this.$el.addEventListener('shown.bs.popover', () => {
+      this.ignoreUpdate = true;
+      this.value = true;
       document.body.addEventListener('click', this.clickOutside);
-      this.$emit('update:visible', true);
+      this.$nextTick(() => this.ignoreUpdate = false);
     });
     this.$el.addEventListener('hidden.bs.popover', () => {
+      this.ignoreUpdate = true;
       this.value = false;
       document.body.removeEventListener('click', this.clickOutside);
-      this.$emit('update:visible', false);
+      this.$nextTick(() => this.ignoreUpdate = false);
     });
   }
 

package/src/components/select/Dropdown.vue

@@ -5,7 +5,7 @@
       class="dropdownInput"
       type="text"
       ref="inputRef"
-      placeholder="Search"
+      :placeholder="$t('components.search')"
       @input="handleSearchValueChange"
       @keydown="handleInputKeyDown"
     />
@@ -33,14 +33,13 @@
         {{
           isCreatingOption
             ? `Creating "${searchValue}"...`
-            : `Create
-        "${searchValue}"`
+            : `Create "${searchValue}"`
         }}
       </div>
     </div>
 
     <div v-if="filteredOptions.length === 0" class="optionsNoResults">
-      No results
+      {{$t('components.noResults')}}
     </div>
   </div>
 </template>

package/src/helpers/validators.js

@@ -15,126 +15,126 @@ const HEX_REGEXP = /[0-9A-Fa-f]{6}/;
 
 export const MEDIUM_TEXT_LENGTH = 16777215;
 
-export function differentValidation (value, message = 'The value must be different') {
-  return v => !v || !(v === value) || message;
+export function differentValidation (value, message) {
+  return (v, $t) => !v || !(v === value) || (message || $t('components.theValueMustBeDifferent'));
 }
 
-export function lengthValidation (length, message = `Must be less than ${length} characters.`) {
-  return v => !v || ((v || '').toString().trim().length <= length) || message;
+export function lengthValidation (length, message) {
+  return (v, $t) => !v || ((v || '').toString().trim().length <= length) || (message || $t('components.mustBeLessThanLengthCharacters', {length}));
 }
 
-export function minLengthValidation (length, message = `Must be more than ${length} characters.`) {
-  return v => !v || ((v || '').toString().trim().length >= length) || message;
+export function minLengthValidation (length, message) {
+  return (v, $t) => !v || ((v || '').toString().trim().length >= length) || (message || $t('components.mustBeMoreThanLengthCharacters', {length}));
 }
 
-export function emailValidation (message = 'Please enter a valid email.') {
-  return v => !v || !!v.toString().match(EMAIL_REGEXP) || message;
+export function emailValidation (message) {
+  return (v, $t) => !v || !!v.toString().match(EMAIL_REGEXP) || (message || $t('components.pleaseEnterAValidEmail'));
 }
 
-export function emailListValidation (message = 'Please enter valid, comma separated (,) email addresses to send invoicing') {
-  return v => !v || !!v.toString().match(EMAIL_LIST_REGEXP) || message;
+export function emailListValidation (message) {
+  return (v, $t) => !v || !!v.toString().match(EMAIL_LIST_REGEXP) || (message || $t('components.pleaseEnterValidCommaSeparatedEmailAddressesToSendInvoicing'));
 }
 
-export function urlValidation (message = 'Please enter valid URL.') {
-  return v => !v || !!v.toString().match(URL_REGEXP) || message;
+export function urlValidation (message) {
+  return (v, $t) => !v || !!v.toString().match(URL_REGEXP) || (message || $t('components.pleaseEnterValidURL'));
 }
 
-export function hexValidation (message = 'Please enter a valid Hex.') {
-  return v => !v || !!v.toString().match(HEX_REGEXP) || message;
+export function hexValidation (message) {
+  return (v, $t) => !v || !!v.toString().match(HEX_REGEXP) || (message || $t('components.pleaseEnteraValidHex'));
 }
 
-export function passMatchValidation (password, message = 'Passwords don\'t match.') {
-  return v => !v || !!v.toString().match(`^${password}$`) || message;
+export function passMatchValidation (password, message) {
+  return (v, $t) => !v || !!v.toString().match(`^${password}$`) || (message || $t('components.passwordsDontMatch'));
 }
 
-export function emptyValidation (message = 'This field is required.') {
-  return v => (v !== '' && typeof v !== 'undefined' && v !== null) || message;
+export function emptyValidation (message) {
+  return (v, $t) => (v !== '' && typeof v !== 'undefined' && v !== null) || (message || $t('components.thisFieldIsRequired'));
 }
 
-export function emptyArrayValidation (message = 'This field is required.') {
-  return v => (Array.isArray(v) && v.length > 0) || message;
+export function emptyArrayValidation (message) {
+  return (v, $t) => (Array.isArray(v) && v.length > 0) || (message || $t('components.thisFieldIsRequired'));
 }
 
-export function doubleValidation (message = 'This field must be a number (format 0.00).') {
-  return v => !v || !!(v + '').match(DOUBLE_REGEXP) || message;
+export function doubleValidation (message) {
+  return (v, $t) => !v || !!(v + '').match(DOUBLE_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
 }
 
-export function minMaxValidation (min = 0, max = 100, message = `The value must be greater than or equal to ${min} and lower or equal than ${max}.`) {
-  return v => !v || (v >= min && v <= max) || message;
+export function minMaxValidation (min = 0, max = 100, message) {
+  return (v, $t) => !v || (v >= min && v <= max) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMinAndMax', {min, max}));
 }
 
-export function minValidation (min = 0, message = `The value must be greater than or equal to ${min}.`) {
-  return v => !v || (v >= min) || message;
+export function minValidation (min = 0, message) {
+  return (v, $t) => !v || (v >= min) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMin', {min}));
 }
 
-export function maxValidation (max, message = `Must be less than ${max}.`) {
-  return v => (v <= max) || message;
+export function maxValidation (max, message) {
+  return (v, $t) => (v <= max) || (message || $t('components.mustBeLessThanMax'));
 }
 
-export function preventStuffingValidation (message = 'This isn\'t a valid description.') {
-  return v => !v || (v.replace(/(.{4,}?)(?:\1{3,})/g, (text, subtext) => /^(\s*(<(\/?[^>]+)>|&nbsp;|[^\s]{0,3})\s*|(.)\4+)$/.test(subtext) ? text : '') === v) || message;
+export function preventStuffingValidation (message) {
+  return (v, $t) => !v || (v.replace(/(.{4,}?)(?:\1{3,})/g, (text, subtext) => /^(\s*(<(\/?[^>]+)>|&nbsp;|[^\s]{0,3})\s*|(.)\4+)$/.test(subtext) ? text : '') === v) || (message || $t('components.thisIsntABalidDescription'));
 }
 
-export function preventUrlsValidation (message = 'Links are not allowed in this field.') {
-  return v => !v || !v.match(LINK_URL_REGEXP) || message;
+export function preventUrlsValidation (message) {
+  return (v, $t) => !v || !v.match(LINK_URL_REGEXP) || (message || $t('components.linksAreNotAllowedInThisField'));
 }
 
-export function financeAccountCodeValidation (message = 'The value must begin and end with a number and contain only numbers or dots(.)') {
-  return v => !v || v.match(/^\d+(\.\d+)*$/g) || message;
+export function financeAccountCodeValidation (message) {
+  return (v, $t) => !v || v.match(/^\d+(\.\d+)*$/g) || (message || $t('components.theValueMustBeginAndEndWithANumberAndContainOnlyNumbersOrDots'));
 }
 
-export function preventHtmlValidation (message = 'Please don\'t use HTML markup') {
-  return v => !v || !v.match(HTML_MARKUP_REGEXP) || message;
+export function preventHtmlValidation (message) {
+  return (v, $t) => !v || !v.match(HTML_MARKUP_REGEXP) || (message || $t('components.pleaseDontUseHTMLMarkup'));
 }
 
-export function preventLinkedinValidation (message = 'Before you continue, make sure your profile does not include your LinkedIn contact information.') {
-  return v => !v || !v.match(LINKED_IN_REGEXP) || message;
+export function preventLinkedinValidation (message) {
+  return (v, $t) => !v || !v.match(LINKED_IN_REGEXP) || (message || $t('components.beforeYouContinueMakeSureYourProfileDoesNotIncludeYourLinkedInContactInformation'));
 }
 
-export function preventCapitalsValidation (message = 'Too many capital letters.') {
-  return v => !v || !(v.replace(/[A-Z]/g, '').length < v.length / 2) || message;
+export function preventCapitalsValidation (message) {
+  return (v, $t) => !v || !(v.replace(/[A-Z]/g, '').length < v.length / 2) || (message || $t('components.tooManyCapitalLetters'));
 }
 
-export function preventSpecialCharsValidation (message = 'Your title cannot include special characters like >, ;, !, @, $, %, ^, =, {, }.') {
-  return v => !v || !!v.match(SPECIAL_CHARS_REGEXP) || message;
+export function preventSpecialCharsValidation (message) {
+  return (v, $t) => !v || !!v.match(SPECIAL_CHARS_REGEXP) || (message || $t('components.yourtitleCannotIncludeSpecialCharactersLike'));
 }
 
-export function preventGreetingsValidation (message = 'Your title should describe the work you do.') {
-  return v => !v || !v.match(GREETINGS_REGEXP) || message;
+export function preventGreetingsValidation (message) {
+  return (v, $t) => !v || !v.match(GREETINGS_REGEXP) || (message || $t('components.yourTitleShouldDescribeTheWorkYouDo'));
 }
 
-export function preventPhoneValidation (message = 'Please remove any phone number from this field. Potential clients will be able to contact you through Upwork.') {
-  return v => !v || !v.match(PHONE_REGEXP) || message;
+export function preventPhoneValidation (message) {
+  return (v, $t) => !v || !v.match(PHONE_REGEXP) || (message || $t('components.pleaseRemoveAnyPhoneNumberFromThisField'));
 }
 
-export function allowDigitsOnlyValidation (message = 'This field must contains digits.') {
-  return v => !v || !!v.match(/^\d+$/) || message;
+export function allowDigitsOnlyValidation (message) {
+  return (v, $t) => !v || !!v.match(/^\d+$/) || (message || $t('components.thisFieldMustContainsDigits'));
 }
 
 // export function dateBeforeValidation (dateCompare, message = `The date should be before ${moment(dateCompare).format('MM/DD/YYYY')}`) {
-//   return v => !v || moment(v).isBefore(dateCompare, 'd') || message;
+//   return (v, $t) => !v || moment(v).isBefore(dateCompare, 'd') || (message || $t('components.'));
 // }
 
-export function dateSameOrBeforeValidationLuxon (dateCompare, message = `The date should be same or before ${DateTime.fromISO(dateCompare).toFormat('dd-MM-yyyy')}`) {
-  return v => !v || DateTime.fromISO(v) <= DateTime.fromISO(dateCompare) || message;
+export function dateSameOrBeforeValidationLuxon (dateCompare, message) {
+  return (v, $t) => !v || DateTime.fromISO(v) <= DateTime.fromISO(dateCompare) || (message || $t('components.thedateShouldBeSameOrBefore', {date: DateTime.fromISO(dateCompare).toFormat('dd-MM-yyyy')}));
 }
 
 // export function dateAfterValidation (dateCompare, message = `The date should be after ${moment(dateCompare).format('MM/DD/YYYY')}`) {
-//   return v => !v || moment(v).isAfter(dateCompare, 'd') || message;
+//   return (v, $t) => !v || moment(v).isAfter(dateCompare, 'd') || (message || $t('components.'));
 // }
 //
 // export function dateSameOrAfterValidation (dateCompare, message = `The date should be after ${moment(dateCompare).format('MM/DD/YYYY')}`) {
-//   return v => !v || moment(v).isSameOrAfter(dateCompare, 'd') || message;
+//   return (v, $t) => !v || moment(v).isSameOrAfter(dateCompare, 'd') || (message || $t('components.'));
 // }
 //
 // export function dateSameOrBeforeValidation (dateCompare, message = `The date should be same or before ${moment(dateCompare).format('MM/DD/YYYY')}`) {
-//   return v => !v || moment(v).isSameOrBefore(dateCompare, 'd') || message;
+//   return (v, $t) => !v || moment(v).isSameOrBefore(dateCompare, 'd') || (message || $t('components.'));
 // }
 
-export function dateAfterValidationLuxon (dateCompare, message = `The date should be after ${DateTime.fromISO(dateCompare).toFormat('yyyy-MM-dd')}`) {
-  return v => !v || DateTime.fromISO(v) > DateTime.fromISO(dateCompare) || message;
+export function dateAfterValidationLuxon (dateCompare, message) {
+  return (v, $t) => !v || DateTime.fromISO(v) > DateTime.fromISO(dateCompare) || (message || $t('components.thedateShouldBeSameOrAfter', {date: DateTime.fromISO(dateCompare).toFormat('yyyy-MM-dd')}));
 }
 
-export function hoursValidation (message = 'Invalid time value. Should be in format 0d 0h 0m') {
-  return v => !v || parseHours(v) !== false || message;
+export function hoursValidation (message) {
+  return (v, $t) => !v || parseHours(v) !== false || (message || $t('components.invalidTimeValueShouldBeInFormat'));
 }

package/src/mixins/ValidatableMixin.js

@@ -77,7 +77,7 @@ class ValidatableMixin extends Vue {
 
     for (let index = 0; index < this.rules.length; index++) {
       const rule = this.rules[index];
-      const valid = typeof rule === 'function' ? rule(value) : rule;
+      const valid = typeof rule === 'function' ? rule(value, this.$t.bind(this)) : rule;
 
       if (typeof valid === 'string') {
         errorBucket.push(valid);