quasar-ui-danx 0.4.35 → 0.4.37

package/package.json

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

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -2,8 +2,8 @@
   <div
     :class="{'cursor-move': !showHandle && !disabled}"
     :draggable="disabled ? undefined : 'true'"
-    @dragstart.stop="disabled ? null : dragAndDrop.dragStart"
-    @dragend="disabled ? null : dragAndDrop.dragEnd"
+    @dragstart.stop="dragAndDrop.dragStart"
+    @dragend="dragAndDrop.dragEnd"
   >
     <div :class="contentClass">
       <div
@@ -28,7 +28,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from "vue";
+import { DropZoneResolver } from "src/components/DragAndDrop/dragAndDrop";
+import { computed, watch } from "vue";
 import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
 import { SvgImg } from "../Utility";
 import { ListDragAndDrop } from "./listDragAndDrop";
@@ -36,7 +37,7 @@ import { ListDragAndDrop } from "./listDragAndDrop";
 const emit = defineEmits(["position", "update:list-items", "drop-zone"]);
 const dragging = defineModel<boolean>();
 const props = withDefaults(defineProps<{
-	dropZone: string | (() => string);
+	dropZone: DropZoneResolver;
 	direction?: "vertical" | "horizontal";
 	showHandle?: boolean;
 	changeDropZone?: boolean;
@@ -53,13 +54,21 @@ const props = withDefaults(defineProps<{
 	listItems: () => []
 });
 
+watch(() => props.disabled, (value) => dragAndDrop.setOptions({ disabled: value }));
+
 const resolvedHandleClass = computed(() => ({
 	"cursor-move": !props.disabled,
 	...(typeof props.handleClass === "string" ? { [props.handleClass]: true } : props.handleClass)
 }));
+
 const dragAndDrop = new ListDragAndDrop()
 	.setDropZone(props.dropZone)
-	.setOptions({ showPlaceholder: true, allowDropZoneChange: props.changeDropZone, direction: props.direction })
+	.setOptions({
+		showPlaceholder: true,
+		allowDropZoneChange: props.changeDropZone,
+		direction: props.direction,
+		disabled: props.disabled
+	})
 	.onStart(() => dragging.value = true)
 	.onEnd(() => dragging.value = false)
 	.onDropZoneChange((target, dropZone, newPosition, oldPosition, data) => {

package/src/components/DragAndDrop/dragAndDrop.ts

@@ -1,3 +1,9 @@
+import { AnyObject } from "src/types";
+
+export type DropZoneResolver = ((e: DragEvent) => HTMLElement) | string | null;
+export type DragAndDropCallback = ((e: DragEvent, data: DraggableData) => void) | null;
+export type DraggableData = AnyObject | string | number | null;
+
 /**
  * Drag and Drop basic functionality for dragging elements and firing events on drag start, drag over and drag end
  */
@@ -7,6 +13,7 @@ export class DragAndDrop {
 		hideDragImage?: boolean,
 		showPlaceholder?: boolean,
 		allowDropZoneChange?: boolean,
+		disabled?: boolean,
 	} = { direction: "vertical", hideDragImage: false };
 
 	// State
@@ -15,19 +22,20 @@ export class DragAndDrop {
 	startSize = 0;
 	cursorY = 0;
 	cursorX = 0;
-	onStartCb = null;
-	onEndCb = null;
-	onDropCb = null;
-	onDraggingCb = null;
-	dropZoneResolver = null;
+	onStartCb: DragAndDropCallback = null;
+	onEndCb: DragAndDropCallback = null;
+	onDropCb: DragAndDropCallback = null;
+	onDraggingCb: DragAndDropCallback = null;
+	dropZoneResolver: DropZoneResolver = null;
 	currentDropZone: HTMLElement | null = null;
-	draggableData = null;
+	draggableData: DraggableData = null;
 	// Used to abort dragging event listeners on the element
-	abortController = null;
+	abortController: AbortController | null = null;
 
 	constructor(options = {}) {
 		// Options
 		options = {
+			disabled: false,
 			direction: "vertical",
 			hideDragImage: false,
 			...options
@@ -38,8 +46,6 @@ export class DragAndDrop {
 
 	/**
 	 * Set the options for the drag and drop instance
-	 * @param options
-	 * @returns {DragAndDrop}
 	 */
 	setOptions(options = {}) {
 		this.options = { ...this.options, ...options };
@@ -48,7 +54,6 @@ export class DragAndDrop {
 
 	/**
 	 * Returns if the list is stacked vertically or horizontally
-	 * @returns {boolean}
 	 */
 	isVertical() {
 		return this.options.direction === "vertical";
@@ -56,77 +61,68 @@ export class DragAndDrop {
 
 	/**
 	 * Set the target drop zone for draggable elements
-	 * @param dropZone
-	 * @returns {DragAndDrop}
 	 */
-	setDropZone(dropZone) {
+	setDropZone(dropZone: DropZoneResolver) {
 		this.dropZoneResolver = dropZone;
 		return this;
 	}
 
 	/**
 	 * Callback that fires when an element has started dragging
-	 * @param cb
-	 * @returns {DragAndDrop}
 	 */
-	onStart(cb) {
+	onStart(cb: DragAndDropCallback) {
 		this.onStartCb = cb;
 		return this;
 	}
 
 	/**
 	 * Callback that fires when an element has stopped dragging
-	 * @param cb
-	 * @returns {DragAndDrop}
 	 */
-	onEnd(cb) {
+	onEnd(cb: DragAndDropCallback) {
 		this.onEndCb = cb;
 		return this;
 	}
 
 	/**
 	 * Callback that fires when the dragging element is moved
-	 * @param cb
-	 * @returns {DragAndDrop}
 	 */
-	onDragging(cb) {
+	onDragging(cb: DragAndDropCallback) {
 		this.onDraggingCb = cb;
 		return this;
 	}
 
 	/**
 	 * Callback that fires when the dragging element has been dropped
-	 * @param cb
-	 * @returns {DragAndDrop}
 	 */
-	onDrop(cb) {
+	onDrop(cb: DragAndDropCallback) {
 		this.onDropCb = 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;
 		this.currentDropZone = this.getDropZone(e);
 
 		if (this.currentDropZone) {
 			this.startY = e.clientY;
 			this.startX = e.clientX;
 			this.startSize = this.getDropZoneSize();
-			e.dataTransfer.effectAllowed = "move";
-			e.dataTransfer.dropEffect = "move";
+			if (e.dataTransfer) {
+				e.dataTransfer.effectAllowed = "move";
+				e.dataTransfer.dropEffect = "move";
+			}
 			this.draggableData = data;
 			this.abortController = new AbortController();
 			const options = { signal: this.abortController.signal };
 			document.addEventListener("dragenter", (e) => this.dragEnter(e), options);
 			document.addEventListener("dragover", (e) => this.dragOver(e), options);
 			document.addEventListener("drop", (e) => this.drop(e), options);
-			this.onStartCb && this.onStartCb(e);
+			this.onStartCb && this.onStartCb(e, this.draggableData);
 
-			if (this.options.hideDragImage) {
+			if (e.dataTransfer && this.options.hideDragImage) {
 				e.dataTransfer.setDragImage(new Image(), 0, 0);
 			}
 		} else {
@@ -137,55 +133,53 @@ export class DragAndDrop {
 	/**
 	 * Clean up event listeners after dragging is done
 	 */
-	dragEnd(e) {
+	dragEnd(e: DragEvent) {
+		if (this.options.disabled) return;
 		this.currentDropZone = null;
 		this.abortController?.abort();
+		this.onEndCb && this.onEndCb(e, this.draggableData);
 		this.draggableData = null;
-		this.onEndCb && this.onEndCb(e);
 	}
 
 	/**
 	 * The dragging element has entered a new target
-	 * @param e
 	 */
-	dragEnter(e) {
+	dragEnter(e: DragEvent) {
 		e.preventDefault();
 	}
 
 	/**
 	 * The dragging element is moving
-	 * @param e
 	 */
-	dragOver(e) {
+	dragOver(e: DragEvent) {
+		if (this.options.disabled) return;
 		e.preventDefault();
 		this.cursorY = e.clientY;
 		this.cursorX = e.clientX;
-		this.onDraggingCb && this.onDraggingCb(e);
+		this.onDraggingCb && this.onDraggingCb(e, this.draggableData);
 	}
 
 	/**
 	 * Handle dropping the element into its correct position
-	 * @param e
 	 */
-	drop(e) {
-		e.dataTransfer.dropEffect = "move";
+	drop(e: DragEvent) {
+		if (this.options.disabled) return;
+		e.dataTransfer && (e.dataTransfer.dropEffect = "move");
 		e.preventDefault();
 		this.onDropCb && this.onDropCb(e, this.draggableData);
 	}
 
 	/**
 	 * Returns the drop zone if the current target element is or is inside the drop zone
-	 * @param e
-	 * @returns {HTMLElement|null}
 	 */
-	getDropZone(e) {
+	getDropZone(e: DragEvent): HTMLElement | null {
 		if (typeof this.dropZoneResolver === "string") {
-			let target = e.target;
+			let target = e.target as HTMLElement;
 			while (target) {
 				if (target.dataset?.dropZone === this.dropZoneResolver) {
 					return target;
 				}
-				target = target.parentNode;
+				target = target.parentNode as HTMLElement;
 			}
 			return null;
 		} else if (typeof this.dropZoneResolver === "function") {
@@ -197,9 +191,8 @@ export class DragAndDrop {
 
 	/**
 	 * Returns the distance between the start and current cursor position
-	 * @returns {number}
 	 */
-	getDistance() {
+	getDistance(): number {
 		return this.isVertical()
 				? this.cursorY - this.startY
 				: this.cursorX - this.startX;
@@ -208,19 +201,17 @@ export class DragAndDrop {
 	/**
 	 * Returns the size of the drop zone
 	 */
-	getDropZoneSize() {
-		return this.isVertical()
+	getDropZoneSize(): number {
+		return (this.isVertical()
 				? this.currentDropZone?.offsetHeight
-				: this.currentDropZone?.offsetWidth;
+				: this.currentDropZone?.offsetWidth) || 0;
 	}
 
 	/**
 	 * Returns the percent change between the start and current cursor position relative to the drop zone size
-	 *
-	 * @returns {number}
 	 */
 	getPercentChange() {
 		const distance = this.getDistance();
-		return (distance / this.startSize) * 100;
+		return (distance / (this.startSize || 1)) * 100;
 	}
 }

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/helpers/routes.ts

@@ -11,15 +11,11 @@ export function useActionRoutes(baseUrl: string, extend?: object): ListControlsR
 		summary(filter) {
 			return request.post(`${baseUrl}/summary`, { filter });
 		},
-		details(target) {
-			return request.get(`${baseUrl}/${target.id}/details`);
+		details(target, fields) {
+			return request.get(`${baseUrl}/${target.id}/details`, { params: { fields } });
 		},
-		async detailsAndStore(target) {
-			const item = await request.get(`${baseUrl}/${target.id}/details`);
-			return storeObject(item);
-		},
-		async relation(target, relation) {
-			const item = await request.get(`${baseUrl}/${target.id}/relation/${relation}`);
+		async detailsAndStore(target, fields) {
+			const item = await request.get(`${baseUrl}/${target.id}/details`, { params: { fields } });
 			return storeObject(item);
 		},
 		fieldOptions() {

package/src/types/controls.d.ts

@@ -24,11 +24,9 @@ export interface ListControlsRoutes<T = ActionTargetItem> {
 
 	summary?(filter?: ListControlsFilter): Promise<AnyObject>;
 
-	details?(target: T): Promise<T>;
+	details?(target: T, fields: ControlsFieldsList): Promise<T>;
 
-	detailsAndStore?(target: T): Promise<T>;
-
-	relation?(target: T, relation: string): Promise<T>;
+	detailsAndStore?(target: T, fields: ControlsFieldsList): Promise<T>;
 
 	more?(pager: ListControlsPagination): Promise<T[]>;