quasar-ui-danx 0.4.13 → 0.4.15

package/src/components/ActionTable/listControls.ts

@@ -1,5 +1,6 @@
 import { computed, Ref, ref, shallowRef, watch } from "vue";
-import { RouteLocationNormalizedLoaded, RouteParams, Router } from "vue-router";
+import { RouteParams, Router } from "vue-router";
+import { danxOptions } from "../../config";
 import { getItem, setItem, storeObject, waitForRef } from "../../helpers";
 import {
 	ActionController,
@@ -7,7 +8,6 @@ import {
 	AnyObject,
 	FilterGroup,
 	ListControlsFilter,
-	ListControlsInitializeOptions,
 	ListControlsOptions,
 	ListControlsPagination,
 	PagedItems
@@ -16,8 +16,6 @@ import { getFilterFromUrl } from "./listHelpers";
 
 export function useListControls(name: string, options: ListControlsOptions): ActionController {
 	let isInitialized = false;
-	let vueRoute: RouteLocationNormalizedLoaded | null | undefined;
-	let vueRouter: Router | null | undefined;
 	const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
 	const pagedItems = shallowRef<PagedItems | null>(null);
 	const activeFilter = ref<ListControlsFilter>({});
@@ -112,11 +110,9 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 
 	/**
 	 * Loads the filter field options for the current filter.
-	 *
-	 * @returns {Promise<void>}
 	 */
 	async function loadFieldOptions() {
-		if (!options.routes.fieldOptions || !isInitialized) return;
+		if (!options.routes.fieldOptions) return;
 		isLoadingFilters.value = true;
 		try {
 			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
@@ -184,9 +180,9 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	/**
 	 * Sets the pagination settings to the given values.
 	 */
-	function setPagination(updated: ListControlsPagination) {
+	function setPagination(updated: Partial<ListControlsPagination>) {
 		// @ts-expect-error Seems like a bug in the typescript linting?
-		pagination.value = updated;
+		pagination.value = { ...pagination.value, ...updated };
 	}
 
 	/**
@@ -250,9 +246,6 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	 * Loads the filter and pagination settings from local storage.
 	 */
 	function loadSettings() {
-		// Only load settings when the class is fully initialized
-		if (!isInitialized) return;
-
 		const settings = getItem(PAGE_SETTINGS_KEY);
 
 		// Load the filter settings from local storage
@@ -402,26 +395,26 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	}
 
 	// Initialize the list actions and load settings, lists, summaries, filter fields, etc.
-	function initialize(initOptions?: ListControlsInitializeOptions) {
-		vueRouter = initOptions?.vueRouter;
-		vueRoute = initOptions?.vueRouter?.currentRoute.value;
+	function initialize() {
+		const vueRouter = getVueRouter();
 		isInitialized = true;
 		loadSettings();
 
 		/**
 		 * Watch the id params in the route and set the active item to the item with the given id.
 		 */
-		if (options.routes.details && vueRoute && vueRouter) {
-			const { params, meta } = vueRoute;
-
-			const controlRouteName = vueRoute.name;
-			vueRouter.afterEach((to) => {
-				if (to.name === controlRouteName) {
-					setPanelFromRoute(to.params, to.meta);
-				}
-			});
+		if (options.routes.details) {
+			const { params, meta, name: controlRouteName } = vueRouter.currentRoute.value;
+
+			if (controlRouteName === name) {
+				vueRouter.afterEach((to) => {
+					if (to.name === controlRouteName) {
+						setPanelFromRoute(to.params, to.meta);
+					}
+				});
 
-			setPanelFromRoute(params, meta);
+				setPanelFromRoute(params, meta);
+			}
 		}
 	}
 
@@ -429,12 +422,12 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	 * Updates the URL bar and route to the given params.
 	 */
 	function updateRouteParams(params: AnyObject) {
-		if (vueRouter && vueRoute) {
-			vueRouter.push({
-				name: (Array.isArray(vueRoute.name) ? vueRoute.name[0] : vueRoute.name) || "home",
-				params
-			});
-		}
+		const vueRouter = getVueRouter();
+		const { name: routeName } = vueRouter.currentRoute.value;
+		vueRouter.push({
+			name: (Array.isArray(routeName) ? routeName[0] : routeName) || "home",
+			params
+		});
 	}
 
 	function setPanelFromRoute(params: RouteParams, meta: AnyObject) {
@@ -445,6 +438,13 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		}
 	}
 
+	function getVueRouter(): Router {
+		if (!danxOptions.value.router) {
+			throw new Error("Vue Router must be configured in danxOptions");
+		}
+		return danxOptions.value.router;
+	}
+
 	return {
 		// State
 		name,
@@ -474,6 +474,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		loadSummary,
 		loadListAndSummary,
 		loadMore,
+		loadFieldOptions,
 		getActiveItemDetails,
 		refreshAll,
 		exportList,

package/src/components/Navigation/NavigationMenu.vue

@@ -8,10 +8,12 @@
       :key="'nav-item-' + item.label"
       class="nav-menu-item-box"
     >
-      <div
+      <a
         class="nav-menu-item flex flex-nowrap"
+        :href="resolveUrl(item)"
         :class="item.class || itemClass"
-        @click="item.onClick"
+        :target="item.target || '_self'"
+        @click="onClick($event, item)"
       >
         <div
           v-if="item.icon"
@@ -36,7 +38,7 @@
         >
           {{ item.tooltip?.text || item.label }}
         </QTooltip>
-      </div>
+      </a>
       <QSeparator
         v-if="item.separator"
         :key="'separator-' + item.label"
@@ -47,55 +49,96 @@
 </template>
 <script setup>
 import { computed } from "vue";
+import { danxOptions } from "../../config";
 
 const props = defineProps({
-  collapsed: Boolean,
-  itemClass: {
-    type: String,
-    default: "hover:bg-gray-200"
-  },
-  activeClass: {
-    type: String,
-    default: "bg-blue-200"
-  },
-  items: {
-    type: Array,
-    required: true
-  }
+	collapsed: Boolean,
+	itemClass: {
+		type: String,
+		default: "hover:bg-gray-200"
+	},
+	activeClass: {
+		type: String,
+		default: "bg-blue-200"
+	},
+	items: {
+		type: Array,
+		required: true
+	}
 });
 
+const router = danxOptions.value.router;
 const allowedItems = computed(() => props.items.filter((item) => !item.hidden));
+
+function getItemRoute(item) {
+	if (!router) {
+		console.error("Router is not available. Configure in danx options.");
+		return;
+	}
+
+	return typeof item.route === "function" ? item.route() : item.route;
+}
+
+function onClick(e, item) {
+	if (!item.url && !e.ctrlKey) {
+		e.preventDefault();
+	}
+
+	if (item.disabled || e.ctrlKey) {
+		return;
+	}
+
+	if (item.onClick) {
+		item.onClick();
+	}
+
+	if (item.route) {
+		router.push(getItemRoute(item));
+	}
+}
+
+function resolveUrl(item) {
+	if (item.url) {
+		return item.url;
+	}
+
+	if (item.route) {
+		return router.resolve(getItemRoute(item))?.href || "#";
+	}
+
+	return "#";
+}
 </script>
 
 <style lang="scss">
 .nav-menu-item {
-  padding: 1em;
-  border-radius: 0.5em;
-  font-weight: bold;
-  font-size: 14px;
-  transition: all 150ms, color 0ms;
-  cursor: pointer;
-
-  &.is-disabled {
-    @apply bg-inherit;
-  }
-
-  .label {
-    @apply transition-all;
-  }
-
-  .nav-icon {
-    @apply w-5 h-5 flex-shrink-0;
-  }
+	padding: 1em;
+	border-radius: 0.5em;
+	font-weight: bold;
+	font-size: 14px;
+	transition: all 150ms, color 0ms;
+	cursor: pointer;
+
+	&.is-disabled {
+		@apply bg-inherit;
+	}
+
+	.label {
+		@apply transition-all;
+	}
+
+	.nav-icon {
+		@apply w-5 h-5 flex-shrink-0;
+	}
 }
 
 .is-collapsed {
-  .nav-link {
-    width: 3.8em;
-  }
+	.nav-link {
+		width: 3.8em;
+	}
 
-  .label {
-    @apply opacity-0;
-  }
+	.label {
+		@apply opacity-0;
+	}
 }
 </style>

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <ContentDrawer
-    position="right"
+    :position="position"
     show
     overlay
     content-class="h-full"
@@ -82,6 +82,7 @@ export interface Props {
 	activeItem: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
+	position?: "standard" | "right" | "left";
 	panels: ActionPanel[]
 }
 
@@ -89,8 +90,9 @@ defineEmits(["update:model-value", "close"]);
 const props = withDefaults(defineProps<Props>(), {
 	title: "",
 	modelValue: null,
-	tabsClass: "w-[13.5rem]",
-	panelsClass: "w-[35.5rem]"
+	tabsClass: "w-[13.5rem] flex-shrink-0",
+	panelsClass: "w-[80rem]",
+	position: "right"
 });
 
 const activePanel = ref(props.modelValue);

package/src/components/Utility/Transitions/AutoHeightTransition.vue

@@ -0,0 +1,21 @@
+<template>
+  <Transition name="autoHeight">
+    <slot />
+  </Transition>
+</template>
+
+<style lang="scss">
+.autoHeight-enter-active,
+.autoHeight-leave-active {
+	transition: height .3s linear;
+	height: calc-size(auto);
+}
+
+.autoHeight-enter-to, .autoHeight-leave-from {
+	height: calc-size(auto);
+}
+
+.autoHeight-enter-from, .autoHeight-leave-to {
+	height: 0;
+}
+</style>

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

@@ -1,3 +1,4 @@
+export { default as AutoHeightTransition } from "./AutoHeightTransition.vue";
 export { default as ListTransition } from "./ListTransition.vue";
 export { default as MaxHeightTransition } from "./MaxHeightTransition.vue";
 export { default as SlideTransition } from "./SlideTransition.vue";

package/src/config/index.ts

@@ -3,6 +3,7 @@ import { DanxOptions } from "../types";
 
 export const danxOptions = shallowRef<DanxOptions>({
 	tinyMceApiKey: "set-api-key-in-danx-options",
+	router: undefined,
 	request: {
 		baseUrl: "",
 		headers: {},

package/src/helpers/actions.ts

@@ -1,7 +1,7 @@
 import { useDebounceFn } from "@vueuse/core";
 import { uid } from "quasar";
 import { isReactive, Ref, shallowRef } from "vue";
-import type { ActionOptions, ActionOptionsPartial, ActionTarget, AnyObject, ResourceAction } from "../types";
+import type { ActionOptions, ActionTarget, AnyObject, ResourceAction } from "../types";
 import { FlashMessages } from "./FlashMessages";
 import { storeObject } from "./objectStore";
 
@@ -11,36 +11,34 @@ export const activeActionVnode: Ref = shallowRef(null);
  * Hook to perform an action on a set of targets
  * This helper allows you to perform actions by name on a set of targets using a provided list of actions
  */
-export function useActions(actions: ActionOptions[], globalOptions: ActionOptionsPartial | null = null) {
+export function useActions(actions: ActionOptions[], globalOptions: Partial<ActionOptions> | null = null) {
 	const namespace = uid();
 
 	/**
 	 * Resolve the action object based on the provided name (or return the object if the name is already an object)
 	 */
-	function getAction(actionName: string | ActionOptions | ResourceAction): ResourceAction {
-		let actionOptions: ActionOptions | ResourceAction;
-
+	function getAction(actionName: string, actionOptions?: Partial<ActionOptions>): ResourceAction {
 		/// Resolve the action options or resource action based on the provided input
-		if (typeof actionName === "string") {
-			actionOptions = actions.find(a => a.name === actionName) || { name: actionName };
-		} else {
-			actionOptions = actionName;
+		const baseOptions = actions.find(a => a.name === actionName) || { name: actionName };
+
+		if (actionOptions) {
+			Object.assign(baseOptions, actionOptions);
 		}
 
 		// If the action is already reactive, return it
-		if (isReactive(actionOptions) && "__type" in actionOptions) return actionOptions as ResourceAction;
+		if (isReactive(baseOptions) && "__type" in baseOptions) return baseOptions as ResourceAction;
 
 		const resourceAction: ResourceAction = storeObject({
 			...globalOptions,
-			...actionOptions,
+			...baseOptions,
 			trigger: (target, input) => performAction(resourceAction, target, input),
 			isApplying: false,
 			__type: "__Action:" + namespace
 		});
 
 		// Assign Trigger function if it doesn't exist
-		if (actionOptions.debounce) {
-			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), actionOptions.debounce);
+		if (baseOptions.debounce) {
+			resourceAction.trigger = useDebounceFn((target, input) => performAction(resourceAction, target, input), baseOptions.debounce);
 		}
 
 		return resourceAction;
@@ -63,7 +61,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 			}
 		}
 
-		return filteredActions.map((a: ActionOptions) => getAction(a));
+		return filteredActions.map((a: ActionOptions) => getAction(a.name));
 	}
 
 	/**
@@ -121,6 +119,11 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 			result = await onConfirmAction(action, target, input);
 		}
 
+		// If the request was aborted (likely due to a newer request), just return immediately without changing state
+		if (result?.abort) {
+			return result;
+		}
+
 		action.isApplying = false;
 		setTargetSavingState(target, false);
 
@@ -187,8 +190,16 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 			result = await action.onAction(action.alias || 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 (("" + e).match(/Request was aborted/)) {
+			result = { abort: true };
+		} else {
+			console.error(e);
+			result = { error: `An error occurred while performing the action ${action.label}. Please try again later.` };
+		}
+	}
+
+	if (result?.abort) {
+		return result;
 	}
 
 	// If there is no return value or the result marks it as successful, we show a success message
@@ -203,11 +214,11 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 		}
 
 		if (action.onSuccess) {
-			action.onSuccess(result, target, input);
+			await action.onSuccess(result, target, input);
 		}
 
 		if (isBatch && action.onBatchSuccess) {
-			action.onBatchSuccess(result, target, input);
+			await action.onBatchSuccess(result, target, input);
 		}
 	} else {
 		const errors = [];
@@ -230,12 +241,12 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 		FlashMessages.combine("error", errors);
 
 		if (action.onError) {
-			action.onError(result, target, input);
+			await action.onError(result, target, input);
 		}
 	}
 
 	if (action.onFinish) {
-		action.onFinish(result, target, input);
+		await action.onFinish(result, target, input);
 	}
 
 	return result;

package/src/helpers/formats.ts

@@ -339,21 +339,24 @@ export function fJSON(string: string | object) {
 /**
  * Convert markdown formatted string into a valid JSON object
  */
-export function parseMarkdownJSON(string: string | object): object | null | undefined {
+export function parseMarkdownJSON(string: string | object): object | null | false {
+	if (!string) return null;
 	if (typeof string === "object") return string as object;
 
 	try {
 		return JSON.parse(parseMarkdownCode(string));
 	} catch (e) {
-		return undefined;
+		return false;
 	}
 }
 
-export function parseMarkdownYAML(string: string): object | null | undefined {
+export function parseMarkdownYAML(string: string): object | null | false {
+	if (!string) return null;
+
 	try {
 		return parseYAML(parseMarkdownCode(string)) || (string ? undefined : null);
 	} catch (e) {
-		return undefined;
+		return false;
 	}
 }
 
@@ -372,7 +375,7 @@ export function fMarkdownCode(type: string, string: string | object): string {
 	if (typeof string === "object" || isJSON(string)) {
 		switch (type) {
 			case "yaml":
-				string = stringifyYAML(string);
+				string = stringifyYAML(typeof string === "string" ? JSON.parse(string) : string);
 				break;
 			case "ts":
 				string = "";

package/src/helpers/objectStore.ts

@@ -1,3 +1,4 @@
+import { uid } from "quasar";
 import { ShallowReactive, shallowReactive } from "vue";
 import { TypedObject } from "../types";
 
@@ -8,10 +9,13 @@ const store = new Map<string, any>();
  * 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): ShallowReactive<T> {
-	const id = newObject.id || newObject.name;
-	const type = newObject.__type;
+	const id = newObject?.id || newObject?.name;
+	const type = newObject?.__type;
 	if (!id || !type) return shallowReactive(newObject);
 
+	if (!newObject.__id) {
+		newObject.__id = uid();
+	}
 	if (!newObject.__timestamp) {
 		newObject.__timestamp = newObject.updated_at || 0;
 	}
@@ -34,6 +38,9 @@ export function storeObject<T extends TypedObject>(newObject: T): ShallowReactiv
 			for (const index in value) {
 				newObject[key][index] = storeObject(value[index]);
 			}
+		} else if (value?.__type) {
+			// @ts-expect-error newObject[key] is guaranteed to be a TypedObject
+			newObject[key] = storeObject(value);
 		}
 	}
 

package/src/helpers/request.ts

@@ -45,7 +45,7 @@ export const request: RequestApi = {
 			// 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) {
-				throw new Error("Request was aborted due to a newer request being made: " + timestamp + " < " + request.abortControllers[abortKey].timestamp);
+				return { abort: true };
 			}
 
 			// Otherwise, the current is the most recent request, so we can delete the abort controller

package/src/helpers/routes.ts

@@ -1,3 +1,4 @@
+import { storeObject } from "../helpers";
 import { ListControlsRoutes } from "../types";
 import { downloadFile } from "./downloadPdf";
 import { request } from "./request";
@@ -13,6 +14,10 @@ export function useActionRoutes(baseUrl: string): ListControlsRoutes {
 		details(target) {
 			return request.get(`${baseUrl}/${target.id}/details`);
 		},
+		async detailsAndStore(target) {
+			const item = await request.get(`${baseUrl}/${target.id}/details`);
+			return storeObject(item);
+		},
 		fieldOptions() {
 			return request.get(`${baseUrl}/field-options`);
 		},

package/src/types/actions.d.ts

@@ -13,6 +13,7 @@ export interface ActionPanel {
 
 export interface ActionTargetItem extends TypedObject {
 	isSaving?: boolean;
+	updated_at?: string;
 }
 
 export type ActionTarget = ActionTargetItem[] | ActionTargetItem | null;
@@ -41,10 +42,6 @@ export interface ActionOptions {
 	onFinish?: (result: any, targets: ActionTarget, input: any) => any;
 }
 
-export interface ActionOptionsPartial extends ActionOptions {
-	name?: string;
-}
-
 export interface ResourceAction extends ActionOptions {
 	isApplying: boolean;
 	trigger: (target?: ActionTarget, input?: any) => Promise<any>;

package/src/types/config.d.ts

@@ -1,11 +1,13 @@
 import { QNotifyCreateOptions } from "quasar";
+import { Router } from "vue-router";
 import { FileUploadOptions } from "./files";
 import { RequestOptions } from "./requests";
 
 export interface DanxOptions {
 	tinyMceApiKey?: string;
 	fileUpload?: FileUploadOptions;
-	request?: RequestOptions,
+	request?: RequestOptions;
+	router?: Router;
 	flashMessages?: {
 		default?: QNotifyCreateOptions;
 		success?: QNotifyCreateOptions;

package/src/types/controls.d.ts

@@ -1,5 +1,4 @@
 import { ComputedRef, Ref, ShallowRef } from "vue";
-import { Router } from "vue-router";
 import { ActionTargetItem } from "./actions";
 import { AnyObject, LabelValueItem } from "./shared";
 
@@ -29,6 +28,8 @@ export interface ListControlsRoutes {
 
 	details?(target: ActionTargetItem): Promise<ActionTargetItem>;
 
+	detailsAndStore?(target: ActionTargetItem): Promise<ActionTargetItem>;
+
 	more?(pager: ListControlsPagination): Promise<ActionTargetItem[]>;
 
 	fieldOptions?(filter?: AnyObject): Promise<AnyObject>;
@@ -67,10 +68,6 @@ export interface PagedItems {
 	} | undefined;
 }
 
-export interface ListControlsInitializeOptions {
-	vueRouter?: Router;
-}
-
 export interface ActionController {
 	name: string;
 	label: string;
@@ -95,15 +92,16 @@ export interface ActionController {
 	activePanel: ShallowRef<string | null>;
 
 	// Actions
-	initialize: (options: ListControlsInitializeOptions) => void;
+	initialize: () => void;
 	resetPaging: () => void;
-	setPagination: (updated: ListControlsPagination) => void;
+	setPagination: (updated: Partial<ListControlsPagination>) => void;
 	setSelectedRows: (selection: ActionTargetItem[]) => void;
 	clearSelectedRows: () => void;
 	loadList: (filter?: ListControlsFilter) => Promise<void>;
 	loadSummary: (filter?: ListControlsFilter) => Promise<void>;
 	loadListAndSummary: (filter?: ListControlsFilter) => Promise<void>;
 	loadMore: (index: number, perPage?: number) => Promise<boolean>;
+	loadFieldOptions: () => Promise<void>;
 	getActiveItemDetails: () => Promise<void>;
 	refreshAll: () => Promise<void[]>;
 	exportList: (filter?: ListControlsFilter) => Promise<void>;

package/src/types/forms.d.ts

@@ -18,6 +18,7 @@ export interface FormField {
 	clearable?: boolean;
 	required?: boolean;
 	required_group?: string;
+	default_value?: any;
 	toggleIndeterminate?: boolean;
 	inline?: boolean;
 	maxLength?: number;

package/src/types/shared.d.ts

@@ -5,6 +5,7 @@ export interface TypedObject {
 	name?: string;
 	__type: string;
 	__timestamp?: number;
+	__id?: string;
 
 	[key: string]: TypedObject[] | any;
 }