quasar-ui-danx 0.4.30 → 0.4.32

package/package.json

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

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

@@ -2,7 +2,7 @@
   <div class="inline-block relative">
     <div
       contenteditable
-      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none focus:outline-4 hover:outline-4 rounded-sm z-10"
+      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none focus:outline-4 hover:outline-4 rounded-sm z-10 min-w-10 min-h-10"
       :style="{minWidth, minHeight}"
       :class="contentClass"
       @input="onInput"
@@ -12,9 +12,9 @@
       {{ text }}
     </div>
     <div
-      v-if="!text && placeholder"
+      v-if="!text && placeholder && !hasFocus"
       ref="placeholderDiv"
-      class="text-gray-600 absolute-top-left whitespace-nowrap z-1"
+      class="text-gray-600 absolute-top-left whitespace-nowrap z-1 pointer-events-none"
     >
       {{ placeholder }}
     </div>
@@ -27,11 +27,13 @@ import { computed, onMounted, ref, watch } from "vue";
 
 const emit = defineEmits(["update:model-value", "change"]);
 const props = withDefaults(defineProps<{
-	modelValue: string;
+	modelValue?: string;
 	color?: string;
+	textColor?: string;
 	debounceDelay?: number;
 	placeholder?: string;
 }>(), {
+	modelValue: "",
 	// NOTE: You must safe-list required colors in tailwind.config.js
 	//       Add text-blue-900, hover:bg-blue-200, hover:outline-blue-200, focus:outline-blue-200 and focus:bg-blue-200 for the following config
 	color: "blue-200",
@@ -72,6 +74,7 @@ function onInput(e) {
 const contentClass = computed(() => [
 	`hover:bg-${props.color} focus:bg-${props.color}`,
 	`hover:text-${props.textColor} focus:text-${props.textColor}`,
-	`hover:outline-${props.color} focus:outline-${props.color}`
+	`hover:outline-${props.color} focus:outline-${props.color}`,
+	text.value ? "" : "!bg-none"
 ]);
 </script>

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

@@ -24,7 +24,9 @@
       <FilePreview
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"
-        class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
+        class="m-2 cursor-pointer bg-gray-200"
+        :class="filePreviewClass"
+        :style="styleSize"
         :file="file"
         :related-files="file.transcodes || uploadedFiles"
         downloadable
@@ -33,14 +35,19 @@
       />
       <div
         v-if="!disable && !readonly"
-        class="dx-add-remove-files w-32 h-32 m-2 rounded-2xl flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
+        class="dx-add-remove-files m-2 flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
+        :class="filePreviewClass"
+        :style="styleSize"
       >
         <div
           class="dx-add-file flex-grow p-1 pt-3 flex justify-center items-center bg-green-200 text-green-700 w-full hover:bg-green-100"
           @click="$refs.file.click()"
         >
           <div>
-            <AddFileIcon class="w-10 m-auto" />
+            <AddFileIcon
+              class="m-auto"
+              :class="addIconClass"
+            />
             <div class="mt-1 text-center">
               Add
             </div>
@@ -66,7 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import { useMultiFileUpload } from "../../../../helpers";
 import { ImageIcon as AddFileIcon, TrashIcon as RemoveFileIcon } from "../../../../svg";
 import { FormField, UploadedFile } from "../../../../types";
@@ -74,14 +81,28 @@ import { FilePreview } from "../../../Utility";
 import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	modelValue?: UploadedFile[];
 	field?: FormField;
 	label?: string;
 	showName?: boolean;
 	disable?: boolean;
 	readonly?: boolean;
-}>();
+	width?: number | string;
+	height?: number | string;
+	addIconClass?: string;
+	filePreviewClass?: string;
+	filePreviewBtnSize?: string;
+}>(), {
+	modelValue: null,
+	field: null,
+	label: "",
+	width: 128,
+	height: 128,
+	addIconClass: "w-10",
+	filePreviewClass: "rounded-2xl",
+	filePreviewBtnSize: "sm"
+});
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
@@ -90,4 +111,11 @@ onMounted(() => {
 	}
 });
 onComplete(() => emit("update:model-value", uploadedFiles.value));
