@marianmeres/stuic 1.32.0 → 1.34.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -70,17 +70,19 @@ export class AlertConfirmPromptConfig {
 			`.trim()
   };
   // main userland configuration
-  static classDialog = "";
-  static classIcon = "";
-  static classTitle = "";
-  static classContentBlock = "";
-  static classContent = "";
-  static classInputBox = "";
-  static classInputField = "";
-  static classMenu = "";
-  // static classMenuLi = '';
-  static classButton = "";
-  static classSpinnerBox = "";
+  static class = {
+    dialog: "",
+    icon: "",
+    contentBlock: "",
+    title: "",
+    content: "",
+    inputBox: "",
+    inputField: "",
+    menu: "",
+    // menuLi: '',
+    button: "",
+    spinnerBox: ""
+  };
   // 'info' | 'success' | 'warn' | 'error'
   // userlang variant fine tuning
   static variant = {
@@ -200,56 +202,56 @@ onMount(() => {
 $:
   _dialogClass = twMerge(`
         ${AlertConfirmPromptConfig.preset.dialog}
-        ${AlertConfirmPromptConfig.classDialog}
+        ${AlertConfirmPromptConfig.class.dialog}
         ${dialog?.class?.dialog || ""}
         ${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.dialog || ""}
     `);
 $:
   _iconClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.icon}
-		${AlertConfirmPromptConfig.classIcon}
+		${AlertConfirmPromptConfig.class.icon}
 		${dialog?.class?.icon || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.icon || ""}
 	`);
 $:
   _contentBlockClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.contentBlock}
-		${AlertConfirmPromptConfig.classContentBlock}
+		${AlertConfirmPromptConfig.class.contentBlock}
 		${dialog?.class?.contentBlock || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.contentBlock || ""}
 	`);
 $:
   _titleClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.title}
-		${AlertConfirmPromptConfig.classTitle}
+		${AlertConfirmPromptConfig.class.title}
 		${dialog?.class?.title || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.title || ""}
 	`);
 $:
   _contentClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.content}
-		${AlertConfirmPromptConfig.classContent}
+		${AlertConfirmPromptConfig.class.content}
 		${dialog?.class?.content || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.content || ""}
 	`);
 $:
   _inputBoxClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.inputBox}
-		${AlertConfirmPromptConfig.classInputBox}
+		${AlertConfirmPromptConfig.class.inputBox}
 		${dialog?.class?.inputBox || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.inputBox || ""}
 	`);
 $:
   _inputFieldClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.inputField}
-		${AlertConfirmPromptConfig.classInputField}
+		${AlertConfirmPromptConfig.class.inputField}
 		${dialog?.class?.inputField || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.inputField || ""}
 	`);
 $:
   _menuClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.menu}
-		${AlertConfirmPromptConfig.classMenu}
+		${AlertConfirmPromptConfig.class.menu}
 		${dialog?.class?.menu || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.menu || ""}
 	`);
@@ -260,14 +262,14 @@ $:
 $:
   _buttonClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.button}
-		${AlertConfirmPromptConfig.classButton}
+		${AlertConfirmPromptConfig.class.button}
 		${dialog?.class?.button || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.button || ""}
 	`);
 $:
   _spinnerBoxClass = twMerge(`
 		${AlertConfirmPromptConfig.preset.spinnerBox}
