@pajohns/flowbite-svelte 0.1.1 → 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/progress/Progressbar.svelte

@@ -13,7 +13,9 @@
     animate = false,
     size = "h-2.5",
     labelInside = false,
+    labelInsideClass,
     labelOutside = "",
+    outsideSpanClass,
     easing = cubicOut,
     color = "primary",
     class: className,
@@ -50,13 +52,13 @@
 
 {#if labelOutside}
   <div {...restProps} class={outside({ class: clsx(theme?.outside, classes?.outside) })}>
-    <span class={span({ class: clsx(theme?.span, classes?.span) })}>{labelOutside}</span>
+    <span class={span({ class: clsx(theme?.span, classes?.span, outsideSpanClass) })}>{labelOutside}</span>
     <span class={progressCls({ class: clsx(theme?.progressCls, classes?.progressCls) })}>{progress}%</span>
   </div>
 {/if}
 <div {...restProps} class={base({ class: clsx(size, theme?.base, className) })}>
   {#if labelInside}
-    <div class={labelInsideCls({ class: clsx(size, theme?.label, classes?.label) })} style="width: {_progress.current}%">
+      <div class={labelInsideCls({ class: clsx(size, theme?.label, classes?.label, labelInsideClass) })} style="width: {_progress.current}%">
       {_progress.current.toFixed(precision)}%
     </div>
   {:else}
@@ -76,7 +78,9 @@
 @prop animate = false
 @prop size = "h-2.5"
 @prop labelInside = false
+@prop labelInsideClass - Custom classes for the label inside the progress bar
 @prop labelOutside = ""
+@prop outsideSpanClass - Custom classes for the outside label span
 @prop easing = cubicOut
 @prop color = "primary"
 @prop class: className

package/dist/progress/Progressbar.svelte.d.ts

@@ -10,7 +10,9 @@ import type { ProgressbarProps } from "../types";
  * @prop animate = false
  * @prop size = "h-2.5"
  * @prop labelInside = false
+ * @prop labelInsideClass - Custom classes for the label inside the progress bar
  * @prop labelOutside = ""
+ * @prop outsideSpanClass - Custom classes for the outside label span
  * @prop easing = cubicOut
  * @prop color = "primary"
  * @prop class: className

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;
@@ -1103,7 +1114,9 @@ export interface ProgressbarProps extends ProgressbarVariants, Omit<HTMLAttribut
     animate?: boolean;
     size?: string;
     labelInside?: boolean;
+    labelInsideClass?: string;
     labelOutside?: string;
+    outsideSpanClass?: string;
     easing?: EasingFunction;
 }
 export interface ProgressradialProps extends ProgressradialVariants, Omit<HTMLAttributes<HTMLDivElement>, "color"> {

package/package.json

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