quasar-ui-danx 0.4.36 → 0.4.38

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -1,20 +1,25 @@
-import { DragAndDrop } from "./dragAndDrop";
+import { DragAndDrop, DraggableData } from "./dragAndDrop";
+
+export type DragPositionChangeCallback =
+		((position: number, initialPosition: number, data: DraggableData) => void)
+		| null;
+export type DropZoneChangeCallback =
+		((e: DragEvent, dropZone: HTMLElement, position: number, initialPosition: number, data: DraggableData) => void)
+		| null;
 
 /**
  * ListDragAndDrop supports dragging elements in a list to new positions in the same list.
  * A placeholder is rendered to show the position the list item will be dropped.
- *
- * @class
  */
 export class ListDragAndDrop extends DragAndDrop {
 	listPosition = 0;
 	cursorPosition = 0;
 	initialPosition = 0;
 	initialDropZone: HTMLElement | null = null;
-	onPositionChangeCb = null;
-	onDragPositionChangeCb = null;
-	onDropZoneChangeCb = null;
-	placeholder = null;
+	onPositionChangeCb: DragPositionChangeCallback = null;
+	onDragPositionChangeCb: DragPositionChangeCallback = null;
+	onDropZoneChangeCb: DropZoneChangeCallback = null;
+	placeholder: HTMLElement | null = null;
 
 	constructor(options = {}) {
 		super({
@@ -27,7 +32,7 @@ export class ListDragAndDrop extends DragAndDrop {
 	/**
 	 * Callback that fires after dragging has ended and the list position has changed from the original
 	 */
-	onPositionChange(cb): ListDragAndDrop {
+	onPositionChange(cb: DragPositionChangeCallback): ListDragAndDrop {
 		this.onPositionChangeCb = cb;
 		return this;
 	}
@@ -35,31 +40,29 @@ export class ListDragAndDrop extends DragAndDrop {
 	/**
 	 * Callback that fires when the drop zone has changed
 	 */
-	onDropZoneChange(cb): ListDragAndDrop {
+	onDropZoneChange(cb: DropZoneChangeCallback): ListDragAndDrop {
 		this.onDropZoneChangeCb = cb;
 		return this;
 	}
 
 	/**
 	 * Callback that fires while dragging the element when the cursor's position has changed in the list
-	 * @param cb
-	 * @returns {ListDragAndDrop}
 	 */
-	onDragPositionChange(cb) {
+	onDragPositionChange(cb: DragPositionChangeCallback) {
 		this.onDragPositionChangeCb = cb;
 		return this;
 	}
 
 	/**
 	 * Start listening for drag events and prepare an element for drag/drop
-	 * @param e
-	 * @param data
 	 */
-	dragStart(e, data) {
+	dragStart(e: DragEvent, data: DraggableData) {
+		if (this.options.disabled) return;
+
 		super.dragStart(e, data);
 
 		if (this.currentDropZone) {
-			this.listPosition = this.getListPosition(e.target);
+			this.listPosition = this.getListPosition(e.target as HTMLElement);
 			this.initialPosition = this.listPosition;
 			this.initialDropZone = this.currentDropZone;
 			this.updateScrollPosition();
@@ -69,7 +72,9 @@ export class ListDragAndDrop extends DragAndDrop {
 	/**
 	 * When dragging has ended, check for list position changes and fire the onPositionChange callback if it has
 	 */
-	dragEnd(e) {
+	dragEnd(e: DragEvent) {
+		if (this.options.disabled) return;
+
 		const draggableData = this.draggableData;
 		this.placeholder?.remove();
 		const newDropZone = this.currentDropZone;
@@ -87,16 +92,15 @@ export class ListDragAndDrop extends DragAndDrop {
 
 	/**
 	 * The dragging element is moving
-	 * @param e
 	 */
-	dragOver(e) {
+	dragOver(e: DragEvent) {
+		if (this.options.disabled) return;
 		super.dragOver(e);
 		this.updateListPosition(e);
 	}
 
 	/**
 	 * Notify if the targeted position of the cursor is different from the current position
-	 * @param e
 	 */
 	updateListPosition(e: MouseEvent) {
 		const point = {
@@ -129,17 +133,15 @@ export class ListDragAndDrop extends DragAndDrop {
 			// The position has changed, trigger the callback
 			if (this.listPosition !== prevPosition) {
 				this.onDragPositionChangeCb &&
-				this.onDragPositionChangeCb(this.listPosition, this.draggableData);
+				this.onDragPositionChangeCb(this.listPosition, this.initialPosition, this.draggableData);
 			}
 		}
 	}
 
 	/**
 	 * Find the numeric position of the element in the children of the list
-	 * @returns {Number|null}
-	 * @param item
 	 */
-	getListPosition(item) {
+	getListPosition(item: HTMLElement): number {
 		let index = 0;
 		for (const child of this.getChildren()) {
 			if (child === item) {
@@ -148,14 +150,14 @@ export class ListDragAndDrop extends DragAndDrop {
 			index++;
 		}
 
-		return null;
+		return 0;
 	}
 
 	/**
 	 * Get all the children of the current drop zone, excluding the placeholder
-	 * @returns {*}
 	 */
 	getChildren() {
+		// @ts-expect-error HTMLCollection is iterable
 		return [...(this.currentDropZone?.children || [])].filter(
 				(c) => c.className.match(/dx-drag-placeholder/) === null
 		);
@@ -177,10 +179,8 @@ export class ListDragAndDrop extends DragAndDrop {
 
 	/**
 	 * Find the element at the current cursor position in the given drop zone
-	 * @param point
-	 * @returns {null}
 	 */
-	getListPositionOfPoint(point) {
+	getListPositionOfPoint(point: { x: number, y: number }) {
 		let index = 0;
 		const children = this.getChildren();
 
@@ -205,45 +205,47 @@ export class ListDragAndDrop extends DragAndDrop {
 	 * Updates the scroll position while dragging an element so a user can navigate a longer list while dragging
 	 */
 	updateScrollPosition() {
-		if (this.currentDropZone) {
-			const rect = this.currentDropZone.getBoundingClientRect();
-			const threshold = 100;
-			let velocity = 0;
-			const velocityFn = (x) => x * 5;
-			const cursorPos = this.isVertical() ? this.cursorY : this.cursorX;
-			const rectStart = this.isVertical() ? rect.top : rect.left;
-			const rectEnd = this.isVertical() ? rect.bottom : rect.right;
-			const beforeDiff = rectStart + threshold - cursorPos;
-			const afterDiff = cursorPos - (rectEnd - threshold);
-
-			if (beforeDiff > 0) {
-				velocity = -velocityFn(beforeDiff);
-			} else if (afterDiff > 0) {
-				velocity = velocityFn(afterDiff);
-			}
+		if (!this.currentDropZone) return;
 
-			if (velocity) {
-				if (this.isVertical()) {
-					this.currentDropZone.scrollTo({
-						top: this.currentDropZone.scrollTop + velocity,
-						behavior: "smooth"
-					});
-				} else {
-					this.currentDropZone.scrollTo({
-						left: this.currentDropZone.scrollLeft + velocity,
-						behavior: "smooth"
-					});
-				}
-			}
+		const rect = this.currentDropZone.getBoundingClientRect();
+		const threshold = 100;
+		let velocity = 0;
+		const velocityFn = (x: number) => x * 5;
+		const cursorPos = this.isVertical() ? this.cursorY : this.cursorX;
+		const rectStart = this.isVertical() ? rect.top : rect.left;
+		const rectEnd = this.isVertical() ? rect.bottom : rect.right;
+		const beforeDiff = rectStart + threshold - cursorPos;
+		const afterDiff = cursorPos - (rectEnd - threshold);
 
-			setTimeout(() => this.updateScrollPosition(), 500);
+		if (beforeDiff > 0) {
+			velocity = -velocityFn(beforeDiff);
+		} else if (afterDiff > 0) {
+			velocity = velocityFn(afterDiff);
 		}
+
+		if (velocity) {
+			if (this.isVertical()) {
+				this.currentDropZone.scrollTo({
+					top: this.currentDropZone.scrollTop + velocity,
+					behavior: "smooth"
+				});
+			} else {
+				this.currentDropZone.scrollTo({
+					left: this.currentDropZone.scrollLeft + velocity,
+					behavior: "smooth"
+				});
+			}
+		}
+
+		setTimeout(() => this.updateScrollPosition(), 500);
 	}
 
 	/**
 	 * Render a placeholder element at the given position (in between the elements)
 	 */
 	renderPlaceholder() {
+		if (!this.currentDropZone) return;
+
 		// If we're not allowed to change drop zones and we're not in the same drop zone, don't render the placeholder
 		if (!this.options.allowDropZoneChange && !this.isSameDropZone()) {
 			return;
@@ -258,7 +260,7 @@ export class ListDragAndDrop extends DragAndDrop {
 		if (this.isVertical()) {
 			this.placeholder.classList.add("dx-direction-vertical");
 			this.placeholder.classList.remove("dx-direction-horizontal");
-			this.placeholder.style.height = undefined;
+			this.placeholder.style.height = "";
 		} else {
 			this.placeholder.classList.add("dx-direction-horizontal");
 			this.placeholder.classList.remove("dx-direction-vertical");

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

@@ -0,0 +1,163 @@
+<template>
+  <QBtn
+    :loading="isSaving"
+    class="shadow-none"
+    :class="colorClass"
+    @click="onAction"
+  >
+    <div class="flex items-center flex-nowrap">
+      <component
+        :is="icon || typeOptions.icon"
+        class="transition-all"
+        :class="iconClass + ' ' + typeOptions.iconClass"
+      />
+      <slot>
+        <div
+          v-if="label"
+          class="ml-2"
+        >
+          {{ label }}
+        </div>
+      </slot>
+    </div>
+    <QTooltip
+      v-if="tooltip"
+      class="whitespace-nowrap"
+    >
+      {{ tooltip }}
+    </QTooltip>
+  </QBtn>
+</template>
+<script setup lang="ts">
+import {
+	FaSolidArrowsRotate as RefreshIcon,
+	FaSolidPause as PauseIcon,
+	FaSolidPencil as EditIcon,
+	FaSolidPlay as PlayIcon,
+	FaSolidPlus as CreateIcon,
+	FaSolidStop as StopIcon,
+	FaSolidTrash as TrashIcon
+} from "danx-icon";
+import { computed } from "vue";
+import { ActionTarget, ResourceAction } from "../../../types";
+
+export interface ActionButtonProps {
+	type?: "trash" | "trash-red" | "create" | "edit" | "play" | "stop" | "pause" | "refresh";
+	color?: "red" | "blue" | "sky" | "green" | "green-invert" | "lime" | "white" | "gray";
+	icon?: object | string;
+	iconClass?: string;
+	label?: string;
+	tooltip?: string;
+	saving?: boolean;
+	action?: ResourceAction;
+	target?: ActionTarget;
+	input?: object;
+}
+
+const emit = defineEmits(["success", "error", "always"]);
+const props = withDefaults(defineProps<ActionButtonProps>(), {
+	type: null,
+	color: null,
+	icon: null,
+	iconClass: "",
+	label: "",
+	tooltip: "",
+	action: null,
+	target: null,
+	input: null
+});
+
+const colorClass = computed(() => {
+	switch (props.color) {
+		case "red":
+			return "text-red-900 bg-red-300 hover:bg-red-400";
+		case "lime":
+			return "text-lime-900 bg-lime-300 hover:bg-lime-400";
+		case "green":
+			return "text-green-900 bg-green-300 hover:bg-green-400";
+		case "green-invert":
+			return "text-lime-800 bg-green-200 hover:bg-lime-800 hover:text-green-200";
+		case "blue":
+			return "text-blue-900 bg-blue-300 hover:bg-blue-400";
+		case "sky":
+			return "text-sky-900 bg-sky-300 hover:bg-sky-400";
+		case "white":
+			return "text-white bg-gray-800 hover:bg-gray-200";
+		case "gray":
+			return "text-slate-200 bg-slate-800 hover:bg-slate-900";
+		default:
+			return "text-slate-200 hover:bg-slate-800";
+	}
+});
+const typeOptions = computed(() => {
+	switch (props.type) {
+		case "trash":
+			return {
+				icon: TrashIcon,
+				iconClass: "w-3"
+			};
+		case "create":
+			return {
+				icon: CreateIcon,
+				iconClass: "w-3"
+			};
+		case "edit":
+			return {
+				icon: EditIcon,
+				iconClass: "w-3"
+			};
+		case "play":
+			return {
+				icon: PlayIcon,
+				iconClass: "w-3"
+			};
+		case "stop":
+			return {
+				icon: StopIcon,
+				iconClass: "w-3"
+			};
+		case "pause":
+			return {
+				icon: PauseIcon,
+				iconClass: "w-3"
+			};
+		case "refresh":
+			return {
+				icon: RefreshIcon,
+				iconClass: "w-4"
+			};
+		default:
+			return {
+				icon: EditIcon,
+				iconClass: "w-3"
+			};
+	}
+});
+
+const isSaving = computed(() => {
+	if (props.saving) return true;
+	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() {
+	if (props.action) {
+		props.action.trigger(props.target, props.input).then(async (response) => {
+			emit("success", typeof response.json === "function" ? await response.json() : response);
+		}).catch((e) => {
+			console.error(`Action emitted an error: ${props.action.name}`, e, props.target);
+			emit("error", e);
+		}).finally(() => {
+			emit("always");
+		});
+	}
+}
+</script>

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

@@ -10,6 +10,11 @@
           :is="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
           :class="iconClass"
         />
+      </slot>
+      <slot
+        name="label"
+        :is-showing="isShowing"
+      >
         <div
           v-if="label"
           :class="labelClass"

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

@@ -4,6 +4,7 @@
     v-bind="$props"
     @close="onClose"
   >
+    <slot />
     <template
       v-if="$slots.title"
       #title

package/src/helpers/actions.ts

@@ -308,6 +308,10 @@ async function onConfirmAction(action: ActionOptions, target: ActionTarget, inpu
 
 export function withDefaultActions(label: string, listController?: ListController): ActionOptions[] {
 	return [
+		{
+			name: "quick-create",
+			alias: "create"
+		},
 		{
 			name: "create",
 			label: "Create " + label,

package/src/helpers/formats.ts

@@ -180,16 +180,27 @@ export function fSecondsToTime(second: number) {
 	return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
 }
 
-export function fElapsedTime(start: string, end?: string) {
+/**
+ *  Formats a number of seconds into a duration string in 00h 00m 00s format
+ */
+export function fSecondsToDuration(seconds: number) {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const secs = Math.floor(seconds % 60);
+	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${secs}s`;
+}
+
+/**
+ *  Formats a duration between two date strings in 00h 00m 00s format
+ */
+export function fDuration(start: string, end?: string) {
 	const endDateTime = end ? parseDateTime(end) : DateTime.now();
 	const diff = endDateTime?.diff(parseDateTime(start) || DateTime.now(), ["hours", "minutes", "seconds"]);
 	if (!diff?.isValid) {
 		return "-";
 	}
-	const hours = Math.floor(diff.hours);
-	const minutes = Math.floor(diff.minutes);
-	const seconds = Math.floor(diff.seconds);
-	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${seconds}s`;
+	const totalSeconds = diff.as("seconds");
+	return fSecondsToDuration(totalSeconds);
 }
 
 /**

package/src/helpers/routes.ts

@@ -5,27 +5,31 @@ import { request } from "./request";
 
 export function useActionRoutes(baseUrl: string, extend?: object): ListControlsRoutes {
 	return {
-		list(pager?) {
-			return request.post(`${baseUrl}/list`, pager);
+		list(pager?, options?) {
+			return request.post(`${baseUrl}/list`, pager, options);
 		},
-		summary(filter) {
-			return request.post(`${baseUrl}/summary`, { filter });
+		summary(filter, options?) {
+			return request.post(`${baseUrl}/summary`, { filter }, options);
 		},
-		details(target, fields) {
-			return request.get(`${baseUrl}/${target.id}/details`, { params: { fields } });
+		details(target, fields, options?) {
+			options = options || {};
+			fields && (options.params = { fields });
+			return request.get(`${baseUrl}/${target.id}/details`, options);
 		},
-		async detailsAndStore(target, fields) {
-			const item = await request.get(`${baseUrl}/${target.id}/details`, { params: { fields } });
+		async detailsAndStore(target, fields, options?) {
+			options = options || {};
+			fields && (options.params = { fields });
+			const item = await request.get(`${baseUrl}/${target.id}/details`, options);
 			return storeObject(item);
 		},
-		fieldOptions() {
-			return request.get(`${baseUrl}/field-options`);
+		fieldOptions(options?) {
+			return request.get(`${baseUrl}/field-options`, options);
 		},
-		applyAction(action, target, data) {
-			return request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, { action, data });
+		applyAction(action, target, data, options?) {
+			return request.post(`${baseUrl}/${target ? target.id : "new"}/apply-action`, { action, data }, options);
 		},
-		batchAction(action, targets, data) {
-			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data });
+		batchAction(action, targets, data, options?) {
+			return request.post(`${baseUrl}/batch-action`, { action, filter: { id: targets.map(r => r.id) }, data }, options);
 		},
 		export(filter, name) {
 			return downloadFile(`${baseUrl}/export`, name || "export.csv", { filter });

package/src/types/controls.d.ts

@@ -1,3 +1,4 @@
+import { RequestCallOptions } from "src/types/requests";
 import { ActionOptions, ActionTargetItem, ResourceAction } from "./actions";
 import { AnyObject, ComputedRef, LabelValueItem, Ref } from "./shared";
 
@@ -20,21 +21,21 @@ export interface FilterGroup {
 }
 
 export interface ListControlsRoutes<T = ActionTargetItem> {
-	list(pager?: ListControlsPagination): Promise<PagedItems>;
+	list(pager?: ListControlsPagination, options?: RequestCallOptions): Promise<PagedItems>;
 
-	summary?(filter?: ListControlsFilter): Promise<AnyObject>;
+	summary?(filter?: ListControlsFilter, options?: RequestCallOptions): Promise<AnyObject>;
 
-	details?(target: T, fields: ControlsFieldsList): Promise<T>;
+	details?(target: T, fields?: ControlsFieldsList, options?: RequestCallOptions): Promise<T>;
 
-	detailsAndStore?(target: T, fields: ControlsFieldsList): Promise<T>;
+	detailsAndStore?(target: T, fields?: ControlsFieldsList, options?: RequestCallOptions): Promise<T>;
 
-	more?(pager: ListControlsPagination): Promise<T[]>;
+	more?(pager: ListControlsPagination, options?: RequestCallOptions): Promise<T[]>;
 
-	fieldOptions?(filter?: AnyObject): Promise<AnyObject>;
+	fieldOptions?(filter?: AnyObject, options?: RequestCallOptions): Promise<AnyObject>;
 
-	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object): Promise<AnyObject>;
+	applyAction?(action: string | ResourceAction | ActionOptions, target: T | null, data?: object, options?: RequestCallOptions): Promise<AnyObject>;
 
-	batchAction?(action: string | ResourceAction | ActionOptions, targets: T[], data: object): Promise<AnyObject>;
+	batchAction?(action: string | ResourceAction | ActionOptions, targets: T[], data: object, options?: RequestCallOptions): Promise<AnyObject>;
 
 	export?(filter?: ListControlsFilter, name?: string): Promise<void>;
 }

package/src/types/fields.d.ts

@@ -19,6 +19,7 @@ export interface TextFieldProps {
 	disabled?: boolean;
 	readonly?: boolean;
 	debounce?: string | number;
+	loading?: boolean;
 }
 
 export interface NumberFieldProps extends TextFieldProps {