quasar-ui-danx 0.2.32 → 0.3.1

package/src/helpers/FileUpload.ts

@@ -5,8 +5,8 @@ import { FlashMessages } from "./FlashMessages";
 
 export type FileUploadOptions = {
     directory?: string,
-    presignedUploadUrl?: (...params: any) => "",
-    uploadCompletedUrl?: (...params: any) => "",
+    presignedUploadUrl?: Function | null;
+    uploadCompletedUrl?: Function | null;
 };
 
 export type UploadedFile = {
@@ -16,23 +16,21 @@ export type UploadedFile = {
     type: string,
     progress: number,
     location: string,
-    blobUrl: string
+    blobUrl: string,
+    url: string,
 }
 
 export class FileUpload {
     files: UploadedFile[] = [];
-    fileUploads = [];
-    onErrorCb = null;
-    onProgressCb = null;
-    onCompleteCb = null;
-    onAllCompleteCb = null;
-    options: FileUploadOptions = {};
-
-    constructor(files: UploadedFile[] | UploadedFile, options: FileUploadOptions = {}) {
-        if (!Array.isArray(files) && !(files instanceof FileList)) {
-            files = [files];
-        }
-        this.files = files;
+    fileUploads: UploadedFile[] = [];
+    onErrorCb: Function | null = null;
+    onProgressCb: Function | null = null;
+    onCompleteCb: Function | null = null;
+    onAllCompleteCb: Function | null = null;
+    options: FileUploadOptions | null = {};
+
+    constructor(files: UploadedFile[] | UploadedFile, options: FileUploadOptions | null = {}) {
+        this.files = !Array.isArray(files) && !(files instanceof FileList) ? [files] : files;
         this.fileUploads = [];
         this.onErrorCb = null;
         this.onProgressCb = null;
@@ -81,7 +79,7 @@ export class FileUpload {
     /**
      * Callback for when all files have been uploaded
      */
-    onAllComplete(cb) {
+    onAllComplete(cb: Function) {
         this.onAllCompleteCb = cb;
         return this;
     }
@@ -91,7 +89,7 @@ export class FileUpload {
      * @param cb
      * @returns {FileUpload}
      */
-    onComplete(cb) {
+    onComplete(cb: Function) {
         this.onCompleteCb = cb;
         return this;
     }
@@ -101,7 +99,7 @@ export class FileUpload {
      * @param cb
      * @returns {FileUpload}
      */
-    onProgress(cb) {
+    onProgress(cb: Function) {
         this.onProgressCb = cb;
         return this;
     }
@@ -111,7 +109,7 @@ export class FileUpload {
      * @param cb
      * @returns {FileUpload}
      */
-    onError(cb) {
+    onError(cb: Function) {
         this.onErrorCb = cb;
         return this;
     }
@@ -122,7 +120,7 @@ export class FileUpload {
      * @param file
      * @param error
      */
-    errorHandler(e, file, error = null) {
+    errorHandler(e: InputEvent, file: UploadedFile, error = null) {
         if (this.onErrorCb) {
             this.onErrorCb({ e, file, error });
         }

package/src/helpers/actions.ts

@@ -1,17 +1,23 @@
-import { ref, shallowRef, VNode } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { Ref, shallowRef, VNode } from "vue";
 import { FlashMessages } from "./FlashMessages";
 
-type ActionTarget = object[] | object;
+export type ActionTargetItem = {
+    id: number | string;
+    isSaving: Ref<boolean>;
+    [key: string]: any;
+};
+export type ActionTarget = ActionTargetItem[] | ActionTargetItem;
 
-interface ActionOptions {
+export interface ActionOptions {
     name?: string;
     label?: string;
     menu?: boolean;
     batch?: boolean;
     category?: string;
     class?: string;
+    debounce?: number;
     trigger?: (target: ActionTarget, input: any) => Promise<any>;
-    activeTarget?: any;
     vnode?: (target: ActionTarget) => VNode;
     enabled?: (target: object) => boolean;
     batchEnabled?: (targets: object[]) => boolean;
@@ -24,7 +30,7 @@ interface ActionOptions {
     onFinish?: (result: any, targets: ActionTarget, input: any) => any;
 }
 
-export const activeActionVnode: object = shallowRef(null);
+export const activeActionVnode: Ref = shallowRef(null);
 
 /**
  * Hook to perform an action on a set of targets
@@ -36,31 +42,25 @@ export const activeActionVnode: object = shallowRef(null);
 export function useActions(actions: ActionOptions[], globalOptions: ActionOptions | null = null) {
     const mappedActions = actions.map(action => {
         const mappedAction: ActionOptions = { ...globalOptions, ...action };
-        if (!mappedAction.trigger) {
-            mappedAction.trigger = (target, input) => performAction(mappedAction, target, input);
-            mappedAction.activeTarget = ref(null);
+        if (mappedAction.debounce) {
+            mappedAction.trigger = useDebounceFn((target, input) => performAction(mappedAction, target, input, true), mappedAction.debounce);
+        } else if (!mappedAction.trigger) {
+            mappedAction.trigger = (target, input) => performAction(mappedAction, target, input, true);
         }
         return mappedAction;
     });
 
     /**
-     * Check if the provided target is currently being saved by any of the actions
+     * Set the reactive saving state of a target
      */
-    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]).filter(t => t);
-            if (activeTargets.length === 0) continue;
-
-            for (const activeTarget of activeTargets) {
-                if (activeTarget === target || (activeTarget.id && activeTarget.id === target.id)) {
-                    return true;
-                }
+    function setTargetSavingState(target: ActionTarget, saving: boolean) {
+        if (Array.isArray(target)) {
+            for (const t of target) {
+                t.isSaving.value = saving;
             }
+        } else {
+            target.isSaving.value = saving;
         }
-
-        return false;
     }
 
     /**
@@ -69,22 +69,23 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
      * @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
+     * @param isTriggered - Whether the action was triggered by a trigger function
      */
-    async function performAction(name: string | object, target: ActionTarget, input: any = null) {
-        const action: ActionOptions = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
+    async function performAction(name: string | object, target: ActionTarget, input: any = null, isTriggered = false) {
+        const action: ActionOptions | null | undefined = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
         if (!action) {
             throw new Error(`Unknown action: ${name}`);
         }
 
-        if (!action.activeTarget) {
-            throw new Error(`Action ${action.name} does not have an activeTarget ref. Please use useActions() or manually set the activeTarget ref`);
+        // We always want to call the trigger function if it exists, unless it's already been triggered
+        // This provides behavior like debounce and custom action resolution
+        if (action.trigger && !isTriggered) {
+            return action.trigger(target, input);
         }
 
         const vnode = action.vnode && action.vnode(target);
         let result: any;
 
-        action.activeTarget.value = target;
-
         // Run the onStart handler if it exists and quit the operation if it returns false
         if (action.onStart) {
             if (!action.onStart(action, target, input)) {
@@ -92,6 +93,8 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
             }
         }
 
+        setTargetSavingState(target, true);
+
         // 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.
@@ -119,7 +122,8 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
             result = await onConfirmAction(action, target, input);
         }
 
-        action.activeTarget.value = null;
+        setTargetSavingState(target, false);
+
         return result;
     }
 
@@ -135,14 +139,13 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 
         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])));
+            filteredActions = filteredActions.filter((a: object) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
         }
         return filteredActions;
     }
 
     return {
         actions: mappedActions,
-        isSavingTarget,
         filterActions,
         performAction
     };

package/src/helpers/array.ts

@@ -1,17 +1,12 @@
 /**
- *
- * @param array
- * @param item
- * @param newItem
- * @returns {*[]}
+ * Replace an item in an array with a new item
  */
-export function replace(array, item, newItem = undefined) {
-    const index =
-        typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
-    if (index === false) {
-        console.error("Item not found in array", item, array);
-        throw new Error("Item not found in array");
+export function replace(array: any[], item: any, newItem = undefined, appendIfMissing = false) {
+    const index: any = typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
+    if (index === false || index === -1) {
+        return appendIfMissing ? [...array, newItem] : array;
     }
+
     const newArray = [...array];
     newItem !== undefined
         ? newArray.splice(index, 1, newItem)
@@ -19,17 +14,17 @@ export function replace(array, item, newItem = undefined) {
     return newArray;
 }
 
-export function remove(array, item) {
+/**
+ * Remove an item from an array
+ */
+export function remove(array: any[], item: any) {
     return replace(array, item);
 }
 
 /**
  * Remove duplicate items from an array using a callback to compare 2 elements
- * @param array
- * @param cb
- * @returns {*}
  */
-export function uniqueBy(array, cb) {
+export function uniqueBy(array: any[], cb: Function) {
     return array.filter((a, index, self) => {
         // Check if the current element 'a' is the first occurrence in the array
         return index === self.findIndex((b) => cb(a, b));

package/src/helpers/multiFileUpload.ts

@@ -1,17 +1,17 @@
-import { ref } from "vue";
-import { FileUpload, FileUploadOptions } from "./FileUpload";
+import { Ref, ref } from "vue";
+import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
 
 export function useMultiFileUpload(options: FileUploadOptions) {
-    const uploadedFiles = ref([]);
-    const onCompleteCb = ref(null);
-    const onFilesChangeCb = ref(null);
-    const onFilesSelected = (e) => {
+    const uploadedFiles: Ref<UploadedFile[]> = ref([]);
+    const onCompleteCb: Ref<Function | null> = ref(null);
+    const onFilesChangeCb: Ref<Function | null> = ref(null);
+    const onFilesSelected = (e: any) => {
         uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
         new FileUpload(e.target.files, options)
-            .onProgress(({ file }) => {
+            .onProgress(({ file }: { file: UploadedFile }) => {
                 updateFileInList(file);
             })
-            .onComplete(({ file, uploadedFile }) => {
+            .onComplete(({ file, uploadedFile }: { file: UploadedFile, uploadedFile: UploadedFile }) => {
                 updateFileInList(file, uploadedFile);
             })
             .onAllComplete(() => {
@@ -21,7 +21,7 @@ export function useMultiFileUpload(options: FileUploadOptions) {
             .upload();
     };
 
-    function updateFileInList(file, replace = null) {
+    function updateFileInList(file: UploadedFile, replace: UploadedFile | null = null) {
         const index = uploadedFiles.value.findIndex(f => f.id === file.id);
         if (index !== -1) {
             uploadedFiles.value.splice(index, 1, replace || file);
@@ -29,25 +29,25 @@ export function useMultiFileUpload(options: FileUploadOptions) {
         onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
     }
 
-    const onDrop = (e) => {
-        onFilesSelected({ target: { files: e.dataTransfer.files } });
+    const onDrop = (e: InputEvent) => {
+        onFilesSelected({ target: { files: e.dataTransfer?.files } });
     };
 
-    const onFilesChange = (cb) => {
+    const onFilesChange = (cb: Function) => {
         onFilesChangeCb.value = cb;
     };
 
-    const onComplete = (cb) => {
+    const onComplete = (cb: Function) => {
         onCompleteCb.value = cb;
     };
 
-    const onClear = () => {
+    const clearUploadedFiles = () => {
         uploadedFiles.value = [];
         onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
         onCompleteCb.value && onCompleteCb.value();
     };
 
-    const onRemove = (file) => {
+    const onRemove = (file: UploadedFile) => {
         const index = uploadedFiles.value.findIndex(f => f.id === file.id);
         if (index !== -1) {
             uploadedFiles.value.splice(index, 1);
@@ -57,7 +57,7 @@ export function useMultiFileUpload(options: FileUploadOptions) {
     };
 
     return {
-        onClear,
+        clearUploadedFiles,
         onRemove,
         onComplete,
         onFilesChange,

package/src/helpers/singleFileUpload.ts

@@ -1,19 +1,24 @@
-import { computed, ref } from "vue";
-import { FileUpload, FileUploadOptions } from "./FileUpload";
+import { computed, Ref, ref } from "vue";
+import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
 
-export function useSingleFileUpload(options: FileUploadOptions = null) {
-    const uploadedFile = ref(null);
-    const onCompleteCb = ref(null);
-    const onFileChangeCb = ref(null);
+interface FileUploadCallbackParams {
+    file: UploadedFile;
+    uploadedFile: UploadedFile;
+}
+
+export function useSingleFileUpload(options: FileUploadOptions | null = null) {
+    const uploadedFile: Ref<UploadedFile | null> = ref(null);
+    const onCompleteCb: Ref<Function | null> = ref(null);
+    const onFileChangeCb: Ref<Function | null> = ref(null);
 
-    const onFileSelected = (e) => {
+    const onFileSelected = (e: any) => {
         uploadedFile.value = null;
-        new FileUpload(e.target.files[0], options)
-            .onProgress(({ file }) => {
+        new FileUpload(e.target?.files[0], options)
+            .onProgress(({ file }: FileUploadCallbackParams) => {
                 uploadedFile.value = file;
                 onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
             })
-            .onComplete(({ uploadedFile: completedFile }) => {
+            .onComplete(({ uploadedFile: completedFile }: FileUploadCallbackParams) => {
                 uploadedFile.value = completedFile;
                 onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
                 onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
@@ -21,30 +26,31 @@ export function useSingleFileUpload(options: FileUploadOptions = null) {
             .upload();
     };
 
-    const onDrop = (e) => {
-        onFileSelected({ target: { files: e.dataTransfer.files } });
+    const onDrop = (e: InputEvent) => {
+        onFileSelected({ target: { files: e.dataTransfer?.files } });
     };
 
     const isFileUploaded = computed(() => {
         return uploadedFile.value && uploadedFile.value.url;
     });
 
-    const onFileChange = (cb) => {
+    const onFileChange = (cb: Function) => {
         onFileChangeCb.value = cb;
     };
 
-    const onComplete = (cb) => {
+    const onComplete = (cb: Function) => {
         onCompleteCb.value = cb;
     };
 
-    const onClear = () => {
+    const clearUploadedFile = () => {
         uploadedFile.value = null;
         onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+        onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
     };
 
     return {
         isFileUploaded,
-        onClear,
+        clearUploadedFile,
         onComplete,
         onFileChange,
         onDrop,

package/src/helpers/utils.ts

@@ -1,25 +1,18 @@
-import { watch } from "vue";
+import { Ref, watch } from "vue";
 
 /**
- * Sleep function to be used in conjuction with async await:
+ * Sleep function to be used in conjunction with async await:
  *
  * eg: await sleep(5000);
- *
- * @param delay
- * @returns {Promise<any>}
  */
-export function sleep(delay) {
+export function sleep(delay: number) {
     return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
 /**
  * Wait for a ref to have a value and then resolve the promise
- *
- * @param ref
- * @param value
- * @returns {Promise<void>}
  */
-export function waitForRef(ref, value) {
+export function waitForRef(ref: Ref, value: any) {
     return new Promise<void>((resolve) => {
         watch(ref, (newValue) => {
             if (newValue === value) {
@@ -31,39 +24,29 @@ export function waitForRef(ref, value) {
 
 /**
  * Returns a number that is constrained to the given range.
- * @param min
- * @param max
- * @param value
- * @returns {number}
  */
-export function minmax(min, max, value) {
+export function minmax(min: number, max: number, value: number) {
     return Math.max(min, Math.min(max, value));
 }
 
 /**
  * Convert meters to miles
- * @param meters
- * @returns {number}
  */
-export function metersToMiles(meters) {
+export function metersToMiles(meters: number) {
     return meters * 0.000621371;
 }
 
 /**
  * Convert miles to meters
- * @param miles
- * @returns {number}
  */
-export function milesToMeters(miles) {
+export function milesToMeters(miles: number) {
     return miles / 0.000621371;
 }
 
 /**
  * Parses a string for Lat and Long coords
- * @param location
- * @returns {null|{lng: number, lat: number}}
  */
-export function parseCoords(location) {
+export function parseCoords(location: string) {
     const latLong = location.split(",");
 
     if (latLong.length === 2) {
@@ -80,3 +63,15 @@ export function parseCoords(location) {
 
     return null;
 }
+
+/**
+ * Increment a name by adding a number to the end of it or incrementing the number if it already exists
+ */
+export function incrementName(name: string) {
+    name = (name || "New Item").trim();
+    const match = name.match(/(\d+)$/);
+    if (match) {
+        return name.replace(/\d+$/, (match: string) => "" + (parseInt(match) + 1));
+    }
+    return `${name} 1`;
+}

package/src/styles/quasar-reset.scss

@@ -1,3 +1,7 @@
+.q-tab {
+  text-transform: capitalize
+}
+
 .q-tab-panels {
   overflow: visible;