@marianmeres/stuic 1.37.0 → 1.39.0

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

@@ -39,7 +39,7 @@ export interface AlertConfirmPromptOptions extends Record<string, any> {
     }>;
     forceAsHtml?: boolean;
 }
-export declare const createAlertConfirmPromptStore: () => {
+export declare const createAlertConfirmPromptStore: (defaults?: Partial<AlertConfirmPromptOptions>) => {
     subscribe: (cb: import("@marianmeres/store").Subscribe<AlertConfirmPromptOptions[]>) => import("@marianmeres/store").Unsubscribe;
     get: () => AlertConfirmPromptOptions[];
     push: (o: Partial<AlertConfirmPromptOptions>) => void;

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

@@ -1,5 +1,6 @@
 import { createStore } from '@marianmeres/store';
 import { createClog } from '@marianmeres/clog';
+import { dset as mergeDeep } from 'dset/merge';
 const clog = createClog('alert-confirm-prompt');
 // export class AlertConfirmPromptType {
 // 	static readonly ALERT: 'alert';
@@ -14,36 +15,42 @@ export var AlertConfirmPromptType;
 })(AlertConfirmPromptType || (AlertConfirmPromptType = {}));
 const isFn = (v) => typeof v === 'function';
 const ucf = (s) => `${s}`[0].toUpperCase() + `${s}`.slice(1);
-export const createAlertConfirmPromptStore = () => {
+export const createAlertConfirmPromptStore = (defaults) => {
     // fifo
     const _stack = createStore([]);
-    // defaults
-    const labelOk = 'OK';
-    const labelCancel = 'Cancel';
-    // optional 3rd button label
-    const labelCustom = undefined;
     const push = (o) => {
+        defaults ??= {};
+        o ??= {};
+        defaults = {
+            ...{
+                labelOk: 'OK',
+                labelCancel: 'Cancel',
+                iconFn: true,
+                title: ucf(o.type),
+            },
+            ...defaults,
+        };
         if (!isFn(o.onOk))
             o.onOk = shift;
         if (!isFn(o.onCancel))
             o.onCancel = shift;
         if (!isFn(o.onEscape))
             o.onEscape = shift;
-        if (o.labelOk === undefined)
-            o.labelOk = labelOk;
-        if (o.labelCancel === undefined)
-            o.labelCancel = labelCancel;
-        if (o.title === undefined)
-            o.title = ucf(o.type);
+        if (!isFn(o.onCustom))
+            o.onCustom = () => undefined;
+        o.labelOk ??= defaults.labelOk;
+        o.labelCancel ??= defaults.labelCancel;
+        o.title ??= defaults.title;
+        o.iconFn ??= defaults.iconFn;
+        o.forceAsHtml ??= defaults.forceAsHtml;
         // variant defaults to info
         if (!['info', 'success', 'warn', 'error'].includes(o?.variant)) {
             o.variant = 'info';
         }
-        if (o.iconFn === undefined)
-            o.iconFn = true; // will use default
-        // 3rd label may stay undefined
-        if (!isFn(o.onCustom))
-            o.onCustom = () => undefined;
+        if (defaults.class) {
+            o.class ??= {};
+            o.class = { ...defaults.class, ...o.class };
+        }
         //
         _stack.update((old) => [...old, o]);
     };

package/dist/components/AppShell/AppShell.svelte

@@ -98,7 +98,7 @@ $:
 			<header
 				bind:this={header}
 				data-shell="header"
-				class={twMerge(`flex-none z-10 ${headerClass}`)}
+				class={twMerge(`flex-none ${headerClass}`)}
 			>
 				<slot name="header" />
 			</header>

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -2,9 +2,9 @@
 import { createEventDispatcher } from "svelte";
 import { get } from "svelte/store";
 import { twMerge } from "tailwind-merge";
+import { DevicePointer } from "../../index.js";
 import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
 import { windowSize } from "../../utils/window-size.js";
-import { DevicePointer } from "../../index.js";
 const clog = createClog("HoverExpandableWidth");
 const dispatch = createEventDispatcher();
 export let enabled = DevicePointer.isFine;
@@ -15,8 +15,7 @@ export let delayIn = 400;
 export let delayOut = 100;
 let _class = "";
 export { _class as class };
-$:
-  _isExpanded = false;
+let _isExpanded = false;
 let _isShrinking = false;
 let _isExpanding = false;
 let el;
@@ -33,6 +32,7 @@ const _planDelayedExec = (_fn, _delay) => {
     _resetDelayTimer();
   }, _delay);
 };
