@marianmeres/stuic 1.66.0 → 1.68.0

package/dist/actions/drag-drop.d.ts

@@ -7,7 +7,8 @@ export interface DraggableOptions {
     enabled?: boolean;
     payload?: any;
     effectAllowed?: EffectAllowed;
-    isDragged?: Writable<Record<string, boolean>>;
+    isDragged?: Writable<string | null>;
+    logger?: (...args: any[]) => void;
 }
 export declare const draggable: (node: HTMLElement, options: DraggableOptions) => {
     update(newOptions?: DraggableOptions): void;
@@ -19,7 +20,8 @@ export interface DroppableOptions {
     onDrop: (data: any, e: DragEvent) => void;
     onDragover?: (data: any) => void;
     dropEffect?: DropEffect;
-    isDraggedOver?: Writable<Record<string, boolean>>;
+    isDraggedOver?: Writable<string | null>;
+    logger?: (...args: any[]) => void;
 }
 export declare const droppable: (node: HTMLElement, options: DroppableOptions) => {
     update(newOptions?: DroppableOptions): void;

package/dist/actions/drag-drop.js

@@ -8,43 +8,56 @@ export const draggable = (node, options) => {
         effectAllowed: 'all',
     };
     options = { ...DEFAULT_OPTIONS, ...options };
-    // initalizer
-    const _init = (_opts) => {
-        if (_opts.enabled) {
-            node.setAttribute('draggable', 'true');
-            node.setAttribute('aria-grabbed', 'false');
-        }
-        else {
-            node.removeAttribute('draggable');
-        }
-    };
-    // init now
-    _init(options);
+    const _log = (...args) => options.logger?.apply(null, args);
     const _payload = () => (_isFn(options?.payload) ? options.payload() : options.payload);
     //
     const onDragstart = (e) => {
+        _log('onDragstart', e.dataTransfer);
         const pld = _payload();
         if (pld !== undefined) {
             // add "stuic" as a custom data format
             e.dataTransfer?.setData('stuic', JSON.stringify({ id: options.id, payload: pld }));
             e.dataTransfer.effectAllowed = options.effectAllowed;
         }
-        options?.isDragged?.update((old) => ({ ...old, [options.id]: true }));
+        // options?.isDragged?.update((old) => ({ ...old, [options.id!]: true }));
+        options?.isDragged?.set(options.id);
         node.setAttribute('aria-grabbed', 'true');
     };
     const onDrag = (e) => {
+        // _log('onDrag', e.dataTransfer); // too much spam
         // const el: HTMLElement = e.currentTarget as HTMLElement;
         // clog(el);
         // ?
     };
     const onDragend = (e) => {
+        _log('onDragend', e.dataTransfer);
         // e.preventDefault();
-        options?.isDragged?.update((old) => ({ ...old, [options.id]: false }));
+        // options?.isDragged?.update((old) => ({ ...old, [options.id!]: false }));
+        options?.isDragged?.set(null);
         node.setAttribute('aria-grabbed', 'false');
     };
-    node.addEventListener('dragstart', onDragstart);
-    node.addEventListener('drag', onDrag);
-    node.addEventListener('dragend', onDragend);
+    const _removeListeners = () => {
+        node.removeEventListener('dragstart', onDragstart);
+        node.removeEventListener('drag', onDrag);
+        node.removeEventListener('dragend', onDragend);
+    };
+    // initalizer
+    const _init = (_opts) => {
+        _log('_init', _opts);
+        _removeListeners();
+        if (_opts.enabled) {
+            node.setAttribute('draggable', 'true');
+            node.setAttribute('aria-grabbed', 'false');
+            node.addEventListener('dragstart', onDragstart);
+            node.addEventListener('drag', onDrag);
+            node.addEventListener('dragend', onDragend);
+        }
+        else {
+            node.removeAttribute('draggable');
+        }
+    };
+    // init now
+    _init(options);
     return {
         update(newOptions) {
             options = { ...options, ...(newOptions || {}) };
@@ -52,9 +65,7 @@ export const draggable = (node, options) => {
             _init(options);
         },
         destroy() {
-            node.removeEventListener('dragstart', onDragstart);
-            node.removeEventListener('drag', onDrag);
-            node.removeEventListener('dragend', onDragend);
+            _removeListeners();
         },
     };
 };
@@ -65,27 +76,34 @@ export const droppable = (node, options) => {
         dropEffect: 'move',
     };
     options = { ...DEFAULT_OPTIONS, ...options };
+    const _log = (...args) => options.logger?.apply(null, args);
     //
     const onDragenter = (e) => {
         // e.preventDefault();
-        // console.log('dragover', e.dataTransfer);
+        _log('onDragenter', e.dataTransfer);
         e.dataTransfer.dropEffect = options.dropEffect;
-        options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: true }));
+        // options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: true }));
+        options?.isDraggedOver?.set(options.id);
     };
     const onDragover = (e) => {
+        // _log('onDragover', e.dataTransfer); // too much spam
         // prevent default to allow drop
         // this alse prevents animation (todo: really?)
         e.preventDefault();
     };
     const onDragleave = (e) => {
+        _log('onDragleave', e.dataTransfer);
         // e.preventDefault();
-        options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
+        // options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: false }));
+        options?.isDraggedOver?.set(null);
     };
     const onDrop = (e) => {
+        _log('onDrop', e.dataTransfer);
         e.preventDefault();
         const target = e.target;
         e.dataTransfer.dropEffect = options.dropEffect;
-        options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
+        // options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: false }));
+        options?.isDraggedOver?.set(null);
         if (_isFn(options.onDrop)) {
             let stuicData = e.dataTransfer?.getData('stuic');
             // prettier-ignore
@@ -104,6 +122,7 @@ export const droppable = (node, options) => {
     };
     //
     const _init = (_opts) => {
+        _log('_init', _opts);
         _removeListeners();
         if (_opts.enabled) {
             node.addEventListener('dragenter', onDragenter);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.66.0",
+	"version": "1.68.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",