@e280/sly 0.2.0-1 → 0.2.0-2

package/x/index.d.ts

@@ -7,6 +7,7 @@ export * from "./ops/loaders/parts/error-display.js";
 export * from "./ops/op.js";
 export * from "./ops/podium.js";
 export * from "./ops/types.js";
+export * as loot from "./loot/index.js";
 export * from "./views/attributes.js";
 export * from "./views/css-reset.js";
 export * from "./views/types.js";

package/x/index.html

@@ -111,7 +111,7 @@ body {
 }
 
 </style>
-					<script type=module src="demo/demo.bundle.min.js?v=c6f94fbdccdb"></script>
+					<script type=module src="demo/demo.bundle.min.js?v=4b778811d6eb"></script>
 					<link rel="icon" href="assets/favicon.png?v=4dc161ed79b3"/>
 
 		<meta name="theme-color" content="#95ff7b">
@@ -131,7 +131,7 @@ body {
 	<img class=icon alt="" src="/assets/favicon.png"/>
 	<h1>sly testing page</h1>
 	<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
-	<p class=lil>v0.2.0-1</p>
+	<p class=lil>v0.2.0-2</p>
 	<demo-counter>component</demo-counter>
 	<div class=demo></div>
 

package/x/index.js

@@ -7,6 +7,7 @@ export * from "./ops/loaders/parts/error-display.js";
 export * from "./ops/op.js";
 export * from "./ops/podium.js";
 export * from "./ops/types.js";
+export * as loot from "./loot/index.js";
 export * from "./views/attributes.js";
 export * from "./views/css-reset.js";
 export * from "./views/types.js";

package/x/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAE9B,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,sCAAsC,CAAA;AAEpD,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAE9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAE9B,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,sCAAsC,CAAA;AACpD,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAE9B,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAA;AAEvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}

package/x/loot/drag-drop.d.ts

@@ -0,0 +1,29 @@
+/** system for dragging-and-dropping things around on a webpage */
+export declare class DragDrop<Grabbed, Hovering> {
+    #private;
+    private params;
+    constructor(params: {
+        /** accept a dropped item that was declared within this system */
+        acceptDrop: (event: DragEvent, grabbed: Grabbed, hovering: Hovering) => void;
+        /** accept undeclared drops from outside this system */
+        fromOutside?: {
+            predicate: (event: DragEvent, hovering: Hovering) => boolean;
+            acceptDrop: (event: DragEvent, hovering: Hovering) => void;
+        };
+    });
+    /** make event listeners to attach to your dragzone(s) */
+    readonly dragzone: {
+        draggable: () => string;
+        dragstart: (grabbed: Grabbed) => (_: DragEvent) => void;
+        dragend: () => (_: DragEvent) => void;
+    };
+    /** make event listeners to attach to your dropzones(s) */
+    readonly dropzone: {
+        dragenter: () => (_: DragEvent) => void;
+        dragleave: () => (event: DragEvent) => void;
+        dragover: (hovering: Hovering) => (event: DragEvent) => void;
+        drop: (hovering: Hovering) => (event: DragEvent) => void;
+    };
+    get grabbed(): Grabbed | undefined;
+    get hovering(): Hovering | undefined;
+}

package/x/loot/drag-drop.js

