@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/components/Notifications/notifications-stack.svelte.d.ts

@@ -0,0 +1,89 @@
+import type { Component } from "svelte";
+import { type THC } from "../Thc/Thc.svelte";
+export interface ComponentWrap {
+    component: Component;
+    props?: any;
+}
+export type NotificationsSortOrder = "asc" | "desc";
+export type NotificationType = "info" | "success" | "warn" | "error" | string;
+export interface NotificationInput extends Record<string, any> {
+    /** Unique id of the notification. If not provided, will be calculated from content.
+    Multiple notifications with the same id will be ignored (but the `count` will be increased). */
+    id: any;
+    /** Optional UI rendering well known hint (has no effect on the functionality, can be
+    any string), defaults to "info". */
+    type: NotificationType;
+    /** The actual notification message (either plain text, html or component)
+    notifications without any content will be ignored. */
+    content: THC;
+    onClick: (self: Notification, all: Notification[], data: any) => void;
+    /** Notification specific time-to-live in milliseconds (after which notif will be auto discarded)
+    use 0 to disable auto disposal */
+    ttl: number;
+    /** Number of notifications in the queue with the same `id`. If you do not provide your
+    own id, it will be calculated from content. */
+    count: number;
+    /** Optional, in shape `{ component, props }` */
+    component?: Component | ComponentWrap;
+    iconFn: (() => string) | boolean;
+    forceAsHtml?: boolean;
+}
+export interface Notification extends NotificationInput {
+    /** For sorting the queue, will default to now. */
+    created: Date;
+    /** State progress or living time in percents. A hint for UI to maybe display some progress bar...
+     * Will be update by the dispose checker... (so the update frequency is equal to `disposeInterval`) */
+    _ttlProgress: number;
+}
+export type NotificationCreateParam = string | Partial<NotificationInput>;
+export interface NotificationsStackOptions {
+    /** Maximum number of notifications kept in the queue, if exceeded, older ones (by `created`)
+    will be discarded. Use 0 (zero) to disable capacity check. */
+    maxCapacity: number;
+    /** Default value for Notification.type, defaults to "info". */
+    defaultType: string;
+    /** Global time-to-live in milliseconds (after which notifs will be auto discarded).
+    Use 0 to disable default auto disposal. */
+    defaultTtl: number;
+    /** Will prolong the defaultTtl with some extra (in milliseconds) based on the content
+     * length. Use 0 to disable. */
+    extraTtlPerChar: number;
+    /** How to sort the queue, "asc" (default) or "desc".
+    Sorting is always done by the `created` prop. */
+    sortOrder?: NotificationsSortOrder;
+    /** How often to check for disposed ones? (milliseconds). Note that this interval
+     * also effects how often the progress is updated. The higher the more precise...
+     * (which may have visual implications if used with progress bar). Reasonable value
+     * would be between 100ms and 1_000ms. */
+    disposeInterval?: number;
+}
+/**
+ *
+ */
+export declare class NotificationsStack {
+    #private;
+    readonly options: NotificationsStackOptions;
+    constructor(initial?: NotificationCreateParam[], opts?: Partial<NotificationsStackOptions>);
+    /** Will remove the notification from stack */
+    removeById: (id: string) => this;
+    /** Will cleanup the stack. */
+    reset: () => this;
+    /**
+     * Will get the first in stack (for testing mostly)
+     */
+    get head(): Notification | undefined;
+    /** Will return clone (intentionally) of internal data. */
+    get stack(): Notification[];
+    /** Will get the current stack size */
+    get length(): number;
+    /** Will do internal cleanups. */
+    destroy: () => void;
+    /** Main api. */
+    info: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
+    /** Main api. */
+    success: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
+    /** Main api. */
+    warn: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
+    /** Main api. */
+    error: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
+}

package/dist/components/Notifications/notifications-stack.svelte.js

