@pajohns/flowbite-svelte 0.1.3 → 0.1.4

package/dist/modal/Modal.svelte

@@ -23,98 +23,50 @@
     footerClass,
     size = "md",
     placement,
-    class: classNameProp,
+    class: className,
     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: resolvedHeaderClass, bodyClass: resolvedBodyClass, footerClass: resolvedFooterClass, closeBtnClass })),
+    untrack(() => ({ headerClass, bodyClass, footerClass, closeBtnClass })),
     { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" }
   );
 
-  const styling = $derived(classes ?? { header: resolvedHeaderClass, body: resolvedBodyClass, footer: resolvedFooterClass, close: closeBtnClass });
+  const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, 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: 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();
-    }
-  }
+  const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
 </script>
 
 <Dialog
   bind:open
   {transition}
-  dismissable={dismissable && !title && !permanent}
+  dismissable={dismissable && !title && !header && !permanent}
   transitionParams={paramsOptions}
   {classes}
   {permanent}
-  oncancel={toggle ? handleCancel : undefined}
   {...restProps}
-  class={base({ fullscreen, class: clsx(theme?.base, resolvedClassName, classDialog) })}
-  style={zIndexStyle}
+  class={base({ fullscreen, class: clsx(theme?.base, className) })}
 >
   {#if title || header}
     <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
       {#if title}
         <h3>{title}</h3>
-        {#if dismissable && !permanent}
-          <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
-        {/if}
       {:else if header}
         {@render header()}
       {/if}
+      {#if dismissable && !permanent}
+        <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+      {/if}
     </div>
   {/if}
   <div class={body({ class: clsx(theme?.body, styling.body) })}>
@@ -151,16 +103,5 @@
 @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,17 +22,6 @@ 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,17 +975,6 @@ 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.3",
+  "version": "0.1.4",
   "description": "Webapps global fork of flow-bite-svelte with customisation changes",
   "main": "dist/index.js",
   "author": {