@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/actions/tooltip/tooltip.js

@@ -1,299 +0,0 @@
-import { createStore } from '@marianmeres/store';
-import { derived, get as storeGet, writable, } from 'svelte/store';
-import { twMerge2 } from '../../utils/tw-merge2.js';
-import { windowSize } from '../../utils/window-size.js';
-import { _makeInVisible, _makeVisible } from './_make-visible.js';
-import { _setPosition } from './_set-position.js';
-export class TooltipConfig {
-    static presetBase = `
-		text-sm
-		bg-gray-950 dark:bg-gray-950 
-		text-gray-50 dark:text-gray-50
-		px-3 py-2
-		rounded-md
-		shadow-lg
-		z-50
-		max-w-96 w-max
-	`;
-    static class = '';
-    static arrowPresetBase = `border-gray-950 dark:border-gray-950 z-50`;
-    static arrowClass = ``;
-    static defaultOptions = {};
-}
-export class PopoverConfig {
-    static presetBase = `
-		text-sm
-		bg-gray-950 dark:bg-gray-950 
-		text-gray-50 dark:text-gray-50
-		px-3 py-2
-		rounded-md
-		shadow-lg
-		z-50
-	`;
-    // max-w-96 w-max
-    static class = '';
-    static arrowPresetBase = `border-gray-950 dark:border-gray-950 z-50`;
-    static arrowClass = ``;
-    static defaultOptions = {};
-}
-const DEFAULTS = {
-    content: '',
-    popover: null,
-    alignment: 'top',
-    allowHtml: true,
-    delay: 300,
-    triggers: ['hover'], // 'focus', 'click'
-    class: '',
-    arrowClass: '',
-    arrowSize: 8,
-    offset: 10,
-    hideOnInsufficientSpace: false,
-};
-const TRIGGERS = {
-    hover: { show: ['mouseover'], hide: ['mouseout'] },
-    focus: { show: ['focusin'], hide: ['blur'] },
-    click: { show: ['click'], hide: [] }, // no hide for click, will toggle instead
-};
-// default TW value
-export const _TRANSITION_OPACITY_DUR = 150;
-const _ensureDiv = (div, opts, log) => {
-    log('_ensureDiv', div);
-    if (!div) {
-        log('creating tooltip div...');
-        div = document.createElement('div');
-        (opts?.getAppendChildTarget?.() || document.body).appendChild(div);
-    }
-    else {
-        log('div exists... going to apply classes');
-    }
-    let classes = '';
-    if (opts.popover) {
-        classes = [PopoverConfig.presetBase, PopoverConfig.class, opts.class].join(' ');
-    }
-    else {
-        classes = [TooltipConfig.presetBase, TooltipConfig.class, opts.class].join(' ');
-    }
-    // make sure these are never overwritten (must come last)
-    classes = twMerge2(classes, 'fixed block transition-opacity')
-        .split(/\s/)
-        .filter(Boolean);
-    div.classList.add(...classes);
-    div.style.opacity = '0';
-    // log(`Div classes applied (+ opacity 0)`, classes);
-    return div;
-};
-const _ensureArrow = (arrow, opts, log) => {
-    log('_ensureArrow');
-    if (!arrow) {
-        log('creating tooltip arrow...');
-        arrow = document.createElement('div');
-        (opts?.getAppendChildTarget?.() || document.body).appendChild(arrow);
-    }
-    else {
-        log('arrow exists... going to apply classes');
-    }
-    let classes = '';
-    // prettier-ignore
-    if (opts.popover) {
-        classes = [PopoverConfig.arrowPresetBase, PopoverConfig.arrowClass, opts.arrowClass].join(' ');
-    }
-    else {
-        classes = [TooltipConfig.arrowPresetBase, TooltipConfig.arrowClass, opts.arrowClass].join(' ');
-    }
-    // make sure these are never overwritten (must come last)
-    classes = twMerge2(classes, 'fixed block size-0 transition-opacity')
-        .split(/\s/)
-        .filter(Boolean);
-    arrow.classList.add(...classes);
-    arrow.style.opacity = '0';
-    // log(`Arrow classes applied (+ opacity 0)`, classes);
-    return arrow;
-};
-// the action api
-export function tooltip(node, initialOptions = {}) {
-    if (typeof initialOptions === 'string')
-        initialOptions = { content: initialOptions };
-    //
-    initialOptions ??= {};
-    let defaults = DEFAULTS;
-    if (initialOptions.popover) {
-        defaults = { ...defaults, ...PopoverConfig.defaultOptions };
-    }
-    else {
-        defaults = { ...defaults, ...TooltipConfig.defaultOptions };
-    }
-    let opts = { ...defaults, ...initialOptions };
-    const content = createStore(opts.content || '');
-    // maybe use aria-label (if present and content is not set)
-    const ariaLabel = node.getAttribute('aria-label');
-    if (ariaLabel && !content.get())
-        content.set(ariaLabel);
-    const _log = (...args) => typeof opts.logger === 'function' &&
-        opts.logger.apply(null, [`[tooltip/${node.id || '?'}]`, ...args]);
-    //
-    let _delayTimer;
-    const _resetDelayTimer = () => {
-        if (_delayTimer)
-            clearTimeout(_delayTimer);
-        _delayTimer = null;
-    };
-    const _planDelayedExec = (_fn, _delay) => {
-        _resetDelayTimer();
-        _delayTimer = setTimeout(() => {
-            _fn();
-            _resetDelayTimer();
-        }, _delay);
-    };
-    // use popover if provided, otherwise new div will be created
-    let div = opts.popover;
-    let arrow;
-    let _isOn = writable(false); // internal state store
-    //
-    const _show = async () => {
-        _log('_show');
-        // return early on no content
-        if (!opts.popover && !content.get()) {
-            _log('Nothing to show (neither popover, nor content provided)');
-            return;
-        }
-        // create, apply core styles and append to DOM
-        div = _ensureDiv(div, opts, _log);
-        arrow = _ensureArrow(arrow, opts, _log);
-        // set content
-        if (!opts.popover) {
-            if (opts.allowHtml)
-                div.innerHTML = content.get();
-            else
-                div.textContent = content.get();
-        }
-        // measure stuff and set position (provided opts.alignment is considered just as
-        // "preferred", which means it may be overwritten if there is no available space)
-        if (await _setPosition(opts.boundaryRoot, node, div, arrow, opts, _log)) {
-            // finally, fade in
-            _makeVisible(div, arrow, _log);
-            setTimeout(() => _isOn.set(true), _TRANSITION_OPACITY_DUR);
-        }
-        else {
-            _makeInVisible(div, arrow, _log);
-        }
-    };
-    let show = () => _planDelayedExec(_show, opts.delay);
-    //
-    const _hide = async () => {
-        _log('_hide');
-        _makeInVisible(div, arrow, _log);
-        setTimeout(() => {
-            destroy();
-            _isOn.set(false);
-        }, _TRANSITION_OPACITY_DUR);
-    };
-    const hide = () => _planDelayedExec(_hide, opts.delay);
-    // no delay for toggle
-    const toggle = async () => {
-        _log('toggle');
-        storeGet(_isOn) ? await _hide() : await _show();
-    };
-    //
-    const destroy = () => {
-        // for obscure cases, where parent node might have be removed from DOM
-        // before the planned show/hide happens
-        _resetDelayTimer();
-        if (!div && !arrow && !opts.popover && !storeGet(_isOn))
-            return;
-        _log('destroy');
-        if (!opts.popover) {
-            div?.remove();
-            div = null;
-        }
-        arrow?.remove();
-        arrow = null;
-        _isOn.set(false);
-    };
-    //
-    let unsubs = [_isOn.subscribe((v) => opts?.notifier?.set(v))];
-    // by default, listen to windowSize change, as well as window and boundaryRoot scroll
-    const _scrollSignal = writable(0);
-    const onScroll = () => _scrollSignal.set(Date.now());
-    if (opts.boundaryRoot) {
-        opts.boundaryRoot.addEventListener('scroll', onScroll);
-        unsubs.push(() => opts.boundaryRoot?.removeEventListener('scroll', onScroll));
-    }
-    // also listen to window scroll
-    window.addEventListener('scroll', onScroll);
-    unsubs.push(() => window.removeEventListener('scroll', onScroll));
-    const _setPositionTriggers = [_scrollSignal, windowSize];
-    if (opts.touch?.subscribe)
-        _setPositionTriggers.push(opts.touch);
-    const touch = derived(_setPositionTriggers, ([_]) => Date.now());
-    // final, derived, notifier
-    let _touchCount = 0;
-    unsubs.push(touch.subscribe(async () => {
-        // ignore first
-        if (_touchCount++) {
-            _log('touch...');
-            if (await _setPosition(opts.boundaryRoot, node, div, arrow, opts, _log)) {
-                _makeVisible(div, arrow, _log);
-            }
-            else {
-                _makeInVisible(div, arrow, _log);
-            }
-        }
-    }));
-    // important to normalize triggers - if does contain 'click' remove all others
-    if (opts.triggers.includes('click')) {
-        _log('Click trigger recognized...');
-        opts.triggers = ['click'];
-        _log('Patching show as toggle');
-        show = toggle; // also patch show/hide logic, since click does not have 'out' event...
-    }
-    // if manual trigger exists... (use raw show/hide, not the delayed one)
-    if (opts.trigger?.subscribe) {
-        unsubs.push(opts.trigger.subscribe((v) => (v ? _show() : _hide())));
-    }
-    // add show
-    opts.triggers?.forEach((trigger) => {
-        TRIGGERS[trigger]?.show.forEach((eventName) => {
-            _log('addEventListener', eventName, 'show');
-            node.addEventListener(eventName, show);
-        });
-    });
-    // add hide
-    opts.triggers?.forEach((trigger) => {
-        TRIGGERS[trigger]?.hide.forEach((eventName) => {
-            _log('addEventListener', eventName, 'hide');
-            node.addEventListener(eventName, hide);
-        });
-    });
-    return {
-        //
-        update(newOptions) {
-            if (typeof newOptions === 'string')
-                newOptions = { content: newOptions };
-            destroy();
-            // these are not allowed to update on existing instance
-            delete newOptions.triggers;
-            delete newOptions.boundaryRoot;
-            delete newOptions.touch;
-            //
-            opts = { ...opts, ...newOptions };
-            content.set(opts.content);
-        },
-        //
-        destroy() {
-            unsubs.forEach((unsub) => typeof unsub === 'function' && unsub());
-            destroy();
-            // remove show
-            opts.triggers?.forEach((trigger) => {
-                TRIGGERS[trigger]?.show.forEach((eventName) => {
-                    node.removeEventListener(eventName, show);
-                });
-            });
-            // remove hide
-            opts.triggers?.forEach((trigger) => {
-                TRIGGERS[trigger]?.hide.forEach((eventName) => {
-                    node.removeEventListener(eventName, hide);
-                });
-            });
-        },
-    };
-}

