feat(Rating): new component

[J-Michalek]

🔗 Linked issue

Resolves: #505

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I've added a new component for rating.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[J-Michalek]

@benjamincanac I'm wondering if this component shouldn't be implemented in RekaUI first as it needs a11y support and I'm not sure we want to manage it ourselves in NuxtUI, what are your thoughts?

[benjamincanac]

Yes I agree, this is why I was holding back on this 😬

[J-Michalek]

Alright, I will bring it upstream: unovue/reka-ui#1966 could you please add the reka-ui label to the issue?

[dan-hale]

Here is some code I am using currently to do this. There is possibly no need to build it into reka as the RadioGroup component seems to do the job. @J-Michalek

<script setup lang=ts>
import type { ButtonGroupProps } from '@nuxt/ui/components/ButtonGroup.vue'

withDefaults(defineProps<{ length?: number, readonly?: boolean, size?: ButtonGroupProps['size'] }>(), { length: 5 })
const model = defineModel<number>({ default: undefined })

const hoverIndex = ref<number>()
</script>

<template>
  <radio-group-root v-model="model" :disabled="readonly" as-child @mouseleave="hoverIndex = undefined">
    <u-button-group :size>
      <radio-group-item v-for="i in length" :key="i" :value="i" as-child @mouseenter="hoverIndex = i">
        <u-button :disabled="readonly" variant="ghost" class="p-[0.25em] transform-origin-c transition-all transition-ease-in-out hover:scale-120" :icon="(hoverIndex === undefined ? (i <= model) : (!readonly && i <= hoverIndex)) ? 'material-symbols:star-rounded' : 'material-symbols:star-outline-rounded'" :color="(i <= model) || (hoverIndex && !readonly && i <= hoverIndex) ? 'primary' : 'neutral'" />
      </radio-group-item>
    </u-button-group>
  </radio-group-root>
</template>

[J-Michalek]

I kinda like the idea, but I still think that we should bring it upstream. There will be some specific logic such as the precision of the rating i.e. 1.5, 2.5, 4.75, which I think we don't really want to mantain in NuxtUI, also bringing it upstream will make it accessible to more developers as it won't be locked in NuxtUI.

So far I was implementing it from scratch but using the radio group component seems like a good idea as all the a11y is already handled.