docs(image): EnhancedEffect example

Author: shinokada

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.17.2
+
+### Patch Changes
+
+- fix(Img): add children for enhanded:img
+
 ## 1.17.1
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -39,16 +39,16 @@
     "@docsearch/css": "^4.1.0",
     "@docsearch/js": "^4.1.0",
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
     "@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.1",
     "@sveltejs/adapter-vercel": "^5.10.3",
-    "@sveltejs/enhanced-img": "0.6.1",
-    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/enhanced-img": "0.8.3",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
@@ -59,7 +59,7 @@
     "@tiptap/core": "3.4.4",
     "dayjs": "^1.11.18",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "flowbite-svelte-admin-dashboard": "^2.0.0",
@@ -70,21 +70,21 @@
     "globals": "^16.4.0",
     "highlight.js": "^11.11.1",
     "jsdom": "^27.0.0",
-    "katex": "^0.16.22",
+    "katex": "^0.16.23",
     "lowlight": "^3.3.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "prism-themes": "^1.9.0",
-    "publint": "^0.3.13",
+    "publint": "^0.3.14",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.5",
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.39.8",
+    "svelte": "^5.39.9",
     "svelte-check": "^4.3.2",
     "svelte-doc-llm": "^0.4.1",
     "svelte-lib-helpers": "^0.4.31",

pnpm-lock.yaml

@@ -1934,7 +1934,7 @@ export interface Picture {
 }
 // export type EnhancedImgAttributes = Omit<HTMLImgAttributes, "src"> & { src: string };
 
-export interface ImgProps extends ImgVariants, Omit<HTMLImgAttributes, 'children'> {
+export interface ImgProps extends ImgVariants, Omit<HTMLImgAttributes, "children"> {
   children?: Snippet<[{ class: string; restProps: any }]>;
   size?: ImgVariants["size"];
   effect?: ImgVariants["effect"];

src/lib/types.ts

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1946)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
 ## Props
 @prop src
 @prop href

src/lib/typography/img/EnhancedImg.svelte

@@ -42,12 +42,10 @@
         {@html caption}
       </figcaption>
     </figure>
+  {:else if useSlot}
+    {@render children?.({ class: imgClass, restProps })}
   {:else}
-    {#if useSlot}
-      {@render children?.({ class: imgClass, restProps })}
-    {:else}
-      <img {...restProps} class={imgClass} />
-    {/if}
+    <img {...restProps} class={imgClass} />
   {/if}
 {/snippet}
 
@@ -65,8 +63,10 @@
 ## Type
 [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
 ## Props
-@prop size = "none"
-@prop effect = "none"
+@prop children
+@prop size
+@prop effect
+@prop align
 @prop caption
 @prop class: className
 @prop classes

src/lib/typography/img/Img.svelte

@@ -39,9 +39,9 @@ export const img = tv({
       }
     },
     align: {
-      left: { base: "mx-0" },
-      center: { base: "mx-auto" },
-      right: { base: "ml-auto mr-0" }
+      left: { base: "mx-0", figure: "mx-0" },
+      center: { base: "mx-auto", figure: "mx-auto" },
+      right: { base: "ml-auto mr-0", figure: "ml-auto mr-0" }
     }
   }
 });

src/lib/typography/img/theme.ts

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1959)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
 ## Props
 @prop children
 @prop class: className

src/lib/typography/layout/Layout.svelte

@@ -18,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1972)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1974)
 ## Props
 @prop children
 @prop icon

src/lib/typography/list/Li.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1964)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
 ## Props
 @prop children
 @prop tag = "ul"