aloha-vue 1.0.281 → 1.0.283

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.281",
+  "version": "1.0.283",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/ATable/ATable.js

@@ -144,7 +144,12 @@ export default {
     sortingSequenceNumberClass: {
       type: [String, Object],
       required: false,
-      default: "a_badge a_pill_rounded",
+      default: "a_badge",
+    },
+    showFirstSortingSequenceNumber: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
     sortingMultiColumnKey: {
       type: String,
@@ -293,6 +298,14 @@ export default {
       required: false,
       default: 0,
     },
+    perPageView: {
+      type: Object,
+      required: false,
+      default: () => ({
+        desktop: "inline",
+        mobile: "select",
+      }),
+    },
   },
   emits: [
     "changeColumnsOrdering",
@@ -718,6 +731,7 @@ export default {
               modelSort: this.modelSortLocal,
               isSortingMultiColumn: this.isSortingMultiColumn,
               sortingSequenceNumberClass: this.sortingSequenceNumberClass,
+              showFirstSortingSequenceNumber: this.showFirstSortingSequenceNumber,
               onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
             }),
             h("div", {
@@ -795,6 +809,8 @@ export default {
               offset: this.offset,
               rowsLength: this.rowsLocal.length,
               hasRows: this.hasRows,
+              perPageView: this.perPageView,
+              isMobile: this.isMobile,
               "onUpdate:limit": this.changeLimit,
             }),
             h(ATablePagination, {

package/src/ATable/ATableCountProPage/ATableCountProPage.js

@@ -2,117 +2,127 @@ import {
   h,
 } from "vue";
 
+import AButton from "../../AButton/AButton";
+import ASelect from "../../ui/ASelect/ASelect";
 import ATranslation from "../../ATranslation/ATranslation";
 
-import AFiltersAPI from "../../compositionAPI/AFiltersAPI";
-
+import LimitAPI from "./compositionAPI/LimitAPI";
+import MainAPI from "./compositionAPI/MainAPI";
+import ViewAPI from "./compositionAPI/ViewAPI";
 
 export default {
   name: "ATableCountProPage",
-  components: {
-    ATranslation,
-  },
   props: {
     countAllRows: {
       type: Number,
       required: true,
     },
-    limitsPerPage: {
-      type: Array,
+    hasRows: {
+      type: Boolean,
       required: true,
     },
+    isLoadingTable: {
+      type: Boolean,
+      required: true,
+    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+    },
     limit: {
       type: Number,
       required: true,
     },
-    isLoadingTable: {
-      type: Boolean,
+    limitsPerPage: {
+      type: Array,
       required: true,
     },
     offset: {
       type: Number,
       required: true,
     },
-    rowsLength: {
-      type: Number,
+    perPageView: {
+      type: Object,
       required: true,
     },
-    hasRows: {
-      type: Boolean,
+    rowsLength: {
+      type: Number,
       required: true,
     },
   },
   emits: ["update:limit"],
-  setup() {
+  setup(props, context) {
     const {
-      filterCurrency,
-    } = AFiltersAPI();
-
-    return {
-      filterCurrency,
-    };
-  },
-  computed: {
-    extraForTranslate() {
-      return {
-        start: this.startFormatted,
-        current: this.currentFormatted,
-        count: this.countFormatted,
-      };
-    },
-
-    startFormatted() {
-      return this.filterCurrency(+this.offset + 1, { suffix: "", digits: 0 });
-    },
+      changeLimit,
+      changeLimitFromSelect,
+      limitString,
+    } = LimitAPI(props, context);
 
-    currentFormatted() {
-      return this.filterCurrency(+this.offset + this.rowsLength, { suffix: "", digits: 0 });
-    },
+    const {
+      extraForTranslate,
+    } = MainAPI(props);
 
-    countFormatted() {
-      return this.filterCurrency(this.countAllRows, { suffix: "", digits: 0 });
-    },
+    const {
+      currentView,
+    } = ViewAPI(props);
 
-    countText() {
-      return `${ this.startFormatted } - ${ this.currentFormatted } von ${ this.countFormatted }`;
-    },
-  },
-  methods: {
-    changeLimit(limit) {
-      if (this.isLoadingTable) {
-        return;
-      }
-      this.$emit("update:limit", +limit);
-    },
+    return {
+      changeLimit,
+      changeLimitFromSelect,
+      currentView,
+      extraForTranslate,
+      limitString,
+    };
   },
   render() {
     if (this.hasRows) {
       return h("div", {
         class: "a_pagination__counts",
-      }, [
-        h("span", {
-          class: "a_pagination__count_from_to"
-        }, this.countText),
-        h("span", {
-          class: "a_pagination__count__text"
-        }, "Pro Seite:"),
-        h("div", {
-          class: "a_pagination__count",
-        }, [
-          this.limitsPerPage.map(count => {
-            return h("div", {
-              class: "a_pagination__count__item",
-            }, [
-              h("button", {
-                type: "button",
-                class: "a_btn a_btn_link a_pagination__count__button",
-                disabled: +count === this.limit || this.isLoadingTable,
-                onClick: () => this.changeLimit(count),
-              }, count),
-            ]);
+      }, this.currentView === "inline" ?
+        [
+          h(ATranslation, {
+            class: "a_pagination__count_from_to",
+            html: "_TABLE_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_",
+            extra: this.extraForTranslate,
+          }),
+          h(ATranslation, {
+            tag: "span",
+            class: "a_pagination__count__text",
+            html: "_TABLE_PER_PAGE_",
+          }),
+          h("div", {
+            class: "a_pagination__count",
+          }, [
+            this.limitsPerPage.map(count => {
+              return h("div", {
+                class: "a_pagination__count__item",
+              }, [
+                h(AButton, {
+                  type: "button",
+                  class: "a_btn a_btn_link a_pagination__count__button",
+                  disabled: +count === this.limit || this.isLoadingTable,
+                  text: count,
+                  onClick: () => this.changeLimit(count),
+                }),
+              ]);
+            }),
+          ]),
+        ] :
+        [
+          h(ATranslation, {
+            class: "a_pagination__count_from_to",
+            html: "_TABLE_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_",
+            extra: this.extraForTranslate,
+          }),
+          h(ASelect, {
+            label: "_TABLE_PER_PAGE_",
+            data: this.limitsPerPage,
+            isDataSimpleArray: true,
+            isDeselect: false,
+            modelValue: this.limitString,
+            change: this.changeLimitFromSelect
           }),
-        ]),
-      ]);
+        ]);
     }
     return "";
   },

package/src/ATable/ATableCountProPage/compositionAPI/LimitAPI.js

@@ -0,0 +1,30 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function LimitAPI(props, { emit }) {
+  const isLoadingTable = toRef(props, "isLoadingTable");
+  const limit = toRef(props, "limit");
+
+  const limitString = computed(() => {
+    return `${ limit.value }`;
+  });
+
+  const changeLimit = limit => {
+    if (isLoadingTable.value) {
+      return;
+    }
+    emit("update:limit", +limit);
+  };
+
+  const changeLimitFromSelect = ({ model }) => {
+    changeLimit(model);
+  };
+
+  return {
+    changeLimit,
+    changeLimitFromSelect,
+    limitString,
+  };
+}

package/src/ATable/ATableCountProPage/compositionAPI/MainAPI.js

@@ -0,0 +1,40 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import AFiltersAPI from "../../../compositionAPI/AFiltersAPI";
+
+export default function MainAPI(props) {
+  const offset = toRef(props, "offset");
+  const rowsLength = toRef(props, "rowsLength");
+  const countAllRows = toRef(props, "countAllRows");
+
+  const {
+    filterCurrency,
+  } = AFiltersAPI();
+
+  const startFormatted = computed(() => {
+    return filterCurrency(+offset.value + 1, { suffix: "", digits: 0 });
+  });
+
+  const currentFormatted = computed(() => {
+    return filterCurrency(+offset.value + rowsLength.value, { suffix: "", digits: 0 });
+  });
+
+  const countFormatted = computed(() => {
+    return filterCurrency(countAllRows.value, { suffix: "", digits: 0 });
+  });
+
+  const extraForTranslate = computed(() => {
+    return {
+      start: startFormatted.value,
+      current: currentFormatted.value,
+      count: countFormatted.value,
+    };
+  });
+
+  return {
+    extraForTranslate,
+  };
+}

package/src/ATable/ATableCountProPage/compositionAPI/ViewAPI.js

@@ -0,0 +1,20 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ViewAPI(props) {
+  const perPageView = toRef(props, "perPageView");
+  const isMobile = toRef(props, "isMobile");
+
+  const currentView = computed(() => {
+    if (isMobile.value) {
+      return perPageView.value.mobile || "select";
+    }
+    return perPageView.value.desktop || "inline";
+  });
+
+  return {
+    currentView,
+  };
+}

package/src/ATable/ATableHeader/ATableHeader.js

@@ -32,6 +32,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    isSortingMultiColumn: {
+      type: Boolean,
+      required: false,
+    },
     modelSort: {
       type: Array,
       required: true,
@@ -40,12 +44,12 @@ export default {
       type: Number,
       required: true,
     },
-    sortingSequenceNumberClass: {
-      type: [String, Object],
+    showFirstSortingSequenceNumber: {
+      type: Boolean,
       required: false,
     },
-    isSortingMultiColumn: {
-      type: Boolean,
+    sortingSequenceNumberClass: {
+      type: [String, Object],
       required: false,
     },
   },
@@ -141,6 +145,7 @@ export default {
             modelSort: this.modelSort,
             sortingSequenceNumberClass: this.sortingSequenceNumberClass,
             isSortingMultiColumn: this.isSortingMultiColumn,
+            showFirstSortingSequenceNumber: this.showFirstSortingSequenceNumber,
             onDragstartParent: this.dragstart,
             onDragenterParent: this.dragenter,
             onDragleaveParent: this.dragleave,

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -30,16 +30,20 @@ export default {
       required: false,
       default: -1,
     },
+    isSortingMultiColumn: {
+      type: Boolean,
+      required: false,
+    },
     modelSort: {
       type: Array,
       required: false,
     },
-    sortingSequenceNumberClass: {
-      type: [String, Object],
+    showFirstSortingSequenceNumber: {
+      type: Boolean,
       required: false,
     },
-    isSortingMultiColumn: {
-      type: Boolean,
+    sortingSequenceNumberClass: {
+      type: [String, Object],
       required: false,
     },
   },

package/src/ATable/ATableHeaderTh/compositionAPI/SortAPI.js

@@ -10,6 +10,7 @@ export default function SortAPI(props) {
   const column = toRef(props, "column");
   const isSortingMultiColumn = toRef(props, "isSortingMultiColumn");
   const modelSort = toRef(props, "modelSort");
+  const showFirstSortingSequenceNumber = toRef(props, "showFirstSortingSequenceNumber");
 
   const changeModelSort = inject("changeModelSort");
   const isLoadingTable = inject("isLoadingTable");
@@ -120,6 +121,10 @@ export default function SortAPI(props) {
       !isSorting.value) {
       return undefined;
     }
+    if (modelSort.value.length <= 1 &&
+      !showFirstSortingSequenceNumber.value) {
+      return undefined;
+    }
     if (modelSortIndexAscending.value !== -1) {
       return modelSortIndexAscending.value + 1;
     }

package/src/i18n/de.json

@@ -8,11 +8,13 @@
   "_PREVIOUS_": "Vorherige",
   "_REMOVE_FIELD_CONTENT_": "Feldinhalt entfernen",
   "_SELECT_TEXT_EMPTY_": "[Keine Auswahl]",
+  "_TABLE_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_": "{{ start }} - {{ current }} von {{ count }}",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Alle Zeilen abwählen ({{ countAllRows }})",
   "_TABLE_DESELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Alle ausgewählten Zeilen abwählen",
   "_TABLE_DESELECT_THIS_ROW_": "Die Zeile abwählen",
   "_TABLE_MULTIPLE_CANCEL_": "Mehrfachaktion abbrechen",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "{{ countSelectedRows }} von {{ countAllRows }} ausgewählt",
+  "_TABLE_PER_PAGE_": "Pro Seite:",
   "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Alle Zeilen auswählen ({{ countAllRows }})",
   "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Alle sichtbaren, relevanten Zeilen auswählen",
   "_TABLE_SELECT_THIS_ROW_": "Die Zeile auswählen",

package/src/i18n/en.json

@@ -8,11 +8,13 @@
   "_PREVIOUS_": "Previous",
   "_REMOVE_FIELD_CONTENT_": "Remove field content",
   "_SELECT_TEXT_EMPTY_": "[No selection]",
+  "_TABLE_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_": "{{ start }} - {{ current }} of {{ count }}",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Deselect all rows ({{ countAllRows }})",
   "_TABLE_DESELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Deselect all selected rows",
   "_TABLE_DESELECT_THIS_ROW_": "Deselect row",
   "_TABLE_MULTIPLE_CANCEL_": "Cancel multiple action",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "{{ countSelectedRows }} of {{ countAllRows }} selected",
+  "_TABLE_PER_PAGE_": "Per page:",
   "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Select all rows ({{ countAllRows }})",
   "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Select all visible, possible rows",
   "_TABLE_SELECT_THIS_ROW_": "Select this row",

package/src/i18n/hr.json

@@ -8,11 +8,13 @@
   "_PREVIOUS_": "Prethodni",
   "_REMOVE_FIELD_CONTENT_": "Izbrišite sadržaj polja",
   "_SELECT_TEXT_EMPTY_": "[Bez odabira]",
+  "_TABLE_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_": "{{ start }} - {{ current }} od {{ count }}",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Poništite odabir svih redaka ({{ countAllRows }})",
   "_TABLE_DESELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Poništi odabir svih odabranih redaka",
   "_TABLE_DESELECT_THIS_ROW_": "Poništite odabir retka",
   "_TABLE_MULTIPLE_CANCEL_": "Otkaži višestruku radnju",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "{{ countSelectedRows }} od {{ countAllRows }} odabrana",
+  "_TABLE_PER_PAGE_": "Po stranici:",
   "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Odaberite svih redaka ({{ countAllRows }})",
   "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Odaberite sve vidljive, moguće retke",
   "_TABLE_SELECT_THIS_ROW_": "Odaberite ovu liniju",

package/src/i18n/ru.json

@@ -8,11 +8,13 @@
   "_PREVIOUS_": "Предыдущий",
   "_REMOVE_FIELD_CONTENT_": "Удалить содержимое поля",
   "_SELECT_TEXT_EMPTY_": "[Нет элементов]",
+  "_TABLE_COUNT_PER_PAGE_{{start}}_{{current}}_{{count}}_": "{{ start }} - {{ current }} из {{ count }}",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Отменить выбор всех строк ({{ countAllRows }})",
   "_TABLE_DESELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Отменить выбор всех выбранных строк",
   "_TABLE_DESELECT_THIS_ROW_": "Отменить выбор строки",
   "_TABLE_MULTIPLE_CANCEL_": "Отменить",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "выбрано {{ countSelectedRows }} из {{ countAllRows }}",
+  "_TABLE_PER_PAGE_": "На странице:",
   "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Выделить все строки  ({{ countAllRows }})",
   "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Выбрать все видимые, возможные строки",
   "_TABLE_SELECT_THIS_ROW_": "Выбрать эту строку",

package/src/styles/components/ATable.scss

@@ -441,6 +441,10 @@
 .a_pagination__counts {
   display: flex;
   flex: 20;
+  align-items: center;
+  .ui_select {
+    --a_select_min_width: 100px;
+  }
 }
 .a_pagination__count_from_to {
   margin-right: 1rem;

package/src/styles/components/ui/ASelect.scss

@@ -10,7 +10,7 @@
 
 .a_select_toggle {
   position: relative;
-  min-width: 200px;
+  min-width: var(--a_select_min_width);
   text-align: left;
 }
 .a_select_toggle_closeable {