-		${AlertConfirmPromptConfig.classSpinnerBox}
+		${AlertConfirmPromptConfig.class.spinnerBox}
 		${dialog?.class?.spinnerBox || ""}
 		${AlertConfirmPromptConfig.variant?.[dialog?.variant]?.spinnerBox || ""}
 	`);

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

@@ -14,16 +14,18 @@ export declare class AlertConfirmPromptConfig {
         button: string;
         spinnerBox: string;
     };
-    static classDialog: string;
-    static classIcon: string;
-    static classTitle: string;
-    static classContentBlock: string;
-    static classContent: string;
-    static classInputBox: string;
-    static classInputField: string;
-    static classMenu: string;
-    static classButton: string;
-    static classSpinnerBox: string;
+    static class: {
+        dialog: string;
+        icon: string;
+        contentBlock: string;
+        title: string;
+        content: string;
+        inputBox: string;
+        inputField: string;
+        menu: string;
+        button: string;
+        spinnerBox: string;
+    };
     static variant: {
         info: {
             dialog: string;
@@ -81,7 +83,7 @@ export declare class AlertConfirmPromptConfig {
         error: undefined;
         spinner: undefined;
     };
-    static forceAsHtml: undefined;
+    static forceAsHtml: boolean | undefined;
 }
 declare const __propDef: {
     props: {

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

@@ -1,3 +1,4 @@
+export declare function iconFeatherAlertTriangle(props: any): string;
 export declare const acpDefaultIcons: {
     info: () => string;
     success: () => string;

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

@@ -1,23 +1,5 @@
 // taken from @marianmeres/icons-fns
-function iconFeatherAlertCircle(props) {
-    // Backward compatible signature support: fn(cls, size, style)
-    if (props === null || props === undefined)
-        props = {};
-    if (typeof props !== 'object')
-        props = { class: props || '' };
-    if (arguments.length > 1)
-        props.size ??= arguments[1];
-    if (arguments.length > 2)
-        props.style ??= arguments[2];
-    //
-    const { size, class: cls, style, strokeWidth } = props;
-    let attrs = Object.entries(props)
-        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
-        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
-        .join(' ');
-    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
-}
-function iconFeatherCheckCircle(props) {
+export function iconFeatherAlertTriangle(props) {
     // Backward compatible signature support: fn(cls, size, style)
     if (props === null || props === undefined)
         props = {};
@@ -33,9 +15,9 @@ function iconFeatherCheckCircle(props) {
         .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
         .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
         .join(' ');
-    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`;
 }
