feat(Rating): new component

docs/content/3.components/rating.md

@@ -0,0 +1,33 @@
+---
+title: Rating
+description: ''
+links:
+  - label: Rating
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/rating
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Rating.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

playground/app/pages/components/rating.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const rating = ref(3)
+</script>
+
+<template>
+  <div>
+    <URating v-model="rating" />
+    <URating v-model="rating" orientation="vertical" />
+  </div>
+</template>

src/runtime/components/Rating.vue

@@ -0,0 +1,70 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/rating'
+import type { ComponentConfig } from '../types/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+
+type Rating = ComponentConfig<typeof theme, AppConfig, 'rating'>
+
+export interface RatingProps extends PrimitiveProps {
+  max?: number
+  id?: string
+  disabled?: boolean
+  orientation?: 'horizontal' | 'vertical'
+  icon?: string
+  class?: any
+  ui?: Rating['slots']
+}
+
+export interface RatingEmits {}
+
+export interface RatingSlots {}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useAppConfig, useLocale } from '#imports'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<RatingProps>(), {
+  max: 5
+})
+
+const modelValue = defineModel<number>({ default: 0 })
+const hoveredValue = ref(0)
+
+const appConfig = useAppConfig() as Rating['AppConfig']
+const { dir } = useLocale()
+
+const rootProps = reactivePick(props, ['class', 'as', 'asChild'])
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.rating || {}) })({ orientation: props.orientation }))
+</script>
+
+<template>
+  <Primitive
+    v-bind="rootProps"
+    :id="id"
+    :class="ui.root()"
+    role="radiogroup"
+    :dir="dir"
+    :aria-orientation="orientation"
+    @mouseleave="hoveredValue = 0"
+  >
+    <UIcon
+      v-for="i in max"
+      :key="i"
+      :icon
+      :name="icon || 'i-lucide-star'"
+      :data-state="hoveredValue > 0 && i <= hoveredValue || hoveredValue === 0 && i <= modelValue ? 'active' : undefined"
+      :class="ui.icon()"
+      :aria-labeledby="id"
+      :aria-checked="i <= modelValue"
+      :aria-disabled="disabled"
+      :aria-label="`${i} stars`"
+      @mouseenter="hoveredValue = i"
+      @click="modelValue = i"
+    />
+  </Primitive>
+</template>

src/runtime/types/index.ts

@@ -35,6 +35,7 @@ export * from '../components/PinInput.vue'
 export * from '../components/Popover.vue'
 export * from '../components/Progress.vue'
 export * from '../components/RadioGroup.vue'
+export * from '../components/Rating.vue'
 export * from '../components/Select.vue'
 export * from '../components/SelectMenu.vue'
 export * from '../components/Separator.vue'

src/theme/index.ts

@@ -33,6 +33,7 @@ export { default as pinInput } from './pin-input'
 export { default as popover } from './popover'
 export { default as progress } from './progress'
 export { default as radioGroup } from './radio-group'
+export { default as rating } from './rating'
 export { default as select } from './select'
 export { default as selectMenu } from './select-menu'
 export { default as separator } from './separator'

src/theme/rating.ts

@@ -0,0 +1,21 @@
+export default {
+  slots: {
+    root: 'space-x-1 flex items-center',
+    icon: 'data-[state=active]:text-yellow-500'
+  },
+
+  variants: {
+    orientation: {
+      horizontal: {
+        root: ''
+      },
+      vertical: {
+        root: 'flex-col'
+      }
+    }
+  },
+
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+}

test/components/Rating.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import Rating, { type RatingProps, type RatingSlots } from '../../src/runtime/components/Rating.vue'
+import ComponentRender from '../component-render'
+
+describe('Rating', () => {
+  it.each([
+    // Props
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: RatingProps, slots?: Partial<RatingSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Rating)
+    expect(html).toMatchSnapshot()
+  })
+})