@marianmeres/stuic 1.126.0 → 2.0.0-next.3

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

@@ -1,28 +0,0 @@
-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<string | null>;
-    logger?: (...args: any[]) => void;
-}
-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?: (e: DragEvent) => void;
-    dropEffect?: DropEffect;
-    isDraggedOver?: Writable<string | null>;
-    logger?: (...args: any[]) => void;
-}
-export declare const droppable: (node: HTMLElement, options: DroppableOptions) => {
-    update(newOptions?: DroppableOptions): void;
-    destroy(): void;
-};

package/dist/actions/drag-drop.js

@@ -1,152 +0,0 @@
-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 };
-    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?.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?.set(null);
-        node.setAttribute('aria-grabbed', 'false');
-    };
-    const _removeListeners = () => {
-        node.removeEventListener('dragstart', onDragstart);
-        node.removeEventListener('drag', onDrag);
-        node.removeEventListener('dragend', onDragend);
-    };
-    // initalizer
-    const _init = (_opts) => {
-        _log('_init', _opts);
-        _removeListeners();
-        options?.isDragged?.set(null);
-        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 || {}) };
-            // reinit maybe
-            _init(options);
-        },
-        destroy() {
-            _removeListeners();
-        },
-    };
-};
-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 _log = (...args) => options.logger?.apply(null, args);
-    //
-    const onDragenter = (e) => {
-        // e.preventDefault();
-        _log('onDragenter', e.dataTransfer);
-        e.dataTransfer.dropEffect = options.dropEffect;
-        // options?.isDraggedOver?.update((old) => ({ ...old, [options.id!]: true }));
-        options?.isDraggedOver?.set(options.id);
-    };
-    const onDragover = (e) => {
-        // _log('onDragover', e.dataTransfer); // too much spam
-        // this is important, otherwise onDrop will no be fired
-        // (so we're preventing default not to prevent future onDrop)
-        e.preventDefault();
-        options?.isDraggedOver?.set(options.id);
-        if (_isFn(options.onDragover)) {
-            return options.onDragover(e);
-        }
-    };
-    const onDragleave = (e) => {
-        _log('onDragleave', e.dataTransfer);
-        // e.preventDefault();
-        // 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?.set(null);
-        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);
-    };
-    //
-    const _init = (_opts) => {
-        _log('_init', _opts);
-        _removeListeners();
-        options?.isDraggedOver?.set(null);
-        if (_opts.enabled) {
-            node.addEventListener('dragenter', onDragenter);
-            node.addEventListener('dragover', onDragover);
-            node.addEventListener('dragleave', onDragleave);
-            node.addEventListener('drop', onDrop);
-        }
-    };
-    // init now
-    _init(options);
-    return {
-        update(newOptions) {
-            options = { ...options, ...(newOptions || {}) };
-            // reinit maybe
-            _init(options);
-        },
-        destroy() {
-            _removeListeners();
-        },
-    };
-};

package/dist/actions/on-outside.d.ts

@@ -1,9 +0,0 @@
-type Handler = (el: Node) => void;
-export interface OnOutsideOptions {
-    handler?: Handler | null;
-    events?: string[];
-}
-export declare const onOutside: (node: HTMLElement, options?: OnOutsideOptions) => {
-    destroy(): void;
-};
-export {};

package/dist/actions/on-outside.js

@@ -1,27 +0,0 @@
-// will notify and (optionally) execute on outside click/focusin/...
-export const onOutside = (node, options) => {
-    const DEFAULT_OPTIONS = {
-        handler: null,
-        events: ['click', 'focusin'],
-    };
-    const { handler, events } = { ...DEFAULT_OPTIONS, ...(options || {}) };
-    const listener = (event) => {
-        if (!event?.target)
-            return;
-        if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            node.dispatchEvent(new CustomEvent('outside', { detail: event.target }));
-            if (typeof handler === 'function')
-                handler(event.target);
-        }
-    };
-    events?.forEach((eventName) => {
-        document.addEventListener(eventName, listener, true);
-    });
-    return {
-        destroy() {
-            events?.forEach((eventName) => {
-                document.removeEventListener(eventName, listener, true);
-            });
-        },
-    };
-};

package/dist/actions/pre-submit-validity-check.d.ts

@@ -1,3 +0,0 @@
-export declare const preSubmitValidityCheck: (node: HTMLFormElement) => {
-    destroy(): void;
-};

