quasar-ui-danx 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
-    "autoprefixer": "^10.0.2",
+    "autoprefixer": "^10.4.17",
     "chalk": "^4.1.0",
     "core-js": "^3.0.0",
     "cssnano": "^4.1.10",
@@ -38,10 +38,14 @@
     "open": "^7.3.0",
     "postcss": "^8.1.9",
     "quasar": "^2.0.0",
+    "raw-loader": "^4.0.2",
     "rimraf": "^3.0.0",
     "rollup": "^2.45.0",
     "rtlcss": "^2.6.1",
     "sass": "^1.33.0",
+    "svg-inline-loader": "^0.8.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
     "uglify-js": "^3.13.3",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0",
@@ -56,5 +60,8 @@
     "last 4 ChromeAndroid versions",
     "last 4 FirefoxAndroid versions",
     "last 4 iOS versions"
-  ]
+  ],
+  "dependencies": {
+    "@vueuse/core": "^10.7.2"
+  }
 }

package/src/components/DragAndDrop/HandleDraggable.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    :class="{
+      'cursor-ew-resize': direction === 'horizontal',
+      'cursor-ns-resize': direction === 'vertical',
+    }"
+    class="flex justify-center items-center w-full h-full"
+    draggable="true"
+    @dragstart="dragAndDrop.dragStart"
+    @dragend="dragAndDrop.dragEnd"
+  >
+    <slot />
+  </div>
+</template>
+<script setup>
+import { useDebounceFn } from "@vueuse/core";
+import { DragAndDrop } from "./dragAndDrop";
+
+const emit = defineEmits(["start", "end", "resize"]);
+const props = defineProps({
+  initialValue: {
+    type: Number,
+    default: null,
+  },
+  dropZone: {
+    type: [Function, String],
+    required: true,
+  },
+  direction: {
+    type: String,
+    default: "horizontal",
+    validator: (value) => ["vertical", "horizontal"].includes(value),
+  },
+});
+
+const dragAndDrop = new DragAndDrop()
+  .setDropZone(props.dropZone)
+  .setOptions({
+    showPlaceholder: true,
+    direction: props.direction,
+    hideDragImage: true,
+  })
+  .onDragging(useDebounceFn(() => {
+    emit("resize", {
+      distance: dragAndDrop.getDistance(),
+      percent: dragAndDrop.getPercentChange(),
+      startDropZoneSize: dragAndDrop.startSize,
+      dropZoneSize: dragAndDrop.getDropZoneSize(),
+    });
+  }, 20, { maxWait: 30 }))
+  .onStart(() => emit("start"))
+  .onEnd(() => emit("end"));
+</script>

package/src/components/DragAndDrop/Icons/DragHandleDotsIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.5 16C7.08333 16 6.72933 15.854 6.438 15.562C6.146 15.2707 6 14.9167 6 14.5C6 14.0833 6.146 13.7293 6.438 13.438C6.72933 13.146 7.08333 13 7.5 13C7.91667 13 8.27067 13.146 8.562 13.438C8.854 13.7293 9 14.0833 9 14.5C9 14.9167 8.854 15.2707 8.562 15.562C8.27067 15.854 7.91667 16 7.5 16ZM12.5 16C12.0833 16 11.7293 15.854 11.438 15.562C11.146 15.2707 11 14.9167 11 14.5C11 14.0833 11.146 13.7293 11.438 13.438C11.7293 13.146 12.0833 13 12.5 13C12.9167 13 13.2707 13.146 13.562 13.438C13.854 13.7293 14 14.0833 14 14.5C14 14.9167 13.854 15.2707 13.562 15.562C13.2707 15.854 12.9167 16 12.5 16ZM7.5 11.5C7.08333 11.5 6.72933 11.354 6.438 11.062C6.146 10.7707 6 10.4167 6 10C6 9.58333 6.146 9.22933 6.438 8.938C6.72933 8.646 7.08333 8.5 7.5 8.5C7.91667 8.5 8.27067 8.646 8.562 8.938C8.854 9.22933 9 9.58333 9 10C9 10.4167 8.854 10.7707 8.562 11.062C8.27067 11.354 7.91667 11.5 7.5 11.5ZM12.5 11.5C12.0833 11.5 11.7293 11.354 11.438 11.062C11.146 10.7707 11 10.4167 11 10C11 9.58333 11.146 9.22933 11.438 8.938C11.7293 8.646 12.0833 8.5 12.5 8.5C12.9167 8.5 13.2707 8.646 13.562 8.938C13.854 9.22933 14 9.58333 14 10C14 10.4167 13.854 10.7707 13.562 11.062C13.2707 11.354 12.9167 11.5 12.5 11.5ZM7.5 7C7.08333 7 6.72933 6.854 6.438 6.562C6.146 6.27067 6 5.91667 6 5.5C6 5.08333 6.146 4.72933 6.438 4.438C6.72933 4.146 7.08333 4 7.5 4C7.91667 4 8.27067 4.146 8.562 4.438C8.854 4.72933 9 5.08333 9 5.5C9 5.91667 8.854 6.27067 8.562 6.562C8.27067 6.854 7.91667 7 7.5 7ZM12.5 7C12.0833 7 11.7293 6.854 11.438 6.562C11.146 6.27067 11 5.91667 11 5.5C11 5.08333 11.146 4.72933 11.438 4.438C11.7293 4.146 12.0833 4 12.5 4C12.9167 4 13.2707 4.146 13.562 4.438C13.854 4.72933 14 5.08333 14 5.5C14 5.91667 13.854 6.27067 13.562 6.562C13.2707 6.854 12.9167 7 12.5 7Z"
+    fill="currentColor"/>
+</svg>

