quasar-ui-danx 0.3.46 → 0.3.48

package/package.json

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

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

@@ -11,7 +11,7 @@
       class="text-sm font-semibold"
     />
     <div
-      v-if="!disable && !readonly"
+      v-if="!disable && !readonly && !hideControls"
       class="text-sm my-2"
     >
       <a
@@ -23,20 +23,21 @@
         class="ml-3 text-red-900"
         @click="clearUploadedFiles"
       >Clear</a>
-      <input
-        ref="file"
-        class="hidden"
-        type="file"
-        multiple
-        @change="onFilesSelected"
-      >
     </div>
 
+    <input
+      ref="file"
+      class="hidden"
+      type="file"
+      multiple
+      @change="onFilesSelected"
+    >
+
     <div class="max-w-[50em] flex items-stretch justify-start">
       <FilePreview
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"
-        class="w-32 m-2 cursor-pointer bg-gray-200"
+        class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
         :class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
         :image="file"
         :related-files="uploadedFiles"
@@ -46,7 +47,7 @@
       />
       <FilePreview
         v-if="!disable && !readonly"
-        class="w-32 m-2 cursor-pointer border border-dashed border-blue-600"
+        class="w-32 h-32 m-2 cursor-pointer border border-dashed border-blue-600"
         disabled
         @click="$refs.file.click()"
       />
@@ -61,31 +62,33 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, watch } from "vue";
 import { useMultiFileUpload } from "../../../../helpers";
 import { FilePreview } from "../../../Utility";
 import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
-  modelValue: {
-    type: [Object, String],
-    default: null
-  },
-  field: {
-    type: Object,
-    required: true
-  },
-  showName: Boolean,
-  disable: Boolean,
-  readonly: Boolean
+	modelValue: {
+		type: [Object, String],
+		default: null
+	},
+	field: {
+		type: Object,
+		required: true
+	},
+	showName: Boolean,
+	disable: Boolean,
+	readonly: Boolean,
+	hideControls: Boolean
 });
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
-  if (props.modelValue) {
-    uploadedFiles.value = props.modelValue;
-  }
+	if (props.modelValue) {
+		uploadedFiles.value = props.modelValue;
+	}
 });
+watch(() => props.modelValue, () => uploadedFiles.value = props.modelValue);
 onComplete(() => emit("update:model-value", uploadedFiles.value));
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="dx-text-field">
     <QInput
       v-if="!readonly"
       :data-dusk="'text-field-' + field?.id"
@@ -12,8 +12,9 @@
       :input-class="inputClass"
       :class="parentClass"
       stack-label
-      :rows="rows"
-      :type="type"
+      :autogrow="rows > 1"
+      :type="rows > 1 ? 'textarea' : type"
+      :input-style="rows ? {minHeight: rows * 1.5 + 'rem'} : {}"
       :model-value="modelValue"
       :debounce="debounce"
       @keydown.enter="$emit('submit')"

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -75,6 +75,7 @@
         :label="field.label || undefined"
         :no-label="noLabel"
         :show-name="showName"
+        :rows="field.type === 'TEXTAREA' ? 5 : 1"
         :clearable="field.clearable || clearable"
         :disable="disable"
         :readonly="readonly"
