@marianmeres/stuic 1.63.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/components/ColorScheme/color-scheme.js

@@ -1,15 +1,16 @@
+const _window = typeof window !== 'undefined' ? window : null;
 export class ColorScheme {
     static KEY = 'color-scheme';
     static DARK = 'dark';
     static LIGHT = 'light';
-    static getSystemValue = () => window?.matchMedia(`(prefers-color-scheme: ${ColorScheme.DARK})`).matches
+    static getSystemValue = () => _window?.matchMedia(`(prefers-color-scheme: ${ColorScheme.DARK})`).matches
         ? ColorScheme.DARK
         : ColorScheme.LIGHT;
     static getLocalValue = (fallback = null) => localStorage?.getItem(ColorScheme.KEY) || fallback;
     static getValue = () => ColorScheme.getLocalValue(ColorScheme.getSystemValue());
     static toggle = () => {
         // returns bool, indicating whether token is in the list after the call or not.
-        const isDark = window?.document.documentElement.classList.toggle(ColorScheme.DARK);
+        const isDark = _window?.document.documentElement.classList.toggle(ColorScheme.DARK);
         localStorage?.setItem(ColorScheme.KEY, isDark ? ColorScheme.DARK : ColorScheme.LIGHT);
     };
     static reset = () => {

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/dist/utils/device-pointer.d.ts

@@ -1,5 +1,5 @@
 export declare class DevicePointer {
-    static readonly isNone: boolean;
-    static readonly isCoarse: boolean;
-    static readonly isFine: boolean;
+    static readonly isNone: boolean | undefined;
+    static readonly isCoarse: boolean | undefined;
+    static readonly isFine: boolean | undefined;
 }

package/dist/utils/device-pointer.js

@@ -1,9 +1,10 @@
+const _window = typeof window !== 'undefined' ? window : null;
 export class DevicePointer {
     // none - The primary input mechanism does not include a pointing device.
-    static isNone = window?.matchMedia('(any-pointer:none)').matches;
+    static isNone = _window?.matchMedia('(any-pointer:none)').matches;
     // coarse - The primary input mechanism includes a pointing device of limited accuracy,
     // such as a finger on a touchscreen.
-    static isCoarse = window?.matchMedia('(any-pointer:coarse)').matches;
+    static isCoarse = _window?.matchMedia('(any-pointer:coarse)').matches;
     // fine - The primary input mechanism includes an accurate pointing device, such as a mouse.
-    static isFine = window?.matchMedia('(any-pointer:fine)').matches;
+    static isFine = _window?.matchMedia('(any-pointer:fine)').matches;
 }

package/dist/utils/window-size.js

@@ -1,6 +1,7 @@
 import { derived, writable } from 'svelte/store';
+const _window = typeof window !== 'undefined' ? window : null;
 const getWindowSize = () => {
-    const { width, height, scale } = window?.visualViewport || {
+    const { width, height, scale } = _window?.visualViewport || {
         width: 0,
         height: 0,
         scale: 1,
@@ -15,8 +16,8 @@ export const windowSize = {
 // init now!
 windowSize.touch();
 // intentionally not debounced
-window?.visualViewport?.addEventListener('resize', windowSize.touch);
-window?.visualViewport?.addEventListener('scroll', windowSize.touch);
+_window?.visualViewport?.addEventListener('resize', windowSize.touch);
+_window?.visualViewport?.addEventListener('scroll', windowSize.touch);
 export const breakpoint = derived([windowSize], ([{ width: w }]) => {
     const list = [
         ['sm', 640],

package/package.json

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