@alegendstale/holly-components 0.2.8 → 0.2.10

package/dist/utils/dragDropUtils.js

@@ -0,0 +1,121 @@
+export class DragDrop {
+    constructor(dropzones, draggables, onDrop) {
+        this.dropzones = dropzones;
+        this.draggables = draggables;
+        this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
+        this.onDrop = onDrop;
+        this.load();
+    }
+    dragStart(draggable, e) {
+        draggable.classList.toggle('is-dragging', true);
+    }
+    dragOver(dropzone, e) {
+        if (e.dataTransfer) {
+            const hasElement = Array.from(e.dataTransfer.items).some((item) => {
+                return item.kind !== 'element';
+            });
+            // Return early if element being dragged is not an element
+            if (hasElement)
+                return;
+        }
+        e.preventDefault();
+        this.result.beforeElement = this.getDragBeforeElement(e.clientX);
+        this.result.insertedElement = this.getDraggingElement();
+        this.result.afterElement = this.getDragAfterElement(e.clientX);
+        const insertedIndex = this.draggables.indexOf(this.result.insertedElement);
+        // If at the end of draggables
+        if (this.result.afterElement === null) {
+            // Append element
+            dropzone.appendChild(this.result.insertedElement);
+            // Remove element from order
+            this.result.order.splice(insertedIndex, 1);
+            // Add to end of order
+            this.result.order.push(this.result.insertedElement);
+        }
+        else {
+            // Place element between
+            dropzone.insertBefore(this.result.insertedElement, this.result.afterElement);
+            // Remove element from order
+            this.result.order.splice(insertedIndex, 1);
+            // Get the after index, post element removal
+            const afterIndex = this.draggables.indexOf(this.result.afterElement);
+            // Insert the element before the after index
+            this.result.order.splice(afterIndex, 0, this.result.insertedElement);
+        }
+    }
+    dragEnd(draggable, e) {
+        draggable.classList.toggle('is-dragging', false);
+        this.onDrop(e, this.result);
+        this.result = { beforeElement: null, insertedElement: null, afterElement: null, order: this.draggables };
+    }
+    load() {
+        for (let draggable of this.draggables) {
+            // Important, so that all types of elements can be dragged, including divs & spans
+            draggable.setAttribute('draggable', "true");
+            draggable.addEventListener("dragstart", (e) => this.dragStart(draggable, e));
+            draggable.addEventListener("dragend", (e) => this.dragEnd(draggable, e));
+        }
+        for (let dropzone of this.dropzones) {
+            dropzone.addEventListener("dragover", (e) => this.dragOver(dropzone, e));
+        }
+    }
+    unload() {
+        for (let draggable of this.draggables) {
+            draggable.removeEventListener('dragstart', (e) => this.dragStart(draggable, e));
+            draggable.removeEventListener('dragend', (e) => this.dragEnd(draggable, e));
+        }
+        for (let dropzone of this.dropzones) {
+            dropzone.removeEventListener('dragover', (e) => this.dragOver(dropzone, e));
+        }
+    }
+    /**
+     * @returns The element which is being dragged
+     */
+    getDraggingElement() {
+        return this.draggables.filter((draggable) => draggable.classList.contains('is-dragging'))[0];
+    }
+    /**
+     * @returns All draggable elements not being dragged
+     */
+    getDraggableElements() {
+        return this.draggables.filter((draggable) => !draggable.classList.contains('is-dragging'));
+    }
+    /**
+     * Gets the closest element before the dragged element
+     */
+    getDragBeforeElement(x) {
+        return this.getDraggableElements().reduce((closest, child) => {
+            const rect = child.getBoundingClientRect();
+            const leftPosition = x - rect.left;
+            const halfChildWidth = rect.width / 2;
+            const offset = leftPosition - halfChildWidth;
+            // Return the closest element to the right of the cursor
+            if (offset > 0 && offset < closest.offset)
+                return { offset, element: child };
+            else
+                return closest;
+        }, 
+        // Initial closest value
+        { offset: Number.POSITIVE_INFINITY, element: null })
+            .element;
+    }
+    /**
+     * Gets the closest element after the dragged element
+     */
+    getDragAfterElement(x) {
+        return this.getDraggableElements().reduce((closest, child) => {
+            const rect = child.getBoundingClientRect();
+            const leftPosition = x - rect.left;
+            const halfChildWidth = rect.width / 2;
+            const offset = leftPosition - halfChildWidth;
+            // Return the closest element to the left of the cursor
+            if (offset < 0 && offset > closest.offset)
+                return { offset, element: child };
+            else
+                return closest;
+        }, 
+        // Initial closest value
+        { offset: Number.NEGATIVE_INFINITY, element: null })
+            .element;
+    }
+}

package/dist/utils/generateUtils.js

