feat(AddressList): support multiple selection (#12887)

packages/vant/src/address-list/AddressList.tsx

@@ -1,4 +1,9 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import {
+  defineComponent,
+  computed,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue';
 
 // Utils
 import {
@@ -12,13 +17,16 @@ import {
 // Components
 import { Button } from '../button';
 import { RadioGroup } from '../radio-group';
+import { CheckboxGroup } from '../checkbox-group';
 import AddressListItem, { AddressListAddress } from './AddressListItem';
 
 const [name, bem, t] = createNamespace('address-list');
 
 export const addressListProps = {
   list: makeArrayProp<AddressListAddress>(),
-  modelValue: numericProp,
+  modelValue: [...numericProp, Array] as PropType<
+    string | number | Array<string | number>
+  >,
   switchable: truthProp,
   disabledText: String,
   disabledList: makeArrayProp<AddressListAddress>(),
@@ -46,6 +54,8 @@ export default defineComponent({
   ],
 
   setup(props, { slots, emit }) {
+    const singleChoice = computed(() => !Array.isArray(props.modelValue));
+
     const renderItem = (
       item: AddressListAddress,
       index: number,
@@ -61,7 +71,19 @@ export default defineComponent({
         emit(disabled ? 'selectDisabled' : 'select', item, index);
 
         if (!disabled) {
-          emit('update:modelValue', item.id);
+          if (singleChoice.value) {
+            emit('update:modelValue', item.id);
+          } else {
+            const value = props.modelValue as Array<string | number>;
+            if (value.includes(item.id)) {
+              emit(
+                'update:modelValue',
+                value.filter((id) => id !== item.id),
+              );
+            } else {
+              emit('update:modelValue', [...value, item.id]);
+            }
+          }
         }
       };
 
@@ -75,6 +97,7 @@ export default defineComponent({
           address={item}
           disabled={disabled}
           switchable={props.switchable}
+          singleChoice={singleChoice.value}
           defaultTagText={props.defaultTagText}
           rightIcon={props.rightIcon}
           onEdit={onEdit}
@@ -114,7 +137,11 @@ export default defineComponent({
       return (
         <div class={bem()}>
           {slots.top?.()}
-          <RadioGroup modelValue={props.modelValue}>{List}</RadioGroup>
+          {!singleChoice.value && Array.isArray(props.modelValue) ? (
+            <CheckboxGroup modelValue={props.modelValue}>{List}</CheckboxGroup>
+          ) : (
+            <RadioGroup modelValue={props.modelValue}>{List}</RadioGroup>
+          )}
           {DisabledText}
           {DisabledList}
           {slots.default?.()}

packages/vant/src/address-list/AddressListItem.tsx

@@ -14,6 +14,7 @@ import { Tag } from '../tag';
 import { Icon } from '../icon';
 import { Cell } from '../cell';
 import { Radio } from '../radio';
+import { Checkbox } from '../checkbox';
 
 const [name, bem] = createNamespace('address-item');
 
@@ -32,6 +33,7 @@ export default defineComponent({
     address: makeRequiredProp<PropType<AddressListAddress>>(Object),
     disabled: Boolean,
     switchable: Boolean,
+    singleChoice: Boolean,
     defaultTagText: String,
     rightIcon: makeStringProp('edit'),
   },
@@ -72,7 +74,7 @@ export default defineComponent({
     };
 
     const renderContent = () => {
-      const { address, disabled, switchable } = props;
+      const { address, disabled, switchable, singleChoice } = props;
 
       const Info = [
         <div class={bem('name')}>
@@ -83,11 +85,19 @@ export default defineComponent({
       ];
 
       if (switchable && !disabled) {
-        return (
-          <Radio name={address.id} iconSize={18}>
-            {Info}
-          </Radio>
-        );
+        if (singleChoice) {
+          return (
+            <Radio name={address.id} iconSize={18}>
+              {Info}
+            </Radio>
+          );
+        } else {
+          return (
+            <Checkbox name={address.id} iconSize={18}>
+              {Info}
+            </Checkbox>
+          );
+        }
       }
 
       return Info;

packages/vant/src/address-list/README.md

@@ -83,7 +83,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| v-model | Id of chosen address | _number \| string_ | - |
+| v-model | Id of chosen address, support multiple selection (type is `[]`) | _number \| string \| number[] \| string[]_ | - |
 | list | Address list | _Address[]_ | `[]` |
 | disabled-list | Disabled address list | _Address[]_ | `[]` |
 | disabled-text | Disabled text | _string_ | - |

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

@@ -83,7 +83,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 当前选中地址的 id | _number \| string_ | - |
+| v-model | 当前选中地址的 id，支持多选（类型为 `[]`） | _number \| string \| number[] \| string[]_ | - |
 | list | 地址列表 | _AddressListAddress[]_ | `[]` |
 | disabled-list | 不可配送地址列表 | _AddressListAddress[]_ | `[]` |
 | disabled-text | 不可配送提示文案 | _string_ | - |

packages/vant/src/address-list/test/index.spec.ts

@@ -16,7 +16,7 @@ const list = [
   },
 ];
 
-test('should not render Radio when switchable is false', async () => {
+test('should not render Radio or Checkbox when switchable is false', async () => {
   const wrapper = mount(AddressList, {
     props: {
       list,
@@ -25,6 +25,7 @@ test('should not render Radio when switchable is false', async () => {
   });
 
   expect(wrapper.find('.van-radio').exists()).toBeFalsy();
+  expect(wrapper.find('.van-checkbox').exists()).toBeFalsy();
 });
 
 test('should emit select event after clicking radio icon', () => {
@@ -39,6 +40,39 @@ test('should emit select event after clicking radio icon', () => {
   expect(wrapper.emitted('select')![0]).toEqual([list[0], 0]);
 });
 
+test('should emit select event after clicking checkbox icon', () => {
+  const wrapper = mount(AddressList, {
+    props: {
+      list,
+      modelValue: [],
+    },
+  });
+
+  wrapper.find('.van-checkbox').trigger('click');
+
+  expect(wrapper.emitted('select')![0]).toEqual([list[0], 0]);
+});
+
+test('should emit "update:modelValue" event when checkbox is clicked', async () => {
+  const wrapper = mount(AddressList, {
+    props: {
+      list,
+      modelValue: [],
+    },
+  });
+
+  const items = wrapper.findAll('.van-checkbox');
+
+  await items[0].trigger('click');
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual([[list[0].id]]);
+
+  await items[1].trigger('click');
+  expect(wrapper.emitted('update:modelValue')![1]).toEqual([[list[1].id]]);
+
+  await items[0].trigger('click');
+  expect(wrapper.emitted('update:modelValue')![2]).toEqual([[list[0].id]]);
+});
+
 test('should emit clickItem event when item is clicked', () => {
   const wrapper = mount(AddressList, {
     props: {
@@ -59,3 +93,24 @@ test('should render tag slot correctly', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should bind value correctly when value is an array', () => {
+  const wrapper = mount(AddressList, {
+    props: {
+      list,
+      modelValue: list.map((l) => l.id),
+    },
+  });
+
+  expect(wrapper.find('.van-checkbox-group').exists());
+});
+
+test('should bind value correctly when value is not an array', () => {
+  const wrapper = mount(AddressList, {
+    props: {
+      list,
+      modelValue: list[0].id,
+    },
+  });
+  expect(wrapper.find('.van-radio-group').exists());
+});