@marianmeres/stuic 1.75.0 → 1.77.0

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -6,8 +6,10 @@ import {
   Button,
   Field,
   FieldSelect,
+  Notifications,
   Thc,
   createAlertConfirmPromptStore,
+  createNotificationsStore,
   focusTrap
 } from "../../index.js";
 import { acpDefaultIcons } from "./acp-icons.js";
@@ -72,6 +74,8 @@ const _isFn = (v) => typeof v === "function";
 
 <script>const { ALERT, CONFIRM, PROMPT } = AlertConfirmPromptType;
 const clog = createClog("AlertConfirmPrompt");
+export let notifications = void 0;
+export let notificationsPositionConfig = {};
 export let acp;
 export let forceAsHtml = void 0;
 export let defaultIcons = acpDefaultIcons;
@@ -334,6 +338,10 @@ $:
 			{/if}
 		</form>
 	{/if}
+
+	{#if notifications}
+		<Notifications {notifications} {...notificationsPositionConfig || {}} />
+	{/if}
 </dialog>
 
 <style>@keyframes -global-rotating-cw {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { createAlertConfirmPromptStore } from '../../index.js';
+import { createAlertConfirmPromptStore, createNotificationsStore, type NOTIFICATIONS_POSX, type NOTIFICATIONS_POSY } from '../../index.js';
 import type { AlertConfirmPromptKnownClasses, AlertConfirmPromptVariant } from './alert-confirm-prompt.js';
 export interface AlertConfirmPromptIcons extends Record<AlertConfirmPromptVariant, () => string> {
     spinner: () => string;
@@ -71,6 +71,13 @@ export declare class AlertConfirmPromptConfig {
 }
 declare const __propDef: {
     props: {
+        notifications?: ReturnType<typeof createNotificationsStore> | undefined;
+        notificationsPositionConfig?: Partial<{
+            posX: NOTIFICATIONS_POSX;
+            posXMobile: NOTIFICATIONS_POSX;
+            posY: NOTIFICATIONS_POSY;
+            posYMobile: NOTIFICATIONS_POSY;
+        }> | undefined;
         acp: ReturnType<typeof createAlertConfirmPromptStore>;
         forceAsHtml?: boolean | undefined;
         defaultIcons?: Partial<AlertConfirmPromptIcons> | undefined;

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

@@ -4,7 +4,7 @@ export declare const createDrawerStore: (open?: boolean) => import("@marianmeres
 declare const __propDef: {
     props: {
         drawer: import("@marianmeres/switch-store").SwitchStore<any>;
-        position?: "left" | "top" | "right" | "bottom" | undefined;
+        position?: "left" | "right" | "top" | "bottom" | undefined;
         class?: string | undefined;
         backdropClass?: string | undefined;
         labelledby?: string | undefined;

package/dist/components/Notifications/Notifications.svelte

@@ -4,7 +4,6 @@ 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 = {
@@ -89,6 +88,14 @@ export let posXMobile = DEFAULT.posXMobile;
 export let posY = DEFAULT.posY;
 export let posYMobile = DEFAULT.posYMobile;
 let x, y, xMobile, yMobile;
+export function getPositionConfig() {
+  return {
+    posX: x,
+    posY: y,
+    posXMobile: xMobile,
+    posYMobile: yMobile
+  };
+}
 $:
   x = X_POSITIONS.includes(posX) ? posX : DEFAULT.posX;
 $:
@@ -131,66 +138,63 @@ const _isFn = (v) => typeof v === "function";
 </script>
 
 {#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 
+	<div class={_wrapClass} aria-live="assertive">
+		<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}
-
-							{#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
+						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}
 
-							<button
-								class={_buttonClass(n)}
-								aria-label={ariaCloseLabel}
-								on:click|preventDefault|stopPropagation={() => notifications.remove(n.id)}
-							>
-								<X class={_xClass(n)} />
-							</button>
+						<div class={_contentClass(n)}>
+							<Thc
+								thc={n.content}
+								forceAsHtml={n.forceAsHtml ?? forceAsHtml}
+								notification={n}
+								{notifications}
+							/>
 						</div>
-					{/if}
-				{/each}
-			</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>
-	</dialog>
+	</div>
 {/if}

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

@@ -1,5 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { NotificationKnownClasses, NotificationType, createNotificationsStore } from './notifications.js';
+declare const X_POSITIONS: readonly ["left", "center", "right"];
+declare const Y_POSITIONS: readonly ["top", "center", "bottom"];
+type ArrayElement<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ArrayElement> ? ArrayElement : never;
+export type NOTIFICATIONS_POSX = ArrayElement<typeof X_POSITIONS>;
+export type NOTIFICATIONS_POSY = ArrayElement<typeof Y_POSITIONS>;
 export declare class NotificationsConfig {
     static preset: {
         wrap: string;
@@ -23,10 +28,16 @@ declare const __propDef: {
         classes?: Partial<NotificationKnownClasses> | undefined;
         classesByType?: Partial<Record<string, Partial<NotificationKnownClasses>>> | undefined;
         ariaCloseLabel?: string | undefined;
-        posX?: "center" | "left" | "right" | undefined;
-        posXMobile?: "center" | "left" | "right" | undefined;
+        posX?: "left" | "center" | "right" | undefined;
+        posXMobile?: "left" | "center" | "right" | undefined;
         posY?: "center" | "top" | "bottom" | undefined;
         posYMobile?: "center" | "top" | "bottom" | undefined;
+        getPositionConfig?: (() => {
+            posX: "left" | "center" | "right";
+            posY: "center" | "top" | "bottom";
+            posXMobile: "left" | "center" | "right";
+            posYMobile: "center" | "top" | "bottom";
+        }) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -37,5 +48,11 @@ 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> {
+    get getPositionConfig(): () => {
+        posX: "left" | "center" | "right";
+        posY: "center" | "top" | "bottom";
+        posXMobile: "left" | "center" | "right";
+        posYMobile: "center" | "top" | "bottom";
+    };
 }
 export {};

package/dist/index.d.ts

@@ -16,7 +16,7 @@ export { default as FieldSelect, FieldSelectConfig, type FieldSelectConfigClasse
 export { default as Fieldset, FieldsetConfig, type FieldsetConfigClasses, } from './components/Input/Fieldset.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 Notifications, NotificationsConfig, type NOTIFICATIONS_POSX, type NOTIFICATIONS_POSY, } from './components/Notifications/Notifications.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';
 export { default as Switch, SwitchConfig, type SwitchPreHook, } from './components/Switch/Switch.svelte';
 export { default as Thc, type THC, isTHCNotEmpty } from './components/Thc/Thc.svelte';

package/package.json

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