@itfin/components 1.5.1 → 1.5.3

package/src/components/view/View.vue

@@ -4,26 +4,29 @@
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
       search
+      show-filter
       :visible="!noFilters"
       :filters-only="filtersOnly"
       ref="filters"
       :mini="panel.isMultiple()"
       class="py-2 px-3"
+      :static-filters="filters"
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
       @loaded="onFilterSet($event, true)"
       @change="onFilterSet($event, false)"
+      @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
-        <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
+        <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
-            <itf-icon new name="table-view" />
+            <itf-icon new name="table-config" />
           </template>
           <div class="dropdown-header">
             {{ $t('components.table.columns') }}
           </div>
-          <a v-for="(property, n) of schema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
+          <a v-for="(property, n) of tableSchema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
             <div class="d-flex align-items-center gap-1">
               <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
               {{getTitle(property.title)}}
@@ -42,64 +45,105 @@
             </div>
           </a>
         </itf-dropdown>
-      </template>
-    </itf-filter-panel>
+        <itf-dropdown v-if="downloadEndpoint" shadow append-to-context :button-options="{ default: true, small: true }" class="h-100" autoclose="outside">
+          <template #button>
+            <itf-icon name="download"/>
+            {{ $t('export') }}
+          </template>
+          <a v-for="(item, n) in getDownloadLinks()" target="_blank" :key="n" :href="item.link" class="dropdown-item">
+            {{item.title}}
+          </a>
+        </itf-dropdown>
+
+        <slot name="before-tabs"></slot>
 
-    <div class="flex-grow-1 px-3 d-flex flex-column">
-      <div class="position-relative flex-grow-1">
-        <itf-table
-          ref="table"
-          style="--shadow-area-width: 0px;"
-          absolute
-          striped
-          clickable
-          column-sorting
-          column-resizing
-          :indicator-type="indicatorType"
-          class="permanent-checkboxes"
-          divider-property="hasDivider"
-          subrows-property="children"
-          :state-name="stateName"
-          id-property="id"
-          :rows="preparedItems"
-          :schema="schema"
-          :sorting="sorting"
-          :active="activeIds"
-          :show-actions="showActions"
-          :expanded-ids.sync="expandedIds"
-          v-model="selectedIds"
-          @row-click="$emit('open', $event)"
-          @update:sorting="updateSorting($event)"
+        <itf-segmented-control
+          v-if="tabs.length > 1"
+          class="small"
+          v-model="currentTab"
+          item-key="value"
+          :items="tabs"
         >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}"/>
-          </template>
-          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}"/>
+          <template #item="{ item }">
+            <div class="d-flex align-items-center">
+              <itf-icon class="text-muted" new :name="item.icon" />
+              {{item.text}}
+            </div>
           </template>
-        </itf-table>
+        </itf-segmented-control>
+      </template>
+    </itf-filter-panel>
+
+    <div v-if="currentTab === 'list'" class="position-relative flex-grow-1">
+      <div class="position-absolute" style="top: 0; left: 0; right: 0; bottom: 0;     overflow: auto;">
+      <slot name="list-view" :items="items" :loading="loading"></slot>
       </div>
     </div>
+    <slot v-else-if="currentTab === 'board'" name="kanban-view"></slot>
+    <slot v-else-if="currentTab === 'calendar'" name="calendar-view"></slot>
+    <slot v-else name="table-view">
+      <div class="flex-grow-1 px-3 d-flex flex-column">
+        <div class="position-relative flex-grow-1">
+          <itf-table
+            ref="table"
+            style="--shadow-area-width: 0px;"
+            absolute
+            striped
+            clickable
+            column-sorting
+            column-resizing
+            :indicator-type="indicatorType"
+            class="permanent-checkboxes"
+            :state-name="stateName"
+            id-property="id"
+            divider-property="hasDivider"
+            subrows-property="children"
+            :sort-as-string="sortAsString"
+            :rows="preparedItems"
+            :group-by="groupBy"
+            :schema="tableSchema"
+            :sorting="sorting"
+            :active="activeIds"
+            :expanded-ids.sync="expandedIds"
+            :no-select-all="noSelectAll"
+            :show-actions="showActions"
+            :indicator-width="indicatorWidth"
+            v-model="selectedIds"
+            @row-click="$emit('open', $event)"
+            @update:sorting="updateSorting($event)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}"/>
+            </template>
+            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}"/>
+            </template>
+          </itf-table>
+        </div>
+      </div>
+    </slot>
 
     <itf-pagination
       class="my-2 px-3"
