quasar-ui-danx 0.4.27 → 0.4.29

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -7,231 +7,273 @@ import { DragAndDrop } from "./dragAndDrop";
  * @class
  */
 export class ListDragAndDrop extends DragAndDrop {
-    listPosition = 0;
-    cursorPosition = 0;
-    initialPosition = 0;
-    onPositionChangeCb = null;
-    onDragPositionChangeCb = null;
-    placeholder = null;
-
-    constructor(options = {}) {
-        super({
-            showPlaceholder: true,
-            ...options
-        });
-    }
-
-    /**
-     * Callback that fires after dragging has ended and the list position has changed from the original
-     * @param cb
-     * @returns {ListDragAndDrop}
-     */
-    onPositionChange(cb) {
-        this.onPositionChangeCb = 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) {
-        this.onDragPositionChangeCb = cb;
-        return this;
-    }
-
-    /**
-     * Start listening for drag events and prepare an element for drag/drop
-     * @param e
-     * @param data
-     */
-    dragStart(e, data) {
-        super.dragStart(e, data);
-
-        if (this.currentDropZone) {
-            this.listPosition = this.getListPosition(e.target);
-            this.initialPosition = this.listPosition;
-            this.updateScrollPosition();
-        }
-    }
-
-    /**
-     * When dragging has ended, check for list position changes and fire the onPositionChange callback if it has
-     */
-    dragEnd(e) {
-        const draggableData = this.draggableData;
-        this.placeholder?.remove();
-        super.dragEnd(e);
-
-        // If our list position has changed, trigger the drop callback
-        if (this.listPosition !== this.initialPosition) {
-            this.onPositionChangeCb &&
-            this.onPositionChangeCb(this.listPosition, this.initialPosition, draggableData);
-        }
-    }
-
-    /**
-     * The dragging element is moving
-     * @param e
-     */
-    dragOver(e) {
-        super.dragOver(e);
-        this.updateListPosition(e);
-    }
-
-    /**
-     * Notify if the targeted position of the cursor is different from the current position
-     * @param e
-     */
-    updateListPosition(e) {
-        const prevPosition = this.listPosition;
-        const newPosition = this.getListPositionOfPoint({
-            x: e.clientX,
-            y: e.clientY
-        });
-
-        // If the cursor position has changed, we should update the rendering and see if our actual list position has
-        // changed
-        if (this.cursorPosition !== newPosition) {
-            this.cursorPosition = newPosition;
-            this.listPosition =
-                this.initialPosition < this.cursorPosition
-                    ? this.cursorPosition - 1
-                    : this.cursorPosition;
-            if (this.options.showPlaceholder) {
-                this.renderPlaceholder();
-            }
-
-            // The position has changed, trigger the callback
-            if (this.listPosition !== prevPosition) {
-                this.onDragPositionChangeCb &&
-                this.onDragPositionChangeCb(this.listPosition, this.draggableData);
-            }
-        }
-    }
-
-    /**
-     * Find the numeric position of the element in the children of the list
-     * @returns {Number|null}
-     * @param item
-     */
-    getListPosition(item) {
-        let index = 0;
-        for (const child of this.getChildren()) {
-            if (child === item) {
-                return index;
-            }
-            index++;
-        }
-
-        return null;
-    }
-
-    /**
-     * Get all the children of the current drop zone, excluding the placeholder
-     * @returns {*}
-     */
-    getChildren() {
-        return [...this.currentDropZone.children].filter(
-            (c) => c.className.match(/drag-placeholder/) === null
-        );
-    }
-
-    /**
-     * Find the element at the current cursor position in the given drop zone
-     * @param point
-     * @returns {null}
-     */
-    getListPositionOfPoint(point) {
-        let index = 0;
-        const children = this.getChildren();
-
-        while (index < children.length) {
-            const rect = children[index].getBoundingClientRect();
-            if (this.isVertical()) {
-                if (point.y < rect.top + rect.height / 2) {
-                    break;
-                }
-            } else {
-                if (point.x < rect.left + rect.width / 2) {
-                    break;
-                }
-            }
-            index++;
-        }
-
-        return index;
-    }
-
-    /**
-     * 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 (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.placeholder) {
-            this.placeholder = document.createElement("div");
-            this.placeholder.classList.add("drag-placeholder");
-        }
-
-        // Make sure the placeholder is oriented correctly
-        if (this.isVertical()) {
-            this.placeholder.classList.add("direction-vertical");
-            this.placeholder.classList.remove("direction-horizontal");
-            this.placeholder.style.height = undefined;
-        } else {
-            this.placeholder.classList.add("direction-horizontal");
-            this.placeholder.classList.remove("direction-vertical");
-            this.placeholder.style.height =
-                this.currentDropZone.getBoundingClientRect().height + "px";
-        }
-
-        const children = this.getChildren();
-        if (this.cursorPosition < children.length) {
-            this.currentDropZone.insertBefore(
-                this.placeholder,
-                children[this.cursorPosition]
-            );
-        } else {
-            this.currentDropZone.appendChild(this.placeholder);
-        }
-    }
+	listPosition = 0;
+	cursorPosition = 0;
+	initialPosition = 0;
+	initialDropZone: HTMLElement | null = null;
+	onPositionChangeCb = null;
+	onDragPositionChangeCb = null;
+	onDropZoneChangeCb = null;
+	placeholder = null;
+
+	constructor(options = {}) {
+		super({
+			showPlaceholder: true,
+			allowDropZoneChange: true,
+			...options
+		});
+	}
+
+	/**
+	 * Callback that fires after dragging has ended and the list position has changed from the original
+	 */
+	onPositionChange(cb): ListDragAndDrop {
+		this.onPositionChangeCb = cb;
+		return this;
+	}
+
+	/**
+	 * Callback that fires when the drop zone has changed
+	 */
+	onDropZoneChange(cb): 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) {
+		this.onDragPositionChangeCb = cb;
+		return this;
+	}
+
+	/**
+	 * Start listening for drag events and prepare an element for drag/drop
+	 * @param e
+	 * @param data
+	 */
+	dragStart(e, data) {
+		super.dragStart(e, data);
+
+		if (this.currentDropZone) {
+			this.listPosition = this.getListPosition(e.target);
+			this.initialPosition = this.listPosition;
+			this.initialDropZone = this.currentDropZone;
+			this.updateScrollPosition();
+		}
+	}
+
+	/**
+	 * When dragging has ended, check for list position changes and fire the onPositionChange callback if it has
+	 */
+	dragEnd(e) {
+		const draggableData = this.draggableData;
+		this.placeholder?.remove();
+		const newDropZone = this.currentDropZone;
+		super.dragEnd(e);
+
+		// If the list drop zone has changed, trigger the callback for drop zone change
+		if (newDropZone && newDropZone !== this.initialDropZone) {
+			this.onDropZoneChangeCb && this.onDropZoneChangeCb(e, newDropZone, this.listPosition, this.initialPosition, draggableData);
+		} else if (this.listPosition !== this.initialPosition) {
+			// If our list position has changed, trigger the position change callback
+			this.onPositionChangeCb &&
+			this.onPositionChangeCb(this.listPosition, this.initialPosition, draggableData);
+		}
+	}
+
+	/**
+	 * The dragging element is moving
+	 * @param e
+	 */
+	dragOver(e) {
+		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 = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const newDropZone = this.getDropZoneForTarget(e.target as HTMLElement);
+		if (newDropZone !== this.currentDropZone) {
+			this.currentDropZone = newDropZone;
+			this.cursorPosition = 0;
+			this.listPosition = 0;
+			this.placeholder?.remove();
+		}
+
+		const prevPosition = this.listPosition;
+		const newPosition = this.getListPositionOfPoint(point);
+
+		// If the cursor position has changed, we should update the rendering and see if our actual list position has
+		// changed
+		if (this.cursorPosition !== newPosition) {
+			this.cursorPosition = newPosition;
+			this.listPosition =
+					this.initialPosition < this.cursorPosition
+							? this.cursorPosition - 1
+							: this.cursorPosition;
+			if (this.options.showPlaceholder) {
+				this.renderPlaceholder();
+			}
+
+			// The position has changed, trigger the callback
+			if (this.listPosition !== prevPosition) {
+				this.onDragPositionChangeCb &&
+				this.onDragPositionChangeCb(this.listPosition, this.draggableData);
+			}
+		}
+	}
+
+	/**
+	 * Find the numeric position of the element in the children of the list
+	 * @returns {Number|null}
+	 * @param item
+	 */
+	getListPosition(item) {
+		let index = 0;
+		for (const child of this.getChildren()) {
+			if (child === item) {
+				return index;
+			}
+			index++;
+		}
+
+		return null;
+	}
+
+	/**
+	 * Get all the children of the current drop zone, excluding the placeholder
+	 * @returns {*}
+	 */
+	getChildren() {
+		return [...(this.currentDropZone?.children || [])].filter(
+				(c) => c.className.match(/dx-drag-placeholder/) === null
+		);
+	}
+
+	/**
+	 * Get the list element that is the parent of the target element
+	 */
+	getDropZoneForTarget(target: HTMLElement): HTMLElement | null {
+		return target.closest(`[data-drop-zone]`);
+	}
+
+	/**
+	 * Check if the current drop zone is the same as the initial drop zone
+	 */
+	isSameDropZone() {
+		return this.currentDropZone === this.initialDropZone;
+	}
+
+	/**
+	 * Find the element at the current cursor position in the given drop zone
+	 * @param point
+	 * @returns {null}
+	 */
+	getListPositionOfPoint(point) {
+		let index = 0;
+		const children = this.getChildren();
+
+		while (index < children.length) {
+			const rect = children[index].getBoundingClientRect();
+			if (this.isVertical()) {
+				if (point.y < rect.top + rect.height / 2) {
+					break;
+				}
+			} else {
+				if (point.x < rect.left + rect.width / 2) {
+					break;
+				}
+			}
+			index++;
+		}
+
+		return index;
+	}
+
+	/**
+	 * 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 (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 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;
+		}
+
+		if (!this.placeholder) {
+			this.placeholder = document.createElement("div");
+			this.placeholder.classList.add("dx-drag-placeholder");
+		}
+
+		// Make sure the placeholder is oriented correctly
+		if (this.isVertical()) {
+			this.placeholder.classList.add("dx-direction-vertical");
+			this.placeholder.classList.remove("dx-direction-horizontal");
+			this.placeholder.style.height = undefined;
+		} else {
+			this.placeholder.classList.add("dx-direction-horizontal");
+			this.placeholder.classList.remove("dx-direction-vertical");
+			this.placeholder.style.height =
+					this.currentDropZone.getBoundingClientRect().height + "px";
+		}
+
+		const children = this.getChildren();
+		if (this.cursorPosition < children.length) {
+			this.currentDropZone.insertBefore(
+					this.placeholder,
+					children[this.cursorPosition]
+			);
+		} else {
+			this.currentDropZone.appendChild(this.placeholder);
+		}
+	}
 }

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -16,7 +16,7 @@
             <h2 v-if="title">
               {{ title }}
             </h2>
-            <div v-if="!activeItem">
+            <div v-if="!target">
               Loading
               <QSpinnerHourglass />
             </div>
@@ -39,22 +39,22 @@
       </div>
       <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
         <div
-          v-if="activeItem.__timestamp > 0"
+          v-if="target.__timestamp > 0"
           class="flex items-stretch flex-nowrap h-full"
         >
           <PanelsDrawerTabs
-            :key="'pd-tabs:' + activeItem.id"
+            :key="'pd-tabs:' + target.id"
             v-model="activePanel"
-            :active-item="activeItem"
+            :target="target"
             :class="tabsClass"
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
           />
           <PanelsDrawerPanels
-            :key="'pd-panels:' + activeItem.id"
+            :key="'pd-panels:' + target.id"
             :panels="panels"
             :active-panel="activePanel"
-            :active-item="activeItem"
+            :active-item="target"
             :class="activePanelOptions?.class || panelsClass"
           />
           <div
@@ -79,7 +79,7 @@ import PanelsDrawerTabs from "./PanelsDrawerTabs";
 export interface Props {
 	title?: string,
 	modelValue?: string | number,
-	activeItem: ActionTargetItem;
+	target: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
 	position?: "standard" | "right" | "left";

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -13,7 +13,7 @@
         <RenderVnode
           v-if="panel.tabVnode"
           :key="panel.name"
-          :vnode="panel.tabVnode(activeItem, modelValue)"
+          :vnode="panel.tabVnode(target, modelValue)"
           :is-active="modelValue === panel.name"
           :name="panel.name"
           :label="panel.label"
@@ -37,7 +37,7 @@ defineEmits(["update:model-value"]);
 
 interface Props {
 	modelValue?: string | number;
-	activeItem: ActionTargetItem;
+	target: ActionTargetItem;
 	panels: ActionPanel[];
 }
 
@@ -51,7 +51,7 @@ function isEnabled(panel) {
 	if (!panel.enabled) return false;
 
 	if (typeof panel.enabled === "function") {
-		return panel.enabled(props.activeItem);
+		return panel.enabled(props.target);
 	}
 
 	return true;

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

@@ -0,0 +1,86 @@
+<template>
+  <QBtn
+    class="py-1 px-2"
+    :disable="disable"
+    @click="onToggle"
+  >
+    <div class="flex items-center flex-nowrap whitespace-nowrap">
+      <slot :is-showing="isShowing">
+        <component
+          :is="isShowing ? (hideIcon || DefaultHideIcon) : (showIcon || DefaultShowIcon)"
+          :class="iconClass"
+        />
+        <div
+          v-if="label"
+          :class="labelClass"
+        >
+          {{ (isShowing ? hideLabel : showLabel) || label }}
+        </div>
+      </slot>
+    </div>
+    <QTooltip v-if="tooltip">
+      {{ tooltip }}
+    </QTooltip>
+  </QBtn>
+</template>
+<script lang="ts" setup>
+import { FaSolidEye as DefaultShowIcon, FaSolidEyeSlash as DefaultHideIcon } from "danx-icon";
+import { nextTick } from "vue";
+import { getItem, setItem } from "../../../helpers";
+
+export interface Props {
+	name?: string;
+	showLabel?: string;
+	hideLabel?: string;
+	showIcon?: object | string;
+	hideIcon?: object | string;
+	iconClass?: string;
+	labelClass?: string;
+	label?: string;
+	tooltip?: string;
+	disable?: boolean;
+}
+
+const emit = defineEmits(["show", "hide"]);
+const isShowing = defineModel<boolean>();
+const props = withDefaults(defineProps<Props>(), {
+	name: "",
+	showLabel: "",
+	hideLabel: "",
+	showIcon: null,
+	hideIcon: null,
+	iconClass: "w-4 h-6",
+	labelClass: "ml-2",
+	label: "",
+	tooltip: ""
+});
+
+const SETTINGS_KEY = "show-hide-button";
+const settings = getItem(SETTINGS_KEY, {});
+
+if (props.name) {
+	if (settings[props.name] !== undefined) {
+		isShowing.value = settings[props.name];
+	}
+}
+
+function onToggle() {
+	isShowing.value = !isShowing.value;
+
+
+	// NOTE: use nextTick to ensure the value is updated before saving (if the parent does not pass a value for modelValue, this can cause a desync)
+	nextTick(() => {
+		if (isShowing.value) {
+			emit("show");
+		} else {
+			emit("hide");
+		}
+
+		if (props.name) {
+			settings[props.name] = isShowing.value;
+			setItem(SETTINGS_KEY, { ...getItem(SETTINGS_KEY, {}), [props.name]: isShowing.value });
+		}
+	});
+}
+
+</script>

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

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