@pajohns/flowbite-svelte 0.1.2 → 0.1.3

package/dist/modal/Modal.svelte

@@ -23,28 +23,74 @@
     footerClass,
     size = "md",
     placement,
-    class: className,
+    class: classNameProp,
     classes,
     transitionParams,
     transition = fade,
     fullscreen = false,
+    // Custom passm8 props
+    zIndexLayer,
+    toggle,
+    classDialog,
+    classBody,
+    classHeader,
+    classFooter,
+    className,
+    centered = false,
+    returnFocusAfterClose = true,
+    onclose,
+    onopen,
     ...restProps
   }: ModalProps = $props();
 
+  // Handle className alias for class
+  const resolvedClassName = $derived(classNameProp ?? className);
+
+  // Handle centered as alias for placement="center"
+  const resolvedPlacement = $derived(centered ? "center" : placement);
+
+  // Handle class aliases (classBody -> bodyClass, etc.)
+  const resolvedBodyClass = $derived(bodyClass ?? classBody);
+  const resolvedHeaderClass = $derived(headerClass ?? classHeader);
+  const resolvedFooterClass = $derived(footerClass ?? classFooter);
+
   warnThemeDeprecation(
     "Modal",
-    untrack(() => ({ headerClass, bodyClass, footerClass, closeBtnClass })),
+    untrack(() => ({ headerClass: resolvedHeaderClass, bodyClass: resolvedBodyClass, footerClass: resolvedFooterClass, closeBtnClass })),
     { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" }
   );
 
-  const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass });
+  const styling = $derived(classes ?? { header: resolvedHeaderClass, body: resolvedBodyClass, footer: resolvedFooterClass, close: closeBtnClass });
 
   const theme = $derived(getTheme("modal"));
 
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(transitionParams ?? paramsDefault);
 
-  const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
+  const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement: resolvedPlacement, size }));
+
+  // Z-index layer styling
+  const zIndexStyle = $derived(zIndexLayer ? `z-index: ${zIndexLayer * 10};` : undefined);
+
+  // Track open state changes for callbacks
+  let prevOpen = $state(open);
+  $effect(() => {
+    if (open !== prevOpen) {
+      if (open) {
+        onopen?.();
+      } else {
+        onclose?.();
+      }
+      prevOpen = open;
+    }
+  });
+
+  // Handle toggle prop - if provided, use it to close the modal
+  function handleCancel() {
+    if (toggle) {
+      toggle();
+    }
+  }
 </script>
 
 <Dialog
@@ -54,8 +100,10 @@
   transitionParams={paramsOptions}
   {classes}
   {permanent}
+  oncancel={toggle ? handleCancel : undefined}
   {...restProps}
-  class={base({ fullscreen, class: clsx(theme?.base, className) })}
+  class={base({ fullscreen, class: clsx(theme?.base, resolvedClassName, classDialog) })}
+  style={zIndexStyle}
 >
   {#if title || header}
     <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
@@ -103,5 +151,16 @@
 @prop transitionParams
 @prop transition = fade
 @prop fullscreen = false
+@prop zIndexLayer - Controls z-index layering (multiplied by 10)
+@prop toggle - Function to toggle modal open/close state
+@prop classDialog - Additional class for the dialog element
+@prop classBody - Alias for bodyClass
+@prop classHeader - Alias for headerClass
+@prop classFooter - Alias for footerClass
+@prop className - Alias for class
+@prop centered - Shorthand for placement="center"
+@prop returnFocusAfterClose - Whether to return focus after close (default: true)
+@prop onclose - Callback when modal closes
+@prop onopen - Callback when modal opens
 @prop ...restProps
 -->

package/dist/modal/Modal.svelte.d.ts

@@ -22,6 +22,17 @@ import type { ModalProps } from "..";
  * @prop transitionParams
  * @prop transition = fade
  * @prop fullscreen = false
+ * @prop zIndexLayer - Controls z-index layering (multiplied by 10)
+ * @prop toggle - Function to toggle modal open/close state
+ * @prop classDialog - Additional class for the dialog element
+ * @prop classBody - Alias for bodyClass
+ * @prop classHeader - Alias for headerClass
+ * @prop classFooter - Alias for footerClass
+ * @prop className - Alias for class
+ * @prop centered - Shorthand for placement="center"
+ * @prop returnFocusAfterClose - Whether to return focus after close (default: true)
+ * @prop onclose - Callback when modal closes
+ * @prop onopen - Callback when modal opens
  * @prop ...restProps
  */
 declare const Modal: import("svelte").Component<ModalProps, {}, "open">;

package/dist/types.d.ts

@@ -975,6 +975,17 @@ export interface ModalProps extends ModalVariants, Omit<DialogProps, "classes">
     footerClass?: ClassValue;
     closeBtnClass?: ClassValue;
     fullscreen?: boolean;
+    zIndexLayer?: number;
+    toggle?: () => void;
+    classDialog?: ClassValue;
+    classBody?: ClassValue;
+    classHeader?: ClassValue;
+    classFooter?: ClassValue;
+    className?: ClassValue;
+    centered?: boolean;
+    returnFocusAfterClose?: boolean;
+    onclose?: () => void;
+    onopen?: () => void;
 }
 export interface MenuProps extends SVGAttributes<SVGSVGElement> {
     size?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pajohns/flowbite-svelte",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Webapps global fork of flow-bite-svelte with customisation changes",
   "main": "dist/index.js",
   "author": {