@marianmeres/stuic 1.64.0 → 1.65.0

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

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+import type { Writable } from 'svelte/store';
+export type EffectAllowed = 'copy' | 'none' | 'copyLink' | 'copyMove' | 'link' | 'linkMove' | 'move' | 'all' | 'uninitialized';
+export type DropEffect = 'copy' | 'none' | 'link' | 'move';
+export interface DraggableOptions {
+    id?: string;
+    enabled?: boolean;
+    payload?: any;
+    effectAllowed?: EffectAllowed;
+    isDragged?: Writable<Record<string, boolean>>;
+}
+export declare const draggable: (node: HTMLElement, options: DraggableOptions) => {
+    update(newOptions?: DraggableOptions): void;
+    destroy(): void;
+};
+export interface DroppableOptions {
+    id?: string;
+    enabled?: boolean;
+    onDrop: (data: any, e: DragEvent) => void;
+    onDragover?: (data: any) => void;
+    dropEffect?: DropEffect;
+    isDraggedOver?: Writable<Record<string, boolean>>;
+}
+export declare const droppable: (node: HTMLElement, options: DroppableOptions) => {
+    update(newOptions?: DroppableOptions): void;
+    destroy(): void;
+};

package/dist/actions/drag-drop.js

@@ -0,0 +1,130 @@
+import { createClog } from '@marianmeres/clog';
+const clog = createClog('drag-drop');
+const _isFn = (v) => typeof v === 'function';
+export const draggable = (node, options) => {
+    const DEFAULT_OPTIONS = {
+        id: 'draggable-' + Math.random().toString(36).slice(2),
+        enabled: true,
+        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 _payload = () => (_isFn(options?.payload) ? options.payload() : options.payload);
+    //
+    const onDragstart = (e) => {
+        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 }));
+        node.setAttribute('aria-grabbed', 'true');
+    };
+    const onDrag = (e) => {
+        // const el: HTMLElement = e.currentTarget as HTMLElement;
+        // clog(el);
+        // ?
+    };
+    const onDragend = (e) => {
+        // e.preventDefault();
+        options?.isDragged?.update((old) => ({ ...old, [options.id]: false }));
+        node.setAttribute('aria-grabbed', 'false');
+    };
+    node.addEventListener('dragstart', onDragstart);
+    node.addEventListener('drag', onDrag);
+    node.addEventListener('dragend', onDragend);
+    return {
+        update(newOptions) {
+            options = { ...options, ...(newOptions || {}) };
+            // reinit maybe
+            _init(options);
+        },
+        destroy() {
+            node.removeEventListener('dragstart', onDragstart);
+            node.removeEventListener('drag', onDrag);
+            node.removeEventListener('dragend', onDragend);
+        },
+    };
+};
+export const droppable = (node, options) => {
+    const DEFAULT_OPTIONS = {
+        id: 'droppable-' + Math.random().toString(36).slice(2),
+        enabled: true,
+        dropEffect: 'move',
+    };
+    options = { ...DEFAULT_OPTIONS, ...options };
+    //
+    const onDragenter = (e) => {
+        // e.preventDefault();
+        // console.log('dragover', e.dataTransfer);
+        e.dataTransfer.dropEffect = options.dropEffect;
+        options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: true }));
+    };
+    const onDragover = (e) => {
+        e.preventDefault(); // this prevents animation
+    };
+    const onDragleave = (e) => {
+        // e.preventDefault();
+        options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
+    };
+    const onDrop = (e) => {
+        e.preventDefault();
+        const target = e.target;
+        e.dataTransfer.dropEffect = options.dropEffect;
+        options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
+        if (_isFn(options.onDrop)) {
+            let stuicData = e.dataTransfer?.getData('stuic');
+            // prettier-ignore
+            try {
+                stuicData = JSON.parse(stuicData);
+            }
+            catch (e) { }
+            return options.onDrop(stuicData, e);
+        }
+    };
+    const _removeListeners = () => {
+        node.removeEventListener('dragenter', onDragenter);
+        node.removeEventListener('dragover', onDragover);
+        node.removeEventListener('dragleave', onDragleave);
+        node.removeEventListener('drop', onDrop);
+    };
+    //
+    let _listens = false;
+    const _init = (_opts) => {
+        if (_opts.enabled && !_listens) {
+            node.addEventListener('dragenter', onDragenter);
+            node.addEventListener('dragover', onDragover);
+            node.addEventListener('dragleave', onDragleave);
+            node.addEventListener('drop', onDrop);
+            _listens = true;
+        }
+        else if (!_opts.enabled && _listens) {
+            _removeListeners();
+            _listens = false;
+        }
+    };
+    // init now
+    _init(options);
+    return {
+        update(newOptions) {
+            options = { ...options, ...(newOptions || {}) };
+            // reinit maybe
+            _init(options);
+        },
+        destroy() {
+            _removeListeners();
+        },
+    };
+};

package/dist/actions/tooltip/_set-position.js

@@ -114,6 +114,7 @@ parent, div, arrow, opts, log) => {
             };
             // log('applying arrowStyles', arrowStyles);
             Object.entries(arrowStyles).forEach(([k, v]) => {
+                // @ts-ignore
                 arrow.style[k] = v;
             });
             //

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as Switch, SwitchConfig } from './components/Switch/Switch.svel
 export { default as Thc, type THC, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 export { default as X } from './components/X/X.svelte';
 export { autogrow } from './actions/autogrow.js';
+export { draggable, droppable, type DraggableOptions, type DroppableOptions, } from './actions/drag-drop.js';
 export { focusTrap } from './actions/focus-trap.js';
 export { onOutside } from './actions/on-outside.js';
 export { preSubmitValidityCheck } from './actions/pre-submit-validity-check.js';

package/dist/index.js

@@ -36,6 +36,7 @@ export { default as Thc, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 export { default as X } from './components/X/X.svelte';
 // actions
 export { autogrow } from './actions/autogrow.js';
+export { draggable, droppable, } from './actions/drag-drop.js';
 export { focusTrap } from './actions/focus-trap.js';
 export { onOutside } from './actions/on-outside.js';
 export { preSubmitValidityCheck } from './actions/pre-submit-validity-check.js';

package/package.json

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