@@ -1,40 +1,74 @@
-import o from "colorsea";
-var M = /* @__PURE__ */ ((s) => (s.Complimentary = "Complimentary", s.Monochromatic = "Monochromatic", s.Analogous = "Analogous", s.Triadic = "Triadic", s.Tetradic = "Tetradic", s.Random = "Random", s))(M || {});
-function B(s, c = { baseColor: o.random() }) {
-  let { baseColor: e, settings: a } = c;
-  e || (e = o.random());
-  let r = [];
-  switch (s) {
-    case "Complimentary":
-      r = [e.hex(), e.complement().hex()], a && (a.aliases = ["Base", "Complimentary Color"]);
-      break;
-    case "Monochromatic":
-      const n = e.lighten(20), h = e.lighten(10), l = e.darken(10), d = e.darken(20);
-      r = [n.hex(), h.hex(), e.hex(), l.hex(), d.hex()], a && (a.aliases = ["Lightest", "Lighter", "Base", "Darker", "Darkest"]);
-      break;
-    case "Analogous":
-      const x = e.adjustHue(-25), m = e.adjustHue(25);
-      r = [x.hex(), e.hex(), m.hex()], a && (a.aliases = ["Analogous East", "Base", "Analogous West"]);
-      break;
-    case "Triadic":
-      const u = e.spin(120), g = e.spin(240);
-      r = [e.hex(), u.hex(), g.hex()], a && (a.aliases = ["Triadic First", "Base", "Triadic Third"]);
-      break;
-    case "Tetradic":
-      const p = e.spin(90), T = e.spin(180), k = e.spin(270);
-      r = [e.hex(), p.hex(), T.hex(), k.hex()], a && (a.aliases = ["Base", "Tetradic Second", "Tetradic Third", "Tetradic Fourth"]);
-      break;
-    case "Random":
-      const f = Math.max(Math.round(Math.random() * 10), 2);
-      let t = [];
-      for (let i = 0; i < f; i++)
-        t.push(o.random().hex());
-      r = t, a && (a.aliases = []);
-      break;
-  }
-  return { colors: r, settings: a };
+import colorsea from "colorsea";
+export var Combination;
+(function (Combination) {
+    Combination["Complimentary"] = "Complimentary";
+    Combination["Monochromatic"] = "Monochromatic";
+    Combination["Analogous"] = "Analogous";
+    Combination["Triadic"] = "Triadic";
+    Combination["Tetradic"] = "Tetradic";
+    Combination["Random"] = "Random";
+})(Combination || (Combination = {}));
+/**
+ * Generate colors based on color theory
+ * @param baseColor Initial color to generate the rest from
+ * @param combination The type of color theory combination to use
+ * @param settings The settings for the palette
+ * @returns Generated colors & settings
+ */
+export function generateColors(combination, optional = { baseColor: colorsea.random() }) {
+    let { baseColor, settings } = optional;
+    // Never called because baseColor is set by default in parameters
+    if (!baseColor)
+        baseColor = colorsea.random();
+    let colors = [];
+    switch (combination) {
+        case Combination.Complimentary:
+            colors = [baseColor.hex(), baseColor.complement().hex()];
+            if (settings)
+                settings.aliases = ['Base', 'Complimentary Color'];
+            break;
+        case Combination.Monochromatic:
+            const lightest = baseColor.lighten(20);
+            const lighter = baseColor.lighten(10);
+            const darker = baseColor.darken(10);
+            const darkest = baseColor.darken(20);
+            colors = [lightest.hex(), lighter.hex(), baseColor.hex(), darker.hex(), darkest.hex()];
+            if (settings)
+                settings.aliases = ['Lightest', 'Lighter', 'Base', 'Darker', 'Darkest'];
+            break;
+        case Combination.Analogous:
+            const east = baseColor.adjustHue(-25);
+            const west = baseColor.adjustHue(25);
+            colors = [east.hex(), baseColor.hex(), west.hex()];
+            if (settings)
+                settings.aliases = ['Analogous East', 'Base', 'Analogous West'];
+            break;
+        case Combination.Triadic:
+            const hex120 = baseColor.spin(120);
+            const hex240 = baseColor.spin(240);
+            colors = [baseColor.hex(), hex120.hex(), hex240.hex()];
+            if (settings)
+                settings.aliases = ['Triadic First', 'Base', 'Triadic Third'];
+            break;
+        case Combination.Tetradic:
+            const hex90 = baseColor.spin(90);
+            const hex180 = baseColor.spin(180);
+            const hex270 = baseColor.spin(270);
+            colors = [baseColor.hex(), hex90.hex(), hex180.hex(), hex270.hex()];
+            if (settings)
+                settings.aliases = ['Base', 'Tetradic Second', 'Tetradic Third', 'Tetradic Fourth'];
+            break;
+        case Combination.Random:
+            // Clamp to a minimum value of 2
+            const randomNumber = Math.max(Math.round(Math.random() * 10), 2);
+            let randomColors = [];
+            for (let i = 0; i < randomNumber; i++) {
+                randomColors.push(colorsea.random().hex());
+            }
+            colors = randomColors;
+            if (settings)
+                settings.aliases = [];
+            break;
+    }
+    return { colors, settings };
 }
-export {
-  M as Combination,
-  B as generateColors
-};

package/dist/utils/types.d.ts

@@ -1,4 +1,4 @@
-type client = {
+export type client = {
     x: number;
     y: number;
 };

package/dist/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,KAAK,MAAM,GAAG;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAA;CACT,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAA;CACT,CAAA"}

package/dist/utils/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "0.2.8",
+	"version": "0.2.10",
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
 	"type": "module",
@@ -39,8 +39,7 @@
 	"dependencies": {
 		"colorsea": "^1.2.2",
 		"lucide": "^0.471.0",
-		"quantize": "^1.0.2",
-		"validate-color": "^2.2.4"
+		"quantize": "^1.0.2"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^1.7.0",