quasar-ui-danx 0.4.36 → 0.4.38

package/package.json

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

package/src/components/ActionTable/Form/Fields/MultiFileField.vue

@@ -6,9 +6,8 @@
     @drop.prevent="onDrop"
   >
     <FieldLabel
-      :field="field"
+      v-if="label"
       :label="label"
-      :show-name="showName"
     />
 
     <input

package/src/components/ActionTable/Form/Fields/SelectionMenuField.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="group flex items-center flex-nowrap gap-x-1 relative">
+    <QInnerLoading
+      v-if="loading"
+      showing
+      class="bg-sky-900 opacity-50 z-10 rounded"
+      color="teal"
+    />
+    <ShowHideButton
+      v-if="selectable"
+      v-model="isSelecting"
+      :disable="disable"
+      :label="selectText"
+      :class="selectClass"
+      :show-icon="selectIcon || DefaultSelectIcon"
+      class="mr-2"
+    >
+      <template #label>
+        <QMenu
+          :model-value="isSelecting"
+          @before-hide="isSelecting = false"
+          @hide="isSelecting = false"
+        >
+          <div>
+            <div
+              v-for="option in options"
+              :key="option.id"
+              v-ripple
+              class="cursor-pointer flex items-center relative"
+              :class="{'bg-sky-900 hover:bg-sky-800': selected?.id === option.id, 'hover:bg-slate-600': selected?.id !== option.id}"
+              @click="selected = option"
+            >
+              <div class="flex-grow px-4 py-2">
+                {{ option.name }}
+              </div>
+              <ActionButton
+                v-if="deletable"
+                type="trash"
+                class="ml-4 mr-2"
+                @click.stop.prevent="$emit('delete', option)"
+              />
+            </div>
+            <QSeparator class="bg-slate-400 my-2" />
+            <div class="px-4 mb-2">
+              <QBtn
+                :class="createClass"
+                :loading="loading"
+                @click="$emit('create')"
+              >
+                <CreateIcon
+                  class="w-3"
+                  :class="createText ? 'mr-2' : ''"
+                />
+                {{ createText }}
+              </QBtn>
+            </div>
+          </div>
+        </QMenu>
+      </template>
+    </ShowHideButton>
+
+    <div :class="labelClass">
+      <template v-if="selected">
+        <EditableDiv
+          v-if="nameEditable"
+          :model-value="selected.name"
+          color="slate-600"
+          @update:model-value="name => $emit('update', {name})"
+        />
+        <template v-else>
+          {{ selected.name }}
+        </template>
+      </template>
+      <template v-else>
+        <slot name="no-selection">
+          (No selection)
+        </slot>
+      </template>
+    </div>
+
+
+    <ShowHideButton
+      v-if="editable && selected"
+      v-model="editing"
+      :label="editText"
+      :class="editClass"
+      class="ml-1"
+      :show-icon="EditIcon"
+      :hide-icon="DoneEditingIcon"
+    />
+
+    <QBtn
+      v-if="clearable && selected"
+      :label="clearText"
+      :class="clearClass"
+      class="opacity-0 group-hover:opacity-100 transition-all"
+      @click="selected = null"
+    >
+      <ClearIcon class="w-4" />
+    </QBtn>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+	FaSolidCheck as DoneEditingIcon,
+	FaSolidCircleXmark as ClearIcon,
+	FaSolidListCheck as DefaultSelectIcon,
+	FaSolidPencil as EditIcon,
+	FaSolidPlus as CreateIcon
+} from "danx-icon";
+import { ref } from "vue";
+import { ActionTargetItem } from "../../../../types";
+import { ShowHideButton } from "../../../Utility/Buttons";
+import ActionButton from "../../../Utility/Buttons/ActionButton";
+import EditableDiv from "./EditableDiv";
+
+defineEmits(["create", "update", "delete"]);
+const selected = defineModel<ActionTargetItem | null>("selected");
+const editing = defineModel<boolean>("editing");
+withDefaults(defineProps<{
+	options: ActionTargetItem[];
+	showEdit?: boolean;
+	loading?: boolean;
+	selectText?: string;
+	createText?: string;
+	editText?: string;
+	clearText?: string;
+	selectClass?: string;
+	createClass?: string;
+	editClass?: string;
+	clearClass?: string;
+	labelClass?: string;
+	selectIcon?: object | string;
+	selectable?: boolean;
+	creatable?: boolean;
+	editable?: boolean;
+	deletable?: boolean;
+	nameEditable?: boolean;
+	clearable?: boolean;
+	disable?: boolean;
+}>(), {
+	selectText: "",
+	createText: "",
+	editText: "",
+	clearText: "",
+	selectClass: "bg-sky-800",
+	createClass: "bg-green-900",
+	editClass: "",
+	clearClass: "rounded-full",
+	labelClass: "text-slate-600",
+	selectIcon: null
+});
+
+const isSelecting = ref(false);
+</script>

package/src/components/ActionTable/Form/Fields/TextField.vue

@@ -30,6 +30,7 @@
         :model-value="modelValue"
         :maxlength="allowOverMax ? undefined : maxLength"
         :debounce="debounce"
+        :loading="loading"
         @keydown.enter="$emit('submit')"
         @update:model-value="$emit('update:model-value', $event)"
       >

package/src/components/ActionTable/Form/Fields/index.ts

@@ -19,6 +19,7 @@ export { default as NumberField } from "./NumberField.vue";
 export { default as NumberRangeField } from "./NumberRangeField.vue";
 export { default as SelectDrawer } from "./SelectDrawer.vue";
 export { default as SelectField } from "./SelectField.vue";
+export { default as SelectionMenuField } from "./SelectionMenuField.vue";
 export { default as SelectOrCreateField } from "./SelectOrCreateField.vue";
 export { default as SelectWithChildrenField } from "./SelectWithChildrenField.vue";
 export { default as SingleFileField } from "./SingleFileField.vue";

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;
 	}
 }