fix(Img): add children for enhanded:img

Author: shinokada

package.json

@@ -41,19 +41,19 @@
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
-    "@flowbite-svelte-plugins/datatable": "^0.4.0",
+    "@flowbite-svelte-plugins/datatable": "^0.4.1",
     "@flowbite-svelte-plugins/texteditor": "^0.25.5",
     "@playwright/test": "^1.55.1",
     "@resvg/resvg-js": "^2.6.2",
-    "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/adapter-vercel": "^5.10.2",
+    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/adapter-vercel": "^5.10.3",
     "@sveltejs/enhanced-img": "0.6.1",
-    "@sveltejs/kit": "^2.43.2",
+    "@sveltejs/kit": "^2.43.8",
     "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.4.4",
@@ -83,19 +83,18 @@
     "runes-meta-tags": "^0.4.5",
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
-    "simple-datatables": "^10.0.0",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.39.5",
+    "svelte": "^5.39.8",
     "svelte-check": "^4.3.2",
     "svelte-doc-llm": "^0.4.1",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.4.1",
     "svelte-rune-highlight": "^0.7.1",
-    "tailwindcss": "^4.1.13",
-    "tsx": "^4.20.5",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1",
-    "vite": "^7.1.7",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4"
   },

pnpm-lock.yaml

@@ -1934,13 +1934,15 @@ export interface Picture {
 }
 // export type EnhancedImgAttributes = Omit<HTMLImgAttributes, "src"> & { src: string };
 
