@marianmeres/stuic 1.73.0 → 1.75.0

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -1,6 +1,9 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
+<script context="module">import { createEventDispatcher, onMount } from "svelte";
 import { focusTrap } from "../../actions/focus-trap.js";
-const dispatch = createEventDispatcher();
+import { writable } from "svelte/store";
+</script>
+
+<script>const dispatch = createEventDispatcher();
 export let openOnMount = false;
 export let closeOnOutsideClick = true;
 export let closeOnEscape = true;
@@ -9,29 +12,35 @@ export { _class as class };
 export let style = "";
 let _el;
 let _open = !!openOnMount;
-export const doToggle = () => _open = !_open;
-export const doOpen = () => _open = true;
-export const doClose = () => _open = false;
+export function toggle() {
+  _open = !_open;
+}
+export function open() {
+  _open = true;
+}
+export function close() {
+  _open = false;
+}
 $:
   _open ? _el?.showModal() : _el?.close();
 $:
   dispatch(_open ? "open" : "close");
-export let isOpen = _open;
+export const isOpen = writable(_open);
 $:
-  isOpen = _open;
+  $isOpen = _open;
 onMount(() => {
   const _unsubs = [];
-  const _handleClose = (e) => doClose();
+  const _handleClose = (e) => close();
   _el.addEventListener("close", _handleClose);
   _unsubs.push(() => _el.removeEventListener("close", _handleClose));
   const _handleCancel = (e) => e.preventDefault();
   _el.addEventListener("cancel", _handleCancel);
   _unsubs.push(() => _el.removeEventListener("cancel", _handleCancel));
-  const _handleKeyDown = (e) => closeOnEscape && e.key === "Escape" && doClose();
+  const _handleKeyDown = (e) => closeOnEscape && e.key === "Escape" && close();
   document.addEventListener("keydown", _handleKeyDown, true);
   _unsubs.push(() => document.removeEventListener("keydown", _handleKeyDown, true));
   const _handleClick = (e) => {
-    closeOnOutsideClick && /dialog/i.test(e.target?.tagName) && doClose();
+    closeOnOutsideClick && /dialog/i.test(e.target?.tagName) && close();
   };
   _el.addEventListener("click", _handleClick);
   _unsubs.push(() => _el.removeEventListener("click", _handleClick));

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

@@ -1,4 +1,10 @@
 import { SvelteComponent } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface ModalDialogAPI {
+    open: () => void;
+    close: () => void;
+    isOpen: Writable<boolean>;
+}
 declare const __propDef: {
     props: {
         openOnMount?: boolean | undefined;
@@ -6,10 +12,10 @@ declare const __propDef: {
         closeOnEscape?: boolean | undefined;
         class?: string | undefined;
         style?: string | undefined;
-        doToggle?: (() => boolean) | undefined;
-        doOpen?: (() => boolean) | undefined;
-        doClose?: (() => boolean) | undefined;
-        isOpen?: boolean | undefined;
+        toggle?: (() => void) | undefined;
+        open?: (() => void) | undefined;
+        close?: (() => void) | undefined;
+        isOpen?: Writable<boolean> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,8 +28,9 @@ export type ModalDialogProps = typeof __propDef.props;
 export type ModalDialogEvents = typeof __propDef.events;
 export type ModalDialogSlots = typeof __propDef.slots;
 export default class ModalDialog extends SvelteComponent<ModalDialogProps, ModalDialogEvents, ModalDialogSlots> {
-    get doToggle(): () => boolean;
-    get doOpen(): () => boolean;
-    get doClose(): () => boolean;
+    get toggle(): () => void;
+    get open(): () => void;
+    get close(): () => void;
+    get isOpen(): Writable<boolean>;
 }
 export {};

package/dist/components/Notifications/Notifications.svelte

@@ -4,6 +4,7 @@ import { twMerge } from "tailwind-merge";
 import Thc from "../Thc/Thc.svelte";
 import X from "../X/X.svelte";
 import { notificationsDefaultIcons } from "./notifications-icons.js";
+import { disableScrollHandling } from "$app/navigation";
 const X_POSITIONS = ["left", "center", "right"];
 const Y_POSITIONS = ["top", "center", "bottom"];
 const DEFAULT = {
@@ -129,64 +130,67 @@ const _iconFn = (o) => o.iconFn ?? defaultIcons?.[o.type];
 const _isFn = (v) => typeof v === "function";
 </script>
 
-<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 
+{#if $notifications.length}
+	<dialog open>
+		<div class={_wrapClass}>
+			<div class={_wrapInnerClass}>
+				{#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}
+						<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}
+							{#if _isFn(iconFn)}
+								<div class={_iconClass(n)}>{@html iconFn()}</div>
+							{/if}
 
-						<div class={_contentClass(n)}>
-							<Thc
-								thc={n.content}
-								forceAsHtml={n.forceAsHtml ?? forceAsHtml}
-								notification={n}
-								{notifications}
-							/>
-						</div>
+							<div class={_contentClass(n)}>
+								<Thc
+									thc={n.content}
+									forceAsHtml={n.forceAsHtml ?? 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>
+							<button
+								class={_buttonClass(n)}
+								aria-label={ariaCloseLabel}
+								on:click|preventDefault|stopPropagation={() => notifications.remove(n.id)}
+							>
+								<X class={_xClass(n)} />
+							</button>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</dialog>
+{/if}

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { default as FieldCheckbox, FieldCheckboxConfig, type FieldCheckboxConfig
 export { default as FieldRadios, FieldRadiosConfig, type FieldRadiosConfigClasses, type FieldRadiosConfigClassesBySize, } from './components/Input/FieldRadios.svelte';
 export { default as FieldSelect, FieldSelectConfig, type FieldSelectConfigClasses, type FieldSelectConfigClassesBySize, } from './components/Input/FieldSelect.svelte';
 export { default as Fieldset, FieldsetConfig, type FieldsetConfigClasses, } from './components/Input/Fieldset.svelte';
-export { default as ModalDialog } from './components/ModalDialog/ModalDialog.svelte';
+export { default as ModalDialog, type ModalDialogAPI, } from './components/ModalDialog/ModalDialog.svelte';
 export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, type NotificationKnownClasses, } from './components/Notifications/notifications.js';
 export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';

package/dist/index.js

@@ -24,7 +24,7 @@ export { default as FieldCheckbox, FieldCheckboxConfig, } from './components/Inp
 export { default as FieldRadios, FieldRadiosConfig, } from './components/Input/FieldRadios.svelte';
 export { default as FieldSelect, FieldSelectConfig, } from './components/Input/FieldSelect.svelte';
 export { default as Fieldset, FieldsetConfig, } from './components/Input/Fieldset.svelte';
-export { default as ModalDialog } from './components/ModalDialog/ModalDialog.svelte';
+export { default as ModalDialog, } from './components/ModalDialog/ModalDialog.svelte';
 //
 export { createNotificationsStore, NOTIFICATION_EVENT, } from './components/Notifications/notifications.js';
 export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';

package/package.json

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