package/dist/actions/trim.d.ts

@@ -1,4 +0,0 @@
-export declare const trim: (el: HTMLInputElement | HTMLTextAreaElement, enabled?: boolean) => {
-    update(enabledFlag?: boolean): void;
-    destroy(): void;
-};

package/dist/actions/trim.js

@@ -1,18 +0,0 @@
-export const trim = (el, enabled = true) => {
-    const trim = (e) => {
-        if (enabled && typeof el.value === 'string') {
-            el.value = el.value.trim();
-        }
-    };
-    el.addEventListener('change', trim);
-    return {
-        update(enabledFlag) {
-            if (enabledFlag !== undefined) {
-                enabled = !!enabled;
-            }
-        },
-        destroy() {
-            el.removeEventListener('change', trim);
-        },
-    };
-};

package/dist/actions/validate.js

@@ -1,80 +0,0 @@
-export const validate = (el, options) => {
-    let _doValidate = !!options;
-    let context = options?.context;
-    let customValidator = options?.customValidator;
-    let onEventName = options?.on || 'change';
-    const t = (reason, value, fallback) => {
-        if (!reason || options?.t === false)
-            return fallback;
-        // local t (if any)
-        if (typeof options?.t === 'function')
-            return options.t(reason, value, fallback);
-        // global t (if any)
-        if (typeof validate.t === 'function')
-            return validate.t(reason, value, fallback);
-        //
-        return fallback;
-    };
-    const doValidate = (event) => {
-        if (!_doValidate)
-            return;
-        el.checkValidity();
-        if (typeof customValidator === 'function') {
-            el.setCustomValidity(customValidator(el.value, context, el) || '');
-        }
-        // this triggers the bubble
-        // el.reportValidity();
-        const validityState = el.validity;
-        // prettier-ignore
-        const reasons = [
-            'badInput', 'customError', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow',
-            'stepMismatch', 'tooLong', 'tooShort', 'typeMismatch', 'valueMissing'
-        ].reduce((m, k) => {
-            if (validityState[k])
-                m.push(k);
-            return m;
-        }, []);
-        if (typeof options?.setValidationResult === 'function') {
-            options.setValidationResult({
-                validity: validityState,
-                reasons,
-                valid: validityState?.valid,
-                // use translate fn for first reason (if fn provided and allowed),
-                // otherwise fallback to native msg
-                message: t(reasons?.[0], el.value, el.validationMessage),
-            });
-        }
-    };
-    el.addEventListener(onEventName, doValidate);
-    //
-    let _touchCount = 0;
-    const onFocus = (e) => _touchCount++;
-    el.addEventListener('focus', onFocus);
-    // also validate on first blur
-    const onBlur = (e) => _touchCount === 1 && doValidate(e);
-    el.addEventListener('blur', onBlur);
-    //
-    // const onChange = (e) => doValidate(e);
-    // el.addEventListener('change', onChange);
-    //
-    // const onInput = (e) => _touchCount > 1 && doValidate(e);
-    // el.addEventListener('input', onInput);
-    //
-    return {
-        update(newOptions) {
-            _doValidate = !!newOptions;
-            // allow only context to update
-            context = newOptions?.context;
-        },
-        destroy() {
-            el.removeEventListener(onEventName, doValidate);
-            el.removeEventListener('focus', onFocus);
-            el.removeEventListener('blur', onBlur);
-            // el.removeEventListener('change', onChange);
-            // el.removeEventListener('input', onInput);
-        },
-    };
-};
-// ReasonTranslate
-const t = null;
-validate.t = t;

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.d.ts