+      v-if="showPagination"
       show-size
       :size="size"
       :items="preparedItems"
       :pages="countPages"
       :value="page"
+      :totalCount="showTotalCount ? total : null"
       @input="updatePage($event)"
       @per-page="updateSizePerPage($event)"
     >
       <template #center>
-        <slot name="pagination-center" />
+        <slot name="pagination-center" :totals="totals" />
       </template>
     </itf-pagination>
   </div>
 
 </template>
 <script>
-import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
+import {Vue, ModelSync, Component, Prop, Inject, PropSync, Watch} from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -107,11 +151,16 @@ import itfPagination from '../pagination/Pagination2.vue';
 import itfTableBody from "../table/TableBody.vue";
 import itfIcon from "../icon/Icon.vue";
 import itfDropdown from "../dropdown/Dropdown.vue";
+import itfSegmentedControl from '../segmented-control/SegmentedControl.vue';
+import itfButton from '@itfin/components/src/components/button/Button.vue';
 
 export default @Component({
   name: 'itfView',
   components: {
-    itfDropdown, itfIcon,
+    itfButton,
+    itfSegmentedControl,
+    itfDropdown,
+    itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -129,21 +178,34 @@ class itfView extends Vue {
   @Prop({ type: Boolean }) filtersOnly;
   @Prop({ type: Boolean }) noFilters;
   @Prop({ type: Array }) filters;
-  @Prop({ type: Object, required: true }) schema;
-  // @Prop({ default: 20 }) size;
-  // @Prop({ default: 1 }) page;
+  @Prop({ type: Object }) schema;
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
+  @Prop({ type: String, default: null }) groupBy;
+  @Prop({ type: String, default: null }) downloadEndpoint; // префікс апі для завантаження
+  @Prop({ type: String, default: 'totals' }) totalsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
+  @Prop({ type: String, default: 'list' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
   @Prop() hardFilter; // встановлює жорсткий фільтр, наприклад, треба завжди показувати лише по контрагенту
   @Prop(Boolean) showActions;
+  @Prop({ type: Boolean, default: true }) showPagination;
+  @Prop(Boolean) listViewEnabled;
+  @Prop(Boolean) kanbanViewEnabled;
+  @Prop(Boolean) calendarViewEnabled;
+  @Prop(Boolean) noSelectAll;
+  @Prop({ type: Boolean, default: true }) tableViewEnabled;
+  @Prop(Boolean) sortAsString;
+  @Prop(Boolean) oldFormat;
   @Prop({ type: Array, default: () => [] }) disabledIds;
+  @Prop({ default: 45 }) indicatorWidth;
+  @Prop({type: Function, default: null }) onSplitSlectedIds  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
+  @Prop({ type: Boolean, default: false }) showTotalCount;
 
   page = 1;
   total = 0;
@@ -153,6 +215,8 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
+  tableColumns = null;
+  totals = null;
   expandedIds = [];
 
   get preparedItems() {
@@ -160,6 +224,73 @@ class itfView extends Vue {
     return this.items.map(item => ({ ...item, isDisabled: disabledIdsSet.has(item.id) }));
   }
 
+  @Watch('selectedIds', { deep: true, immediate: true })
+  updateSelectedIds() {
+    if(this.onSplitSlectedIds && this.items.length && this.selectedIds.length) {
+      this.onSplitSlectedIds(this.selectedIds, this.items);
+    }
+  }
+
+  getDownloadLinks() {
+    const state = this.$refs.table ? this.$refs.table.getTableState() : null;
+    const filter = { ...this.filter };
+    const sorting = this.sorting;
+    const filterableColumnsNames = (state?.columns ?? []).filter(column => column.visible).map(column => column.property);
+
+    const filterWithValue = Object.fromEntries(Object.entries(filter).filter(([_, value]) => typeof value !== 'undefined'));
+    const params = {
+      ...filterWithValue,
+      sort: sorting
+    };
+    if (filterableColumnsNames.length) {
+      params.columns = filterableColumnsNames.join(',')
+    }
+    const xlsQueryParams = new URLSearchParams({ ...params, format: 'xlsx' }).toString();
+    const csvQueryParams = new URLSearchParams({ ...params, format: 'csv' }).toString();
+    return [
+      { title: 'Excel (xlsx)', link: `${this.downloadEndpoint}?${xlsQueryParams}` },
+      { title: 'Plain text (csv)', link: `${this.downloadEndpoint}?${csvQueryParams}` },
+    ];
+  }
+
+  get currentTab() {
+    return this.tab;
+  }
+
+  set currentTab(val) {
+    this.$emit('update:tab', val);
+    this.setPanelPayload({ tab: val });
+  }
+
+  get tabs() {
+    const views = [];
+    if (this.listViewEnabled) {
+      views.push({ value: 'list', text: this.$t('list'), icon: 'list-view' });
+    }
+    if (this.kanbanViewEnabled) {
+      views.push({ value: 'board', text: this.$t('board'), icon: 'kanban-view' });
+    }
+    if (this.calendarViewEnabled) {
+      views.push({ value: 'calendar', text: this.$t('calendar'), icon: 'calendar-view' });
+    }
+    if (this.tableViewEnabled) {
+      views.push({ value: 'table', text: this.$t('table'), icon: 'table-view' });
+    }
+    return views;
+  }
+
+  get tableSchema() {
+    if (this.tableColumns) {
+      return {
+        properties: this.tableColumns
+      }
+    } else if (this.schema) {
+      return this.schema
+    } else {
+      return {}
+    }
+  }
+
   created() {
     const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
 
@@ -189,29 +320,42 @@ class itfView extends Vue {
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      const res = await this.$axios.$get(this.endpoint, {
+      let filter = { ...this.filter };
+      if (this.oldFormat) {
+        filter = Object.keys(filter).reduce((acc, key) => {
+          acc[`filter[${key}]`] = filter[key];
+          return acc;
+        }, {})
+      }
+      this.selectedIds = [];
+      const { data, headers } = await this.$axios.get(this.endpoint, {
         preventRaceCondition: true,
         params: {
-          ...Object.assign(this.filter ?? {}, this.hardFilter ?? {}),
+          ...filter,
           page: this.page,
           size: this.size,
           sort: this.sorting
         }
       });
-      this.selectedIds = [];
-      this.items = res[this.itemsKey];
-      this.page = res.meta.page;
-      this.total = res.meta.total;
-      this.size = res.meta.size;
-      if (res.columns) {
-        this.$emit('columns-loaded', res.columns);
+      if (this.oldFormat) {
+        this.items = data;
+        this.page = Number(headers['x-page'] ?? 1);
+        this.total = Number(headers['x-count'] ?? 0);
+        this.size = Number(headers['x-size'] ?? 20);
+      } else {
+        this.items = data[this.itemsKey];
+        this.totals = data[this.totalsKey];
+        this.page = data.meta.page;
+        this.total = data.meta.total;
+        this.size = data.meta.size;
       }
-
-      this.$emit('update:items', this.items);
-      this.loadingData = false;
-    }, () => {
-      this.loadingData = false;
     });
+    if (res.columns) {
+      this.$emit('columns-loaded', res.columns);
+    }
+
+    this.$emit('update:items', this.items);
+    this.loadingData = false;
     this.$emit('loaded', this.filter);
   }
 
@@ -241,6 +385,7 @@ class itfView extends Vue {
   updateSizePerPage (val) {
     this.page = 1;
     this.size = val;
+    this.selectedIds = [];
     this.setPanelPayload({ page: null, size: val });
     this.loadData();
     localStorage.setItem('sizePerPage', val);
@@ -277,10 +422,26 @@ class itfView extends Vue {
     this.loadData();
   }
 
+  setTableSchema(tableSchema) {
+    this.tableColumns = tableSchema;
+  }
+
+  getSorting() {
+    return this.sorting;
+  }
+
   loadFilters() {
     if (this.filtersEndpoint) {
       this.$refs.filters?.loadData();
     }
   }
+
+  getFilter() {
+    return this.filter;
+  }
+
+  getTableState() {
+    return this.$refs.table ? this.$refs.table.getTableState() : null;
+  }
 }
 </script>

package/src/helpers/validators.js

@@ -8,12 +8,12 @@ const LINKED_IN_REGEXP = /(http(s)?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profi
 const SPECIAL_CHARS_REGEXP = /^[\w_\-+~,/\\:'"().&*|[\]?# ]+$/i;
 const GREETINGS_REGEXP = /\b(dr|mr|mister|mrs|ms|miss|sir|hello|hi)\b/i;
 const PHONE_REGEXP = /(\+?\(?\+?[0-9]{1,3}\)?[-. ]+([0-9]{2,4})[-. ]?([0-9]{3,5}))|\+?[0-9]{7,}/gi;
-const INTEGER_REGEXP = /^-?\d{0,11}$/;
 const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,8}){0,1}$/;
-const EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
+const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
 const EMAIL_LIST_REGEXP = /^(\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,4}\s*?,?\s*?)+$/g;
 const HEX_REGEXP = /[0-9A-Fa-f]{6}/;
-const PASSWORD_REGEX = /^(?=.*\p{Lu})(?=.*\p{Ll})(?=.*\d)(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]).{8,}$/u;
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_MAX_LENGTH = 50;
 
 const STANDART_DATE_FORMAT = 'yyyy-MM-dd';
 
@@ -67,10 +67,6 @@ export function emptyArrayValidation (message) {
   return (v, $t = (s) => s) => (Array.isArray(v) && v.length > 0) || (message || $t('components.thisFieldIsRequired'));
 }
 
-export function integerValidation (message) {
-  return (v, $t = (s) => s) => !v || !!(v + '').match(INTEGER_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
-}
-
 export function doubleValidation (message) {
   return (v, $t = (s) => s) => !v || !!(v + '').match(DOUBLE_REGEXP) || (message || $t('components.thisFieldMustBeANumberFormatZero'));
 }
@@ -188,8 +184,38 @@ export function dateSameOrBeforeValidation (dateCompare, message) {
   };
 }
 
-export function passwordValidation(message) {
+export function hasUppercaseValidation(message) {
+  return (v, $t) => {
+    return !isEmpty(v) && /\p{Lu}/u.test(v + '') || (message || $t('components.atLeastOneUppercaseLetterRequired'));
+  };
+}
+
+export function hasLowercaseValidation(message) {
+  return (v, $t) => {
+    return !isEmpty(v) && /\p{Ll}/u.test(v + '') || (message || $t('components.atLeastOneLowercaseLetterRequired'));
+  };
+}
+
+export function hasDigitValidation(message) {
+  return (v, $t) => {
+    return !isEmpty(v) && /\d/.test(v + '') || (message || $t('components.atLeastOneNumberRequired'));
+  };
+}
+
+export function hasSpecialCharValidation(message) {
   return (v, $t) => {
-    return !isEmpty(v) && PASSWORD_REGEX.test(v.trim() + '') || (message || $t('components.passwordValidation'));
+    return !isEmpty(v) && /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(v + '') || (message || $t('components.atLeastOneSpecialCharacterRequired'));
   };
 }
+
+export function accountPasswordValidation(message) {
+  return [
+    emptyValidation(message),
+    minLengthValidation(PASSWORD_MIN_LENGTH, message),
+    lengthValidation(PASSWORD_MAX_LENGTH, message),
+    hasUppercaseValidation(message),
+    hasLowercaseValidation(message),
+    hasDigitValidation(message),
+    hasSpecialCharValidation(message),
+  ];
+}

package/src/helpers/validators.spec.js

@@ -7,7 +7,10 @@ import {
   dateAfterValidation,
   dateSameOrAfterValidation,
   dateSameOrBeforeValidation,
-  passwordValidation,
+  hasUppercaseValidation,
+  hasLowercaseValidation,
+  hasDigitValidation,
+  hasSpecialCharValidation,
 } from './validators';
 
 describe('Validators', () => {
@@ -83,16 +86,50 @@ describe('Validators', () => {
     expect(mediumTextValidation()('0'.repeat(16777216), $t)).toEqual('components.mediumTextLength');
   });
 
+  test('hasUppercaseValidation', () => {
+    expect(hasUppercaseValidation()('', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
+    expect(hasUppercaseValidation()(' ', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
+    expect(hasUppercaseValidation()(null, $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
+    expect(hasUppercaseValidation()(undefined, $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
+    expect(hasUppercaseValidation()('A', $t)).toEqual(true);
+    expect(hasUppercaseValidation()(' Test ', $t)).toEqual(true);
+    expect(hasUppercaseValidation()(' test ', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
+    expect(hasUppercaseValidation()(' Тест ', $t)).toEqual(true);
+    expect(hasUppercaseValidation()(' тест ', $t)).toEqual('components.atLeastOneUppercaseLetterRequired');
+    expect(hasUppercaseValidation()(' ТЕСТ ', $t)).toEqual(true);
+  });
+
+  test('hasLowercaseValidation', () => {
+    expect(hasLowercaseValidation()('', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
+    expect(hasLowercaseValidation()(' ', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
+    expect(hasLowercaseValidation()(null, $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
+    expect(hasLowercaseValidation()(undefined, $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
+    expect(hasLowercaseValidation()('a', $t)).toEqual(true);
+    expect(hasLowercaseValidation()(' test ', $t)).toEqual(true);
+    expect(hasLowercaseValidation()('A', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
+    expect(hasLowercaseValidation()(' Test ', $t)).toEqual(true);
+    expect(hasLowercaseValidation()(' Тест ', $t)).toEqual(true);
+    expect(hasLowercaseValidation()(' тест ', $t)).toEqual(true);
+    expect(hasLowercaseValidation()(' ТЕСТ ', $t)).toEqual('components.atLeastOneLowercaseLetterRequired');
+  })
+
+  test('hasDigitValidation', () => {
+    expect(hasDigitValidation()('', $t)).toEqual('components.atLeastOneNumberRequired');
+    expect(hasDigitValidation()(' ', $t)).toEqual('components.atLeastOneNumberRequired');
+    expect(hasDigitValidation()(null, $t)).toEqual('components.atLeastOneNumberRequired');
+    expect(hasDigitValidation()(undefined, $t)).toEqual('components.atLeastOneNumberRequired');
+    expect(hasDigitValidation()('1', $t)).toEqual(true);
+    expect(hasDigitValidation()(' 1 ', $t)).toEqual(true);
+    expect(hasDigitValidation()('a', $t)).toEqual('components.atLeastOneNumberRequired');
+  });
 
-  test('passwordValidation', () => {
-    expect(passwordValidation()('', $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(' ', $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(null, $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(undefined, $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(' тесттест ', $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(' ТЕСТТЕСТ ', $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(' ТестТест ', $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(' ТестТест1 ', $t)).toEqual('components.passwordValidation');
-    expect(passwordValidation()(' ТестТест1@ ', $t)).toEqual(true);
+  test('hasSpecialCharValidation', () => {
+    expect(hasSpecialCharValidation()('', $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
+    expect(hasSpecialCharValidation()(' ', $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
+    expect(hasSpecialCharValidation()(null, $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
+    expect(hasSpecialCharValidation()(undefined, $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
+    expect(hasSpecialCharValidation()('@', $t)).toEqual(true);
+    expect(hasSpecialCharValidation()(' @ ', $t)).toEqual(true);
+    expect(hasSpecialCharValidation()('a', $t)).toEqual('components.atLeastOneSpecialCharacterRequired');
   });
 });

package/src/locales/en.js

@@ -56,6 +56,11 @@ module.exports = {
   addMore: 'Add more',
   close: 'Close',
   wholeYear: 'Whole year',
+  atLeastOneUppercaseLetterRequired: 'At least one uppercase letter is required',
+  atLeastOneLowercaseLetterRequired: 'At least one lowercase letter is required',
+  atLeastOneNumberRequired: 'At least one number is required',
+  atLeastOneSpecialCharacterRequired: 'At least one special character is required (e.g. @,$,!,%,*,?,&)',
+  dropzoneText: 'Click or drag file to upload',
 
   select: {
     loading: 'Loading...',
@@ -99,7 +104,7 @@ module.exports = {
     copyingToClipboardWasSuccessful: 'Copying to clipboard was successful',
   },
   table: {
-    new: 'New',
+    new: 'New row',
     noResults: 'No items',
     sortAscending: 'Sort ascending',
     sortDescending: 'Sort descending',
@@ -133,7 +138,7 @@ module.exports = {
     cancelSelected: 'Cancel',
   },
   pagination: {
-    itemsPerPage: 'Items per page',
+    itemsPerPage: 'On the page',
     previous: 'Previous',
     next: 'Next'
   },
@@ -155,4 +160,5 @@ module.exports = {
   },
   passwordValidation: 'Password should contain at least 8 characters, including uppercase letters, lowercase letters, numbers, and special characters (e.g. @, $, !, %, *, ?, &)',
   iveGotIt: 'I\'ve got it',
+  totalItems: 'Total',
 };

package/src/locales/pl.js

@@ -133,7 +133,7 @@ module.exports = {
     cancelSelected: 'Anuluj zaznaczenie',
   },
   pagination: {
-    itemsPerPage: 'Elementów na stronę',
+    itemsPerPage: 'Na stronie',
     previous: 'Poprzednia',
     next: 'Następna',
   },
@@ -155,4 +155,5 @@ module.exports = {
   },
   passwordValidation: 'Hasło powinno zawierać co najmniej 8 znaków, w tym wielkie i małe litery, cyfry oraz znaki specjalne (np. @, $, !, %, *, ?, &)',
   iveGotIt: 'Rozumiem',
+  totalItems: 'Całkowity',
 };

package/src/locales/uk.js

@@ -28,8 +28,7 @@ module.exports = {
   pleaseEnterValidURL: 'Будь ласка, введіть дійсний URL',
   pleaseEnteraValidHex: 'Будь ласка, введіть дійсний код кольору',
   passwordsDontMatch: 'Паролі не збігаються',
-  thisFieldMustBeAIntegerFormatZero: 'Це поле має містити число',
-  thisFieldMustBeANumberFormatZero: 'Це поле має містити число (формат 0.00)',
+  thisFieldMustBeANumberFormatZero: 'Це поле має містити числом (формат 0.00)',
   theValueMustBeGreaterThanOrEqualToMinAndMax: 'Значення має бути більше або дорівнювати {min} і менше або дорівнювати {max}',
   theValueMustBeGreaterThanOrEqualToMin: 'Значення має бути більше або дорівнювати {min}',
   mustBeLessThanMax: 'Має бути менше ніж {max}',
@@ -57,6 +56,10 @@ module.exports = {
   addMore: 'Додати ще',
   close: 'Закрити',
   wholeYear: 'Весь рік',
+  atLeastOneUppercaseLetterRequired: 'Має бути принаймні одна велика літера',
+  atLeastOneLowercaseLetterRequired: 'Має бути принаймні одна мала літера',
+  atLeastOneNumberRequired: 'Має бути принаймні одна цифра',
+  atLeastOneSpecialCharacterRequired: 'Має бути принаймні один спеціальний символ (@,$,!,%,*,?,&)',
 
   select: {
     loading: 'Завантаження...',
@@ -105,7 +108,7 @@ module.exports = {
     next: 'Наступна',
   },
   table: {
-    new: 'Додати',
+    new: 'Додати рядок',
     noResults: 'Немає записів',
     sortAscending: 'Сортувати за зростанням',
     sortDescending: 'Сортувати за спаданням',
@@ -153,7 +156,5 @@ module.exports = {
     from: 'Від',
     to: 'До',
     value: 'Значення',
-  },
-  passwordValidation: 'Пароль має містити принаймні 8 символів, включаючи великі літери, малі літери, цифри та спеціальні символи (@, $, !, %, *, ?, &)',
-  iveGotIt: 'Зрозуміло',
+  }
 };