feat(rate): clsPrefix

This commit is contained in:
07akioni 2021-04-16 23:55:42 +08:00
parent 56017475af
commit 41f263d7b8
3 changed files with 51 additions and 36 deletions

View File

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

View File

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

View File

@ -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({
name: 'Rate',
props: {
const rateProps = {
...(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>