aloha-vue 2.45.0 → 2.45.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.45.0",
+  "version": "2.45.2",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

package/scss/components/APagination.scss

@@ -65,6 +65,7 @@
   font-size: var(--a_pagination_font_size);
   background-color: var(--a_pagination_link_bg);
   border: var(--a_pagination_link_border_width) solid var(--a_pagination_link_border_color);
+  height: 100%;
 }
 .a_pagination__item__link {
   position: relative;
@@ -77,6 +78,7 @@
   border: var(--a_pagination_link_border_width) solid var(--a_pagination_link_border_color);
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   cursor: pointer;
+  height: 100%;
   .a_pagination__item:first-child & {
     border-top-left-radius: var(--a_pagination_link_border_radius);
     border-bottom-left-radius: var(--a_pagination_link_border_radius);

package/src/APagination/APagination.js

@@ -2,7 +2,6 @@ import {
   h,
 } from "vue";
 
-import AMobileAPI from "../compositionAPI/AMobileAPI";
 import ComponentsAPI from "./compositionAPI/ComponentsAPI";
 import EmitsAPI from "./compositionAPI/EmitsAPI";
 
@@ -41,27 +40,14 @@ export default {
          * perPage: inline / group / select
          * pagination: normal / short / loadMore
          */
-        desktop: {
-          perPage: {
-            mode: "group",
-            position: 0,
-            showTextCountFromTo: true,
-          },
-          pagination: {
-            mode: "normal",
-            position: 1,
-          },
+        perPage: {
+          mode: "group",
+          position: 0,
+          showTextCountFromTo: true,
         },
-        mobile: {
-          perPage: {
-            mode: "select",
-            position: 0,
-            showTextCountFromTo: false,
-          },
-          pagination: {
-            mode: "short",
-            position: 1,
-          },
+        pagination: {
+          mode: "normal",
+          position: 1,
         },
       }),
     },
@@ -73,6 +59,22 @@ export default {
       type: Number,
       required: true,
     },
+    texts: {
+      type: Object,
+      required: false,
+      default: () => ({
+        pagesFirstPage: "_A_PAGINATION_FIRST_PAGE_",
+        pagesLastPage: "_A_PAGINATION_LAST_PAGE_",
+        pagesMobile: "_A_PAGINATION_MOBILE_{{currentPage}}_{{allPages}}_",
+        pagesNavigation: "_A_PAGINATION_NAVIGATION_",
+        pagesNextPage: "_A_PAGINATION_NEXT_PAGE_",
+        pagesPreviousPage: "_A_PAGINATION_PREVIOUS_PAGE_",
+        pagesToPage: "_A_PAGINATION_TO_PAGE_{{page}}_",
+        countFromTo: "_A_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_",
+        countPerPage: "_A_COUNT_PER_PAGE_",
+        countPerPageItem: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
+      }),
+    },
     totalCount: {
       type: Number,
       required: true,
@@ -83,10 +85,6 @@ export default {
     "update:offset",
   ],
   setup(props, context) {
-    const {
-      isMobileWidth: isMobile,
-    } = AMobileAPI();
-
     const {
       updateLimit,
       updateOffset,
@@ -95,7 +93,6 @@ export default {
     const {
       components,
     } = ComponentsAPI(props, {
-      isMobile,
       updateLimit,
       updateOffset,
     });

package/src/APagination/APaginationCountPerPage/APaginationCountPerPage.js

@@ -8,6 +8,7 @@ import ATranslation from "../../ATranslation/ATranslation";
 
 import LimitAPI from "./compositionAPI/LimitAPI";
 import MainAPI from "./compositionAPI/MainAPI";
+import TextsAPI from "./compositionAPI/TextsAPI";
 
 export default {
   name: "APaginationCountPerPage",
@@ -48,6 +49,15 @@ export default {
       required: false,
       default: true,
     },
+    texts: {
+      type: Object,
+      required: false,
+      default: () => ({
+        countFromTo: "_A_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_",
+        countPerPage: "_A_COUNT_PER_PAGE_",
+        countPerPageItem: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
+      }),
+    },
   },
   emits: [
     "update:limit",
@@ -64,12 +74,27 @@ export default {
       extraForTranslate,
     } = MainAPI(props);
 
+    const {
+      getTextCountPerPageItem,
+      isTextCountPerPageItemFunction,
+      textCountFromTo,
+      textCountPerPage,
+      textCountPerPageItem,
+    } = TextsAPI(props, {
+      extraForTranslate,
+    });
+
     return {
       changeLimit,
       changeLimitFromSelect,
       extraForTranslate,
+      getTextCountPerPageItem,
+      isTextCountPerPageItemFunction,
       keyDownChangeLimit,
       limitString,
+      textCountFromTo,
+      textCountPerPage,
+      textCountPerPageItem,
     };
   },
   render() {
@@ -80,14 +105,14 @@ export default {
         this.showTextCountFromTo ?
           h(ATranslation, {
             class: "a_pagination__count_from_to",
-            html: "_A_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_",
+            html: this.textCountFromTo,
             extra: this.extraForTranslate,
           }) :
           "",
         h(ATranslation, {
           tag: "span",
           class: "a_pagination__count__text",
-          html: "_A_COUNT_PER_PAGE_",
+          html: this.textCountPerPage,
         }),
         this.mode === "inline" ?
           h("div", {
@@ -95,6 +120,9 @@ export default {
           }, [
             this.limitsPerPage.map(count => {
               const IS_ACTIVE = +count === this.limit;
+              const TITLE = this.isTextCountPerPageItemFunction ?
+                this.getTextCountPerPageItem({ count }) :
+                this.textCountPerPageItem;
 
               return h("div", {
                 class: "a_pagination__count__item",
@@ -108,8 +136,8 @@ export default {
                   },
                   text: count,
                   textAriaHidden: true,
-                  textScreenReader: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
-                  title: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
+                  textScreenReader: TITLE,
+                  title: TITLE,
                   type: "button",
                   onClick: () => this.changeLimit(count),
                 }),
@@ -121,6 +149,9 @@ export default {
           }, [
             this.limitsPerPage.map(count => {
               const IS_ACTIVE = +count === this.limit;
+              const TITLE = this.isTextCountPerPageItemFunction ?
+                this.getTextCountPerPageItem({ count }) :
+                this.textCountPerPageItem;
 
               return h("li", {
                 class: [
@@ -143,8 +174,8 @@ export default {
                   tag: "a",
                   text: count,
                   textAriaHidden: true,
-                  textScreenReader: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
-                  title: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
+                  textScreenReader: TITLE,
+                  title: TITLE,
                   type: "button",
                   onClick: () => this.changeLimit(count),
                   onKeydown: $event => this.keyDownChangeLimit($event, count),
@@ -157,12 +188,12 @@ export default {
         this.showTextCountFromTo ?
           h(ATranslation, {
             class: "a_pagination__count_from_to",
-            html: "_A_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_",
+            html: this.textCountFromTo,
             extra: this.extraForTranslate,
           }) :
           "",
         h(ASelect, {
-          label: "_A_COUNT_PER_PAGE_",
+          label: this.textCountPerPage,
           labelClass: "a_sr_only",
           data: this.limitsPerPage,
           isDataSimpleArray: true,

package/src/APagination/APaginationCountPerPage/compositionAPI/TextsAPI.js

@@ -0,0 +1,54 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  isFunction,
+} from "lodash-es";
+
+export default function TextsAPI(props, {
+  extraForTranslate = computed(() => ({})),
+}) {
+  const texts = toRef(props, "texts");
+
+  const textCountFromTo = computed(() => {
+    if (isFunction(texts.value.countFromTo)) {
+      return texts.value.countFromTo({
+        start: extraForTranslate.value.start,
+        current: extraForTranslate.value.current,
+        count: extraForTranslate.value.count,
+      });
+    }
+
+    return texts.value.countFromTo || "_A_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_";
+  });
+
+  const textCountPerPage = computed(() => {
+    return texts.value.countPerPage || "_A_COUNT_PER_PAGE_";
+  });
+
+  const isTextCountPerPageItemFunction = computed(() => {
+    return isFunction(texts.value.countPerPageItem);
+  });
+
+  const textCountPerPageItem = computed(() => {
+    return texts.value.countPerPageItem || "_A_COUNT_PER_PAGE_ITEM_{{count}}_";
+  });
+
+  const getTextCountPerPageItem = ({ count }) => {
+    if (isTextCountPerPageItemFunction.value) {
+      return texts.value.countPerPageItem({ count });
+    }
+
+    return undefined;
+  };
+
+  return {
+    getTextCountPerPageItem,
+    isTextCountPerPageItemFunction,
+    textCountFromTo,
+    textCountPerPage,
+    textCountPerPageItem,
+  };
+}

package/src/APagination/compositionAPI/ComponentsAPI.js

@@ -1,7 +1,6 @@
 import {
   computed,
   h,
-  ref,
   toRef,
 } from "vue";
 
@@ -16,51 +15,22 @@ import {
 } from "lodash-es";
 
 export default function ComponentsAPI(props, {
-  isMobile = ref(false),
   updateLimit = () => {},
   updateOffset = () => {},
 }) {
-  const modes = toRef(props, "modes");
-  const totalCount = toRef(props, "totalCount");
   const disabled = toRef(props, "disabled");
-  const limitsPerPage = toRef(props, "limitsPerPage");
   const limit = toRef(props, "limit");
+  const limitsPerPage = toRef(props, "limitsPerPage");
+  const maxPages = toRef(props, "maxPages");
+  const modes = toRef(props, "modes");
   const offset = toRef(props, "offset");
   const rowsLength = toRef(props, "rowsLength");
-  const maxPages = toRef(props, "maxPages");
-
-  const currentMode = computed(() => {
-    if (isMobile.value) {
-      return modes.value.mobile ||
-        {
-          perPage: {
-            mode: "select",
-            position: 0,
-            showTextCountFromTo: false,
-          },
-          pagination: {
-            mode: "short",
-            position: 1,
-          },
-        };
-    }
-    return modes.value.desktop ||
-      {
-        perPage: {
-          mode: "inline",
-          position: 0,
-          showTextCountFromTo: true,
-        },
-        pagination: {
-          mode: "normal",
-          position: 1,
-        },
-      };
-  });
+  const texts = toRef(props, "texts");
+  const totalCount = toRef(props, "totalCount");
 
   const currentModeSorted = computed(() => {
     const LIST = [];
-    forEach(currentMode.value, (item, component) => {
+    forEach(modes.value, (item, component) => {
       LIST.push({
         ...item,
         component,
@@ -75,24 +45,26 @@ export default function ComponentsAPI(props, {
     forEach(currentModeSorted.value, item => {
       if (item.component === "perPage") {
         LIST.push(h(APaginationCountPerPage, {
-          totalCount: totalCount.value,
           disabled: disabled.value,
-          limitsPerPage: limitsPerPage.value,
           limit: limit.value,
+          limitsPerPage: limitsPerPage.value,
+          mode: item.mode,
           offset: offset.value,
           rowsLength: rowsLength.value,
-          mode: item.mode,
           showTextCountFromTo: item.showTextCountFromTo,
+          texts: texts.value,
+          totalCount: totalCount.value,
           "onUpdate:limit": updateLimit,
         }));
       } else if (item.component === "pagination") {
         LIST.push(h(APaginationPages, {
-          totalCount: totalCount.value,
           disabled: disabled.value,
           limit: limit.value,
+          maxPages: maxPages.value,
           mode: item.mode,
           offset: offset.value,
-          maxPages: maxPages.value,
+          texts: texts.value,
+          totalCount: totalCount.value,
           "onUpdate:offset": updateOffset,
         }));
       }