quasar-ui-danx 0.4.61 → 0.4.69

package/package.json

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

package/src/components/ActionTable/Form/Fields/SelectField.vue

@@ -175,6 +175,7 @@ const selectedOptions = computed(() => {
 		if (typeof v === "object") return v.value || v.id;
 		return v;
 	});
+
 	return computedOptions.value.filter((o) => {
 		return comparableValues.includes(o.value);
 	});
@@ -249,7 +250,7 @@ function resolveValue(option) {
 	if (!option || typeof option === "string") {
 		return option;
 	}
-	let value = option.value || option.id;
+	let value = option.value !== undefined ? option.value : option.id;
 	if (typeof props.optionValue === "string") {
 		value = option[props.optionValue];
 	} else if (typeof props.optionValue === "function") {

package/src/components/ActionTable/Form/Fields/SelectionMenuField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="group flex items-center flex-nowrap gap-x-1 relative">
+  <div class="group flex items-center flex-nowrap gap-x-2 relative">
     <ShowHideButton
       v-if="selectable"
       v-model="isSelecting"
@@ -8,7 +8,6 @@
       :saving="loading"
       :class="selectClass"
       :show-icon="selectIcon || DefaultSelectIcon"
-      class="mr-2"
       :size="size"
     >
       <QMenu
@@ -19,14 +18,14 @@
         <div>
           <div
             v-for="option in optionsPlusSelected"
-            :key="option.id"
+            :key="getId(option)"
             v-ripple
             class="cursor-pointer flex items-center relative"
-            :class="{'bg-sky-900 hover:bg-sky-800': selected?.id === option.id, 'hover:bg-slate-600': selected?.id !== option.id}"
-            @click="selected = option"
+            :class="{'bg-sky-900 hover:bg-sky-800': getId(selected) === getId(option), 'hover:bg-slate-600': getId(selected) !== getId(option)}"
+            @click="selected = selectionType === 'object' ? option : getId(option)"
           >
             <div class="flex-grow px-4 py-2">
-              {{ option.name }}
+              {{ getName(option) }}
             </div>
             <ActionButton
               v-if="deletable"
@@ -58,12 +57,12 @@
       <template v-if="selected">
         <EditableDiv
           v-if="nameEditable"
-          :model-value="selected.name"
+          :model-value="getName(selected)"
           color="slate-600"
           @update:model-value="name => $emit('update', {name})"
         />
         <template v-else>
-          {{ selected.name }}
+          {{ getName(selected) }}
         </template>
       </template>
       <template v-else>
@@ -104,16 +103,17 @@ import {
 	FaSolidPencil as EditIcon
 } from "danx-icon";
 import { computed, ref } from "vue";
-import { ActionTargetItem } from "../../../../types";
+import { ActionTargetItem, LabelValueItem } from "../../../../types";
 import { ShowHideButton } from "../../../Utility/Buttons";
 import { ActionButtonProps, default as ActionButton } from "../../../Utility/Buttons/ActionButton";
 import EditableDiv from "./EditableDiv";
 
 defineEmits(["create", "update", "delete"]);
-const selected = defineModel<ActionTargetItem | null>("selected");
+const selected = defineModel<ActionTargetItem | string | null>("selected");
 const editing = defineModel<boolean>("editing");
 const props = withDefaults(defineProps<{
-	options: ActionTargetItem[];
+	options: ActionTargetItem[] | LabelValueItem[];
+	selectionType?: "object" | "string";
 	showEdit?: boolean;
 	loading?: boolean;
 	selectText?: string;
@@ -137,6 +137,7 @@ const props = withDefaults(defineProps<{
 	editDisabled?: boolean;
 	size?: ActionButtonProps["size"];
 }>(), {
+	selectionType: "object",
 	selectText: "",
 	createText: "",
 	editText: "",
@@ -154,8 +155,32 @@ const props = withDefaults(defineProps<{
 const isSelecting = ref(false);
 
 // If the selected option is not in the options list, it should be added in
-const optionsPlusSelected = computed(() => {
-	if (!selected.value || props.options.find((o) => o.id === selected.value?.id)) return props.options;
+const optionsPlusSelected = computed<ActionTargetItem[]>(() => {
+	if (!selected.value || props.options.find((o) => getId(o) === getId(selected.value))) return props.options;
 	return [selected.value, ...props.options];
 });
+
+function resolveOption(option) {
+	if (typeof option === "object") {
+		return option;
+	}
+
+	return props.options.find((o) => {
+		if (typeof o === "object") {
+			return getId(o) === option;
+		}
+		return o === option;
+	});
+}
+
+function getId(option) {
+	option = resolveOption(option);
+
+	return option?.id || option?.value || option?.name || option;
+}
+
+function getName(option) {
+	option = resolveOption(option);
+	return option?.name || option?.label || option?.value || option;
+}
 </script>

package/src/components/Utility/Buttons/ActionButton.vue

@@ -62,6 +62,7 @@ import {
 	FaSolidCopy as CopyIcon,
 	FaSolidFileExport as ExportIcon,
 	FaSolidFileImport as ImportIcon,
+	FaSolidFolder as FolderIcon,
 	FaSolidMinus as MinusIcon,
 	FaSolidPause as PauseIcon,
 	FaSolidPencil as EditIcon,
@@ -74,7 +75,7 @@ import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import" | "minus";
+	type?: "trash" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import" | "minus";
 	color?: "red" | "blue" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
 	size?: "xxs" | "xs" | "sm" | "md" | "lg";
 	icon?: object | string;
@@ -190,6 +191,8 @@ const typeOptions = computed(() => {
 			return { icon: EditIcon };
 		case "copy":
 			return { icon: CopyIcon };
+		case "folder":
+			return { icon: FolderIcon };
 		case "play":
 			return { icon: PlayIcon };
 		case "stop":

package/src/helpers/actions.ts

@@ -1,7 +1,7 @@
 import { useDebounceFn } from "@vueuse/core";
 import { FaSolidCopy as CopyIcon, FaSolidPencil as EditIcon, FaSolidTrash as DeleteIcon } from "danx-icon";
 import { uid } from "quasar";
-import { h, isReactive, Ref, shallowReactive, shallowRef } from "vue";
+import { h, Ref, shallowRef } from "vue";
 import { ConfirmActionDialog, CreateNewWithNameDialog } from "../components";
 import type {
 	ActionGlobalOptions,
@@ -55,39 +55,27 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 	 */
 	function getAction(actionName: string, actionOptions?: Partial<ActionOptions>): ResourceAction {
 		/// Resolve the action options or resource action based on the provided input
-		let resourceAction: Partial<ResourceAction> = actions.find(a => a.name === actionName) || { name: actionName };
-
-		if (actionOptions) {
-			Object.assign(resourceAction, actionOptions);
-		}
+		const baseOptions: Partial<ResourceAction> = actions.find(a => a.name === actionName) || { name: actionName };
 
 		// If the action is already reactive, return it
-		if (!isReactive(resourceAction) || !("__type" in resourceAction)) {
-			resourceAction = storeObject({
-				onAction: globalOptions?.routes?.applyAction,
-				onBatchAction: globalOptions?.routes?.batchAction,
-				onBatchSuccess: globalOptions?.controls?.clearSelectedRows,
-				...globalOptions,
-				...resourceAction,
-				isApplying: false,
-				__type: "__Action:" + namespace
-			});
-
-			// Splice the resourceAction in place of the action in the actions list
-			actions.splice(actions.findIndex(a => a.name === actionName), 1, resourceAction as ResourceAction);
-		}
-
-		// Return a clone of the action so it can be modified without affecting the original
-		const clonedAction = shallowReactive({ ...resourceAction }) as ResourceAction;
+		const resourceAction = storeObject({
+			onAction: globalOptions?.routes?.applyAction,
+			onBatchAction: globalOptions?.routes?.batchAction,
+			onBatchSuccess: globalOptions?.controls?.clearSelectedRows,
+			...baseOptions,
+			...actionOptions,
+			isApplying: false,
+			__type: "__Action:" + namespace
+		}) as ResourceAction;
 
 		// Assign Trigger function if it doesn't exist
-		if (clonedAction.debounce) {
-			clonedAction.trigger = useDebounceFn((target, input) => performAction(clonedAction, target, input), clonedAction.debounce);
+		if (resourceAction.debounce) {
+			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), resourceAction.debounce);
 		} else {
-			clonedAction.trigger = (target, input) => performAction(clonedAction, target, input);
+			resourceAction.trigger = (target, input) => performAction(resourceAction, target, input);
 		}
 
-		return clonedAction;
+		return resourceAction;
 	}
 
 	/**

package/src/helpers/request.ts

@@ -8,7 +8,7 @@ import { sleep } from "./utils";
  * to make GET and POST requests easier w/ JSON payloads
  */
 export const request: RequestApi = {
-	abortControllers: {},
+	activeRequests: {},
 
 	url(url) {
 		if (url.startsWith("http")) {
@@ -19,20 +19,27 @@ export const request: RequestApi = {
 
 	async call(url, options) {
 		options = options || {};
-		const abortKey = options?.abortOn !== undefined ? options.abortOn : url + JSON.stringify(options.params || "");
+		const requestKey = options?.requestKey || url + JSON.stringify(options.params || "");
+		const waitOnPrevious = !!options?.waitOnPrevious;
+		const shouldAbort = !waitOnPrevious;
 		const timestamp = Date.now();
 
-		if (abortKey) {
-			const abort = new AbortController();
-			const previousAbort = request.abortControllers[abortKey];
+		// If there was a request with the same key made that is still active, track that here
+		const previousRequest = request.activeRequests[requestKey];
+
+		// Set the current active request to this one
+		request.activeRequests[requestKey] = { timestamp };
+
+		if (shouldAbort) {
 			// If there is already an abort controller set for this key, abort it
-			if (previousAbort) {
-				previousAbort.abort.abort("Request was aborted due to a newer request being made");
+			if (previousRequest) {
+				previousRequest.abortController?.abort("Request was aborted due to a newer request being made");
 			}
 
+			const abortController = new AbortController();
 			// Set the new abort controller for this key
-			request.abortControllers[abortKey] = { abort, timestamp };
-			options.signal = abort.signal;
+			request.activeRequests[requestKey].abortController = abortController;
+			options.signal = abortController.signal;
 		}
 
 		if (options.params) {
@@ -49,7 +56,14 @@ export const request: RequestApi = {
 
 		let response = null;
 		try {
-			response = await fetch(request.url(url), options);
+			// If there is a previous request still active, wait for it to finish before proceeding (if the waitForPrevious flag is set)
+			if (waitOnPrevious && previousRequest?.requestPromise) {
+				await previousRequest.requestPromise;
+			}
+
+			const requestPromise = fetch(request.url(url), options);
+			request.activeRequests[requestKey].requestPromise = requestPromise;
+			response = await requestPromise;
 		} catch (e) {
 			if (options.ignoreAbort && (e + "").match(/Request was aborted/)) {
 				return { abort: true };
@@ -61,15 +75,18 @@ export const request: RequestApi = {
 		checkAppVersion(response);
 
 		// handle the case where the request was aborted too late, and we need to abort the response via timestamp check
-		if (abortKey) {
+		if (shouldAbort) {
 			// If the request was aborted too late, but there was still another request that was made after the current,
 			// then abort the current request with an abort flag
-			if (timestamp < request.abortControllers[abortKey].timestamp) {
+			if (timestamp < request.activeRequests[requestKey].timestamp) {
 				return { abort: true };
 			}
+		}
 
-			// Otherwise, the current is the most recent request, so we can delete the abort controller
-			delete request.abortControllers[abortKey];
+		// If this request is the active request for the requestKey, we can clear this key from active requests
+		if (request.activeRequests[requestKey].timestamp === timestamp) {
+			// Remove the request from the active requests list
+			delete request.activeRequests[requestKey];
 		}
 
 		const result = await response.json();
@@ -94,9 +111,12 @@ export const request: RequestApi = {
 
 	async poll(url: string, options, interval, fnUntil) {
 		let response;
+		if (!fnUntil) {
+			fnUntil = (response: HttpResponse) => !!response;
+		}
 		do {
 			response = await request.call(url, options);
-			await sleep(interval);
+			await sleep(interval || 1000);
 		} while (!fnUntil(response));
 
 		return response;

package/src/helpers/routes.ts

@@ -56,11 +56,10 @@ export function useActionRoutes(baseUrl: string, extend?: object): ListControlsR
 		async applyAction(action, target, data, options?) {
 			options = {
 				...options,
-				ignoreAbort: true,
+				waitOnPrevious: true,
 				headers: {
 					...options?.headers,
-					// @ts-expect-error This header is fine
-					"X-Timestamp": Date.now()
+					"X-Timestamp": Date.now().toString()
 				}
 			};
 			data = data || {};
@@ -87,7 +86,7 @@ export function useActionRoutes(baseUrl: string, extend?: object): ListControlsR
 		batchAction(action, targets, data, options?) {
 			options = {
 				...options,
-				ignoreAbort: true
+				waitOnPrevious: true
 			};
 			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data }, options);
 		},

package/src/types/actions.d.ts

@@ -1,8 +1,8 @@
-import { FilterGroup, ListController, ListControlsRoutes } from "src/types/controls";
-import { FormField } from "src/types/forms";
-import { TableColumn } from "src/types/tables";
 import { ComputedRef, Ref, ShallowRef, VNode } from "vue";
+import { FilterGroup, ListController, ListControlsRoutes } from "./controls";
+import { FormField } from "./forms";
 import { AnyObject, TypedObject } from "./shared";
+import { TableColumn } from "./tables";
 
 export interface ActionTargetItem extends TypedObject {
 	isSaving?: boolean;

package/src/types/controls.d.ts

@@ -1,5 +1,5 @@
-import { RequestCallOptions } from "src/types/requests";
 import { ComputedRef, Ref, ShallowRef } from "vue";
+import { RequestCallOptions } from "../types";
 import { ActionOptions, ActionTargetItem, ResourceAction } from "./actions";
 import { AnyObject, LabelValueItem } from "./shared";
 

package/src/types/requests.d.ts

@@ -1,7 +1,9 @@
 import { AnyObject } from "./shared";
 
 export interface RequestApi {
-	abortControllers: { [key: string]: { abort: AbortController, timestamp: number } };
+	activeRequests: {
+		[key: string]: { requestPromise?: Promise<any>, abortController?: AbortController, timestamp: number }
+	};
 
 	url(url: string): string;
 
@@ -11,7 +13,7 @@ export interface RequestApi {
 
 	post(url: string, data?: object, options?: RequestCallOptions): Promise<any>;
 
-	poll(url: string, options?: RequestCallOptions, interval: number, fnUntil: (response) => boolean): Promise<any>;
+	poll(url: string, options?: RequestCallOptions, interval?: number, fnUntil?: (response) => boolean): Promise<any>;
 }
 
 export interface HttpResponse {
@@ -30,7 +32,8 @@ export interface RequestOptions {
 }
 
 export interface RequestCallOptions extends RequestInit {
-	abortOn?: string;
+	requestKey?: string;
+	waitOnPrevious?: boolean;
 	ignoreAbort?: boolean;
 	params?: AnyObject;
 }

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.build.json",
-  "compilerOptions": {
-    "paths": {
-      "vue": [
-        "../../gpt-manager/spa/node_modules/vue"
-      ]
-    }
-  }
-}
-