feat: migrate Contact component

components.js

@@ -70,4 +70,7 @@ module.exports = [
   'address-list',
   'area',
   'card',
+  'contact-card',
+  'contact-edit',
+  'contact-list',
 ];

src/contact-card/demo/index.vue

@@ -8,7 +8,7 @@
         @click="showList = true"
       />
 
-      <van-popup v-model="showList" position="bottom" :lazy-render="false">
+      <van-popup v-model:show="showList" position="bottom" :lazy-render="false">
         <van-contact-list
           v-model="chosenContactId"
           :list="list"
@@ -19,7 +19,7 @@
         />
       </van-popup>
 
-      <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
+      <van-popup v-model:show="showEdit" position="bottom" :lazy-render="false">
         <van-contact-edit
           show-set-default
           :set-default-label="t('defaultLabel')"

src/contact-card/index.tsx

@@ -1,77 +0,0 @@
-// Utils
-import { createNamespace } from '../utils';
-import { emit, inherit } from '../utils/functional';
-
-// Components
-import Cell from '../cell';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
-
-const [createComponent, bem, t] = createNamespace('contact-card');
-
-export type ContactCardProps = {
-  tel?: string;
-  name?: string;
-  type?: string;
-  addText: string;
-  editable: boolean;
-};
-
-function ContactCard(
-  h: CreateElement,
-  props: ContactCardProps,
-  slots: DefaultSlots,
-  ctx: RenderContext<ContactCardProps>
-) {
-  const { type, editable } = props;
-
-  function onClick(event: Event) {
-    if (editable) {
-      emit(ctx, 'click', event);
-    }
-  }
-
-  function Content() {
-    if (type === 'add') {
-      return props.addText || t('addText');
-    }
-
-    return [
-      <div>{`${t('name')}：${props.name}`}</div>,
-      <div>{`${t('tel')}：${props.tel}`}</div>,
-    ];
-  }
-
-  return (
-    <Cell
-      center
-      border={false}
-      isLink={editable}
-      class={bem([type])}
-      valueClass={bem('value')}
-      icon={type === 'edit' ? 'contact' : 'add-square'}
-      onClick={onClick}
-      {...inherit(ctx)}
-    >
-      {Content()}
-    </Cell>
-  );
-}
-
-ContactCard.props = {
-  tel: String,
-  name: String,
-  addText: String,
-  editable: {
-    type: Boolean,
-    default: true,
-  },
-  type: {
-    type: String,
-    default: 'add',
-  },
-};
-
-export default createComponent<ContactCardProps>(ContactCard);

src/contact-edit/index.js

@@ -33,6 +33,8 @@ export default createComponent({
     },
   },
 
+  emits: ['save', 'delete', 'change-default'],
+
   data() {
     return {
       data: {
@@ -121,19 +123,21 @@ export default createComponent({
         </div>
         {this.showSetDefault && (
           <Cell
+            v-slots={{
+              'right-icon': () => (
+                <Switch
+                  vModel={data.isDefault}
+                  size={24}
+                  onChange={(event) => {
+                    this.$emit('change-default', event);
+                  }}
+                />
+              ),
+            }}
             title={this.setDefaultLabel}
             class={bem('switch-cell')}
             border={false}
-          >
+          ></Cell>
-            <Switch
-              vModel={data.isDefault}
-              size={24}
-              slot="right-icon"
-              onChange={(event) => {
-                this.$emit('change-default', event);
-              }}
-            />
-          </Cell>
         )}
         <div class={bem('buttons')}>
           <Button

src/contact-list/index.tsx

@@ -1,131 +0,0 @@
-// Utils
-import { createNamespace } from '../utils';
-import { RED } from '../utils/constant';
-import { emit, inherit } from '../utils/functional';
-
-// Components
-import Tag from '../tag';
-import Icon from '../icon';
-import Cell from '../cell';
-import Radio from '../radio';
-import Button from '../button';
-import RadioGroup from '../radio-group';
-
-// Types
-import { DefaultSlots } from '../utils/types';
-import { CreateElement, RenderContext, VNode } from 'vue/types';
-
-export type ContactListItem = {
-  id: string | number;
-  tel: string | number;
-  name: string;
-  isDefault: boolean;
-};
-
-export type ContactListProps = {
-  value?: any;
-  list?: ContactListItem[];
-  addText?: string;
-  defaultTagText?: string;
-};
-
-const [createComponent, bem, t] = createNamespace('contact-list');
-
-function ContactList(
-  h: CreateElement,
-  props: ContactListProps,
-  slots: DefaultSlots,
-  ctx: RenderContext<ContactListProps>
-) {
-  const List =
-    props.list &&
-    props.list.map((item, index) => {
-      function onClick() {
-        emit(ctx, 'input', item.id);
-        emit(ctx, 'select', item, index);
-      }
-
-      function RightIcon() {
-        return (
-          <Radio
-            name={item.id}
-            iconSize={16}
-            checkedColor={RED}
-            onClick={onClick}
-          />
-        );
-      }
-
-      function LeftIcon() {
-        return (
-          <Icon
-            name="edit"
-            class={bem('edit')}
-            onClick={(event) => {
-              event.stopPropagation();
-              emit(ctx, 'edit', item, index);
-            }}
-          />
-        );
-      }
-
-      function Content() {
-        const nodes = ([`${item.name}，${item.tel}`] as unknown[]) as VNode[];
-
-        if (item.isDefault && props.defaultTagText) {
-          nodes.push(
-            <Tag type="danger" round class={bem('item-tag')}>
-              {props.defaultTagText}
-            </Tag>
-          );
-        }
-
-        return nodes;
-      }
-
-      return (
-        <Cell
-          key={item.id}
-          isLink
-          center
-          class={bem('item')}
-          valueClass={bem('item-value')}
-          scopedSlots={{
-            icon: LeftIcon,
-            default: Content,
-            'right-icon': RightIcon,
-          }}
-          onClick={onClick}
-        />
-      );
-    });
-
-  return (
-    <div class={bem()} {...inherit(ctx)}>
-      <RadioGroup value={props.value} class={bem('group')}>
-        {List}
-      </RadioGroup>
-      <div class={bem('bottom')}>
-        <Button
-          round
-          block
-          type="danger"
-          class={bem('add')}
-          text={props.addText || t('addText')}
-          onClick={() => {
-            emit(ctx, 'add');
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-ContactList.props = {
-  value: null as any,
-  list: Array,
-  addText: String,
-  defaultTagText: String,
-};
-
-export default createComponent(ContactList);

vant.config.js

@@ -339,10 +339,10 @@ module.exports = {
                 path: 'card',
                 title: 'Card 商品卡片',
               },
-              // {
+              {
-              //   path: 'contact-card',
+                path: 'contact-card',
-              //   title: 'Contact 联系人',
+                title: 'Contact 联系人',
-              // },
+              },
               // {
               //   path: 'coupon-list',
               //   title: 'Coupon 优惠券',
@@ -673,10 +673,10 @@ module.exports = {
                 path: 'card',
                 title: 'Card',
               },
-              // {
+              {
-              //   path: 'contact-card',
+                path: 'contact-card',
-              //   title: 'Contact',
+                title: 'Contact',
-              // },
+              },
               // {
               //   path: 'coupon-list',
               //   title: 'Coupon',