+
+const styleSize = computed(() => {
+	return {
+		width: typeof props.width === "number" ? `${props.width}px` : props.width,
+		height: typeof props.height === "number" ? `${props.height}px` : props.height
+	};
+});
 </script>

package/src/components/ActionTable/controls.ts

@@ -72,7 +72,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	}
 
 	async function loadList() {
-		if (!isInitialized) return;
+		if (!isInitialized || options.isListEnabled === false) return;
 		// isLoadingList.value = true;
 		try {
 			setPagedItems(await options.routes.list(pager.value));
@@ -84,7 +84,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	}
 
 	async function loadSummary() {
-		if (!options.routes.summary || !isInitialized) return;
+		if (!options.routes.summary || !isInitialized || options.isSummaryEnabled === false) return;
 
 		isLoadingSummary.value = true;
 		const summaryFilter: ListControlsFilter = { id: null, ...activeFilter.value, ...globalFilter.value };
@@ -115,7 +115,8 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	 * Loads the filter field options for the current filter.
 	 */
 	async function loadFieldOptions() {
-		if (!options.routes.fieldOptions) return;
+		if (!options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
+
 		isLoadingFilters.value = true;
 		try {
 			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
@@ -207,7 +208,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	 * Loads more items into the list.
 	 */
 	async function loadMore(index: number, perPage: number | undefined = undefined) {
-		if (!options.routes.more) return false;
+		if (!options.routes.more || options.isListEnabled === false) return false;
 
 		try {
 			const newItems = await options.routes.more({
@@ -296,7 +297,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	async function getActiveItemDetails() {
 		try {
 			const latestResult = latestCallOnly("active-item", async () => {
-				if (!activeItem.value || !options.routes.details) return undefined;
+				if (!activeItem.value || !options.routes.details || options.isDetailsEnabled === false) return undefined;
 				return await options.routes.details(activeItem.value);
 			});
 
@@ -414,12 +415,22 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 		options.routes.export && await options.routes.export(filter);
 	}
 
+	function setOptions(newOptions: Partial<ListControlsOptions>) {
+		options = { ...options, ...newOptions };
+	}
+
 	// Initialize the list actions and load settings, lists, summaries, filter fields, etc.
-	function initialize() {
+	function initialize(updateOptions?: Partial<ListControlsOptions>) {
 		const vueRouter = getVueRouter();
 		isInitialized = true;
+
+		if (updateOptions) {
+			options = { ...options, ...updateOptions };
+		}
+
 		loadSettings();
 
+
 		/**
 		 * Watch the id params in the route and set the active item to the item with the given id.
 		 */
@@ -496,6 +507,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 
 		// List controls
 		initialize,
+		setOptions,
 		resetPaging,
 		setPagination,
 		setSelectedRows,

package/src/components/Utility/Files/FilePreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex justify-center bg-gray-100 overflow-hidden"
+    class="group relative flex justify-center bg-gray-100 overflow-hidden"
     :class="{'rounded-2xl': !square}"
   >
     <template v-if="computedImage">
@@ -91,10 +91,10 @@
       </slot>
     </template>
 
-    <div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
+    <div class="absolute top-1 right-1 flex items-center flex-nowrap justify-between space-x-1 transition-all opacity-0 group-hover:opacity-100">
       <QBtn
         v-if="downloadable && computedImage?.url"
-        size="sm"
+        :size="btnSize"
         class="dx-file-preview-download py-1 px-2 opacity-70 hover:opacity-100"
         :class="downloadButtonClass"
         @click.stop="download(computedImage.url)"
@@ -104,7 +104,7 @@
 
       <QBtn
         v-if="removable"
-        size="sm"
+        :size="btnSize"
         class="dx-file-preview-remove bg-red-900 text-white opacity-50 hover:opacity-100 py-1 px-2"
         @click.stop="onRemove"
       >
@@ -158,6 +158,7 @@ export interface FilePreviewProps {
 	removable?: boolean;
 	disabled?: boolean;
 	square?: boolean;
+	btnSize?: "xs" | "sm" | "md" | "lg";
 }
 
 const emit = defineEmits(["remove"]);
@@ -172,7 +173,8 @@ const props = withDefaults(defineProps<FilePreviewProps>(), {
 	downloadable: false,
 	removable: false,
 	disabled: false,
-	square: false
+	square: false,
+	btnSize: "sm"
 });
 
 

package/src/helpers/actions.ts

@@ -133,7 +133,19 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 				activeActionVnode.value = {
 					vnode,
 					confirm: async (confirmInput: any) => {
-						const result = await onConfirmAction(action, target, { ...input, ...confirmInput });
+
+						// Resolve the input based on the useInputFromConfirm option
+						// Not setting useInputFromConfirm will merge the input from the confirm dialog with the input from the action
+						let resolvedInput;
+						if (action.useInputFromConfirm === false) {
+							resolvedInput = input;
+						} else if (action.useInputFromConfirm === true) {
+							resolvedInput = confirmInput;
+						} else {
+							resolvedInput = { ...input, ...confirmInput };
+						}
+
+						const result = await onConfirmAction(action, target, resolvedInput);
 
 						// Only resolve when we have a non-error response, so we can show the error message w/o
 						// hiding the dialog / vnode
@@ -166,6 +178,10 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionGlobal
 			result.item = storeObject(result.item);
 		}
 
+		if (result?.result?.__type) {
+			result.result = storeObject(result.result);
+		}
+
 		return result;
 	}
 

package/src/helpers/objectStore.ts

@@ -19,6 +19,10 @@ export function storeObjects<T extends TypedObject>(newObjects: T[]) {
  * Returns the stored object that should be used instead of the passed object as the returned object is shared across the system
  */
 export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredObjects: AnyObject = {}): ShallowReactive<T> {
+	if (typeof newObject !== "object") {
+		return newObject;
+	}
+	
 	const id = newObject?.id || newObject?.name;
 	const type = newObject?.__type;
 	if (!id || !type) return shallowReactive(newObject);
@@ -76,9 +80,37 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 		store.set(objectKey, reactiveObject);
 	}
 
+	if (reactiveObject.__deleted_at) {
+		removeObjectFromLists(reactiveObject);
+	}
+
 	return reactiveObject;
 }
 
+/**
+ * Remove an object from all lists in the store
+ */
+function removeObjectFromLists<T extends TypedObject>(object: T) {
+	for (const storedObject of store.values()) {
+		for (const key of Object.keys(storedObject)) {
+			const value = storedObject[key];
+			if (Array.isArray(value) && value.length > 0) {
+				const index = value.findIndex(v => v.__id === object.__id && v.__type === object.__type);
+				if (index !== -1) {
+					value.splice(index, 1);
+					storedObject[key] = [...value];
+				}
+			}
+		}
+	}
+}
+
+/**
+ * Auto refresh an object based on a condition and a callback. Returns the timeout ID for the auto-refresh.
+ * NOTE: Use the timeout ID to clear the auto-refresh when the object is no longer needed (eg: when the component is unmounted)
+ */
+const registeredAutoRefreshes: AnyObject = {};
+
 export async function autoRefreshObject<T extends TypedObject>(object: T, condition: (object: T) => boolean, callback: (object: T) => Promise<T>, interval = 3000) {
 	if (!object?.id || !object?.__type) {
 		throw new Error("Invalid stored object. Cannot auto-refresh");
@@ -88,11 +120,20 @@ export async function autoRefreshObject<T extends TypedObject>(object: T, condit
 		const refreshedObject = await callback(object);
 
 		if (!refreshedObject.id) {
-			return FlashMessages.error(`Failed to refresh ${object.__type} (${object.id}) status: ` + object.name);
+			FlashMessages.error(`Failed to refresh ${object.__type} (${object.id}) status: ` + object.name);
+			return null;
 		}
 
 		storeObject(refreshedObject);
 	}
 
-	setTimeout(() => autoRefreshObject(object, condition, callback), interval);
+	// Save the timeoutId to the object so it can be cleared when the object refresh is no longer needed
+	const timeoutId = setTimeout(() => autoRefreshObject(object, condition, callback, interval), interval);
+	registeredAutoRefreshes[object.__type + ":" + object.id] = timeoutId;
+}
+
+export async function stopAutoRefreshObject<T extends TypedObject>(object: T) {
+	const timeoutId = registeredAutoRefreshes[object.__type + ":" + object.id];
+
+	timeoutId && clearTimeout(timeoutId);
 }

package/src/helpers/request.ts

@@ -35,6 +35,18 @@ export const request: RequestApi = {
 			options.signal = abort.signal;
 		}
 
+		if (options.params) {
+			// Transform object values in params to JSON strings
+			for (const [key, value] of Object.entries(options.params)) {
+				if (typeof value === "object" && value !== null) {
+					options.params[key] = JSON.stringify(value);
+				}
+			}
+			
+			url += (url.match(/\?/) ? "&" : "?") + new URLSearchParams(options.params).toString();
+			delete options.params;
+		}
+
 		const response = await fetch(request.url(url), options);
 
 		// Verify the app version of the client and server are matching

package/src/helpers/utils.ts

@@ -12,6 +12,13 @@ export function sleep(delay: number) {
 	return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
+/**
+ * Deep clone an object
+ */
+export function cloneDeep(obj: any) {
+	return JSON.parse(JSON.stringify(obj));
+}
+
 /**
  * Poll a callback function until the result is true
  */

package/src/types/actions.d.ts

@@ -32,6 +32,7 @@ export interface ActionOptions<T = ActionTargetItem> {
 	category?: string;
 	class?: string;
 	debounce?: number;
+	useInputFromConfirm?: boolean;
 	optimistic?: boolean | ((action: ActionOptions<T>, target: T | null, input: any) => void);
 	vnode?: (target: ActionTarget<T>, data: any) => VNode | any;
 	enabled?: (target: ActionTarget<T>) => boolean;

package/src/types/controls.d.ts

@@ -20,7 +20,7 @@ export interface FilterGroup {
 }
 
 export interface ListControlsRoutes<T = ActionTargetItem> {
-	list(pager?: ListControlsPagination): Promise<T[]>;
+	list(pager?: ListControlsPagination): Promise<PagedItems>;
 
 	summary?(filter?: ListControlsFilter): Promise<AnyObject>;
 
@@ -47,6 +47,10 @@ export interface ListControlsOptions {
 	urlPattern?: RegExp | null;
 	filterDefaults?: Record<string, object>;
 	refreshFilters?: boolean;
+	isListEnabled?: boolean;
+	isSummaryEnabled?: boolean;
+	isDetailsEnabled?: boolean;
+	isFieldOptionsEnabled?: boolean;
 }
 
 export interface ListControlsPagination {
@@ -92,7 +96,8 @@ export interface ListController<T = ActionTargetItem> {
 	activePanel: Ref<string | null>;
 
 	// List Controls
-	initialize: () => void;
+	initialize: (updateOptions?: Partial<ListControlsOptions>) => void;
+	setOptions: (updateOptions: Partial<ListControlsOptions>) => void;
 	resetPaging: () => void;
 	setPagination: (updated: Partial<ListControlsPagination>) => void;
 	setSelectedRows: (selection: T[]) => void;

package/src/types/requests.d.ts

@@ -31,5 +31,6 @@ export interface RequestOptions {
 
 export interface RequestCallOptions extends RequestInit {
 	abortOn?: string;
+	params?: AnyObject;
 }