@marianmeres/stuic 1.72.0 → 1.73.0

package/dist/actions/focus-trap.js

@@ -85,7 +85,8 @@ export function focusTrap(node, options = {}) {
     // Lifecycle
     return {
         update(options = {}) {
-            options?.enabled ? queryElements(false) : cleanup();
+            enabled = !!options?.enabled;
+            enabled ? queryElements(false) : cleanup();
         },
         destroy() {
             cleanup();

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -0,0 +1,52 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { focusTrap } from "../../actions/focus-trap.js";
+const dispatch = createEventDispatcher();
+export let openOnMount = false;
+export let closeOnOutsideClick = true;
+export let closeOnEscape = true;
+let _class = "";
+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;
+$:
+  _open ? _el?.showModal() : _el?.close();
+$:
+  dispatch(_open ? "open" : "close");
+export let isOpen = _open;
+$:
+  isOpen = _open;
+onMount(() => {
+  const _unsubs = [];
+  const _handleClose = (e) => doClose();
+  _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();
+  document.addEventListener("keydown", _handleKeyDown, true);
+  _unsubs.push(() => document.removeEventListener("keydown", _handleKeyDown, true));
+  const _handleClick = (e) => {
+    closeOnOutsideClick && /dialog/i.test(e.target?.tagName) && doClose();
+  };
+  _el.addEventListener("click", _handleClick);
+  _unsubs.push(() => _el.removeEventListener("click", _handleClick));
+  return () => _unsubs.forEach((fn) => fn());
+});
+</script>
+
+<!-- 
+    NOTE: the below padding:0 is important because of otherwise not-trivial onOutsideClick implementation
+-->
+<dialog
+	bind:this={_el}
+	use:focusTrap={{ enabled: _open }}
+	style="{style ? `${style}; ` : ''}padding: 0 !important;"
+	class={_class}
+>
+	<slot />
+</dialog>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openOnMount?: boolean | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        closeOnEscape?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        doToggle?: (() => boolean) | undefined;
+        doOpen?: (() => boolean) | undefined;
+        doClose?: (() => boolean) | undefined;
+        isOpen?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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;
+}
+export {};

package/dist/index.d.ts

@@ -14,6 +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 { 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,6 +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 { 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.72.0",
+	"version": "1.73.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",