@king-design/intact 2.0.0-beta.1 → 2.0.2

package/components/menu/item.ts

@@ -2,16 +2,17 @@ import {Component, TypeDefs, inject, provide, VNode, Key} from 'intact';
 import {ROOT_MENU, MENU, Menu, MenuProps} from './menu'
 import {Dropdown, DropdownMenu} from '../dropdown';
 import template from './item.vdt';
-import {bind, isExternalLink} from '../utils';
+import {bind} from '../utils';
 import {useState} from '../../hooks/useState';
-import {useHighlight} from './useHighlight';
 import {useExpanded} from './useExpanded';
 import {useDropdown} from './useDropdown';
-import {useRouter} from '../../hooks/useRouter';
+import {useRouter, navigate} from '../../hooks/useRouter';
+import {useRecordItem} from '../../hooks/useRecordComponent';
+import {MENU_RECORD_KEY} from './useHighlight';
 
 export interface MenuItemProps {
     key: Key 
-    to?: string
+    to?: string | object
     dot?: boolean
     disabled?: boolean
 }
@@ -26,7 +27,7 @@ const typeDefs: Required<TypeDefs<MenuItemProps>> = {
         type: [String, Number],
         required: true,
     },
-    to: String,
+    to: [String, Object],
     dot: Boolean,
     disabled: Boolean,
 };
@@ -42,37 +43,30 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     public parentMenuItem = inject<MenuItem | null>(MENU_ITEM, null);
 
     private expanded = useExpanded(this.rootMenu, this.parentMenu);
-    private highlight = useHighlight(this.rootMenu, this.parentMenuItem);
     private dropdown = useDropdown(this.rootMenu, this.parentMenu);
     private router = useRouter();
 
     init() {
         provide(MENU_ITEM, this);
+        useRecordItem(MENU_RECORD_KEY);
     }
 
     @bind
     public onClick(hasSubMenu: Menu, e: MouseEvent) {
-        const {disabled, to} = this.get();
+        const {disabled, to, key} = this.get();
         if (disabled) return;
         
         if (hasSubMenu) {
             this.expanded.toggle();
         } else {
-            this.highlight.select();
+            this.rootMenu.highlight!.select(key);
         }
 
         this.trigger('click', e);
 
         if (!hasSubMenu) {
             this.trigger('select', this, e);
-            if (to) {
-                const router = this.router.value;
-                if (router && !isExternalLink(to)) {
-                    router.push(to!);
-                } else {
-                    location.href = to!;
-                }
-            }
+            navigate(this.router.value, to);
         }
     }
 }

package/components/menu/item.vdt

@@ -10,7 +10,7 @@ import {makeItemStyles, makeTitleStyles} from './styles';
 const rootMenu = this.rootMenu;
 const {theme, type, dot: rootDot} = rootMenu.get();
 const {children, key, className, disabled, dot} = this.get();
-const {isHighlighted, isSelected} = this.highlight;
+const {isHighlighted, isSelected} = rootMenu.highlight;
 const {isExpanded: isExpandedKey} = this.expanded;
 const isExpanded = isExpandedKey(key);
 const {
@@ -23,8 +23,8 @@ const classNameObj = {
     [className]: className,
     'k-expanded': isExpanded, 
     'k-disabled': disabled,
-    'k-active':  isSelected(), 
-    'k-highlighted': isHighlighted(),
+    'k-active':  isSelected(key), 
+    'k-highlighted': isHighlighted(key),
     [makeItemStyles()]: true,
 };
 

package/components/menu/menu.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs, provide, inject, Key} from 'intact';
 import template from './menu.vdt';
+import {useHighlight} from './useHighlight';
 
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[]
@@ -46,6 +47,8 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
 
     public rootMenu = inject<Menu | null>(ROOT_MENU, null);
     public parentMenu = inject<Menu | null>(MENU, null);
