aloha-vue 1.0.0

package/src/ATable/ATableCountProPage/ATableCountProPage.js

@@ -0,0 +1,56 @@
+import ATranslation from "../../ATranslation/ATranslation";
+
+import {
+  h,
+} from "vue";
+
+export default {
+  name: "ATableCountProPage",
+  components: {
+    ATranslation,
+  },
+  props: {
+    countsPerPage: {
+      type: Array,
+      required: false,
+      default: () => ["10", "25", "50", "100"],
+    },
+    limit: {
+      type: Number,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: ["update:limit"],
+  methods: {
+    emitValue(e) {
+      if (this.isLoading) {
+        return;
+      }
+      const VALUE = e.target.value;
+      this.$emit("update:limit", +VALUE);
+    },
+  },
+  render() {
+    return h("div", null, [
+      h(ATranslation, {
+        tag: "select",
+        value: this.limit,
+        "aria-label": "_ITEMS_PER_PAGE_",
+        disabled: this.isLoading,
+        onInput: this.emitValue,
+      }, {
+        default: () => this.countsPerPage.map(count => {
+          return h("option", {
+            value: count,
+          }, [
+            count,
+          ]);
+        }),
+      }),
+    ]);
+  },
+};

package/src/ATable/ATableHeader/ATableHeader.js

@@ -0,0 +1,45 @@
+import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
+
+import {
+  h,
+} from "vue";
+
+export default {
+  name: "ATableHeader",
+  components: {
+    ATableHeaderTh,
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    modelSort: {
+      type: String,
+      required: false,
+    },
+    modelColumnsMapping: {
+      type: Object,
+      required: true,
+    },
+  },
+  render() {
+    return h("thead", null, [
+      h("tr", null, [
+        this.columns.map(column => {
+          return h(ATableHeaderTh, {
+            column: column,
+            "is-loading": this.isLoading,
+            "model-sort": this.modelSort,
+            "model-columns-mapping": this.modelColumnsMapping,
+            "onChange-model-sort": this.$attrs["onChange-model-sort"],
+          });
+        }),
+      ]),
+    ]);
+  },
+};

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -0,0 +1,147 @@
+import AIcon from "../../AIcon/AIcon";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import {
+  h,
+} from "vue";
+
+export default {
+  name: "ATableHeaderTh",
+  components: {
+    AIcon,
+    ATranslation,
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    modelSort: {
+      type: String,
+      required: false,
+    },
+    modelColumnsMapping: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: [
+    "change-model-sort",
+  ],
+  computed: {
+    isVisible() {
+      return this.modelColumnsMapping[this.column.id];
+    },
+
+    attributesForTh() {
+      const ATTRIBUTES = {
+        ...this.ariaSort,
+        scope: "col",
+      };
+      if (!this.isVisible) {
+        ATTRIBUTES.style = {
+          display: "none",
+        };
+      }
+      return ATTRIBUTES;
+    },
+
+    ariaSort() {
+      if (this.isSortable) {
+        let ariaSort = "none";
+        if (this.isSortAscending) {
+          ariaSort = "ascending";
+        } else if (this.isSortDescending) {
+          ariaSort = "descending";
+        }
+        return {
+          "aria-sort": ariaSort,
+        };
+      }
+      return {};
+    },
+
+    sortId() {
+      return this.column.sortId;
+    },
+
+    isSortAscending() {
+      return this.modelSort === this.sortId;
+    },
+
+    isSortDescending() {
+      return this.modelSort === `-${ this.sortId }`;
+    },
+
+    componentLocal() {
+      if (this.isSortable) {
+        return "button";
+      }
+      return "span";
+    },
+
+    isSortable() {
+      return !!this.sortId;
+    },
+
+    attributesForButton() {
+      if (this.isSortable) {
+        return {
+          type: "button",
+          disabled: this.isLoading,
+          onClick: this.changeModelSortLocal,
+        };
+      }
+    },
+
+    iconsSortable() {
+      const ICONS = [];
+      if (this.isSortable) {
+        if (!this.isSortAscending) {
+          ICONS.push(this.iconSortDescending);
+        }
+        if (!this.isSortDescending) {
+          ICONS.push(this.iconSortAscending);
+        }
+      }
+      return ICONS;
+    },
+
+    iconSortDescending() {
+      return h(AIcon, {
+        icon: "ChevronUp",
+      });
+    },
+
+    iconSortAscending() {
+      return h(AIcon, {
+        icon: "ChevronDown",
+      });
+    },
+  },
+  methods: {
+    changeModelSortLocal() {
+      if (this.isLoading) {
+        return;
+      }
+      this.$emit("change-model-sort", {
+        sortId: this.sortId,
+      });
+    },
+  },
+  render() {
+    return h("th", this.attributesForTh, [
+      h(this.componentLocal, this.attributesForButton, [
+        h(ATranslation, {
+          text: this.column.label,
+          tag: "span",
+        }),
+        ...this.iconsSortable,
+      ]),
+    ]);
+  },
+};

package/src/ATable/ATablePagination/ATablePagination.js

@@ -0,0 +1,208 @@
+import AIcon from "../../AIcon/AIcon";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import {
+  h,
+} from "vue";
+import {
+  ceil,
+} from "lodash-es";
+
+export default {
+  name: "ATablePagination",
+  components: {
+    AIcon,
+    ATranslation,
+  },
+  props: {
+    totalRowsCount: {
+      type: Number,
+      required: true,
+    },
+    offset: {
+      type: Number,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: [
+    "update:offset",
+  ],
+  data() {
+    return {
+      countMaxItems: 5, // should odd be
+      maxItem: undefined,
+    };
+  },
+  computed: {
+    paginationItems() {
+      const PAGINATION_ITEMS = [];
+      let currentItemIndex = -1;
+      for (let i = this.countMaxItems - 1; i > -this.countMaxItems; i--) {
+        const NUMBER = this.currentItem - i;
+        if (NUMBER > 0 && NUMBER <= this.maxItems) {
+          PAGINATION_ITEMS.push(NUMBER);
+        }
+        if (i === 0) {
+          currentItemIndex = PAGINATION_ITEMS.length - 1;
+        }
+      }
+
+      const {
+        indexStart,
+        indexEnd,
+      } = this.getIndexStartAndEndForPagination({
+        currentItemIndex,
+        paginationLength: PAGINATION_ITEMS.length
+      });
+      return PAGINATION_ITEMS.slice(indexStart, indexEnd);
+    },
+
+    currentItem() {
+      return (this.offset / this.limit >> 0) + 1;
+    },
+
+    maxItems() {
+      return ceil(this.totalRowsCount / this.limit);
+    },
+
+    disabledButtonFirstPage() {
+      return this.isLoading || this.currentItem === 1;
+    },
+
+    disabledButtonLastPage() {
+      return this.isLoading || this.currentItem === this.maxItems;
+    },
+  },
+  methods: {
+    getIndexStartAndEndForPagination({ currentItemIndex, paginationLength }) {
+      let indexStart = -1;
+      let indexEnd = paginationLength + 1;
+      const MIN_INDEX = Math.floor(this.countMaxItems / 2);
+      const MAX_INDEX = (this.countMaxItems * 2 - 1);
+      if (currentItemIndex <= MIN_INDEX) {
+        indexStart = 0;
+        indexEnd = this.countMaxItems;
+      } else if (currentItemIndex >= (MAX_INDEX - (MIN_INDEX + 1))) {
+        indexStart = MAX_INDEX - this.countMaxItems;
+        indexEnd = MAX_INDEX;
+      } else {
+        indexStart = currentItemIndex - MIN_INDEX;
+        indexEnd = currentItemIndex + MIN_INDEX + 1;
+      }
+
+      if (indexEnd > paginationLength) {
+        const DIFF = indexEnd - paginationLength;
+        indexEnd = paginationLength + 1;
+        indexStart = indexStart - DIFF;
+        if (indexStart < 0) {
+          indexStart = 0;
+        }
+      }
+
+      return {
+        indexStart,
+        indexEnd,
+      };
+    },
+
+    updateOffset(item) {
+      if (this.isLoading || item === this.currentItem) {
+        return;
+      }
+      const OFFSET = (item - 1) * this.limit;
+      this.$emit("update:offset", OFFSET);
+    },
+
+    updateOffsetFirst() {
+      if (this.disabledButtonFirstPage) {
+        return;
+      }
+      this.$emit("update:offset", 0);
+    },
+
+    updateOffsetLast() {
+      if (this.disabledButtonLastPage) {
+        return;
+      }
+      this.$emit("update:offset", (this.maxItems - 1) * this.limit);
+    },
+  },
+  render() {
+    return h(ATranslation, {
+      tag: "nav",
+      role: "navigation",
+      "aria-label": "_PAGINATION_NAVIGATION_",
+    }, {
+      default: () => {
+        return [
+          h("ul", {
+            class: "pagination",
+          }, [
+            h("li", {
+              class: ["page-item", { disabled: this.disabledButtonFirstPage }]
+            }, [
+              h(ATranslation, {
+                tag: "a",
+                class: "page-link",
+                role: "button",
+                tabindex: 0,
+                "aria-label": "_PREVIOUS_",
+                onClick: this.updateOffsetFirst,
+              }, {
+                default: () => [
+                  h("span", {
+                    "aria-hidden": "true",
+                  }, [
+                    "«",
+                  ]),
+                ],
+              }),
+            ]),
+            this.paginationItems.map(item => {
+              return h("li", {
+                class: ["page-item", { active: item === this.currentItem }],
+              }, [
+                h("a", {
+                  class: "page-link",
+                  role: "button",
+                  tabindex: 0,
+                  onClick: () => this.updateOffset(item),
+                }, [
+                  item,
+                ]),
+              ]);
+            }),
+            h("li", {
+              class: ["page-item", { disabled: this.disabledButtonLastPage }]
+            }, [
+              h(ATranslation, {
+                tag: "a",
+                class: "page-link",
+                role: "button",
+                tabindex: 0,
+                "aria-label": "_NEXT_",
+                onClick: this.updateOffsetLast,
+              }, {
+                default: () => [
+                  h("span", {
+                    "aria-hidden": "true",
+                  }, [
+                    "»",
+                  ]),
+                ],
+              }),
+            ]),
+          ]),
+        ];
+      },
+    });
+  },
+};

package/src/ATable/ATableTd/ATableTd.js

@@ -0,0 +1,73 @@
+import {
+  h,
+} from "vue";
+import {
+  get,
+} from "lodash-es";
+
+export default {
+  name: "ATableTd",
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+    columnIndex: {
+      type: Number,
+      required: true,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+    modelColumnsMapping: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    text() {
+      return get(this.row, this.column.path);
+    },
+
+    path() {
+      return this.column.path;
+    },
+
+    isSlot() {
+      return !!this.column.slot;
+    },
+
+    attributesForTd() {
+      const ATTRIBUTES = {};
+      if (!this.isVisible) {
+        ATTRIBUTES.style = {
+          display: "none",
+        };
+      }
+      return ATTRIBUTES;
+    },
+
+    isVisible() {
+      return this.modelColumnsMapping[this.column.id];
+    },
+  },
+  render() {
+    return h("td", this.attributesForTd, this.isSlot ?
+      this.$slots[this.column.slot]({
+        column: this.column,
+        "column-index": this.columnIndex,
+        row: this.row,
+        "row-index": this.rowIndex,
+      }) :
+      [
+        h("span", null, [
+          this.text,
+        ])
+      ]);
+  },
+};

package/src/ATable/ATableTopPanel/ATableTopPanel.js

@@ -0,0 +1,72 @@
+import ATranslation from "../../ATranslation/ATranslation";
+
+import {
+  h,
+} from "vue";
+import {
+  cloneDeep,
+} from "lodash-es";
+
+
+export default {
+  name: "ATableTopPanel",
+  components: {
+    ATranslation,
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    modelColumns: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: [
+    "update:model-columns",
+  ],
+  methods: {
+    changeModelColumns(columnId) {
+      const MODEL_COLUMNS = cloneDeep(this.modelColumns);
+      const INDEX = MODEL_COLUMNS.indexOf(columnId);
+      if (INDEX !== -1) {
+        MODEL_COLUMNS.splice(INDEX, 1);
+      } else {
+        MODEL_COLUMNS.push(columnId);
+      }
+      this.$emit("update:model-columns", MODEL_COLUMNS);
+    },
+  },
+  render() {
+    return h("div", {
+      class: "a_table__top_panel",
+    }, [
+      h("div", {
+        class: "text-end",
+      }, [
+        h("div", {
+          class: "btn-group",
+        }, this.columns.map(column => {
+          // TODO: ASelect
+          return h("button", {
+            type: "button",
+            class: this.modelColumns.indexOf(column.id) !== -1 ?
+              "btn btn-secondary" :
+              "btn btn-outline-secondary",
+            onClick: () => this.changeModelColumns(column.id),
+          }, [
+            h(ATranslation, {
+              text: column.label,
+              tag: "span",
+            }),
+          ]);
+        })),
+      ]),
+    ]);
+  },
+};

package/src/ATable/ATableTr/ATableTr.js

@@ -0,0 +1,45 @@
+import ATableTd from "../ATableTd/ATableTd";
+
+import {
+  h,
+} from "vue";
+
+export default {
+  name: "ATableTr",
+  components: {
+    ATableTd,
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    modelColumnsMapping: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+    rowIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  render() {
+    return h("tr", null, this.columns.map((column, columnIndex) => {
+      return h(ATableTd, {
+        column,
+        columnIndex,
+        row: this.row,
+        rowIndex: this.rowIndex,
+        modelColumnsMapping: this.modelColumnsMapping,
+      }, this.$slots);
+    }));
+  },
+};