package/dist/actions/pre-submit-validity-check.js

@@ -1,21 +0,0 @@
-// this smells like a hack...
-// The problem: custom validity checks via `validate` action are registered on "input" or "change" events.
-// When a form is submitted without touching those custom validated elements, those will not be
-// validity-checked which is not desired... I'm not able to come up with better solution
-// than to manually trigger events which will then trigger the custom validation...
-export const preSubmitValidityCheck = (node) => {
-    const onSubmit = () => {
-        for (let i = 0; i < node.elements?.length; i++) {
-            let el = node.elements[i];
-            el.dispatchEvent(new Event('input', { bubbles: true }));
-            el.dispatchEvent(new Event('change', { bubbles: true }));
-            typeof el.checkValidity === 'function' && !el.checkValidity();
-        }
-    };
-    node.addEventListener('submit', onSubmit, true);
-    return {
-        destroy() {
-            node.removeEventListener('submit', onSubmit, true);
-        },
-    };
-};

package/dist/actions/tooltip/_make-visible.d.ts

@@ -1,3 +0,0 @@
-import { type TooltipLogger } from './tooltip.js';
-export declare const _makeInVisible: (div: HTMLElement | null, arrow: HTMLElement | null, log: TooltipLogger) => void;
-export declare const _makeVisible: (div: HTMLElement | null, arrow: HTMLElement | null, log: TooltipLogger) => void;

package/dist/actions/tooltip/_make-visible.js

@@ -1,25 +0,0 @@
-import { _TRANSITION_OPACITY_DUR } from './tooltip.js';
-export const _makeInVisible = (div, arrow, log) => {
-    (div || arrow) && log('_makeInVisible');
-    div && (div.style.opacity = '0');
-    arrow && (arrow.style.opacity = '0');
-    setTimeout(() => {
-        arrow?.classList.add('hidden');
-        div?.classList.add('hidden');
-        if (div) {
-            div.style.left = `auto`;
-            div.style.top = `auto`;
-        }
-    }, _TRANSITION_OPACITY_DUR);
-};
-export const _makeVisible = (div, arrow, log) => {
-    (div || arrow) && log('_makeVisible');
-    if (div) {
-        div.classList.remove('hidden');
-        div.style.opacity = '1';
-    }
-    if (arrow) {
-        arrow.classList.remove('hidden');
-        arrow.style.opacity = '1';
-    }
-};

package/dist/actions/tooltip/_maybe-pick-safe-placement.d.ts

@@ -1,3 +0,0 @@
-import type { Alignment, calculateAlignment } from '../../utils/calculate-alignment.js';
-import type { TooltipLogger, TooltipOptions } from './tooltip.js';
-export declare const _maybePickSafePlacement: (calc: ReturnType<typeof calculateAlignment>, opts: TooltipOptions, log: TooltipLogger) => Alignment | false;

package/dist/actions/tooltip/_maybe-pick-safe-placement.js

