chore(SideBar): fix badgeProps TS type (#1546)

* chore: badgeProps TS type * chore: fix error * fix: class
Tencent · Aug 27, 2024 · 22620f3 · 22620f3
1 parent 8970114
commit 22620f3
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 28 deletions.
diff --git a/src/side-bar/side-bar-item.tsx b/src/side-bar/side-bar-item.tsx
@@ -1,19 +1,19 @@
 import { defineComponent, getCurrentInstance, ComponentPublicInstance, computed, inject, onUnmounted } from 'vue';
-import TBadge from '../badge';
-import SideBarItemProps from './side-bar-item-props';
+import props from './side-bar-item-props';
 import { TdSideBarItemProps } from './type';
+import TBadge from '../badge';
 import { useTNodeJSX } from '../hooks/tnode';
 
 import config from '../config';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
-const name = `${prefix}-side-bar-item`;
 
 export default defineComponent({
-  name,
-  components: { TBadge },
-  props: SideBarItemProps,
+  name: `${prefix}-side-bar-item`,
+  props,
   setup(props) {
+    const sideBarItemClass = usePrefixClass('side-bar-item');
     const renderTNodeJSX = useTNodeJSX();
     const internalInstance = getCurrentInstance();
     const proxy = internalInstance.proxy as ComponentPublicInstance<TdSideBarItemProps>;
@@ -23,9 +23,9 @@ export default defineComponent({
     const isActive = computed(() => proxy.value === sideBarProvide.currentValue.value);
 
     const rootClassName = computed(() => [
-      name,
-      { [`${name}--active`]: isActive.value },
-      { [`${name}--disabled`]: props.disabled },
+      sideBarItemClass.value,
+      { [`${sideBarItemClass.value}--active`]: isActive.value },
+      { [`${sideBarItemClass.value}--disabled`]: props.disabled },
     ]);
 
     const onClick = (e: MouseEvent) => {
@@ -38,25 +38,28 @@ export default defineComponent({
     });
 
     return () => {
-      const { badgeProps, label } = props;
       const renderIconNode = () => {
         const iconNode = renderTNodeJSX('icon');
         if (!iconNode) {
           return null;
         }
-        return <div class={`${name}__icon`}>{iconNode}</div>;
+        return <div class={`${sideBarItemClass.value}__icon`}>{iconNode}</div>;
       };
       return (
         <div class={rootClassName.value} onClick={onClick}>
           {isActive.value && (
             <div>
-              <div class={`${name}__line`}></div>
-              <div class={`${name}__prefix`}></div>
-              <div class={`${name}__suffix`}></div>
+              <div class={`${sideBarItemClass.value}__line`}></div>
+              <div class={`${sideBarItemClass.value}__prefix`}></div>
+              <div class={`${sideBarItemClass.value}__suffix`}></div>
             </div>
           )}
           {renderIconNode()}
-          {badgeProps ? <t-badge {...badgeProps} content={label}></t-badge> : <div>{label}</div>}
+          {props.badgeProps ? (
+            <TBadge {...(props.badgeProps as TdSideBarItemProps['badgeProps'])} content={props.label} />
+          ) : (
+            <div>{props.label}</div>
+          )}
         </div>
       );
     };

diff --git a/src/side-bar/side-bar.en-US.md b/src/side-bar/side-bar.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### SideBar Props
 
 name | type | default | description | required
@@ -17,18 +18,19 @@ name | params | description
 change | `(value: number \| string)` | \-
 click | `(value: number \| string, label: string)` | \-
 
+
 ### SideBarItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-badgeProps | Object | - | \- | N
+badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/side-bar/type.ts) | N
 disabled | Boolean | false | \- | N
 icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String | - | \- | N
 value | String / Number | - | \- | N
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +45,4 @@ Name | Default Value | Description
 --td-side-bar-icon-size | 20px | - 
 --td-side-bar-item-height | 56px | - 
 --td-side-bar-item-line-height | 24px | - 
---td-side-bar-width | 103px | - 
+--td-side-bar-width | 103px | -
diff --git a/src/side-bar/side-bar.md b/src/side-bar/side-bar.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### SideBar Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 value | String / Number | - | 选项值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | String / Number | - | 选项值。非受控属性 | N
@@ -17,18 +18,19 @@ onClick | Function |  | TS 类型：`(value: number \| string, label: string) =>
 change | `(value: number \| string)` | 选项值发生变化时触发
 click | `(value: number \| string, label: string)` | 点击选项时触发
 
+
 ### SideBarItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-badgeProps | Object | - | 透传至 Badge 组件 | N
+badgeProps | Object | - | 透传至 Badge 组件。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/side-bar/type.ts) | N
 disabled | Boolean | false | 是否禁用 | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String | - | 展示的标签 | N
 value | String / Number | - | 当前选项的值 | N
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -43,4 +45,4 @@ value | String / Number | - | 当前选项的值 | N
 --td-side-bar-icon-size | 20px | - 
 --td-side-bar-item-height | 56px | - 
 --td-side-bar-item-line-height | 24px | - 
---td-side-bar-width | 103px | - 
+--td-side-bar-width | 103px | -
diff --git a/src/side-bar/side-bar.tsx b/src/side-bar/side-bar.tsx
@@ -4,16 +4,17 @@ import props from './props';
 import { TdSideBarProps } from './type';
 import { useDefault } from '../shared';
 import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
-const name = `${prefix}-side-bar`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-side-bar`,
   props,
   emits: ['update:value', 'update:modelValue', 'change'],
   setup(props, context) {
     const renderTNodeJSX = useTNodeJSX();
+    const sideBarClass = usePrefixClass('side-bar');
     const [currentValue, setCurrentValue] = useDefault<TdSideBarProps['value'], TdSideBarProps>(
       props,
       context.emit,
@@ -46,9 +47,9 @@ export default defineComponent({
     });
 
     return () => (
-      <div class={`${name}`}>
+      <div class={`${sideBarClass.value}`}>
         {renderTNodeJSX('default')}
-        <div class={`${name}__padding`}></div>
+        <div class={`${sideBarClass.value}__padding`}></div>
       </div>
     );
   },

diff --git a/src/side-bar/type.ts b/src/side-bar/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { BadgeProps } from '../badge';
 import { TNode } from '../common';
 
 export interface TdSideBarProps {
@@ -33,7 +34,7 @@ export interface TdSideBarItemProps {
   /**
    * 透传至 Badge 组件
    */
-  badgeProps?: object;
+  badgeProps?: BadgeProps;
   /**
    * 是否禁用
    * @default false