quasar-ui-danx 0.2.15 → 0.2.17

package/src/components/ActionTable/tableColumns.ts

@@ -1,7 +1,30 @@
 import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
 
-export function useTableColumns(name, columns) {
+export interface TableColumn {
+    actionMenu?: object,
+    align?: string,
+    category?: string,
+    class?: string | object,
+    field: string,
+    format?: Function,
+    innerClass?: string | object,
+    isSaving?: boolean,
+    label: string,
+    maxWidth?: number,
+    minWidth?: number,
+    name: string,
+    onClick?: Function,
+    required?: boolean,
+    resizeable?: boolean,
+    sortable?: boolean,
+    sortBy?: string,
+    sortByExpression?: string,
+    titleColumns?: string[]
+    vnode?: Function,
+}
+
+export function useTableColumns(name: string, columns: TableColumn[]) {
     const COLUMN_ORDER_KEY = `${name}-column-order`;
     const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
     const TITLE_COLUMNS_KEY = `${name}-title-columns`;

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -31,9 +31,9 @@
   </div>
 </template>
 <script setup>
-import { computed } from 'vue';
-import { fLocalizedDateTime } from '../../helpers';
-import AuditHistoryItemValue from './AuditHistoryItemValue';
+import { computed } from "vue";
+import { fLocalizedDateTime } from "../../helpers";
+import AuditHistoryItemValue from "./AuditHistoryItemValue";
 
 const props = defineProps({
   item: {
@@ -46,7 +46,7 @@ const props = defineProps({
   },
   novaUrl: {
     type: String,
-    default: '/nova'
+    default: "/nova"
   }
 });
 

package/src/components/AuditHistory/AuditHistoryItemValue.vue

@@ -23,8 +23,8 @@
   </div>
 </template>
 <script setup>
-import { fCurrency, fDate, fLocalizedDateTime, fNumber } from '../../helpers';
-import { FilePreview } from '../Utility';
+import { fCurrency, fDate, fLocalizedDateTime, fNumber } from "../../helpers";
+import { FilePreview } from "../Utility";
 
 const props = defineProps({
   type: {
@@ -38,21 +38,21 @@ const props = defineProps({
 });
 
 function format(value) {
-  if (value === null || value === '' || value === undefined) {
-    return '';
+  if (value === null || value === "" || value === undefined) {
+    return "";
   }
 
   switch (props.type) {
-    case 'NUMBER':
+    case "NUMBER":
       return fNumber(value);
-    case 'CURRENCY':
+    case "CURRENCY":
       return fCurrency(value);
-    case 'DATE':
+    case "DATE":
       return fDate(value);
-    case 'DATETIME':
+    case "DATETIME":
       return fLocalizedDateTime(value);
-    case 'BOOLEAN':
-      return value ? 'Yes' : 'No';
+    case "BOOLEAN":
+      return value ? "Yes" : "No";
   }
 
   return value;

package/src/components/DragAndDrop/HandleDraggable.vue

@@ -13,10 +13,10 @@
   </div>
 </template>
 <script setup>
-import { useDebounceFn } from '@vueuse/core';
-import { DragAndDrop } from './dragAndDrop';
+import { useDebounceFn } from "@vueuse/core";
+import { DragAndDrop } from "./dragAndDrop";
 
-const emit = defineEmits(['start', 'end', 'resize']);
+const emit = defineEmits(["start", "end", "resize"]);
 const props = defineProps({
   initialValue: {
     type: Number,
@@ -28,8 +28,8 @@ const props = defineProps({
   },
   direction: {
     type: String,
-    default: 'horizontal',
-    validator: (value) => ['vertical', 'horizontal'].includes(value)
+    default: "horizontal",
+    validator: (value) => ["vertical", "horizontal"].includes(value)
   }
 });
 
@@ -41,13 +41,13 @@ const dragAndDrop = new DragAndDrop()
       hideDragImage: true
     })
     .onDragging(useDebounceFn(() => {
-      emit('resize', {
+      emit("resize", {
         distance: dragAndDrop.getDistance(),
         percent: dragAndDrop.getPercentChange(),
         startDropZoneSize: dragAndDrop.startSize,
         dropZoneSize: dragAndDrop.getDropZoneSize()
       });
     }, 20, { maxWait: 30 }))
-    .onStart(() => emit('start'))
-    .onEnd(() => emit('end'));
+    .onStart(() => emit("start"))
+    .onEnd(() => emit("end"));
 </script>

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -16,11 +16,11 @@
   </div>
 </template>
 <script setup>
-import { DragHandleDotsIcon as DragHandleIcon } from '../../svg';
-import { SvgImg } from '../Utility';
-import { ListDragAndDrop } from './listDragAndDrop';
+import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
+import { SvgImg } from "../Utility";
+import { ListDragAndDrop } from "./listDragAndDrop";
 
-const emit = defineEmits(['position', 'update:list-items']);
+const emit = defineEmits(["position", "update:list-items"]);
 const props = defineProps({
   dropZone: {
     type: [Function, String],
@@ -28,8 +28,8 @@ const props = defineProps({
   },
   direction: {
     type: String,
-    default: 'vertical',
-    validator: (value) => ['vertical', 'horizontal'].includes(value)
+    default: "vertical",
+    validator: (value) => ["vertical", "horizontal"].includes(value)
   },
   showHandle: Boolean,
   listItems: {
@@ -42,12 +42,12 @@ const dragAndDrop = new ListDragAndDrop()
     .setDropZone(props.dropZone)
     .setOptions({ showPlaceholder: true, direction: props.direction })
     .onPositionChange((newPosition, oldPosition) => {
-      emit('position', newPosition);
+      emit("position", newPosition);
 
       if (props.listItems) {
         const items = [...props.listItems];
         items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
-        emit('update:list-items', items);
+        emit("update:list-items", items);
       }
     });
 </script>

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