quasar-ui-danx 0.4.9 → 0.4.12

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

@@ -1,5 +1,7 @@
 import { Ref, watch } from "vue";
 
+export { useDebounceFn } from "@vueuse/core";
+
 /**
  * Sleep function to be used in conjunction with async await:
  *
@@ -9,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/quasar-reset.scss

@@ -58,6 +58,8 @@
 		.q-field__marginal, .q-field__input, .q-field__label {
 			color: inherit;
 			height: auto;
+			min-height: 0;
+			line-height: inherit;
 		}
 	}
 }

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/styles/themes/danx/forms.scss

@@ -1,5 +1,5 @@
 .dx-field-label {
-	@apply text-xs block mb-1.5;
+	@apply text-xs mb-1.5 flex items-center space-x-1;
 
 	.dx-field-required {
 		@apply text-red-900 ml-0.5 bottom-1 relative;
@@ -10,22 +10,4 @@
 	.q-field__label {
 		@apply text-sm text-gray-700;
 	}
-
-	&.dx-number-field {
-		&.dx-prepend-label {
-			@apply text-xs text-black font-normal;
-		}
-
-		&.dx-no-prepend-label {
-			@apply w-32;
-
-			.q-field__native {
-				@apply bg-white text-right;
-			}
-
-			.q-field__prepend {
-				padding: 0;
-			}
-		}
-	}
 }

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/fields.d.ts

@@ -1,15 +1,16 @@
 import { QInputProps } from "quasar";
-import { FormField } from "./forms";
 
 export interface TextFieldProps {
-	modelValue?: string,
-	field?: FormField,
-	type?: QInputProps["type"],
-	label?: string,
-	labelClass?: string,
-	parentClass?: string,
-	inputClass?: string,
-	allowOverMax?: boolean,
+	modelValue?: string | number;
+	type?: QInputProps["type"];
+	label?: string;
+	required?: boolean;
+	requiredLabel?: string;
+	prependLabel?: boolean;
+	placeholder?: string;
+	labelClass?: string | object;
+	inputClass?: string | object;
+	allowOverMax?: boolean;
 	maxLength?: number;
 	autogrow?: boolean;
 	noLabel?: boolean;

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;
 }

package/src/{vue-plugin.js → vue-plugin.ts}

@@ -3,15 +3,16 @@ export * from "./helpers";
 export * from "./components";
 export * from "./svg";
 
+// eslint-disable-next-line import/extensions
 import packageJson from "../package.json";
 
 const { version } = packageJson;
 
-function install(app) {
-    console.log(`Installing Danx UI ${version}... Nothing to do really.`);
+function install() {
+	console.log(`Installing Danx UI ${version}... Nothing to do really.`);
 }
 
 export {
-    version,
-    install
+	version,
+	install
 };

package/tsconfig.json

@@ -25,6 +25,7 @@
     "forceConsistentCasingInFileNames": true,
     // Resolve modules using Node.js style
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     // Allow default imports from modules with no default export
     "allowSyntheticDefaultImports": true,
     // Enables experimental support for decorators

package/types/index.d.ts

@@ -1 +1,3 @@
+declare module "quasar-ui-danx";
 export * from "../src/types";
+export * from "../src";