odj-svelte-ui 0.4.0 → 0.4.2

package/dist/rating/CustomIcon.svelte

@@ -6,7 +6,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
+<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} data-icon-index={iconIndex} viewBox="0 0 24 24" {role} stroke-width="1.5">
   <defs>
     <linearGradient id={uniqueId} x1="0%" y1="0%" x2="100%" y2="0%">
       {#if fillPercent !== 100}

package/dist/rating/Heart.svelte

@@ -6,7 +6,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} data-icon-index={iconIndex} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}

package/dist/rating/Rating.svelte

@@ -2,32 +2,32 @@
   import Star from "./Star.svelte";
   import { type RatingProps as Props, rating as ratingVariants } from ".";
 
-  let { children, text, divClass, size = 24, total = 5, rating = 4, Icon = Star, count = false, pClass }: Props = $props();
+  let { children, text, divClass, size = 24, total = 5, rating = 4, Icon = Star, count = false, pClass, iconProps }: Props = $props();
 
   const { base, p } = $derived(ratingVariants());
   const ratingGroupId = crypto.randomUUID();
-  let fullStars: number = Math.floor(rating);
-  let rateDiffence = rating - fullStars;
-  let percentRating = Math.round(rateDiffence * 100);
-  let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
+  let fullStars: number = $derived(Math.floor(rating));
+  let rateDiffence = $derived(rating - fullStars);
+  let percentRating = $derived(Math.round(rateDiffence * 100));
+  let grayStars: number = $derived(total - (fullStars + Math.ceil(rateDiffence)));
 </script>
 
 <div class={base({ class: divClass })}>
   {#if count && children}
-    <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
+    <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} {...iconProps} />
     <p class={p({ class: pClass })}>{rating}</p>
     {@render children()}
   {:else}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->
     {#each Array(fullStars) as _, index}
-      <Icon {size} fillPercent={100} iconIndex={index} groupId={`rating-${ratingGroupId}-full`} />
+      <Icon {size} fillPercent={100} iconIndex={index} groupId={`rating-${ratingGroupId}-full`} {...iconProps} />
     {/each}
     {#if percentRating}
-      <Icon {size} fillPercent={percentRating} iconIndex={fullStars} groupId={`rating-${ratingGroupId}-partial`} />
+      <Icon {size} fillPercent={percentRating} iconIndex={fullStars} groupId={`rating-${ratingGroupId}-partial`} {...iconProps} />
     {/if}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->
     {#each Array(grayStars) as _, index}
-      <Icon {size} fillPercent={0} iconIndex={index} groupId={`rating-${ratingGroupId}-empty`} />
+      <Icon {size} fillPercent={0} iconIndex={fullStars + index + 1 - +!percentRating} groupId={`rating-${ratingGroupId}-empty`} {...iconProps} />
     {/each}
     {#if text}
       {@render text()}

package/dist/rating/Star.svelte

@@ -6,7 +6,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
+<svg width={size} height={size} {...restProps} class={svgClass} data-icon-index={iconIndex} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}

package/dist/rating/type.d.ts

@@ -25,6 +25,7 @@ interface RatingProps {
     Icon?: Component;
     count?: boolean;
     pClass?: string;
+    iconProps?: RatingIconProps;
 }
 interface RatingCommentProps {
     children: Snippet;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "odj-svelte-ui",
   "author": "orbitadajogatina",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "This is a fork from Flowbite Svelte 5 with Runes. I just made some changes that fits better my taste.",
   "license": "MIT",
   "main": "dist/index.js",