@@ -154,6 +155,7 @@ const FORM_FIELD_MAP = {
 	INTEGER: IntegerField,
 	NUMBER: NumberField,
 	TEXT: TextField,
+	TEXTAREA: TextField,
 	NO_INPUT: NoInputField,
 	SINGLE_FILE: SingleFileField,
 	MULTI_FILE: MultiFileField,

package/src/components/ActionTable/listControls.ts

@@ -156,7 +156,7 @@ export function useListControls({
 		}
 
 		// Add a reactive isSaving property to each item (for performance reasons in checking saving state)
-		data = data.map((item: any) => {
+		data = data?.map((item: any) => {
 			// We want to keep the isSaving state if it is already set, as optimizations prevent reloading the
 			// components, and therefore reactivity is not responding to the new isSaving state
 			const oldItem = pagedItems.value?.data?.find(i => i.id === item.id);
@@ -182,7 +182,7 @@ export function useListControls({
 		const data = pagedItems.value?.data?.map(item => (item.id === updatedItem.id && (item.updated_at === null || item.updated_at <= updatedItem.updated_at)) ? updatedItem : item);
 		setPagedItems({
 			data,
-			meta: { total: pagedItems.value.meta.total }
+			meta: { total: pagedItems.value?.meta?.total || 0 }
 		});
 
 		// Update the active item as well if it is set
@@ -205,8 +205,8 @@ export function useListControls({
 
 		if (newItems && newItems.length > 0) {
 			setPagedItems({
-				data: [...pagedItems.value.data, ...newItems],
-				meta: { total: pagedItems.value.meta.total }
+				data: [...pagedItems.value?.data || [], ...newItems],
+				meta: { total: pagedItems.value?.meta?.total || 0 }
 			});
 			return true;
 		}

package/src/components/Utility/Dialogs/InfoDialog.vue

@@ -34,6 +34,7 @@
         <slot>{{ content }}</slot>
       </QCardSection>
       <div
+        v-if="!hideButtons"
         class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
       >
         <div class="flex-grow text-right">
@@ -61,35 +62,36 @@ import { XIcon as CloseIcon } from "@heroicons/vue/outline";
 
 const emit = defineEmits(["update:model-value", "close"]);
 defineProps({
-  modelValue: { type: [Boolean, Object], default: true },
-  title: {
-    type: String,
-    default: ""
-  },
-  titleClass: {
-    type: String,
-    default: ""
-  },
-  subtitle: {
-    type: String,
-    default: ""
-  },
-  content: {
-    type: String,
-    default: ""
-  },
-  backdropDismiss: Boolean,
-  maximized: Boolean,
-  fullWidth: Boolean,
-  fullHeight: Boolean,
-  doneText: {
-    type: String,
-    default: "Done"
-  }
+	modelValue: { type: [Boolean, Object], default: true },
+	title: {
+		type: String,
+		default: ""
+	},
+	titleClass: {
+		type: String,
+		default: ""
+	},
+	subtitle: {
+		type: String,
+		default: ""
+	},
+	content: {
+		type: String,
+		default: ""
+	},
+	backdropDismiss: Boolean,
+	hideButtons: Boolean,
+	maximized: Boolean,
+	fullWidth: Boolean,
+	fullHeight: Boolean,
+	doneText: {
+		type: String,
+		default: "Done"
+	}
 });
 
 function onClose() {
-  emit("update:model-value", false);
-  emit("close");
+	emit("update:model-value", false);
+	emit("close");
 }
 </script>

package/src/helpers/actions.ts

@@ -3,31 +3,31 @@ import { Ref, shallowRef, VNode } from "vue";
 import { FlashMessages } from "./FlashMessages";
 
 export type ActionTargetItem = {
-    id: number | string;
-    isSaving: Ref<boolean>;
-    [key: string]: any;
+	id: number | string;
+	isSaving: Ref<boolean>;
+	[key: string]: any;
 };
 export type ActionTarget = ActionTargetItem[] | ActionTargetItem;
 
 export interface ActionOptions {
-    name?: string;
-    label?: string;
-    menu?: boolean;
-    batch?: boolean;
-    category?: string;
-    class?: string;
-    debounce?: number;
-    trigger?: (target: ActionTarget, input: any) => Promise<any>;
-    vnode?: (target: ActionTarget) => VNode;
-    enabled?: (target: object) => boolean;
-    batchEnabled?: (targets: object[]) => boolean;
-    optimistic?: (action: ActionOptions, target: object, input: any) => void;
-    onAction?: (action: string | null | undefined, target: object, input: any) => Promise<any>;
-    onBatchAction?: (action: string | null | undefined, targets: object[], input: any) => Promise<any>;
-    onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
-    onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
-    onError?: (result: any, targets: ActionTarget, input: any) => any;
-    onFinish?: (result: any, targets: ActionTarget, input: any) => any;
+	name?: string;
+	label?: string;
+	menu?: boolean;
+	batch?: boolean;
+	category?: string;
+	class?: string;
+	debounce?: number;
+	trigger?: (target: ActionTarget, input: any) => Promise<any>;
+	vnode?: (target: ActionTarget) => VNode;
+	enabled?: (target: object) => boolean;
+	batchEnabled?: (targets: object[]) => boolean;
+	optimistic?: (action: ActionOptions, target: object, input: any) => void;
+	onAction?: (action: string | null | undefined, target: object, input: any) => Promise<any>;
+	onBatchAction?: (action: string | null | undefined, targets: object[], input: any) => Promise<any>;
+	onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
+	onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
+	onError?: (result: any, targets: ActionTarget, input: any) => any;
+	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
 }
 
 export const activeActionVnode: Ref = shallowRef(null);
@@ -40,173 +40,173 @@ export const activeActionVnode: Ref = shallowRef(null);
  * @param {ActionOptions | null} globalOptions
  */
 export function useActions(actions: ActionOptions[], globalOptions: ActionOptions | null = null) {
-    const mappedActions = actions.map(action => {
-        const mappedAction: ActionOptions = { ...globalOptions, ...action };
-        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;
-    });
-
-    /**
-     * Set the reactive saving state of a target
-     */
-    function setTargetSavingState(target: ActionTarget, saving: boolean) {
-        if (Array.isArray(target)) {
-            for (const t of target) {
-                t.isSaving.value = saving;
-            }
-        } else {
-            target.isSaving.value = saving;
-        }
-    }
-
-    /**
-     * Perform an action on a set of targets
-     *
-     * @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, 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}`);
-        }
-
-        // 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;
-
-        // Run the onStart handler if it exists and quit the operation if it returns false
-        if (action.onStart) {
-            if (!action.onStart(action, target, input)) {
-                return;
-            }
-        }
-
-        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.
-            // This will tell the ActionVnode to render the input component, and confirm or cancel the
-            // action The confirm function has the input from the component passed and will resolve the promise
-            // with the result of the action
-            result = await new Promise((resolve, reject) => {
-                activeActionVnode.value = {
-                    vnode,
-                    confirm: async (confirmInput: any) => {
-                        const result = await onConfirmAction(action, target, { ...input, ...confirmInput });
-
-                        // Only resolve when we have a non-error response, so we can show the error message w/o
-                        // hiding the dialog / vnode
-                        if (result === undefined || result === true || result?.success) {
-                            resolve(result);
-                        }
-                    },
-                    cancel: resolve
-                };
-            });
-
-            activeActionVnode.value = null;
-        } else {
-            result = await onConfirmAction(action, target, input);
-        }
-
-        setTargetSavingState(target, false);
-
-        return result;
-    }
-
-    /**
-     * Filter the list of actions based on the provided filters in key-value pairs
-     * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
-     *
-     * @param filters
-     * @returns {ActionOptions[]}
-     */
-    function filterActions(filters: object): ActionOptions[] {
-        let filteredActions = [...mappedActions];
-
-        for (const filter of Object.keys(filters)) {
-            const filterValue = filters[filter];
-            filteredActions = filteredActions.filter((a: object) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
-        }
-        return filteredActions;
-    }
-
-    return {
-        actions: mappedActions,
-        filterActions,
-        performAction
-    };
+	const mappedActions = actions.map(action => {
+		const mappedAction: ActionOptions = { ...globalOptions, ...action };
+		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;
+	});
+
+	/**
+	 * Set the reactive saving state of a target
+	 */
+	function setTargetSavingState(target: ActionTarget, saving: boolean) {
+		if (Array.isArray(target)) {
+			for (const t of target) {
+				t.isSaving.value = saving;
+			}
+		} else if (target.isSaving) {
+			target.isSaving.value = saving;
+		}
+	}
+
+	/**
+	 * Perform an action on a set of targets
+	 *
+	 * @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, 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}`);
+		}
+
+		// 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;
+
+		// Run the onStart handler if it exists and quit the operation if it returns false
+		if (action.onStart) {
+			if (!action.onStart(action, target, input)) {
+				return;
+			}
+		}
+
+		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.
+			// This will tell the ActionVnode to render the input component, and confirm or cancel the
+			// action The confirm function has the input from the component passed and will resolve the promise
+			// with the result of the action
+			result = await new Promise((resolve, reject) => {
+				activeActionVnode.value = {
+					vnode,
+					confirm: async (confirmInput: any) => {
+						const result = await onConfirmAction(action, target, { ...input, ...confirmInput });
+
+						// Only resolve when we have a non-error response, so we can show the error message w/o
+						// hiding the dialog / vnode
+						if (result === undefined || result === true || result?.success) {
+							resolve(result);
+						}
+					},
+					cancel: resolve
+				};
+			});
+
+			activeActionVnode.value = null;
+		} else {
+			result = await onConfirmAction(action, target, input);
+		}
+
+		setTargetSavingState(target, false);
+
+		return result;
+	}
+
+	/**
+	 * Filter the list of actions based on the provided filters in key-value pairs
+	 * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
+	 *
+	 * @param filters
+	 * @returns {ActionOptions[]}
+	 */
+	function filterActions(filters: object): ActionOptions[] {
+		let filteredActions = [...mappedActions];
+
+		for (const filter of Object.keys(filters)) {
+			const filterValue = filters[filter];
+			filteredActions = filteredActions.filter((a: object) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+		}
+		return filteredActions;
+	}
+
+	return {
+		actions: mappedActions,
+		filterActions,
+		performAction
+	};
 }
 
 async function onConfirmAction(action: ActionOptions, target: ActionTarget, input: any = null) {
-    if (!action.onAction) {
-        throw new Error("No onAction handler found for the selected action:" + action.name);
-    }
-
-    let result: any;
-    try {
-        if (Array.isArray(target)) {
-            if (action.onBatchAction) {
-                result = await action.onBatchAction(action.name, target, input);
-            } else {
-                result = { error: `Action ${action.name} does not support batch actions` };
-            }
-        } else {
-            // If the action has an optimistic callback, we call it before the actual action to immediately
-            // update the UI
-            if (action.optimistic) {
-                action.optimistic(action, target, input);
-            }
-
-            result = await action.onAction(action.name, target, input);
-        }
-    } catch (e) {
-        console.error(e);
-        result = { error: `An error occurred while performing the action ${action.label}. Please try again later.` };
-    }
-
-    // If there is no return value or the result marks it as successful, we show a success message
-    if (result === undefined || result === true || result?.success) {
-        if (result?.success && Array.isArray(target)) {
-            FlashMessages.success(`Successfully performed action ${action.label} on ${target.length} items`);
-        }
-
-        if (action.onSuccess) {
-            action.onSuccess(result, target, input);
-        }
-    } else {
-        const errors = [];
-        if (result.errors) {
-            errors.push(...result.errors);
-        } else if (result.error) {
-            errors.push(typeof result.error === "string" ? result.error : result.error.message);
-        } else {
-            errors.push("An unknown error occurred. Please try again later.");
-        }
-
-        FlashMessages.combine("error", errors);
-
-        if (action.onError) {
-            action.onError(result, target, input);
-        }
-    }
-
-    if (action.onFinish) {
-        action.onFinish(result, target, input);
-    }
-
-    return result;
+	if (!action.onAction) {
+		throw new Error("No onAction handler found for the selected action:" + action.name);
+	}
+
+	let result: any;
+	try {
+		if (Array.isArray(target)) {
+			if (action.onBatchAction) {
+				result = await action.onBatchAction(action.name, target, input);
+			} else {
+				result = { error: `Action ${action.name} does not support batch actions` };
+			}
+		} else {
+			// If the action has an optimistic callback, we call it before the actual action to immediately
+			// update the UI
+			if (action.optimistic) {
+				action.optimistic(action, target, input);
+			}
+
+			result = await action.onAction(action.name, target, input);
+		}
+	} catch (e) {
+		console.error(e);
+		result = { error: `An error occurred while performing the action ${action.label}. Please try again later.` };
+	}
+
+	// If there is no return value or the result marks it as successful, we show a success message
+	if (result === undefined || result === true || result?.success) {
+		if (result?.success && Array.isArray(target)) {
+			FlashMessages.success(`Successfully performed action ${action.label} on ${target.length} items`);
+		}
+
+		if (action.onSuccess) {
+			action.onSuccess(result, target, input);
+		}
+	} else {
+		const errors = [];
+		if (result.errors) {
+			errors.push(...result.errors);
+		} else if (result.error) {
+			errors.push(typeof result.error === "string" ? result.error : result.error.message);
+		} else {
+			errors.push("An unknown error occurred. Please try again later.");
+		}
+
+		FlashMessages.combine("error", errors);
+
+		if (action.onError) {
+			action.onError(result, target, input);
+		}
+	}
+
+	if (action.onFinish) {
+		action.onFinish(result, target, input);
+	}
+
+	return result;
 }