aloha-vue 1.2.97 → 1.2.99

package/package.json

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

package/src/AFilters/AFilterCenter/AFilterCenter.js

@@ -7,6 +7,8 @@ import AFilterCenterItem from "./AFilterCenterItem/AFilterCenterItem";
 
 import VisibleFiltersAPI from "./compositionAPI/VisibleFiltersAPI";
 import AButton from "../../AButton/AButton";
+import LoadingFiltersAPI from "./compositionAPI/LoadingFiltersAPI";
+import ASpinner from "../../ASpinner/ASpinner";
 
 export default {
   name: "AFilterCenter",
@@ -50,8 +52,15 @@ export default {
       updateVisibleChildFilters,
     } = VisibleFiltersAPI(props);
 
+    const {
+      isLeastOneChildFilterLoading,
+      updateLoadingChildFilters,
+    } = LoadingFiltersAPI(props);
+
     return {
+      isLeastOneChildFilterLoading,
       styleHide,
+      updateLoadingChildFilters,
       updateVisibleChildFilters,
     };
   },
@@ -75,8 +84,16 @@ export default {
           dataKeyByKeyIdPerFilter: this.dataKeyByKeyIdPerFilter,
           model: this.appliedModel[filter.modelId || filter.id],
           onUpdateVisibleChildFilters: this.updateVisibleChildFilters,
+          onUpdateLoadingChildFilters: this.updateLoadingChildFilters,
         }, this.$slots);
       }),
