@leaflink/stash 50.2.1 → 50.3.0

package/dist/useSortable.d.ts

@@ -0,0 +1,94 @@
+import { Ref } from 'vue';
+
+/**
+ * Move sortable elements in the list
+ * @param list List of sortable elements
+ * @param from Original element position
+ * @param to New element position
+ */
+export declare function moveSortableElements<ListItem>({ list, from, to }: MoveSortableElementsOptions<ListItem>): void;
+
+export declare interface MoveSortableElementsOptions<T> {
+    list: RefOrGetter<T[]>;
+    from: number;
+    to: number;
+}
+
+/**
+ * Like the MaybeRefOrGetter type from Vue, but without the Maybe. Can be used to ensure the most up-to-date value is available.
+ */
+declare type RefOrGetter<T> = Ref<T> | (() => T);
+
+export declare interface SortableDragEvent extends DragEvent {
+    /**
+     * The old index of the dragged element
+     */
+    oldIndex: number;
+    /**
+     * The new index of the dragged element
+     */
+    newIndex: number;
+}
+
+export declare type SortableOnDragEndEvent = SortableDragEvent;
+
+export declare type SortableOnDragStartEvent = Omit<SortableDragEvent, 'newIndex'>;
+
+declare function useSortable<SortableItem>({ isEnabled, sortInPlace, ...options }: UseSortableOptions<SortableItem>): UseSortableReturn;
+export default useSortable;
+
+export declare interface UseSortableOptions<SortableItem> {
+    /**
+     * The parent element of the sortable elements
+     */
+    ref: Ref<HTMLElement | null>;
+    /**
+     * The list of sortable elements to be sorted
+     */
+    list: Ref<SortableItem[]>;
+    /**
+     * Enables/Disables drag and drop sorting
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Class name for the ghost element
+     * @default ''
+     */
+    ghostClass?: string;
+    /**
+     * Class name for the chosen element
+     * @default ''
+     */
+    chosenClass?: string;
+    /**
+     * Sort the list in place
+     * @default true
+     */
+    sortInPlace?: boolean;
+    /**
+     * Callback when the dragging starts
+     */
+    onDragStart?: (e: SortableOnDragStartEvent) => void;
+    /**
+     * Callback when the dragging ends
+     */
+    onDragEnd?: (e: SortableOnDragEndEvent) => void;
+}
+
+export declare interface UseSortableReturn {
+    /**
+     * Whether the element is currently being dragged
+     */
+    isDragging: Ref<boolean>;
+    /**
+     * The new position of the dragged element
+     */
+    newIndex: Ref<number>;
+    /**
+     * The original position of the dragged element
+     */
+    oldIndex: Ref<number>;
+}
+
+export { }

package/dist/useSortable.js