@@ -0,0 +1,161 @@
+import { createTicker } from "@marianmeres/ticker";
+import { strHash } from "../../utils/str-hash.js";
+import { getTHCStringContent } from "../Thc/Thc.svelte";
+const DEFAULT_OPTIONS = {
+    maxCapacity: 5,
+    defaultTtl: 3_000,
+    extraTtlPerChar: 20,
+    defaultType: "info",
+    sortOrder: "asc",
+    disposeInterval: 500,
+};
+const isFn = (v) => typeof v === "function";
+const _id = (type, content) => {
+    const str = content?.component
+        ? "component"
+        : content?.html || content?.text || content;
+    return ["id", type, strHash(str)].join("-");
+};
+/**
+ *
+ */
+export class NotificationsStack {
+    #stack = $state([]);
+    options = $state();
+    #ticker;
+    #unsubs = [];
+    constructor(initial = [], opts = {}) {
+        this.options = { ...DEFAULT_OPTIONS, ...(opts || {}) };
+        initial.forEach((n) => this.#add(n));
+        // auto dispose feature
+        this.#ticker = createTicker(this.options.disposeInterval, true);
+        const _tickerUnsub = this.#ticker.subscribe(this.#onTick);
+        this.#unsubs.push(() => {
+            this.#ticker.stop();
+            _tickerUnsub();
+        });
+    }
+    #onTick = (ts) => {
+        if (!ts)
+            return;
+        const updated = this.#stack.reduce((memo, n) => {
+            if (n.ttl) {
+                const start = n.created.valueOf();
+                const end = start + n.ttl;
+                const now = Date.now();
+                const expired = end < now;
+                if (!expired) {
+                    // we can't know exactly the offset here, but using full is good enough...
+                    const offset = this.options.disposeInterval || 0;
+                    n._ttlProgress = (now - start + offset) / (end - start);
+                    memo.push(n);
+                }
+            }
+            else {
+                memo.push(n);
+            }
+            return memo;
+        }, []);
+        // since we're updating progress, we must reassign every time, not just if disposed
+        this.#stack = updated;
+    };
+    #maybeTtlExtra(content) {
+        return getTHCStringContent(content).length * this.options.extraTtlPerChar;
+    }
+    /** Will normalize item to internal shape. */
+    #normalize = (n) => {
+        let o = typeof n === "string" ? { id: 0, content: n } : n;
+        if (!o.content)
+            return null;
+        o.type ||= this.options.defaultType;
+        o.id ||= _id(o.type, o.content);
+        o.created = new Date(o.created || Date.now());
+        o.count ??= 1;
+        o.ttl ??= this.options.defaultTtl + this.#maybeTtlExtra(o.content);
+        o._ttlProgress = 0;
+        return o;
+    };
+    #findIndexById = (id) => {
+        return this.#stack.findIndex((n) => n.id === id);
+    };
+    #removeByIndex = (idx) => {
+        if (idx > -1)
+            this.#stack.splice(idx, 1);
+    };
+    /** Will add to stack */
+    #add = (n) => {
+        const notif = this.#normalize(n);
+        // return early on invalid
+        if (!notif)
+            return;
+        const { maxCapacity, sortOrder } = this.options;
+        const idx = this.#findIndexById(notif.id);
+        let stack = this.#stack;
+        if (idx > -1) {
+            stack[idx].count++;
+            stack[idx].created = new Date(Math.max(stack[idx].created.valueOf(), notif.created.valueOf()));
+        }
+        else {
+            stack.push(notif);
+            stack.sort((a, b) => {
+                let _a = a.created.valueOf();
+                let _b = b.created.valueOf();
+                return sortOrder === "desc" ? _b - _a : _a - _b;
+            });
+        }
+        // keep only `maxCapacity`
+        if (maxCapacity && stack.length > maxCapacity) {
+            stack =
+                sortOrder === "desc"
+                    ? stack.slice(0, maxCapacity)
+                    : stack.slice(-1 * maxCapacity);
+        }
+        this.#stack = stack;
+        return this;
+    };
+    /** Will remove the notification from stack */
+    removeById = (id) => {
+        this.#removeByIndex(this.#findIndexById(id));
+        return this;
+    };
+    /** Will cleanup the stack. */
+    reset = () => {
+        this.#stack = [];
+        return this;
+    };
+    /**
+     * Will get the first in stack (for testing mostly)
+     */
+    get head() {
+        return this.#stack.at(0);
+    }
+    /** Will return clone (intentionally) of internal data. */
+    get stack() {
+        return [...this.#stack];
+    }
+    /** Will get the current stack size */
+    get length() {
+        return this.#stack.length;
+    }
+    /** Will do internal cleanups. */
+    destroy = () => {
+        this.reset();
+        this.#unsubs.forEach((fn) => fn());
+    };
+    /** Main api. */
+    info = (content, n) => {
+        return this.#add({ ...(n || {}), type: "info", content });
+    };
+    /** Main api. */
+    success = (content, n) => {
+        return this.#add({ ...(n || {}), type: "success", content });
+    };
+    /** Main api. */
+    warn = (content, n) => {
+        return this.#add({ ...(n || {}), type: "warn", content });
+    };
+    /** Main api. */
+    error = (content, n) => {
+        return this.#add({ ...(n || {}), type: "error", content });
+    };
+}

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Bar from "./_internal/Bar.svelte";
+	import Circle from "./_internal/Circle.svelte";
+
+	interface Props {
+		type?: "bar" | "circle";
+		progress?: number;
+		class?: string;
+		classBar?: string;
+		styleBar?: string;
+	}
+
+	let {
+		type = "bar",
+		progress = 0,
+		class: classProp,
+		classBar,
+		styleBar,
+	}: Props = $props();
+</script>
+
+{#if type === "bar"}
+	<Bar {progress} class={classProp} {classBar} {styleBar} />
+{:else if type === "circle"}
+	<Circle {progress} class={classProp} />
+{/if}

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

@@ -0,0 +1,10 @@
+interface Props {
+    type?: "bar" | "circle";
+    progress?: number;
+    class?: string;
+    classBar?: string;
+    styleBar?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/Progress/_internal/Bar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { twMerge } from "../../../utils/tw-merge.js";
+
+	import "../index.css";
+
+	interface Props {
+		progress: number;
+		class?: string;
+		classBar?: string;
+		styleBar?: string;
+	}
+
+	let { progress = 0, class: classProp, classBar, styleBar = "" }: Props = $props();
+</script>
+
+<div
+	class={twMerge(
+		"stuic-progress-bar",
+		"w-full h-2 bg-progress-bg flex justify-start pointer-events-none",
+		classProp
+	)}
+>
+	<div
+		class={twMerge(
+			"bar",
+			"w-full h-full bg-progress-accent transition-[width] ease-linear duration-1000",
+			classBar
+		)}
+		style="width:{Math.min(100, Math.max(0, progress))}%; {styleBar}"
+	></div>
+</div>

package/dist/components/Progress/_internal/Bar.svelte.d.ts

@@ -0,0 +1,10 @@
+import "../index.css";
+interface Props {
+    progress: number;
+    class?: string;
+    classBar?: string;
+    styleBar?: string;
+}
+declare const Bar: import("svelte").Component<Props, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Progress/_internal/Circle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	interface Props {
+		progress: number;
+		class?: string;
+	}
+
+	let { progress = 0, class: classProp }: Props = $props();
+</script>
+
+todo

package/dist/components/Progress/_internal/Circle.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    progress: number;
+    class?: string;
+}
+declare const Circle: import("svelte").Component<Props, {}, "">;
+type Circle = ReturnType<typeof Circle>;
+export default Circle;

package/dist/components/Progress/index.css

@@ -0,0 +1,7 @@
+@import "../../_shared.css";
+
+/* prettier-ignore */
+@theme inline {
+	--color-progress-bg: var(--color-progress-bg, var(--color-neutral-200));
+	--color-progress-accent: var(--color-progress-accent, var(--color-neutral-600));
+}

package/dist/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.svelte";

package/dist/components/Progress/index.js

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.svelte";

package/dist/components/Spinner/Spinner.svelte

@@ -1,43 +1,58 @@
-<script>import { twMerge2 } from "../../utils/tw-merge2.js";
-let _class = "";
-export { _class as class };
-export let duration = 1e3;
-export let count = 8;
-export let thickness = "normal";
-export let height = "normal";
-export let direction = "cw";
-$:
-  _count = Math.max(3, Math.min(12, count));
-let _id = 0;
-const _calcSegs = (c, d) => {
-  const id = _id++;
-  let out = [];
-  for (let i = 0; i < c; i++) {
-    out.push({
-      id: `${id}_${i}`,
-      rotate: 360 / c * i,
-      delay: (direction === "ccw" ? 1 : -1) * (d - d / c * (i + 1)),
-      duration: d
-    });
-  }
-  return out;
-};
-$:
-  _segments = _calcSegs(_count, duration);
-$:
-  _thickness = "thickness-" + (["normal", "thin", "thick"].includes(thickness) ? thickness : "normal");
-$:
-  _height = "height-" + (["normal", "tall", "short"].includes(height) ? height : "normal");
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	// this is quite verbose, but very straight forward implementation,
+	// and always rendered without any issues (opposed to linear-gradient hackish stuff)
+
+	let {
+		class: _class,
+		duration = 750, // one "loop" duration (in ms)
+		count = 8, // "hands" count
+		thickness = "thick", // looks better in small size
+		height = "normal",
+		direction = "cw",
+	}: {
+		class?: string;
+		duration?: number;
+		count?: number;
+		thickness?: "normal" | "thin" | "thick";
+		height?: "normal" | "tall" | "short";
+		direction?: "cw" | "ccw";
+	} = $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-4', _class)}">
-	{#each _segments as s (s.id)}
+<div class="spinner {_thickness} {_height} {twMerge('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('')}
+				`transform: rotate(${s.rotate}deg);`,
+				`animation-delay: ${s.delay}ms;`,
+				`animation-duration: ${s.duration}ms;`,
+			].join("")}
 		></div>
 	{/each}
 </div>
@@ -68,7 +83,7 @@ $:
 	}
 
 	.spinner div:after {
-		content: ' ';
+		content: " ";
 		display: block;
 		position: absolute;
 
@@ -81,16 +96,16 @@ $:
 	}
 	/* thickness */
 	.spinner.thickness-thin div:after {
-		left: 48%;
-		width: 4%;
+		left: 47.5%;
+		width: 5%;
 	}
 	.spinner.thickness-normal div:after {
 		left: 46%;
 		width: 8%;
 	}
 	.spinner.thickness-thick div:after {
-		left: 43%;
-		width: 14%;
+		left: 44.5%;
+		width: 11%;
 	}
 
 	/* height */

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

@@ -1,23 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        duration?: number;
-        count?: number;
-        thickness?: "normal" | "thin" | "thick";
-        height?: "normal" | "tall" | "short";
-        direction?: "cw" | "ccw";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    class?: string;
+    duration?: number;
+    count?: number;
+    thickness?: "normal" | "thin" | "thick";
+    height?: "normal" | "tall" | "short";
+    direction?: "cw" | "ccw";
 };
-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 {};
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.svelte";

package/dist/components/Spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.svelte";