nuxt-glorious 1.2.9-9-5 → 1.2.9-9-6

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.2.9-9-5"
+  "version": "1.2.9-9-6"
 }

package/dist/runtime/components/G/Rating.vue

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
 import { useId } from '#imports'
 
-const modelValue = defineModel()
+const filler = ref(true)
+const id = useId()
+const value = [5, 4, 3, 2, 1]
+const modelValue: any = defineModel()
 const computeModelValue = (event: Event) => {
+  const check = document.querySelectorAll(`input[name=star-name${id}]`)
+  check.forEach((item) => {
+    item.nextElementSibling?.classList.remove('checked')
+  })
+  filler.value = false
   const target = event.target as HTMLInputElement
   modelValue.value = target.value
 }
-
-const id = useId()
-const value = [5, 4, 3, 2, 1]
 </script>
 
 <template>
@@ -17,6 +22,7 @@ const value = [5, 4, 3, 2, 1]
       v-for="(item, index) in 5"
       :key="index"
     >
+      {{ value[index] < modelValue }}
       <input
         type="radio"
         :id="`star${item}-${id}`"
@@ -24,7 +30,10 @@ const value = [5, 4, 3, 2, 1]
         :value="value[index]"
         @input="computeModelValue"
       />
-      <label :for="`star${item}-${id}`"></label>
+      <label
+        :for="`star${item}-${id}`"
+        :class="[value[index] < modelValue + 1 && filler ? 'checked' : '']"
+      />
     </template>
   </div>
 </template>

package/dist/runtime/style/components/rating.css

@@ -21,6 +21,10 @@
 .rating input:checked ~ label,
 .rating label:hover,
 .rating label:hover ~ label {
-  color: #ffd700;
+  color: #ffd700 !important;
   transition: color 0.3s;
+}
+
+label.checked {
+  color: #ffd700;
 }

package/dist/runtime/style/components/rating.scss

@@ -20,6 +20,10 @@
 .rating input:checked ~ label,
 .rating label:hover,
 .rating label:hover ~ label {
-  color: #ffd700;
+  color: #ffd700 !important;
   transition: color 0.3s;
 }
+
+label.checked {
+    color: #ffd700;
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.9-9-5",
+  "version": "1.2.9-9-6",
   "name": "nuxt-glorious",
   "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
   "repository": "sajadhzj/nuxt-glorious",