@@ -0,0 +1,116 @@
+import v from "@leaflink/snitch";
+import { a as I } from "./index-Ck3Dl09q.js";
+import { isRef as w, toValue as D, nextTick as A, computed as i, ref as y, watch as S, onMounted as $, onBeforeUnmount as G } from "vue";
+function O({ list: n, from: s, to: e }) {
+  if (s === e) return;
+  const r = w(n), a = r ? [...D(n)] : D(n);
+  if (e >= 0 && e < a.length) {
+    const u = a.splice(s, 1)[0];
+    A(() => {
+      a.splice(e, 0, u), r && (n.value = a);
+    });
+  }
+}
+function B(n, s) {
+  var a;
+  const e = c(n.target).cloneNode(!0);
+  e.classList.add(...s), e.style.position = "absolute", e.style.top = "-9999px", e.style.listStyle = "none", e.setAttribute("data-test", `${e.dataset.test}|ghost`), e.removeAttribute("draggable"), document.body.appendChild(e), (a = n.dataTransfer) == null || a.setDragImage(e, e.offsetWidth / 2, e.offsetHeight / 2);
+  function r() {
+    requestAnimationFrame(() => {
+      document.body.removeChild(e);
+    });
+  }
+  return {
+    ghost: e,
+    cleanupGhostElement: r
+  };
+}
+function c(n) {
+  const s = n == null ? void 0 : n.closest("[draggable=true]");
+  if (!s) throw new Error("Draggable element not found");
+  return s;
+}
+function q({
+  isEnabled: n = !0,
+  sortInPlace: s = !0,
+  ...e
+}) {
+  const r = i(() => I(e.ref)), a = y(-1), u = y(-1), b = i(() => a.value !== -1), T = i(() => {
+    var t;
+    return ((t = e.ghostClass) == null ? void 0 : t.split(" ")) || [];
+  }), f = i(() => {
+    var t;
+    return ((t = e.chosenClass) == null ? void 0 : t.split(" ")) || [];
+  }), g = (t) => {
+    var l;
+    if (!(!t.dataTransfer || !r.value)) {
+      t.dataTransfer.setData("text/plain", ""), t.dataTransfer.effectAllowed = "move";
+      try {
+        const o = c(t.target), d = Array.from(r.value.children).indexOf(o);
+        if (d === -1) return;
+        const { cleanupGhostElement: C } = B(t, T.value);
+        u.value = a.value = d, o.classList.add(...f.value), C(), (l = e.onDragStart) == null || l.call(e, { ...t, oldIndex: d });
+      } catch (o) {
+        v.error(`Error in drag start: ${o}`);
+      }
+    }
+  }, m = (t) => {
+    if (!(!t.dataTransfer || !r.value)) {
+      t.dataTransfer.dropEffect = "move";
+      try {
+        const l = c(t.target), o = Array.from(r.value.children).indexOf(l);
+        if (o === -1 || o === a.value) return;
+        const d = r.value.children[a.value];
+        r.value.insertBefore(d, o < a.value ? l : l.nextSibling), a.value = o;
+      } catch (l) {
+        v.error(`Error in drag enter: ${l}`);
+      }
+    }
+  };
+  function h(t) {
+    t.preventDefault();
+  }
+  function E(t) {
+    if (t.preventDefault(), !!r.value)
+      try {
+        if (u.value === a.value || !s) return;
+        O({ list: e.list, from: u.value, to: a.value });
+      } catch (l) {
+        v.error(`Error in drag drop: ${l}`);
+      }
+  }
+  function L(t) {
+    var l;
+    try {
+      c(t.target).classList.remove(...f.value), (l = e.onDragEnd) == null || l.call(e, {
+        ...t,
+        oldIndex: u.value,
+        newIndex: a.value
+      }), u.value = a.value = -1;
+    } catch (o) {
+      v.error(`Error in drag end: ${o}`);
+    }
+  }
+  S(
+    () => n,
+    () => n ? p() : x()
+  );
+  function p() {
+    r.value && (r.value.addEventListener("dragstart", g), r.value.addEventListener("dragend", L), r.value.addEventListener("dragenter", m), r.value.addEventListener("dragover", h), r.value.addEventListener("drop", E));
+  }
+  function x() {
+    r.value && (r.value.removeEventListener("dragstart", g), r.value.removeEventListener("dragend", L), r.value.removeEventListener("dragenter", m), r.value.removeEventListener("dragover", h), r.value.removeEventListener("drop", E));
+  }
+  return $(() => {
+    n && p();
+  }), G(x), {
+    isDragging: b,
+    oldIndex: u,
+    newIndex: a
+  };
+}
+export {
+  q as default,
+  O as moveSortableElements
+};
+//# sourceMappingURL=useSortable.js.map