+let box;
 const _expand = () => {
   if (!enabled)
     return;
@@ -40,22 +40,22 @@ const _expand = () => {
     return;
   _isExpanded = true;
   _isExpanding = true;
-  const box = el.getBoundingClientRect();
-  const w = get(windowSize);
+  box = el.getBoundingClientRect();
+  const win = get(windowSize);
   const pos = {
     top: box.top,
-    bottom: w.height - box.bottom,
+    bottom: win.height - box.bottom,
     left: box.left,
-    right: w.width - box.right
+    right: win.width - box.right
   };
   el.style.boxShadow = `16px 0 24px -16px rgb(0 0 0 / ${shadowOpacity})`;
-  el.style.zIndex = `1`;
   el.style.top = `${pos.top}px`;
   el.style.right = `${pos.right}px`;
   el.style.bottom = `${pos.bottom}px`;
   el.style.left = `${pos.left}px`;
   el.style.width = "auto";
   el.style.height = "auto";
+  el.style.zIndex = "1";
   setTimeout(
     () => _isExpanding = false,
     duration + 1e3 / 60 * 3
@@ -79,17 +79,18 @@ const _shrink = () => {
     return;
   _isExpanded = false;
   _isShrinking = true;
-  el.style.position = `static`;
-  el.style.zIndex = `auto`;
-  el.style.top = "auto";
-  el.style.right = "auto";
-  el.style.bottom = "auto";
-  el.style.left = "auto";
-  el.style.width = "100%";
-  el.style.height = "100%";
   el.style.boxShadow = "none";
+  el.style.width = `${box.width}px`;
   setTimeout(() => {
     _isShrinking = false;
+    el.style.position = `static`;
+    el.style.top = "auto";
+    el.style.right = "auto";
+    el.style.bottom = "auto";
+    el.style.left = "auto";
+    el.style.width = "100%";
+    el.style.height = "100%";
+    el.style.zIndex = "0";
     el.style.transitionProperty = "none";
   }, duration);
 };

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

@@ -36,7 +36,15 @@ export interface NotiticationsCreateStoreOptions {
     defaultTtl: number;
     sortOrder?: NotificationsSortOrder;
     defaultIcons?: Record<NotificationType, () => string> | boolean;
-    forceAsHtml: boolean | undefined;
+    forceAsHtml?: boolean | undefined;
+    class?: Partial<{
+        box: string;
+        count: string;
+        icon: string;
+        content: string;
+        button: string;
+        x: string;
+    }>;
     logger: (...v: any) => void;
 }
 export declare const NOTIFICATION_EVENT: {
@@ -61,6 +69,14 @@ export declare const createNotificationsStore: (initial?: NotificationCreatePara
         sortOrder?: NotificationsSortOrder | undefined;
         defaultIcons?: boolean | Record<string, () => string> | undefined;
         forceAsHtml?: boolean | undefined;
+        class?: Partial<{
+            box: string;
+            count: string;
+            icon: string;
+            content: string;
+            button: string;
+            x: string;
+        }> | undefined;
         logger?: ((...v: any) => void) | undefined;
     };
     EVENT: {

package/dist/components/Notifications/notifications.js

@@ -68,6 +68,10 @@ export const createNotificationsStore = (initial = [], opts = {}) => {
         notif.created = new Date(notif.created || Date.now());
         notif.count ??= 1;
         notif.forceAsHtml ??= opts.forceAsHtml;
+        if (opts.class) {
+            notif.class ??= {};
+            notif.class = { ...opts.class, ...notif.class };
+        }
         //
         if (notif.ttl === undefined)
             notif.ttl = opts.defaultTtl;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.37.0",
+	"version": "1.39.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",
@@ -66,7 +66,9 @@
 		"@marianmeres/store": "^1.5.0",
 		"@marianmeres/switch-store": "^1.3.1",
 		"@marianmeres/ticker": "^1.5.0",
+		"dset": "^3.1.3",
 		"esm-env": "^1.0.0",
+		"klona": "^2.0.6",
 		"tailwind-merge": "^2.1.0"
 	}
 }