quasar-ui-danx 0.2.16 → 0.2.18

package/src/components/DragAndDrop/dragAndDrop.ts

@@ -2,224 +2,224 @@
  * Drag and Drop basic functionality for dragging elements and firing events on drag start, drag over and drag end
  */
 export class DragAndDrop {
-  options: {
-    direction?: string,
-    hideDragImage?: boolean,
-    showPlaceholder?: boolean,
-  } = { direction: "vertical", hideDragImage: false };
-
-  // State
-  startY = 0;
-  startX = 0;
-  startSize = 0;
-  cursorY = 0;
-  cursorX = 0;
-  onStartCb = null;
-  onEndCb = null;
-  onDropCb = null;
-  onDraggingCb = null;
-  dropZoneResolver = null;
-  currentDropZone = null;
-  draggableData = null;
-  // Used to abort dragging event listeners on the element
-  abortController = null;
-
-  constructor(options = {}) {
-    // Options
-    options = {
-      direction: "vertical",
-      hideDragImage: false,
-      ...options,
-    };
-
-    this.setOptions(options);
-  }
-
-  /**
-   * Set the options for the drag and drop instance
-   * @param options
-   * @returns {DragAndDrop}
-   */
-  setOptions(options = {}) {
-    this.options = { ...this.options, ...options };
-    return this;
-  }
-
-  /**
-   * Returns if the list is stacked vertically or horizontally
-   * @returns {boolean}
-   */
-  isVertical() {
-    return this.options.direction === "vertical";
-  }
-
-  /**
-   * Set the target drop zone for draggable elements
-   * @param dropZone
-   * @returns {DragAndDrop}
-   */
-  setDropZone(dropZone) {
-    this.dropZoneResolver = dropZone;
-    return this;
-  }
-
-  /**
-   * Callback that fires when an element has started dragging
-   * @param cb
-   * @returns {DragAndDrop}
-   */
-  onStart(cb) {
-    this.onStartCb = cb;
-    return this;
-  }
-
-  /**
-   * Callback that fires when an element has stopped dragging
-   * @param cb
-   * @returns {DragAndDrop}
-   */
-  onEnd(cb) {
-    this.onEndCb = cb;
-    return this;
-  }
-
-  /**
-   * Callback that fires when the dragging element is moved
-   * @param cb
-   * @returns {DragAndDrop}
-   */
-  onDragging(cb) {
-    this.onDraggingCb = cb;
-    return this;
-  }
-
-  /**
-   * Callback that fires when the dragging element has been dropped
-   * @param cb
-   * @returns {DragAndDrop}
-   */
-  onDrop(cb) {
-    this.onDropCb = cb;
-    return this;
-  }
-
-  /**
-   * Start listening for drag events and prepare an element for drag/drop
-   * @param e
-   * @param data
-   */
-  dragStart(e, data) {
-    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";
-      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);
-
-      if (this.options.hideDragImage) {
-        e.dataTransfer.setDragImage(new Image(), 0, 0);
-      }
-    } else {
-      console.error("Drop zone was not found", e, data);
-    }
-  }
-
-  /**
-   * Clean up event listeners after dragging is done
-   */
-  dragEnd(e) {
-    this.currentDropZone = null;
-    this.abortController.abort();
-    this.draggableData = null;
-    this.onEndCb && this.onEndCb(e);
-  }
-
-  /**
-   * The dragging element has entered a new target
-   * @param e
-   */
-  dragEnter(e) {
-    e.preventDefault();
-  }
-
-  /**
-   * The dragging element is moving
-   * @param e
-   */
-  dragOver(e) {
-    e.preventDefault();
-    this.cursorY = e.clientY;
-    this.cursorX = e.clientX;
-    this.onDraggingCb && this.onDraggingCb(e);
-  }
-
-  /**
-   * Handle dropping the element into its correct position
-   * @param e
-   */
-  drop(e) {
-    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) {
-    if (typeof this.dropZoneResolver === "string") {
-      let target = e.target;
-      while (target) {
-        if (target.dataset?.dropZone === this.dropZoneResolver) {
-          return target;
+    options: {
+        direction?: string,
+        hideDragImage?: boolean,
+        showPlaceholder?: boolean,
+    } = { direction: "vertical", hideDragImage: false };
+
+    // State
+    startY = 0;
+    startX = 0;
+    startSize = 0;
+    cursorY = 0;
+    cursorX = 0;
+    onStartCb = null;
+    onEndCb = null;
+    onDropCb = null;
+    onDraggingCb = null;
+    dropZoneResolver = null;
+    currentDropZone = null;
+    draggableData = null;
+    // Used to abort dragging event listeners on the element
+    abortController = null;
+
+    constructor(options = {}) {
+        // Options
+        options = {
+            direction: "vertical",
+            hideDragImage: false,
+            ...options
+        };
+
+        this.setOptions(options);
+    }
+
+    /**
+     * Set the options for the drag and drop instance
+     * @param options
+     * @returns {DragAndDrop}
+     */
+    setOptions(options = {}) {
+        this.options = { ...this.options, ...options };
+        return this;
+    }
+
+    /**
+     * Returns if the list is stacked vertically or horizontally
+     * @returns {boolean}
+     */
+    isVertical() {
+        return this.options.direction === "vertical";
+    }
+
+    /**
+     * Set the target drop zone for draggable elements
+     * @param dropZone
+     * @returns {DragAndDrop}
+     */
+    setDropZone(dropZone) {
+        this.dropZoneResolver = dropZone;
+        return this;
+    }
+
+    /**
+     * Callback that fires when an element has started dragging
+     * @param cb
+     * @returns {DragAndDrop}
+     */
+    onStart(cb) {
+        this.onStartCb = cb;
+        return this;
+    }
+
+    /**
+     * Callback that fires when an element has stopped dragging
+     * @param cb
+     * @returns {DragAndDrop}
+     */
+    onEnd(cb) {
+        this.onEndCb = cb;
+        return this;
+    }
+
+    /**
+     * Callback that fires when the dragging element is moved
+     * @param cb
+     * @returns {DragAndDrop}
+     */
+    onDragging(cb) {
+        this.onDraggingCb = cb;
+        return this;
+    }
+
+    /**
+     * Callback that fires when the dragging element has been dropped
+     * @param cb
+     * @returns {DragAndDrop}
+     */
+    onDrop(cb) {
+        this.onDropCb = cb;
+        return this;
+    }
+
+    /**
+     * Start listening for drag events and prepare an element for drag/drop
+     * @param e
+     * @param data
+     */
+    dragStart(e, data) {
+        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";
+            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);
+
+            if (this.options.hideDragImage) {
+                e.dataTransfer.setDragImage(new Image(), 0, 0);
+            }
+        } else {
+            console.error("Drop zone was not found", e, data);
+        }
+    }
+
+    /**
+     * Clean up event listeners after dragging is done
+     */
+    dragEnd(e) {
+        this.currentDropZone = null;
+        this.abortController.abort();
+        this.draggableData = null;
+        this.onEndCb && this.onEndCb(e);
+    }
+
+    /**
+     * The dragging element has entered a new target
+     * @param e
+     */
+    dragEnter(e) {
+        e.preventDefault();
+    }
+
+    /**
+     * The dragging element is moving
+     * @param e
+     */
+    dragOver(e) {
+        e.preventDefault();
+        this.cursorY = e.clientY;
+        this.cursorX = e.clientX;
+        this.onDraggingCb && this.onDraggingCb(e);
+    }
+
+    /**
+     * Handle dropping the element into its correct position
+     * @param e
+     */
+    drop(e) {
+        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) {
+        if (typeof this.dropZoneResolver === "string") {
+            let target = e.target;
+            while (target) {
+                if (target.dataset?.dropZone === this.dropZoneResolver) {
+                    return target;
+                }
+                target = target.parentNode;
+            }
+            return null;
+        } else if (typeof this.dropZoneResolver === "function") {
+            return this.dropZoneResolver(e);
+        } else {
+            return document.body;
         }
-        target = target.parentNode;
-      }
-      return null;
-    } else if (typeof this.dropZoneResolver === "function") {
-      return this.dropZoneResolver(e);
-    } else {
-      return document.body;
-    }
-  }
-
-  /**
-   * Returns the distance between the start and current cursor position
-   * @returns {number}
-   */
-  getDistance() {
-    return this.isVertical()
-      ? this.cursorY - this.startY
-      : this.cursorX - this.startX;
-  }
-
-  /**
-   * Returns the size of the drop zone
-   */
-  getDropZoneSize() {
-    return this.isVertical()
-      ? this.currentDropZone?.offsetHeight
-      : this.currentDropZone?.offsetWidth;
-  }
-
-  /**
-   * 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;
-  }
+    }
+
+    /**
+     * Returns the distance between the start and current cursor position
+     * @returns {number}
+     */
+    getDistance() {
+        return this.isVertical()
+            ? this.cursorY - this.startY
+            : this.cursorX - this.startX;
+    }
+
+    /**
+     * Returns the size of the drop zone
+     */
+    getDropZoneSize() {
+        return this.isVertical()
+            ? this.currentDropZone?.offsetHeight
+            : this.currentDropZone?.offsetWidth;
+    }
+
+    /**
+     * 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;
+    }
 }

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -17,7 +17,7 @@ export class ListDragAndDrop extends DragAndDrop {
     constructor(options = {}) {
         super({
             showPlaceholder: true,
-            ...options,
+            ...options
         });
     }
 
@@ -88,7 +88,7 @@ export class ListDragAndDrop extends DragAndDrop {
         const prevPosition = this.listPosition;
         const newPosition = this.getListPositionOfPoint({
             x: e.clientX,
-            y: e.clientY,
+            y: e.clientY
         });
 
         // If the cursor position has changed, we should update the rendering and see if our actual list position has
@@ -189,12 +189,12 @@ export class ListDragAndDrop extends DragAndDrop {
                 if (this.isVertical()) {
                     this.currentDropZone.scrollTo({
                         top: this.currentDropZone.scrollTop + velocity,
-                        behavior: "smooth",
+                        behavior: "smooth"
                     });
                 } else {
                     this.currentDropZone.scrollTo({
                         left: this.currentDropZone.scrollLeft + velocity,
-                        behavior: "smooth",
+                        behavior: "smooth"
                     });
                 }
             }

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -38,13 +38,13 @@
   </ContentDrawer>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
-import { XIcon as CloseIcon } from '../../svg';
-import { ContentDrawer } from '../Utility';
-import PanelsDrawerPanels from './PanelsDrawerPanels';
-import PanelsDrawerTabs from './PanelsDrawerTabs';
+import { ref, watch } from "vue";
+import { XIcon as CloseIcon } from "../../svg";
+import { ContentDrawer } from "../Utility";
+import PanelsDrawerPanels from "./PanelsDrawerPanels";
+import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
-defineEmits(['update:model-value', 'close']);
+defineEmits(["update:model-value", "close"]);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -52,7 +52,7 @@ const props = defineProps({
   },
   panelsClass: {
     type: [Object, String],
-    default: 'w-[35.5rem]'
+    default: "w-[35.5rem]"
   },
   panels: {
     type: Array,

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import { RenderVnode } from '../Utility';
+import { RenderVnode } from "../Utility";
 
 defineProps({
   activePanel: {

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -23,14 +23,14 @@
   </QTabs>
 </template>
 <script setup>
-import { QTab } from 'quasar';
-import { RenderVnode } from '../Utility';
+import { QTab } from "quasar";
+import { RenderVnode } from "../Utility";
 
-defineEmits(['update:model-value']);
+defineEmits(["update:model-value"]);
 defineProps({
   modelValue: {
     type: String,
-    default: 'general'
+    default: "general"
   },
   panels: {
     type: Array,

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

@@ -4,9 +4,9 @@
   </QBtn>
 </template>
 <script setup>
-import { DownloadIcon as ExportIcon } from '@heroicons/vue/solid';
-import { ref } from 'vue';
-import { FlashMessages } from '../../../helpers';
+import { DownloadIcon as ExportIcon } from "@heroicons/vue/solid";
+import { ref } from "vue";
+import { FlashMessages } from "../../../helpers";
 
 const props = defineProps({
   exporter: {
@@ -21,7 +21,7 @@ async function onExport() {
     await props.exporter();
   } catch (error) {
     console.error(error);
-    FlashMessages.error('Failed to export data');
+    FlashMessages.error("Failed to export data");
   }
   isExporting.value = false;
 }

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

@@ -7,9 +7,9 @@
   </QBtn>
 </template>
 <script setup>
-import { RefreshIcon } from '@heroicons/vue/solid';
+import { RefreshIcon } from "@heroicons/vue/solid";
 
-defineEmits(['refresh']);
+defineEmits(["refresh"]);
 defineProps({
   loading: Boolean
 });

package/src/components/Utility/Controls/PreviousNextControls.vue

@@ -19,9 +19,9 @@
   </div>
 </template>
 <script setup>
-import { SkipNextIcon, SkipPreviousIcon } from '../../../svg';
+import { SkipNextIcon, SkipPreviousIcon } from "../../../svg";
 
-defineEmits(['next']);
+defineEmits(["next"]);
 defineProps({
   isLoading: Boolean
 });

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

@@ -70,26 +70,26 @@
 </template>
 
 <script setup>
-import { XIcon as CloseIcon } from '@heroicons/vue/outline';
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
 
-const emit = defineEmits(['update:model-value', 'confirm', 'close']);
+const emit = defineEmits(["update:model-value", "confirm", "close"]);
 const props = defineProps({
   modelValue: { type: [String, Boolean, Object], default: true },
   title: {
     type: String,
-    default: ''
+    default: ""
   },
   titleClass: {
     type: String,
-    default: ''
+    default: ""
   },
   subtitle: {
     type: String,
-    default: ''
+    default: ""
   },
   content: {
     type: String,
-    default: ''
+    default: ""
   },
   backdropDismiss: Boolean,
   maximized: Boolean,
@@ -101,32 +101,32 @@ const props = defineProps({
   hideConfirm: Boolean,
   confirmText: {
     type: String,
-    default: 'Confirm'
+    default: "Confirm"
   },
   cancelText: {
     type: String,
-    default: 'Cancel'
+    default: "Cancel"
   },
   confirmClass: {
     type: String,
-    default: 'bg-blue-600 text-white'
+    default: "bg-blue-600 text-white"
   },
   contentClass: {
     type: String,
-    default: ''
+    default: ""
   }
 });
 
 function onConfirm() {
-  emit('confirm');
+  emit("confirm");
 
   if (props.closeOnConfirm) {
-    emit('close');
+    emit("close");
   }
 }
 
 function onClose() {
-  emit('update:model-value', false);
-  emit('close');
+  emit("update:model-value", false);
+  emit("close");
 }
 </script>