+    public subExpandedKeys?: Set<K>;
+    public highlight?: ReturnType<typeof useHighlight>;
 
     init() {
         provide(MENU, this);
@@ -53,6 +56,7 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
         // is root menu or not
         if (!this.rootMenu) {
             provide(ROOT_MENU, this);
+            this.highlight = useHighlight();
         }
     }
 }

package/components/menu/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 const sizes = ['large', 'small'] as const;
 
 const defaults = {
+    get transition() { return theme.transition.large },
     width: '200px',
     bgColor: '#262626',
     fontSize: '14px',
@@ -77,7 +78,7 @@ const defaults = {
     }
 };
 
-let menu: any;
+let menu: typeof defaults;
 setDefault(() => {
     menu = deepDefaults(theme, {menu: defaults}).menu;
 });
@@ -90,7 +91,7 @@ export function makeMenuStyles() {
     return css`
         &.k-menu {
             width: ${menu.width};
-            transition: width ${theme.transition};
+            transition: width ${menu.transition};
             background: ${menu.bgColor};
             font-size: ${menu.fontSize};
         }
@@ -243,7 +244,7 @@ export function makeItemStyles() {
         .k-menu-title {
             cursor: pointer;
             height: ${menu.item.height};
-            transition: all ${theme.transition};
+            transition: all ${menu.transition};
             &:hover {
                 color: ${menu.item.hoverColor};
             }
@@ -254,7 +255,7 @@ export function makeItemStyles() {
             align-items: center;
         }
         .k-menu-arrow {
-            transition: transform ${theme.transition};
+            transition: transform ${menu.transition};
             margin-left: ${menu.icon.gap};
         }
 
@@ -263,7 +264,7 @@ export function makeItemStyles() {
             > .k-menu-title {
                 color: ${menu.item.hoverColor};
                 .k-menu-arrow {
-                    transform: rotate(180deg);
+                    transform: rotateX(180deg);
                 }
             }
         }

package/components/menu/useExpanded.ts

@@ -3,7 +3,7 @@ import type {Menu, MenuItem} from './';
 import {inArray, addOrRemove} from '../table/useChecked';
 import {isDropdown} from './useDropdown';
 
-export function useExpanded(rootMenu: Menu, parentMenu: Menu & {subExpandedKeys?: Set<Key>}) {
+export function useExpanded(rootMenu: Menu, parentMenu: Menu) {
     const instance = useInstance() as MenuItem;
 
     onBeforeUnmount(removeSubExpandedKey);

package/components/menu/useHighlight.ts

@@ -1,52 +1,57 @@
-import {useInstance, createRef, onMounted, onUpdated, onUnmounted, Key} from 'intact';
+import {useInstance, Key} from 'intact';
 import type {Menu, MenuItem} from './';
+import {useRecordParent} from '../../hooks/useRecordComponent';
 import {inArray} from '../table/useChecked';
-// import {isEqualArray} from '../utils';
-
-export function useHighlight(
-    rootMenu: Menu & {highlightedKeys?: Key[]},
-    parentMenuItem: MenuItem | null
-) {
-    const instance = useInstance() as MenuItem;
-
-    // we can not watch selectedKey on before initializing rootMenu
-    // because rootMenu has initialized
-    // so call updateStatus here
-    updateStatus(rootMenu.get('selectedKey'));
-    rootMenu.watch('selectedKey', updateStatus);
-
-    function updateStatus(v: Key | undefined) {
-        const {key} = instance.get();
-        if (v !== key) return;
-
-        const items = [];
-        let parentItem = parentMenuItem;
-        while (parentItem) {
-            items.push(parentItem);
-            parentItem = parentItem.parentMenuItem;
+import {useState} from '../../hooks/useState';
+
+export const MENU_RECORD_KEY = 'MenuKeys';
+
+export function useHighlight() {
+    const instance = useInstance() as Menu;
+    const menuItems = useRecordParent<MenuItem>(MENU_RECORD_KEY);
+    const highlightedKeys = useState<Key[]>([]);
+
+    instance.watch('selectedKey', updateStatus, {presented: true});
+
+    function updateStatus(newValue: Key | undefined) {
+        for (let i = 0; i < menuItems.length; i++) {
+            const menuItem = menuItems[i];
+            const key = menuItem.get('key');
+
+            if (newValue !== key) continue;
+
+            const items = [];
+            let parentItem = menuItem.parentMenuItem;
+            while (parentItem) {
+                items.push(parentItem);
+                parentItem = parentItem.parentMenuItem;
+            }
+            
+            const expandedKeys = new Set(instance.get('expandedKeys'));
+            highlightedKeys.set(items.map(item => {
+                const key = item.get('key');
+                expandedKeys.add(key);
+                return key;
+            }));
+            instance.set('expandedKeys', Array.from(expandedKeys))
+
+            return;
         }
-        
-        const expandedKeys = new Set(rootMenu.get('expandedKeys'));
-        const highlightedKeys = items.map(item => {
-            const key = item.get('key');
-            expandedKeys.add(key);
-            return key;
-        });
-        rootMenu.highlightedKeys = highlightedKeys;
-        rootMenu.set('expandedKeys', Array.from(expandedKeys))
+
+        highlightedKeys.set([]);
     }
 
-    function isHighlighted() {
-        return inArray(rootMenu.highlightedKeys, instance.get('key'));
+    function isHighlighted(key: Key) {
+        return inArray(highlightedKeys.value, key);
     }
 
-    function select() {
-        rootMenu.set('selectedKey', instance.get('key'));
+    function select(key: Key) {
+        instance.set('selectedKey', key);
     }
 
-    function isSelected() {
-        return rootMenu.get('selectedKey') === instance.get('key');
+    function isSelected(key: Key) {
+        return instance.get('selectedKey') === key;
     }
 
-    return {isHighlighted, updateStatus, select, isSelected};
+    return {isHighlighted, select, isSelected};
 }

package/components/message/index.md

@@ -5,45 +5,43 @@ order: 12
 sidebar: doc
 ---
 
-> 如果你在Vue下全局安装KPC，可以通过`this.$message`引用到`Message`组件，所以你可以这样调用它的
+> 如果你在Vue下全局安装@king-design，可以通过`this.$message`引用到`Message`组件，所以你可以这样调用它的
 > 方法：`this.$message.success('test')`
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 提示内容 | `String` | `VNode` | `undefined` |
-| duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `Number` | `5000` |
+| content | 提示内容 | `string` | `VNode` | `undefined` |
+| duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `number` | `5000` |
 | type | 提示类型 | `"info"` | `"error"` | `"success"` | `"warning"` | `"info"` |
-| closable | 是否展示关闭按钮 | `Boolean` | `true` |
-| hideIcon | 是否隐藏文字前面的icon | `Boolean` | `false` |
-| key | 组件的`key`，当作为组件而非静态方法调用时，必须指定 | `String` | - |
-| value | 用于标识是否展示，可用`v-model`建立双向绑定 | `Boolean` | false |
-
+| closable | 是否展示关闭按钮 | `boolean` | `true` |
+| hideIcon | 是否隐藏文字前面的icon | `boolean` | `false` |
 
 # 静态方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| info | 普通提示 | `content, duration` | `config` | - |
-| error | 错误提示 | `content, duration` | `config` | - |
-| success | 成功提示 | `content, duration` | `config` | - |
-| warning | 警告提示 | `content, duration` | `config` | - |
+| info | 普通提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
+| error | 错误提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
+| success | 成功提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
+| warning | 警告提示 | <code>(content: string &#124; VNode &#124; Partial&lt;MessageProps&gt;, duration?: number) => void</code> | - |
 
 其中`content`和`duration`参数说明如下：
 
 | 参数名 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 提示的内容 | `String` &#124; `VNode` | `undefined` |
-| duration | 提示展示多长时间后自动关闭，当传入`0`时，提示将会一直展示。单位ms | `Number` | `5000` |
-
-上述静态方法的另一种重载方式是，传入`Object`作为参数，此时`config`可以配置如下：
-
-| 属性名 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| content | 提示内容 | `String` &#124; `VNode` | `undefined` |
-| duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `Number` | `5000` |
-| type | 提示类型 | `"info"` &#124; `"error"` &#124; `"success"` &#124; `"warning"` | `"info"` |
-| closable | 是否展示关闭按钮 | `Boolean` | `true` |
-| hideIcon | 是否隐藏文字前面的icon | `Boolean` | `false` |
-
+| content | 提示的内容，或者你也可以直接传入类型为<code>Partial&lt;MessageProps&gt;</code>的配置 | `string` &#124; `VNode` &#124; `Partial<MessageProps>` | `undefined` |
+| duration | 提示展示多长时间后自动关闭，当传入`0`时，提示将会一直展示。单位ms | `bumber` | `5000` |
+
+```ts
+import {VNode} from 'intact';
+
+export interface MessageProps {
+    content?: string | VNode 
+    duration?: number
+    type?: 'info' | 'error' | 'success' | 'warning'
+    closable?: boolean
+    hideIcon?: boolean
+}
+```

package/components/message/index.spec.ts

@@ -42,7 +42,7 @@ describe('Message', () => {
         expect(message1).eql(message);
 
         dispatchEvent(message, 'mouseleave');
-        await wait(300);
+        await wait(500);
         message1 = getElement('.k-message');
         expect(message1).eql(message);
 

package/components/message/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     top: `10px`,
     transform: `translateY(-10px)`,
     get bgColor() { return theme.color.bg },
@@ -28,7 +29,7 @@ const defaults = {
     },
 };
 
-let message: any;
+let message: typeof defaults;
 setDefault(() => {
     message = deepDefaults(theme, {message: defaults}).message;
 });
@@ -82,6 +83,9 @@ export function makeMessageStyles() {
             position: absolute;
             right: 0;
             top: 0;
+            &:hover {
+                background: none;
+            }
             .k-icon {
                 font-size: ${message.closeFontSize};
             }
@@ -120,10 +124,10 @@ export function makeMessageStyles() {
         }
         &.transition-enter-active,
         &.transition-leave-active {
-            transition: transform ${theme.transition}, opacity ${theme.transition};
+            transition: transform ${message.transition}, opacity ${message.transition};
         }
         &.transition-move {
-            transition: transform ${theme.transition};
+            transition: transform ${message.transition};
         }
     `;
 }

