quasar-ui-danx 0.0.9 → 0.0.11

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -7,231 +7,231 @@ 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();
+    listPosition = 0;
+    cursorPosition = 0;
+    initialPosition = 0;
+    onPositionChangeCb = null;
+    onDragPositionChangeCb = null;
+    placeholder = null;
+
+    constructor(options = {}) {
+        super({
+            showPlaceholder: true,
+            ...options,
+        });
     }
-  }
-
-  /**
-   * 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);
+
+    /**
+     * 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;
     }
-  }
-
-  /**
-   * 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);
-      }
+
+    /**
+     * 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;
     }
-  }
-
-  /**
-   * 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++;
+
+    /**
+     * 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();
+        }
     }
 
-    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;
+    /**
+     * 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);
         }
-      } else {
-        if (point.x < rect.left + rect.width / 2) {
-          break;
+    }
+
+    /**
+     * 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);
+            }
         }
-      }
-      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",
-          });
+    /**
+     * 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++;
         }
-      }
 
-      setTimeout(() => this.updateScrollPosition(), 500);
+        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
+        );
     }
-  }
-
-  /**
-   * 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");
+
+    /**
+     * 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;
     }
 
-    // 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";
+    /**
+     * 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);
+        }
     }
 
-    const children = this.getChildren();
-    if (this.cursorPosition < children.length) {
-      this.currentDropZone.insertBefore(
-        this.placeholder,
-        children[this.cursorPosition]
-      );
-    } else {
-      this.currentDropZone.appendChild(this.placeholder);
+    /**
+     * 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/components/Utility/CollapsableSidebar.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+    class="collapsable-sidebar overflow-x-hidden overflow-y-scroll relative"
+    :class="{
+      'is-collapsed': isCollapsed,
+      'is-right-side': rightSide,
+      [displayClass]: true,
+    }"
+    :style="style"
+  >
+    <div class="flex-grow max-w-full">
+      <slot :is-collapsed="isCollapsed" />
+    </div>
+    <template v-if="!disabled && (!hideToggleOnCollapse || !isCollapsed)">
+      <div
+        v-if="!toggleAtTop"
+        class="flex w-full p-4"
+        :class="rightSide ? 'justify-start' : 'justify-end'"
+      >
+        <slot name="toggle">
+          <QBtn
+            class="btn-white-gray"
+            @click="toggleCollapse"
+          >
+            <ToggleIcon
+              class="w-5 transition-all"
+              :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+            />
+          </QBtn>
+        </slot>
+      </div>
+      <div
+        v-else
+        class="absolute top-0 right-0 cursor-pointer p-2"
+        :class="toggleClass"
+        @click="toggleCollapse"
+      >
+        <ToggleIcon
+          class="w-5 transition-all"
+          :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+import { ChevronLeftIcon as ToggleIcon } from "@heroicons/vue/outline";
+import { computed, onMounted, ref, watch } from "vue";
+
+const emit = defineEmits(["collapse", "update:collapse"]);
+const props = defineProps({
+  rightSide: Boolean,
+  displayClass: {
+    type: String,
+    default: "flex flex-col"
+  },
+  maxWidth: {
+    type: String,
+    default: "13.5rem"
+  },
+  minWidth: {
+    type: String,
+    default: "5.5rem"
+  },
+  disabled: Boolean,
+  collapse: Boolean,
+  name: {
+    type: String,
+    default: "sidebar"
+  },
+  toggleAtTop: Boolean,
+  toggleClass: {
+    type: String,
+    default: ""
+  },
+  hideToggleOnCollapse: Boolean
+});
+
+const isCollapsed = ref(props.collapse);
+
+const stored = localStorage.getItem(props.name + "-is-collapsed");
+
+if (stored !== null) {
+  isCollapsed.value = stored === "1";
+}
+function toggleCollapse() {
+  setCollapse(!isCollapsed.value);
+  emit("collapse", isCollapsed.value);
+  emit("update:collapse", isCollapsed.value);
+}
+
+function setCollapse(state) {
+  isCollapsed.value = state;
+  localStorage.setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
+}
+
+onMounted(() => {
+  emit("collapse", isCollapsed.value);
+  emit("update:collapse", isCollapsed.value);
+});
+const style = computed(() => {
+  return {
+    width: isCollapsed.value ? props.minWidth : props.maxWidth
+  };
+});
+
+watch(() => props.collapse, () => {
+  setCollapse(props.collapse);
+});
+</script>
+
+<style
+  scoped
+  lang="scss"
+>
+.collapsable-sidebar {
+  @apply overflow-y-auto scroll-smooth flex-shrink-0 border-r border-neutral-plus-5 transition-all;
+}
+</style>

package/src/components/Utility/ContentDrawer.vue

@@ -0,0 +1,70 @@
+<template>
+  <QDialog
+    v-model="isShowing"
+    maximized
+    :position="position"
+    :seamless="seamless"
+    :class="{'hide-backdrop': !overlay}"
+  >
+    <div>
+      <div
+        v-if="title"
+        class="dialog-title"
+        @click.stop.prevent
+      >
+        {{ title }}
+      </div>
+      <div
+        class="dialog-content bg-white"
+        :class="{ [contentClass]: true }"
+      >
+        <slot />
+      </div>
+    </div>
+  </QDialog>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const emit = defineEmits(["update:show"]);
+
+const props = defineProps({
+  show: Boolean,
+  seamless: Boolean,
+  overlay: Boolean,
+  position: {
+    type: String,
+    default: "bottom"
+  },
+  contentClass: {
+    type: String,
+    default: "py-8 px-12"
+  },
+  title: {
+    type: String,
+    default: "Edit"
+  }
+});
+
+const isShowing = computed({
+  get: () => props.show,
+  set: (value) => emit("update:show", value)
+});
+</script>
+
+<style
+  lang="scss"
+  scoped
+>
+.dialog-title {
+  @apply bg-gray-very-light text-gray-default font-medium uppercase text-xs px-6 py-3 border-b border-neutral-plus-5 rounded-t-md;
+  font-family: "Roboto", sans-serif;
+  letter-spacing: 0.05em;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.dialog-content {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+</style>