@@ -1,58 +0,0 @@
-import type { THC } from '../Thc/Thc.svelte';
-export declare enum AlertConfirmPromptType {
-    ALERT = "alert",
-    CONFIRM = "confirm",
-    PROMPT = "prompt"
-}
-export type AlertConfirmPromptVariant = 'info' | 'success' | 'warn' | 'error';
-type FnOnOK = (value: any) => any;
-type FnOnCancel = (value: false) => any;
-type FnOnEscape = () => void;
-type FnOnCustom = (value: any) => any;
-export interface AlertConfirmPromptKnownClasses {
-    dialog: string;
-    icon: string;
-    contentBlock: string;
-    title: string;
-    content: string;
-    inputBox: string;
-    inputField: string;
-    menu: string;
-    button: string;
-    spinnerBox: string;
-}
-export interface AlertConfirmPromptOptions extends Record<string, any> {
-    type: AlertConfirmPromptType.ALERT | AlertConfirmPromptType.CONFIRM | AlertConfirmPromptType.PROMPT;
-    title: THC;
-    content: THC;
-    value: any;
-    labelOk: THC;
-    onOk: FnOnOK;
-    labelCancel: THC;
-    onCancel: FnOnCancel;
-    onEscape: FnOnEscape;
-    labelCustom?: THC;
-    onCustom?: FnOnCustom;
-    promptFieldProps?: any;
-    variant: AlertConfirmPromptVariant;
-    iconFn: (() => string) | boolean;
-    class?: Partial<AlertConfirmPromptKnownClasses>;
-    forceAsHtml?: boolean;
-}
-export declare const createAlertConfirmPromptStore: (defaults?: Partial<AlertConfirmPromptOptions>) => {
-    subscribe: (cb: import("@marianmeres/store").Subscribe<AlertConfirmPromptOptions[]>) => import("@marianmeres/store").Unsubscribe;
-    get: () => AlertConfirmPromptOptions[];
-    push: (o: Partial<AlertConfirmPromptOptions>) => void;
-    shift: () => void;
-    reset: (stack?: AlertConfirmPromptOptions[]) => void;
-    escape: () => void;
-    close: () => void;
-    setHeadValue: (value: string) => void;
-    alert: (o?: Partial<AlertConfirmPromptOptions> | string) => void;
-    confirm: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptOptions>) => void;
-    prompt: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptOptions>) => void;
-};
-export declare const createAlert: (acp: ReturnType<typeof createAlertConfirmPromptStore>, defaults?: Partial<AlertConfirmPromptOptions>) => (message: string, o?: Partial<AlertConfirmPromptOptions>) => Promise<undefined>;
-export declare const createConfirm: (acp: ReturnType<typeof createAlertConfirmPromptStore>, defaults?: Partial<AlertConfirmPromptOptions>) => (message: string, o?: Partial<AlertConfirmPromptOptions>) => Promise<boolean>;
-export declare const createPrompt: (acp: ReturnType<typeof createAlertConfirmPromptStore>, defaults?: Partial<AlertConfirmPromptOptions>) => (message: string, defaultValue?: string, o?: Partial<AlertConfirmPromptOptions>) => Promise<string | null>;
-export {};

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.js

