diff --git a/src/address-list/Item.js b/src/address-list/Item.tsx similarity index 73% rename from src/address-list/Item.js rename to src/address-list/Item.tsx index 5e8331b20..1bed19ad9 100644 --- a/src/address-list/Item.js +++ b/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, + 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 ( {props.defaultTagText} @@ -50,19 +63,19 @@ export default createComponent({ }; const renderContent = () => { - const { data, disabled, switchable } = props; + const { address, disabled, switchable } = props; const Info = [
- {`${data.name} ${data.tel}`} + {`${address.name} ${address.tel}`} {renderTag()}
, -
{data.address}
, +
{address.address}
, ]; if (switchable && !disabled) { return ( - + {Info} ); @@ -84,7 +97,7 @@ export default createComponent({ border={false} valueClass={bem('value')} /> - {slots.bottom?.({ ...props.data, disabled })} + {slots.bottom?.({ ...props.address, disabled })} ); }; diff --git a/src/address-list/README.md b/src/address-list/README.md index 6a8230b8f..6f14b4a6c 100644 --- a/src/address-list/README.md +++ b/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 | -| select | Emitted when an address is selected | item: address object,index | -| edit-disabled | Emitted when the edit icon of disabled address is clicked | item: address object,index | -| select-disabled | Emitted when a disabled address is selected | item: address object,index | -| click-item | Emitted when an address item 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, index: number_ | +| 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, index: number_ | +| 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 | -| ----------- | ------------------------------ | --------- | -| default | Custom content after list | - | -| top | Custom content before list | - | -| item-bottom | Custom content after list item | item | +| Name | Description | SlotProps | +| ----------- | ------------------------------ | --------------- | +| default | Custom content after list | - | +| top | Custom content before list | - | +| item-bottom | Custom content after list item | _item: Address_ | ### Less Variables diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index 805cb7528..ca8dcc00f 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -91,14 +91,14 @@ export default { ### Events -| 事件名 | 说明 | 回调参数 | -| --------------- | ------------------------ | --------------------------- | -| add | 点击新增按钮时触发 | - | -| edit | 点击编辑按钮时触发 | item: 地址对象,index: 索引 | -| select | 切换选中的地址时触发 | item: 地址对象,index: 索引 | -| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象,index: 索引 | -| select-disabled | 选中不可配送的地址时触发 | item: 地址对象,index: 索引 | -| click-item | 点击任意地址时触发 | item: 地址对象,index: 索引 | +| 事件名 | 说明 | 回调参数 | +| --------------- | ------------------------ | ------------------------------ | +| add | 点击新增按钮时触发 | - | +| edit | 点击编辑按钮时触发 | _item: Address, index: number_ | +| select | 切换选中的地址时触发 | _item: Address, index: number_ | +| edit-disabled | 编辑不可配送的地址时触发 | _item: Address, index: number_ | +| select-disabled | 选中不可配送的地址时触发 | _item: Address, index: number_ | +| click-item | 点击任意地址时触发 | _item: Address, index: number_ | ### Address 数据结构 @@ -112,11 +112,11 @@ export default { ### Slots -| 名称 | 说明 | 参数 | -| ----------- | -------------------- | ---------- | -| default | 在列表下方插入内容 | - | -| top | 在顶部插入内容 | - | -| item-bottom | 在列表项底部插入内容 | 列表项的值 | +| 名称 | 说明 | 参数 | +| ----------- | -------------------- | --------------- | +| default | 在列表下方插入内容 | - | +| top | 在顶部插入内容 | - | +| item-bottom | 在列表项底部插入内容 | _item: Address_ | ### 样式变量 diff --git a/src/address-list/index.js b/src/address-list/index.tsx similarity index 83% rename from src/address-list/index.js rename to src/address-list/index.tsx index 2cd7b86dd..21ce801c6 100644 --- a/src/address-list/index.js +++ b/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, + default: () => [], + }, + disabledList: { + type: Array as PropType, + 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)); } diff --git a/src/address-list/test/index.spec.js b/src/address-list/test/index.spec.ts similarity index 100% rename from src/address-list/test/index.spec.js rename to src/address-list/test/index.spec.ts diff --git a/src/vue-tsx-shim.d.ts b/src/vue-tsx-shim.d.ts index bd0e93017..5ca4491d6 100644 --- a/src/vue-tsx-shim.d.ts +++ b/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;