@marianmeres/stuic 1.126.0 → 2.0.0-next.2

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import FieldInput from "../Input/FieldInput.svelte";
+	import FieldSelect from "../Input/FieldSelect.svelte";
+	import Spinner from "../Spinner/Spinner.svelte";
+	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import { acpDefaultIcons } from "./acp-icons.js";
+	import {
+		AlertConfirmPromptType,
+		type AlertConfirmPromptStack,
+	} from "./alert-confirm-prompt-stack.svelte.js";
+
+	const { ALERT, CONFIRM, PROMPT } = AlertConfirmPromptType;
+	const isFn = (v: any) => typeof v === "function";
+
+	interface Props {
+		acp?: AlertConfirmPromptStack;
+		value?: any;
+		isPending?: boolean;
+		forceAsHtml?: boolean;
+		class?: string;
+		classWrap?: string;
+		classIconBox?: string;
+		classContentBox?: string;
+		classTitle?: string;
+		classContent?: string;
+		classInputBox?: string;
+		classInput?: string;
+		classMenu?: string;
+		classMenuLi?: string;
+		classButton?: string;
+		classSpinnerBox?: string;
+	}
+
+	let {
+		acp,
+		value = $bindable(),
+		isPending = $bindable(false),
+		forceAsHtml = true,
+		class: classProp,
+		classWrap,
+		classIconBox,
+		classContentBox,
+		classTitle,
+		classContent,
+		classInputBox,
+		classInput,
+		classMenu,
+		classMenuLi,
+		classButton,
+		classSpinnerBox,
+	}: Props = $props();
+
+	let current = $derived(acp?.current!);
+
+	let iconFn = $derived.by(() => {
+		let out = current.iconFn;
+		if (current.iconFn === true) {
+			out = acpDefaultIcons[current.variant];
+		}
+		return out;
+	});
+
+	const createOnClick = (worker: CallableFunction) => async (e: Event) => {
+		e.preventDefault();
+		isPending = true;
+		await Promise.resolve(worker(current.type === PROMPT ? value : true));
+		isPending = false;
+		value = null;
+	};
+
+	const debug = (c?: string, flag = 0) =>
+		c && flag ? `outline outline-dashed ${c}` : "";
+
+	// Default classes
+
+	const _class = "p-1 sm:p-2 h-full flex flex-col overflow-hidden";
+
+	const _classWrap = `flex-1 sm:flex sm:items-start overflow-hidden`;
+
+	const _classIconBox = `size-12 sm:size-10
+		mt-1 mb-4 sm:my-0 sm:mr-5
+		mx-auto 
+		flex flex-shrink-0 items-center justify-center 
+		rounded-full 
+		bg-neutral-950/10 text-neutral-950/80
+		dark:bg-neutral-50/20 dark:text-neutral-50/80`;
+
+	const _classContentBox = `mt-3 sm:mt-0 flex-1 overflow-hidden h-full flex flex-col`;
+
+	const _classTitle = `text-center sm:text-left text-base font-semibold leading-6`;
+
+	const _classContent = `mt-2 mx-3 sm:mx-0 text-center sm:text-left text-sm opacity-75`;
+
+	const _classMenu = `mt-6 sm:flex sm:space-x-4 justify-end space-y-3 sm:space-y-0`;
+
+	const _classMenuLi = `flex-1 sm:flex-none w-full sm:w-auto sm:inline-block`;
+
+	const _classButton = "min-w-24 text-center w-full sm:w-auto";
+
+	const _classSpinnerBox = `absolute inset-0 flex items-center justify-center bg-white/75 dark:bg-black/75`;
+</script>
+
+<div class={twMerge("stuic-acp", _class, classProp)}>
+	<div class={twMerge("wrap", _classWrap, classWrap)}>
+		{#if typeof iconFn === "function"}
+			<div
+				class={twMerge(
+					"icon-box",
+					debug("outline-green-500"),
+					_classIconBox,
+					classIconBox
+				)}
+			>
+				{@html iconFn()}
+			</div>
+		{/if}
+		<div class={twMerge("content-box", _classContentBox, classContentBox)}>
+			<h1
+				class={twMerge(
+					"title",
+					_classTitle,
+					typeof iconFn === "function" && "pt-2",
+					classTitle
+				)}
+			>
+				<Thc thc={current.title} {forceAsHtml} />
+			</h1>
+
+			<div class="scrollable overflow-y-auto flex-1" style="scrollbar-width: thin;">
+				{#if isTHCNotEmpty(current.content)}
+					<div class={twMerge("content", _classContent, classContent)}>
+						<Thc thc={current.content} {forceAsHtml} />
+					</div>
+				{/if}
+
+				{#if current.type === PROMPT}
+					<div class={twMerge("input-box", "mt-1 p-2", classInputBox)}>
+						{#if current?.promptFieldProps?.options?.length}
+							<FieldSelect
+								bind:value
+								class={twMerge("input", "m-0", classInput)}
+								options={current.promptFieldProps.options}
+								renderSize="sm"
+								disabled={isPending}
+								{...current.promptFieldProps}
+							/>
+						{:else}
+							<FieldInput
+								bind:value
+								class={twMerge("input", classInput)}
+								renderSize="sm"
+								disabled={isPending}
+								{...current?.promptFieldProps || {}}
+							/>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+	<menu class={twMerge(_classMenu, classMenu)}>
+		{#if current.type !== ALERT}
+			<li class={twMerge(_classMenuLi, classMenuLi)}>
+				<Button
+					class={twMerge("cancel", _classButton, classButton)}
+					disabled={isPending}
+					onclick={createOnClick(current.onCancel)}
+				>
+					<Thc thc={current.labelCancel} {forceAsHtml} />
+				</Button>
+			</li>
+		{/if}
+		{#if current.labelCustom && typeof current.onCustom === "function"}
+			<li class={twMerge(_classMenuLi, classMenuLi)}>
+				<Button
+					class={twMerge("custom", _classButton, classButton)}
+					disabled={isPending}
+					onclick={createOnClick(current.onCustom)}
+				>
+					<Thc thc={current.labelCustom} {forceAsHtml} />
+				</Button>
+			</li>
+		{/if}
+		<li class={twMerge(_classMenuLi, classMenuLi)}>
+			<Button
+				class={twMerge("ok", _classButton, classButton)}
+				variant="primary"
+				disabled={isPending}
+				onclick={createOnClick(current.onOk)}
+			>
+				<Thc thc={current.labelOk} {forceAsHtml} />
+			</Button>
+		</li>
+	</menu>
+	{#if isPending}
+		<div class={twMerge("spinner-box", _classSpinnerBox, classSpinnerBox)}>
+			<Spinner class="w-8" />
+		</div>
+	{/if}
+</div>

package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type AlertConfirmPromptStack } from "./alert-confirm-prompt-stack.svelte.js";
+interface Props {
+    acp?: AlertConfirmPromptStack;
+    value?: any;
+    isPending?: boolean;
+    forceAsHtml?: boolean;
+    class?: string;
+    classWrap?: string;
+    classIconBox?: string;
+    classContentBox?: string;
+    classTitle?: string;
+    classContent?: string;
+    classInputBox?: string;
+    classInput?: string;
+    classMenu?: string;
+    classMenuLi?: string;
+    classButton?: string;
+    classSpinnerBox?: string;
+}
+declare const Current: import("svelte").Component<Props, {}, "value" | "isPending">;
+type Current = ReturnType<typeof Current>;
+export default Current;

package/dist/components/AlertConfirmPrompt/acp-icons.d.ts

@@ -1,2 +1,7 @@
-import type { AlertConfirmPromptIcons } from './AlertConfirmPrompt.svelte';
-export declare const acpDefaultIcons: AlertConfirmPromptIcons;
+export declare const acpDefaultIcons: {
+    info: () => any;
+    success: () => any;
+    warn: () => any;
+    error: () => any;
+    spinner: () => any;
+};

package/dist/components/AlertConfirmPrompt/acp-icons.js

@@ -1,12 +1,12 @@
-import { iconFeatherAlertTriangle } from '@marianmeres/icons-fns/feather/iconFeatherAlertTriangle.js';
-import { iconFeatherCheckCircle } from '@marianmeres/icons-fns/feather/iconFeatherCheckCircle.js';
-import { iconFeatherInfo } from '@marianmeres/icons-fns/feather/iconFeatherInfo.js';
-import { iconFeatherRefreshCw } from '@marianmeres/icons-fns/feather/iconFeatherRefreshCw.js';
-import { iconFeatherXOctagon } from '@marianmeres/icons-fns/feather/iconFeatherXOctagon.js';
+import { iconFeatherAlertTriangle } from "@marianmeres/icons-fns/feather/iconFeatherAlertTriangle.js";
+import { iconFeatherCheckCircle } from "@marianmeres/icons-fns/feather/iconFeatherCheckCircle.js";
+import { iconFeatherInfo } from "@marianmeres/icons-fns/feather/iconFeatherInfo.js";
+import { iconFeatherRefreshCw } from "@marianmeres/icons-fns/feather/iconFeatherRefreshCw.js";
+import { iconFeatherXOctagon } from "@marianmeres/icons-fns/feather/iconFeatherXOctagon.js";
 export const acpDefaultIcons = {
-    info: () => iconFeatherInfo({}),
+    info: () => iconFeatherInfo({ size: 24 }),
     success: () => iconFeatherCheckCircle({}),
-    warn: () => iconFeatherAlertTriangle({ class: '-mt-[3px]' }), // move up a little because it looks better with the triangle
+    warn: () => iconFeatherAlertTriangle({ class: "-mt-[3px]" }), // move up a little because it looks better with the triangle
     error: () => iconFeatherXOctagon({}),
-    spinner: () => iconFeatherRefreshCw({ size: 32, class: 'opacity-50' }),
+    spinner: () => iconFeatherRefreshCw({ size: 32, class: "opacity-50" }),
 };

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

@@ -0,0 +1,63 @@
+import type { THC } from "../Thc/Thc.svelte";
+export declare enum AlertConfirmPromptType {
+    ALERT = "alert",
+    CONFIRM = "confirm",
+    PROMPT = "prompt"
+}
+export type AlertConfirmPromptVariant = "info" | "success" | "warn" | "error";
+export type FnOnOK = (value: any) => any;
+export type FnOnCancel = (value: false) => any;
+export type FnOnEscape = () => void;
+export type FnOnCustom = (value: any) => any;
+export interface AlertConfirmPromptObj 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;
+    forceAsHtml?: boolean;
+}
+export declare class AlertConfirmPromptStack {
+    #private;
+    defaults: Partial<AlertConfirmPromptObj>;
+    constructor(defaults?: Partial<AlertConfirmPromptObj>);
+    get length(): number;
+    get current(): AlertConfirmPromptObj;
+    shift: () => AlertConfirmPromptObj | undefined;
+    reset: () => void;
+    escape: () => void;
+    dump: () => AlertConfirmPromptObj[];
+    /**
+     * Main api.
+     */
+    alert: (o?: Partial<AlertConfirmPromptObj> | string) => void;
+    /**
+     * Main api.
+     */
+    confirm: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptObj>) => void;
+    /**
+     * Main api.
+     */
+    prompt: (onOk: FnOnOK, o?: Partial<AlertConfirmPromptObj>) => void;
+}
+/**
+ * Sugar helper to monkey patch the native window.alert
+ */
+export declare function createAlert(acp: AlertConfirmPromptStack, defaults?: Partial<AlertConfirmPromptObj>): (message: string, o?: Partial<AlertConfirmPromptObj>) => Promise<undefined>;
+/**
+ * Sugar helper to monkey patch the native window.confirm
+ */
+export declare function createConfirm(acp: AlertConfirmPromptStack, defaults?: Partial<AlertConfirmPromptObj>): (message: string, o?: Partial<AlertConfirmPromptObj>) => Promise<boolean>;
+/**
+ * Sugar helper to monkey patch the native window.prompt
+ */
+export declare function createPrompt(acp: AlertConfirmPromptStack, defaults?: Partial<AlertConfirmPromptObj>): (message: string, defaultValue?: string, o?: Partial<AlertConfirmPromptObj>) => Promise<string | null>;

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

@@ -0,0 +1,144 @@
+import { createClog } from "@marianmeres/clog";
+const clog = createClog("alert-confirm-prompt-stack").debug;
+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 class AlertConfirmPromptStack {
+    defaults;
+    // fifo
+    #stack = $state([]);
+    constructor(defaults = {}) {
+        this.defaults = defaults;
+        this.defaults ??= {};
+        this.defaults.labelOk ||= "OK";
+        this.defaults.labelCancel ||= "Cancel";
+        this.defaults.iconFn ??= true;
+    }
+    get length() {
+        return this.#stack.length;
+    }
+    get current() {
+        return this.#stack[0];
+    }
+    #push = (o) => {
+        if (!isFn(o.onOk))
+            o.onOk = this.shift;
+        if (!isFn(o.onCancel))
+            o.onCancel = this.shift;
+        if (!isFn(o.onEscape))
+            o.onEscape = this.shift;
+        if (!isFn(o.onCustom))
+            o.onCustom = () => undefined;
+        o.type ??= AlertConfirmPromptType.ALERT;
+        o.labelOk ??= this.defaults.labelOk;
+        o.labelCancel ??= this.defaults.labelCancel;
+        o.iconFn ??= this.defaults.iconFn;
+        o.title ??= ucf(`${o.type || ""}`);
+        // variant defaults to info
+        if (!["info", "success", "warn", "error"].includes(o?.variant)) {
+            o.variant = "info";
+        }
+        o._id = Math.random().toString(36).slice(2);
+        this.#stack.push(o);
+    };
+    shift = () => this.#stack.shift();
+    reset = () => {
+        this.#stack = [];
+    };
+    escape = () => {
+        this.#stack?.[0]?.onEscape?.();
+        this.shift();
+    };
+    dump = () => {
+        return [...this.#stack];
+    };
+    /**
+     * Main api.
+     */
+    alert = (o) => {
+        if (typeof o === "string")
+            o = { title: o };
+        this.#push({ ...(o || {}), type: AlertConfirmPromptType.ALERT });
+    };
+    /**
+     * Main api.
+     */
+    confirm = (onOk, o) => {
+        this.#push({ onOk, value: false, ...o, type: AlertConfirmPromptType.CONFIRM });
+    };
+    /**
+     * Main api.
+     */
+    prompt = (onOk, o) => {
+        this.#push({ onOk, value: "", ...o, type: AlertConfirmPromptType.PROMPT });
+    };
+}
+/**
+ * Sugar helper to monkey patch the native window.alert
+ */
+export function createAlert(acp, defaults) {
+    // allowing to add the custom param outside of the native signature
+    return (message, o) => new Promise((resolve) => acp.alert({
+        ...(defaults || {}),
+        onOk: () => {
+            acp.shift();
+            resolve(undefined);
+        },
+        content: message,
+        onEscape: () => {
+            acp.shift();
+            resolve(undefined);
+        },
+        ...(o || {}),
+    }));
+}
+/**
+ * Sugar helper to monkey patch the native window.confirm
+ */
+export function createConfirm(acp, defaults) {
+    // allowing to add the custom param outside of the native signature
+    return (message, o) => new Promise((resolve) => acp.confirm(() => {
+        acp.shift();
+        resolve(true);
+    }, {
+        ...(defaults || {}),
+        content: message,
+        onCancel: () => {
+            acp.shift();
+            resolve(false);
+        },
+        onEscape: () => {
+            acp.shift();
+            resolve(false);
+        },
+        ...(o || {}),
+    }));
+}
+/**
+ * Sugar helper to monkey patch the native window.prompt
+ */
+export function createPrompt(acp, defaults) {
+    // allowing to add the custom param outside of the native signature
+    return (message, defaultValue = "", o) => new Promise((resolve) => acp.prompt((value) => {
+        acp.shift();
+        resolve(value);
+    }, {
+        ...(defaults || {}),
+        content: message,
+        value: defaultValue,
+        onCancel: () => {
+            acp.shift();
+            resolve(null);
+        },
+        onEscape: () => {
+            acp.shift();
+            resolve(null);
+        },
+        ...(o || {}),
+    }));
+}

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

@@ -0,0 +1,2 @@
+export * from "./alert-confirm-prompt-stack.svelte.js";
+export { default as AlertConfirmPrompt } from "./AlertConfirmPrompt.svelte";

package/dist/components/AlertConfirmPrompt/index.js

@@ -0,0 +1,2 @@
+export * from "./alert-confirm-prompt-stack.svelte.js";
+export { default as AlertConfirmPrompt } from "./AlertConfirmPrompt.svelte";

package/dist/components/AnimatedElipsis/AnimatedEllipsis.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { createTickerRAF } from "@marianmeres/ticker";
+	import { onMount } from "svelte";
+
+	let { class: _class, enabled = true }: { class?: string; enabled?: boolean } = $props();
+
+	const speed = 250;
+	let visible = $state([false, false, false]);
+	let i = $state(0);
+
+	onMount(() => {
+		const ticker = createTickerRAF(speed, true);
+		const unsub = ticker.subscribe((t) => {
+			if (i > visible.length - 1) {
+				i = 0;
+				visible = visible.map((v) => false);
+			} else {
+				visible[i] = true;
+				i++;
+			}
+		});
+		return () => {
+			ticker.stop();
+			unsub();
+		};
+	});
+</script>
+
+<!-- prettier-ignore -->
+<span class={_class}>
+	<span 
+		class={visible[0] || !enabled ? 'opacity-100' : 'opacity-0'} 
+		style="transition-duration: {speed}ms;"
+	>.</span><span 
+		class={visible[1] || !enabled ? 'opacity-100' : 'opacity-0'}
+		style="transition-duration: {speed}ms;"
+	>.</span><span 
+		class={visible[2] || !enabled ? 'opacity-100' : 'opacity-0'}
+		style="transition-duration: {speed}ms;"
+	>.</span>
+</span>
+
+<style>
+	span span {
+		transition-property: opacity;
+	}
+</style>

package/dist/components/AnimatedElipsis/AnimatedEllipsis.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+    enabled?: boolean;
+};
+declare const AnimatedEllipsis: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnimatedEllipsis = ReturnType<typeof AnimatedEllipsis>;
+export default AnimatedEllipsis;

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

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

package/dist/components/AnimatedElipsis/index.js

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