package/dist/useSortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortable.js","sources":["../src/composables/useSortable/useSortable.utils.ts","../src/composables/useSortable/useSortable.ts"],"sourcesContent":["import { isRef, nextTick, Ref, toValue } from 'vue';\n\nimport { MoveSortableElementsOptions } from './useSortable.types';\n\n/**\n * Move sortable elements in the list\n * @param list List of sortable elements\n * @param from Original element position\n * @param to New element position\n */\nexport function moveSortableElements<ListItem>({ list, from, to }: MoveSortableElementsOptions<ListItem>): void {\n  if (from === to) return;\n\n  const _listIsRef = isRef(list);\n  // When the list is a ref, make a shallow copy of it to avoid repeatedly triggering side effects when moving elements\n  const listCopy = _listIsRef ? [...toValue(list)] : toValue(list);\n\n  if (to >= 0 && to < listCopy.length) {\n    const element = listCopy.splice(from, 1)[0];\n    nextTick(() => {\n      listCopy.splice(to, 0, element);\n      // When list is ref, assign listCopy to list.value\n      if (_listIsRef) (list as Ref).value = listCopy;\n    });\n  }\n}\n\n/**\n * Create a ghost element for dragging, which is the element that follows the cursor while dragging\n * @param e Drag event\n * @param ghostClass Custom classes to be added to the ghost element\n * @returns Ghost element and cleanup function\n */\nexport function createGhostElement(e: DragEvent, ghostClass: string[]) {\n  const ghost = getValidDragTarget(e.target as HTMLElement).cloneNode(true) as HTMLElement;\n\n  ghost.classList.add(...ghostClass);\n\n  ghost.style.position = 'absolute';\n  ghost.style.top = '-9999px';\n  ghost.style.listStyle = 'none';\n  ghost.setAttribute('data-test', `${ghost.dataset.test}|ghost`);\n  ghost.removeAttribute('draggable');\n\n  document.body.appendChild(ghost);\n\n  e.dataTransfer?.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2);\n\n  function cleanupGhostElement() {\n    requestAnimationFrame(() => {\n      document.body.removeChild(ghost);\n    });\n  }\n\n  return {\n    ghost,\n    cleanupGhostElement,\n  };\n}\n\n/**\n * Get the valid draggable target element\n * @param element\n * @returns Draggable element\n */\nexport function getValidDragTarget(element: HTMLElement | null) {\n  const dragElement = element?.closest<HTMLElement>('[draggable=true]');\n  if (!dragElement) throw new Error('Draggable element not found');\n  return dragElement;\n}\n","import logger from '@leaflink/snitch';\nimport { unrefElement } from '@vueuse/core';\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport type { UseSortableOptions, UseSortableReturn } from './useSortable.types';\nimport { createGhostElement, getValidDragTarget, moveSortableElements } from './useSortable.utils';\n\nexport * from './useSortable.types';\nexport { moveSortableElements } from './useSortable.utils';\n\nexport default function useSortable<SortableItem>({\n  isEnabled = true,\n  sortInPlace = true,\n  ...options\n}: UseSortableOptions<SortableItem>): UseSortableReturn {\n  const parentEl = computed(() => unrefElement(options.ref));\n\n  const newIndex = ref(-1);\n  const oldIndex = ref(-1);\n\n  const isDragging = computed(() => newIndex.value !== -1);\n\n  const ghostClasses = computed(() => options.ghostClass?.split(' ') || []);\n  const chosenClasses = computed(() => options.chosenClass?.split(' ') || []);\n\n  const handleDragStart = (e: DragEvent) => {\n    if (!e.dataTransfer || !parentEl.value) return;\n    e.dataTransfer.setData('text/plain', ''); // Required for Firefox\n    e.dataTransfer.effectAllowed = 'move';\n\n    try {\n      const target = getValidDragTarget(e.target as HTMLElement);\n\n      const index = Array.from(parentEl.value.children).indexOf(target);\n      if (index === -1) return;\n\n      const { cleanupGhostElement } = createGhostElement(e, ghostClasses.value);\n\n      oldIndex.value = newIndex.value = index;\n\n      target.classList.add(...chosenClasses.value);\n\n      cleanupGhostElement();\n\n      options.onDragStart?.({ ...e, oldIndex: index });\n    } catch (error) {\n      logger.error(`Error in drag start: ${error}`);\n    }\n  };\n\n  const handleDragEnter = (e: DragEvent) => {\n    if (!e.dataTransfer || !parentEl.value) return;\n    e.dataTransfer.dropEffect = 'move';\n\n    try {\n      const target = getValidDragTarget(e.target as HTMLElement);\n\n      const index = Array.from(parentEl.value.children).indexOf(target);\n      if (index === -1 || index === newIndex.value) return;\n\n      const draggedEl = parentEl.value.children[newIndex.value];\n      parentEl.value.insertBefore(draggedEl, index < newIndex.value ? target : target.nextSibling);\n\n      newIndex.value = index;\n    } catch (error) {\n      logger.error(`Error in drag enter: ${error}`);\n    }\n  };\n\n  function handleDragOver(e: DragEvent) {\n    e.preventDefault(); // Required to allow dropping\n  }\n\n  function handleDrop(e: DragEvent) {\n    e.preventDefault();\n\n    if (!parentEl.value) return;\n\n    try {\n      if (oldIndex.value === newIndex.value || !sortInPlace) return;\n      moveSortableElements({ list: options.list, from: oldIndex.value, to: newIndex.value });\n    } catch (error) {\n      logger.error(`Error in drag drop: ${error}`);\n    }\n  }\n\n  function handleDragEnd(e: DragEvent) {\n    try {\n      const target = getValidDragTarget(e.target as HTMLElement);\n\n      target.classList.remove(...chosenClasses.value);\n\n      options.onDragEnd?.({\n        ...e,\n        oldIndex: oldIndex.value,\n        newIndex: newIndex.value,\n      });\n\n      oldIndex.value = newIndex.value = -1;\n    } catch (error) {\n      logger.error(`Error in drag end: ${error}`);\n    }\n  }\n\n  watch(\n    () => isEnabled,\n    () => (isEnabled ? setupListeners() : removeListeners()),\n  );\n\n  function setupListeners() {\n    if (!parentEl.value) return;\n\n    parentEl.value.addEventListener('dragstart', handleDragStart);\n    parentEl.value.addEventListener('dragend', handleDragEnd);\n    parentEl.value.addEventListener('dragenter', handleDragEnter);\n    parentEl.value.addEventListener('dragover', handleDragOver);\n    parentEl.value.addEventListener('drop', handleDrop);\n  }\n\n  function removeListeners() {\n    if (!parentEl.value) return;\n\n    parentEl.value.removeEventListener('dragstart', handleDragStart);\n    parentEl.value.removeEventListener('dragend', handleDragEnd);\n    parentEl.value.removeEventListener('dragenter', handleDragEnter);\n    parentEl.value.removeEventListener('dragover', handleDragOver);\n    parentEl.value.removeEventListener('drop', handleDrop);\n  }\n\n  onMounted(() => {\n    if (!isEnabled) return;\n    setupListeners();\n  });\n\n  onBeforeUnmount(removeListeners);\n\n  return {\n    isDragging,\n    oldIndex,\n    newIndex,\n  };\n}\n"],"names":["moveSortableElements","list","from","to","_listIsRef","isRef","listCopy","toValue","element","nextTick","createGhostElement","e","ghostClass","ghost","getValidDragTarget","_a","cleanupGhostElement","dragElement","useSortable","isEnabled","sortInPlace","options","parentEl","computed","unrefElement","newIndex","ref","oldIndex","isDragging","ghostClasses","chosenClasses","handleDragStart","target","index","error","logger","handleDragEnter","draggedEl","handleDragOver","handleDrop","handleDragEnd","watch","setupListeners","removeListeners","onMounted","onBeforeUnmount"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "50.2.1",
+  "version": "50.3.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",