quasar-ui-danx 0.0.45 → 0.0.47

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -4,16 +4,15 @@
       :items="activeActions"
       :disabled="!hasTarget"
       :tooltip="!hasTarget ? tooltip : null"
-      :loading="loading"
+      :loading="isSaving || loading"
       :loading-component="loadingComponent"
-      @action-item="$emit('action', $event)"
+      @action-item="onAction"
   />
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { PopoverMenu } from '../Utility';
 
-const emit = defineEmits(['action']);
 const props = defineProps({
   actions: {
     type: Array,
@@ -43,4 +42,14 @@ const activeActions = computed(() => props.actions.filter(action => {
 
   return action.enabled ? action.enabled(props.target) : true;
 }));
+
+const isSaving = ref(false);
+async function onAction(action) {
+  if (!action.trigger) {
+    throw new Error('Action must have a trigger function! Make sure you are using useActions() or implement your own trigger function.');
+  }
+  isSaving.value = true;
+  await action.trigger(props.target);
+  isSaving.value = false;
+}
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -51,8 +51,6 @@
       <ActionTableColumn
           :row-props="rowProps"
           :settings="columnSettings[rowProps.col.name]"
-          :is-saving="isSavingRow(rowProps.row)"
-          @action="$emit('action', $event, rowProps.row)"
       >
         <slot />
       </ActionTableColumn>
@@ -68,10 +66,10 @@ import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import { ActionVnode, mapSortBy } from '../index';
+import { ActionVnode } from '../index';
 import { ActionTableColumn, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
-defineEmits(['action', 'update:quasar-pagination', 'update:selected-rows']);
+defineEmits(['update:quasar-pagination', 'update:selected-rows']);
 const props = defineProps({
   name: {
     type: String,
@@ -89,10 +87,6 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  isSavingTarget: {
-    type: Object,
-    default: null
-  },
   isLoadingList: Boolean,
   pagedItems: {
     type: Object,
@@ -126,15 +120,6 @@ function onResizeColumn(column, val) {
   };
   setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
-
-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/ActionTableColumn.vue

@@ -30,8 +30,6 @@
         <ActionMenu
             :actions="column.actions"
             :target="row"
-            :loading="isSaving"
-            @action="$emit('action', $event)"
         />
       </div>
     </div>
@@ -42,7 +40,6 @@ import { computed } from 'vue';
 import { RenderVnode } from '../Utility';
 import { ActionMenu } from './index';
 
-defineEmits(['action']);
 const props = defineProps({
   rowProps: {
     type: Object,
@@ -51,8 +48,7 @@ const props = defineProps({
   settings: {
     type: Object,
     default: null
-  },
-  isSaving: Boolean
+  }
 });
 
 const row = computed(() => props.rowProps.row);

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,16 +1,19 @@
 <template>
   <QTabPanels
-    :model-value="activePanel"
-    class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
+      :model-value="activePanel"
+      class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
   >
     <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
-      <RenderVnode v-if="panel.vnode" :vnode="panel.vnode" />
+      <RenderVnode
+          v-if="panel.vnode"
+          :vnode="panel.vnode"
+      />
     </QTabPanel>
   </QTabPanels>
 </template>
 
 <script setup>
-import { RenderVnode } from "quasar-ui-danx";
+import { RenderVnode } from '../Utility';
 
 defineProps({
   activePanel: {

package/src/components/Utility/Formats/LabelValueFormat.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div class="text-xs font-bold">{{ label }}</div>
+    <div :class="{'mt-2': !dense, 'mt-1': dense, 'text-no-wrap': nowrap}">
+      <slot>{{ value || "-" }}</slot>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    default: "-"
+  },
+  dense: Boolean,
+  nowrap: Boolean
+});
+</script>

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

@@ -2,3 +2,4 @@ export { default as AddressFormat } from "./AddressFormat.vue";
 export { default as FlatListFormat } from "./FlatListFormat.vue";
 export { default as GpsCoordinatesFormat } from "./GpsCoordinatesFormat.vue";
 export { default as IconWithTextFormat } from "./IconWithTextFormat.vue";
+export { default as LabelValueFormat } from "./LabelValueFormat.vue";

package/src/helpers/actions.ts

@@ -1,6 +1,27 @@
-import { shallowRef, VNode } from "vue";
+import { ref, shallowRef, VNode } from "vue";
 import { FlashMessages } from "./index";
 
+/**
+ * TODO: HOW TO INTEGRATE optimistic updates and single item updates?
+ */
+async function applyAction(item, input, itemData = {}) {
+    setItemInPagedList({ ...item, ...input, ...itemData });
+    const result = await applyActionRoute(item, input);
+    if (result.success) {
+        // Only render the most recent campaign changes
+        if (resultNumber !== actionResultCount) return;
+
+        // Update the updated item in the previously loaded list if it exists
+        setItemInPagedList(result.item);
+
+        // Update the active item if it is the same as the updated item
+        if (activeItem.value?.id === result.item.id) {
+            activeItem.value = { ...activeItem.value, ...result.item };
+        }
+    }
+    return result;
+}
+
 interface ActionOptions {
     name?: string;
     label?: string;
@@ -8,6 +29,8 @@ interface ActionOptions {
     batch?: boolean;
     category?: string;
     class?: string;
+    trigger?: (target: object[] | object, input: any) => Promise<any>;
+    activeTarget?: any;
     vnode?: (target: object[] | object) => VNode;
     enabled?: (target: object) => boolean;
     batchEnabled?: (targets: object[]) => boolean;
@@ -28,111 +51,105 @@ export const activeActionVnode = shallowRef(null);
  * @param {ActionOptions} globalOptions
  */
 export function useActions(actions: ActionOptions[], globalOptions: ActionOptions = null) {
-    const isSavingTarget = shallowRef(null);
+    const mappedActions = actions.map(action => {
+        if (!action.trigger) {
+            action.trigger = (target, input) => performAction(action, target, input);
+            action.activeTarget = ref(null);
+        }
+        return { ...globalOptions, ...action };
+    });
+
+    /**
+     * Check if the provided target is currently being saved by any of the actions
+     */
+    function isSavingTarget(target: any): boolean {
+        if (!target) return false;
+
+        for (const action of mappedActions) {
+            const activeTargets = Array.isArray(action.activeTarget.value) ? action.activeTarget.value : [action.activeTarget.value];
+            if (activeTargets.length === 0) continue;
+
+            for (const activeTarget of activeTargets) {
+                if (activeTarget === target || (activeTarget.id && activeTarget.id === target.id)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
 
     /**
-     * Resolves an action by name or object, adds globalOptions and overrides any passes options
+     * Perform an action on a set of targets
      *
-     * @param name
-     * @param {any} options
-     * @returns {any}
+     * @param {string} name - can either be a string or an action object
+     * @param {object[]|object} target - an array of targets or a single target object
+     * @param {any} input - The input data to pass to the action handler
      */
-    function resolveAction(name, options = null) {
-        const action = typeof name === "string" ? actions.find(a => a.name === name) : name;
+    async function performAction(name: string | object, target: object[] | object, input: any = null) {
+        const action: ActionOptions = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
         if (!action) {
             throw new Error(`Unknown action: ${name}`);
         }
 
-        return { ...globalOptions, ...action, ...options };
+        const vnode = action.vnode && action.vnode(target);
+        let result: any;
+
+        action.activeTarget.value = target;
+
+        // If additional input is required, first render the vnode and wait for the confirm or cancel action
+        if (vnode) {
+            // If the action requires an input, we set the activeActionVnode to the input component.
+            // This will tell the ActionVnode to render the input component, and confirm or cancel the
+            // action The confirm function has the input from the component passed and will resolve the promise
+            // with the result of the action
+            result = await new Promise((resolve, reject) => {
+                activeActionVnode.value = {
+                    vnode,
+                    confirm: async (input: any) => {
+                        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 / vnode
+                        if (result === undefined || result === true || result?.success) {
+                            resolve(result);
+                        }
+                    },
+                    cancel: resolve
+                };
+            });
+
+            activeActionVnode.value = null;
+        } else {
+            result = await onConfirmAction(action, target, input);
+        }
+
+        action.activeTarget.value = null;
+        return result;
     }
 
-    return {
-        actions,
-        isSavingTarget,
-        resolveAction,
-
-        /**
-         * Filter the list of actions based on the provided filters in key-value pairs
-         * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
-         *
-         * @param filters
-         * @returns {ActionOptions[]}
-         */
-        filterActions(filters: object) {
-            let filteredActions = [...actions];
-
-            for (const filter of Object.keys(filters)) {
-                const filterValue = filters[filter];
-                filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
-            }
-            return filteredActions;
-        },
-
-        /**
-         * TODO: HOW TO INTEGRATE optimistic updates and single item updates?
-         */
-        async applyAction(item, input, itemData = {}) {
-            setItemInPagedList({ ...item, ...input, ...itemData });
-            const result = await applyActionRoute(item, input);
-            if (result.success) {
-                // Only render the most recent campaign changes
-                if (resultNumber !== actionResultCount) return;
-
-                // Update the updated item in the previously loaded list if it exists
-                setItemInPagedList(result.item);
-
-                // Update the active item if it is the same as the updated item
-                if (activeItem.value?.id === result.item.id) {
-                    activeItem.value = { ...activeItem.value, ...result.item };
-                }
-            }
-            return result;
-        },
-
-        /**
-         * Perform an action on a set of targets
-         *
-         * @param {string} name - can either be a string or an action object
-         * @param {object[]|object} target - an array of targets or a single target object
-         * @param {any} input
-         */
-        async performAction(name: string | object, target: object[] | object, input: any = null) {
-            const action = resolveAction(name);
-            const vnode = action.vnode && action.vnode(target);
-            let result = null;
-
-            isSavingTarget.value = target;
-
-            // If additional input is required, first render the vnode and wait for the confirm or cancel action
-            if (vnode) {
-                // If the action requires an input, we set the activeActionVnode to the input component.
-                // This will tell the ActionVnode to render the input component, and confirm or cancel the
-                // action The confirm function has the input from the component passed and will resolve the promise
-                // with the result of the action
-                result = await new Promise((resolve, reject) => {
-                    activeActionVnode.value = {
-                        vnode,
-                        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 / vnode
-                            if (result === undefined || result === true || result?.success) {
-                                resolve(result);
-                            }
-                        },
-                        cancel: resolve
-                    };
-                });
-
-                activeActionVnode.value = null;
-            } else {
-                result = await onConfirmAction(action, target, input);
-            }
+    /**
+     * Filter the list of actions based on the provided filters in key-value pairs
+     * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
+     *
+     * @param filters
+     * @returns {ActionOptions[]}
+     */
+    function filterActions(filters: object): ActionOptions[] {
+        let filteredActions = [...mappedActions];
 
-            isSavingTarget.value = null;
-            return result;
+        for (const filter of Object.keys(filters)) {
+            const filterValue = filters[filter];
+            filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
         }
+        return filteredActions;
+    }
+
+    return {
+        actions: mappedActions,
+        isSavingTarget,
+        filterActions,
+        performAction
     };
 }