quasar-ui-danx 0.4.12 → 0.4.14

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,7 +1,7 @@
 <template>
   <ContentDrawer
-    position="right"
-    :show="true"
+    :position="position"
+    show
     overlay
     content-class="h-full"
     class="dx-panels-drawer"
@@ -13,7 +13,13 @@
       <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
           <slot name="header">
-            <h2>{{ title }}</h2>
+            <h2 v-if="title">
+              {{ title }}
+            </h2>
+            <div v-if="!activeItem">
+              Loading
+              <QSpinnerHourglass />
+            </div>
           </slot>
         </div>
         <div
@@ -32,10 +38,14 @@
         </div>
       </div>
       <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
-        <div class="flex items-stretch flex-nowrap h-full">
+        <div
+          v-if="activeItem.__timestamp > 0"
+          class="flex items-stretch flex-nowrap h-full"
+        >
           <PanelsDrawerTabs
             :key="'pd-tabs:' + activeItem.id"
             v-model="activePanel"
+            :active-item="activeItem"
             :class="tabsClass"
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
@@ -44,6 +54,7 @@
             :key="'pd-panels:' + activeItem.id"
             :panels="panels"
             :active-panel="activePanel"
+            :active-item="activeItem"
             :class="activePanelOptions?.class || panelsClass"
           />
           <div
@@ -68,9 +79,10 @@ import PanelsDrawerTabs from "./PanelsDrawerTabs";
 export interface Props {
 	title?: string,
 	modelValue?: string | number,
-	activeItem?: ActionTargetItem;
+	activeItem: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
+	position?: "standard" | "right" | "left";
 	panels: ActionPanel[]
 }
 
@@ -78,9 +90,9 @@ defineEmits(["update:model-value", "close"]);
 const props = withDefaults(defineProps<Props>(), {
 	title: "",
 	modelValue: null,
-	activeItem: 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/PanelsDrawer/PanelsDrawerPanels.vue

@@ -11,17 +11,19 @@
       <RenderVnode
         v-if="panel.vnode"
         :vnode="panel.vnode"
+        :props="activeItem"
       />
     </QTabPanel>
   </QTabPanels>
 </template>
 
 <script setup lang="ts">
-import { ActionPanel } from "../../types";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineProps<{
 	activePanel?: string | number,
+	activeItem: ActionTargetItem,
 	panels: ActionPanel[]
 }>();
 </script>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -9,11 +9,11 @@
     @update:model-value="$emit('update:model-value', $event)"
   >
     <template v-for="panel in panels">
-      <template v-if="panel.enabled === undefined || !!panel.enabled">
+      <template v-if="isEnabled(panel)">
         <RenderVnode
           v-if="panel.tabVnode"
           :key="panel.name"
-          :vnode="panel.tabVnode(modelValue)"
+          :vnode="panel.tabVnode(activeItem, modelValue)"
           :is-active="modelValue === panel.name"
           :name="panel.name"
           :label="panel.label"
@@ -30,19 +30,32 @@
 </template>
 <script setup lang="ts">
 import { QTab } from "quasar";
-import { ActionPanel } from "../../types";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineEmits(["update:model-value"]);
 
 interface Props {
 	modelValue?: string | number;
+	activeItem: ActionTargetItem;
 	panels: ActionPanel[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
 	modelValue: "general"
 });
+
+function isEnabled(panel) {
+	if (panel.enabled === undefined) return true;
+
+	if (!panel.enabled) return false;
+
+	if (typeof panel.enabled === "function") {
+		return panel.enabled(props.activeItem);
+	}
+
+	return true;
+}
 </script>
 
 <style lang="scss" module="cls">

package/src/components/Utility/Tools/RenderVnode.vue

@@ -11,7 +11,7 @@ const RenderVnode = (props) => {
 	}
 
 	if (typeof props.vnode === "function") {
-		return props.vnode(props.props);
+		return props.vnode(props.props, props.params);
 	}
 
 	return null;
@@ -24,6 +24,10 @@ RenderVnode.props = {
 	props: {
 		type: Object,
 		default: () => ({})
+	},
+	params: {
+		type: Object,
+		default: null
 	}
 };
 export default RenderVnode;

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/date.ts

@@ -1,5 +1,5 @@
 import { parseDateTime } from "./formats";
 
-export function diffInDays(date1, date2) {
-    return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
+export function diffInDays(date1: string, date2: string) {
+	return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
 }