aloha-vue 1.0.320 → 1.0.322

package/docs/package.json

@@ -18,9 +18,8 @@
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
     "tinymce": "6.2.0",
-    "vue": "3.2.31",
-    "vue-router": "4.1.5",
-    "vuex": "4.0.2"
+    "vue": "3.2.47",
+    "vue-router": "4.1.6"
   },
   "devDependencies": {
     "@babel/core": "7.17.10",

package/docs/src/main.js

@@ -1,6 +1,5 @@
 import App from "./App/App.vue";
 import { createApp } from "vue";
-import store from "./store/index";
 import router from "./router/index";
 import AI18nPlugin from "../../src/plugins/AI18nPlugin";
 import AMobilePlugin from "../../src/plugins/AMobilePlugin";
@@ -36,4 +35,4 @@ APP.use(AGroupButtonDropdownPlugin, {
 });
 APP.config.unwrapInjectedRef = true;
 APP.directive("SafeHtml", ASafeHtml);
-APP.use(store).use(router).mount("#app");
+APP.use(router).mount("#app");

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

@@ -85,7 +85,7 @@ export default {
         {
           label: "Test",
           id: "test",
-          keyLabel: "test",
+          keyLabelSafeHtml: "test",
           sortId: "test",
           width: 200,
         },
@@ -121,6 +121,20 @@ export default {
           slot: "slot1",
           hide: true,
         },
+        {
+          label: "safeHtml",
+          id: "safeHtml",
+          keyLabelSafeHtml: "test",
+          sortId: "test",
+          width: 200,
+        },
+        {
+          label: "html",
+          id: "html",
+          keyLabelHtml: "test",
+          sortId: "test",
+          width: 200,
+        },
       ],
       rowsFooter: [
         {
@@ -424,6 +438,7 @@ export default {
       const DATA = [];
       times(1001, item => {
         DATA.push({
+          id: item,
           number: +item,
           aloha: `aloha1111dfdsfdsfdsfaasasadadsadasdsadsa1111111${ item }`,
           hola: `hola ${ item }`,

package/package.json

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

package/src/AInfiniteScroll/AInfiniteScroll.js

@@ -0,0 +1,74 @@
+import {
+  h,
+  onBeforeUnmount,
+  onMounted,
+} from "vue";
+
+import ObserverAPI from "./compositionAPI/ObserverAPI";
+
+export default {
+  name: "AInfiniteScroll",
+  props: {
+    callback: {
+      type: Function,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    rootMargin: {
+      type: String,
+      required: false,
+      default: "300px",
+    },
+    sentinelTag: {
+      type: String,
+      required: false,
+      default: "span",
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: "div",
+    },
+    threshold: {
+      type: [Number, Array],
+      required: false,
+      default: 0.5,
+    },
+  },
+  setup(props) {
+    const {
+      disconnectObserver,
+      sentinelRef,
+      setIntersectionObserver,
+      setObserverOptions,
+      startObserver,
+    } = ObserverAPI(props);
+
+    onMounted(() => {
+      setObserverOptions();
+      setIntersectionObserver();
+      startObserver();
+    });
+
+    onBeforeUnmount(() => {
+      disconnectObserver();
+    });
+
+    return {
+      sentinelRef,
+    };
+  },
+  render() {
+    return h(this.tag, {}, [
+      this.$slots.default ? this.$slots.default() : null,
+      h(this.sentinelTag, {
+        ref: "sentinelRef",
+        style: "height: 1px; display: block;",
+        ariaHidden: true,
+      }),
+    ]);
+  },
+};

package/src/AInfiniteScroll/compositionAPI/ObserverAPI.js

@@ -0,0 +1,61 @@
+import {
+  ref,
+  toRef,
+  watch,
+} from "vue";
+
+export default function ObserverAPI(props) {
+  const callback = toRef(props, "callback");
+  const disabled = toRef(props, "disabled");
+  const rootMargin = toRef(props, "rootMargin");
+  const threshold = toRef(props, "threshold");
+
+  let observerOptions = {};
+  const sentinelRef = ref(undefined);
+  let intersectionObserver = undefined;
+
+  const setObserverOptions = () => {
+    observerOptions = {
+      rootMargin: rootMargin.value,
+      threshold: threshold.value,
+    };
+  };
+
+  const setIntersectionObserver = () => {
+    intersectionObserver = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      if (entry.isIntersecting) {
+        callback.value();
+      }
+    }, observerOptions);
+  };
+
+  const startObserver = () => {
+    if (disabled.value) {
+      return;
+    }
+    intersectionObserver.observe(sentinelRef.value);
+  };
+
+  const disconnectObserver = () => {
+    if (intersectionObserver) {
+      intersectionObserver.disconnect();
+    }
+  };
+
+  watch(disabled, newValue => {
+    if (newValue === true) {
+      startObserver();
+    } else {
+      disconnectObserver();
+    }
+  });
+
+  return {
+    disconnectObserver,
+    sentinelRef,
+    setIntersectionObserver,
+    setObserverOptions,
+    startObserver,
+  };
+}

package/src/ATable/ATable.js

@@ -39,6 +39,7 @@ import ViewsAPI from "./compositionAPI/ViewsAPI";
 import {
   get,
   isArray,
+  isInteger,
   isNil,
   isPlainObject,
   uniqueId,
@@ -66,6 +67,11 @@ export default {
       required: false,
       default: 250,
     },
+    keyId: {
+      type: String,
+      required: false,
+      default: "id",
+    },
     countAllRows: {
       type: Number,
       required: false,
@@ -252,6 +258,12 @@ export default {
       required: false,
       default: undefined,
     },
+    rowsCountRenderPerTick: {
+      type: Number,
+      required: false,
+      default: 25,
+      validator: value => isInteger(value) && value > 0,
+    },
     rowsFooter: {
       type: Array,
       required: false,
@@ -373,6 +385,7 @@ export default {
       limit,
       offset,
       rowsLocal,
+      rowsLocalAll,
       rowsLocalLength,
     } = RowsAPI(props, {
       dataSorted,
@@ -423,7 +436,7 @@ export default {
     } = MultipleActionAPI({
       checkVisibleColumns,
       isMultipleActionsActive,
-      rowsLocal,
+      rowsLocalAll,
       rowsLocalLength,
     });
 
@@ -449,8 +462,8 @@ export default {
       togglePreviewResize,
     } = PreviewAPI(props, context, {
       aTableRef,
+      rowsLocalAll,
       tableGrandparentRef,
-      rowsLocal,
     });
 
     const {
@@ -537,7 +550,7 @@ export default {
     provide("previewRightRowIndex", previewRightRowIndex);
     provide("previewRightRowIndexLast", previewRightRowIndexLast);
 
-    provide("rowsLocal", rowsLocal);
+    provide("rowsLocalAll", rowsLocalAll);
     provide("modelColumnsVisibleLocal", modelColumnsVisibleLocal);
     provide("onUpdateModelFilters", onUpdateModelFilters);
     provide("updateDataKeyByIdFromFilter", updateDataKeyByIdFromFilter);
@@ -589,6 +602,7 @@ export default {
       previewDownRowIndexes,
       previewRightRowIndex,
       rowsLocal,
+      rowsLocalAll,
       rowsLocalLength,
       selectedRows,
       selectedRowsIndexes,
@@ -724,31 +738,34 @@ export default {
             h("div", {
               class: "a_table__body",
               role: this.tableChildRole,
-            }, this.rowsLocal.map((row, rowIndex) => {
-              return h(ATableTr, {
-                allVisibleMobileColumns: this.allVisibleMobileColumns,
-                areAllRowsSelected: this.areAllRowsSelected,
-                countVisibleMobileColumns: this.countVisibleMobileColumns,
-                row,
-                rowIndex,
-                isRowActionsStickyLocal: this.isRowActionsStickyLocal,
-                selectedRowsIndexes: this.selectedRowsIndexes,
-                rowActionsClass: this.rowActionsClass,
-                onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
-              }, {
-                get: vm => [
-                  h(AGet, {
-                    data: vm.row,
-                    keyLabel: vm.column.keyLabel,
-                    filter: vm.column.filter,
-                    filterParameters: vm.column.filterParameters,
-                    defaultValue: vm.column.defaultValue,
-                    tag: vm.column.filterTag || "div",
-                  }),
-                ],
-                ...this.$slots,
-              });
-            })),
+            }, {
+              default: () => this.rowsLocal.map((row, rowIndex) => {
+                return h(ATableTr, {
+                  key: row[this.keyId] || rowIndex,
+                  allVisibleMobileColumns: this.allVisibleMobileColumns,
+                  areAllRowsSelected: this.areAllRowsSelected,
+                  countVisibleMobileColumns: this.countVisibleMobileColumns,
+                  row,
+                  rowIndex,
+                  isRowActionsStickyLocal: this.isRowActionsStickyLocal,
+                  selectedRowsIndexes: this.selectedRowsIndexes,
+                  rowActionsClass: this.rowActionsClass,
+                  onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
+                }, {
+                  get: vm => [
+                    h(AGet, {
+                      data: vm.row,
+                      keyLabel: vm.column.keyLabel,
+                      filter: vm.column.filter,
+                      filterParameters: vm.column.filterParameters,
+                      defaultValue: vm.column.defaultValue,
+                      tag: vm.column.filterTag || "div",
+                    }),
+                  ],
+                  ...this.$slots,
+                });
+              })
+            }),
             (this.hasRows && this.hasRowsFooter) && h("div", {
               class: "a_table__footer",
               role: this.tableChildRole,
@@ -780,7 +797,7 @@ export default {
           ]),
           (!this.isViewTableVisible && this.viewCurrent && this.$slots[this.viewCurrent.type]) &&
           this.$slots[this.viewCurrent.type]({
-            rows: this.rowsLocal,
+            rows: this.rowsLocalAll,
           }),
           (this.isViewTableVisible && !this.hasRows) && h("div", {
             class: "a_table__empty_text",
@@ -794,7 +811,7 @@ export default {
               isLoadingTable: this.isLoadingTable,
               limit: this.limit,
               offset: this.offset,
-              rowsLength: this.rowsLocal.length,
+              rowsLength: this.rowsLocalLength,
               hasRows: this.hasRows,
               perPageView: this.perPageView,
               isMobile: this.isMobile,
@@ -812,7 +829,7 @@ export default {
           ]),
           this.isPreviewRightOpen && h(ATablePreviewRight, {
             rowIndex: this.previewRightRowIndex,
-            rows: this.rowsLocal,
+            rows: this.rowsLocalAll,
             previewHeaderTag: this.previewHeaderTag,
             onClosePreview: this.closePreview,
             onMousedownResizePreviewRight: this.mousedownResizePreviewRight,

package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem.js

@@ -193,6 +193,7 @@ export default {
   methods: {
     toggleColumnVisible($event) {
       $event.stopPropagation();
+      $event.preventDefault();
       const MODEL_COLUMNS = cloneDeep(this.modelColumnsVisibleLocal);
       MODEL_COLUMNS[this.columnId] = !this.isColumnVisible;
       this.changeModelColumnsVisible(MODEL_COLUMNS);

package/src/ATable/ATableListItem/ATableListItem.js

@@ -1,15 +1,17 @@
 import {
-  h,
+  h, resolveComponent,
 } from "vue";
 
 import ATranslation from "../../ATranslation/ATranslation";
 
-import { get } from "lodash-es";
+import TextAPI from "../ATableTd/compositionAPI/TextAPI";
+import SlotAPI from "../ATableTd/compositionAPI/SlotAPI";
+import LinkAPI from "../ATableTd/compositionAPI/LinkAPI";
 
 export default {
   name: "ATableListItem",
   inject: [
-    "rowsLocal",
+    "rowsLocalAll",
   ],
   props: {
     column: {
@@ -33,24 +35,30 @@ export default {
       required: false,
     },
   },
-  computed: {
-    isSlot() {
-      return !!this.slot;
-    },
+  setup(props) {
+    const {
+      classForLink,
+      isLink,
+      toLocal,
+    } = LinkAPI(props);
 
-    slot() {
-      if (this.isFooter) {
-        return this.column.footerSlot;
-      }
-      return this.column.slot;
-    },
+    const {
+      hasSlot,
+      slotName,
+    } = SlotAPI(props);
 
-    text() {
-      if (this.isFooter) {
-        return get(this.row, this.column.footerKeyLabel);
-      }
-      return get(this.row, this.column.keyLabel);
-    },
+    const {
+      textOrHtmlRender,
+    } = TextAPI(props);
+
+    return {
+      classForLink,
+      hasSlot,
+      isLink,
+      slotName,
+      textOrHtmlRender,
+      toLocal,
+    };
   },
   render() {
     return [
@@ -58,19 +66,30 @@ export default {
         text: this.column.label,
         tag: "dt",
       }),
-      h("dd", null, [
-        this.isSlot ?
-          this.$slots[this.column.slot]({
-            column: this.column,
-            columnIndex: this.columnIndex,
-            row: this.row,
-            rowIndex: this.rowIndex,
-            rows: this.rowsLocal,
-          }) :
-          h("span", null, [
-            this.text,
+      h("dd", null, (this.hasSlot && this.$slots[this.slotName]) ?
+        this.$slots[this.slotName]({
+          column: this.column,
+          columnIndex: this.columnIndex,
+          row: this.row,
+          rowIndex: this.rowIndex,
+          rows: this.rowsLocalAll,
+        }) :
+        (this.isLink && this.toLocal) ?
+          [
+            h(resolveComponent("RouterLink"), {
+              class: [
+                this.column.class,
+                this.classForLink,
+                this.column.classRow,
+              ],
+              to: this.toLocal,
+            }, () => [
+              this.textOrHtmlRender,
+            ]),
+          ] :
+          [
+            this.textOrHtmlRender,
           ])
-      ]),
     ];
   },
 };

package/src/ATable/ATableTd/ATableTd.js

@@ -1,27 +1,16 @@
 import {
-  computed,
   h,
-  inject,
   resolveComponent,
-  withDirectives,
 } from "vue";
 
 import ATranslation from "../../ATranslation/ATranslation";
 
-import ASafeHtml from "../../directives/ASafeHtml";
-
 import AttributesAPI from "./compositionAPI/AttributesAPI";
 import ColumnVisibleAPI from "../compositionAPI/ColumnVisibleAPI";
-
-import {
-  cloneDeep,
-  forEach,
-  get,
-  isPlainObject,
-  isString,
-  isUndefined,
-} from "lodash-es";
-
+import LinkAPI from "./compositionAPI/LinkAPI";
+import MobileAPI from "./compositionAPI/MobileAPI";
+import SlotAPI from "./compositionAPI/SlotAPI";
+import TextAPI from "./compositionAPI/TextAPI";
 
 export default {
   name: "ATableTd",
@@ -48,16 +37,10 @@ export default {
     },
   },
   inject: [
-    "columnsDefaultValue",
-    "hasPreview",
     "isMobile",
-    "onTogglePreview",
-    "rowsLocal",
-    "valuesForColumnDefault",
+    "rowsLocalAll",
   ],
   setup(props) {
-    const isMobile = inject("isMobile");
-
     const {
       attributesForTd,
     } = AttributesAPI(props);
@@ -66,110 +49,43 @@ export default {
       isColumnVisible,
     } = ColumnVisibleAPI(props);
 
-    const styleMobile = computed(() => {
-      if (isMobile.value) {
-        return !isColumnVisible.value ? "display: none;" : "";
-      }
-      return "";
+    const {
+      classForLink,
+      isLink,
+      toLocal,
+    } = LinkAPI(props);
+
+    const {
+      hasSlot,
+      slotName,
+    } = SlotAPI(props);
+
+    const {
+      textOrHtmlRender,
+    } = TextAPI(props);
+
+    const {
+      styleMobile,
+    } = MobileAPI({
+      isColumnVisible,
     });
 
     return {
-      styleMobile,
       attributesForTd,
+      classForLink,
+      hasSlot,
+      isLink,
+      slotName,
+      styleMobile,
+      textOrHtmlRender,
+      toLocal,
     };
   },
-  computed: {
-    text() {
-      let text;
-      if (this.isFooter) {
-        text = get(this.row, this.column.footerKeyLabel);
-      } else {
-        text = get(this.row, this.column.keyLabel);
-      }
-
-      let isTextInValuesForColumnDefault = false;
-      forEach(this.valuesForColumnDefault, item => {
-        if (text === item) {
-          isTextInValuesForColumnDefault = true;
-          return false;
-        }
-      });
-      if (isTextInValuesForColumnDefault) {
-        return this.defaultValue;
-      }
-      return text;
-    },
-
-    defaultValue() {
-      if (this.isFooter && "footerDefaultValue" in this.column) {
-        return this.column.footerDefaultValue;
-      }
-      if ("defaultValue" in this.column) {
-        return this.column.defaultValue;
-      }
-      if (!isUndefined(this.columnsDefaultValue)) {
-        return this.columnsDefaultValue;
-      }
-      return "";
-    },
-
-    path() {
-      if (this.isFooter) {
-        return this.column.footerKeyLabel;
-      }
-      return this.column.keyLabel;
-    },
-
-    isSlot() {
-      return !!this.slot;
-    },
-
-    isLink() {
-      return !!this.column.to;
-    },
-
-    toLocal() {
-      if (isString(this.column.to)) {
-        return this.column.to;
-      }
-      if (isPlainObject(this.column.to)) {
-        const TO = cloneDeep(this.column.to);
-        const PARAMS = TO.params || {};
-        if (this.column.to.paramsDynamic) {
-          let hasParamsDynamicError = false;
-          forEach(this.column.to.paramsDynamic, (value, key) => {
-            const PARAMS_VALUE = get(this.row, value);
-            if (isUndefined(PARAMS_VALUE)) {
-              hasParamsDynamicError = true;
-              return false;
-            }
-            PARAMS[key] = PARAMS_VALUE;
-          });
-          if (hasParamsDynamicError) {
-            return undefined;
-          }
-        }
-        TO.params = PARAMS;
-        return TO;
-      }
-      return undefined;
-    },
-
-    classForLink() {
-      return "a_btn a_btn_link a_p_0 a_text_left";
-    },
-
-    slot() {
-      if (this.isFooter) {
-        return this.column.footerSlot;
-      }
-      return this.column.slot;
-    },
-  },
   render() {
     if (this.column.isRender === false) {
       return "";
     }
+
     const TD = h(
       "div",
       this.attributesForTd,
@@ -180,13 +96,13 @@ export default {
             this.column.class,
             this.column.classRow,
           ],
-        }, (this.isSlot && this.$slots[this.slot]) ?
-          this.$slots[this.slot]({
+        }, (this.hasSlot && this.$slots[this.slotName]) ?
+          this.$slots[this.slotName]({
             column: this.column,
             columnIndex: this.columnIndex,
             row: this.row,
             rowIndex: this.rowIndex,
-            rows: this.rowsLocal,
+            rows: this.rowsLocalAll,
           }) :
           (this.isLink && this.toLocal) ?
             [
@@ -198,15 +114,11 @@ export default {
                 ],
                 to: this.toLocal,
               }, () => [
-                withDirectives(h("span"), [
-                  [ASafeHtml, this.text],
-                ]),
+                this.textOrHtmlRender,
               ]),
             ] :
             [
-              withDirectives(h("span"), [
-                [ASafeHtml, this.text],
-              ]),
+              this.textOrHtmlRender,
             ])
       ]
     );

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

@@ -0,0 +1,59 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+  forEach,
+  get,
+  isPlainObject,
+  isString,
+  isUndefined,
+} from "lodash-es";
+
+export default function LinkAPI(props) {
+  const column = toRef(props, "column");
+  const row = toRef(props, "row");
+
+  const isLink = computed(() => {
+    return !!column.value.to;
+  });
+  
+  const toLocal = computed(() => {
+    if (isString(column.value.to)) {
+      return column.value.to;
+    }
+    if (isPlainObject(column.value.to)) {
+      const TO = cloneDeep(column.value.to);
+      const PARAMS = TO.params || {};
+      if (column.value.to.paramsDynamic) {
+        let hasParamsDynamicError = false;
+        forEach(column.value.to.paramsDynamic, (value, key) => {
+          const PARAMS_VALUE = get(row.value, value);
+          if (isUndefined(PARAMS_VALUE)) {
+            hasParamsDynamicError = true;
+            return false;
+          }
+          PARAMS[key] = PARAMS_VALUE;
+        });
+        if (hasParamsDynamicError) {
+          return undefined;
+        }
+      }
+      TO.params = PARAMS;
+      return TO;
+    }
+    return undefined;
+  });
+
+  const classForLink = computed(() => {
+    return "a_btn a_btn_link a_p_0 a_text_left";
+  });
+
+  return {
+    classForLink,
+    isLink,
+    toLocal,
+  };
+}

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

@@ -0,0 +1,21 @@
+import {
+  computed,
+  inject,
+} from "vue";
+
+export default function MobileAPI({
+  isColumnVisible = computed(() => false),
+}) {
+  const isMobile = inject("isMobile");
+
+  const styleMobile = computed(() => {
+    if (isMobile.value) {
+      return !isColumnVisible.value ? "display: none;" : "";
+    }
+    return "";
+  });
+
+  return {
+    styleMobile,
+  };
+}

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

@@ -0,0 +1,25 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function SlotAPI(props) {
+  const column = toRef(props, "column");
+  const isFooter = toRef(props, "isFooter");
+
+  const slotName = computed(() => {
+    if (isFooter.value) {
+      return column.value.footerSlot;
+    }
+    return column.value.slot;
+  });
+
+  const hasSlot = computed(() => {
+    return !!slotName.value;
+  });
+
+  return {
+    hasSlot,
+    slotName,
+  };
+}

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

@@ -0,0 +1,126 @@
+import {
+  computed,
+  h,
+  inject,
+  toRef,
+  withDirectives,
+} from "vue";
+
+import ASafeHtml from "../../../directives/ASafeHtml";
+
+import {
+  forEach,
+  get,
+  isUndefined,
+} from "lodash-es";
+
+export default function TextAPI(props) {
+  const column = toRef(props, "column");
+  const isFooter = toRef(props, "isFooter");
+  const row = toRef(props, "row");
+
+  const columnsDefaultValue = inject("columnsDefaultValue");
+  const valuesForColumnDefault = inject("valuesForColumnDefault");
+
+  const defaultValue = computed(() => {
+    if (isFooter.value && "footerDefaultValue" in column.value) {
+      return column.value.footerDefaultValue;
+    }
+    if ("defaultValue" in column.value) {
+      return column.value.defaultValue;
+    }
+    if (!isUndefined(columnsDefaultValue.value)) {
+      return columnsDefaultValue.value;
+    }
+    return "";
+  });
+
+  const textKeyLabel = computed(() => {
+    if (isFooter.value) {
+      return column.value.footerKeyLabel;
+    }
+    return column.value.keyLabel;
+  });
+
+  const safeHtmlKeyLabel = computed(() => {
+    if (isFooter.value) {
+      return column.value.footerKeyLabelSafeHtml;
+    }
+    return column.value.keyLabelSafeHtml;
+  });
+
+  const htmlKeyLabel = computed(() => {
+    if (isFooter.value) {
+      return column.value.footerKeyLabelHtml;
+    }
+    return column.value.keyLabelHtml;
+  });
+
+  const text = computed(() => {
+    if (textKeyLabel.value) {
+      return get(row.value, textKeyLabel.value);
+    }
+    return undefined;
+  });
+
+  const safeHtml = computed(() => {
+    if (safeHtmlKeyLabel.value) {
+      return get(row.value, safeHtmlKeyLabel.value);
+    }
+    return undefined;
+  });
+
+  const html = computed(() => {
+    if (htmlKeyLabel.value) {
+      return get(row.value, htmlKeyLabel.value);
+    }
+    return undefined;
+  });
+
+  const getTextWithDefault = textLocal => {
+    let isTextInValuesForColumnDefault = false;
+    forEach(valuesForColumnDefault.value, item => {
+      if (textLocal === item) {
+        isTextInValuesForColumnDefault = true;
+        return false;
+      }
+    });
+    if (isTextInValuesForColumnDefault) {
+      return defaultValue.value;
+    }
+    return textLocal;
+  };
+
+  const textWithDefault = computed(() => {
+    return getTextWithDefault(text.value);
+  });
+
+  const safeHtmlWithDefault = computed(() => {
+    return getTextWithDefault(safeHtml.value);
+  });
+
+  const htmlWithDefault = computed(() => {
+    return getTextWithDefault(html.value);
+  });
+
+  const textOrHtmlRender = computed(() => {
+    if (textKeyLabel.value) {
+      return h("span", null, textWithDefault.value);
+    }
+    if (safeHtmlKeyLabel.value) {
+      return h("span", {
+        innerHTML: safeHtmlWithDefault.value,
+      });
+    }
+    if (htmlKeyLabel.value) {
+      return withDirectives(h("span"), [
+        [ASafeHtml, htmlWithDefault.value],
+      ]);
+    }
+    return undefined;
+  });
+
+  return {
+    textOrHtmlRender,
+  };
+}

package/src/ATable/ATableTopPanel/compositionAPI/ActionsAPI.js

@@ -22,7 +22,7 @@ export default function ActionsAPI(props, { emit }) {
 
   const tableId = inject("tableId");
   const currentMultipleActions = inject("currentMultipleActions");
-  const rowsLocal = inject("rowsLocal");
+  const rowsLocalAll = inject("rowsLocalAll");
 
   const {
     closeConfirm,
@@ -76,7 +76,7 @@ export default function ActionsAPI(props, { emit }) {
   const onStartModalMultipleActions = async() => {
     await currentMultipleActions.value.callback({
       rows: selectedRows.value,
-      rowsVisible: rowsLocal.value,
+      rowsVisible: rowsLocalAll.value,
       id: buttonMultipleId.value,
       areAllRowsSelected: areAllRowsSelected.value,
       modelFilters: modelFilters.value,
@@ -97,7 +97,7 @@ export default function ActionsAPI(props, { emit }) {
       currentMultipleActions.value.callback({
         close: closeMultipleActionsActive.value,
         rows: selectedRows.value,
-        rowsVisible: rowsLocal.value,
+        rowsVisible: rowsLocalAll.value,
         id: buttonMultipleId.value,
         areAllRowsSelected: areAllRowsSelected.value,
         modelFilters: modelFilters.value,

package/src/ATable/ATableTr/ATableTr.js

@@ -104,6 +104,7 @@ export default {
         }
         tds.push(
           h(ATableTd, {
+            key: column.id,
             column,
             columnIndex,
             row: this.row,
@@ -115,6 +116,7 @@ export default {
     } else {
       tds = this.columnsOrdered.map((column, columnIndex) => {
         return h(ATableTd, {
+          key: column.id,
           column,
           columnIndex,
           row: this.row,

package/src/ATable/compositionAPI/MultipleActionAPI.js

@@ -14,7 +14,7 @@ import {
 export default function MultipleActionAPI({
   checkVisibleColumns = () => {},
   isMultipleActionsActive = ref(undefined),
-  rowsLocal = computed(() => []),
+  rowsLocalAll = computed(() => []),
   rowsLocalLength = computed(() => 0),
 }) {
   const currentMultipleActions = ref(undefined);
@@ -26,7 +26,7 @@ export default function MultipleActionAPI({
   });
 
   const selectedRows = computed(() => {
-    return filter(rowsLocal.value, (row, index) => {
+    return filter(rowsLocalAll.value, (row, index) => {
       return selectedRowsIndexes.value[index];
     });
   });
@@ -84,7 +84,7 @@ export default function MultipleActionAPI({
         if (hasCurrentMultipleActionsIsHiddenCallback.value) {
           times(rowsLocalLength.value, index => {
             if (!currentMultipleActions.value.isHiddenCallback({
-              row: rowsLocal.value[index],
+              row: rowsLocalAll.value[index],
               rowIndex: index,
             })) {
               SELECTED_ROWS_INDEXES[index] = true;

package/src/ATable/compositionAPI/PreviewAPI.js

@@ -17,8 +17,8 @@ import {
 
 export default function PreviewAPI(props, context, {
   aTableRef = ref({}),
+  rowsLocalAll = computed(() => []),
   tableGrandparentRef = ref({}),
-  rowsLocal = computed(() => []),
 }) {
   const {
     isDropdownGlobalOpen,
@@ -63,7 +63,7 @@ export default function PreviewAPI(props, context, {
       rowIndex: previewRightRowIndex.value,
     });
     emit("togglePreview", {
-      row: rowsLocal.value[previewRightRowIndex.value],
+      row: rowsLocalAll.value[previewRightRowIndex.value],
       rowIndex: previewRightRowIndex.value,
       typeToggle: "close",
     });
@@ -73,7 +73,7 @@ export default function PreviewAPI(props, context, {
   };
   const closePreviewRightAll = () => {
     emit("togglePreview", {
-      row: rowsLocal.value[previewRightRowIndex.value],
+      row: rowsLocalAll.value[previewRightRowIndex.value],
       rowIndex: previewRightRowIndex.value,
       typeToggle: "close",
     });
@@ -116,7 +116,7 @@ export default function PreviewAPI(props, context, {
       addEventListenerWindowResize();
     }
     emit("togglePreview", {
-      row: rowsLocal.value[rowIndex],
+      row: rowsLocalAll.value[rowIndex],
       rowIndex: rowIndex,
       typeToggle: "open",
     });

package/src/ATable/compositionAPI/RowsAPI.js

@@ -1,7 +1,7 @@
 import {
   computed,
   ref,
-  toRef,
+  toRef, watch,
 } from "vue";
 
 import {
@@ -11,14 +11,18 @@ import {
 export default function RowsAPI(props, {
   dataSorted = computed(() => []),
 }) {
+  const isPagination = toRef(props, "isPagination");
+  const isPaginationOutside = toRef(props, "isPaginationOutside");
   const limitStart = toRef(props, "limitStart");
   const offsetStart = toRef(props, "offsetStart");
+  const rowsCountRenderPerTick = toRef(props, "rowsCountRenderPerTick");
 
   const limit = ref(limitStart.value);
   const offset = ref(offsetStart.value);
+  const rowsLocal = ref([]);
+  let rowsLocalIndex = 0;
+  let rowsLocalInterval = undefined;
 
-  const isPaginationOutside = toRef(props, "isPaginationOutside");
-  const isPagination = toRef(props, "isPagination");
   const dataPaginated = computed(() => {
     if (limit.value && !isPaginationOutside.value && isPagination.value) {
       const DATA_SORTED = cloneDeep(dataSorted.value);
@@ -29,23 +33,51 @@ export default function RowsAPI(props, {
     return dataSorted.value;
   });
 
-  const rowsLocal = computed(() => {
+  const rowsLocalAll = computed(() => {
     return dataPaginated.value;
   });
 
   const rowsLocalLength = computed(() => {
-    return rowsLocal.value.length;
+    return rowsLocalAll.value.length;
   });
 
   const hasRows = computed(() => {
     return !!rowsLocalLength.value;
   });
 
+  const addRowsPartToRowsLocal = () => {
+    const INDEX_START = rowsLocalIndex * rowsCountRenderPerTick.value;
+    const INDEX_END = INDEX_START + rowsCountRenderPerTick.value;
+    rowsLocal.value.push(...dataPaginated.value.slice(INDEX_START, INDEX_END));
+    rowsLocalIndex++;
+  };
+
+  const addAllRowsToRowsLocal = () => {
+    rowsLocalInterval = setInterval(() => {
+      if (rowsLocalIndex * rowsCountRenderPerTick.value >= dataPaginated.value.length) {
+        clearInterval(rowsLocalInterval);
+      } else {
+        addRowsPartToRowsLocal();
+      }
+    });
+  };
+
+  watch(dataPaginated, () => {
+    rowsLocal.value = [];
+    rowsLocalIndex = 0;
+    clearInterval(rowsLocalInterval);
+    addRowsPartToRowsLocal();
+    addAllRowsToRowsLocal();
+  }, {
+    immediate: true,
+  });
+
   return {
     hasRows,
     limit,
     offset,
     rowsLocal,
+    rowsLocalAll,
     rowsLocalLength,
   };
 }

package/src/compositionAPI/AHttpAPI.js

@@ -22,6 +22,7 @@ const HEADER_PARAMS = ref({});
 const abortGroupController = {
   _global: new AbortController(),
 };
+const abortGroupPending = {};
 
 export function create({ axiosCreateOptions = {} }) {
   API.value = axios.create(axiosCreateOptions);
@@ -54,6 +55,9 @@ export function abortHttp({
       abortController.abort();
       if (abortKey !== "_global") {
         delete abortGroupController[abortKey];
+        if (abortGroupPending[abortGroup]) {
+          delete abortGroupPending[abortGroup];
+        }
       }
     });
   } else if (abortGroup) {
@@ -71,6 +75,9 @@ export function abortHttp({
         abortGroupController[abortKey].abort();
         if (abortKey !== "_global") {
           delete abortGroupController[abortKey];
+          if (abortGroupPending[abortGroup]) {
+            delete abortGroupPending[abortGroup];
+          }
         }
       }
     });
@@ -356,10 +363,7 @@ export function callHttpRequestAndCheckSavedApi({
     };
 
     const signal = getAbortGroupSignal({ abortGroup, abortable });
-    // if (abortable) {
-    //   signal = getAbortGroupSignal({ abortGroup })
-    //   signal = _abortController ? _abortController.signal : abortController.signal;
-    // }
+    setAbortGroupPendingCurrent({ abortGroup, abortable });
 
     API.value({
       method: methodHttp,
@@ -390,6 +394,10 @@ export function callHttpRequestAndCheckSavedApi({
           return reject(error.response);
         }
       }
+    ).finally(
+      () => {
+        removeAbortGroupCurrent({ abortGroup, abortable });
+      }
     );
   });
 
@@ -508,3 +516,27 @@ function getExcludeAbortGroup({ excludeAbortGroup }) {
   }
   return EXCLUDE_ABORT_GROUP_OBJ;
 }
+
+function setAbortGroupPendingCurrent({ abortGroup, abortable }) {
+  if (!abortable || !abortGroup) {
+    return;
+  }
+  if (abortGroupPending[abortGroup]) {
+    abortGroupPending[abortGroup]++;
+  } else {
+    abortGroupPending[abortGroup] = 1;
+  }
+}
+
+function removeAbortGroupCurrent({ abortGroup, abortable }) {
+  if (!abortable || !abortGroup) {
+    return;
+  }
+  if (abortGroupPending[abortGroup]) {
+    abortGroupPending[abortGroup]--;
+  }
+  if (abortGroupPending[abortGroup] === 0 && abortGroupController[abortGroup]) {
+    delete abortGroupPending[abortGroup];
+    delete abortGroupController[abortGroup];
+  }
+}