@@ -0,0 +1,54 @@
+import { signal } from "@e280/strata";
+import { dragIsOutsideCurrentTarget } from "./helpers.js";
+/** system for dragging-and-dropping things around on a webpage */
+export class DragDrop {
+    params;
+    #$grabbed = signal(undefined);
+    #$hovering = signal(undefined);
+    constructor(params) {
+        this.params = params;
+    }
+    /** make event listeners to attach to your dragzone(s) */
+    dragzone = {
+        draggable: () => "true",
+        dragstart: (grabbed) => (_) => {
+            this.#$grabbed.value = grabbed;
+        },
+        dragend: () => (_) => {
+            this.#$grabbed.value = undefined;
+            this.#$hovering.value = undefined;
+        },
+    };
+    /** make event listeners to attach to your dropzones(s) */
+    dropzone = {
+        dragenter: () => (_) => { },
+        dragleave: () => (event) => {
+            if (dragIsOutsideCurrentTarget(event))
+                this.#$hovering.value = undefined;
+        },
+        dragover: (hovering) => (event) => {
+            event.preventDefault();
+            const { fromOutside } = this.params;
+            if (this.#$grabbed() || (fromOutside && fromOutside.predicate(event, hovering)))
+                this.#$hovering.value = hovering;
+        },
+        drop: (hovering) => (event) => {
+            event.preventDefault();
+            const { acceptDrop, fromOutside } = this.params;
+            const grabbed = this.#$grabbed();
+            this.#$grabbed.value = undefined;
+            this.#$hovering.value = undefined;
+            if (grabbed)
+                acceptDrop(event, grabbed, hovering);
+            else if (fromOutside && fromOutside.predicate(event, hovering))
+                fromOutside.acceptDrop(event, hovering);
+        },
+    };
+    get grabbed() {
+        return this.#$grabbed();
+    }
+    get hovering() {
+        return this.#$hovering();
+    }
+}
+//# sourceMappingURL=drag-drop.js.map

package/x/loot/drag-drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-drop.js","sourceRoot":"","sources":["../../s/loot/drag-drop.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,0BAA0B,EAAC,MAAM,cAAc,CAAA;AAEvD,kEAAkE;AAClE,MAAM,OAAO,QAAQ;IAIA;IAHpB,SAAS,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAA;IAClD,UAAU,GAAG,MAAM,CAAuB,SAAS,CAAC,CAAA;IAEpD,YAAoB,MAUnB;QAVmB,WAAM,GAAN,MAAM,CAUzB;IAAG,CAAC;IAEL,yDAAyD;IAChD,QAAQ,GAAG;QACnB,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM;QAEvB,SAAS,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,CAAY,EAAE,EAAE;YACjD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,OAAO,CAAA;QAC/B,CAAC;QAED,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAAY,EAAE,EAAE;YAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,SAAS,CAAA;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;QAClC,CAAC;KACD,CAAA;IAED,0DAA0D;IACjD,QAAQ,GAAG;QACnB,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAY,EAAE,EAAE,GAAE,CAAC;QAErC,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,KAAgB,EAAE,EAAE;YACrC,IAAI,0BAA0B,CAAC,KAAK,CAAC;gBACpC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;QACnC,CAAC;QAED,QAAQ,EAAE,CAAC,QAAkB,EAAE,EAAE,CAAC,CAAC,KAAgB,EAAE,EAAE;YACtD,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAC,WAAW,EAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAEjC,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC9E,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAA;QAClC,CAAC;QAED,IAAI,EAAE,CAAC,QAAkB,EAAE,EAAE,CAAC,CAAC,KAAgB,EAAE,EAAE;YAClD,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAC,UAAU,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAE7C,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,CAAA;YAChC,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,SAAS,CAAA;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAA;YAEjC,IAAI,OAAO;gBACV,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAA;iBAChC,IAAI,WAAW,IAAI,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC;gBAC7D,WAAW,CAAC,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;QACzC,CAAC;KACD,CAAA;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,SAAS,EAAE,CAAA;IACxB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,UAAU,EAAE,CAAA;IACzB,CAAC;CACD"}

package/x/loot/drop.d.ts

@@ -0,0 +1,16 @@
+/** dropzone that accepts dropped stuff like files */
+export declare class Drop {
+    #private;
+    private params;
+    constructor(params: {
+        /** whether or not the dragged item is acceptable for a drop */
+        predicate: (event: DragEvent) => boolean;
+        /** fn to handle the drop of an acceptable item */
+        acceptDrop: (event: DragEvent) => void;
+    });
+    get indicator(): boolean;
+    resetIndicator: () => void;
+    dragover: (event: DragEvent) => void;
+    dragleave: (event: DragEvent) => void;
+    drop: (event: DragEvent) => void;
+}

package/x/loot/drop.js

@@ -0,0 +1,32 @@
+import { signal } from "@e280/strata";
+import { dragIsOutsideCurrentTarget } from "./helpers.js";
+/** dropzone that accepts dropped stuff like files */
+export class Drop {
+    params;
+    #$indicator = signal(false);
+    constructor(params) {
+        this.params = params;
+    }
+    get indicator() {
+        return this.#$indicator.value;
+    }
+    resetIndicator = () => {
+        this.#$indicator.value = false;
+    };
+    dragover = (event) => {
+        event.preventDefault();
+        if (this.params.predicate(event))
+            this.#$indicator.value = true;
+    };
+    dragleave = (event) => {
+        if (dragIsOutsideCurrentTarget(event))
+            this.#$indicator.value = false;
+    };
+    drop = (event) => {
+        event.preventDefault();
+        this.#$indicator.value = false;
+        if (this.params.predicate(event))
+            this.params.acceptDrop(event);
+    };
+}
+//# sourceMappingURL=drop.js.map

package/x/loot/drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop.js","sourceRoot":"","sources":["../../s/loot/drop.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,0BAA0B,EAAC,MAAM,cAAc,CAAA;AAEvD,qDAAqD;AACrD,MAAM,OAAO,IAAI;IAGI;IAFpB,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE3B,YAAoB,MAOnB;QAPmB,WAAM,GAAN,MAAM,CAOzB;IAAG,CAAC;IAEL,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAA;IAC9B,CAAC;IAED,cAAc,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAA;IAC/B,CAAC,CAAA;IAED,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAA;IAC/B,CAAC,CAAA;IAED,SAAS,GAAG,CAAC,KAAgB,EAAE,EAAE;QAChC,IAAI,0BAA0B,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAA;IAChC,CAAC,CAAA;IAED,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAA;QAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;CACD"}

package/x/loot/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare function dragHasFiles(event: DragEvent): boolean;
+export declare function droppedFiles(event: DragEvent): File[];
+export declare function dragIsOutsideCurrentTarget(event: DragEvent): boolean;

package/x/loot/helpers.js

@@ -0,0 +1,21 @@
+export function dragHasFiles(event) {
+    return !!(event.dataTransfer &&
+        event.dataTransfer.types.includes("Files"));
+}
+export function droppedFiles(event) {
+    return event.dataTransfer
+        ? Array.from(event.dataTransfer.files)
+        : [];
+}
+export function dragIsOutsideCurrentTarget(event) {
+    const isCursorOutsideViewport = !event.relatedTarget || (event.clientX === 0 &&
+        event.clientY === 0);
+    if (isCursorOutsideViewport)
+        return true;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const withinX = event.clientX >= rect.left && event.clientX <= rect.right;
+    const withinY = event.clientY >= rect.top && event.clientY <= rect.bottom;
+    const cursorOutsideCurrentTarget = !(withinX && withinY);
+    return cursorOutsideCurrentTarget;
+}
+//# sourceMappingURL=helpers.js.map

package/x/loot/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../s/loot/helpers.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC5C,OAAO,CAAC,CAAC,CACR,KAAK,CAAC,YAAY;QAClB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAC1C,CAAA;AACF,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAgB;IAC5C,OAAO,KAAK,CAAC,YAAY;QACxB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,EAAE,CAAA;AACN,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,KAAgB;IAC1D,MAAM,uBAAuB,GAAG,CAAC,KAAK,CAAC,aAAa,IAAI,CACvD,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC,CACnB,CAAA;IAED,IAAI,uBAAuB;QAC1B,OAAO,IAAI,CAAA;IAEZ,MAAM,IAAI,GAAI,KAAK,CAAC,aAAqB,CAAC,qBAAqB,EAAE,CAAA;IACjE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAA;IACzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAA;IACzE,MAAM,0BAA0B,GAAG,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,CAAA;IAExD,OAAO,0BAA0B,CAAA;AAClC,CAAC"}

package/x/loot/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./drag-drop.js";
+export * from "./drop.js";
+export * from "./helpers.js";

package/x/loot/index.js

@@ -0,0 +1,4 @@
+export * from "./drag-drop.js";
+export * from "./drop.js";
+export * from "./helpers.js";
+//# sourceMappingURL=index.js.map

package/x/loot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/loot/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA"}