@@ -1,141 +0,0 @@
-import { createClog } from '@marianmeres/clog';
-import { createStore } from '@marianmeres/store';
-const clog = createClog('alert-confirm-prompt');
-export var AlertConfirmPromptType;
-(function (AlertConfirmPromptType) {
-    AlertConfirmPromptType["ALERT"] = "alert";
-    AlertConfirmPromptType["CONFIRM"] = "confirm";
-    AlertConfirmPromptType["PROMPT"] = "prompt";
-})(AlertConfirmPromptType || (AlertConfirmPromptType = {}));
-const isFn = (v) => typeof v === 'function';
-const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
-export const createAlertConfirmPromptStore = (defaults) => {
-    // fifo
-    const _stack = createStore([]);
-    const push = (o) => {
-        defaults ??= {};
-        o ??= {};
-        defaults = {
-            ...{
-                labelOk: 'OK',
-                labelCancel: 'Cancel',
-                iconFn: true,
-                title: ucf(o.type),
-            },
-            ...defaults,
-        };
-        if (!isFn(o.onOk))
-            o.onOk = shift;
-        if (!isFn(o.onCancel))
-            o.onCancel = shift;
-        if (!isFn(o.onEscape))
-            o.onEscape = shift;
-        if (!isFn(o.onCustom))
-            o.onCustom = () => undefined;
-        o.labelOk ??= defaults.labelOk;
-        o.labelCancel ??= defaults.labelCancel;
-        o.title ??= defaults.title;
-        // variant defaults to info
-        if (!['info', 'success', 'warn', 'error'].includes(o?.variant)) {
-            o.variant = 'info';
-        }
-        o._id = Math.random().toString(36).slice(2);
-        //
-        _stack.update((old) => [...old, o]);
-    };
-    const shift = () => _stack.update((old) => {
-        old.shift();
-        return [...old];
-    });
-    const reset = (stack = []) => _stack.set(stack);
-    const escape = () => {
-        if (_stack.get().length)
-            _stack.get()[0].onEscape();
-        shift();
-    };
-    // will update value of the current (at index 0) element. Relevant for prompts, when validation
-    // is needed
-    const setHeadValue = (value) => {
-        const head = _stack.get()[0];
-        if (head) {
-            head.value = value;
-            _stack.update((old) => [head, ...old.slice(1)]);
-        }
-    };
-    return {
-        subscribe: _stack.subscribe,
-        get: _stack.get,
-        push,
-        shift,
-        reset,
-        escape,
-        // human alias
-        close: shift,
-        //
-        setHeadValue,
-        // sugar below
-        //
-        alert: (o) => {
-            if (typeof o === 'string')
-                o = { title: o };
-            push({ ...(o || {}), type: AlertConfirmPromptType.ALERT });
-        },
-        //
-        confirm: (onOk, o) => push({ onOk, value: false, ...o, type: AlertConfirmPromptType.CONFIRM }),
-        //
-        prompt: (onOk, o) => push({ onOk, value: '', ...o, type: AlertConfirmPromptType.PROMPT }),
-    };
-};
-// sugar helpers to patch the native window.alert/confirm/prompt
-export const createAlert = (acp, defaults) => 
-// allowing to add the custom param outside of the native signature
-(message, o) => new Promise((resolve) => acp.alert({
-    ...(defaults || {}),
-    onOk: () => {
-        acp.close();
-        resolve(undefined);
-    },
-    content: message,
-    onEscape: () => {
-        acp.close();
-        resolve(undefined);
-    },
-    ...(o || {}),
-}));
-export const createConfirm = (acp, defaults) => 
-// allowing to add the custom param outside of the native signature
-(message, o) => new Promise((resolve) => acp.confirm(() => {
-    acp.close();
-    resolve(true);
-}, {
-    ...(defaults || {}),
-    content: message,
-    onCancel: () => {
-        acp.close();
-        resolve(false);
-    },
-    onEscape: () => {
-        acp.close();
-        resolve(false);
-    },
-    ...(o || {}),
-}));
-export const createPrompt = (acp, defaults) => 
-// allowing to add the custom param outside of the native signature
-(message, defaultValue = '', o) => new Promise((resolve) => acp.prompt((value) => {
-    acp.close();
-    resolve(value);
-}, {
-    ...(defaults || {}),
-    content: message,
-    value: defaultValue,
-    onCancel: () => {
-        acp.close();
-        resolve(null);
-    },
-    onEscape: () => {
-        acp.close();
-        resolve(null);
-    },
-    ...(o || {}),
-}));

package/dist/components/ColorScheme/LocalColorScheme.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  LocalColorSchemeProps */
-/** @typedef {typeof __propDef.events}  LocalColorSchemeEvents */
-/** @typedef {typeof __propDef.slots}  LocalColorSchemeSlots */
-export default class LocalColorScheme extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LocalColorSchemeProps = typeof __propDef.props;
-export type LocalColorSchemeEvents = typeof __propDef.events;
-export type LocalColorSchemeSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/components/ColorScheme/SystemAwareColorScheme.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  SystemAwareColorSchemeProps */
-/** @typedef {typeof __propDef.events}  SystemAwareColorSchemeEvents */
-/** @typedef {typeof __propDef.slots}  SystemAwareColorSchemeSlots */
-export default class SystemAwareColorScheme extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SystemAwareColorSchemeProps = typeof __propDef.props;
-export type SystemAwareColorSchemeEvents = typeof __propDef.events;
-export type SystemAwareColorSchemeSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};