+      this.isLeastOneChildFilterLoading && h("div", {
+        class: "a_filters_center__item",
+      }, [
+        h(ASpinner, {
+          class: "a_spinner_small",
+        }),
+      ]),
       h("div", {
         class: "a_filters_center__item",
       }, [

package/src/AFilters/AFilterCenter/AFilterCenterItem/AFilterCenterItem.js

@@ -11,6 +11,7 @@ import GoToAPI from "./compositionAPI/GoToAPI";
 import HasFilterAPI from "./compositionAPI/HasFilterAPI";
 import LabelAPI from "./compositionAPI/LabelAPI";
 import ModelValuesAPI from "./compositionAPI/ModelValuesAPI";
+import IsDataLoadingAPI from "./compositionAPI/IsDataLoadingAPI";
 
 export default {
   name: "AFilterCenterItem",
@@ -44,12 +45,18 @@ export default {
   },
   emits: [
     "updateVisibleChildFilters",
+    "updateLoadingChildFilters",
   ],
   setup(props, context) {
     const {
       hasCurrentFilter,
     } = HasFilterAPI(props);
 
+    const {
+      isFilterLoading,
+      updateLoadingChildFilters,
+    } = IsDataLoadingAPI(props, context);
+
     const {
       filterLabel,
     } = LabelAPI(props, {
@@ -83,6 +90,12 @@ export default {
       immediate: true,
     });
 
+    watch(isFilterLoading, () => {
+      updateLoadingChildFilters();
+    }, {
+      immediate: true,
+    });
+
     onBeforeUnmount(() => {
       updateVisibleChildFilters({
         destroy: true,

package/src/AFilters/AFilterCenter/AFilterCenterItem/compositionAPI/IsDataLoadingAPI.js

@@ -0,0 +1,30 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  isEmpty,
+} from "lodash-es";
+
+export default function IsDataLoadingAPI(props, { emit }) {
+  const filter = toRef(props, "filter");
+  const model = toRef(props, "model");
+  const dataKeyByKeyIdPerFilter = toRef(props, "dataKeyByKeyIdPerFilter");
+
+  const isFilterLoading = computed(() => {
+    return !isEmpty(model.value) && isEmpty(dataKeyByKeyIdPerFilter.value[filter.value.id]);
+  });
+
+  const updateLoadingChildFilters = () => {
+    emit("updateLoadingChildFilters", {
+      id: filter.value.id,
+      isLoading: isFilterLoading.value,
+    });
+  };
+
+  return {
+    isFilterLoading,
+    updateLoadingChildFilters,
+  };
+}

package/src/AFilters/AFilterCenter/compositionAPI/LoadingFiltersAPI.js

@@ -0,0 +1,32 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  forEach,
+} from "lodash-es";
+
+export default function LoadingFiltersAPI() {
+  const loadingChildFilters = ref({});
+
+  const updateLoadingChildFilters = ({ id, isLoading }) => {
+    loadingChildFilters.value[id] = isLoading;
+  };
+
+  const isLeastOneChildFilterLoading = computed(() => {
+    let isLoading = false;
+    forEach(loadingChildFilters.value, _isLoading => {
+      if (_isLoading) {
+        isLoading = true;
+        return false;
+      }
+    });
+    return isLoading;
+  });
+
+  return {
+    isLeastOneChildFilterLoading,
+    updateLoadingChildFilters,
+  };
+}

package/src/ATable/ATable.js

@@ -427,6 +427,8 @@ export default {
     } = SortAPI(props);
 
     const {
+      addRow,
+      deleteRow,
       hasRows,
       limit,
       offset,
@@ -603,6 +605,7 @@ export default {
     initModelSort();
 
     return {
+      addRow,
       allVisibleMobileColumns,
       areAllRowsSelected,
       areAllVisibleRowsSelected,
@@ -617,6 +620,7 @@ export default {
       closePreviewAll,
       columnsFilteredForRender,
       columnsOrdered,
+      deleteRow,
       emptyText,
       hasMultipleActions,
       hasRows,

package/src/ATable/compositionAPI/RowsAPI.js

@@ -73,6 +73,14 @@ export default function RowsAPI(props, {
     rowsLocal.value[rowIndex] = row;
   };
 
+  const addRow = ({ row }) => {
+    rowsLocal.value.unshift(row);
+  };
+
+  const deleteRow = ({ index }) => {
+    rowsLocal.value.splice(index, 1);
+  };
+
   watch(dataPaginated, () => {
     rowsLocal.value = [];
     rowsLocalIndex = 0;
@@ -89,6 +97,8 @@ export default function RowsAPI(props, {
   });
 
   return {
+    addRow,
+    deleteRow,
     hasRows,
     limit,
     offset,

package/src/styles/components/ATable.scss

@@ -111,6 +111,9 @@
   &:focus {
     outline: none;
     box-shadow: var(--a_table_row_focus_shadow_size) var(--a_table_row_focus_shadow_color);
+    .a_table__cell_action_sticky {
+      box-shadow: var(--a_table_row_focus_shadow_size) var(--a_table_row_focus_shadow_color);
+    }
   }
 }
 .a_table__head__row {
@@ -123,6 +126,9 @@
   align-items: center;
   position: relative;
   background-color: inherit;
+  &.a_table__cell_action {
+    background-color: inherit;
+  }
   + .a_table__th {
     border-left: var(--a_table_th_border_left_width) solid var(--a_table_th_border_left_color);
   }
@@ -242,12 +248,21 @@
   .a_table__row_hover:hover,
   .a_table__row_hover:focus-within {
     background-color: var(--a_table_row_hover_bg);
+    .a_table__cell_action_sticky {
+      background-color: var(--a_table_row_hover_bg);
+    }
   }
   .a_table__row.a_table__row_preview_open {
     background-color: var(--a_table_row_preview_open_bg);
+    .a_table__cell_action_sticky {
+      background-color: var(--a_table_row_preview_open_bg);
+    }
   }
   .a_table__row.a_table__row_preview_was_open {
     background-color: var(--a_table_row_preview_was_open_bg);
+    .a_table__cell_action_sticky {
+      background-color: var(--a_table_row_preview_was_open_bg);
+    }
   }
 }
 .a_table__td {
@@ -323,6 +338,7 @@
 .a_table__cell_action_sticky {
   position: sticky;
   right: 0;
+  background-color: var(--a_table_bg);
 }
 .a_table__th__dropdown_item {
   display: flex;