feat: update rate

components/rate/index.jsx

@@ -1,11 +1,11 @@
+import { inject } from 'vue';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
+import { getOptionProps, getComponent } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import VcRate from '../vc-rate';
 import StarFilled from '@ant-design/icons-vue/StarFilled';
 import Tooltip from '../tooltip';
-import Base from '../base';
 
 export const RateProps = {
   prefixCls: PropTypes.string,
@@ -22,13 +22,11 @@ export const RateProps = {
 
 const Rate = {
   name: 'ARate',
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
   props: RateProps,
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   methods: {
     characterRender(node, { index }) {
@@ -48,15 +46,13 @@ const Rate = {
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('rate', customizePrefixCls);
 
-    const character = getComponentFromProp(this, 'character') || <StarFilled />;
+    const character = getComponent(this, 'character') || <StarFilled />;
     const rateProps = {
-      props: {
-        character,
-        characterRender: this.characterRender,
-        prefixCls,
-        ...omit(restProps, ['tooltips']),
-      },
-      on: getListeners(this),
+      character,
+      characterRender: this.characterRender,
+      prefixCls,
+      ...omit(restProps, ['tooltips']),
+      ...this.$attrs,
       ref: 'refRate',
     };
     return <VcRate {...rateProps} />;
@@ -64,8 +60,7 @@ const Rate = {
 };
 
 /* istanbul ignore next */
-Rate.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Rate.name, Rate);
+Rate.install = function(app) {
+  app.component(Rate.name, Rate);
 };
 export default Rate;

components/vc-rate/src/Rate.jsx

@@ -1,12 +1,7 @@
 import PropTypes from '../../_util/vue-types';
 import classNames from 'classnames';
 import KeyCode from '../../_util/KeyCode';
-import {
-  initDefaultProps,
-  hasProp,
-  getOptionProps,
-  getComponentFromProp,
-} from '../../_util/props-util';
+import { initDefaultProps, hasProp, getOptionProps, getComponent } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import { getOffsetLeft } from './util';
 import Star from './Star';
@@ -30,10 +25,7 @@ function noop() {}
 export default {
   name: 'Rate',
   mixins: [BaseMixin],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  inheritAttrs: false,
   props: initDefaultProps(rateProps, {
     defaultValue: 0,
     count: 5,
@@ -167,33 +159,31 @@ export default {
           sValue: value,
         });
       }
+      this.$emit('update:value', value);
       this.$emit('change', value);
     },
   },
   render() {
     const { count, allowHalf, prefixCls, disabled, tabIndex } = getOptionProps(this);
     const { sValue, hoverValue, focused } = this;
+    const { class: className, style } = this.$attrs;
     const stars = [];
     const disabledClass = disabled ? `${prefixCls}-disabled` : '';
-    const character = getComponentFromProp(this, 'character');
-    const characterRender = this.characterRender || this.$scopedSlots.characterRender;
+    const character = getComponent(this, 'character');
+    const characterRender = this.characterRender || this.$slots.characterRender;
     for (let index = 0; index < count; index++) {
       const starProps = {
-        props: {
-          index,
-          count,
-          disabled,
-          prefixCls: `${prefixCls}-star`,
-          allowHalf,
-          value: hoverValue === undefined ? sValue : hoverValue,
-          character,
-          characterRender,
-          focused,
-        },
-        on: {
-          click: this.onClick,
-          hover: this.onHover,
-        },
+        index,
+        count,
+        disabled,
+        prefixCls: `${prefixCls}-star`,
+        allowHalf,
+        value: hoverValue === undefined ? sValue : hoverValue,
+        character,
+        characterRender,
+        focused,
+        onClick: this.onClick,
+        onHover: this.onHover,
         key: index,
         ref: `stars${index}`,
       };
@@ -201,7 +191,8 @@ export default {
     }
     return (
       <ul
-        class={classNames(prefixCls, disabledClass)}
+        class={classNames(prefixCls, disabledClass, className)}
+        style={style}
         onMouseleave={disabled ? noop : this.onMouseLeave}
         tabIndex={disabled ? -1 : tabIndex}
         onFocus={disabled ? noop : this.onFocus}

components/vc-rate/src/Star.jsx

@@ -1,11 +1,12 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getComponentFromProp } from '../../_util/props-util';
+import { getComponent } from '../../_util/props-util';
 function noop() {}
 
 export default {
   name: 'Star',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     value: PropTypes.number,
     index: PropTypes.number,
@@ -65,7 +66,7 @@ export default {
       value,
     } = this;
 
-    const character = getComponentFromProp(this, 'character');
+    const character = getComponent(this, 'character');
     let star = (
       <li class={this.getClassName()}>
         <div

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/progress/demo/index';
+import demo from '../antdv-demo/docs/rate/demo/index';
 
 export default {
   components: {

examples/index.js

@@ -1,12 +1,12 @@
 import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
-import { Button, Upload, Icon, Modal, Progress, notification, message } from 'ant-design-vue';
+import { Rate, Button, Upload, Icon, Modal, Progress, notification, message } from 'ant-design-vue';
 import 'ant-design-vue/style.js';
 
 const basic = {
   render() {
-    return this.$slots.default && this.$slots.default();
+    return this.$slots?.default();
   },
 };
 const app = createApp(App);
@@ -23,4 +23,5 @@ app
   .use(Icon)
   .use(Modal)
   .use(Progress)
+  .use(Rate)
   .mount('#app');