@itfin/components 1.2.51 → 1.2.53

package/package.json

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

package/src/assets/scss/components/_tabs.scss

@@ -21,6 +21,19 @@
   &.itf-tabs__simple > .itf-tabs-panel {
     padding-left: 0 !important;
   }
+  .itf-tab__simple {
+    text-decoration: none;
+    padding-right: 2rem;
+    color: var(--bs-gray-500);
+
+    [data-theme="dark"] & {
+      color: var(--bs-gray-700);
+    }
+
+    &.active {
+      color: var(--bs-body-color);
+    }
+  }
   &.itf-tabs__vertical {
     display: flex;
     flex-direction: row-reverse;
@@ -84,7 +97,7 @@
       flex-grow: 1;
       z-index: 1;
       margin-right: -1px;
-      
+
       @include media-breakpoint-up(lg) {
         max-width: calc(100% - var(--itf-tabs-panel-width));
       }

package/src/components/app/ToastMessage.vue

@@ -12,7 +12,7 @@
         </slot>
       </strong>
 <!--        <small>11 mins ago</small>-->
-      <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" aria-label="Close" @click="close"></button>
+      <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" :aria-label="$t('components.close')" @click="close"></button>
     </div>
     <div class="d-flex" v-if="!collapsed">
       <div class="toast-body flex-shrink-1 w-100">
@@ -20,10 +20,10 @@
           <slot />
         </div>
         <slot v-else>{{ content }}</slot>
-        <itf-button small primary block v-if="button" @click="onClick" class="mt-3">{{button}}</itf-button>
+        <itf-button small primary block v-if="button" @click="onClick" class="mt-3 text-black">{{button}}</itf-button>
       </div>
       <div class="me-2 m-auto" v-if="!title && !$slots.title">
-        <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" aria-label="Close" @click="close"></button>
+        <button type="button" class="btn-close" :class="{'btn-close-white': type}" data-bs-dismiss="toast" :aria-label="$t('components.close')" @click="close"></button>
       </div>
     </div>
   </div>

package/src/components/datepicker/DatePickerInline.vue

@@ -30,7 +30,7 @@ export default @Component({
 })
 class itfDatePickerInline extends Vue {
   @Prop({ type: String }) value;
-  @Prop({ type: String, default: 'ISO' }) valueFormat;
+  @Prop({ type: String, default: 'yyyy-MM-dd' }) valueFormat;
   @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) minView;
@@ -76,6 +76,7 @@ class itfDatePickerInline extends Vue {
     this.calendar = new AirDatepicker(this.$refs.calendar, {
       locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       firstDay: 1,
+      altFieldDateFormat: this.valueFormat,
       range: this.range,
       view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
       minView: this.minView,

package/src/components/datepicker/DateRangePickerInline.vue

@@ -30,7 +30,7 @@ export default @Component({
 })
 class itfDatePickerInline extends Vue {
   @Prop() value;
-  @Prop({ type: String, default: 'ISO' }) valueFormat;
+  @Prop({ type: String, default: 'yyyy-MM-dd' }) valueFormat;
   @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: Object, default: () => ({}) }) customDays;
@@ -72,6 +72,7 @@ class itfDatePickerInline extends Vue {
 
     this.calendar = new AirDatepicker(this.$refs.calendar, {
       firstDay: 1,
+      altFieldDateFormat: this.valueFormat,
       locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       range: true,
       toggleSelected: false,

package/src/components/modal/Modal.vue

@@ -10,7 +10,7 @@
           <slot name="title">
             <h5 class="modal-title" :id="modalId">{{title}}</h5>
           </slot>
-          <itf-button icon data-bs-dismiss="modal" aria-label="Close" class="btn-close"></itf-button>
+          <itf-button icon data-bs-dismiss="modal" :aria-label="$t('components.close')" class="btn-close"></itf-button>
         </div>
         <div class="modal-body" v-if="value">
           <slot></slot>

package/src/components/tabs/TabContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="active || (tabsManager && tabsManager.getValue() === id)"
-    :class="{ filled, 'itf-tab-content': !simple }"
+    :class="{ filled }"
     :data-test="`itf-tab-content-${id || _uid}`">
     <slot />
   </div>
@@ -19,9 +19,5 @@ class itfTabContent extends Vue {
   @Prop() id;
   @Prop(Boolean) filled;
   @Prop(Boolean) active;
-
-  get simple() {
-    return this.tabsManager && this.tabsManager.simple;
-  }
 }
 </script>

package/src/components/tabs/Tabs.vue

@@ -90,7 +90,7 @@ class itfTabs extends Vue {
     }
 
     return {
-      staticClass: this.simple ? 'text-decoration-none pe-3' : 'itf-tab',
+      staticClass: this.simple ? 'itf-tab__simple' : 'itf-tab',
       class: {
         'active': this.isActive(node)
       },

package/src/locales/en.js

@@ -0,0 +1,59 @@
+/* eslint-disable comma-dangle */
+export default {
+  today: 'Today',
+  tomorrow: 'Tomorrow',
+  inAWeek: 'In a week',
+  inAMonth: 'In a month',
+  inAHalfYear: 'In a half-year',
+  inAYear: 'In a year',
+  relativeDates: 'Relative dates',
+  thisWeek: 'This week',
+  lastWeek: 'Last week',
+  thisMonth: 'This month',
+  lastMonth: 'Last month',
+  thisQuarter: 'This quarter',
+  lastQuarter: 'Last quarter',
+  thisYear: 'This year',
+  lastYear: 'Last year',
+  quarter: 'Quarter',
+  areYouSureToDeleteThis: 'Are you sure<br/> to delete this?',
+  noKeepIt: 'No,&nbsp;keep it',
+  yesDelete: 'Yes,&nbsp;delete',
+  pleaseFixTheErrorsBelowToProceed: 'Please fix the errors below to proceed.',
+  thisFieldIsRequired: 'This field is required',
+  theValueMustBeDifferent: 'The value must be different',
+  mustBeLessThanLengthCharacters: 'Must be less than {length} characters',
+  mustBeMoreThanLengthCharacters: 'Must be more than {length} characters',
+  pleaseEnterAValidEmail: 'Please enter a valid email',
+  pleaseEnterValidURL: 'Please enter valid URL',
+  pleaseEnteraValidHex: 'Please enter a valid color code',
+  passwordsDontMatch: 'Passwords don\'t match',
+  thisFieldMustBeANumberFormatZero: 'This field must be a number (format 0.00)',
+  theValueMustBeGreaterThanOrEqualToMinAndMax: 'The value must be greater than or equal to {min} and lower or equal than {max}',
+  theValueMustBeGreaterThanOrEqualToMin: 'The value must be greater than or equal to {min}',
+  mustBeLessThanMax: 'Must be less than {max}',
+  thisIsntABalidDescription: 'This isn\'t a valid description',
+  linksAreNotAllowedInThisField: 'Links are not allowed in this field',
+  theValueMustBeginAndEndWithANumberAndContainOnlyNumbersOrDots: 'The value must begin and end with a number and contain only numbers or dots(.)',
+  pleaseDontUseHTMLMarkup: 'Please don\'t use HTML markup',
+  beforeYouContinueMakeSureYourProfileDoesNotIncludeYourLinkedInContactInformation: 'Before you continue, make sure your profile does not include your LinkedIn contact information',
+  tooManyCapitalLetters: 'Too many capital letters',
+  yourtitleCannotIncludeSpecialCharactersLike: 'Your title cannot include special characters like >, ;, !, @, $, %, ^, =, {, }',
+  pleaseRemoveAnyPhoneNumberFromThisField: 'Please remove any phone number from this field. Potential clients will be able to contact you through Upwork',
+  thisFieldMustContainsDigits: 'This field must contains digits',
+  thedateShouldBeSameOrBefore: 'The date should be same or before {date}',
+  thedateShouldBeSameOrAfter: 'The date should be after {date}',
+  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}',
+  dateAfter: 'The date should be after {date}',
+  dateSameOrBefore: 'The date should be same or before {date}',
+  dateSameOrAfter: 'The date should be same or after {date}',
+  mediumTextLength: 'Text too large, maximum length 16Mb',
+  addMore: 'Add more',
+  close: 'Close'
+};

package/src/locales/uk.js

@@ -0,0 +1,59 @@
+/* eslint-disable comma-dangle */
+export default {
+  today: 'Сьогодні',
+  tomorrow: 'Завтра',
+  inAWeek: 'Через тиждень',
+  inAMonth: 'Через місяць',
+  inAHalfYear: 'Через півроку',
+  inAYear: 'Через рік',
+  relativeDates: 'Відносні дати',
+  thisWeek: 'Поточний тиждень',
+  lastWeek: 'Минулий тиждень',
+  thisMonth: 'Поточний місяць',
+  lastMonth: 'Минулий місяць',
+  thisQuarter: 'Поточний квартал',
+  lastQuarter: 'Минулий квартал',
+  thisYear: 'Поточний рік',
+  lastYear: 'Минулий рік',
+  quarter: 'Квартал',
+  areYouSureToDeleteThis: 'Ви впевнені, що хочете видалити це?',
+  noKeepIt: 'Ні, залишити',
+  yesDelete: 'Так, видалити',
+  pleaseFixTheErrorsBelowToProceed: 'Щоб продовжити, виправте помилки у формі.',
+  thisFieldIsRequired: 'Це поле є обовʼязковим',
+  theValueMustBeDifferent: 'Значення має відрізнятися',
+  mustBeLessThanLengthCharacters: 'Має бути менше ніж {length} символів',
+  mustBeMoreThanLengthCharacters: 'Має бути більше {length} символів',
+  pleaseEnterAValidEmail: 'Будь ласка, введіть дійсну електронну адресу',
+  pleaseEnterValidURL: 'Будь ласка, введіть дійсний URL',
+  pleaseEnteraValidHex: 'Будь ласка, введіть дійсний код кольору',
+  passwordsDontMatch: 'Паролі не збігаються',
+  thisFieldMustBeANumberFormatZero: 'Це поле має містити числом (формат 0.00)',
+  theValueMustBeGreaterThanOrEqualToMinAndMax: 'Значення має бути більше або дорівнювати {min} і менше або дорівнювати {max}',
+  theValueMustBeGreaterThanOrEqualToMin: 'Значення має бути більше або дорівнювати {min}',
+  mustBeLessThanMax: 'Має бути менше ніж {max}',
+  thisIsntABalidDescription: 'Це недійсний опис',
+  linksAreNotAllowedInThisField: 'Посилання заборонені в цьому полі',
+  theValueMustBeginAndEndWithANumberAndContainOnlyNumbersOrDots: 'Значення має починатися і закінчуватися числом і містити лише цифри або крапки(.)',
+  pleaseDontUseHTMLMarkup: 'Будь ласка, не використовуйте розмітку HTML',
+  beforeYouContinueMakeSureYourProfileDoesNotIncludeYourLinkedInContactInformation: 'Перш ніж продовжити, переконайтеся, що ваш профіль не містить вашої контактної інформації LinkedIn',
+  tooManyCapitalLetters: 'Занадто багато великих літер',
+  yourtitleCannotIncludeSpecialCharactersLike: 'Ваша назва не може містити спеціальні символи, такі як >, ;, !, @, $, %, ^, =, {, }',
+  pleaseRemoveAnyPhoneNumberFromThisField: 'Будь ласка, видаліть будь-який номер телефону з цього поля. Потенційні клієнти зможуть звʼязатися з вами через Upwork',
+  thisFieldMustContainsDigits: 'Це поле має містити цифри',
+  thedateShouldBeSameOrBefore: 'Дата має бути такою ж або передувати {date}',
+  thedateShouldBeSameOrAfter: 'Дата має бути після {date}',
+  invalidTimeValueShouldBeInFormat: 'Недійсне значення часу. Має бути у форматі 0d 0h 0m',
+  yourTitleShouldDescribeTheWorkYouDo: 'Ваша назва має описувати роботу, яку ви виконуєте',
+  pleaseEnterValidCommaSeparatedEmailAddressesToSendInvoicing: 'Будь ласка, введіть дійсні адреси електронної пошти, розділені комами (,)',
+  sorrySomethingWentWrongPleaseTryAgainOrContactSupport: 'Вибачте, щось пішло не так. Спробуйте ще раз або зверніться до служби підтримки. Додайте знімок екрана всієї сторінки, щоб ми могли швидше вирішити цю проблему.',
+  noResults: 'Немає результатів',
+  search: 'Пошук',
+  dateBefore: 'Дата має бути раніше {date}',
+  dateAfter: 'Дата має бути після {date}',
+  dateSameOrBefore: 'Дата має бути такою ж або ранішою {date}',
+  dateSameOrAfter: 'Дата має бути такою ж або пізнішою {date}',
+  mediumTextLength: 'Текст завеликий, максимальна довжина 16Mb',
+  addMore: 'Додати ще',
+  close: 'Закрити'
+};