aloha-vue 1.2.156 → 1.2.158

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

@@ -68,6 +68,10 @@ export default {
       data.value = DATA;
     };
 
+    const disableRowPreview = ({ row }) => {
+      return row.id === 2 || row.id === 4;
+    };
+
     setData();
 
     return {
@@ -75,6 +79,7 @@ export default {
       codeJs,
       columns,
       data,
+      disableRowPreview,
     };
   },
 };

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

@@ -11,6 +11,7 @@ aloha-example(
       label="_A_TABLE_GROUP_SIMPLE_LABEL_"
       key-id="id"
       preview="right"
+      :disabled-preview-row-callback="disableRowPreview"
     )
       template(
         v-slot:preview="vm"

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.156",
+  "version": "1.2.158",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATable/ATable.js

@@ -115,6 +115,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    disabledPreviewRowCallback: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
     disabledRowActions: {
       type: Boolean,
       required: false,
@@ -135,6 +140,7 @@ export default {
     hasScrollClass: {
       type: Boolean,
       required: false,
+      default: true,
     },
     id: {
       type: String,
@@ -839,6 +845,7 @@ export default {
           class: [
             "a_table",
             {
+              a_table_simple: this.isSimpleTable,
               a_table_bordered: this.borderType === "bordered",
               a_table_inner_bordered: this.borderType === "innerBordered",
             },
@@ -894,6 +901,7 @@ export default {
                     areAllRowsSelected: this.areAllRowsSelected,
                     countVisibleMobileColumns: this.countVisibleMobileColumns,
                     disabledPreview: this.disabledPreview,
+                    disabledPreviewRowCallback: this.disabledPreviewRowCallback,
                     disabledRowActions: this.disabledRowActions,
                     isFooter: false,
                     isPreviewDownOpen: this.previewDownRowIndexes[rowIndex],
@@ -933,6 +941,7 @@ export default {
                   areAllRowsSelected: this.areAllRowsSelected,
                   countVisibleMobileColumns: this.countVisibleMobileColumns,
                   disabledPreview: this.disabledPreview,
+                  disabledPreviewRowCallback: this.disabledPreviewRowCallback,
                   disabledRowActions: this.disabledRowActions,
                   isFooter: true,
                   isRowActionsStickyLocal: this.isRowActionsStickyLocal,

package/src/ATable/ATableTd/compositionAPI/AttributesAPI.js

@@ -8,6 +8,7 @@ import ColumnStylesAPI from "../../compositionAPI/ColumnStylesAPI";
 
 export default function AttributesAPI(props) {
   const column = toRef(props, "column");
+  const disabledPreview = toRef(props, "disabledPreview");
   const isFooter = toRef(props, "isFooter");
 
   const hasPreview = inject("hasPreview");
@@ -22,7 +23,7 @@ export default function AttributesAPI(props) {
       class: [
         "a_table__td a_table__cell",
         {
-          a_table__cell_click: hasPreview.value && !isFooter.value,
+          a_table__cell_click: hasPreview.value && !isFooter.value && !disabledPreview.value,
         },
         column.value.classRowParent,
       ],

package/src/ATable/ATableTr/ATableTr.js

@@ -38,6 +38,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    disabledPreviewRowCallback: {
+      type: Function,
+      required: false,
+    },
     disabledRowActions: {
       type: Boolean,
       required: false,
@@ -133,6 +137,7 @@ export default {
     });
 
     const {
+      disabledPreviewRow,
       eventsLocal,
       roleLocal,
       rowClassComputed,
@@ -166,6 +171,7 @@ export default {
       ariaTreeAttributes,
       children,
       countInvisibleMobileColumns,
+      disabledPreviewRow,
       eventsLocal,
       hasChildren,
       isAllColumnsVisibleMobile,
@@ -202,7 +208,7 @@ export default {
             key: column.id,
             column,
             columnIndex,
-            disabledPreview: this.disabledPreview,
+            disabledPreview: this.disabledPreviewRow,
             row: this.row,
             rowIndex: this.rowIndex,
             isFooter: this.isFooter,
@@ -215,7 +221,7 @@ export default {
           key: column.id,
           column,
           columnIndex,
-          disabledPreview: this.disabledPreview,
+          disabledPreview: this.disabledPreviewRow,
           row: this.row,
           rowIndex: this.rowIndex,
           isFooter: this.isFooter,
@@ -294,7 +300,7 @@ export default {
             allVisibleMobileColumns: this.allVisibleMobileColumns,
             areAllRowsSelected: this.areAllRowsSelected,
             countVisibleMobileColumns: this.countVisibleMobileColumns,
-            disabledPreview: this.disabledPreview,
+            disabledPreview: this.disabledPreviewRow,
             disabledRowActions: this.disabledRowActions,
             isFooter: this.isFooter,
             isOneOfParentsClose: this.isOneOfParentsCloseForChildren,

package/src/ATable/ATableTr/compositionAPI/AttributesAPI.js

@@ -21,6 +21,7 @@ export default function AttributesAPI(props, {
   toggleChildren = () => {},
 }) {
   const disabledPreview = toRef(props, "disabledPreview");
+  const disabledPreviewRowCallback = toRef(props, "disabledPreviewRowCallback");
   const isFooter = toRef(props, "isFooter");
   const row = toRef(props, "row");
   const rowClass = toRef(props, "rowClass");
@@ -59,6 +60,10 @@ export default function AttributesAPI(props, {
     return isMobile.value ? "listitem" : "row";
   });
 
+  const disabledPreviewRow = computed(() => {
+    return disabledPreview.value || disabledPreviewRowCallback.value({ row: row.value, rowIndex: rowIndex.value });
+  });
+
   const onClickRow = $event => {
     if (isClickTags({
       $event,
@@ -75,9 +80,6 @@ export default function AttributesAPI(props, {
     if (hasChildren.value) {
       toggleChildren();
     } else if (hasPreviewLocal.value) {
-      if (disabledPreview.value) {
-        return;
-      }
       onTogglePreview({
         row: row.value,
         rowIndex: rowIndex.value,
@@ -92,7 +94,7 @@ export default function AttributesAPI(props, {
   };
 
   const eventsLocal = computed(() => {
-    if (hasChildren.value || hasPreviewLocal.value) {
+    if ((hasChildren.value || hasPreviewLocal.value) && !disabledPreviewRow.value) {
       return {
         tabindex: 0,
         onClick: onClickRow,
@@ -104,6 +106,7 @@ export default function AttributesAPI(props, {
   });
 
   return {
+    disabledPreviewRow,
     eventsLocal,
     roleLocal,
     rowClassComputed,

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -29,6 +29,7 @@ export default function ScrollControlAPI(props, { emit }, {
   const columnActionsWidth = toRef(props, "columnActionsWidth");
   const columnActionsWidthMin = toRef(props, "columnActionsWidthMin");
   const isActionColumnVisible = toRef(props, "isActionColumnVisible");
+  const isSimpleTable = toRef(props, "isSimpleTable");
 
   let changingTableWidth = false;
 
@@ -40,7 +41,7 @@ export default function ScrollControlAPI(props, { emit }, {
   });
   const columnsSpecialWidth = computed(() => {
     const columnMultipleActionsWidth = isMultipleActionsActive.value ? columnActionsWidthMin.value : 0;
-    const scrollBarWidth = 10;
+    const scrollBarWidth = isSimpleTable.value ? 0 : 10; // delta for table resize when scrollbar appears
     return columnMultipleActionsWidth + scrollBarWidth;
   });
 
@@ -153,6 +154,7 @@ export default function ScrollControlAPI(props, { emit }, {
 
   const resizeOb = new ResizeObserver(entries => {
     // since we are observing only a single element, so we access the first element in entries array
+    // TODO add delta for table resize when scrollbar appears
     const RECT = entries[0].contentRect;
     if (tableWidth.value !== RECT.width) {
       if (!changingTableWidth) {

package/src/styles/components/ATable.scss

@@ -421,6 +421,7 @@
   padding-left: var(--a_table_between_actions_margin);
 }
 .a_table__top_panel__actions {
+  margin-left: auto;
   .a_table__action {
     margin-left: var(--a_table_between_actions_margin);
   }
@@ -608,27 +609,23 @@
     top: .5rem;
   }
 }
-
 .a_table_bordered {
   .a_table__body__row {
-    border-left: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
     border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
   }
   .a_table__head__row {
     border-right: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
-    border-left: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
   }
 }
 .a_table_bordered,
 .a_table_inner_bordered {
-  .a_table__td + .a_table__td {
+  .a_table__td {
     border-left: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
   }
-  .a_table__th + .a_table__th {
+  .a_table__th {
     border-left: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
   }
   .a_table__th_group {
-    width: 100%;
     &:not(:first-child) {
       .a_table__cell_group,
       .a_table__cell__child_group {
@@ -646,6 +643,18 @@
     border-bottom: var(--a_table_th_border_horizontal_width) solid var(--a_table_th_border_horizontal_color);
   }
 }
+.a_table_simple.a_table_bordered {
+  .a_table__td:last-child {
+    border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
+  }
+  .a_table__th:last-child {
+    border-right: var(--a_table_td_border_vertical_width) solid var(--a_table_td_border_vertical_color);
+  }
+  .a_table__body__row,
+  .a_table__head__row {
+    border-right: none;
+  }
+}
 .a_table__grandparent_without_scroll {
   .a_table__parent {
     overflow-x: unset;