@@ -1,86 +0,0 @@
-export const _maybePickSafePlacement = (calc, opts, log) => {
-    let preferred = opts.alignment;
-    let picked = preferred;
-    const sides = {
-        top: ['top', 'topLeft', 'topRight'],
-        bottom: ['bottom', 'bottomLeft', 'bottomRight'],
-        left: ['left', 'leftTop', 'leftBottom'],
-        right: ['right', 'rightTop', 'rightBottom'],
-    };
-    // try alternatives within same side
-    const _trySideVariant = (val) => {
-        for (let side of Object.keys(sides)) {
-            if (val.startsWith(side)) {
-                for (let pos of sides[side]) {
-                    if (calc.position[pos].safe) {
-                        log(`_trySideVariant for '${val}', found '${pos}'`);
-                        return pos;
-                    }
-                }
-            }
-        }
-        log(`_trySideVariant for '${val}', found none (returning orig '${val}')`);
-        return val;
-    };
-    // DRY
-    const _trySideOpposite = (val) => {
-        const opposites = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
-        for (let [k, v] of Object.entries(opposites)) {
-            if (val.startsWith(k)) {
-                const r = val.replace(k, v);
-                log(`_trySideOpposite for '${val}', found '${r}'`);
-                return r;
-            }
-        }
-        log(`_trySideOpposite for '${val}', found none (returning orig '${val}')`);
-        return val;
-    };
-    const _switchAxis = (val) => {
-        const opposites = { top: 'right', bottom: 'right', left: 'top', right: 'top' };
-        for (let [k, v] of Object.entries(opposites)) {
-            if (val.startsWith(k)) {
-                log(`_switchAxis for '${val}', found '${v}'`);
-                return v;
-            }
-        }
-        log(`_switchAxis for '${val}', found none (returning orig '${val}')`);
-        return val;
-    };
-    // kind of stupid, brute force approach...
-    // same side variant
-    if (!calc.position[picked].safe) {
-        picked = _trySideVariant(picked);
-    }
-    // oposite side
-    if (!calc.position[picked].safe) {
-        picked = _trySideOpposite(picked);
-        // oposite side variant
-        if (!calc.position[picked].safe) {
-            picked = _trySideVariant(picked);
-        }
-    }
-    // switch axis
-    if (!calc.position[picked].safe) {
-        picked = _switchAxis(picked);
-        // now second round
-        // same side variant
-        if (!calc.position[picked].safe) {
-            picked = _trySideVariant(picked);
-        }
-        // oposite side
-        if (!calc.position[picked].safe) {
-            picked = _trySideOpposite(picked);
-            // oposite side variant
-            if (!calc.position[picked].safe) {
-                picked = _trySideVariant(picked);
-            }
-        }
-    }
-    // finally, if still no luck, revert to
-    // a) either unsafe original (to avoid noise) and do not dance anymore, or
-    // b) hide (if configured so)
-    if (!calc.position[picked].safe) {
-        picked = opts.hideOnInsufficientSpace ? false : preferred;
-    }
-    return picked;
-};

package/dist/actions/tooltip/_set-position.d.ts

@@ -1,2 +0,0 @@
-import type { TooltipLogger, TooltipOptions } from './tooltip.js';
-export declare const _setPosition: (boundaryRoot: HTMLElement | undefined, parent: HTMLElement, div: HTMLElement | null, arrow: HTMLElement | null, opts: TooltipOptions, log: TooltipLogger) => Promise<unknown>;

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