package/components/pagination/index.md

@@ -10,27 +10,19 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | size | 尺寸 | `"large"` | `"default"` | `"mini"` | `"small"` | `"default"` |
-| counts | 展示按钮个数 | `Number` | `7` |
-| total | 数据总条数 | `Number` | `0` |
-| value | 当前页码 | `Number` | `1` |
-| limit | 页面条数 | `Number` | `10` |
-| limits | 页面条数 | `Array<Number>` | `[10, 20, 50]` |
-| noBorder | 是否展示无边框样式，默认有边框 | `Boolean` | `false` |
-| simple | 是否展示简洁样式 | `Boolean` | `false` |
-| showTotal | 显示总条数 | `Boolean` | `true` |
-| showGoto | 显示快速跳转框 | `Boolean` | `false` |
-| showLimits | 是否显示每页条数选择框 | `Boolean` | `true` |
-
-# 方法
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| changePage | 切换页码 | 要切换到的页码 | `undefined` |
-| prev | 上一页 | - | `undefined` |
-| next | 下一页 | - | `undefined` |
+| counts | 展示按钮个数 | `number` | `7` |
+| total | 数据总条数 | `number` | `0` |
+| value | 当前页码 | `number` | `1` |
+| limit | 页面条数 | `number` | `10` |
+| limits | 页面条数 | `Array<number>` | `[10, 20, 50]` |
+| noBorder | 是否展示无边框样式，默认有边框 | `boolean` | `false` |
+| simple | 是否展示简洁样式 | `boolean` | `false` |
+| showTotal | 显示总条数 | `boolean` | `true` |
+| showGoto | 显示快速跳转框 | `boolean` | `false` |
+| showLimits | 是否显示每页条数选择框 | `boolean` | `true` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | `value`和`limit`变化时触发，同时变化不会重复触发 | `{value, limit}` |
+| change | `value`和`limit`变化时触发，同时变化不会重复触发 | `{value: number, limit: number}` |