package/src/components/DragAndDrop/Icons/DragHandleIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 7 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M0.5 1L0.5 15C0.5 15.55 0.95 16 1.5 16C2.05 16 2.5 15.55 2.5 15L2.5 1C2.5 0.45 2.05 0 1.5 0C0.95 0 0.5 0.45 0.5 1ZM6.5 15L6.5 1C6.5 0.45 6.05 0 5.5 0C4.95 0 4.5 0.45 4.5 1L4.5 15C4.5 15.55 4.95 16 5.5 16C6.05 16 6.5 15.55 6.5 15Z"
+    fill="currentColor"/>
+</svg>

package/src/components/DragAndDrop/Icons/index.ts

@@ -0,0 +1,2 @@
+export * as HandleDraggableIcon from "./DragHandleIcon.svg";
+export * as HandleDraggableDotsIcon from "./DragHandleDotsIcon.svg";

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+      class="cursor-move"
+      draggable="true"
+      @dragstart="dragAndDrop.dragStart"
+      @dragend="dragAndDrop.dragEnd"
+  >
+    <div class="flex items-center">
+      <div v-if="showHandle">
+        <img :src="DragHandleIcon" class="w-4 h-4" alt="drag-handle" />
+      </div>
+      <div class="flex-grow">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { HandleDraggableDotsIcon as DragHandleIcon } from "./Icons";
+import { ListDragAndDrop } from "./listDragAndDrop";
+
+const emit = defineEmits(["position", "update:list-items"]);
+const props = defineProps({
+  dropZone: {
+    type: [Function, String],
+    required: true,
+  },
+  direction: {
+    type: String,
+    default: "vertical",
+    validator: (value) => ["vertical", "horizontal"].includes(value),
+  },
+  showHandle: Boolean,
+  listItems: {
+    type: Array,
+    default: null,
+  }
+});
+
+const dragAndDrop = new ListDragAndDrop()
+    .setDropZone(props.dropZone)
+    .setOptions({ showPlaceholder: true, direction: props.direction })
+    .onPositionChange((newPosition, oldPosition) => {
+      emit("position", newPosition);
+
+      if (props.listItems) {
+        const items = [...props.listItems];
+        items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
+        emit("update:list-items", items);
+      }
+    });
+</script>

package/src/components/DragAndDrop/dragAndDrop.ts

@@ -0,0 +1,225 @@
+/**
+ * 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;
+        }
+        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;
+  }
+}

package/src/components/DragAndDrop/index.ts

@@ -0,0 +1,5 @@
+export { default as HandleDraggable } from "./HandleDraggable.vue";
+export { default as ListItemDraggable } from "./ListItemDraggable.vue";
+export { DragAndDrop } from "./dragAndDrop";
+export { ListDragAndDrop } from "./listDragAndDrop";
+export * from "./Icons";

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -0,0 +1,237 @@
+import { DragAndDrop } from "./dragAndDrop";
+
+/**
+ * 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;
+  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);
+    }
+  }
+}

package/src/index.common.js

@@ -1,3 +1,2 @@
 
 export * from './vue-plugin'
-export * from './helpers';

package/src/index.sass

@@ -1,5 +1 @@
 @import 'quasar/src/css/variables.sass'
-
-@import './components/Component.sass'
-
-

package/src/vue-plugin.js

@@ -1,16 +1,13 @@
-import Component from './components/Component'
+export * from "./helpers";
+export * from './components/DragAndDrop';
 
+const version = __UI_VERSION__;
 
-const version = __UI_VERSION__
-
-function install (app) {
-  app.component(Component.name, Component)
-
+function install(app) {
+    console.log('Installing Danx UI... Nothing to do really.');
 }
 
 export {
-  version,
-  Component,
-
-  install
-}
+    version,
+    install,
+};

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    // Specify ECMAScript target version
+    "module": "esnext",
+    // Specify module code generation
+    "strict": false,
+    // Enable all strict type-checking options
+    "esModuleInterop": true,
+    // Enables compatibility with Babel-imported CommonJS modules
+    "moduleResolution": "node",
+    // Resolve modules using Node.js style
+    "allowSyntheticDefaultImports": true,
+    // Allow default imports from modules with no default export
+    "experimentalDecorators": true,
+    // Enables experimental support for decorators
+    "skipLibCheck": true,
+    // Skip type checking of all declaration files (*.d.ts)
+    "forceConsistentCasingInFileNames": true,
+    // Disallow inconsistently-cased references to the same file.
+    "baseUrl": "./",
+    // Base directory to resolve non-relative module names
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+      // Path alias to resolve imports (adjust as needed)
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "src/**/*.svg",
+    "types/**/*.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+    // Exclude the node_modules directory
+  ]
+}

package/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}

package/types/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from 'vue';
+    export default Vue;
+}

package/src/components/Component.js

@@ -1,13 +0,0 @@
-import { h } from 'vue'
-import { QBadge } from 'quasar'
-
-export default {
-  name: 'Danx',
-
-  setup () {
-    return () => h(QBadge, {
-      class: 'Danx',
-      label: 'Danx'
-    })
-  }
-}

package/src/components/Component.sass

@@ -1,2 +0,0 @@
-.Danx
-  font-weight: bold