types(AddressList): use tsx (#8143)

src/address-list/Item.tsx

@@ -1,3 +1,5 @@
+import { PropType } from 'vue';
+
 // Utils
 import { createNamespace } from '../utils';
 
@@ -9,12 +11,23 @@ import Radio from '../radio';
 
 const [createComponent, bem] = createNamespace('address-item');
 
+export type AddressListItem = {
+  id: number | string;
+  tel: number | string;
+  name: string;
+  address: string;
+  isDefault?: boolean;
+};
+
 export default createComponent({
   props: {
-    data: Object,
     disabled: Boolean,
     switchable: Boolean,
     defaultTagText: String,
+    address: {
+      type: Object as PropType<AddressListItem>,
+      required: true,
+    },
   },
 
   emits: ['edit', 'click', 'select'],
@@ -40,7 +53,7 @@ export default createComponent({
     );
 
     const renderTag = () => {
-      if (props.data.isDefault && props.defaultTagText) {
+      if (props.address.isDefault && props.defaultTagText) {
         return (
           <Tag type="danger" round class={bem('tag')}>
             {props.defaultTagText}
@@ -50,19 +63,19 @@ export default createComponent({
     };
 
     const renderContent = () => {
-      const { data, disabled, switchable } = props;
+      const { address, disabled, switchable } = props;
 
       const Info = [
         <div class={bem('name')}>
-          {`${data.name} ${data.tel}`}
+          {`${address.name} ${address.tel}`}
           {renderTag()}
         </div>,
-        <div class={bem('address')}>{data.address}</div>,
+        <div class={bem('address')}>{address.address}</div>,
       ];
 
       if (switchable && !disabled) {
         return (
-          <Radio name={data.id} iconSize={18}>
+          <Radio name={address.id} iconSize={18}>
             {Info}
           </Radio>
         );
@@ -84,7 +97,7 @@ export default createComponent({
             border={false}
             valueClass={bem('value')}
           />
-          {slots.bottom?.({ ...props.data, disabled })}
+          {slots.bottom?.({ ...props.address, disabled })}
         </div>
       );
     };

src/address-list/README.md

@@ -90,11 +90,11 @@ export default {
 | Event | Description | Arguments |
 | --- | --- | --- |
 | add | Emitted when the add button is clicked | - |
-| edit | Emitted when the edit icon of address is clicked | item: address object，index |
+| edit | Emitted when the edit icon of address is clicked | _item: Address, index: number_ |
-| select | Emitted when an address is selected | item: address object，index |
+| select | Emitted when an address is selected | _item: Address, index: number_ |
-| edit-disabled | Emitted when the edit icon of disabled address is clicked | item: address object，index |
+| edit-disabled | Emitted when the edit icon of disabled address is clicked | _item: Address, index: number_ |
-| select-disabled | Emitted when a disabled address is selected | item: address object，index |
+| select-disabled | Emitted when a disabled address is selected | _item: Address, index: number_ |
-| click-item | Emitted when an address item is clicked | item: address object，index |
+| click-item | Emitted when an address item is clicked | _item: Address, index: number_ |
 
 ### Data Structure of Address
 
@@ -108,11 +108,11 @@ export default {
 
 ### Slots
 
-| Name        | Description                    | SlotProps |
+| Name        | Description                    | SlotProps       |
-| ----------- | ------------------------------ | --------- |
+| ----------- | ------------------------------ | --------------- |
-| default     | Custom content after list      | -         |
+| default     | Custom content after list      | -               |
-| top         | Custom content before list     | -         |
+| top         | Custom content before list     | -               |
-| item-bottom | Custom content after list item | item      |
+| item-bottom | Custom content after list item | _item: Address_ |
 
 ### Less Variables
 

src/address-list/README.zh-CN.md

@@ -91,14 +91,14 @@ export default {
 
 ### Events
 
-| 事件名          | 说明                     | 回调参数                    |
+| 事件名          | 说明                     | 回调参数                       |
-| --------------- | ------------------------ | --------------------------- |
+| --------------- | ------------------------ | ------------------------------ |
-| add             | 点击新增按钮时触发       | -                           |
+| add             | 点击新增按钮时触发       | -                              |
-| edit            | 点击编辑按钮时触发       | item: 地址对象，index: 索引 |
+| edit            | 点击编辑按钮时触发       | _item: Address, index: number_ |
-| select          | 切换选中的地址时触发     | item: 地址对象，index: 索引 |
+| select          | 切换选中的地址时触发     | _item: Address, index: number_ |
-| edit-disabled   | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 |
+| edit-disabled   | 编辑不可配送的地址时触发 | _item: Address, index: number_ |
-| select-disabled | 选中不可配送的地址时触发 | item: 地址对象，index: 索引 |
+| select-disabled | 选中不可配送的地址时触发 | _item: Address, index: number_ |
-| click-item      | 点击任意地址时触发       | item: 地址对象，index: 索引 |
+| click-item      | 点击任意地址时触发       | _item: Address, index: number_ |
 
 ### Address 数据结构
 
@@ -112,11 +112,11 @@ export default {
 
 ### Slots
 
-| 名称        | 说明                 | 参数       |
+| 名称        | 说明                 | 参数            |
-| ----------- | -------------------- | ---------- |
+| ----------- | -------------------- | --------------- |
-| default     | 在列表下方插入内容   | -          |
+| default     | 在列表下方插入内容   | -               |
-| top         | 在顶部插入内容       | -          |
+| top         | 在顶部插入内容       | -               |
-| item-bottom | 在列表项底部插入内容 | 列表项的值 |
+| item-bottom | 在列表项底部插入内容 | _item: Address_ |
 
 ### 样式变量
 

src/address-list/index.tsx

@@ -1,21 +1,29 @@
+import { PropType } from 'vue';
+
 // Utils
 import { createNamespace } from '../utils';
 
 // Components
 import Button from '../button';
 import RadioGroup from '../radio-group';
-import AddressItem from './Item';
+import AddressItem, { AddressListItem } from './Item';
 
 const [createComponent, bem, t] = createNamespace('address-list');
 
 export default createComponent({
   props: {
-    list: Array,
     modelValue: [Number, String],
-    disabledList: Array,
     disabledText: String,
     addButtonText: String,
     defaultTagText: String,
+    list: {
+      type: Array as PropType<AddressListItem[]>,
+      default: () => [],
+    },
+    disabledList: {
+      type: Array as PropType<AddressListItem[]>,
+      default: () => [],
+    },
     switchable: {
       type: Boolean,
       default: true,
@@ -33,7 +41,11 @@ export default createComponent({
   ],
 
   setup(props, { slots, emit }) {
-    const renderItem = (item, index, disabled) => {
+    const renderItem = (
+      item: AddressListItem,
+      index: number,
+      disabled?: boolean
+    ) => {
       const onEdit = () => {
         const name = disabled ? 'edit-disabled' : 'edit';
         emit(name, item, index);
@@ -58,7 +70,7 @@ export default createComponent({
             bottom: slots['item-bottom'],
           }}
           key={item.id}
-          data={item}
+          address={item}
           disabled={disabled}
           switchable={props.switchable}
           defaultTagText={props.defaultTagText}
@@ -69,7 +81,7 @@ export default createComponent({
       );
     };
 
-    const renderList = (list, disabled) => {
+    const renderList = (list: AddressListItem[], disabled?: boolean) => {
       if (list) {
         return list.map((item, index) => renderItem(item, index, disabled));
       }

src/vue-tsx-shim.d.ts

@@ -10,12 +10,14 @@ declare module 'vue' {
     // see: https://github.com/vuejs/vue-next/issues/1553
     //      https://github.com/vuejs/vue-next/issues/3029
     onBlur?: EventHandler;
+    onEdit?: EventHandler;
     onFocus?: EventHandler;
     onInput?: EventHandler;
     onClick?: EventHandler;
     onCancel?: EventHandler;
     onClosed?: EventHandler;
     onChange?: EventHandler;
+    onSelect?: EventHandler;
     onToggle?: EventHandler;
     onConfirm?: EventHandler;
     onClickStep?: EventHandler;