quasar-ui-danx 0.0.41 → 0.0.43

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
   target: {
     type: [Array, Object],
-    required: true
+    default: () => []
   },
   tooltip: {
     type: String,
@@ -34,10 +34,13 @@ const props = defineProps({
   }
 });
 
-const hasTarget = computed(() => !!props.target?.length);
+const hasTarget = computed(() => Array.isArray(props.target) ? props.target.length > 0 : !!props.target);
 
 const activeActions = computed(() => props.actions.filter(action => {
-  if (action.enabled === undefined) return true;
-  return typeof action.enabled === 'function' ? !!action.enabled(props.target) : !!action.enabled;
+  if (Array.isArray(props.target)) {
+    return action.batchEnabled ? action.batchEnabled(props.target) : true;
+  }
+
+  return action.enabled ? action.enabled(props.target) : true;
 }));
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -56,12 +56,14 @@
             :style="getColumnStyle(rowProps.col)"
             @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
         >
+          <RenderVNode
+              v-if="rowProps.col.vnode"
+              :vnode="rowProps.col.vnode(rowProps.row)"
+          />
           <RenderComponent
-              v-if="rowProps.col.component"
+              v-else-if="rowProps.col.component"
               :params="[rowProps.row]"
               :component="rowProps.col.component"
-              :text="rowProps.value"
-              @action="$emit('action', $event)"
           />
           <div v-else-if="rowProps.col.fieldList">
             <div v-for="field in rowProps.col.fieldList" :key="field">
@@ -77,8 +79,8 @@
             <ActionMenu
                 :actions="rowProps.col.actions"
                 :target="rowProps.row"
-                :loading="isSavingItem?.id === rowProps.row.id"
-                @action="(action) => $emit('action', {action, target: rowProps.row})"
+                :loading="isSavingRow(rowProps.row)"
+                @action="(action) => $emit('action', action, rowProps.row)"
             />
           </div>
         </component>
