@marianmeres/stuic 1.47.0 → 1.49.0

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -1,15 +1,8 @@
-<script>import { slide } from "svelte/transition";
+<script context="module">import { slide } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
-import { Thc, X } from "../../index.js";
-let _class = "";
-export { _class as class };
-export let classContent = "";
-export let classDismiss = "";
-export let duration = 150;
-export let message;
-export let onDismiss = () => message = null;
-export let theme = "primary";
-const preset = {
+import { Thc, X, isTHCNotEmpty } from "../../index.js";
+import { tick } from "svelte";
+const themes = {
   primary: "bg-stuic-primary/10   text-stuic-primary   dark:bg-stuic-primary   dark:text-white/90",
   secondary: "bg-stuic-secondary/10 text-stuic-secondary dark:bg-stuic-secondary dark:text-white/90",
   slate: "bg-slate-100          text-slate-800       dark:bg-slate-700       dark:text-slate-100",
@@ -35,32 +28,69 @@ const preset = {
   pink: "bg-pink-100           text-pink-800        dark:bg-pink-800        dark:text-pink-100",
   rose: "bg-rose-100           text-rose-800        dark:bg-rose-800        dark:text-rose-100"
 };
+export class DismissibleMessageConfig {
+  static preset = {
+    box: `mb-4 rounded flex text-sm`,
+    content: `flex-1 px-4 py-3`,
+    dismiss: `
+                hover:bg-black/5 dark:hover:bg-black/20
+                rounded rounded-l-none
+                px-3
+                flex items-center justify-center
+                group
+            `
+  };
+  static class = {
+    box: ``,
+    content: ``,
+    dismiss: ``
+  };
+}
+</script>
+
+<script>let _class = "";
+export { _class as class };
+export let classContent = "";
+export let classDismiss = "";
+export let duration = 150;
+export let message;
+export let onDismiss = () => message = "";
+export let theme = "primary";
+let show = false;
+$:
+  if (isTHCNotEmpty(message)) {
+    requestAnimationFrame(() => show = true);
+  }
 </script>
 
-{#if message}
+<!-- {#if isNotEmpty(message)} -->
+{#if show}
 	<div
-		class={twMerge(`
-			mb-4 rounded flex
-            text-sm
-			${preset[theme] ?? preset.primary} 
-			${_class}
-		`)}
+		class={twMerge(
+			DismissibleMessageConfig.preset.box,
+			DismissibleMessageConfig.class.box,
+			themes[theme] ?? themes.primary,
+			_class
+		)}
 		transition:slide={{ duration }}
 	>
-		<div class={twMerge(`flex-1 px-4 py-3 ${classContent}`)}>
+		<div
+			class={twMerge(
+				DismissibleMessageConfig.preset.content,
+				DismissibleMessageConfig.class.content,
+				classContent
+			)}
+		>
 			<Thc thc={message} />
 		</div>
 
 		{#if typeof onDismiss === 'function'}
 			<button
-				class={twMerge(`
-					hover:bg-black/5 dark:hover:bg-black/20
-					rounded rounded-l-none
-					px-3
-					flex items-center justify-center
-					group
-                    ${classDismiss}
-                `)}
+				class={twMerge(
+					DismissibleMessageConfig.preset.dismiss,
+					DismissibleMessageConfig.class.dismiss,
+					classDismiss
+				)}
 				on:click={() => onDismiss()}
 			>
 				<X class="opacity-75 group-hover:opacity-100" strokeWidth={1.5} />

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

@@ -1,13 +1,25 @@
 import { SvelteComponent } from "svelte";
 import { type THC, type TW_COLORS } from '../../index.js';
+export declare class DismissibleMessageConfig {
+    static preset: {
+        box: string;
+        content: string;
+        dismiss: string;
+    };
+    static class: {
+        box: string;
+        content: string;
+        dismiss: string;
+    };
+}
 declare const __propDef: {
     props: {
         class?: string | undefined;
         classContent?: string | undefined;
         classDismiss?: string | undefined;
         duration?: number | undefined;
-        message: THC | null;
-        onDismiss?: (() => void) | null | undefined;
+        message: THC;
+        onDismiss?: false | (() => void) | null | undefined;
         theme?: "primary" | TW_COLORS | "secondary" | undefined;
     };
     events: {

package/dist/components/Thc/Thc.svelte

@@ -1,4 +1,6 @@
-<script context="module"></script>
+<script context="module">const _is = (m) => typeof m === "string" && m;
+export const isTHCNotEmpty = (m) => _is(m) || _is(m?.text) || _is(m?.html) || m?.component;
+</script>
 
 <script>export let forceAsHtml = false;
 export let thc;

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

@@ -10,6 +10,7 @@ interface WithHtml {
     html: string;
 }
 export type THC = string | WithText | WithHtml | WithComponent;
+export declare const isTHCNotEmpty: (m: any) => any;
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default as Button, ButtonConfig } from './components/Button/Button.svel
 export { default as SystemAwareColorScheme } from './components/ColorScheme/SystemAwareColorScheme.svelte';
 export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
 export { ColorScheme } from './components/ColorScheme/color-scheme.js';
-export { default as DismissibleMessage } from './components/DismissibleMessage/DismissibleMessage.svelte';
+export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 export { default as Field } from './components/Input/Field.svelte';
@@ -18,7 +18,7 @@ export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateS
 export { default as Notifications, NotificationsConfig, } 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, type THC } from './components/Thc/Thc.svelte';
+export { default as Thc, type THC, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 export { default as X } from './components/X/X.svelte';
 export { focusTrap } from './actions/focus-trap.js';
 export { onOutside } from './actions/on-outside.js';

package/dist/index.js

@@ -13,7 +13,7 @@ export { default as SystemAwareColorScheme } from './components/ColorScheme/Syst
 export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
 export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 //
-export { default as DismissibleMessage } from './components/DismissibleMessage/DismissibleMessage.svelte';
+export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
 //
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 //
@@ -31,7 +31,7 @@ export { default as Notifications, NotificationsConfig, } from './components/Not
 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';
+export { default as Thc, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 //
 export { default as X } from './components/X/X.svelte';
 // actions

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.47.0",
+	"version": "1.49.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",