| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- import { use } from '../utils';
- import { emit, inherit } from '../utils/functional';
- import Button from '../button';
- import RadioGroup from '../radio-group';
- import AddressItem, { AddressItemData } from './Item';
- // Types
- import { CreateElement, RenderContext } from 'vue/types';
- import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
- export type AddressListProps = {
- value?: string | number;
- switchable: boolean;
- disabledText?: string;
- addButtonText?: string;
- list: AddressItemData[];
- disabledList: AddressItemData[];
- };
- export type AddressListSlots = DefaultSlots & {
- top?: ScopedSlot;
- };
- const [sfc, bem, t] = use('address-list');
- function AddressList(
- h: CreateElement,
- props: AddressListProps,
- slots: AddressListSlots,
- ctx: RenderContext<AddressListProps>
- ) {
- const getList = (list: AddressItemData[], disabled?: boolean) =>
- list.map((item, index) => (
- <AddressItem
- data={item}
- key={item.id}
- disabled={disabled}
- switchable={props.switchable && !disabled}
- onSelect={() => {
- emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
- }}
- onEdit={() => {
- emit(ctx, disabled ? 'edit-disabled' : 'edit', item, index);
- }}
- />
- ));
- const List = getList(props.list);
- const DisabledList = getList(props.disabledList, true);
- return (
- <div class={bem()} {...inherit(ctx)}>
- {slots.top && slots.top()}
- <RadioGroup
- value={props.value}
- onInput={(event: Event) => {
- emit(ctx, 'input', event);
- }}
- >
- {List}
- </RadioGroup>
- {props.disabledText && (
- <div class={bem('disabled-text')}>{props.disabledText}</div>
- )}
- {DisabledList}
- {slots.default && slots.default()}
- <Button
- square
- size="large"
- type="danger"
- class={bem('add')}
- text={props.addButtonText || t('add')}
- onClick={() => {
- emit(ctx, 'add');
- }}
- />
- </div>
- );
- }
- AddressList.props = {
- list: Array,
- disabledList: Array,
- disabledText: String,
- addButtonText: String,
- value: [String, Number],
- switchable: {
- type: Boolean,
- default: true
- }
- };
- export default sfc<AddressListProps>(AddressList);
|