@@ -95,10 +97,10 @@ import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import { ActionInputComponent, mapSortBy, RenderComponent } from '../index';
+import { ActionInputComponent, mapSortBy, RenderComponent, RenderVNode } from '../index';
 import { ActionMenu, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
-defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
+defineEmits(['action', 'update:quasar-pagination', 'update:selected-rows']);
 const props = defineProps({
   name: {
     type: String,
@@ -116,7 +118,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  isSavingItem: {
+  isSavingTarget: {
     type: Object,
     default: null
   },
@@ -158,6 +160,15 @@ function getColumnStyle(column) {
   }
   return null;
 }
+
+function isSavingRow(row) {
+  if (!props.isSavingTarget) return false;
+
+  if (Array.isArray(props.isSavingTarget)) {
+    return !!props.isSavingTarget.find(t => t.id === row.id);
+  }
+  return props.isSavingTarget.id === row.id;
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/ActionTable/listControls.ts

@@ -259,11 +259,11 @@ export function useListControls(name: string, {
      * Opens the item's form with the given item and tab
      *
      * @param item
-     * @param tab
+     * @param panel
      */
-    function openItemForm(item, tab) {
+    function activatePanel(item, panel) {
         activeItem.value = item;
-        activePanel.value = tab;
+        activePanel.value = panel;
     }
 
     /**
@@ -336,7 +336,7 @@ export function useListControls(name: string, {
         loadMore,
         refreshAll,
         getNextItem,
-        openItemForm,
+        activatePanel,
         applyFilterFromUrl,
         setItemInPagedList
     };

package/src/components/Utility/Tools/RenderComponent.vue

@@ -1,9 +1,16 @@
 <template>
   <Component
+      v-if="content"
       :is="resolvedComponent.is"
       v-bind="{...resolvedComponent.props, ...overrideProps}"
       @action="$emit('action', $event)"
-  >{{ resolvedComponent.value || resolvedComponent.props?.text || text }}</Component>
+  >{{ content }}</Component>
+  <Component
+      v-else
+      :is="resolvedComponent.is"
+      v-bind="{...resolvedComponent.props, ...overrideProps}"
+      @action="$emit('action', $event)"
+  />
 </template>
 <script setup>
 import { computed } from 'vue';
@@ -18,16 +25,13 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  text: {
-    type: String,
-    default: ''
-  },
   overrideProps: {
     type: Object,
     default: () => ({})
   }
 });
 
+const content = computed(() => resolvedComponent.value?.value || resolvedComponent.value?.props?.text);
 const resolvedComponent = computed(() => {
   if (typeof props.component === 'function') {
     return props.component(...props.params);

package/src/components/Utility/Tools/RenderVNode.vue

@@ -0,0 +1,6 @@
+<script>
+const RenderVNode = (props) => props.vnode;
+RenderVNode.props = { vnode: { type: Object, required: true } };
+RenderVNode.emits = ['action'];
+export default RenderVNode;
+</script>

package/src/components/Utility/Tools/index.ts

@@ -1,2 +1,3 @@
 export { default as ActionInputComponent } from "./ActionInputComponent.vue";
 export { default as RenderComponent } from "./RenderComponent.vue";
+export { default as RenderVNode } from "./RenderVNode.vue";

package/src/helpers/actions.ts

@@ -7,8 +7,10 @@ interface ActionOptions {
     menu?: boolean;
     batch?: boolean;
     category?: string;
+    class?: string;
     inputComponent?: (target: object[] | object) => any;
-    enabled?: (target: object[] | object) => boolean;
+    enabled?: (target: object) => boolean;
+    batchEnabled?: (targets: object[]) => boolean;
     onAction?: (action: string | null, target: object, input: any) => Promise<any>;
     onBatchAction?: (action: string | null, targets: object[], input: any) => Promise<any>;
     onSuccess?: (action: string | null, targets: object, input: any) => any;
@@ -20,7 +22,7 @@ export const activeActionInput = shallowRef(null);
 
 /**
  * Hook to perform an action on a set of targets
- * This helper allows you applyActionto perform actions by name on a set of targets using a provided list of actions
+ * This helper allows you to perform actions by name on a set of targets using a provided list of actions
  *
  * @param actions
  * @param {ActionOptions} globalOptions
@@ -70,8 +72,6 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
          * TODO: HOW TO INTEGRATE optimistic updates and single item updates?
          */
         async applyAction(item, input, itemData = {}) {
-            isSavingItem.value = item;
-
             setItemInPagedList({ ...item, ...input, ...itemData });
             const result = await applyActionRoute(item, input);
             if (result.success) {
@@ -86,7 +86,6 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
                     activeItem.value = { ...activeItem.value, ...result.item };
                 }
             }
-            isSavingItem.value = null;
             return result;
         },
 
@@ -113,10 +112,19 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
                 result = await new Promise((resolve, reject) => {
                     activeActionInput.value = {
                         component,
-                        confirm: async () => resolve(await onConfirmAction(action, target, input)),
-                        cancel: reject
+                        confirm: async input => {
+                            const result = await onConfirmAction(action, target, input);
+
+                            // Only resolve when we have a non-error response, so we can show the error message w/o
+                            // hiding the dialog / inputComponent
+                            if (result === undefined || result === true || result?.success) {
+                                resolve(result);
+                            }
+                        },
+                        cancel: resolve
                     };
                 });
+
                 activeActionInput.value = null;
             } else {
                 result = await onConfirmAction(action, target, input);
@@ -146,16 +154,14 @@ async function onConfirmAction(action: ActionOptions, target: object[] | object,
     }
 
     // If there is no return value or the result marks it as successful, we show a success message
-    if (result === undefined || result?.success) {
-
-        if (result?.success) {
-            FlashMessages.success(`The update was successful`);
+    if (result === undefined || result === true || result?.success) {
+        if (result?.success && Array.isArray(target)) {
+            FlashMessages.success(`Successfully performed action ${action.label} on ${target.length} items`);
         }
 
         if (action.onSuccess) {
             action.onSuccess(result, target, input);
         }
-
     } else {
         const errors = [];
         if (result.errors) {