@@ -1,125 +0,0 @@
-import { get as storeGet } from 'svelte/store';
-import { calculateAlignment } from '../../utils/calculate-alignment.js';
-import { windowSize } from '../../utils/window-size.js';
-import { _maybePickSafePlacement } from './_maybe-pick-safe-placement.js';
-export const _setPosition = async (boundaryRoot, // will default to window dimensions
-parent, div, arrow, opts, log) => {
-    // if (!div || !arrow) return log('_setPosition noop');
-    if (!div || !arrow)
-        return;
-    log('_setPosition');
-    const rootRect = boundaryRoot?.getBoundingClientRect() || {
-        ...storeGet(windowSize),
-        x: 0,
-        y: 0,
-    };
-    const boundaryRootRect = {
-        x: rootRect.x,
-        y: rootRect.y,
-        width: rootRect.width,
-        height: rootRect.height,
-    };
-    const parentRect = parent.getBoundingClientRect();
-    // IMPORTANT!
-    // make sure the div is not hidden, so the rect dimensions will work fine
-    div.classList.remove('hidden');
-    return new Promise((resolve) => {
-        // must wait for the next repaint to have correct dimensions...
-        requestAnimationFrame(() => {
-            const divRect = div.getBoundingClientRect();
-            const r = calculateAlignment(boundaryRootRect, parentRect, divRect, opts.offset);
-            log('tooltip rect', divRect);
-            log('placements', r);
-            // try to pick safe
-            const safe = _maybePickSafePlacement(r, opts, log);
-            // maybe quit...
-            if (safe === false) {
-                log('No safe position found...');
-                return resolve(false);
-            }
-            log(`Preferred: '${opts.alignment}', safe: '${safe}'.`);
-            // position the actual tooltip/popover
-            div.style.left = `${r.position[safe].x}px`;
-            div.style.top = `${r.position[safe].y}px`;
-            // now dance with the arrow...
-            let arrowStyles = {
-                borderStyle: 'solid',
-                left: 'auto',
-                top: 'auto',
-            };
-            // need to reset all on reposition
-            ['borderTop', 'borderBottom', 'borderLeft', 'borderRight'].forEach((k) => {
-                arrowStyles[`${k}Width`] = '0';
-                arrowStyles[`${k}Color`] = null;
-            });
-            //
-            const arrowSize = opts.arrowSize;
-            let xOffset = 0;
-            let yOffset = 0;
-            //
-            if (safe.startsWith('top')) {
-                arrowStyles = {
-                    ...arrowStyles,
-                    borderLeftColor: `transparent`,
-                    borderRightColor: `transparent`,
-                    borderLeftWidth: `${arrowSize * 0.75}px`,
-                    borderRightWidth: `${arrowSize * 0.75}px`,
-                    borderTopWidth: `${arrowSize}px`,
-                };
-                xOffset -= arrowSize / 2;
-                yOffset -= arrowSize * 0.1;
-            }
-            //
-            else if (safe.startsWith('bottom')) {
-                arrowStyles = {
-                    ...arrowStyles,
-                    borderLeftColor: `transparent`,
-                    borderRightColor: `transparent`,
-                    borderLeftWidth: `${arrowSize * 0.75}px`,
-                    borderRightWidth: `${arrowSize * 0.75}px`,
-                    borderBottomWidth: `${arrowSize}px`,
-                };
-                xOffset -= arrowSize / 2;
-                yOffset -= arrowSize * 0.9;
-            }
-            //
-            else if (safe.startsWith('right')) {
-                arrowStyles = {
-                    ...arrowStyles,
-                    borderTopColor: `transparent`,
-                    borderBottomColor: `transparent`,
-                    borderTopWidth: `${arrowSize * 0.75}px`,
-                    borderBottomWidth: `${arrowSize * 0.75}px`,
-                    borderRightWidth: `${arrowSize}px`,
-                };
-                xOffset -= arrowSize * 0.9;
-                yOffset -= arrowSize / 2;
-            }
-            //
-            else if (safe.startsWith('left')) {
-                arrowStyles = {
-                    ...arrowStyles,
-                    borderTopColor: `transparent`,
-                    borderBottomColor: `transparent`,
-                    borderTopWidth: `${arrowSize * 0.75}px`,
-                    borderBottomWidth: `${arrowSize * 0.75}px`,
-                    borderLeftWidth: `${arrowSize}px`,
-                };
-                xOffset -= arrowSize * 0.1;
-                yOffset -= arrowSize / 2;
-            }
-            arrowStyles = {
-                ...arrowStyles,
-                left: `${r.origin[safe].x + xOffset}px`,
-                top: `${r.origin[safe].y + yOffset}px`,
-            };
-            // log('applying arrowStyles', arrowStyles);
-            Object.entries(arrowStyles).forEach(([k, v]) => {
-                // @ts-ignore
-                arrow.style[k] = v;
-            });
-            //
-            resolve(true);
-        });
-    });
-};

package/dist/actions/tooltip/tooltip.d.ts

@@ -1,42 +0,0 @@
-import { type Readable, type Writable } from 'svelte/store';
-import type { Alignment } from '../../utils/calculate-alignment.js';
-export declare class TooltipConfig {
-    static presetBase: string;
-    static class: string;
-    static arrowPresetBase: string;
-    static arrowClass: string;
-    static defaultOptions: Partial<TooltipOptions>;
-}
-export declare class PopoverConfig {
-    static presetBase: string;
-    static class: string;
-    static arrowPresetBase: string;
-    static arrowClass: string;
-    static defaultOptions: Partial<TooltipOptions>;
-}
-export type TooltipLogger = (...args: any[]) => void;
-export type TooltipTrigger = 'hover' | 'focus' | 'click';
-export interface TooltipOptions {
-    content: string;
-    popover: HTMLElement | null;
-    alignment: Alignment;
-    allowHtml: boolean;
-    delay: number;
-    class: string;
-    arrowClass: string;
-    triggers: TooltipTrigger[];
-    logger?: TooltipLogger;
-    boundaryRoot?: HTMLElement;
-    arrowSize: number;
-    offset: number;
-    hideOnInsufficientSpace: boolean;
-    touch?: Readable<number>;
-    trigger?: Readable<boolean>;
-    notifier?: Writable<boolean>;
-    getAppendChildTarget?: () => HTMLElement;
-}
-export declare const _TRANSITION_OPACITY_DUR = 150;
-export declare function tooltip(node: HTMLElement, initialOptions?: string | Partial<TooltipOptions>): {
-    update(newOptions: string | Partial<TooltipOptions>): void;
-    destroy(): void;
-};