quasar-ui-danx 0.4.41 → 0.4.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.41",
+  "version": "0.4.43",
   "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

@@ -119,7 +119,7 @@ export function useControls(name: string, options: ListControlsOptions): ListCon
 
 		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,8 +2,9 @@
   <QBtn
     :loading="isSaving"
     class="shadow-none"
-    :class="colorClass"
-    @click="onAction"
+    :class="disabled ? disabledClass : colorClass"
+    :disable="disabled"
+    @click="()=> onAction()"
   >
     <div class="flex items-center flex-nowrap">
       <component
@@ -26,11 +27,36 @@
     >
       {{ tooltip }}
     </QTooltip>
+    <QMenu
+      v-if="isConfirming"
+      :model-value="true"
+    >
+      <div class="p-4 bg-slate-600">
+        <div>{{ confirmText }}</div>
+        <div class="flex items-center flex-nowrap mt-2">
+          <div class="flex-grow">
+            <ActionButton
+              type="cancel"
+              color="gray"
+              @click="isConfirming = false"
+            />
+          </div>
+          <ActionButton
+            type="confirm"
+            color="green"
+            @click="()=> onAction(true)"
+          />
+        </div>
+      </div>
+    </QMenu>
   </QBtn>
 </template>
 <script setup lang="ts">
 import {
 	FaSolidArrowsRotate as RefreshIcon,
+	FaSolidCircleCheck as ConfirmIcon,
+	FaSolidCircleXmark as CancelIcon,
+	FaSolidCopy as CopyIcon,
 	FaSolidPause as PauseIcon,
 	FaSolidPencil as EditIcon,
 	FaSolidPlay as PlayIcon,
@@ -38,11 +64,11 @@ import {
 	FaSolidStop as StopIcon,
 	FaSolidTrash as TrashIcon
 } from "danx-icon";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "trash-red" | "create" | "edit" | "play" | "stop" | "pause" | "refresh";
+	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel";
 	color?: "red" | "blue" | "sky" | "green" | "green-invert" | "lime" | "white" | "gray";
 	icon?: object | string;
 	iconClass?: string;
@@ -52,6 +78,10 @@ export interface ActionButtonProps {
 	action?: ResourceAction;
 	target?: ActionTarget;
 	input?: object;
+	disabled?: boolean;
+	disabledClass?: string;
+	confirm?: boolean;
+	confirmText?: string;
 }
 
 const emit = defineEmits(["success", "error", "always"]);
@@ -64,7 +94,9 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	tooltip: "",
 	action: null,
 	target: null,
-	input: null
+	input: null,
+	confirmText: "Are you sure?",
+	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
 });
 
 const colorClass = computed(() => {
@@ -101,11 +133,26 @@ const typeOptions = computed(() => {
 				icon: CreateIcon,
 				iconClass: "w-3"
 			};
+		case "confirm":
+			return {
+				icon: ConfirmIcon,
+				iconClass: "w-3"
+			};
+		case "cancel":
+			return {
+				icon: CancelIcon,
+				iconClass: "w-3"
+			};
 		case "edit":
 			return {
 				icon: EditIcon,
 				iconClass: "w-3"
 			};
+		case "copy":
+			return {
+				icon: CopyIcon,
+				iconClass: "w-3"
+			};
 		case "play":
 			return {
 				icon: PlayIcon,
@@ -136,19 +183,28 @@ const typeOptions = computed(() => {
 
 const isSaving = computed(() => {
 	if (props.saving) return true;
+	if (props.action) {
+		return props.action.isApplying;
+	}
 	if (props.target) {
 		if (Array.isArray(props.target)) {
 			return props.target.some((t) => t.isSaving);
 		}
 		return props.target.isSaving;
 	}
-	if (props.action) {
-		return props.action.isApplying;
-	}
 	return false;
 });
 
-function onAction() {
+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.action) {
 		props.action.trigger(props.target, props.input).then(async (response) => {
 			emit("success", typeof response.json === "function" ? await response.json() : response);
@@ -158,6 +214,8 @@ function onAction() {
 		}).finally(() => {
 			emit("always");
 		});
+	} else {
+		emit("always");
 	}
 }
 </script>

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

@@ -1,3 +1,4 @@
+export { default as ActionButton } from "./ActionButton.vue";
 export { default as ExportButton } from "./ExportButton.vue";
 export { default as RefreshButton } from "./RefreshButton.vue";
 export { default as ShowHideButton } from "./ShowHideButton.vue";

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

@@ -23,6 +23,7 @@
           :label="doneText"
           class="dx-dialog-button dx-dialog-button-done"
           :class="doneClass"
+          :disable="disable"
           @click="onClose"
         >
           <slot name="done-text" />
@@ -39,6 +40,7 @@ import DialogLayout from "./DialogLayout";
 const emit = defineEmits(["update:model-value", "close"]);
 defineProps({
 	...DialogLayout.props,
+	disable: Boolean,
 	doneClass: {
 		type: [String, Object],
 		default: ""

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

@@ -39,18 +39,23 @@
         >
           <PdfIcon
             v-if="isPdf"
-            class="w-24"
+            class="w-3/4"
           />
           <TextFileIcon
             v-else
-            class="w-24"
+            class="w-3/4"
           />
-          <div
-            v-if="filename"
-            class="text-[.7rem] bg-slate-900 text-slate-300 opacity-80 h-[2.25rem] py-.5 px-1 absolute-bottom"
-          >
-            {{ filename }}
-          </div>
+          <template v-if="filename">
+            <div
+              v-if="showFilename"
+              class="text-[.7rem] bg-slate-900 text-slate-300 opacity-80 h-[2.25rem] py-.5 px-1 absolute-bottom"
+            >
+              {{ filename }}
+            </div>
+            <QTooltip v-else>
+              {{ filename }}
+            </QTooltip>
+          </template>
         </div>
       </div>
       <div
@@ -152,6 +157,7 @@ export interface FilePreviewProps {
 	file?: UploadedFile;
 	relatedFiles?: UploadedFile[];
 	missingIcon?: any;
+	showFilename?: boolean;
 	downloadButtonClass?: string;
 	imageFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
 	downloadable?: boolean;

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

@@ -89,11 +89,14 @@ export function fDate(dateTime: string | DateTime | null, { empty = "--", format
 /**
  * Parses a date string into a Luxon DateTime object
  */
-export function parseDateTime(dateTime: string | DateTime | null): DateTime<boolean> | null {
+export function parseDateTime(dateTime: string | DateTime | number | null): DateTime<boolean> | null {
+	if (typeof dateTime === "number") {
+		return DateTime.fromMillis(dateTime as number);
+	}
 	if (typeof dateTime === "string") {
 		return parseGenericDateTime(dateTime);
 	}
-	return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+	return dateTime as DateTime<boolean> || DateTime.fromSQL("0000-00-00 00:00:00");
 }
 
 /**
@@ -193,7 +196,7 @@ export function fSecondsToDuration(seconds: number) {
 /**
  *  Formats a duration between two date strings in 00h 00m 00s format
  */
-export function fDuration(start: string, end?: string) {
+export function fDuration(start: string | number, end?: string | number) {
 	const endDateTime = end ? parseDateTime(end) : DateTime.now();
 	const diff = endDateTime?.diff(parseDateTime(start) || DateTime.now(), ["hours", "minutes", "seconds"]);
 	if (!diff?.isValid) {

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,32 @@ 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]) {
+						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
  */

package/src/helpers/request.ts

@@ -19,8 +19,8 @@ export const request: RequestApi = {
 
 	async call(url, options) {
 		options = options || {};
-		const abortKey = options?.abortOn !== undefined ? options.abortOn : url;
-		const timestamp = new Date().getTime();
+		const abortKey = options?.abortOn !== undefined ? options.abortOn : url + JSON.stringify(options.params || "");
+		const timestamp = Date.now();
 
 		if (abortKey) {
 			const abort = new AbortController();
@@ -42,12 +42,20 @@ export const request: RequestApi = {
 					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);
+		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
+			}
 		});
 	}
 };