-function iconFeatherHelpCircle(props) {
+function iconFeatherAlertCircle(props) {
     // Backward compatible signature support: fn(cls, size, style)
     if (props === null || props === undefined)
         props = {};
@@ -51,9 +33,9 @@ function iconFeatherHelpCircle(props) {
         .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
         .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
         .join(' ');
-    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`;
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
 }
-function iconFeatherXCircle(props) {
+function iconFeatherCheckCircle(props) {
     // Backward compatible signature support: fn(cls, size, style)
     if (props === null || props === undefined)
         props = {};
@@ -69,7 +51,7 @@ function iconFeatherXCircle(props) {
         .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
         .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
         .join(' ');
-    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
 }
 function iconFeatherXOctagon(props) {
     // Backward compatible signature support: fn(cls, size, style)
@@ -128,7 +110,7 @@ function iconFeatherRotateCw(props) {
 export const acpDefaultIcons = {
     info: () => iconFeatherInfo({}),
     success: () => iconFeatherCheckCircle({}),
-    warn: () => iconFeatherAlertCircle({}),
+    warn: () => iconFeatherAlertTriangle({}),
     error: () => iconFeatherXOctagon({}),
     spinner: () => iconFeatherRotateCw({ size: 32, class: 'opacity-50' }),
 };

package/dist/components/Notifications/Notifications.svelte

@@ -0,0 +1,316 @@
+<script context="module">import { fade } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
+import Thc from "../Thc/Thc.svelte";
+import X from "../X/X.svelte";
+import { notificationsDefaultIcons } from "./notifications-icons.js";
+import { createClog } from "@marianmeres/clog";
+const X_POSITIONS = ["left", "center", "right"];
+const Y_POSITIONS = ["top", "center", "bottom"];
+const DEFAULT = {
+  posX: "center",
+  posXMobile: "center",
+  posY: "top",
+  posYMobile: "bottom"
+};
+const XMAP = { left: "sm:items-start", center: "sm:items-center", right: "sm:items-end" };
+const XMAP_M = { left: "items-start", center: "items-center", right: "items-end" };
+const YMAP = { top: "sm:items-start", center: "sm:items-center", bottom: "sm:items-end" };
+const YMAP_M = { top: "items-start", center: "items-center", bottom: "items-end" };
+export class NotificationsConfig {
+  static preset = {
+    wrap: `
+                fixed z-10
+            `,
+    wrapInner: `
+                p-4 space-y-4
+            `,
+    notification: {
+      box: `
+                    relative flex
+                    pointer-events-auto 
+                    w-full max-w-lg
+                    rounded-md
+                    shadow-lg
+                    bg-gray-700 text-white
+                `,
+      count: `
+                    absolute -top-2 -right-2 
+                    w-auto h-auto
+                    flex items-center justify-center
+                    px-2 py-1 rounded-full
+                    leading-none text-xs
+                    bg-black text-white
+                `,
+      icon: `
+                    flex items-start justify-center
+                    pt-4 pr-0 pb-4 pl-4
+                    text-gray-200
+                `,
+      content: `
+                    flex-1
+                    flex flex-col justify-center
+                    text-sm
+                    pl-4 pr-1 py-3
+                `,
+      button: `
+                    flex flex-col items-center justify-center
+                    leading-none
+                    px-3
+                    hover:bg-black/20
+                    group
+                    rounded-tr-md rounded-br-md
+                `,
+      x: `
+                    opacity-75 group-hover:opacity-100
+                `
+    }
+  };
+  static presetByType = {
+    info: {
+      box: ``,
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    },
+    success: {
+      box: ``,
+      // e.g. bg-green-800
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    },
+    warn: {
+      box: ``,
+      // e.g. bg-yellow-800
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    },
+    error: {
+      box: `bg-red-700`,
+      // e.g. bg-red-800
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    }
+  };
+  static class = {
+    wrap: "",
+    wrapInner: "",
+    notification: {
+      box: ``,
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    }
+  };
+  static classByType = {
+    info: {
+      box: ``,
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    },
+    success: {
+      box: ``,
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    },
+    warn: {
+      box: ``,
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    },
+    error: {
+      box: ``,
+      count: ``,
+      icon: ``,
+      content: ``,
+      button: ``,
+      x: ``
+    }
+  };
+  static iconFn = {
+    info: void 0,
+    success: void 0,
+    warn: void 0,
+    error: void 0
+  };
+  // conveniently hoisted THC option, since all content is rendered via THC
+  static forceAsHtml = void 0;
+}
+</script>
+
+<script>const clog = createClog("Notifications");
+export let notifications;
+let _class = "";
+export { _class as class };
+export let ariaCloseLabel = "Discard";
+export let posX = DEFAULT.posX;
+export let posXMobile = DEFAULT.posXMobile;
+export let posY = DEFAULT.posY;
+export let posYMobile = DEFAULT.posYMobile;
+let x, y, xMobile, yMobile;
+$:
+  x = X_POSITIONS.includes(posX) ? posX : DEFAULT.posX;
+$:
+  xMobile = X_POSITIONS.includes(posXMobile) ? posXMobile : DEFAULT.posXMobile;
+$:
+  y = Y_POSITIONS.includes(posY) ? posY : DEFAULT.posY;
+$:
+  yMobile = Y_POSITIONS.includes(posYMobile) ? posYMobile : DEFAULT.posYMobile;
+$:
+  _wrapClass = twMerge(`
+        ${NotificationsConfig.preset.wrap}
+        ${NotificationsConfig.class.wrap}
+        flex flex-row inset-0 
+        pointer-events-none bg-transparent
+        ${YMAP_M[yMobile]} ${YMAP[y]}
+    `);
+$:
+  _wrapInnerClass = twMerge(`
+        ${NotificationsConfig.preset.wrapInner}
+        ${NotificationsConfig.class.wrapInner}
+        flex flex-col w-full 
+        pointer-events-none bg-transparent
+        ${XMAP_M[xMobile]} ${XMAP[x]}
+    `);
+const _boxClass = (n) => twMerge(`
+            ${NotificationsConfig?.preset?.notification?.box}
+            ${NotificationsConfig?.class?.notification?.box}
+            ${NotificationsConfig?.presetByType?.[n.type]?.box || ""}
+            ${NotificationsConfig?.classByType?.[n.type]?.box || ""}
+            ${n.class?.box || ""}
+        `);
+const _countClass = (n) => twMerge(`
+            ${NotificationsConfig?.preset?.notification?.count}
+            ${NotificationsConfig?.class?.notification?.count}
+            ${NotificationsConfig?.presetByType?.[n.type]?.count || ""}
+            ${NotificationsConfig?.classByType?.[n.type]?.count || ""}
+            ${n.class?.count || ""}
+        `);
+const _iconClass = (n) => twMerge(`
+            ${NotificationsConfig?.preset?.notification?.icon}
+            ${NotificationsConfig?.class?.notification?.icon}
+            ${NotificationsConfig?.presetByType?.[n.type]?.icon || ""}
+            ${NotificationsConfig?.classByType?.[n.type]?.icon || ""}
+            ${n.class?.icon || ""}
+        `);
+const _contentClass = (n) => twMerge(`
+            ${NotificationsConfig?.preset?.notification?.content}
+            ${NotificationsConfig?.class?.notification?.content}
+            ${NotificationsConfig?.presetByType?.[n.type]?.content || ""}
+            ${NotificationsConfig?.classByType?.[n.type]?.content || ""}
+            ${n.class?.content || ""}
+        `);
+const _buttonClass = (n) => twMerge(`
+            ${NotificationsConfig?.preset?.notification?.button}
+            ${NotificationsConfig?.class?.notification?.button}
+            ${NotificationsConfig?.presetByType?.[n.type]?.button || ""}
+            ${NotificationsConfig?.classByType?.[n.type]?.button || ""}
+            ${n.class?.button || ""}
+        `);
+const _xClass = (n) => twMerge(`
+            ${NotificationsConfig?.preset?.notification?.x}
+            ${NotificationsConfig?.class?.notification?.x}
+            ${NotificationsConfig?.presetByType?.[n.type]?.x || ""}
+            ${NotificationsConfig?.classByType?.[n.type]?.x || ""}
+            ${n.class?.x || ""}
+        `);
+const _iconFn = (n) => {
+  let iconFn = false;
+  if (n?.iconFn === true) {
+    iconFn = // either runtime config
+    NotificationsConfig.iconFn[n?.type] || // or fixed default
+    notificationsDefaultIcons[n?.type];
+  } else if (n?.iconFn) {
+    iconFn = n.iconFn;
+  } else {
+    iconFn = false;
+  }
+  return iconFn;
+};
+const _isFn = (v) => typeof v === "function";
+</script>
+
+<!-- {#if $notifications.length} -->
+<div class={_wrapClass} aria-live="assertive">
+	<div class={_wrapInnerClass}>
+		{#if $notifications.length}
+			{#each $notifications as n}
+				{@const iconFn = _iconFn(n)}
+				<!-- use your own component -->
+				{#if n?.component}
+					<svelte:component
+						this={n.component.component || n.component}
+						{...n.component.props || {}}
+						notification={n}
+						{notifications}
+					/>
+				{:else}
+					<!-- svelte-ignore 
+                            a11y-click-events-have-key-events 
+                            a11y-no-noninteractive-element-interactions 
+                            a11y-mouse-events-have-key-events -->
+					<div
+						transition:fade|global={{ duration: 200 }}
+						class={_boxClass(n)}
+						class:cursor-pointer={typeof n.onClick === 'function'}
+						data-notification-type={n.type}
+						data-notification-multiple={n.count > 1 ? true : undefined}
+						role="alert"
+						on:mouseover={() => notifications.event(n.id, notifications.EVENT.MOUSEOVER)}
+						on:mouseout={() => notifications.event(n.id, notifications.EVENT.MOUSEOUT)}
+						on:click={() => notifications.event(n.id, notifications.EVENT.CLICK)}
+					>
+						{#if n.count > 1}
+							<div class={_countClass(n)}>
+								{n.count}
+							</div>
+						{/if}
+
+						{#if _isFn(iconFn)}
+							<div class={_iconClass(n)}>{@html iconFn()}</div>
+						{/if}
+
+						<div class={_contentClass(n)}>
+							<Thc
+								thc={n.content}
+								forceAsHtml={n.forceAsHtml ?? NotificationsConfig.forceAsHtml}
+								notification={n}
+								{notifications}
+							/>
+						</div>
+
+						<button
+							class={_buttonClass(n)}
+							aria-label={ariaCloseLabel}
+							on:click|preventDefault|stopPropagation={() => notifications.remove(n.id)}
+						>
+							<X class={_xClass(n)} />
+						</button>
+					</div>
+				{/if}
+			{/each}
+		{/if}
+	</div>
+</div>
+<!-- {/if} -->

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

@@ -0,0 +1,61 @@
+import { SvelteComponent } from "svelte";
+import type { NotificationType, createNotificationsStore } from './notifications.js';
+interface NotifClasses {
+    box: string;
+    count: string;
+    icon: string;
+    content: string;
+    button: string;
+    x: string;
+}
+export declare class NotificationsConfig {
+    static preset: {
+        wrap: string;
+        wrapInner: string;
+        notification: {
+            box: string;
+            count: string;
+            icon: string;
+            content: string;
+            button: string;
+            x: string;
+        };
+    };
+    static presetByType: Record<NotificationType, NotifClasses>;
+    static class: {
+        wrap: string;
+        wrapInner: string;
+        notification: {
+            box: string;
+            count: string;
+            icon: string;
+            content: string;
+            button: string;
+            x: string;
+        };
+    };
+    static classByType: Record<NotificationType, NotifClasses>;
+    static iconFn: Record<NotificationType, undefined | (() => string)>;
+    static forceAsHtml: boolean | undefined;
+}
+declare const __propDef: {
+    props: {
+        notifications: ReturnType<typeof createNotificationsStore>;
+        class?: string | undefined;
+        ariaCloseLabel?: string | undefined;
+        posX?: "center" | "left" | "right" | undefined;
+        posXMobile?: "center" | "left" | "right" | undefined;
+        posY?: "center" | "top" | "bottom" | undefined;
+        posYMobile?: "center" | "top" | "bottom" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NotificationsProps = typeof __propDef.props;
+export type NotificationsEvents = typeof __propDef.events;
+export type NotificationsSlots = typeof __propDef.slots;
+export default class Notifications extends SvelteComponent<NotificationsProps, NotificationsEvents, NotificationsSlots> {
+}
+export {};

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

@@ -0,0 +1,3 @@
+import type { NotificationType } from './notifications.js';
+export declare function iconFeatherAlertTriangle(props: any): string;
+export declare const notificationsDefaultIcons: Record<NotificationType, () => string>;

package/dist/components/Notifications/notifications-icons.js

@@ -0,0 +1,115 @@
+// taken from @marianmeres/icons-fns
+export function iconFeatherAlertTriangle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`;
+}
+function iconFeatherAlertCircle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
+}
+function iconFeatherCheckCircle(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
+}
+function iconFeatherXOctagon(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;
+}
+function iconFeatherInfo(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`;
+}
+function iconFeatherRotateCw(props) {
+    // Backward compatible signature support: fn(cls, size, style)
+    if (props === null || props === undefined)
+        props = {};
+    if (typeof props !== 'object')
+        props = { class: props || '' };
+    if (arguments.length > 1)
+        props.size ??= arguments[1];
+    if (arguments.length > 2)
+        props.style ??= arguments[2];
+    //
+    const { size, class: cls, style, strokeWidth } = props;
+    let attrs = Object.entries(props)
+        .filter(([k, v]) => !/^class|size|style|strokeWidth$/.test(k))
+        .reduce((m, [k, v]) => [...m, `${k}="${v}"`], [])
+        .join(' ');
+    return `<svg ${style ? `style="${style}" ` : ''}${cls ? `class="${cls}" ` : ''}width="${size || 24}" height="${size || 24}" stroke-width="${strokeWidth ?? 2}" ${attrs ? `${attrs} ` : ''}viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>`;
+}
+export const notificationsDefaultIcons = {
+    info: () => iconFeatherInfo({}),
+    success: () => iconFeatherCheckCircle({}),
+    warn: () => iconFeatherAlertTriangle({}),
+    error: () => iconFeatherXOctagon({}),
+};

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

@@ -0,0 +1,79 @@
+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 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<{
+        box: string;
+        count: string;
+        icon: string;
+        content: string;
+        button: string;
+        x: string;
+    }>;
+    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;
+    defaultIcons?: Record<NotificationType, () => string> | boolean;
+    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;
+        defaultIcons?: boolean | Record<string, () => string> | 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

@@ -0,0 +1,225 @@
+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',
+    defaultIcons: true,
+    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 notif = typeof notification === 'string' ? { id: 0, content: notification } : notification;
+        // ignore invalid (empty) notifs
+        if (!notif.content) {
+            _log(`WARN: ignoring empty notification`);
+            return null;
+        }
+        notif.type ||= opts.defaultType; //
+        notif.id ||= _id(notif.type, [notif.content].join());
+        notif.created = new Date(notif.created || Date.now());
+        notif.count ??= 1;
+        //
+        if (notif.ttl === undefined)
+            notif.ttl = opts.defaultTtl;
+        //
+        if (notif.iconFn === undefined) {
+            if (typeof opts.defaultIcons === 'boolean') {
+                notif.iconFn = opts.defaultIcons;
+            }
+            else {
+                notif.iconFn = opts.defaultIcons?.[notif.type];
+            }
+        }
+        return notif;
+    };
+    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/Switch/Switch.svelte

@@ -11,8 +11,8 @@ export class SwitchConfig {
 			hover:brightness-[1.05] active:brightness-[0.95]
 			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
 
-			bg-zinc-300 dark:bg-zinc-700
-			data-[checked=true]:bg-zinc-700 dark:data-[checked=true]:bg-zinc-300
+			bg-gray-400 dark:bg-gray-400
+			data-[checked=true]:bg-stuic-primary dark:data-[checked=true]:bg-stuic-primary
 		`.trim();
   static presetsSize = {
     xs: "h-4 w-7",
@@ -30,8 +30,8 @@ export class SwitchConfig {
 			translate-x-1 rounded-full  
 			transition-all duration-100
 			shadow
-			bg-white dark:bg-black
-			text-black dark:text-white
+			bg-white dark:bg-white
+			text-black dark:text-black
 		`.trim();
   static presetsSizeDot = {
     // size + translate-x = width

package/dist/components/Thc/Thc.svelte

@@ -11,7 +11,7 @@ export let thc;
 {:else if thc?.html}
 	{@html thc.html}
 {:else if thc?.component}
-	<svelte:component this={thc.component} {...thc?.props || {}} />
+	<svelte:component this={thc.component} {...thc?.props || {}} {...$$restProps || {}} />
 {:else}
 	<!-- cast to string as the last resort -->
 	{thc}

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

@@ -12,6 +12,7 @@ interface WithHtml {
 export type THC = string | WithText | WithHtml | WithComponent;
 declare const __propDef: {
     props: {
+        [x: string]: any;
         forceAsHtml?: boolean | undefined;
         thc: THC;
     };

package/dist/components/X/X.svelte

@@ -1,16 +1,15 @@
 <script>import { twMerge } from "tailwind-merge";
 let _class = "";
 export { _class as class };
-export let size = "1rem";
+export let strokeWidth = 2;
 </script>
 
 <svg
 	fill="none"
 	viewBox="0 0 24 24"
-	stroke-width="1.5"
+	stroke-width={strokeWidth}
 	stroke="currentColor"
-	style="width:{size};height:{size};"
-	class={twMerge(`inline ${_class}`)}
+	class={twMerge(`inline size-6 ${_class}`)}
 >
 	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 </svg>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         class?: string | undefined;
-        size?: string | undefined;
+        strokeWidth?: 1 | 2 | 3 | 4 | 1.5 | 2.5 | 3.5 | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export { default as FieldCheckbox } from './components/Input/FieldCheckbox.svelt
 export { default as FieldRadios } from './components/Input/FieldRadios.svelte';
 export { default as FieldSelect } from './components/Input/FieldSelect.svelte';
 export { default as Fieldset } from './components/Input/Fieldset.svelte';
+export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, } from './components/Notifications/notifications.js';
+export { default as Notifications } from './components/Notifications/Notifications.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';
 export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';
 export { default as Thc } from './components/Thc/Thc.svelte';

package/dist/index.js

@@ -23,6 +23,9 @@ export { default as FieldRadios } from './components/Input/FieldRadios.svelte';
 export { default as FieldSelect } from './components/Input/FieldSelect.svelte';
 export { default as Fieldset } from './components/Input/Fieldset.svelte';
 //
+export { createNotificationsStore, NOTIFICATION_EVENT, } from './components/Notifications/notifications.js';
+export { default as Notifications } from './components/Notifications/Notifications.svelte';
+//
 export { default as Popover } from './components/Popover/Popover.svelte';
 //
 export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.32.0",
+	"version": "1.34.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",
@@ -65,6 +65,7 @@
 		"@marianmeres/clog": "^1.0.1",
 		"@marianmeres/store": "^1.5.0",
 		"@marianmeres/switch-store": "^1.3.1",
+		"@marianmeres/ticker": "^1.5.0",
 		"esm-env": "^1.0.0",
 		"tailwind-merge": "^2.1.0"
 	}