[improvement] Cell: functional (#2729)

packages/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -4,19 +4,19 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-address-edit">
-      <div placeholder="收货人姓名" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>姓名</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control"></div>
         </div>
       </div>
-      <div placeholder="收货人手机号" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>电话</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control"></div>
         </div>
       </div>
-      <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>地区</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-cell van-address-edit-detail">
         <div class="van-cell__value van-cell__value--alone">
-          <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
+          <div class="van-cell van-field">
             <div class="van-cell__title van-field__label"><span>详细地址</span></div>
             <div class="van-cell__value">
               <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control"></div>

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -2,19 +2,19 @@
 
 exports[`create a AddressEdit 1`] = `
 <div class="van-address-edit">
-  <div placeholder="收货人姓名" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>姓名</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="text" placeholder="收货人姓名" value="" class="van-field__control"></div>
     </div>
   </div>
-  <div placeholder="收货人手机号" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>电话</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="" class="van-field__control"></div>
     </div>
   </div>
-  <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>地区</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="" class="van-field__control"></div>
@@ -22,7 +22,7 @@ exports[`create a AddressEdit 1`] = `
   </div>
   <div class="van-cell van-address-edit-detail">
     <div class="van-cell__value van-cell__value--alone">
-      <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>详细地址</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
@@ -59,19 +59,19 @@ exports[`create a AddressEdit 1`] = `
 
 exports[`create a AddressEdit with props 1`] = `
 <div class="van-address-edit">
-  <div placeholder="收货人姓名" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>姓名</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="text" placeholder="收货人姓名" value="测试" class="van-field__control"></div>
     </div>
   </div>
-  <div placeholder="收货人手机号" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>电话</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="tel" placeholder="收货人手机号" value="13000000000" class="van-field__control"></div>
     </div>
   </div>
-  <div placeholder="选择省 / 市 / 区" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>地区</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" value="北京市/朝阳区" class="van-field__control"></div>
@@ -79,7 +79,7 @@ exports[`create a AddressEdit with props 1`] = `
   </div>
   <div class="van-cell van-address-edit-detail">
     <div class="van-cell__value van-cell__value--alone">
-      <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>详细地址</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control">详细地址</textarea></div>
@@ -87,7 +87,7 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
     </div>
   </div>
-  <div maxlength="6" placeholder="邮政编码" class="van-cell van-field">
+  <div class="van-cell van-field">
     <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
     <div class="van-cell__value">
       <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control"></div>

packages/cell/index.js

@@ -1,69 +1,83 @@
 import { use, isDef } from '../utils';
+import { cellProps } from './shared';
+import { emit, inherit, unifySlots } from '../utils/functional';
+import { routeProps, functionalRoute } from '../mixins/router-link';
 import Icon from '../icon';
-import CellMixin from '../mixins/cell';
-import RouterLink from '../mixins/router-link';
 
 const [sfc, bem] = use('cell');
 
 export default sfc({
-  mixins: [CellMixin, RouterLink],
+  functional: true,
 
   props: {
+    ...cellProps,
+    ...routeProps,
     size: String,
     clickable: Boolean,
     arrowDirection: String
   },
 
-  methods: {
+  render(h, context) {
-    onClick() {
+    const slots = unifySlots(context);
-      this.$emit('click');
+    const { props } = context;
-      this.routerLink();
+    const { icon, size, title, label, value, isLink, arrowDirection } = props;
-    }
-  },
 
-  render(h) {
+    const showTitle = slots.title || isDef(title);
-    const { slots } = this;
+    const showValue = slots.default || isDef(value);
-    const showTitle = slots('title') || isDef(this.title);
-    const showValue = slots() || isDef(this.value);
 
     const Title = showTitle && (
-      <div class={[bem('title'), this.titleClass]}>
+      <div class={[bem('title'), props.titleClass]}>
-        {slots('title') || <span>{this.title}</span>}
+        {slots.title ? slots.title() : <span>{title}</span>}
-        {this.label && <div class={[bem('label'), this.labelClass]}>{this.label}</div>}
+        {label && <div class={[bem('label'), props.labelClass]}>{label}</div>}
       </div>
     );
 
     const Value = showValue && (
-      <div class={[bem('value', { alone: !slots('title') && !this.title }), this.valueClass]}>
+      <div
-        {slots() || <span>{this.value}</span>}
+        class={[
+          bem('value', { alone: !slots.title && !title }),
+          props.valueClass
+        ]}
+      >
+        {slots.default ? slots.default() : <span>{value}</span>}
       </div>
     );
 
-    const LeftIcon = slots('icon') || (
+    const LeftIcon = slots.icon
-      this.icon && <Icon class={bem('left-icon')} name={this.icon} />
+      ? slots.icon()
-    );
+      : icon && <Icon class={bem('left-icon')} name={icon} />;
 
-    const arrowIcon = this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
+    const RightIcon = slots['right-icon']
-    const RightIcon = slots('right-icon') || (
+      ? slots['right-icon']()
-      this.isLink && <Icon class={bem('right-icon')} name={arrowIcon} />
+      : isLink && (
-    );
+          <Icon
+            class={bem('right-icon')}
+            name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
+          />
+      );
+
+    const onClick = event => {
+      emit(context, 'click', event);
+      functionalRoute(context);
+    };
 
     return (
       <div
         class={bem({
-          center: this.center,
+          center: props.center,
-          required: this.required,
+          required: props.required,
-          borderless: !this.border,
+          borderless: !props.border,
-          clickable: this.isLink || this.clickable,
+          clickable: isLink || props.clickable,
-          [this.size]: this.size
+          [size]: size
         })}
-        onClick={this.onClick}
+        onClick={onClick}
+        {...inherit(context)}
       >
         {LeftIcon}
         {Title}
         {Value}
         {RightIcon}
-        {slots('extra')}
+        {slots.extra && slots.extra()}
       </div>
     );
   }

packages/cell/shared.ts

@@ -0,0 +1,16 @@
+export const cellProps = {
+  icon: String,
+  center: Boolean,
+  isLink: Boolean,
+  required: Boolean,
+  titleClass: String,
+  valueClass: String,
+  labelClass: String,
+  title: [String, Number],
+  value: [String, Number],
+  label: [String, Number],
+  border: {
+    type: Boolean,
+    default: true
+  }
+};

packages/cell/test/index.spec.js

@@ -2,8 +2,15 @@ import Cell from '..';
 import { mount } from '../../../test/utils';
 
 test('click event', () => {
-  const wrapper = mount(Cell);
+  const click = jest.fn();
+  const wrapper = mount(Cell, {
+    context: {
+      on: {
+        click
+      }
+    }
+  });
 
   wrapper.trigger('click');
-  expect(wrapper.emitted('click')).toBeTruthy();
+  expect(click.mock.calls.length).toBeTruthy();
 });

packages/collapse-item/index.js

@@ -1,16 +1,17 @@
 import { use, isDef } from '../utils';
 import { raf } from '../utils/raf';
 import Cell from '../cell';
-import CellMixin from '../mixins/cell';
+import { cellProps } from '../cell/shared';
 import FindParent from '../mixins/find-parent';
 
 const [sfc, bem] = use('collapse-item');
 const CELL_SLOTS = ['title', 'icon', 'right-icon'];
 
 export default sfc({
-  mixins: [CellMixin, FindParent],
+  mixins: [FindParent],
 
   props: {
+    ...cellProps,
     name: [String, Number],
     disabled: Boolean,
     isLink: {

packages/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -25,13 +25,13 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-edit">
-        <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
+        <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>张三</span></div>
           <div class="van-cell__value">
             <div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control"></div>
           </div>
         </div>
-        <div placeholder="请填写电话" class="van-cell van-field">
+        <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>电话</span></div>
           <div class="van-cell__value">
             <div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control"></div>

packages/dialog/test/__snapshots__/demo.spec.js.snap

@@ -15,13 +15,13 @@ exports[`renders demo correctly 1`] = `
     </span></button>
     <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
       <div class="van-dialog__content">
-        <div placeholder="请输入用户名" class="van-cell van-field">
+        <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>用户名</span></div>
           <div class="van-cell__value">
             <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
           </div>
         </div>
-        <div placeholder="请输入密码" class="van-cell van-field">
+        <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>密码</span></div>
           <div class="van-cell__value">
             <div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control"></div>

packages/field/index.js

@@ -1,16 +1,15 @@
 import { use, isObj, isDef } from '../utils';
 import Icon from '../icon';
 import Cell from '../cell';
-import CellMixin from '../mixins/cell';
+import { cellProps } from '../cell/shared';
 
 const [sfc, bem] = use('field');
 
 export default sfc({
   inheritAttrs: false,
 
-  mixins: [CellMixin],
-
   props: {
+    ...cellProps,
     error: Boolean,
     leftIcon: String,
     rightIcon: String,

packages/field/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__value van-cell__value--alone">
           <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
         </div>
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-cell--required van-field">
+      <div class="van-cell van-cell--required van-field">
         <div class="van-cell__title van-field__label"><span>用户名</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div placeholder="请输入密码" class="van-cell van-cell--required van-field">
+      <div class="van-cell van-cell--required van-field">
         <div class="van-cell__title van-field__label"><span>密码</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control"></div>
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div disabled="disabled" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-field__left-icon"><i class="van-icon van-icon-contact">
             <!----></i></div>
         <div class="van-cell__title van-field__label"><span>用户名</span></div>
@@ -44,13 +44,13 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入用户名" class="van-cell van-field van-field--error">
+      <div class="van-cell van-field van-field--error">
         <div class="van-cell__title van-field__label"><span>用户名</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
         </div>
       </div>
-      <div placeholder="请输入手机号" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>手机号</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入手机号" value="1365577" class="van-field__control"></div>
@@ -61,7 +61,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入留言" rows="1" class="van-cell van-field">
+      <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>留言</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control"></textarea></div>
@@ -71,7 +71,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div placeholder="请输入短信验证码" class="van-cell van-cell--center van-field">
+      <div class="van-cell van-cell--center van-field">
         <div class="van-cell__title van-field__label"><span>短信验证码</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" value="" class="van-field__control">

packages/goods-action-big-btn/index.js

@@ -1,13 +1,12 @@
 import { use } from '../utils';
 import Button from '../button';
-import RouterLink from '../mixins/router-link';
+import { route, routeProps } from '../mixins/router-link';
 
 const [sfc, bem] = use('goods-action-big-btn');
 
 export default sfc({
-  mixins: [RouterLink],
-
   props: {
+    ...routeProps,
     text: String,
     primary: Boolean,
     loading: Boolean,
@@ -17,7 +16,7 @@ export default sfc({
   methods: {
     onClick(event) {
       this.$emit('click', event);
-      this.routerLink();
+      route(this.$router, this);
     }
   },
 

packages/goods-action-mini-btn/index.js

@@ -1,13 +1,12 @@
 import { use } from '../utils';
 import Icon from '../icon';
-import RouterLink from '../mixins/router-link';
+import { route, routeProps } from '../mixins/router-link';
 
 const [sfc, bem] = use('goods-action-mini-btn');
 
 export default sfc({
-  mixins: [RouterLink],
-
   props: {
+    ...routeProps,
     text: String,
     info: [String, Number],
     icon: String,
@@ -17,7 +16,7 @@ export default sfc({
   methods: {
     onClick(event) {
       this.$emit('click', event);
-      this.routerLink();
+      route(this.$router, this);
     }
   },
 

packages/mixins/cell.js

@@ -1,22 +0,0 @@
-/**
- * Common Cell Props
- */
-
-export default {
-  props: {
-    icon: String,
-    center: Boolean,
-    isLink: Boolean,
-    required: Boolean,
-    titleClass: String,
-    valueClass: String,
-    labelClass: String,
-    title: [String, Number],
-    value: [String, Number],
-    label: [String, Number],
-    border: {
-      type: Boolean,
-      default: true
-    }
-  }
-};

packages/mixins/router-link.js

@@ -1,22 +0,0 @@
-/**
- * add Vue-Router support
- */
-
-export default {
-  props: {
-    url: String,
-    replace: Boolean,
-    to: [String, Object]
-  },
-
-  methods: {
-    routerLink() {
-      const { to, url, $router, replace } = this;
-      if (to && $router) {
-        $router[replace ? 'replace' : 'push'](to);
-      } else if (url) {
-        replace ? location.replace(url) : location.href = url;
-      }
-    }
-  }
-};

packages/mixins/router-link.ts

@@ -0,0 +1,31 @@
+/**
+ * add Vue-Router support
+ */
+
+import { RenderContext } from 'vue';
+import VueRouter, { RawLocation } from 'vue-router/types';
+
+export type RouteConfig = {
+  url?: string;
+  to?: RawLocation;
+  replace?: boolean;
+};
+
+export function route(router: VueRouter, config: RouteConfig) {
+  const { to, url, replace } = config;
+  if (to && router) {
+    router[replace ? 'replace' : 'push'](to);
+  } else if (url) {
+    replace ? location.replace(url) : (location.href = url);
+  }
+}
+
+export function functionalRoute(context: RenderContext) {
+  route(context.parent && context.parent.$router, context.props);
+}
+
+export const routeProps = {
+  url: String,
+  replace: Boolean,
+  to: [String, Object]
+};

packages/search/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-search" style="background:#f2f2f2;">
-      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
+      <div class="van-cell van-cell--borderless van-field">
         <div class="van-field__left-icon"><i class="van-icon van-icon-search">
             <!----></i></div>
         <div class="van-cell__value van-cell__value--alone">
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <form action="/">
       <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-        <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
+        <div class="van-cell van-cell--borderless van-field">
           <div class="van-field__left-icon"><i class="van-icon van-icon-search">
               <!----></i></div>
           <div class="van-cell__value van-cell__value--alone">
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-      <div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
+      <div class="van-cell van-cell--borderless van-field">
         <div class="van-field__left-icon"><i class="van-icon van-icon-search">
             <!----></i></div>
         <div class="van-cell__value van-cell__value--alone">

packages/switch-cell/test/index.spec.js

@@ -11,9 +11,6 @@ test('change event', () => {
     }
   });
 
-  wrapper.vm.$on('input', value => {
-    wrapper.setProps({ value });
-  });
   wrapper.find('.van-switch').trigger('click');
 
   expect(onChange.mock.calls[0]).toBeTruthy();

packages/tabbar-item/index.js

@@ -1,14 +1,13 @@
 import { use } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
-import RouterLink from '../mixins/router-link';
+import { route, routeProps } from '../mixins/router-link';
 
 const [sfc, bem] = use('tabbar-item');
 
 export default sfc({
-  mixins: [RouterLink],
-
   props: {
+    ...routeProps,
     icon: String,
     dot: Boolean,
     info: [String, Number]
@@ -32,7 +31,7 @@ export default sfc({
     onClick(event) {
       this.$parent.onChange(this.$parent.items.indexOf(this));
       this.$emit('click', event);
-      this.routerLink();
+      route(this.$router, this);
     }
   },
 

packages/utils/functional.ts

@@ -1,4 +1,5 @@
-import { RenderContext, VNodeData } from 'vue';
+import { RenderContext, VNodeData } from 'vue/types';
+import { ScopedSlot } from 'vue/types/vnode';
 
 type ObjectIndex = {
   [key: string]: any;
@@ -40,9 +41,23 @@ export function emit(context: Context, eventName: string, ...args: any[]) {
     if (Array.isArray(listeners)) {
       listeners.forEach(listener => {
         listener(...args);
-      })
+      });
     } else {
       listeners(...args);
     }
   }
 }
+
+// unify slots & scopedSlots
+export function unifySlots(context: Context) {
+  const { scopedSlots } = context;
+  const slots = context.slots();
+
+  Object.keys(slots).forEach(key => {
+    if (!scopedSlots[key]) {
+      scopedSlots[key] = () => slots[key];
+    }
+  });
+
+  return scopedSlots;
+}