quasar-ui-danx 0.4.31 → 0.4.33

package/package.json

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

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

@@ -1,8 +1,8 @@
 <template>
   <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 min-w-10 min-h-10"
+      :contenteditable="readonly ? 'false' : 'true'"
+      class="relative inline-block transition duration-300 outline-none outline-offset-0 border-none rounded-sm z-10 min-w-10 min-h-10"
       :style="{minWidth, minHeight}"
       :class="contentClass"
       @input="onInput"
@@ -12,7 +12,7 @@
       {{ text }}
     </div>
     <div
-      v-if="!text && placeholder && !hasFocus"
+      v-if="!text && placeholder && !hasFocus && !readonly"
       ref="placeholderDiv"
       class="text-gray-600 absolute-top-left whitespace-nowrap z-1 pointer-events-none"
     >
@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<{
 	color?: string;
 	textColor?: string;
 	debounceDelay?: number;
+	readonly?: boolean;
 	placeholder?: string;
 }>(), {
 	modelValue: "",
@@ -43,16 +44,16 @@ const props = withDefaults(defineProps<{
 });
 
 const text = ref(props.modelValue);
-const placeholderDiv = ref(null);
-const minWidth = ref(0);
-const minHeight = ref(0);
+const placeholderDiv = ref<Element | null>(null);
+const minWidth = ref<string>("0");
+const minHeight = ref<string>("0");
 const hasFocus = ref(false);
 
 onMounted(() => {
 	// Set the min-width to the width of the placeholder
 	if (placeholderDiv.value) {
-		minWidth.value = placeholderDiv.value.offsetWidth + "px";
-		minHeight.value = placeholderDiv.value.offsetHeight + "px";
+		minWidth.value = placeholderDiv.value?.offsetWidth + "px";
+		minHeight.value = placeholderDiv.value?.offsetHeight + "px";
 	}
 });
 
@@ -72,9 +73,12 @@ 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}`,
+	...(props.readonly ? [] : [
+		`hover:bg-${props.color} focus:bg-${props.color}`,
+		`hover:text-${props.textColor} focus:text-${props.textColor}`,
+		`hover:outline-${props.color} focus:outline-${props.color}`,
+		"focus:outline-4 hover:outline-4"
+	]),
 	text.value ? "" : "!bg-none"
 ]);
 </script>

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

@@ -22,6 +22,7 @@
       label=""
       :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
       class="max-w-full dx-select-field"
+      :class="selectClass"
       @filter="onFilter"
       @clear="onClear"
       @popup-show="onShow"
@@ -82,6 +83,7 @@ export interface Props extends QSelectProps {
 	selectionLabel?: string | ((option) => string);
 	chipLimit?: number;
 	inputClass?: string;
+	selectClass?: string;
 	selectionClass?: string;
 	options?: unknown[];
 	filterable?: boolean;
@@ -97,6 +99,7 @@ const props = withDefaults(defineProps<Props>(), {
 	selectionLabel: null,
 	chipLimit: 3,
 	inputClass: "",
+	selectClass: "",
 	selectionClass: "",
 	options: () => [],
 	filterFn: null,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-stretch flex-nowrap gap-x-4">
     <QBtn
-      class="bg-green-900 px-4"
+      :class="createClass"
       :loading="loading"
       @click="$emit('create')"
     >
@@ -11,6 +11,14 @@
       />
       {{ createText }}
     </QBtn>
+    <ShowHideButton
+      v-if="showEdit"
+      v-model="editing"
+      :disable="!canEdit"
+      :label="editText"
+      :class="editClass"
+      :show-icon="EditIcon"
+    />
     <SelectField
       v-model="selected"
       class="flex-grow"
@@ -19,17 +27,10 @@
       :select-by-object="selectByObject"
       :option-label="optionLabel"
     />
-    <ShowHideButton
-      v-if="showEdit"
-      v-model="editing"
-      :disable="!canEdit"
-      :label="editText"
-      class="bg-sky-800 w-1/5"
-    />
   </div>
 </template>
 <script setup lang="ts">
-import { FaSolidPlus as CreateIcon } from "danx-icon";
+import { FaSolidPencil as EditIcon, FaSolidPlus as CreateIcon } from "danx-icon";
 import { QSelectOption } from "quasar";
 import { ActionTargetItem } from "../../../../types";
 import { ShowHideButton } from "../../../Utility/Buttons";
@@ -47,10 +48,14 @@ withDefaults(defineProps<{
 	optionLabel?: string;
 	createText?: string;
 	editText?: string;
+	createClass?: string;
+	editClass?: string;
 	clearable?: boolean;
 }>(), {
 	optionLabel: "label",
-	createText: "Create",
-	editText: "Edit"
+	createText: "",
+	editText: "",
+	createClass: "bg-green-900 px-4",
+	editClass: "bg-sky-800 px-4"
 });
 </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/DragAndDrop/ListItemDraggable.vue

@@ -1,19 +1,23 @@
 <template>
   <div
-    :class="{'cursor-move': !showHandle}"
-    draggable="true"
-    @dragstart.stop="dragAndDrop.dragStart"
-    @dragend="dragAndDrop.dragEnd"
+    :class="{'cursor-move': !showHandle && !disabled}"
+    :draggable="disabled ? undefined : 'true'"
+    @dragstart.stop="disabled ? null : dragAndDrop.dragStart"
+    @dragend="disabled ? null : dragAndDrop.dragEnd"
   >
     <div :class="contentClass">
       <div
         v-if="showHandle"
-        class="cursor-move"
-        :class="handleClass"
+        :class="resolvedHandleClass"
       >
+        <div
+          v-if="disabled"
+          :class="handleSize"
+        />
         <SvgImg
+          v-else
           :svg="DragHandleIcon"
-          class="w-4 h-4"
+          :class="handleSize"
           alt="drag-handle"
         />
       </div>
@@ -24,6 +28,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from "vue";
 import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
 import { SvgImg } from "../Utility";
 import { ListDragAndDrop } from "./listDragAndDrop";
@@ -37,14 +42,21 @@ const props = withDefaults(defineProps<{
 	changeDropZone?: boolean;
 	contentClass?: string | object;
 	handleClass?: string | object;
+	handleSize?: string;
 	listItems?: any[];
+	disabled?: boolean;
 }>(), {
 	direction: "vertical",
+	handleSize: "w-4 h-4",
 	handleClass: "",
 	contentClass: "flex flex-nowrap items-center",
 	listItems: () => []
 });
 
+const resolvedHandleClass = computed(() => ({
+	"cursor-move": !props.disabled,
+	...(typeof props.handleClass === "string" ? { [props.handleClass]: true } : props.handleClass)
+}));
 const dragAndDrop = new ListDragAndDrop()
 	.setDropZone(props.dropZone)
 	.setOptions({ showPlaceholder: true, allowDropZoneChange: props.changeDropZone, direction: props.direction })

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, shallowRef } from "vue";
+import { h, isReactive, Ref, shallowReactive, shallowRef } from "vue";
 import { ConfirmActionDialog, CreateNewWithNameDialog } from "../components";
 import type { ActionGlobalOptions, ActionOptions, ActionTarget, ListController, ResourceAction } from "../types";
 import { FlashMessages } from "./FlashMessages";
@@ -48,35 +48,39 @@ 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
-		const baseOptions = actions.find(a => a.name === actionName) || { name: actionName };
+		let resourceAction: Partial<ResourceAction> = actions.find(a => a.name === actionName) || { name: actionName };
 
 		if (actionOptions) {
-			Object.assign(baseOptions, actionOptions);
+			Object.assign(resourceAction, actionOptions);
 		}
 
 		// If the action is already reactive, return it
-		if (isReactive(baseOptions) && "__type" in baseOptions) return baseOptions as ResourceAction;
-
-		const resourceAction: ResourceAction = storeObject({
-			onAction: globalOptions?.routes?.applyAction,
-			onBatchAction: globalOptions?.routes?.batchAction,
-			onBatchSuccess: globalOptions?.controls?.clearSelectedRows,
-			...globalOptions,
-			...baseOptions,
-			trigger: (target, input) => performAction(resourceAction, target, input),
-			isApplying: false,
-			__type: "__Action:" + namespace
-		});
+		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
+			});
 
-		// Assign Trigger function if it doesn't exist
-		if (baseOptions.debounce) {
-			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), baseOptions.debounce);
+			// Splice the resourceAction in place of the action in the actions list
+			actions.splice(actions.findIndex(a => a.name === actionName), 1, resourceAction as ResourceAction);
 		}
 
-		// Splice the resourceAction in place of the action in the actions list
-		actions.splice(actions.findIndex(a => a.name === actionName), 1, resourceAction);
+		// Return a clone of the action so it can be modified without affecting the original
+		const clonedAction = shallowReactive({ ...resourceAction }) as ResourceAction;
 
-		return resourceAction;
+		// Assign Trigger function if it doesn't exist
+		if (clonedAction.debounce) {
+			clonedAction.trigger = useDebounceFn((target, input) => performAction(clonedAction, target, input), clonedAction.debounce);
+		} else {
+			clonedAction.trigger = (target, input) => performAction(clonedAction, target, input);
+		}
+
+		return clonedAction;
 	}
 
 	/**
@@ -133,7 +137,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

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,31 @@ 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)
@@ -101,9 +127,8 @@ export async function autoRefreshObject<T extends TypedObject>(object: T, condit
 		storeObject(refreshedObject);
 	}
 
-
+	// 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;
 }
 

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/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

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