-export interface ImgProps extends ImgVariants, HTMLImgAttributes {
+export interface ImgProps extends ImgVariants, Omit<HTMLImgAttributes, 'children'> {
+  children?: Snippet<[{ class: string; restProps: any }]>;
   size?: ImgVariants["size"];
   effect?: ImgVariants["effect"];
   caption?: string;
   figClass?: string;
   captionClass?: string;
   href?: HTMLAnchorElement["href"];
+  align?: ImgVariants["align"];
 }
 
 export interface EnhandedImgProps extends ImgVariants, Omit<HTMLImgAttributes, "src"> {

src/lib/types.ts

@@ -22,6 +22,7 @@
   const theme = getTheme("img");
 
   let { base, figure, caption: figureCaption } = $derived(img({ size }));
+  console.warn("EnhancedImg is deprecated. Please use Img instead.");
 </script>
 
 {#snippet imageSlot()}

src/lib/typography/img/EnhancedImg.svelte

@@ -4,36 +4,50 @@
   import type { ImgProps } from "$lib/types";
   import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
 
-  let { size = "none", effect = "none", caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
+  let { children, size, effect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
 
   warnThemeDeprecation(
     "Img",
     { figClass, captionClass },
     {
-      figClass: "fig",
+      figClass: "figure",
       captionClass: "caption"
     }
   );
+
   const styling = $derived({
-    fig: figClass,
-    caption: captionClass
+    figure: figClass || classes?.figure,
+    caption: captionClass || classes?.caption
   });
 
   const theme = getTheme("img");
 
-  let { base, figure, caption: figureCaption } = $derived(img({ size, effect }));
+  let { base, figure, caption: figureCaption } = $derived(img({ size, effect, align }));
+
+  // Determine if using slot or traditional props
+  const useSlot = $derived(!!children);
+  // Compute the final class string to pass to children
+  const imgClass = $derived(base({ class: clsx(theme?.base, className) }));
 </script>
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={figure({ class: clsx(theme?.figure, styling.fig) })}>
-      <img {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    <figure class={figure({ class: clsx(theme?.figure, styling.figure) })}>
+      {#if useSlot}
+        {@render children?.({ class: imgClass, restProps })}
+      {:else}
+        <img {...restProps} class={imgClass} />
+      {/if}
       <figcaption class={figureCaption({ class: clsx(theme?.caption, styling.caption) })}>
         {@html caption}
       </figcaption>
     </figure>
   {:else}
-    <img {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    {#if useSlot}
+      {@render children?.({ class: imgClass, restProps })}
+    {:else}
+      <img {...restProps} class={imgClass} />
+    {/if}
   {/if}
 {/snippet}
 

src/lib/typography/img/Img.svelte

@@ -18,8 +18,7 @@ export const img = tv({
       lg: { base: "max-w-lg", figure: "max-w-lg" },
       xl: { base: "max-w-xl", figure: "max-w-xl" },
       "2xl": { base: "max-w-2xl", figure: "max-w-2xl" },
-      full: { base: "max-w-full", figure: "max-w-full" },
-      none: { base: "", figure: "" }
+      full: { base: "max-w-full", figure: "max-w-full" }
     },
     effect: {
       grayscale: {
@@ -37,10 +36,12 @@ export const img = tv({
       },
       "hue-rotate": {
         base: "hue-rotate-60 filter transition-all duration-300 hover:hue-rotate-0"
-      },
-      none: {
-        base: "transition-all duration-300"
       }
+    },
+    align: {
+      left: { base: "mx-0" },
+      center: { base: "mx-auto" },
+      right: { base: "ml-auto mr-0" }
     }
   }
 });

src/lib/typography/img/theme.ts

@@ -13,11 +13,11 @@
   let dir = "builder";
 
   const sizes = Object.keys(img.variants.size);
-  let imgSize: ImgProps["size"] = $state("none");
+  let imgSize: ImgProps["size"] = $state(undefined);
   // const alignments = Object.keys(img.variants.alignment);
   // let imgAlignment: ImgProps['alignment'] = $state('left');
   const effects = Object.keys(img.variants.effect);
-  let imgEffect: ImgProps["effect"] = $state("none");
+  let imgEffect: ImgProps["effect"] = $state(undefined);
 
   // const shadows = Object.keys(img.variants.shadow);
   // let imgShadow: ImgProps['shadow'] = $state('none');
@@ -33,8 +33,8 @@
     imgHref = imgHref === "" ? "/" : "";
   };
   $effect(() => {
-    if (imgSize !== "none") {
-      imgEffect = "none";
+    if (imgSize !== undefined) {
+      imgEffect = undefined;
     }
   });
 
@@ -43,13 +43,13 @@
     (() => {
       // size, alignment, effect, shadow, rounded, caption, imgClass, figClass, captionClass,
       let props = [];
-      if (imgSize !== "none") props.push(` size="${imgSize}"`);
+      if (imgSize !== undefined) props.push(` size="${imgSize}"`);
       // if (imgAlignment !== 'left') props.push(` alignment="${imgAlignment}"`);
-      if (imgEffect !== "none") props.push(` effect="${imgEffect}"`);
+      if (imgEffect !== undefined) props.push(` effect="${imgEffect}"`);
       // if (imgShadow !== 'none') props.push(` shadow="${imgShadow}"`);
       // if (imgRounded !== 'none') props.push(` rounded="${imgRounded}"`);
-      if (imgEffect !== "none" && imgCaption) props.push(` figClass="relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"`);
-      if (imgEffect !== "none" && imgCaption) props.push(` captionClass="absolute bottom-6 px-4 text-lg text-white"`);
+      if (imgEffect !== undefined && imgCaption) props.push(` figClass="relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"`);
+      if (imgEffect !== undefined && imgCaption) props.push(` captionClass="absolute bottom-6 px-4 text-lg text-white"`);
       if (imgCaption) props.push(` caption="Image caption"`);
       if (imgHref) props.push(` href="/"`);
 
@@ -82,7 +82,7 @@
 <H1>Image Builder</H1>
 <CodeWrapper>
   <div class="relative mb-4 overflow-y-auto md:h-[700px]">
-    <Img src={imgEffect !== "none" ? "/images/examples/content-gallery-3.png" : imgClass.includes("full") ? "/images/examples/[email protected]" : "/images/examples/[email protected]"} size={imgSize} class={imgClass} alt="sample 1" effect={imgEffect} figClass={imgEffect !== "none" && imgCaption ? "relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" : ""} captionClass={imgEffect !== "none" && imgCaption ? "absolute bottom-6 px-4 text-lg text-white mx-auto" : ""} caption={imgEffect !== "none" ? "Do you want to get notified when a new component is added to Flowbite?" : imgCaption ? "Image caption" : ""} href={imgHref} />
+    <Img src={imgEffect !== undefined ? "/images/examples/content-gallery-3.png" : imgClass.includes("full") ? "/images/examples/[email protected]" : "/images/examples/[email protected]"} size={imgSize} class={imgClass} alt="sample 1" effect={imgEffect} figClass={imgEffect !== undefined && imgCaption ? "relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" : ""} captionClass={imgEffect !== undefined && imgCaption ? "absolute bottom-6 px-4 text-lg text-white mx-auto" : ""} caption={imgEffect !== undefined ? "Do you want to get notified when a new component is added to Flowbite?" : imgCaption ? "Image caption" : ""} href={imgHref} />
   </div>
   <div class="mb-4 flex flex-wrap space-x-2">
     <Label class="mb-4 w-full font-bold">Size</Label>

src/routes/builder/image/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Img, img, Radio, Label, type ImgProps } from "$lib";
+
+  const alignments = Object.keys(img.variants.align);
+  let imgAlign: ImgProps["align"] = $state(undefined);
+</script>
+
+<div class="flex flex-col">
+  <Img src="/images/examples/[email protected]" size="sm" align={imgAlign} alt="sample 1" />
+
+  <div class="mt-4 flex flex-wrap space-x-2">
+    <Label class="mb-4 w-full font-bold">Alignment</Label>
+    {#each alignments as option}
+      <Radio class="my-1" classes={{ label: "w-16" }} name="alignment" bind:group={imgAlign} value={option}>{option}</Radio>
+    {/each}
+  </div>
+</div>

src/routes/docs-examples/typography/image/Alignment.svelte

@@ -2,4 +2,4 @@
   import { Img } from "flowbite-svelte";
 </script>
 
-<Img src="/images/examples/content-gallery-3.png" alt="sample 1" class="rounded-lg" figClass="relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" captionClass="absolute bottom-6 px-4 text-lg text-white" caption="Do you want to get notified when a new component is added to Flowbite?" />
+<Img src="/images/examples/content-gallery-3.png" alt="sample 1" class="rounded-lg" classes={{ figure:"relative", caption:"absolute bottom-6 px-4 text-lg text-white"}} caption="Do you want to get notified when a new component is added to Flowbite?" effect="grayscale" size="sm"/>