quasar-ui-danx 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionMenu.vue

@@ -1,10 +1,10 @@
 <template>
   <PopoverMenu
       class="px-2 flex action-button"
-      :items="activeItems"
+      :items="activeActions"
       :disabled="targets.length === 0"
       :tooltip="targets.length === 0 ? tooltip : null"
-      :loading="isSaving"
+      :loading="loading || isSaving"
       :loading-component="loadingComponent"
       @action-item="onAction"
   />
@@ -16,7 +16,7 @@ import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
 const props = defineProps({
-  items: {
+  actions: {
     type: Array,
     required: true
   },
@@ -28,22 +28,23 @@ const props = defineProps({
     type: String,
     default: 'First select records to perform a batch action'
   },
+  loading: Boolean,
   loadingComponent: {
     type: [Function, Object],
     default: undefined
   }
 });
 
-const activeItems = computed(() => props.items.filter(item => {
-  if (item.enabled === undefined) return true;
-  return typeof item.enabled === 'function' ? !!item.enabled(props.targets?.[0] ?? null, props.targets) : !!item.enabled;
+const activeActions = computed(() => props.actions.filter(action => {
+  if (action.enabled === undefined) return true;
+  return typeof action.enabled === 'function' ? !!action.enabled(props.targets?.[0] ?? null, props.targets) : !!action.enabled;
 }));
 
 const isSaving = ref(false);
-async function onAction(item) {
-  emit('action', item);
+async function onAction(action) {
+  emit('action', action);
   isSaving.value = true;
-  await performAction(item, props.targets);
+  await performAction(action, props.targets);
   isSaving.value = false;
 }
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -75,8 +75,9 @@
           </div>
           <div v-if="rowProps.col.actions" class="flex-grow flex justify-end pl-2">
             <ActionMenu
-                :items="rowProps.col.actions"
+                :actions="rowProps.col.actions"
                 :targets="[rowProps.row]"
+                :loading="isSavingItem?.id === rowProps.row.id"
                 @action="(action) => $emit('action', {action: action, row: rowProps.row})"
             />
           </div>
@@ -112,6 +113,10 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  isSavingItem: {
+    type: Object,
+    default: null
+  },
   isLoadingList: Boolean,
   pagedItems: {
     type: Object,

package/src/components/ActionTable/listActions.ts

@@ -228,11 +228,11 @@ export function useListActions(name: string, {
     /**
      * Applies an action to an item.
      */
-    const isApplyingActionToItem = ref(null);
+    const isSavingItem = ref(null);
     let actionResultCount = 0;
 
     async function applyAction(item, input, itemData = {}) {
-        isApplyingActionToItem.value = item;
+        isSavingItem.value = item;
         const resultNumber = ++actionResultCount;
         setItemInPagedList({ ...item, ...input, ...itemData });
         const result = await applyActionRoute(item, input);
@@ -248,7 +248,7 @@ export function useListActions(name: string, {
                 activeItem.value = { ...activeItem.value, ...result.item };
             }
         }
-        isApplyingActionToItem.value = null;
+        isSavingItem.value = null;
         return result;
     }
 
@@ -355,7 +355,7 @@ export function useListActions(name: string, {
         isLoadingSummary,
         pager,
         quasarPagination,
-        isApplyingActionToItem,
+        isSavingItem,
         activeItem,
         activePanel,