quasar-ui-danx 0.4.10 → 0.4.12

package/src/helpers/actions.ts

@@ -1,7 +1,7 @@
 import { useDebounceFn } from "@vueuse/core";
 import { uid } from "quasar";
 import { isReactive, Ref, shallowRef } from "vue";
-import { ActionOptions, ActionTarget, AnyObject } from "../types";
+import type { ActionOptions, ActionOptionsPartial, ActionTarget, AnyObject, ResourceAction } from "../types";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
 
@@ -10,39 +10,40 @@ export const activeActionVnode: Ref = shallowRef(null);
 /**
  * Hook to perform an action on a set of targets
  * This helper allows you to perform actions by name on a set of targets using a provided list of actions
- *
- * @param actions
- * @param {ActionOptions | null} globalOptions
  */
-export function useActions(actions: ActionOptions[], globalOptions: ActionOptions | null = null) {
+export function useActions(actions: ActionOptions[], globalOptions: ActionOptionsPartial | null = null) {
 	const namespace = uid();
 
 	/**
 	 * Resolve the action object based on the provided name (or return the object if the name is already an object)
 	 */
-	function getAction(action: string | ActionOptions): ActionOptions {
-		if (typeof action === "string") {
-			action = actions.find(a => a.name === action) || { name: action };
+	function getAction(actionName: string | ActionOptions | ResourceAction): ResourceAction {
+		let actionOptions: ActionOptions | ResourceAction;
+
+		/// Resolve the action options or resource action based on the provided input
+		if (typeof actionName === "string") {
+			actionOptions = actions.find(a => a.name === actionName) || { name: actionName };
+		} else {
+			actionOptions = actionName;
 		}
 
 		// If the action is already reactive, return it
-		if (isReactive(action) && action.__type) return action;
+		if (isReactive(actionOptions) && "__type" in actionOptions) return actionOptions as ResourceAction;
 
-		action = { ...globalOptions, ...action };
+		const resourceAction: ResourceAction = storeObject({
+			...globalOptions,
+			...actionOptions,
+			trigger: (target, input) => performAction(resourceAction, target, input),
+			isApplying: false,
+			__type: "__Action:" + namespace
+		});
 
 		// Assign Trigger function if it doesn't exist
-		if (!action.trigger) {
-			if (action.debounce) {
-				action.trigger = useDebounceFn((target, input) => performAction(action, target, input), action.debounce);
-			} else {
-				action.trigger = (target, input) => performAction(action, target, input);
-			}
+		if (actionOptions.debounce) {
+			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), actionOptions.debounce);
 		}
 
-		// Set the initial state for the action
-		action.isApplying = false;
-
-		return storeObject({ ...action, __type: "__Action:" + namespace });
+		return resourceAction;
 	}
 
 	/**
@@ -52,17 +53,17 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 	 * @param filters
 	 * @returns {ActionOptions[]}
 	 */
-	function getActions(filters?: AnyObject): ActionOptions[] {
+	function getActions(filters?: AnyObject): ResourceAction[] {
 		let filteredActions = [...actions];
 
 		if (filters) {
-			for (const filter of Object.keys(filters)) {
-				const filterValue = filters[filter];
-				filteredActions = filteredActions.filter((a: AnyObject) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+			for (const filterKey of Object.keys(filters)) {
+				const filterValue = filters[filterKey];
+				filteredActions = filteredActions.filter((a: AnyObject) => a[filterKey] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filterKey])));
 			}
 		}
 
-		return filteredActions.map((a: AnyObject) => getAction(a));
+		return filteredActions.map((a: ActionOptions) => getAction(a));
 	}
 
 	/**
@@ -72,8 +73,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 	 * @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
 	 */
-	async function performAction(action: string | ActionOptions, target: ActionTarget = null, input: any = null) {
-		action = getAction(action);
+	async function performAction(action: ResourceAction, target: ActionTarget = null, input: any = null) {
 		// Resolve the original action, if the current action is an alias
 		const aliasedAction = action.alias ? getAction(action.alias) : null;
 

package/src/helpers/download.ts

@@ -23,6 +23,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 
 	var anchor = document.createElement("a");
 
+	// @ts-ignore
 	var toString = function (a) {
 		return String(a);
 	};
@@ -35,8 +36,10 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 	var blob;
 
 	var reader;
+	// @ts-ignore
 	myBlob = myBlob.call ? myBlob.bind(self) : Blob;
 
+	// @ts-ignore
 	if (String(this) === "true") {
 		// reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
 		payload = [payload, mimeType];
@@ -64,6 +67,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 			};
 			ajax.onerror = function (e) {
 				// As a fallback, just open the request in a new tab
+				// @ts-ignore
 				window.open(url, "_blank").focus();
 			};
 			setTimeout(function () {
@@ -77,6 +81,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 
 	// go ahead and download dataURLs right away
 	if (/^data:[\w+-]+\/[\w+-]+[,;]/.test(payload)) {
+		// @ts-ignore
 		if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
 			payload = dataUrlToBlob(payload);
 			mimeType = payload.type || defaultMime;
@@ -93,13 +98,14 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 					? payload
 					: new myBlob([payload], { type: mimeType });
 
-	function dataUrlToBlob(strUrl) {
+	function dataUrlToBlob(strUrl: string) {
 		var parts = strUrl.split(/[:;,]/);
 
 		var type = parts[1];
 
 		var decoder = parts[2] === "base64" ? atob : decodeURIComponent;
 
+		// @ts-ignore
 		var binData = decoder(parts.pop());
 
 		var mx = binData.length;
@@ -113,7 +119,7 @@ export function download(data: any, strFileName?: string, strMimeType?: string)
 		return new myBlob([uiArr], { type: type });
 	}
 
-	function saver(url, winMode) {
+	function saver(url: string, winMode: boolean | string) {
 		if ("download" in anchor) {
 			// html5 A[download]
 			anchor.href = url;

package/src/helpers/multiFileUpload.ts

@@ -16,14 +16,16 @@ export function useMultiFileUpload(options?: FileUploadOptions) {
 	const onFilesSelected = (e: any) => {
 		uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
 		new FileUpload(e.target.files, options)
-				.onProgress(({ file }: { file: UploadedFile }) => {
-					updateFileInList(file);
+				.prepare()
+				.onProgress(({ file }) => {
+					file && updateFileInList(file);
 				})
 				.onComplete(({ file, uploadedFile }) => {
 					file && updateFileInList(file, uploadedFile);
 				})
-				.onError(({ file }: { file: UploadedFile }) => {
-					FlashMessages.error(`Failed to upload ${file.name}`);
+				.onError(({ file, error }) => {
+					console.error("Failed to upload", file, error);
+					FlashMessages.error(`Failed to upload ${file.name}: ${error}`);
 				})
 				.onAllComplete(() => {
 					onCompleteCb.value && onCompleteCb.value({

package/src/helpers/objectStore.ts

@@ -1,4 +1,4 @@
-import { reactive, UnwrapNestedRefs } from "vue";
+import { ShallowReactive, shallowReactive } from "vue";
 import { TypedObject } from "../types";
 
 const store = new Map<string, any>();
@@ -6,27 +6,25 @@ const store = new Map<string, any>();
 /**
  * Store an object in the object store via type + id
  * Returns the stored object that should be used instead of the passed object as the returned object is shared across the system
- *
- * @param {TypedObject} newObject
- * @returns {TypedObject}
  */
-export function storeObject<T extends TypedObject>(newObject: T): UnwrapNestedRefs<T> {
+export function storeObject<T extends TypedObject>(newObject: T): ShallowReactive<T> {
 	const id = newObject.id || newObject.name;
 	const type = newObject.__type;
-	if (!id || !type) return reactive(newObject);
+	if (!id || !type) return shallowReactive(newObject);
+
+	if (!newObject.__timestamp) {
+		newObject.__timestamp = newObject.updated_at || 0;
+	}
 
 	const objectKey = `${type}:${id}`;
 
-	const oldObject: UnwrapNestedRefs<T> | undefined = store.get(objectKey);
+	// Retrieve the existing object if it already exists in the store
+	const oldObject = store.get(objectKey);
 
-	// Apply all properties from newObject to oldObject then store and return the updated object
-	if (oldObject) {
-		const oldTimestamp = oldObject.__timestamp || oldObject.updated_at;
-		const newTimestamp = newObject.__timestamp || newObject.updated_at;
-		// If the old object is newer, do not store the new object, just return the old
-		if (oldTimestamp && newTimestamp && newTimestamp < oldTimestamp) {
-			return oldObject;
-		}
+	// If an old object exists, and it is newer than the new object, do not store the new object, just return the old
+	// @ts-expect-error __timestamp is guaranteed to be set in this case on both old and new
+	if (oldObject && newObject.__timestamp <= oldObject.__timestamp) {
+		return oldObject;
 	}
 
 	// Recursively store all the children of the object as well
@@ -41,12 +39,11 @@ export function storeObject<T extends TypedObject>(newObject: T): UnwrapNestedRe
 
 	// Update the old object with the new object properties
 	if (oldObject) {
-		// If the new object is newer, apply all properties from the new object to the old object
 		Object.assign(oldObject, newObject);
 		return oldObject;
 	}
 
-	const reactiveObject = reactive(newObject);
+	const reactiveObject = shallowReactive(newObject);
 	store.set(objectKey, reactiveObject);
 	return reactiveObject;
 }

package/src/helpers/request.ts

@@ -1,6 +1,7 @@
 import { Ref } from "vue";
 import { danxOptions } from "../config";
 import { HttpResponse, RequestApi } from "../types";
+import { sleep } from "./utils";
 
 /**
  * A simple request helper that wraps the fetch API
@@ -70,6 +71,17 @@ export const request: RequestApi = {
 
 		return result;
 	},
+
+	async poll(url: string, options, interval, fnUntil) {
+		let response;
+		do {
+			response = await request.call(url, options);
+			await sleep(interval);
+		} while (!fnUntil(response));
+
+		return response;
+	},
+
 	async get(url, options) {
 		return await request.call(url, {
 			method: "get",

package/src/helpers/singleFileUpload.ts

@@ -1,60 +1,68 @@
 import { computed, Ref, ref } from "vue";
-import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
+import { FileUploadOptions, UploadedFile } from "../types";
+import { FileUpload } from "./FileUpload";
+import { FlashMessages } from "./FlashMessages";
 
-interface FileUploadCallbackParams {
-    file: UploadedFile;
-    uploadedFile: UploadedFile;
-}
+type FileUploadCallback = ((file: UploadedFile | null) => void) | null;
 
 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: any) => {
-        uploadedFile.value = null;
-        new FileUpload(e.target?.files[0], options)
-            .onProgress(({ file }: FileUploadCallbackParams) => {
-                uploadedFile.value = file;
-                onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
-            })
-            .onComplete(({ uploadedFile: completedFile }: FileUploadCallbackParams) => {
-                uploadedFile.value = completedFile;
-                onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
-                onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
-            })
-            .upload();
-    };
-
-    const onDrop = (e: InputEvent) => {
-        onFileSelected({ target: { files: e.dataTransfer?.files } });
-    };
-
-    const isFileUploaded = computed(() => {
-        return uploadedFile.value && uploadedFile.value.url;
-    });
-
-    const onFileChange = (cb: Function) => {
-        onFileChangeCb.value = cb;
-    };
-
-    const onComplete = (cb: Function) => {
-        onCompleteCb.value = cb;
-    };
-
-    const clearUploadedFile = () => {
-        uploadedFile.value = null;
-        onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
-        onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
-    };
-
-    return {
-        isFileUploaded,
-        clearUploadedFile,
-        onComplete,
-        onFileChange,
-        onDrop,
-        onFileSelected,
-        uploadedFile
-    };
+	const uploadedFile: Ref<UploadedFile | null | undefined> = ref(null);
+	const onCompleteCb: Ref<FileUploadCallback> = ref(null);
+	const onFileChangeCb: Ref<FileUploadCallback> = ref(null);
+
+	const onFileSelected = (e: any) => {
+		uploadedFile.value = null;
+		new FileUpload(e.target?.files[0], options)
+				.prepare()
+				.onProgress(({ file }) => {
+					if (file) {
+						uploadedFile.value = file;
+						onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+					}
+				})
+				.onComplete(({ uploadedFile: completedFile }) => {
+					if (completedFile) {
+						uploadedFile.value = completedFile;
+						onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
+						onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+					}
+				})
+				.onError(({ file, error }) => {
+					console.error("Failed to upload", file, error);
+					FlashMessages.error(`Failed to upload ${file.name}: ${error}`);
+				})
+				.upload();
+	};
+
+	const onDrop = (e: InputEvent) => {
+		onFileSelected({ target: { files: e.dataTransfer?.files } });
+	};
+
+	const isFileUploaded = computed(() => {
+		return uploadedFile.value && uploadedFile.value.url;
+	});
+
+	const onFileChange = (cb: FileUploadCallback) => {
+		onFileChangeCb.value = cb;
+	};
+
+	const onComplete = (cb: FileUploadCallback) => {
+		onCompleteCb.value = cb;
+	};
+
+	const clearUploadedFile = () => {
+		uploadedFile.value = null;
+		onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+		onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
+	};
+
+	return {
+		isFileUploaded,
+		clearUploadedFile,
+		onComplete,
+		onFileChange,
+		onDrop,
+		onFileSelected,
+		uploadedFile
+	};
 }

package/src/helpers/utils.ts

@@ -11,6 +11,15 @@ export function sleep(delay: number) {
 	return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
+/**
+ * Poll a callback function until the result is true
+ */
+export async function pollUntil(callback: () => any, interval = 1000) {
+	while (!(await callback())) {
+		await sleep(interval);
+	}
+}
+
 /**
  * Wait for a ref to have a value and then resolve the promise
  */

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./vue-plugin";

package/src/styles/danx.scss

@@ -0,0 +1,5 @@
+.dx-action-table {
+	.dx-column-shrink {
+		width: 1px;
+	}
+}

package/src/styles/index.scss

@@ -5,3 +5,4 @@
 @import "quasar-reset";
 @import "general";
 @import "transitions";
+@import "danx";

package/src/styles/themes/danx/action-table.scss

@@ -1,19 +1,30 @@
+.dx-action-table {
+	.dx-column-shrink {
+		width: 1px;
+	}
+	
+	// Make sure the checkbox column is left aligned and always the same size
+	thead > tr:first-child > th:first-child, tbody > tr:not(.dx-table-summary-tr) > td:first-child {
+		@apply text-left w-[1px] pl-4;
+	}
+}
+
 .dx-table-summary-tr {
-  @apply bg-gray-100;
+	@apply bg-gray-100;
 
-  &.has-selection {
-    @apply bg-blue-600 text-white;
-  }
+	&.has-selection {
+		@apply bg-blue-600 text-white;
+	}
 
-  &.is-loading {
-    @apply opacity-50;
-  }
+	&.is-loading {
+		@apply opacity-50;
+	}
 
-  .dx-table-summary-td {
-    @apply font-bold bg-gray-100 pl-5;
+	.dx-table-summary-td {
+		@apply font-bold bg-gray-100 pl-5;
 
-    &.has-selection {
-      @apply bg-blue-600 text-white pl-4;
-    }
-  }
+		&.has-selection {
+			@apply bg-blue-600 text-white pl-4;
+		}
+	}
 }

package/src/types/actions.d.ts

@@ -18,17 +18,17 @@ export interface ActionTargetItem extends TypedObject {
 export type ActionTarget = ActionTargetItem[] | ActionTargetItem | null;
 
 export interface ActionOptions {
-	name?: string;
+	name: string;
 	alias?: string;
 	label?: string;
+	icon?: string | object;
+	iconClass?: string | object;
 	menu?: boolean;
 	batch?: boolean;
 	category?: string;
 	class?: string;
 	debounce?: number;
-	isApplying?: boolean;
 	optimistic?: boolean | ((action: ActionOptions, target: ActionTargetItem | null, input: any) => void);
-	trigger?: (target?: ActionTarget, input?: any) => Promise<any>;
 	vnode?: ((target: ActionTarget) => VNode) | any;
 	enabled?: (target: object) => boolean;
 	batchEnabled?: (targets: object[]) => boolean;
@@ -39,5 +39,14 @@ export interface ActionOptions {
 	onBatchSuccess?: (result: any, targets: ActionTargetItem[], input: any) => any;
 	onError?: (result: any, targets: ActionTarget, input: any) => any;
 	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
-	__type?: string;
+}
+
+export interface ActionOptionsPartial extends ActionOptions {
+	name?: string;
+}
+
+export interface ResourceAction extends ActionOptions {
+	isApplying: boolean;
+	trigger: (target?: ActionTarget, input?: any) => Promise<any>;
+	__type: string;
 }

package/src/types/controls.d.ts

@@ -25,17 +25,17 @@ export interface FilterGroup {
 export interface ListControlsRoutes {
 	list(pager?: ListControlsPagination): Promise<ActionTargetItem[]>;
 
-	summary?(filter?: ListControlsFilter): Promise<object>;
+	summary?(filter?: ListControlsFilter): Promise<AnyObject>;
 
 	details?(target: ActionTargetItem): Promise<ActionTargetItem>;
 
 	more?(pager: ListControlsPagination): Promise<ActionTargetItem[]>;
 
-	fieldOptions?(filter?: AnyObject): Promise<object>;
+	fieldOptions?(filter?: AnyObject): Promise<AnyObject>;
 
-	applyAction?(action: string, target: ActionTargetItem | null, data: object): Promise<object>;
+	applyAction?(action: string, target: ActionTargetItem | null, data?: object): Promise<AnyObject>;
 
-	batchAction?(action: string, targets: ActionTargetItem[], data: object): Promise<object>;
+	batchAction?(action: string, targets: ActionTargetItem[], data: object): Promise<AnyObject>;
 
 	export?(filter?: ListControlsFilter, name?: string): Promise<void>;
 }

package/src/types/files.d.ts

@@ -1,7 +1,10 @@
+import { AnyObject, TypedObject } from "src/types/shared";
+
 export interface FileUploadOptions {
 	directory?: string,
 	createPresignedUpload?: ((path: string, name: string, mime?: string) => Promise<UploadedFile>) | null;
 	completePresignedUpload?: ((fileId: string) => Promise<UploadedFile>) | null;
+	refreshFile?: ((fileId: string) => Promise<UploadedFile>) | null;
 }
 
 export interface XHRFileUpload {
@@ -12,11 +15,12 @@ export interface XHRFileUpload {
 	body?: FormData | UploadedFile | string;
 }
 
-export interface UploadedFile {
-	id: string,
+export interface UploadedFile extends TypedObject {
+	id: string;
 	resource_id?: string;
-	name: string,
-	size: number,
+	name: string;
+	filename?: string;
+	size: number;
 	type: string;
 	mimeType?: string;
 	mime?: string;
@@ -27,6 +31,7 @@ export interface UploadedFile {
 	thumb?: UploadedFile;
 	optimized?: UploadedFile;
 	transcodes?: UploadedFile[];
+	meta?: AnyObject;
 }
 
 export interface FileUploadCompleteCallbackParams {
@@ -44,7 +49,7 @@ export interface FileUploadProgressCallbackParams {
 }
 
 export interface FileUploadErrorCallbackParams {
-	e: InputEvent;
+	e: InputEvent | ProgressEvent;
 	file: UploadedFile;
 	error: any;
 }

package/src/types/index.d.ts

@@ -9,4 +9,3 @@ export * from "./forms";
 export * from "./requests";
 export * from "./shared";
 export * from "./tables";
-

package/src/types/requests.d.ts

@@ -10,6 +10,8 @@ export interface RequestApi {
 	get(url: string, options?: RequestCallOptions): Promise<any>;
 
 	post(url: string, data?: object, options?: RequestCallOptions): Promise<any>;
+
+	poll(url: string, options?: RequestCallOptions, interval: number, fnUntil: (response) => boolean): Promise<any>;
 }
 
 export interface HttpResponse {

package/src/types/tables.d.ts

@@ -2,26 +2,32 @@ import { VNode } from "vue";
 import { ActionOptions } from "./actions";
 
 export interface TableColumn {
-	actionMenu?: ActionOptions[],
-	align?: string,
-	category?: string,
-	class?: string | object,
-	field?: string,
-	format?: (value: any, options: any) => any,
-	innerClass?: string | object,
-	style?: string | object,
-	headerStyle?: string | object,
-	isSavingRow?: boolean | (() => boolean),
-	label: string,
-	maxWidth?: number,
-	minWidth?: number,
-	name: string,
-	onClick?: (target: any) => void,
-	required?: boolean,
-	resizeable?: boolean,
-	sortable?: boolean,
-	sortBy?: string,
-	sortByExpression?: string,
-	titleColumns?: () => string[],
-	vnode?: () => VNode | any,
+	actionMenu?: ActionOptions[];
+	align?: string;
+	category?: string;
+	class?: string | object;
+	field?: string;
+	format?: (value: any, options: any) => any;
+	hideContent?: boolean;
+	shrink?: boolean;
+	headerClass?: string | object;
+	summaryClass?: string | object;
+	columnClass?: string | object;
+	innerClass?: string | object;
+	style?: string | object;
+	headerStyle?: string | object;
+	isSavingRow?: boolean | (() => boolean);
+	label: string;
+	width?: number;
+	maxWidth?: number;
+	minWidth?: number;
+	name: string;
+	onClick?: (target: any) => void;
+	required?: boolean;
+	resizeable?: boolean;
+	sortable?: boolean;
+	sortBy?: string;
+	sortByExpression?: string;
+	titleColumns?: () => string[];
+	vnode?: (row?) => VNode | any;
 }