package/components/pagination/styles.ts

@@ -52,7 +52,7 @@ const defaults = deepDefaults(
     }, {} as Record<Sizes, SizeStyles>)
 );
 
-let pagination: any;
+let pagination: typeof defaults;
 setDefault(() => {
     pagination = deepDefaults(theme, {pagination: defaults}).pagination;
 });
@@ -69,7 +69,7 @@ export function makeStyles() {
         }
         .k-pagination-ellipsis {
             background-color: transparent;
-            border: none;
+            border-color: transparent;
         }
         .k-btns {
             .k-btn {

package/components/progress/demos/customColor.md

@@ -3,7 +3,7 @@ title: 自定义颜色
 order: 3
 ---
 
-通过`color`设置进度条颜色， 类型`String` | `Array` | `Function`。
+通过`color`设置进度条颜色， 类型`string` | `Array` | `Function`。
 
 如果`color`设置为`Array`类型，它的数据格式如下：
 

package/components/progress/index.md

@@ -10,11 +10,17 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 类型 |`"bar"` | `"circle"` | `"bar"` |
-| percent | 当前百分比(0~100) | `Number` | `0` |
+| percent | 当前百分比(0~100) | `number` | `string` | `0` |
 | size | 尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
-| showOuterText | 是否展示后面的百分比 | `Boolean` | `true` |
-| showInnerText | 是否展示进度条上面的百分比 | `Boolean` | `false` |
+| showOuterText | 是否展示后面的百分比 | `boolean` | `true` |
+| showInnerText | 是否展示进度条上面的百分比 | `boolean` | `false` |
 | status | 进度条状态 | `"success"` | `"error"` | `"active"` | `"normal"` | `"warning"` | `"active"` |
-| strokeWidth | 进度条指示线的宽度，单位`px`，只对`type="circle"`圆形进度有效 | `Number` | `10` |
-| color | 进度条背景颜色，支持根据百分比自定义颜色。会覆盖status设置的颜色 | `String` | `Array` |`Function` | `undefined`
+| strokeWidth | 进度条指示线的宽度，单位`px`，只对`type="circle"`圆形进度有效 | `number` | `10` |
+| color | 进度条背景颜色，支持根据百分比自定义颜色。会覆盖status设置的颜色 | `string` | `Color[]` | `((percent: number) => string)` | `undefined`
 
+```ts
+type Color = {
+    percent: string | number
+    color: string
+}
+```

package/components/progress/styles.ts

@@ -62,9 +62,9 @@ const defaults = {
     }
 };
 
-let progress: any;
+let progress: typeof defaults;
 setDefault(() => {
-  progress = deepDefaults(theme, {progress: defaults}).progress;
+    progress = deepDefaults(theme, {progress: defaults}).progress;
 });
 
 export function makeStyles() {

package/components/radio/index.md

@@ -9,15 +9,12 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| value | 单选框取值，用于`v-model`进行双向绑定 | `*` | `false` |
-| trueValue | 单选框选中后的值 | `*` | `true` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| value | 单选框取值，用于`v-model`进行双向绑定 | `any` | `false` |
+| trueValue | 单选框选中后的值 | `any` | `true` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | 当点击组件导致值变化时触发，与`$change:value`事件有所不同的是，该事件只会触发一次，而且一定是用户点击行为触发的 | `value` |
-| click | 原生`click`事件 | `Event` |
-| mouseneter | 原生`mouseenter`事件 | `Event` |
-| mouseleave | 原生`mouseleave`事件 | `Event` |
+| change | 当点击组件导致值变化时触发 | `(value: any, e: MouseEvent) => void` |

package/components/radio/index.vdt

@@ -1,5 +1,6 @@
 import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
+import {Wave} from '../wave';
 
 const {
     className, disabled, trueValue, style,
@@ -41,17 +42,19 @@ const events = [
     ev-keypress={this.onKeypress}
     ev-click={this.fixClick}
 >
-    <span class="k-radio-wrapper">
-        <input
-            { ...getRestProps(this, rest) }
-            type="radio"
-            disabled={disabled}
-            value={trueValue}
-            tabindex="-1"
-            ref={this.elementRef}
-            checked={isChecked}
-            ev-click={this.onClick}
-        />
-    </span>
+    <Wave disabled={disabled} inset="-2px">
+        <span class="k-radio-wrapper">
+            <input
+                { ...getRestProps(this, rest) }
+                type="radio"
+                disabled={disabled}
+                value={trueValue}
+                tabindex="-1"
+                ref={this.elementRef}
+                checked={isChecked}
+                ev-click={this.onClick}
+            />
+        </span>
+    </Wave>
     <span class="k-radio-text" v-if={children}>{children}</span>
 </label>

package/components/radio/styles.ts

@@ -5,9 +5,9 @@ import '../../styles/global';
 
 const defaults = {
     width: '14px',
-    get borderColor() {
-        return theme.color.darkBorder;
-    },
+    get transition() { return theme.transition.small },
+    get borderColor() { return theme.color.darkBorder; },
+    get hoverBorderColor() { return theme.color.primary; },
     bgColor: '#fff',
     textGap: '8px',
     innerWidth: '8px',
@@ -21,7 +21,7 @@ const defaults = {
     }
 };
 
-let radio: any;
+let radio: typeof defaults;
 setDefault(() => {
     radio = deepDefaults(theme, {radio: defaults}).radio;
 });
@@ -33,13 +33,11 @@ export function makeStyles() {
         cursor: pointer;
         vertical-align: middle;
         .k-radio-wrapper {
-            display: inline-block;
             width: ${radio.width};
             height: ${radio.width};
-            vertical-align: middle;
             border: 1px solid ${radio.borderColor};
             border-radius: 50%;
-            transition: all ${theme.transition} ;
+            transition: all ${radio.transition} ;
             position: relative;
             background: ${radio.bgColor};
             flex: 0 0 auto;
@@ -57,7 +55,7 @@ export function makeStyles() {
                 border-radius: 50%;
                 background-color: ${radio.checkedColor};
                 transform: scale(0);
-                transition: all ${theme.transition};
+                transition: all ${radio.transition};
             }    
         }
         input {
@@ -68,8 +66,6 @@ export function makeStyles() {
             position: absolute;
         }    
         .k-radio-text {
-            vertical-align: middle;
-            display: inline-block;
             margin-left: ${radio.textGap};
             flex: 0 1 auto;
         }

package/components/rate/index.md

@@ -9,11 +9,11 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件取值 | `Number` | `0` |
-| count | 星星的个数 | `Number` | `5` |
-| disabled | 是否变为只读状态 | `Boolean` | `false` |
-| half | 是否支持选中半星 | `Boolean` | `false` |
-| clearable | 是否可以清空值 | `Boolean` | `false` |
+| value | 组件取值 | `number` | `0` |
+| count | 星星的个数 | `number` | `5` |
+| disabled | 是否变为只读状态 | `boolean` | `false` |
+| half | 是否支持选中半星 | `boolean` | `false` |
+| clearable | 是否可以清空值 | `boolean` | `false` |
 
 # 扩展点