@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/components/Input/XFieldRadioInternal.svelte

@@ -1,143 +0,0 @@
-<script context="module">import { createEventDispatcher } from "svelte";
-import { slide } from "svelte/transition";
-import { validate as validateAction } from "../../actions/validate.js";
-import { getId } from "../../utils/get-id.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-import Thc from "../Thc/Thc.svelte";
-import {
-  FieldRadiosConfig
-} from "./FieldRadios.svelte";
-const _PRESET = {
-  box: "flex items-start",
-  label: "block w-full",
-  input: `
-			size-4 rounded-full
-			bg-neutral-100
-			border-neutral-300
-			shadow-sm
-			text-stuic-primary dark:text-stuic-primary-dark
-			cursor-pointer
-			focus:border-stuic-primary
-			focus:ring-4
-			focus:ring-offset-0
-			focus:ring-stuic-primary
-			focus:ring-opacity-20
-			disabled:cursor-not-allowed
-		`,
-  validationMessage: "text-xs text-stuic-primary dark:text-stuic-primary-dark tracking-tight",
-  description: "text-sm opacity-50"
-};
-const _PRESET_BY_SIZE = {
-  sm: { label: "text-sm" },
-  md: { label: "text-base" },
-  lg: { label: "text-base font-bold" }
-};
-</script>
-
-<script>const dispatch = createEventDispatcher();
-let _class = {};
-export { _class as class };
-export let classBySize = {};
-export let size = "md";
-export let value;
-export let group;
-export let label;
-export let name;
-export let description = "";
-export let tabindex = 0;
-export let disabled = false;
-export let required = false;
-export let validate = void 0;
-let validation;
-const setValidationResult = (res) => {
-  validation = res;
-  dispatch("validation", validation);
-};
-let id = getId();
-let idDesc = getId();
-const _collectClasses = (k, extra = "") => [
-  _PRESET?.[k] || "",
-  _PRESET_BY_SIZE?.[size]?.[k] || "",
-  FieldRadiosConfig?.class?.[k] || "",
-  FieldRadiosConfig?.classBySize?.[size]?.[k] || "",
-  extra || "",
-  _class?.[k] || "",
-  classBySize?.[size]?.[k] || ""
-].join(" ");
-$:
-  _boxClass = twMerge2(_collectClasses("box"));
-$:
-  _inputClass = twMerge2(
-    _collectClasses(
-      "input",
-      validation && !validation.valid ? _collectClasses("invalid") : ""
-    )
-  );
-$:
-  _labelClass = twMerge2(_collectClasses("label"));
-$:
-  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
-$:
-  _descriptionClass = twMerge2(_collectClasses("description"));
-</script>
-
-<div class={_boxClass}>
-	<div class="flex h-6 items-center ml-1">
-		<input
-			{id}
-			type="radio"
-			{value}
-			bind:group
-			aria-describedby={description ? idDesc : undefined}
-			{name}
-			class={_inputClass}
-			{disabled}
-			{required}
-			{tabindex}
-			use:validateAction={validate
-				? { ...(validate === true ? {} : validate), setValidationResult }
-				: undefined}
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:input
-			on:keydown
-			on:keyup
-			on:touchstart|passive
-			on:touchend|passive
-			on:touchmove|passive
-			on:touchcancel
-			on:mouseenter
-			on:mouseleave
-		/>
-	</div>
-	<div class="ml-3 w-full">
-		{#if label}
-			<label
-				for={id}
-				class={_labelClass}
-				class:cursor-pointer={!disabled}
-				class:cursor-not-allowed={disabled}
-			>
-				<Thc thc={label} forceAsHtml />
-			</label>
-		{/if}
-		{#if validation && !validation?.valid}
-			<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
-				{@html validation.message}
-			</div>
-		{/if}
-		{#if description}
-			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-			<div
-				class={_descriptionClass}
-				class:cursor-pointer={!disabled}
-				class:cursor-not-allowed={disabled}
-				on:click={() => !disabled && (group = value)}
-			>
-				<Thc thc={description} forceAsHtml />
-			</div>
-		{/if}
-	</div>
-</div>

package/dist/components/Input/XFieldRadioInternal.svelte.d.ts

@@ -1,45 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ValidateOptions } from '../../actions/validate.js';
-import { type FieldRadiosConfigClasses, type FieldRadiosConfigClassesBySize } from './FieldRadios.svelte';
-declare const __propDef: {
-    props: {
-        class?: FieldRadiosConfigClasses;
-        classBySize?: FieldRadiosConfigClassesBySize;
-        size?: "sm" | "md" | "lg";
-        value: any;
-        group: any;
-        label: string;
-        name: string;
-        description?: string;
-        tabindex?: number;
-        disabled?: boolean;
-        required?: boolean;
-        validate?: ValidateOptions | true | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchmove: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type XFieldRadioInternalProps = typeof __propDef.props;
-export type XFieldRadioInternalEvents = typeof __propDef.events;
-export type XFieldRadioInternalSlots = typeof __propDef.slots;
-export default class XFieldRadioInternal extends SvelteComponent<XFieldRadioInternalProps, XFieldRadioInternalEvents, XFieldRadioInternalSlots> {
-}
-export {};

package/dist/components/Notifications/notifications.d.ts

@@ -1,78 +0,0 @@
-import type { THC } from '../Thc/Thc.svelte';
-export type NotificationsSortOrder = 'asc' | 'desc';
-export type NotificationOnEventHandler = (eventName: string, self: Notification, all: Notification[], data: any) => void;
-export type NotificationType = 'info' | 'success' | 'warn' | 'error' | string;
-interface ComponentWrap {
-    component: Function;
-    props?: any;
-}
-export interface NotificationKnownClasses {
-    box: string;
-    count: string;
-    icon: string;
-    content: string;
-    button: string;
-    x: string;
-}
-export interface NotificationInput extends Record<string, any> {
-    id: any;
-    type: NotificationType;
-    content: THC;
-    on: NotificationOnEventHandler;
-    onClick: (self: Notification, all: Notification[], data: any) => void;
-    ttl: number;
-    count: number;
-    component?: Function | ComponentWrap;
-    iconFn: (() => string) | boolean;
-    class?: Partial<NotificationKnownClasses>;
-    forceAsHtml: boolean | undefined;
-}
-export interface Notification extends NotificationInput {
-    created: Date;
-}
-export type NotificationCreateParam = string | Partial<NotificationInput>;
-export interface NotiticationsCreateStoreOptions {
-    maxCapacity: number;
-    defaultType: string;
-    defaultTtl: number;
-    sortOrder?: NotificationsSortOrder;
-    logger: (...v: any) => void;
-}
-export declare const NOTIFICATION_EVENT: {
-    CLICK: string;
-    CREATE: string;
-    REMOVE: string;
-    AUTO_DISPOSE: string;
-    MOUSEOVER: string;
-    MOUSEOUT: string;
-};
-export declare const createNotificationsStore: (initial?: NotificationCreateParam[], opts?: Partial<NotiticationsCreateStoreOptions>) => {
-    subscribe: (cb: CallableFunction) => () => void;
-    get: () => Notification[];
-    add: (notif: NotificationCreateParam[] | NotificationCreateParam) => void;
-    event: (id: string, eventName: string, data?: any) => boolean;
-    find: (id: string) => Notification | null;
-    remove: (id: string) => boolean;
-    options: {
-        maxCapacity?: number | undefined;
-        defaultType?: string | undefined;
-        defaultTtl?: number | undefined;
-        sortOrder?: NotificationsSortOrder | undefined;
-        logger?: ((...v: any) => void) | undefined;
-    };
-    EVENT: {
-        CLICK: string;
-        CREATE: string;
-        REMOVE: string;
-        AUTO_DISPOSE: string;
-        MOUSEOVER: string;
-        MOUSEOUT: string;
-    };
-    setMaxCapacity: (v: number) => void;
-    setSortOrder: (v: string) => void;
-    info: (content: THC, n?: Partial<NotificationInput>) => void;
-    success: (content: THC, n?: Partial<NotificationInput>) => void;
-    warn: (content: THC, n?: Partial<NotificationInput>) => void;
-    error: (content: THC, n?: Partial<NotificationInput>) => void;
-};
-export {};

package/dist/components/Notifications/notifications.js

@@ -1,215 +0,0 @@
-import { createClog } from '@marianmeres/clog';
-import { createStore } from '@marianmeres/store';
-import { createTicker } from '@marianmeres/ticker';
-const isFn = (v) => typeof v === 'function';
-const DEFAULT_OPTIONS = {
-    maxCapacity: 5,
-    defaultTtl: 10,
-    defaultType: 'info',
-    sortOrder: 'asc',
-    logger: createClog('notifications'),
-};
-export const NOTIFICATION_EVENT = {
-    CLICK: 'click',
-    CREATE: 'create',
-    // `remove` programatically, or e.g. by clicking on X
-    REMOVE: 'remove',
-    // triggered when auto disposed by ttl expiration
-    AUTO_DISPOSE: 'auto_dispose',
-    // usefull for detecting interacion (so internally may notify as "seen")
-    MOUSEOVER: 'mouseover',
-    MOUSEOUT: 'mouseout',
-};
-// https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
-const _strHash = (str) => `${str || ''}`.split('').reduce((a, b) => {
-    a = (a << 5) - a + b.charCodeAt(0);
-    return a & a;
-}, 0);
-const _id = (type, content) => {
-    const str = content?.component
-        ? 'component'
-        : content?.html || content?.text || content;
-    return ['id', type, _strHash(str)].join('-');
-};
-export const createNotificationsStore = (initial = [], opts = {}) => {
-    if (!Array.isArray(initial))
-        initial = [initial];
-    // merge provided with defaults
-    opts = { ...DEFAULT_OPTIONS, ...(opts || {}) };
-    const _log = (...args) => isFn(opts.logger) && opts.logger.apply(null, [...args]);
-    const _setOption = (k, v) => {
-        // _log(`INFO: setting option '${k} = ${v}'`);
-        if (/^maxCapacity|defaultTtl$/.test(k)) {
-            v = parseInt(v, 10);
-            if (isNaN(v) || v < 0) {
-                _log(`WARN: invalid '${k}' option, falling back to default`);
-                opts[k] = DEFAULT_OPTIONS[k];
-            }
-            else {
-                opts[k] = v;
-            }
-        }
-        else {
-            opts[k] = v;
-        }
-    };
-    // sanitize options
-    ['maxCapacity', 'defaultTtl'].forEach((k) => _setOption(k, opts[k]));
-    const _factory = (notification) => {
-        let o = typeof notification === 'string' ? { id: 0, content: notification } : notification;
-        // ignore invalid (empty) notifs
-        if (!o.content) {
-            _log(`WARN: ignoring empty notification`);
-            return null;
-        }
-        o.type ||= opts.defaultType; //
-        o.id ||= _id(o.type, [o.content].join());
-        o.created = new Date(o.created || Date.now());
-        o.count ??= 1;
-        //
-        if (o.ttl === undefined)
-            o.ttl = opts.defaultTtl;
-        return o;
-    };
-    const _findIndexById = (notifs, id) => notifs.findIndex((n) => n.id === id);
-    const _removeByIdx = (notifs, idx) => {
-        if (idx > -1) {
-            notifs.splice(idx, 1);
-            notifs = [...notifs];
-        }
-        return notifs;
-    };
-    const _add = (notifs, notification, onAddHook = null) => {
-        const notif = _factory(notification);
-        // return early on invalid
-        if (!notif)
-            return notifs;
-        const _isDesc = opts.sortOrder === 'desc';
-        const idx = _findIndexById(notifs, notif.id);
-        if (idx > -1) {
-            notifs[idx].count++;
-            notifs[idx].created = new Date(Math.max(notifs[idx].created.valueOf(), notif.created.valueOf()));
-        }
-        else {
-            notifs.push(notif);
-            notifs.sort((a, b) => {
-                let _a = a.created.valueOf();
-                let _b = b.created.valueOf();
-                return _isDesc ? _b - _a : _a - _b;
-            });
-        }
-        if (isFn(onAddHook))
-            onAddHook?.(notif);
-        // keep only `maxCapacity` in the queue
-        if (opts.maxCapacity && notifs.length > opts.maxCapacity) {
-            notifs = _isDesc
-                ? notifs.slice(0, opts.maxCapacity)
-                : notifs.slice(-1 * opts.maxCapacity);
-        }
-        return [...notifs];
-    };
-    // main internal store
-    let notifs = [];
-    initial.forEach((n) => (notifs = _add(notifs, n)));
-    const _store = createStore(notifs);
-    // auto dispose feature
-    const ticker = createTicker(1_000);
-    const _tickerInit = () => {
-        const _tickerUnsub = ticker.start().subscribe((ts) => {
-            if (ts) {
-                const { disposed, kept } = _store.get().reduce((memo, n) => {
-                    if (n.ttl) {
-                        const expiry = n.created.valueOf() + n.ttl * 1000;
-                        expiry >= Date.now() ? memo.kept.push(n) : memo.disposed.push(n);
-                    }
-                    else {
-                        memo.kept.push(n);
-                    }
-                    return memo;
-                }, { disposed: [], kept: [] });
-                if (disposed.length) {
-                    disposed.forEach((n) => event(n.id, NOTIFICATION_EVENT.AUTO_DISPOSE));
-                    _store.set(kept);
-                }
-            }
-        });
-        return () => {
-            ticker.stop();
-            _tickerUnsub();
-        };
-    };
-    //
-    const findById = (id) => {
-        const notifs = _store.get();
-        const idx = _findIndexById(notifs, id);
-        return idx > -1 ? notifs[idx] : null;
-    };
-    const event = (id, eventName, data = null) => {
-        const n = findById(id);
-        if (n) {
-            if (isFn(n.on)) {
-                n.on(eventName, n, _store.get(), data);
-            }
-            if (eventName === NOTIFICATION_EVENT.CLICK && isFn(n.onClick)) {
-                n.onClick(n, _store.get(), data);
-            }
-            return true;
-        }
-        return false;
-    };
-    // we need to keep track of subscriptions count, so we can do the cleanup
-    let _subsCount = 0;
-    let _tickerDestroy;
-    const subscribe = (cb) => {
-        if (!_subsCount++)
-            _tickerDestroy = _tickerInit();
-        const unsub = _store.subscribe(cb);
-        return () => {
-            if (!--_subsCount)
-                _tickerDestroy();
-            unsub();
-        };
-    };
-    const add = (notif) => {
-        if (!Array.isArray(notif))
-            notif = [notif];
-        let notifs = _store.get();
-        notif.forEach((n) => (notifs = _add(notifs, n, (_n) => event(_n.id, NOTIFICATION_EVENT.CREATE))));
-        _store.set(notifs);
-    };
-    return {
-        subscribe,
-        //
-        get: () => _store.get(),
-        //
-        add,
-        //
-        event,
-        //
-        find: findById,
-        //
-        remove: (id) => {
-            let notifs = _store.get();
-            const idx = _findIndexById(notifs, id);
-            if (idx > -1) {
-                const notif = notifs[idx];
-                event(id, NOTIFICATION_EVENT.REMOVE);
-                _store.set(_removeByIdx(notifs, idx));
-                return true;
-            }
-            return false;
-        },
-        //
-        options: { ...opts },
-        //
-        EVENT: NOTIFICATION_EVENT,
-        // some options setters (for playground mostly)
-        setMaxCapacity: (v) => _setOption('maxCapacity', v),
-        setSortOrder: (v) => _setOption('sortOrder', v),
-        // sugar
-        info: (content, n) => add({ ...(n || {}), type: 'info', content }),
-        success: (content, n) => add({ ...(n || {}), type: 'success', content }),
-        warn: (content, n) => add({ ...(n || {}), type: 'warn', content }),
-        error: (content, n) => add({ ...(n || {}), type: 'error', content }),
-    };
-};

package/dist/components/Popover/Popover.svelte

@@ -1,24 +0,0 @@
-<script>import { tooltip } from "../../actions/tooltip/tooltip.js";
-export let options = {};
-const POPOVER_DEFAULTS = {
-  hideOnInsufficientSpace: true,
-  triggers: ["click"]
-};
-let popover;
-</script>
-
-{#if popover}
-	<span
-		use:tooltip={{
-			...POPOVER_DEFAULTS,
-			...(options || {}),
-			popover,
-		}}
-	>
-		<slot />
-	</span>
-{/if}
-
-<div bind:this={popover} class="hidden">
-	<slot name="popover" />
-</div>

package/dist/components/Popover/Popover.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type TooltipOptions } from '../../actions/tooltip/tooltip.js';
-declare const __propDef: {
-    props: {
-        options?: Partial<TooltipOptions>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        popover: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PopoverProps = typeof __propDef.props;
-export type PopoverEvents = typeof __propDef.events;
-export type PopoverSlots = typeof __propDef.slots;
-export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
-}
-export {};

package/dist/components/Spinner/Spinner.v5.svelte

@@ -1,114 +0,0 @@
-<script>import { twMerge2 } from "@marianmeres/stuic";
-let {
-  class: _class,
-  duration = 1e3,
-  // one "loop" duration (in ms)
-  count = 8,
-  // "hands" count
-  thickness = "normal",
-  height = "normal",
-  direction = "cw"
-} = $props();
-let _count = $derived(Math.max(3, Math.min(12, count)));
-let _segments = $derived.by(() => {
-  let out = [];
-  for (let i = 0; i < _count; i++) {
-    out.push({
-      rotate: 360 / _count * i,
-      delay: (direction === "ccw" ? 1 : -1) * (duration - duration / _count * (i + 1)),
-      duration
-    });
-  }
-  return out;
-});
-let _thickness = $derived(
-  "thickness-" + (["normal", "thin", "thick"].includes(thickness) ? thickness : "normal")
-);
-let _height = $derived(
-  "height-" + (["normal", "tall", "short"].includes(height) ? height : "normal")
-);
-</script>
-
-<div class="spinner {_thickness} {_height} {twMerge2('inline-block w-5', _class)}">
-	{#each _segments as s}
-		<div
-			style={[
-				`transform: rotate(${s.rotate}deg);`,
-				`animation-delay: ${s.delay}ms;`,
-				`animation-duration: ${s.duration}ms;`
-			].join('')}
-		></div>
-	{/each}
-</div>
-
-<style>
-	.spinner,
-	.spinner div,
-	.spinner div:after {
-		box-sizing: border-box;
-	}
-
-	.spinner {
-		/* display: inline-block; */
-		position: relative;
-		aspect-ratio: 1/1;
-		pointer-events: none;
-	}
-
-	.spinner div {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		inset: 0;
-		/* animation: spinner 1.2s linear infinite; */
-		animation-name: spinner;
-		animation-timing-function: linear;
-		animation-iteration-count: infinite;
-	}
-
-	.spinner div:after {
-		content: ' ';
-		display: block;
-		position: absolute;
-
-		top: 0;
-		/* left: 46%;
-		width: 8%; 
-		height: 27%; */
-		border-radius: 35%;
-		background: currentColor;
-	}
-	/* thickness */
-	.spinner.thickness-thin div:after {
-		left: 47.5%;
-		width: 5%;
-	}
-	.spinner.thickness-normal div:after {
-		left: 46%;
-		width: 8%;
-	}
-	.spinner.thickness-thick div:after {
-		left: 44.5%;
-		width: 11%;
-	}
-
-	/* height */
-	.spinner.height-short div:after {
-		height: 21%;
-	}
-	.spinner.height-normal div:after {
-		height: 27%;
-	}
-	.spinner.height-tall div:after {
-		height: 33%;
-	}
-
-	@keyframes spinner {
-		0% {
-			opacity: 1;
-		}
-		100% {
-			opacity: 0;
-		}
-	}
-</style>

package/dist/components/Spinner/Spinner.v5.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SpinnerProps = typeof __propDef.props;
-export type SpinnerEvents = typeof __propDef.events;
-export type SpinnerSlots = typeof __propDef.slots;
-export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
-}
-export {};