chore: update to 0.1.2

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.2
+
+### Patch Changes
+
+- Update doc, default values and convert string rating size in number to improve retro-compatibility
+
 ## 0.1.1
 
 ### Patch Changes

README.md

@@ -66,12 +66,12 @@ export default defineNuxtConfig({
 The following props can be passed to customize the appearance and behavior of the component:
 
 - `ratingCount` (optional, default: 5): The total number of rating levels available.
-- `ratingSize` (optional, default: "32px"): The size of the rating meter.
-- `ratingSpacing` (optional, default: 0): The spacing between the rating levels.
-- `ratingStep` (optional, default: 0): Defines the increment between rating levels. For example, with ratingStep set to 0.5, users can select ratings like 0.5, 1, 1.5, etc.
+- `ratingSize` (optional, default: 15): The size of the rating meter.
+- `ratingSpacing` (optional, default: 2): The spacing between the rating levels.
+- `ratingStep` (optional, default: 0.1): Defines the increment between rating levels. For example, with ratingStep set to 0.5, users can select ratings like 0.5, 1, 1.5, etc.
 - `activeColor` (optional, default: "#ffc700"): The color of the active rating level.
 - `inactiveColor` (optional, default: "gray"): The color of the inactive rating levels.
-- `ratingValue` (optional, default: 3.7): The initial rating value.
+- `ratingValue` (optional, default: 4.5): The initial rating value.
 - `ratingContent` (optional, default: "[19.8, 2.2, 6.6, 43.56, 39.6, 17.16, 0, 17.16, 33, 43.56]"): The content to be displayed for each rating level, should be polygon points see https://developer.mozilla.org/fr/docs/Web/SVG/Element/polygon.
 - `readOnly` (optional, default: true): Specifies whether the rating meter is read-only or interactive.
 - `borderColor` (optional, default: "#db8403"): The border color of the stars.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-rating",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Display or retrieve a score on a fully customisable scale.",
   "homepage": "https://github.com/Aurion72/nuxt-rating#readme",
   "repository": "Aurion72/nuxt-rating",

playground/app.vue

@@ -8,14 +8,14 @@
 
     <NuxtRating
       border-color="#db8403"
-      :read-only="true"
+      :read-only="false"
       active-color="#ffa41c"
       inactive-color="#fff"
       :rating-step="0.5"
       :rounded-corners="true"
       :border-width="5"
       :fixed-points="2"
-      :rating-size="30"
+      :rating-size="'30px'"
       :rating-value="4.5"
       @rating-selected="logRating"
       @rating-hovered="event => (rating = event)" />

src/runtime/components/NuxtRating.vue

@@ -36,16 +36,16 @@
   }
 
   const props = withDefaults(defineProps<NuxtRatingProps>(), {
-    ratingStep: 1,
-    ratingValue: 0,
+    ratingStep: 0.1,
+    ratingValue: 4.5,
     roundStartRating: true,
     activeColor: '#ffa41c',
     inactiveColor: '#d8d8d8',
     ratingCount: 5,
     ratingContent: () => [19.8, 2.2, 6.6, 43.56, 39.6, 17.16, 0, 17.16, 33, 43.56],
-    ratingSize: 50,
+    ratingSize: 15,
     ratingSpacing: 2,
-    readOnly: false,
+    readOnly: true,
     inline: false,
     borderColor: '#db8403',
     borderWidth: 0,

src/runtime/components/NuxtStar.vue

@@ -53,11 +53,19 @@
   const isReady = ref(false)
   const isStarActive = ref(true)
 
+  const parseSize = (size: string | number): number => {
+    if (typeof size === 'number') return size
+    const value = parseFloat(size)
+    return isNaN(value) ? 0 : value
+  }
+
+  const size = parseSize(props.size)
+
   const starPointsToString = computed(() => props.points.join(','))
   const gradId = computed(() => `url(#${grad.value})`)
-  const starSize = computed(
-    () => props.size + (props.roundedCorners && props.borderWidth <= 0 ? 6 : props.borderWidth),
-  )
+  const starSize = computed(() => {    
+    return size + (props.roundedCorners && props.borderWidth <= 0 ? 6 : props.borderWidth)
+  })
   const starFill = computed(() => `${props.fill}%`)
   const getBorderColor = computed(() =>
     props.fill <= 0
@@ -95,7 +103,7 @@
   }
 
   const getPosition = (event: MouseEvent) => {
-    const starWidth = (92 / 100) * props.size
+    const starWidth = (92 / 100) * size
     const offset = Math.max(event.offsetX, 1)
     return Math.min(Math.round((100 / starWidth) * offset), 100)
   }

src/runtime/types/nuxt-rating.d.ts

@@ -6,7 +6,7 @@ export type NuxtRatingProps = {
   inactiveColor?: string
   ratingCount?: number
   ratingContent?: number[]
-  ratingSize?: number
+  ratingSize?: number | string
   ratingSpacing?: number
   readOnly?: boolean
   inline?: boolean

src/runtime/types/nuxt-star.d.ts

@@ -1,7 +1,7 @@
 export type NuxtStarProps = {
   fill: number
   points: number[]
-  size: number
+  size: number | string
   starId: number
   activeColor: string
   inactiveColor: string

test/fixtures/basic/app.vue

@@ -4,6 +4,8 @@
     <NuxtRating
       :rating-count="5"
       :active-color="'red'"
+      :rating-step="1"
+      :read-only="false"
       :rating-value="rating"
       @rating-selected="event => (rating = event)" />
     <span class="rating-value">{{ rating }}</span>

test/rendering.test.ts

@@ -12,7 +12,7 @@ describe('test module', async () => {
 
     const html = await $fetch('/')
     expect(html).toContain('class="nuxt-rating-wrapper"')
-    console.log('html', html.res)
+    console.log('html', html)
   })
 
   describe('test module with playwright', async () => {
@@ -36,9 +36,13 @@ describe('test module', async () => {
 
       const ratingValue = await page.$('.rating-value')
       expect(ratingValue).not.toBeNull()
-      const textContent = await ratingValue.innerText()
-      expect(textContent).toContain('3')
 
+      if (ratingValue) {
+        const textContent = await ratingValue.innerText()
+        expect(textContent).toContain('3')
+      } else {
+        throw new Error('ratingValue element is null')
+      }
     })
 
     afterAll(async () => {