quasar-ui-danx 0.4.42 → 0.4.45

package/package.json

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

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -57,6 +57,7 @@
           :model-value="activePanel"
           :target="activeItem"
           :panels="controller.panels"
+          :drawer-class="drawerClass"
           @update:model-value="panel => controller.activatePanel(activeItem, panel)"
           @close="controller.setActiveItem(null)"
         >
@@ -91,6 +92,7 @@ export interface ActionTableLayoutProps {
 	showFilters?: boolean;
 	tableClass?: string;
 	title?: string;
+	drawerClass?: string;
 }
 
 const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
@@ -98,7 +100,8 @@ const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
 	panelTitleField: "",
 	selection: "multiple",
 	tableClass: "",
-	title: ""
+	title: "",
+	drawerClass: ""
 });
 
 const activeFilter = computed(() => props.controller.activeFilter.value);

package/src/components/ActionTable/controls.ts

@@ -115,11 +115,11 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 	 * Loads the filter field options for the current filter.
 	 */
 	async function loadFieldOptions() {
-		if (!options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
+		if (isLoadingFilters.value || !options.routes.fieldOptions || options.isFieldOptionsEnabled === false) return;
 
 		isLoadingFilters.value = true;
 		try {
-			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
+			fieldOptions.value = await options.routes.fieldOptions() || {};
 		} catch (e) {
 			// Fail silently
 		} finally {

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -9,7 +9,10 @@
     no-route-dismiss
     @update:show="$emit('close')"
   >
-    <div class="flex flex-col flex-nowrap h-full">
+    <div
+      class="flex flex-col flex-nowrap h-full dx-panels-drawer-content"
+      :class="drawerClass"
+    >
       <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
           <slot name="header">
@@ -64,6 +67,12 @@
             <slot name="right-sidebar" />
           </div>
         </div>
+        <div
+          v-else
+          class="p-8"
+        >
+          <QSkeleton class="h-96" />
+        </div>
       </div>
     </div>
   </ContentDrawer>
@@ -76,22 +85,24 @@ import { ContentDrawer } from "../Utility";
 import PanelsDrawerPanels from "./PanelsDrawerPanels";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
-export interface Props {
+export interface PanelsDrawerProps {
 	title?: string,
 	modelValue?: string | number,
 	target: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
+	drawerClass?: string | object,
 	position?: "standard" | "right" | "left";
 	panels: ActionPanel[]
 }
 
 defineEmits(["update:model-value", "close"]);
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<PanelsDrawerProps>(), {
 	title: "",
 	modelValue: null,
 	tabsClass: "w-[13.5rem] flex-shrink-0",
-	panelsClass: "w-[80rem]",
+	panelsClass: "w-full",
+	drawerClass: "",
 	position: "right"
 });
 

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

@@ -2,7 +2,7 @@
   <QBtn
     :loading="isSaving"
     class="shadow-none"
-    :class="disabled ? 'text-slate-800 bg-slate-500 opacity-50' : colorClass"
+    :class="disabled ? disabledClass : colorClass"
     :disable="disabled"
     @click="()=> onAction()"
   >
@@ -79,6 +79,7 @@ export interface ActionButtonProps {
 	target?: ActionTarget;
 	input?: object;
 	disabled?: boolean;
+	disabledClass?: string;
 	confirm?: boolean;
 	confirmText?: string;
 }
@@ -94,7 +95,8 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	action: null,
 	target: null,
 	input: null,
-	confirmText: "Are you sure?"
+	confirmText: "Are you sure?",
+	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
 });
 
 const colorClass = computed(() => {
@@ -195,13 +197,14 @@ const isSaving = computed(() => {
 
 const isConfirming = ref(false);
 function onAction(isConfirmed = false) {
+	if (props.disabled) return;
+
 	// Make sure this action is confirmed if the confirm prop is set
 	if (props.confirm && !isConfirmed) {
 		isConfirming.value = true;
 		return false;
 	}
 	isConfirming.value = false;
-	if (props.disabled) return;
 	if (props.action) {
 		props.action.trigger(props.target, props.input).then(async (response) => {
 			emit("success", typeof response.json === "function" ? await response.json() : response);

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

@@ -41,7 +41,7 @@ export interface Props {
 	hideIcon?: object | string;
 	iconClass?: string;
 	labelClass?: string;
-	label?: string;
+	label?: string | number;
 	tooltip?: string;
 	disable?: boolean;
 }

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

@@ -138,7 +138,7 @@
 <script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
 import { computed, ComputedRef, onMounted, ref } from "vue";
-import { download, FileUpload } from "../../../helpers";
+import { download, FileUpload, uniqueBy } from "../../../helpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
@@ -202,10 +202,16 @@ const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
 });
 
 const isUploading = computed(() => !props.file || props.file?.progress !== undefined);
-const previewableFiles: ComputedRef<[UploadedFile | null]> = computed(() => {
-	return props.relatedFiles?.length > 0 ? props.relatedFiles : [computedImage.value];
+const previewableFiles: ComputedRef<(UploadedFile | null)[] | null> = computed(() => {
+	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl) : [computedImage.value];
 });
 
+function filesHaveSameUrl(a: UploadedFile, b: UploadedFile) {
+	return a.id === b.id ||
+		[b.url, b.optimized?.url, b.thumb?.url].includes(a.url) ||
+		[a.url, a.optimized?.url, a.thumb?.url].includes(b.url);
+}
+
 const filename = computed(() => computedImage.value?.name || computedImage.value?.filename || "");
 const mimeType = computed(
 	() => computedImage.value?.type || computedImage.value?.mime || ""

package/src/components/Utility/Layouts/CollapsableSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="dx-collapsable-sidebar overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 transition-all relative"
+    class="dx-collapsable-sidebar overflow-hidden scroll-smooth flex-shrink-0 flex-nowrap transition-all relative"
     :class="{
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
@@ -8,99 +8,89 @@
     }"
     :style="style"
   >
-    <div class="flex-grow max-w-full">
+    <div class="flex-grow max-w-full overflow-y-auto overflow-x-hidden">
       <slot :is-collapsed="isCollapsed" />
     </div>
     <template v-if="!disabled && (!hideToggleOnCollapse || !isCollapsed)">
       <div
         v-if="!toggleAtTop"
-        class="flex w-full p-4"
-        :class="rightSide ? 'justify-start' : 'justify-end'"
+        class="flex w-full p-4 flex-shrink-0"
+        :class="{'justify-start': rightSide, 'justify-end': !rightSide, ...resolveToggleClass}"
       >
         <slot name="toggle">
           <QBtn
             class="btn-secondary"
             @click="toggleCollapse"
           >
-            <ToggleIcon
-              class="w-5 transition-all"
-              :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
-            />
+            <ToggleIcon :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed, ...resolvedToggleIconClass }" />
           </QBtn>
         </slot>
       </div>
       <div
         v-else
         class="absolute top-0 right-0 cursor-pointer p-2"
-        :class="toggleClass"
+        :class="resolveToggleClass"
         @click="toggleCollapse"
       >
-        <ToggleIcon
-          class="w-5 transition-all"
-          :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
-        />
+        <ToggleIcon :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed, ...resolvedToggleIconClass }" />
       </div>
     </template>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ChevronLeftIcon as ToggleIcon } from "@heroicons/vue/outline";
 import { computed, onMounted, ref, watch } from "vue";
 import { getItem, setItem } from "../../../helpers";
+import { AnyObject } from "../../../types";
 
 const emit = defineEmits(["collapse", "update:collapse"]);
-const props = defineProps({
-  rightSide: Boolean,
-  displayClass: {
-    type: String,
-    default: "flex flex-col"
-  },
-  maxWidth: {
-    type: String,
-    default: "13.5rem"
-  },
-  minWidth: {
-    type: String,
-    default: "5.5rem"
-  },
-  disabled: Boolean,
-  collapse: Boolean,
-  name: {
-    type: String,
-    default: "sidebar"
-  },
-  toggleAtTop: Boolean,
-  toggleClass: {
-    type: String,
-    default: ""
-  },
-  hideToggleOnCollapse: Boolean
+const props = withDefaults(defineProps<{
+	displayClass?: string;
+	toggleClass?: string | AnyObject;
+	toggleIconClass?: string | AnyObject;
+	rightSide?: boolean;
+	maxWidth?: string;
+	minWidth?: string;
+	disabled?: boolean;
+	collapse?: boolean;
+	name?: string;
+	toggleAtTop?: boolean;
+	hideToggleOnCollapse?: boolean;
+}>(), {
+	displayClass: "flex flex-col",
+	maxWidth: "13.5rem",
+	minWidth: "5.5rem",
+	name: "sidebar",
+	toggleClass: "",
+	toggleIconClass: "w-5 transition-all"
 });
 
 const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
 
 function setCollapse(state) {
-  isCollapsed.value = state;
-  setItem(props.name + "-is-collapsed", !!isCollapsed.value);
+	isCollapsed.value = state;
+	setItem(props.name + "-is-collapsed", !!isCollapsed.value);
 }
 
 function toggleCollapse() {
-  setCollapse(!isCollapsed.value);
-  emit("collapse", isCollapsed.value);
-  emit("update:collapse", isCollapsed.value);
+	setCollapse(!isCollapsed.value);
+	emit("collapse", isCollapsed.value);
+	emit("update:collapse", isCollapsed.value);
 }
 
 onMounted(() => {
-  emit("collapse", isCollapsed.value);
-  emit("update:collapse", isCollapsed.value);
+	emit("collapse", isCollapsed.value);
+	emit("update:collapse", isCollapsed.value);
 });
 const style = computed(() => {
-  return {
-    width: isCollapsed.value ? props.minWidth : props.maxWidth
-  };
+	return {
+		width: isCollapsed.value ? props.minWidth : props.maxWidth
+	};
 });
 
+const resolveToggleClass = computed(() => typeof props.toggleClass === "string" ? { [props.toggleClass]: true } : props.toggleClass);
+const resolvedToggleIconClass = computed(() => typeof props.toggleIconClass === "string" ? { [props.toggleIconClass]: true } : props.toggleIconClass);
 watch(() => props.collapse, () => {
-  setCollapse(props.collapse);
+	setCollapse(props.collapse);
 });
 </script>

package/src/components/Utility/Widgets/LabelPillWidget.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="{[colorClass]: true, [sizeClass]: true, 'rounded-full': true}">
+    <slot>{{ label }}</slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { LabelPillWidgetProps } from "../../../types";
+
+const props = withDefaults(defineProps<LabelPillWidgetProps>(), {
+	label: "",
+	color: "none",
+	size: "md"
+});
+
+const colorClasses = {
+	sky: "bg-sky-950 text-sky-400",
+	green: "bg-green-950 text-green-400",
+	red: "bg-red-950 text-red-400",
+	amber: "bg-amber-950 text-amber-400",
+	yellow: "bg-yellow-950 text-yellow-400",
+	blue: "bg-blue-950 text-blue-400",
+	slate: "bg-slate-950 text-slate-400",
+	gray: "bg-slate-700 text-gray-300",
+	none: ""
+};
+
+const sizeClasses = {
+	xxs: "text-xs px-1 py-.5",
+	xs: "text-xs px-2 py-1",
+	sm: "text-sm px-3 py-1.5",
+	md: "text-base px-3 py-2",
+	lg: "text-lg px-4 py-2"
+};
+
+const colorClass = computed(() => {
+	return colorClasses[props.color];
+});
+const sizeClass = computed(() => sizeClasses[props.size]);
+</script>

package/src/components/Utility/Widgets/LabelValuePillWidget.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex items-stretch">
+    <div
+      class="rounded-l-lg bg-slate-400 text-slate-900 text-xs px-2 flex items-center justify-center"
+      :class="labelClass"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="rounded-r-lg bg-slate-900 text-slate-400 px-2 py-1">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+withDefaults(defineProps<{
+	label: string;
+	value: string;
+	labelClass?: string;
+}>(), {
+	labelClass: ""
+});
+</script>

package/src/components/Utility/Widgets/index.ts

@@ -0,0 +1,2 @@
+export { default as LabelPillWidget } from "./LabelPillWidget.vue";
+export { default as LabelValuePillWidget } from "./LabelValuePillWidget.vue";

package/src/components/Utility/index.ts

@@ -8,3 +8,4 @@ export * from "./Popovers";
 export * from "./Tabs";
 export * from "./Tools";
 export * from "./Transitions";
+export * from "./Widgets";

package/src/helpers/actions.ts

@@ -3,7 +3,14 @@ import { FaSolidCopy as CopyIcon, FaSolidPencil as EditIcon, FaSolidTrash as Del
 import { uid } from "quasar";
 import { h, isReactive, Ref, shallowReactive, shallowRef } from "vue";
 import { ConfirmActionDialog, CreateNewWithNameDialog } from "../components";
-import type { ActionGlobalOptions, ActionOptions, ActionTarget, ListController, ResourceAction } from "../types";
+import type {
+	ActionGlobalOptions,
+	ActionOptions,
+	ActionTarget,
+	ActionTargetItem,
+	ListController,
+	ResourceAction
+} from "../types";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
 
@@ -233,12 +240,18 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 				result = { error: `Action ${action.name} does not support batch actions` };
 			}
 		} else {
+			const __timestamp = Date.now();
+			if (action.optimisticDelete) {
+				storeObject({ ...target, __deleted_at: new Date().toISOString(), __timestamp } as ActionTargetItem);
+			}
+
 			// If the action has an optimistic callback, we call it before the actual action to immediately
 			// update the UI
 			if (typeof action.optimistic === "function") {
 				action.optimistic(action, target, input);
+				storeObject({ ...target, __timestamp } as ActionTargetItem);
 			} else if (action.optimistic) {
-				storeObject({ ...target, ...input });
+				storeObject({ ...target, ...input, __timestamp });
 			}
 
 			result = await action.onAction(action.alias || action.name, target, input);

package/src/helpers/array.ts

@@ -2,31 +2,31 @@
  * Replace an item in an array with a new item
  */
 export function replace(array: any[], item: any, newItem = undefined, appendIfMissing = false) {
-    const index: any = typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
-    if (index === false || index === -1) {
-        return appendIfMissing ? [...array, newItem] : array;
-    }
+	const index: any = typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
+	if (index === false || index === -1) {
+		return appendIfMissing ? [...array, newItem] : array;
+	}
 
-    const newArray = [...array];
-    newItem !== undefined
-        ? newArray.splice(index, 1, newItem)
-        : newArray.splice(index, 1);
-    return newArray;
+	const newArray = [...array];
+	newItem !== undefined
+			? newArray.splice(index, 1, newItem)
+			: newArray.splice(index, 1);
+	return newArray;
 }
 
 /**
  * Remove an item from an array
  */
 export function remove(array: any[], item: any) {
-    return replace(array, item);
+	return replace(array, item);
 }
 
 /**
  * Remove duplicate items from an array using a callback to compare 2 elements
  */
-export function uniqueBy(array: any[], cb: Function) {
-    return array.filter((a, index, self) => {
-        // Check if the current element 'a' is the first occurrence in the array
-        return index === self.findIndex((b) => cb(a, b));
-    });
+export function uniqueBy(array: any[], cb: (a: any, b: any) => boolean) {
+	return array.filter((a, index, self) => {
+		// Check if the current element 'a' is the first occurrence in the array
+		return index === self.findIndex((b) => cb(a, b));
+	});
 }

package/src/helpers/objectStore.ts

@@ -22,7 +22,7 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	if (typeof newObject !== "object") {
 		return newObject;
 	}
-	
+
 	const id = newObject?.id || newObject?.name;
 	const type = newObject?.__type;
 	if (!id || !type) return shallowReactive(newObject);
@@ -49,6 +49,9 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	// @ts-expect-error __timestamp is guaranteed to be set in this case on both old and new
 	if (oldObject && newObject.__timestamp < oldObject.__timestamp) {
 		recentlyStoredObjects[objectKey] = oldObject;
+
+		// Recursively store all the children of the object as well
+		storeObjectChildren(newObject, recentlyStoredObjects, oldObject);
 		return oldObject;
 	}
 
@@ -59,19 +62,7 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	recentlyStoredObjects[objectKey] = reactiveObject;
 
 	// Recursively store all the children of the object as well
-	for (const key of Object.keys(newObject)) {
-		const value = newObject[key];
-		if (Array.isArray(value) && value.length > 0) {
-			for (const index in value) {
-				if (value[index] && typeof value[index] === "object") {
-					newObject[key][index] = storeObject(value[index], recentlyStoredObjects);
-				}
-			}
-		} else if (value?.__type) {
-			// @ts-expect-error __type is guaranteed to be set in this case
-			newObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
-		}
-	}
+	storeObjectChildren(newObject, recentlyStoredObjects);
 
 	Object.assign(reactiveObject, newObject);
 
@@ -87,6 +78,33 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 	return reactiveObject;
 }
 
+/**
+ *  A recursive way to store all the child TypedObjects of a TypedObject.
+ *  recentlyStoredObjects is used to avoid infinite recursion
+ *  applyToObject is used to apply the stored objects to a different object than the one being stored.
+ *  The apply to object is the current object being returned by storeObject() - Normally, the oldObject if it has a more recent timestamp than the newObject being stored.
+ */
+function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObjects: AnyObject = {}, applyToObject: T | null = null) {
+	applyToObject = applyToObject || object;
+	for (const key of Object.keys(object)) {
+		const value = object[key];
+		if (Array.isArray(value) && value.length > 0) {
+			for (const index in value) {
+				if (value[index] && typeof value[index] === "object") {
+					if (!applyToObject[key]) {
+						// @ts-expect-error this is fine... T is generic, but not sure why the matter to write to an object?
+						applyToObject[key] = [];
+					}
+					applyToObject[key][index] = storeObject(value[index], recentlyStoredObjects);
+				}
+			}
+		} else if (value?.__type) {
+			// @ts-expect-error __type is guaranteed to be set in this case
+			applyToObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
+		}
+	}
+}
+
 /**
  * Remove an object from all lists in the store
  */
@@ -111,7 +129,10 @@ function removeObjectFromLists<T extends TypedObject>(object: T) {
  */
 const registeredAutoRefreshes: AnyObject = {};
 
-export async function autoRefreshObject<T extends TypedObject>(object: T, condition: (object: T) => boolean, callback: (object: T) => Promise<T>, interval = 3000) {
+export async function autoRefreshObject<T extends TypedObject>(name: string, object: T, condition: (object: T) => boolean, callback: (object: T) => Promise<T>, interval = 3000) {
+	// Always clear any previously registered auto refreshes before creating a new timeout
+	stopAutoRefreshObject(name);
+
 	if (!object?.id || !object?.__type) {
 		throw new Error("Invalid stored object. Cannot auto-refresh");
 	}
@@ -127,13 +148,11 @@ 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;
+	// Save the autoRefreshId for the object so it can be cleared when the object refresh is no longer needed
+	registeredAutoRefreshes[name] = setTimeout(() => autoRefreshObject(name, object, condition, callback, interval), interval);
 }
 
-export async function stopAutoRefreshObject<T extends TypedObject>(object: T) {
-	const timeoutId = registeredAutoRefreshes[object.__type + ":" + object.id];
-
+export function stopAutoRefreshObject(name: string) {
+	const timeoutId = registeredAutoRefreshes[name];
 	timeoutId && clearTimeout(timeoutId);
 }

package/src/helpers/request.ts

@@ -20,7 +20,7 @@ export const request: RequestApi = {
 	async call(url, options) {
 		options = options || {};
 		const abortKey = options?.abortOn !== undefined ? options.abortOn : url + JSON.stringify(options.params || "");
-		const timestamp = new Date().getTime();
+		const timestamp = Date.now();
 
 		if (abortKey) {
 			const abort = new AbortController();
@@ -47,7 +47,15 @@ export const request: RequestApi = {
 			delete options.params;
 		}
 
-		const response = await fetch(request.url(url), options);
+		let response = null;
+		try {
+			response = await fetch(request.url(url), options);
+		} catch (e) {
+			if (options.ignoreAbort && (e + "").match(/Request was aborted/)) {
+				return { abort: true };
+			}
+			throw e;
+		}
 
 		// Verify the app version of the client and server are matching
 		checkAppVersion(response);
@@ -97,12 +105,13 @@ export const request: RequestApi = {
 	async get(url, options) {
 		return await request.call(url, {
 			method: "get",
+			...options,
 			headers: {
 				Accept: "application/json",
 				"Content-Type": "application/json",
-				...danxOptions.value.request?.headers
-			},
-			...options
+				...danxOptions.value.request?.headers,
+				...options?.headers
+			}
 		});
 	},
 
@@ -110,12 +119,13 @@ export const request: RequestApi = {
 		return await request.call(url, {
 			method: "post",
 			body: data && JSON.stringify(data),
+			...options,
 			headers: {
 				Accept: "application/json",
 				"Content-Type": "application/json",
-				...danxOptions.value.request?.headers
-			},
-			...options
+				...danxOptions.value.request?.headers,
+				...options?.headers
+			}
 		});
 	}
 };