aloha-vue 1.0.74 → 1.0.76

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.47",
+    "aloha-css": "1.0.51",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
     "vue": "3.2.31",

package/docs/src/views/PageTable/PageTable.js

@@ -21,6 +21,7 @@ export default {
           sortId: "aloha",
           locked: true,
           grow: 2,
+          footerSlot: "footerAloha",
         },
         {
           label: "Aloha frei",
@@ -28,18 +29,22 @@ export default {
           path: "aloha",
           sortId: "aloha",
           grow: 0,
+          footerPath: "aloha",
         },
         {
           label: "Hola",
           id: "hola",
           path: "hola",
           sortId: "hola",
+          footerPath: "hola",
         },
         {
           label: "Default",
           id: "default",
           path: "default",
           defaultValue: "-",
+          footerPath: "default",
+          footerDefaultValue: "-",
         },
         {
           label: "Hola2",
@@ -47,6 +52,7 @@ export default {
           path: "hola",
           sortId: "hola",
           hide: true,
+          footerPath: "hola",
         },
         {
           label: "Obj",
@@ -55,27 +61,32 @@ export default {
           sortId: "obj.aloha",
           slot: "get",
           filter: "boolean",
+          footerPath: "obj.aloha",
         },
         {
           label: "Obj2",
           id: "obj2",
           path: "obj.aloha",
           sortId: "obj.aloha",
+          footerPath: "obj.aloha",
         },
         {
           label: "Obj3",
           id: "obj3",
           path: "obj.aloha",
+          footerPath: "obj.aloha",
         },
         {
           label: "Obj4",
           id: "obj4",
           path: "obj.aloha",
+          footerPath: "obj.aloha",
         },
         {
           label: "Geld",
           id: "geld",
           path: "geld",
+          footerPath: "geld",
         },
         {
           label: "Slot",
@@ -90,6 +101,14 @@ export default {
           hide: true,
         },
       ],
+      rowsFooter: [
+        {
+          index: 1,
+        },
+        {
+          index: 2,
+        },
+      ],
       data: [],
       isLoadingOptions: false,
       rowActions: [

package/docs/src/views/PageTable/PageTable.pug

@@ -14,6 +14,7 @@ div
     :is-columns-dnd="true"
     :is-pagination="true"
     :filters="filters"
+    :rows-footer="rowsFooter"
     v-model:modelQuickSearch="modelQuickSearch"
     v-model:modelFilters="modelFilters"
     @change-columns-ordering="changeColumnsOrdering"
@@ -38,6 +39,11 @@ div
     )
       button.a_btn.a_btn_primary Click me
 
+    template(
+      v-slot:footerAloha="{ row, rows }"
+    )
+      strong {{ rows.length }}
+
   span modelQuickSearch: {{ modelQuickSearch }}
   div modelFilters:
   pre {{ modelFilters }}

package/package.json

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

package/src/ATable/ATable.js

@@ -74,10 +74,6 @@ export default {
       required: false,
       default: () => [],
     },
-    hideLabel: {
-      type: Boolean,
-      required: false,
-    },
     id: {
       type: String,
       required: false,
@@ -93,6 +89,11 @@ export default {
       required: false,
       default: true,
     },
+    isLabelVisible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     isLoadingOptions: {
       type: Boolean,
       required: false,
@@ -204,6 +205,11 @@ export default {
       required: false,
       default: () => [],
     },
+    rowsFooter: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     sortingStart: {
       type: String,
       required: false,
@@ -358,6 +364,7 @@ export default {
     provide("previewRightRowIndex", previewRightRowIndex);
     provide("previewRightRowIndexLast", previewRightRowIndexLast);
 
+    provide("rowsLocal", rowsLocal);
     provide("modelColumnsVisibleLocal", modelColumnsVisibleLocal);
     provide("modelColumnsVisibleMapping", modelColumnsVisibleMapping);
     provide("onUpdateModelFilters", onUpdateModelFilters);
@@ -444,6 +451,10 @@ export default {
     isDataArray() {
       return isArray(this.data);
     },
+
+    hasRowsFooter() {
+      return this.rowsFooter.length > 0;
+    },
   },
   created() {
     this.initModelColumnsOrderingLocal();
@@ -556,7 +567,7 @@ export default {
           areSomeRowsSelected: this.areSomeRowsSelected,
           closeMultipleActionsActive: this.closeMultipleActionsActive,
           countAllRows: this.countAllRowsLocal,
-          hideLabel: this.hideLabel,
+          isLabelVisible: this.isLabelVisible,
           label: this.label,
           labelTag: this.labelTag,
           labelClass: this.labelClass,
@@ -600,6 +611,29 @@ export default {
               ...this.$slots,
             });
           })),
+          (this.hasRows && this.hasRowsFooter) && h("div", {
+            class: "a_table__footer",
+            role: "rowgroup",
+          }, this.rowsFooter.map((row, rowIndex) => {
+            return h(ATableTr, {
+              row,
+              rowIndex,
+              selectedRowsIndexes: this.selectedRowsIndexes,
+              onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
+              isFooter: true,
+            }, {
+              get: vm => [
+                h(AGet, {
+                  data: vm.row,
+                  path: vm.column.footerPath,
+                  filter: vm.column.footerFilter,
+                  filterParameters: vm.column.footerFilterParameters,
+                  defaultValue: vm.column.footerDefaultValue,
+                }),
+              ],
+              ...this.$slots,
+            });
+          })),
         ]),
         !this.hasRows && h("div", {
           class: "a_table__empty_text",

package/src/ATable/ATableHeader/ATableHeader.js

@@ -87,6 +87,7 @@ export default {
           style: `width: 50px; min-width: 50px; max-width: 50px;`,
         }, [
           h(AOneCheckbox, {
+            isWidthAuto: true,
             modelValue: this.areAllRowsSelected,
             indeterminate: this.areSomeRowsSelected && !this.areAllRowsSelected,
             "onUpdate:modelValue": this.toggleCheckbox,

package/src/ATable/ATableListItem/ATableListItem.js

@@ -8,6 +8,9 @@ import { get } from "lodash-es";
 
 export default {
   name: "ATableListItem",
+  inject: [
+    "rowsLocal",
+  ],
   props: {
     column: {
       type: Object,
@@ -25,13 +28,27 @@ export default {
       type: Number,
       required: true,
     },
+    isFooter: {
+      type: Boolean,
+      required: false,
+    },
   },
   computed: {
     isSlot() {
-      return !!this.column.slot;
+      return !!this.slot;
+    },
+
+    slot() {
+      if (this.isFooter) {
+        return this.column.footerSlot;
+      }
+      return this.column.slot;
     },
 
     text() {
+      if (this.isFooter) {
+        return get(this.row, this.column.footerPath);
+      }
       return get(this.row, this.column.path);
     },
   },
@@ -45,9 +62,10 @@ export default {
         this.isSlot ?
           this.$slots[this.column.slot]({
             column: this.column,
-            "column-index": this.columnIndex,
+            columnIndex: this.columnIndex,
             row: this.row,
-            "row-index": this.rowIndex,
+            rowIndex: this.rowIndex,
+            rows: this.rowsLocal,
           }) :
           h("span", null, [
             this.text,

package/src/ATable/ATableTd/ATableTd.js

@@ -33,12 +33,17 @@ export default {
       type: Number,
       required: true,
     },
+    isFooter: {
+      type: Boolean,
+      required: false,
+    },
   },
   inject: [
     "columnsDefaultValue",
     "hasPreview",
     "modelColumnsVisibleMapping",
     "onTogglePreview",
+    "rowsLocal",
     "valuesForColumnDefault",
   ],
   setup(props) {
@@ -52,10 +57,16 @@ export default {
   },
   computed: {
     text() {
-      const TEXT = get(this.row, this.column.path);
+      let text;
+      if (this.isFooter) {
+        text = get(this.row, this.column.footerPath);
+      } else {
+        text = get(this.row, this.column.path);
+      }
+
       let isTextInValuesForColumnDefault = false;
       forEach(this.valuesForColumnDefault, item => {
-        if (TEXT === item) {
+        if (text === item) {
           isTextInValuesForColumnDefault = true;
           return false;
         }
@@ -63,10 +74,13 @@ export default {
       if (isTextInValuesForColumnDefault) {
         return this.defaultValue;
       }
-      return TEXT;
+      return text;
     },
 
     defaultValue() {
+      if (this.isFooter && "footerDefaultValue" in this.column) {
+        return this.column.footerDefaultValue;
+      }
       if ("defaultValue" in this.column) {
         return this.column.defaultValue;
       }
@@ -77,11 +91,14 @@ export default {
     },
 
     path() {
+      if (this.isFooter) {
+        return this.column.footerPath;
+      }
       return this.column.path;
     },
 
     isSlot() {
-      return !!this.column.slot;
+      return !!this.slot;
     },
 
     attributesForTd() {
@@ -91,12 +108,12 @@ export default {
           "a_table__td a_table__cell",
           this.column.class,
           {
-            a_table__cell_click: this.hasPreview,
+            a_table__cell_click: this.hasPreview && !this.isFooter,
           },
         ],
         style: this.columnsStyles,
       };
-      if (this.hasPreview) {
+      if (this.hasPreview && !this.isFooter) {
         ATTRIBUTES.onClick = () => this.onTogglePreview({
           row: this.row,
           rowIndex: this.rowIndex,
@@ -130,28 +147,40 @@ export default {
     classForLink() {
       return "a_btn a_btn_link a_p_0";
     },
+
+    slot() {
+      if (this.isFooter) {
+        return this.column.footerSlot;
+      }
+      return this.column.slot;
+    },
   },
   render() {
-    return h("div", this.attributesForTd, this.isSlot ?
-      this.$slots[this.column.slot]({
-        column: this.column,
-        columnIndex: this.columnIndex,
-        row: this.row,
-        rowIndex: this.rowIndex,
-      }) : this.isLink ? [
-        h(resolveComponent("RouterLink"), {
-          class: [this.column.class, this.classForLink],
-          to: this.toLocal,
-        }, () => [
+    return h(
+      "div", 
+      this.attributesForTd,
+      (this.isSlot && this.$slots[this.slot]) ?
+        this.$slots[this.slot]({
+          column: this.column,
+          columnIndex: this.columnIndex,
+          row: this.row,
+          rowIndex: this.rowIndex,
+          rows: this.rowsLocal,
+        }) : this.isLink ? [
+          h(resolveComponent("RouterLink"), {
+            class: [this.column.class, this.classForLink],
+            to: this.toLocal,
+          }, () => [
+            h("span", {
+              innerHTML: this.text,
+            }),
+          ]),
+        ] :
+        [
           h("span", {
             innerHTML: this.text,
           }),
-        ]),
-      ] :
-      [
-        h("span", {
-          innerHTML: this.text,
-        }),
-      ]);
+        ]
+    );
   },
 };

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -26,6 +26,10 @@ export default {
       type: Number,
       required: true,
     },
+    isFooter: {
+      type: Boolean,
+      required: false,
+    },
   },
   inject: [
     "columnActionsWidthLocal",
@@ -86,8 +90,6 @@ export default {
         button: () => [
           h(AIcon, {
             icon: "Plus",
-            width: 14,
-            height: 14,
             class: "a_table__cell_action__additional_icon",
           }),
           h("span", {
@@ -104,6 +106,7 @@ export default {
                 columnIndex,
                 row: this.row,
                 rowIndex: this.rowIndex,
+                isFooter: this.isFooter,
               }, this.$slots);
             }),
           ]),

package/src/ATable/ATableTopPanel/ATableTopPanel.js

@@ -21,7 +21,7 @@ export default {
       type: Number,
       required: true,
     },
-    hideLabel: {
+    isLabelVisible: {
       type: Boolean,
       required: false,
     },
@@ -114,7 +114,7 @@ export default {
     return h("div", {
       class: "a_table__top_panel",
     }, [
-      !this.hideLabel ?
+      !this.isLabelVisible ?
         this.$slots.tableLabel ? this.$slots.tableLabel({
           countAllRows: this.countAllRows,
         }) :

package/src/ATable/ATableTr/ATableTr.js

@@ -21,6 +21,10 @@ export default {
       type: Object,
       required: true,
     },
+    isFooter: {
+      type: Boolean,
+      required: false,
+    },
   },
   emits: [
     "setSelectedRowsIndexes",
@@ -83,7 +87,8 @@ export default {
         class: "a_table__td a_table__cell a_table__cell_checkbox",
         style: `width: 50px; min-width: 50px; max-width: 50px;`,
       }, [
-        h(AOneCheckbox, {
+        !this.isFooter && h(AOneCheckbox, {
+          isWidthAuto: true,
           modelValue: this.isRowSelected,
           "onUpdate:modelValue": this.toggleCheckbox,
         }),
@@ -94,11 +99,13 @@ export default {
           columnIndex,
           row: this.row,
           rowIndex: this.rowIndex,
+          isFooter: this.isFooter,
         }, this.$slots);
       }),
       this.isActionColumnVisible && h(ATableTdAction, {
         row: this.row,
         rowIndex: this.rowIndex,
+        isFooter: this.isFooter,
       }, this.$slots),
     ]);
   },

package/src/ATable/compositionAPI/ColumnAdditionalSpaceAPI.js

@@ -11,16 +11,16 @@ import {
 export default function ColumnAdditionalSpaceAPI(props) {
   const column = toRef(props, "column");
   const columnsVisibleAdditionalSpaceForOneGrow = inject("columnsVisibleAdditionalSpaceForOneGrow", 0);
-  const modelIsTableWithoutScroll = inject("modelIsTableWithoutScroll");
+  // const modelIsTableWithoutScroll = inject("modelIsTableWithoutScroll");
 
   const currentGrow = computed(() => {
     return isNil(column.value.grow) ? 1 : column.value.grow;
   });
 
   const additionalWidthForCurrentColumn = computed(() => {
-    if (!modelIsTableWithoutScroll.value) {
-      return 0;
-    }
+    // if (!modelIsTableWithoutScroll.value) {
+    //   return 0;
+    // }
     return columnsVisibleAdditionalSpaceForOneGrow.value * currentGrow.value;
   });
 

package/src/ATable/compositionAPI/RowActionsAPI.js

@@ -12,8 +12,10 @@ import {
 export default function RowActionsAPI(props) {
   const row = toRef(props, "row");
   const rowIndex = toRef(props, "rowIndex");
+  const isFooter = toRef(props, "isFooter");
   const rowActions = inject("rowActions");
 
+
   const isRowActionVisible = ({ rowAction }) => {
     if (rowAction.isHidden) {
       return false;
@@ -32,7 +34,7 @@ export default function RowActionsAPI(props) {
   });
 
   const isRowActionsDropdownVisible = computed(() => {
-    return rowActionsFiltered.value.length > 0;
+    return !isFooter.value && rowActionsFiltered.value.length > 0;
   });
 
   return {

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -19,9 +19,17 @@ export default function ScrollControlAPI(props, { emit }, {
 }) {
   const columnWidthDefault = toRef(props, "columnWidthDefault");
   const columnActionsWidth = toRef(props, "columnActionsWidth");
+  const isActionColumnVisible = toRef(props, "isActionColumnVisible");
+
+  const columnActionsWidthLocal = computed(() => {
+    if (isActionColumnVisible.value) {
+      return columnActionsWidth.value;
+    }
+    return 0;
+  });
   const columnsSpecialWidth = computed(() => {
     const columnMultipleActionsWidth = isMultipleActionsActive.value ? 50 : 0;
-    return columnMultipleActionsWidth + columnActionsWidth.value;
+    return columnMultipleActionsWidth + columnActionsWidthLocal.value;
   });
 
   const tableWidth = ref(undefined);
@@ -65,9 +73,6 @@ export default function ScrollControlAPI(props, { emit }, {
   };
 
   const checkVisibleColumns = () => {
-    if (!modelIsTableWithoutScroll.value) {
-      return;
-    }
     const TABLE_WIDTH_WITHOUT_ACTIONS = tableWidth.value - columnsSpecialWidth.value;
 
     let columnsWidthInOrder = 0;
@@ -86,21 +91,23 @@ export default function ScrollControlAPI(props, { emit }, {
       indexFirstScrollInvisibleColumnLocal++;
       sumGrows += isNil(column.grow) ? 1 : column.grow;
     });
-    const FREE_SPACE_WIDTH = TABLE_WIDTH_WITHOUT_ACTIONS - columnsWidthInOrder;
+    let freeSpaceWidth = 0;
+    if (modelIsTableWithoutScroll.value) {
+      freeSpaceWidth = TABLE_WIDTH_WITHOUT_ACTIONS - columnsWidthInOrder;
+    } else if (indexFirstScrollInvisibleColumnLocal === columnsOrdered.value.length) {
+      freeSpaceWidth = TABLE_WIDTH_WITHOUT_ACTIONS - columnsWidthInOrder;
+    }
     indexFirstScrollInvisibleColumn.value = indexFirstScrollInvisibleColumnLocal;
 
     setAdditionalSpaceColumnsForOneGrow({
       sumGrows,
-      freeSpaceWidth: FREE_SPACE_WIDTH,
+      freeSpaceWidth,
     });
     setColumnsScrollInvisible();
   };
 
 
   const resizeOb = new ResizeObserver(entries => {
-    if (!modelIsTableWithoutScroll.value) {
-      return;
-    }
     // since we are observing only a single element, so we access the first element in entries array
     const RECT = entries[0].contentRect;
 

package/src/styles/components/ATable.scss

@@ -17,6 +17,7 @@
   --a_table_preview_right_border_color: #f1f4f7;
   --a_table_preview_right_header_bg: #f1f4f7;
   --a_table_preview_right_header_font_size: 1.5rem;
+  --a_table_footer_border_top: 2px solid var(--a_color_gray_800);
 
   width: 100%;
   overflow-x: hidden;
@@ -26,7 +27,7 @@
 }
 .a_table {
   --a_table_bg: transparent;
-  display: table;
+  display: block;
   width: 100%;
   caption-side: bottom;
   border-collapse: collapse;
@@ -70,18 +71,18 @@
   cursor: pointer;
 }
 .a_table__head {
-  display: table-row-group;
-  vertical-align: bottom;
+  display: flex;
+  flex-direction: column;
 }
 .a_table__head_dragstart .a_table__th > * {
   pointer-events: none;
 }
 .a_table__row {
-  display: table-row;
+  display: flex;
 }
 
 .a_table__th {
-  display: table-cell;
+  display: block;
   background-color: var(--a_table_th_bg);
   border-style: solid;
   border-width: var(--a_table_th_border_width);
@@ -98,11 +99,17 @@
 }
 
 .a_table__td {
-  display: table-cell;
+  display: block;
+}
+
+.a_table__body,
+.a_table__footer {
+  display: flex;
+  flex-direction: column;
 }
 
-.a_table__body {
-  display: table-row-group;
+.a_table__footer {
+  border-top: var(--a_table_footer_border_top);
 }
 
 .a_table__th__sort {

package/src/ui/ACheckbox/ACheckboxItem.js

@@ -120,7 +120,8 @@ export default {
           a_custom_control_label_width_auto: this.isWidthAuto,
         }],
       }, [
-        h("span", {
+        this.labelLocal && h("span", {
+          class: "a_custom_control_label__text",
           innerHTML: this.labelLocal,
         }),
       ]),

package/src/ui/AOneCheckbox/AOneCheckbox.js

@@ -130,7 +130,8 @@ export default {
                 a_custom_control_label_width_auto: this.isWidthAuto,
               }],
             }, [
-              h("span", {
+              this.label && h("span", {
+                class: "a_custom_control_label__text",
                 innerHTML: this.label,
               }),
             ]),

package/src/ui/ARadio/ARadioItem.js

@@ -111,7 +111,8 @@ export default {
           a_custom_control_label_width_auto: this.isWidthAuto,
         }],
       }, [
-        h("span", {
+        this.labelLocal && h("span", {
+          class: "a_custom_control_label__text",
           innerHTML: this.labelLocal,
         }),
       ]),