feat(rate): clsPrefix

src/element/index.ts

@@ -1,2 +1,2 @@
-/* istanbul ignore file */
 export { default as NElement } from './src/Element'
+export type { ElementProps } from './src/Element'

src/rate/index.ts

@@ -1,2 +1,2 @@
-/* istanbul ignore file */
 export { default as NRate } from './src/Rate'
+export type { RateProps } from './src/Rate'

src/rate/src/Rate.tsx

@@ -10,18 +10,16 @@ import {
 } from 'vue'
 import { useMergedState } from 'vooks'
 import { NBaseIcon } from '../../_internal'
-import { useTheme, useFormItem } from '../../_mixins'
+import { useTheme, useFormItem, useConfig } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { call } from '../../_utils'
-import type { MaybeArray } from '../../_utils'
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import { rateLight } from '../styles'
 import type { RateTheme } from '../styles'
 import style from './styles/index.cssr'
 import StarIcon from './StarIcon'
 
-export default defineComponent({
+const rateProps = {
-  name: 'Rate',
-  props: {
   ...(useTheme.props as ThemeProps<RateTheme>),
   count: {
     type: Number,
@@ -46,9 +44,23 @@ export default defineComponent({
   onUpdateValue: [Function, Array] as PropType<
   MaybeArray<(value: number) => void>
   >
-  },
+} as const
+
+export type RateProps = ExtractPublicPropTypes<typeof rateProps>
+
+export default defineComponent({
+  name: 'Rate',
+  props: rateProps,
   setup (props) {
-    const themeRef = useTheme('Rate', 'Rate', style, rateLight, props)
+    const { mergedClsPrefix } = useConfig(props)
+    const themeRef = useTheme(
+      'Rate',
+      'Rate',
+      style,
+      rateLight,
+      props,
+      mergedClsPrefix
+    )
     const controlledValueRef = toRef(props, 'value')
     const uncontrolledValueRef = ref(props.defaultValue)
     const hoverIndexRef = ref<number | null>(null)
@@ -76,6 +88,7 @@ export default defineComponent({
       doUpdateValue(index + 1)
     }
     return {
+      cPrefix: mergedClsPrefix,
       mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef),
       hoverIndex: hoverIndexRef,
       handleMouseEnter,
@@ -96,10 +109,10 @@ export default defineComponent({
     }
   },
   render () {
-    const { hoverIndex, mergedValue } = this
+    const { hoverIndex, mergedValue, cPrefix } = this
     return (
       <div
-        class="n-rate"
+        class={`${cPrefix}-rate`}
         style={this.cssVars as CSSProperties}
         onMouseleave={this.handleMouseLeave}
       >
@@ -107,9 +120,9 @@ export default defineComponent({
           <div
             key={index}
             class={[
-              'n-rate__item',
+              `${cPrefix}-rate__item`,
               {
-                'n-rate__item--active':
+                [`${cPrefix}-rate__item--active`]:
                   hoverIndex !== null
                     ? index <= hoverIndex
                     : index < mergedValue
@@ -118,7 +131,9 @@ export default defineComponent({
             onClick={() => this.handleClick(index)}
             onMouseenter={() => this.handleMouseEnter(index)}
           >
-            <NBaseIcon>{{ default: () => StarIcon }}</NBaseIcon>
+            <NBaseIcon clsPrefix={cPrefix}>
+              {{ default: () => StarIcon }}
+            </NBaseIcon>
           </div>
         ))}
       </div>