build: compile 1.6.5

dist/button/index.wxml

@@ -8,7 +8,7 @@
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"
   form-type="{{ formType }}"
-  style="{{ computed.rootStyle({ plain, color }) }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
   open-type="{{ disabled ? '' : openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"

dist/button/index.wxs

@@ -3,7 +3,7 @@ var style = require('../wxs/style.wxs');
 
 function rootStyle(data) {
   if (!data.color) {
-    return '';
+    return data.customStyle;
   }
 
   var properties = {
@@ -18,7 +18,7 @@ function rootStyle(data) {
     properties['border-color'] = data.color;
   }
 
-  return style(properties);
+  return style([properties, data.customStyle]);
 }
 
 function loadingColor(data) {

dist/calendar/components/month/index.js

@@ -25,13 +25,13 @@ VantComponent({
       observer: 'setDays',
     },
     showMark: Boolean,
-    rowHeight: [Number, String],
+    rowHeight: null,
     formatter: {
       type: null,
       observer: 'setDays',
     },
     currentDate: {
-      type: [null, Array],
+      type: null,
       observer: 'setDays',
     },
     allowSameDay: Boolean,

dist/calendar/index.js

@@ -35,7 +35,7 @@ VantComponent({
     },
     rangePrompt: String,
     defaultDate: {
-      type: [Number, Array],
+      type: null,
       observer(val) {
         this.setData({ currentDate: val });
         this.scrollIntoView();
@@ -65,7 +65,7 @@ VantComponent({
       value: 'bottom',
     },
     rowHeight: {
-      type: [Number, String],
+      type: null,
       value: ROW_HEIGHT,
     },
     round: {
@@ -101,7 +101,7 @@ VantComponent({
       value: true,
     },
     maxRange: {
-      type: [Number, String],
+      type: null,
       value: null,
     },
   },

dist/cell/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
@@ -16,7 +17,7 @@
   <slot wx:else name="icon" />
 
   <view
-    style="{{ (titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth + ';' : '') + titleStyle }}"
+    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
     class="van-cell__title title-class"
   >
     <block wx:if="{{ title }}">{{ title }}</block>

dist/cell/index.wxs

@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function titleStyle(data) {
+  return style([
+    {
+      'max-width': addUnit(data.titleWidth),
+      'min-width': addUnit(data.titleWidth),
+    },
+    data.titleStyle,
+  ]);
+}
+
+module.exports = {
+  titleStyle: titleStyle,
+};

dist/checkbox-group/index.js

@@ -1,14 +1,10 @@
+import { useChildren } from '../common/relation';
 import { VantComponent } from '../common/component';
 VantComponent({
   field: true,
-  relation: {
-    name: 'checkbox',
-    type: 'descendant',
-    current: 'checkbox-group',
-    linked(target) {
-      this.updateChild(target);
-    },
-  },
+  relation: useChildren('checkbox', function (target) {
+    this.updateChild(target);
+  }),
   props: {
     max: Number,
     value: {
@@ -22,7 +18,7 @@ VantComponent({
   },
   methods: {
     updateChildren() {
-      (this.children || []).forEach((child) => this.updateChild(child));
+      this.children.forEach((child) => this.updateChild(child));
     },
     updateChild(child) {
       const { value, disabled } = this.data;

dist/checkbox/index.js

@@ -1,3 +1,4 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 function emit(target, value) {
   target.$emit('input', value);
@@ -5,11 +6,7 @@ function emit(target, value) {
 }
 VantComponent({
   field: true,
-  relation: {
-    name: 'checkbox-group',
-    type: 'ancestor',
-    current: 'checkbox',
-  },
+  relation: useParent('checkbox-group'),
   classes: ['icon-class', 'label-class'],
   props: {
     value: Boolean,

dist/circle/index.js

@@ -38,7 +38,7 @@ VantComponent({
       value: WHITE,
     },
     color: {
-      type: [String, Object],
+      type: null,
       value: BLUE,
       observer() {
         this.setHoverColor().then(() => {

dist/col/index.js

@@ -1,26 +1,9 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 VantComponent({
-  relation: {
-    name: 'row',
-    type: 'ancestor',
-    current: 'col',
-  },
+  relation: useParent('row'),
   props: {
     span: Number,
     offset: Number,
   },
-  data: {
-    viewStyle: '',
-  },
-  methods: {
-    setGutter(gutter) {
-      const padding = `${gutter / 2}px`;
-      const viewStyle = gutter
-        ? `padding-left: ${padding}; padding-right: ${padding};`
-        : '';
-      if (viewStyle !== this.data.viewStyle) {
-        this.setData({ viewStyle });
-      }
-    },
-  },
 });

dist/col/index.wxml

@@ -1,8 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
-  style="{{ viewStyle }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
 >
   <slot />
 </view>

dist/col/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'padding-right': addUnit(data.gutter / 2),
+    'padding-left': addUnit(data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

dist/collapse-item/index.js

@@ -1,12 +1,9 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 import { setContentAnimate } from './animate';
 VantComponent({
   classes: ['title-class', 'content-class'],
-  relation: {
-    name: 'collapse',
-    type: 'ancestor',
-    current: 'collapse-item',
-  },
+  relation: useParent('collapse'),
   props: {
     name: null,
     title: null,

dist/collapse/index.js

@@ -1,10 +1,7 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 VantComponent({
-  relation: {
-    name: 'collapse-item',
-    type: 'descendant',
-    current: 'collapse',
-  },
+  relation: useChildren('collapse-item'),
   props: {
     value: {
       type: null,

dist/common/component.d.ts

@@ -1,3 +1,8 @@
-import { VantComponentOptions, CombinedComponentInstance } from '../definitions/index';
-declare function VantComponent<Data, Props, Methods>(vantOptions?: VantComponentOptions<Data, Props, Methods, CombinedComponentInstance<Data, Props, Methods>>): void;
+/// <reference types="miniprogram-api-typings" />
+import { VantComponentOptions } from '../definitions/index';
+declare function VantComponent<
+  Data extends WechatMiniprogram.Component.DataOption,
+  Props extends WechatMiniprogram.Component.PropertyOption,
+  Methods extends WechatMiniprogram.Component.MethodOption
+>(vantOptions: VantComponentOptions<Data, Props, Methods>): void;
 export { VantComponent };

dist/common/component.js

@@ -1,28 +1,4 @@
 import { basic } from '../mixins/basic';
-const relationFunctions = {
-  ancestor: {
-    linked(parent) {
-      // @ts-ignore
-      this.parent = parent;
-    },
-    unlinked() {
-      // @ts-ignore
-      this.parent = null;
-    },
-  },
-  descendant: {
-    linked(child) {
-      // @ts-ignore
-      this.children = this.children || [];
-      // @ts-ignore
-      this.children.push(child);
-    },
-    unlinked(child) {
-      // @ts-ignore
-      this.children = (this.children || []).filter((it) => it !== child);
-    },
-  },
-};
 function mapKeys(source, target, map) {
   Object.keys(map).forEach((key) => {
     if (source[key]) {
@@ -30,37 +6,7 @@ function mapKeys(source, target, map) {
     }
   });
 }
-function makeRelation(options, vantOptions, relation) {
-  const { type, name, linked, unlinked, linkChanged } = relation;
-  const { beforeCreate, destroyed } = vantOptions;
-  if (type === 'descendant') {
-    options.created = function () {
-      beforeCreate && beforeCreate.bind(this)();
-      this.children = this.children || [];
-    };
-    options.detached = function () {
-      this.children = [];
-      destroyed && destroyed.bind(this)();
-    };
-  }
-  options.relations = Object.assign(options.relations || {}, {
-    [`../${name}/index`]: {
-      type,
-      linked(node) {
-        relationFunctions[type].linked.bind(this)(node);
-        linked && linked.bind(this)(node);
-      },
-      linkChanged(node) {
-        linkChanged && linkChanged.bind(this)(node);
-      },
-      unlinked(node) {
-        relationFunctions[type].unlinked.bind(this)(node);
-        unlinked && unlinked.bind(this)(node);
-      },
-    },
-  });
-}
-function VantComponent(vantOptions = {}) {
+function VantComponent(vantOptions) {
   const options = {};
   mapKeys(vantOptions, options, {
     data: 'data',
@@ -70,32 +16,25 @@ function VantComponent(vantOptions = {}) {
     beforeCreate: 'created',
     created: 'attached',
     mounted: 'ready',
-    relations: 'relations',
     destroyed: 'detached',
     classes: 'externalClasses',
   });
-  const { relation } = vantOptions;
-  if (relation) {
-    makeRelation(options, vantOptions, relation);
-  }
   // add default externalClasses
   options.externalClasses = options.externalClasses || [];
   options.externalClasses.push('custom-class');
   // add default behaviors
   options.behaviors = options.behaviors || [];
   options.behaviors.push(basic);
+  // add relations
+  const { relation } = vantOptions;
+  if (relation) {
+    options.relations = relation.relations;
+    options.behaviors.push(relation.mixin);
+  }
   // map field to form-field behavior
   if (vantOptions.field) {
     options.behaviors.push('wx://form-field');
   }
-  if (options.properties) {
-    Object.keys(options.properties).forEach((name) => {
-      if (Array.isArray(options.properties[name])) {
-        // miniprogram do not allow multi type
-        options.properties[name] = null;
-      }
-    });
-  }
   // add default options
   options.options = {
     multipleSlots: true,

dist/common/relation.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="miniprogram-api-typings" />
+declare type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
+export declare function useParent(
+  name: string,
+  onEffect?: (this: TrivialInstance) => void
+): {
+  relations: {
+    [x: string]: WechatMiniprogram.Component.RelationOption;
+  };
+  mixin: string;
+};
+export declare function useChildren(
+  name: string,
+  onEffect?: (this: TrivialInstance, target: TrivialInstance) => void
+): {
+  relations: {
+    [x: string]: WechatMiniprogram.Component.RelationOption;
+  };
+  mixin: string;
+};
+export {};

dist/common/relation.js

@@ -0,0 +1,64 @@
+export function useParent(name, onEffect) {
+  const path = `../${name}/index`;
+  return {
+    relations: {
+      [path]: {
+        type: 'ancestor',
+        linked() {
+          onEffect && onEffect.call(this);
+        },
+        linkChanged() {
+          onEffect && onEffect.call(this);
+        },
+        unlinked() {
+          onEffect && onEffect.call(this);
+        },
+      },
+    },
+    mixin: Behavior({
+      created() {
+        Object.defineProperty(this, 'parent', {
+          get: () => this.getRelationNodes(path)[0],
+        });
+        Object.defineProperty(this, 'index', {
+          // @ts-ignore
+          get: () => {
+            var _a, _b;
+            return (_b =
+              (_a = this.parent) === null || _a === void 0
+                ? void 0
+                : _a.children) === null || _b === void 0
+              ? void 0
+              : _b.indexOf(this);
+          },
+        });
+      },
+    }),
+  };
+}
+export function useChildren(name, onEffect) {
+  const path = `../${name}/index`;
+  return {
+    relations: {
+      [path]: {
+        type: 'descendant',
+        linked(target) {
+          onEffect && onEffect.call(this, target);
+        },
+        linkChanged(target) {
+          onEffect && onEffect.call(this, target);
+        },
+        unlinked(target) {
+          onEffect && onEffect.call(this, target);
+        },
+      },
+    },
+    mixin: Behavior({
+      created() {
+        Object.defineProperty(this, 'children', {
+          get: () => this.getRelationNodes(path) || [],
+        });
+      },
+    }),
+  };
+}

dist/common/utils.d.ts

@@ -22,3 +22,9 @@ export declare function groupSetData(
 export declare function toPromise(
   promiseLike: Promise<unknown> | unknown
 ): Promise<unknown>;
+export declare function getCurrentPage<T>(): T &
+  WechatMiniprogram.OptionalInterface<WechatMiniprogram.Page.ILifetime> &
+  WechatMiniprogram.Page.InstanceProperties &
+  WechatMiniprogram.Page.InstanceMethods<Record<string, any>> &
+  WechatMiniprogram.Page.Data<Record<string, any>> &
+  Record<string, any>;

dist/common/utils.js

@@ -83,3 +83,7 @@ export function toPromise(promiseLike) {
   }
   return Promise.resolve(promiseLike);
 }
+export function getCurrentPage() {
+  const pages = getCurrentPages();
+  return pages[pages.length - 1];
+}

dist/definitions/index.d.ts

@@ -1,31 +1,43 @@
 /// <reference types="miniprogram-api-typings" />
-import { Weapp } from './weapp';
-declare type RecordToAny<T> = {
-  [K in keyof T]: any;
-};
-export declare type CombinedComponentInstance<Data, Props, Methods> = Methods &
-  WechatMiniprogram.Component.TrivialInstance &
-  Weapp.FormField & {
-    data: Data & RecordToAny<Props>;
-  };
-export interface VantComponentOptions<Data, Props, Methods, Instance> {
+interface VantComponentInstance {
+  parent: WechatMiniprogram.Component.TrivialInstance;
+  children: WechatMiniprogram.Component.TrivialInstance[];
+  index: number;
+  $emit: (
+    name: string,
+    detail?: unknown,
+    options?: WechatMiniprogram.Component.TriggerEventOption
+  ) => void;
+}
+export declare type VantComponentOptions<
+  Data extends WechatMiniprogram.Component.DataOption,
+  Props extends WechatMiniprogram.Component.PropertyOption,
+  Methods extends WechatMiniprogram.Component.MethodOption
+> = {
   data?: Data;
   field?: boolean;
   classes?: string[];
   mixins?: string[];
-  props?: Props & Weapp.PropertyOption;
-  relation?: Weapp.RelationOption<Instance> & {
-    type: 'ancestor' | 'descendant';
-    name: string;
-    current: string;
+  props?: Props;
+  relation?: {
+    relations: Record<string, WechatMiniprogram.Component.RelationOption>;
+    mixin: string;
   };
-  relations?: {
-    [componentName: string]: Weapp.RelationOption<Instance>;
-  };
-  methods?: Methods & Weapp.MethodOption<Instance>;
-  beforeCreate?: (this: Instance) => void;
-  created?: (this: Instance) => void;
-  mounted?: (this: Instance) => void;
-  destroyed?: (this: Instance) => void;
-}
+  methods?: Methods;
+  beforeCreate?: () => void;
+  created?: () => void;
+  mounted?: () => void;
+  destroyed?: () => void;
+} & ThisType<
+  VantComponentInstance &
+    WechatMiniprogram.Component.Instance<
+      Data & {
+        name: string;
+        value: any;
+      },
+      Props,
+      Methods
+    > &
+    Record<string, any>
+>;
 export {};

dist/definitions/weapp.d.ts

@@ -1,77 +0,0 @@
-/// <reference types="miniprogram-api-typings" />
-export declare namespace Weapp {
-  export interface FormField {
-    data: {
-      name: string;
-      value: any;
-    };
-  }
-  /**
-   * relation定义，miniprogram-api-typings缺少this定义
-   */
-  export interface RelationOption<Instance> {
-    /** 目标组件的相对关系 */
-    type: 'parent' | 'child' | 'ancestor' | 'descendant';
-    /** 关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后 */
-    linked?(
-      this: Instance,
-      target: WechatMiniprogram.Component.TrivialInstance
-    ): void;
-    /** 关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后 */
-    linkChanged?(
-      this: Instance,
-      target: WechatMiniprogram.Component.TrivialInstance
-    ): void;
-    /** 关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后 */
-    unlinked?(
-      this: Instance,
-      target: WechatMiniprogram.Component.TrivialInstance
-    ): void;
-    /** 如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联 */
-    target?: string;
-  }
-  /**
-   * obverser定义，miniprogram-api-typings缺少this定义
-   */
-  type Observer<Instance, T> = (
-    this: Instance,
-    newVal: T,
-    oldVal: T,
-    changedPath: Array<string | number>
-  ) => void;
-  /**
-   * methods定义，miniprogram-api-typings缺少this定义
-   */
-  export interface MethodOption<Instance> {
-    [name: string]: (this: Instance, ...args: any[]) => any;
-  }
-  export interface ComputedOption<Instance> {
-    [name: string]: (this: Instance) => any;
-  }
-  type PropertyType =
-    | StringConstructor
-    | NumberConstructor
-    | BooleanConstructor
-    | ArrayConstructor
-    | ObjectConstructor
-    | FunctionConstructor
-    | null;
-  export interface PropertyOption {
-    [name: string]:
-      | PropertyType
-      | PropertyType[]
-      | {
-          /** 属性类型 */
-          type: PropertyType | PropertyType[];
-          /** 属性初始值 */
-          value?: any;
-          /** 属性值被更改时的响应函数 */
-          observer?:
-            | string
-            | Observer<WechatMiniprogram.Component.TrivialInstance, any>;
-          /** 属性的类型（可以指定多个） */
-          optionalTypes?: PropertyType[];
-        };
-  }
-  export {};
-}

dist/definitions/weapp.js

@@ -1 +0,0 @@
-export {};

dist/dialog/index.js

@@ -68,6 +68,7 @@ VantComponent({
       confirm: false,
       cancel: false,
     },
+    callback: () => {},
   },
   methods: {
     onConfirm() {
@@ -77,7 +78,7 @@ VantComponent({
       this.handleAction('cancel');
     },
     onClickOverlay() {
-      this.onClose('overlay');
+      this.close('overlay');
     },
     close(action) {
       this.setData({ show: false });

dist/divider/index.js

@@ -1,33 +1,12 @@
 import { VantComponent } from '../common/component';
 VantComponent({
   props: {
-    dashed: {
-      type: Boolean,
-      value: false,
-    },
-    hairline: {
-      type: Boolean,
-      value: false,
-    },
-    contentPosition: {
-      type: String,
-      value: '',
-    },
-    fontSize: {
-      type: Number,
-      value: '',
-    },
-    borderColor: {
-      type: String,
-      value: '',
-    },
-    textColor: {
-      type: String,
-      value: '',
-    },
-    customStyle: {
-      type: String,
-      value: '',
-    },
+    dashed: Boolean,
+    hairline: Boolean,
+    contentPosition: String,
+    fontSize: String,
+    borderColor: String,
+    textColor: String,
+    customStyle: String,
   },
 });

dist/divider/index.wxml

@@ -1,8 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
-  class="custom-class {{ utils.bem('divider', [{dashed, hairline}, contentPosition]) }}"
-  style="{{ borderColor  ? 'border-color: ' + borderColor + ';' : '' }}{{ textColor ? 'color: ' + textColor + ';' : '' }} {{ fontSize ? 'font-size: ' + fontSize + 'px;' : '' }} {{ customStyle }}"
+  class="custom-class {{ utils.bem('divider', [{ dashed, hairline }, contentPosition]) }}"
+  style="{{ computed.rootStyle({ borderColor, textColor, fontSize, customStyle }) }}"
 >
   <slot />
 </view>

dist/divider/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      'border-color': data.borderColor,
+      color: data.textColor,
+      'font-size': addUnit(data.fontSize),
+    },
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

dist/dropdown-item/index.js

@@ -1,14 +1,10 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 VantComponent({
   field: true,
-  relation: {
-    name: 'dropdown-menu',
-    type: 'ancestor',
-    current: 'dropdown-item',
-    linked() {
-      this.updateDataFromParent();
-    },
-  },
+  relation: useParent('dropdown-menu', function () {
+    this.updateDataFromParent();
+  }),
   props: {
     value: {
       type: null,
@@ -39,7 +35,10 @@ VantComponent({
   methods: {
     rerender() {
       wx.nextTick(() => {
-        this.parent && this.parent.updateItemListData();
+        var _a;
+        (_a = this.parent) === null || _a === void 0
+          ? void 0
+          : _a.updateItemListData();
       });
     },
     updateDataFromParent() {
@@ -85,6 +84,7 @@ VantComponent({
       }
     },
     toggle(show, options = {}) {
+      var _a;
       const { showPopup } = this.data;
       if (typeof show !== 'boolean') {
         show = !showPopup;
@@ -97,10 +97,12 @@ VantComponent({
         showPopup: show,
       });
       if (show) {
-        this.parent.getChildWrapperStyle().then((wrapperStyle) => {
-          this.setData({ wrapperStyle, showWrapper: true });
-          this.rerender();
-        });
+        (_a = this.parent) === null || _a === void 0
+          ? void 0
+          : _a.getChildWrapperStyle().then((wrapperStyle) => {
+              this.setData({ wrapperStyle, showWrapper: true });
+              this.rerender();
+            });
       } else {
         this.rerender();
       }

dist/dropdown-menu/index.js

@@ -1,19 +1,12 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 import { addUnit, getRect, getSystemInfoSync } from '../common/utils';
 let ARRAY = [];
 VantComponent({
   field: true,
-  relation: {
-    name: 'dropdown-item',
-    type: 'descendant',
-    current: 'dropdown-menu',
-    linked() {
-      this.updateItemListData();
-    },
-    unlinked() {
-      this.updateItemListData();
-    },
-  },
+  relation: useChildren('dropdown-item', function () {
+    this.updateItemListData();
+  }),
   props: {
     activeColor: {
       type: String,

dist/empty/index.js

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-const PRESETS = ['error', 'search', 'default', 'network'];
 VantComponent({
   props: {
     description: String,
@@ -8,13 +7,4 @@ VantComponent({
       value: 'default',
     },
   },
-  created() {
-    if (PRESETS.indexOf(this.data.image) !== -1) {
-      this.setData({
-        imageUrl: `https://img.yzcdn.cn/vant/empty-image-${this.data.image}.png`,
-      });
-    } else {
-      this.setData({ imageUrl: this.data.image });
-    }
-  },
 });

dist/empty/index.wxml

@@ -1,11 +1,12 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="custom-class van-empty">
   <view class="van-empty__image">
     <slot name="image"></slot>
   </view>
   <view class="van-empty__image">
-    <image wx:if="{{ imageUrl }}" class="van-empty__image__img" src="{{ imageUrl }}" />
+    <image wx:if="{{ image }}" class="van-empty__image__img" src="{{ computed.imageUrl(image) }}" />
   </view>
 
   <view class="van-empty__description">

dist/empty/index.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var PRESETS = ['error', 'search', 'default', 'network'];
+
+function imageUrl(image) {
+  if (PRESETS.indexOf(image) !== -1) {
+    return 'https://img.yzcdn.cn/vant/empty-image-' + image + '.png';
+  }
+
+  return image;
+}
+
+module.exports = {
+  imageUrl: imageUrl,
+};

dist/field/index.js

@@ -1,3 +1,4 @@
+import { nextTick } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { commonProps, inputProps, textareaProps } from './props';
 VantComponent({
@@ -17,7 +18,7 @@ VantComponent({
       isLink: Boolean,
       leftIcon: String,
       rightIcon: String,
-      autosize: [Boolean, Object],
+      autosize: null,
       required: Boolean,
       iconClass: String,
       clickable: Boolean,
@@ -74,11 +75,14 @@ VantComponent({
     onClickIcon() {
       this.$emit('click-icon');
     },
+    onClickInput(event) {
+      this.$emit('click-input', event.detail);
+    },
     onClear() {
       this.setData({ innerValue: '' });
       this.value = '';
       this.setShowClear();
-      wx.nextTick(() => {
+      nextTick(() => {
         this.emitChange();
         this.$emit('clear', '');
       });
@@ -105,7 +109,7 @@ VantComponent({
     },
     emitChange() {
       this.setData({ value: this.value });
-      wx.nextTick(() => {
+      nextTick(() => {
         this.$emit('input', this.value);
         this.$emit('change', this.value);
       });

dist/field/index.wxml

@@ -21,63 +21,12 @@
   </view>
   <slot wx:else name="label" slot="title" />
   <view class="{{ utils.bem('field__body', [type]) }}">
-    <textarea
-      wx:if="{{ type === 'textarea' }}"
-      class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
-      fixed="{{ fixed }}"
-      focus="{{ focus }}"
-      cursor="{{ cursor }}"
-      value="{{ innerValue }}"
-      auto-focus="{{ autoFocus }}"
-      disabled="{{ disabled || readonly }}"
-      maxlength="{{ maxlength }}"
-      placeholder="{{ placeholder }}"
-      placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
-      auto-height="{{ !!autosize }}"
-      style="{{ computed.inputStyle(autosize) }}"
-      cursor-spacing="{{ cursorSpacing }}"
-      adjust-position="{{ adjustPosition }}"
-      show-confirm-bar="{{ showConfirmBar }}"
-      hold-keyboard="{{ holdKeyboard }}"
-      selection-end="{{ selectionEnd }}"
-      selection-start="{{ selectionStart }}"
-      disable-default-padding="{{ disableDefaultPadding }}"
-      bindinput="onInput"
-      bindblur="onBlur"
-      bindfocus="onFocus"
-      bindconfirm="onConfirm"
-      bindlinechange="onLineChange"
-      bindkeyboardheightchange="onKeyboardHeightChange"
-    >
-    </textarea>
-    <input
-      wx:else
-      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
-      type="{{ type }}"
-      focus="{{ focus }}"
-      cursor="{{ cursor }}"
-      value="{{ innerValue }}"
-      auto-focus="{{ autoFocus }}"
-      disabled="{{ disabled || readonly }}"
-      maxlength="{{ maxlength }}"
-      placeholder="{{ placeholder }}"
-      placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
-      confirm-type="{{ confirmType }}"
-      confirm-hold="{{ confirmHold }}"
-      hold-keyboard="{{ holdKeyboard }}"
-      cursor-spacing="{{ cursorSpacing }}"
-      adjust-position="{{ adjustPosition }}"
-      selection-end="{{ selectionEnd }}"
-      selection-start="{{ selectionStart }}"
-      password="{{ password || type === 'password' }}"
-      bindinput="onInput"
-      bindblur="onBlur"
-      bindfocus="onFocus"
-      bindconfirm="onConfirm"
-      bindkeyboardheightchange="onKeyboardHeightChange"
-    />
+    <view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
+      <slot name="input" />
+    </view>
+    <include wx:if="{{ type === 'textarea' }}" src="textarea.wxml" />
+    <include wx:else src="input.wxml" />
+
     <van-icon
       wx:if="{{ showClear }}"
       name="clear"

dist/field/index.wxs

@@ -1,21 +1,18 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function inputStyle(autosize) {
   if (autosize && autosize.constructor === 'Object') {
-    var style = '';
-    if (autosize.minHeight) {
-      style += 'min-height:' + utils.addUnit(autosize.minHeight) + ';';
-    }
-    if (autosize.maxHeight) {
-      style += 'max-height:' + utils.addUnit(autosize.maxHeight) + ';';
-    }
-    return style;
+    return style({
+      'min-height': addUnit(autosize.minHeight),
+      'max-height': addUnit(autosize.maxHeight),
+    });
   }
 
   return '';
 }
 
 module.exports = {
-  inputStyle: inputStyle
+  inputStyle: inputStyle,
 };

dist/field/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-field{--cell-icon-size:16px;--cell-icon-size:var(--field-icon-size,16px)}.van-field__label{color:#646566;color:var(--field-label-color,#646566)}.van-field__label--disabled{color:#c8c9cc;color:var(--field-disabled-text-color,#c8c9cc)}.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{padding:3.6px 0;line-height:1.2em}.van-field__body--textarea,.van-field__input{box-sizing:border-box;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__input{position:relative;display:block;width:100%;margin:0;padding:0;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none;color:#323233;color:var(--field-input-text-color,#323233);height:24px;height:var(--cell-line-height,24px)}.van-field__input--textarea{height:18px;height:var(--field-text-area-min-height,18px);min-height:18px;min-height:var(--field-text-area-min-height,18px)}.van-field__input--error{color:#ee0a24;color:var(--field-input-error-text-color,#ee0a24)}.van-field__input--disabled{background-color:initial;opacity:1;color:#c8c9cc;color:var(--field-input-disabled-text-color,#c8c9cc)}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__placeholder{position:absolute;top:0;right:0;left:0;pointer-events:none;color:#c8c9cc;color:var(--field-placeholder-text-color,#c8c9cc)}.van-field__placeholder--error{color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__icon-root{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__clear-root,.van-field__icon-container{line-height:inherit;vertical-align:middle;padding:0 8px;padding:0 var(--padding-xs,8px);margin-right:-8px;margin-right:-var(--padding-xs,8px)}.van-field__button,.van-field__clear-root,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear-root{font-size:16px;font-size:var(--field-clear-icon-size,16px);color:#c8c9cc;color:var(--field-clear-icon-color,#c8c9cc)}.van-field__icon-container{font-size:16px;font-size:var(--field-icon-size,16px);color:#969799;color:var(--field-icon-container-color,#969799)}.van-field__icon-container:empty{display:none}.van-field__button{padding-left:8px;padding-left:var(--padding-xs,8px)}.van-field__button:empty{display:none}.van-field__error-message{text-align:left;font-size:12px;font-size:var(--field-error-message-text-font-size,12px);color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{text-align:right;margin-top:4px;margin-top:var(--padding-base,4px);color:#646566;color:var(--field-word-limit-color,#646566);font-size:12px;font-size:var(--field-word-limit-font-size,12px);line-height:16px;line-height:var(--field-word-limit-line-height,16px)}.van-field__word-num{display:inline}.van-field__word-num--full{color:#ee0a24;color:var(--field-word-num-full-color,#ee0a24)}
+@import '../common/index.wxss';.van-field{--cell-icon-size:16px;--cell-icon-size:var(--field-icon-size,16px)}.van-field__label{color:#646566;color:var(--field-label-color,#646566)}.van-field__label--disabled{color:#c8c9cc;color:var(--field-disabled-text-color,#c8c9cc)}.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{box-sizing:border-box;padding:3.6px 0;line-height:1.2em;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__control:empty+.van-field__control{display:block}.van-field__control{position:relative;display:none;box-sizing:border-box;width:100%;margin:0;padding:0;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none;color:#323233;color:var(--field-input-text-color,#323233);height:24px;height:var(--cell-line-height,24px);min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__control:empty{display:none}.van-field__control--textarea{height:18px;height:var(--field-text-area-min-height,18px);min-height:18px;min-height:var(--field-text-area-min-height,18px)}.van-field__control--error{color:#ee0a24;color:var(--field-input-error-text-color,#ee0a24)}.van-field__control--disabled{background-color:initial;opacity:1;color:#c8c9cc;color:var(--field-input-disabled-text-color,#c8c9cc)}.van-field__control--center{text-align:center}.van-field__control--right{text-align:right}.van-field__control--custom{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__placeholder{position:absolute;top:0;right:0;left:0;pointer-events:none;color:#c8c9cc;color:var(--field-placeholder-text-color,#c8c9cc)}.van-field__placeholder--error{color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__icon-root{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__clear-root,.van-field__icon-container{line-height:inherit;vertical-align:middle;padding:0 8px;padding:0 var(--padding-xs,8px);margin-right:-8px;margin-right:-var(--padding-xs,8px)}.van-field__button,.van-field__clear-root,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear-root{font-size:16px;font-size:var(--field-clear-icon-size,16px);color:#c8c9cc;color:var(--field-clear-icon-color,#c8c9cc)}.van-field__icon-container{font-size:16px;font-size:var(--field-icon-size,16px);color:#969799;color:var(--field-icon-container-color,#969799)}.van-field__icon-container:empty{display:none}.van-field__button{padding-left:8px;padding-left:var(--padding-xs,8px)}.van-field__button:empty{display:none}.van-field__error-message{text-align:left;font-size:12px;font-size:var(--field-error-message-text-font-size,12px);color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{text-align:right;margin-top:4px;margin-top:var(--padding-base,4px);color:#646566;color:var(--field-word-limit-color,#646566);font-size:12px;font-size:var(--field-word-limit-font-size,12px);line-height:16px;line-height:var(--field-word-limit-line-height,16px)}.van-field__word-num{display:inline}.van-field__word-num--full{color:#ee0a24;color:var(--field-word-num-full-color,#ee0a24)}

dist/field/input.wxml

@@ -0,0 +1,27 @@
+<input
+  class="{{ utils.bem('field__control', [inputAlign, { disabled, error }]) }} input-class"
+  type="{{ type }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled || readonly }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ placeholder }}"
+  placeholder-style="{{ placeholderStyle }}"
+  placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
+  confirm-type="{{ confirmType }}"
+  confirm-hold="{{ confirmHold }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  password="{{ password || type === 'password' }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+/>

dist/field/props.d.ts

@@ -1,62 +1,4 @@
 /// <reference types="miniprogram-api-typings" />
-export declare const commonProps: {
-  value: {
-    type: StringConstructor;
-    observer(
-      this: WechatMiniprogram.Component.TrivialInstance,
-      value: string
-    ): void;
-  };
-  placeholder: StringConstructor;
-  placeholderStyle: StringConstructor;
-  placeholderClass: StringConstructor;
-  disabled: BooleanConstructor;
-  maxlength: {
-    type: NumberConstructor;
-    value: number;
-  };
-  cursorSpacing: {
-    type: NumberConstructor;
-    value: number;
-  };
-  autoFocus: BooleanConstructor;
-  focus: BooleanConstructor;
-  cursor: {
-    type: NumberConstructor;
-    value: number;
-  };
-  selectionStart: {
-    type: NumberConstructor;
-    value: number;
-  };
-  selectionEnd: {
-    type: NumberConstructor;
-    value: number;
-  };
-  adjustPosition: {
-    type: BooleanConstructor;
-    value: boolean;
-  };
-  holdKeyboard: BooleanConstructor;
-};
-export declare const inputProps: {
-  type: {
-    type: StringConstructor;
-    value: string;
-  };
-  password: BooleanConstructor;
-  confirmType: StringConstructor;
-  confirmHold: BooleanConstructor;
-};
-export declare const textareaProps: {
-  autoHeight: BooleanConstructor;
-  fixed: BooleanConstructor;
-  showConfirmBar: {
-    type: BooleanConstructor;
-    value: boolean;
-  };
-  disableDefaultPadding: {
-    type: BooleanConstructor;
-    value: boolean;
-  };
-};
+export declare const commonProps: WechatMiniprogram.Component.PropertyOption;
+export declare const inputProps: WechatMiniprogram.Component.PropertyOption;
+export declare const textareaProps: WechatMiniprogram.Component.PropertyOption;

dist/field/textarea.wxml

@@ -0,0 +1,29 @@
+<textarea
+  class="{{ utils.bem('field__control', [inputAlign, type, { disabled, error }]) }} input-class"
+  fixed="{{ fixed }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled || readonly }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ placeholder }}"
+  placeholder-style="{{ placeholderStyle }}"
+  placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
+  auto-height="{{ !!autosize }}"
+  style="{{ computed.inputStyle(autosize) }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  show-confirm-bar="{{ showConfirmBar }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  disable-default-padding="{{ disableDefaultPadding }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindlinechange="onLineChange"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+/>

dist/goods-action-button/index.js

@@ -1,14 +1,11 @@
 import { VantComponent } from '../common/component';
-import { link } from '../mixins/link';
+import { useParent } from '../common/relation';
 import { button } from '../mixins/button';
+import { link } from '../mixins/link';
 import { openType } from '../mixins/open-type';
 VantComponent({
   mixins: [link, button, openType],
-  relation: {
-    type: 'ancestor',
-    name: 'goods-action',
-    current: 'goods-action-button',
-  },
+  relation: useParent('goods-action'),
   props: {
     text: String,
     color: String,
@@ -29,12 +26,11 @@ VantComponent({
       if (this.parent == null) {
         return;
       }
+      const { index } = this;
       const { children = [] } = this.parent;
-      const { length } = children;
-      const index = children.indexOf(this);
       this.setData({
         isFirst: index === 0,
-        isLast: index === length - 1,
+        isLast: index === children.length - 1,
       });
     },
   },

dist/goods-action/index.js

@@ -1,32 +1,15 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 VantComponent({
-  relation: {
-    type: 'descendant',
-    name: 'goods-action-button',
-    current: 'goods-action',
-    linked() {
-      this.updateStyle();
-    },
-    unlinked() {
-      this.updateStyle();
-    },
-    linkChanged() {
-      this.updateStyle();
-    },
-  },
+  relation: useChildren('goods-action-button', function () {
+    this.children.forEach((item) => {
+      item.updateStyle();
+    });
+  }),
   props: {
     safeAreaInsetBottom: {
       type: Boolean,
       value: true,
     },
   },
-  methods: {
-    updateStyle() {
-      wx.nextTick(() => {
-        this.children.forEach((child) => {
-          child.updateStyle();
-        });
-      });
-    },
-  },
 });

dist/grid-item/index.js

@@ -1,11 +1,8 @@
-import { link } from '../mixins/link';
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { link } from '../mixins/link';
 VantComponent({
-  relation: {
-    name: 'grid',
-    type: 'ancestor',
-    current: 'grid-item',
-  },
+  relation: useParent('grid'),
   classes: ['content-class', 'icon-class', 'text-class'],
   mixins: [link],
   props: {

dist/grid/index.js

@@ -1,17 +1,14 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 VantComponent({
-  relation: {
-    name: 'grid-item',
-    type: 'descendant',
-    current: 'grid',
-  },
+  relation: useChildren('grid-item'),
   props: {
     square: {
       type: Boolean,
       observer: 'updateChildren',
     },
     gutter: {
-      type: [Number, String],
+      type: null,
       value: 0,
       observer: 'updateChildren',
     },

dist/index-anchor/index.js

@@ -1,11 +1,8 @@
 import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 VantComponent({
-  relation: {
-    name: 'index-bar',
-    type: 'ancestor',
-    current: 'index-anchor',
-  },
+  relation: useParent('index-bar'),
   props: {
     useSlot: Boolean,
     index: null,

dist/index-bar/index.js

@@ -1,5 +1,6 @@
 import { GREEN } from '../common/color';
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 import { getRect } from '../common/utils';
 import { pageScrollMixin } from '../mixins/page-scroll';
 const indexList = () => {
@@ -11,17 +12,9 @@ const indexList = () => {
   return indexList;
 };
 VantComponent({
-  relation: {
-    name: 'index-anchor',
-    type: 'descendant',
-    current: 'index-bar',
-    linked() {
-      this.updateData();
-    },
-    unlinked() {
-      this.updateData();
-    },
-  },
+  relation: useChildren('index-anchor', function () {
+    this.updateData();
+  }),
   props: {
     sticky: {
       type: Boolean,

dist/loading/index.wxml

@@ -1,9 +1,10 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
-<view class="custom-class van-loading {{ vertical ? 'van-loading--vertical' : '' }}">
+<view class="custom-class {{ utils.bem('loading', { vertical }) }}">
   <view
     class="van-loading__spinner van-loading__spinner--{{ type }}"
-    style="color: {{ color }}; width: {{ utils.addUnit(size) }}; height: {{ utils.addUnit(size) }}"
+    style="{{ computed.spinnerStyle({ color, size }) }}"
   >
     <view
       wx:if="{{ type === 'spinner' }}"
@@ -12,7 +13,7 @@
       class="van-loading__dot"
     />
   </view>
-  <view class="van-loading__text" style="font-size: {{ utils.addUnit(textSize) }};">
+  <view class="van-loading__text" style="{{ computed.textStyle({ textSize }) }}">
     <slot />
   </view>
 </view>

dist/loading/index.wxs

@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function spinnerStyle(data) {
+  return style({
+    color: data.color,
+    width: addUnit(data.size),
+    height: addUnit(data.size),
+  });
+}
+
+function textStyle(data) {
+  return style({
+    'font-size': addUnit(data.textSize),
+  });
+}
+
+module.exports = {
+  spinnerStyle: spinnerStyle,
+  textStyle: textStyle,
+};

dist/mixins/basic.js

@@ -3,8 +3,8 @@ export const basic = Behavior({
     $emit(name, detail, options) {
       this.triggerEvent(name, detail, options);
     },
-    set(data, callback) {
-      this.setData(data, callback);
+    set(data) {
+      this.setData(data);
       return new Promise((resolve) => wx.nextTick(resolve));
     },
   },

dist/mixins/page-scroll.js

@@ -1,7 +1,4 @@
-function getCurrentPage() {
-  const pages = getCurrentPages();
-  return pages[pages.length - 1] || {};
-}
+import { getCurrentPage } from '../common/utils';
 function onPageScroll(event) {
   const { vanPageScroller = [] } = getCurrentPage();
   vanPageScroller.forEach((scroller) => {
@@ -26,9 +23,11 @@ export const pageScrollMixin = (scroller) =>
       page.onPageScroll = onPageScroll;
     },
     detached() {
+      var _a;
       const page = getCurrentPage();
-      page.vanPageScroller = (page.vanPageScroller || []).filter(
-        (item) => item !== scroller
-      );
+      page.vanPageScroller =
+        ((_a = page.vanPageScroller) === null || _a === void 0
+          ? void 0
+          : _a.filter((item) => item !== scroller)) || [];
     },
   });

dist/notice-bar/index.wxml

@@ -1,9 +1,10 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   wx:if="{{ show }}"
   class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
-  style="color: {{ color }}; background-color: {{ backgroundColor }}; background: {{ background }}"
+  style="{{ computed.rootStyle({ color, backgroundColor, background }) }}"
   bind:tap="onClick"
 >
   <van-icon

dist/notice-bar/index.wxs

@@ -0,0 +1,15 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    color: data.color,
+    'background-color': data.backgroundColor,
+    background: data.background,
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

dist/notify/index.js

@@ -29,6 +29,9 @@ VantComponent({
   },
   data: {
     show: false,
+    onOpened: null,
+    onClose: null,
+    onClick: null,
   },
   created() {
     const { statusBarHeight } = getSystemInfoSync();

dist/notify/index.wxml

@@ -1,15 +1,16 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <van-transition
   name="slide-down"
   show="{{ show }}"
   custom-class="van-notify__container"
-  custom-style="z-index: {{ zIndex }}; top: {{ utils.addUnit(top) }}"
+  custom-style="{{ computed.rootStyle({ zIndex, top }) }}"
   bind:tap="onTap"
 >
   <view
     class="van-notify van-notify--{{ type }}"
-    style="background:{{ background }};color:{{ color }};"
+    style="{{ computed.notifyStyle({ background, color }) }}"
   >
     <view
       wx:if="{{ safeAreaInsetTop }}"

dist/notify/index.wxs

@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'z-index': data.zIndex,
+    top: addUnit(data.top),
+  });
+}
+
+function notifyStyle(data) {
+  return style({
+    background: data.background,
+    color: data.color,
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  notifyStyle: notifyStyle,
+};

dist/picker-column/index.wxml

@@ -1,22 +1,23 @@
-<wxs src="./index.wxs" module="getOptionText" />
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="van-picker-column custom-class"
-  style="height: {{ itemHeight * visibleItemCount }}px"
+  style="{{ computed.rootStyle({ itemHeight, visibleItemCount }) }}"
   bind:touchstart="onTouchStart"
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
 >
-  <view style="transition: transform {{ duration }}ms; line-height: {{ itemHeight }}px; transform: translate3d(0, {{ offset + (itemHeight * (visibleItemCount - 1)) / 2 }}px, 0)">
+  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount }) }}">
     <view
       wx:for="{{ options }}"
       wx:for-item="option"
       wx:key="index"
       data-index="{{ index }}"
       style="height: {{ itemHeight }}px"
-      class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
+      class="van-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: index === currentIndex }) }} {{ index === currentIndex ? 'active-class' : '' }}"
       bindtap="onClickItem"
-    >{{ getOptionText(option, valueKey) }}</view>
+    >{{ computed.optionText(option, valueKey) }}</view>
   </view>
 </view>

dist/picker-column/index.wxs

@@ -1,8 +1,36 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
 function isObj(x) {
   var type = typeof x;
   return x !== null && (type === 'object' || type === 'function');
 }
 
-module.exports = function (option, valueKey) {
+function optionText(option, valueKey) {
   return isObj(option) && option[valueKey] != null ? option[valueKey] : option;
 }
+
+function rootStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight * data.visibleItemCount),
+  });
+}
+
+function wrapperStyle(data) {
+  var offset = addUnit(
+    data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2
+  );
+
+  return style({
+    transition: 'transform ' + data.duration + 'ms',
+    'line-height': addUnit(data.itemHeight),
+    transform: 'translate3d(0, ' + offset + ', 0)',
+  });
+}
+
+module.exports = {
+  optionText: optionText,
+  rootStyle: rootStyle,
+  wrapperStyle: wrapperStyle,
+};

dist/picker/index.js

@@ -20,7 +20,6 @@ VantComponent({
       value: [],
       observer(columns = []) {
         this.simple = columns.length && !columns[0].values;
-        this.children = this.selectAllComponents('.van-picker__column');
         if (Array.isArray(this.children) && this.children.length) {
           this.setColumns().catch(() => {});
         }
@@ -28,7 +27,9 @@ VantComponent({
     },
   }),
   beforeCreate() {
-    this.children = [];
+    Object.defineProperty(this, 'children', {
+      get: () => this.selectAllComponents('.van-picker__column') || [],
+    });
   },
   methods: {
     noop() {},

dist/picker/index.wxml

@@ -1,41 +1,37 @@
-<import src="./toolbar.wxml" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="van-picker custom-class">
-  <template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
+  <include wx:if="{{ toolbarPosition === 'top' }}" src="toolbar.wxml" />
+
   <view wx:if="{{ loading }}" class="van-picker__loading">
     <loading color="#1989fa"/>
   </view>
+
   <view
     class="van-picker__columns"
-    style="height: {{ itemHeight * visibleItemCount }}px"
+    style="{{ computed.columnsStyle({ itemHeight, visibleItemCount }) }}"
     catch:touchmove="noop"
   >
     <picker-column
       class="van-picker__column"
-      wx:for="{{ isSimple(columns) ? [columns] : columns }}"
+      wx:for="{{ computed.columns(columns) }}"
       wx:key="index"
       data-index="{{ index }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
-      initial-options="{{ isSimple(columns) ? item : item.values }}"
+      initial-options="{{ item.values }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"
       item-height="{{ itemHeight }}"
       visible-item-count="{{ visibleItemCount }}"
       active-class="active-class"
       bind:change="onChange"
     />
-    <view class="van-picker__mask" style="background-size: 100% {{ (itemHeight * visibleItemCount - itemHeight) / 2 }}px" />
+    <view class="van-picker__mask" style="{{ computed.maskStyle({ itemHeight, visibleItemCount }) }}" />
     <view
       class="van-picker__frame van-hairline--top-bottom"
-      style="height: {{ itemHeight }}px"
+      style="{{ computed.frameStyle({ itemHeight }) }}"
     />
   </view>
-  <template is="toolbar" wx:if="{{ toolbarPosition === 'bottom' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
-</view>
 
-<wxs module="isSimple">
-  function isSimple(columns) {
-    return columns.length && !columns[0].values;
-  }
-  module.exports = isSimple;
-</wxs>
+  <include wx:if="{{ toolbarPosition === 'bottom' }}" src="toolbar.wxml" />
+</view>

dist/picker/index.wxs

@@ -0,0 +1,42 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+var array = require('../wxs/array.wxs');
+
+function columnsStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight * data.visibleItemCount),
+  });
+}
+
+function maskStyle(data) {
+  return style({
+    'background-size':
+      '100% ' + addUnit((data.itemHeight * (data.visibleItemCount - 1)) / 2),
+  });
+}
+
+function frameStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight),
+  });
+}
+
+function columns(columns) {
+  if (!array.isArray(columns)) {
+    return [];
+  }
+
+  if (columns.length && !columns[0].values) {
+    return [{ values: columns }];
+  }
+
+  return columns;
+}
+
+module.exports = {
+  columnsStyle: columnsStyle,
+  frameStyle: frameStyle,
+  maskStyle: maskStyle,
+  columns: columns,
+};

dist/popup/index.wxml

@@ -12,7 +12,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]) }}"
-  style="{{ computed.popupClass({ zIndex, currentDuration, display, customStyle }) }}"
+  style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle }) }}"
   bind:transitionend="onTransitionEnd"
 >
   <slot />

dist/popup/index.wxs

@@ -1,7 +1,7 @@
 /* eslint-disable */
 var style = require('../wxs/style.wxs');
 
-function popupClass(data) {
+function popupStyle(data) {
   return style([
     {
       'z-index': data.zIndex,
@@ -14,5 +14,5 @@ function popupClass(data) {
 }
 
 module.exports = {
-  popupClass: popupClass,
+  popupStyle: popupStyle,
 };

dist/radio-group/index.js

@@ -1,14 +1,10 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 VantComponent({
   field: true,
-  relation: {
-    name: 'radio',
-    type: 'descendant',
-    current: 'radio-group',
-    linked(target) {
-      this.updateChild(target);
-    },
-  },
+  relation: useChildren('radio', function (target) {
+    this.updateChild(target);
+  }),
   props: {
     value: {
       type: null,

dist/radio/index.js

@@ -1,11 +1,8 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 VantComponent({
   field: true,
-  relation: {
-    name: 'radio-group',
-    type: 'ancestor',
-    current: 'radio',
-  },
+  relation: useParent('radio-group'),
   classes: ['icon-class', 'label-class'],
   props: {
     name: null,

dist/row/index.js

@@ -1,39 +1,22 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 VantComponent({
-  relation: {
-    name: 'col',
-    type: 'descendant',
-    current: 'row',
-    linked(target) {
-      if (this.data.gutter) {
-        target.setGutter(this.data.gutter);
-      }
-    },
-  },
+  relation: useChildren('col', function (target) {
+    const { gutter } = this.data;
+    if (gutter) {
+      target.setData({ gutter });
+    }
+  }),
   props: {
     gutter: {
       type: Number,
       observer: 'setGutter',
     },
   },
-  data: {
-    viewStyle: '',
-  },
-  mounted() {
-    if (this.data.gutter) {
-      this.setGutter();
-    }
-  },
   methods: {
     setGutter() {
-      const { gutter } = this.data;
-      const margin = `-${Number(gutter) / 2}px`;
-      const viewStyle = gutter
-        ? `margin-right: ${margin}; margin-left: ${margin};`
-        : '';
-      this.setData({ viewStyle });
-      this.getRelationNodes('../col/index').forEach((col) => {
-        col.setGutter(this.data.gutter);
+      this.children.forEach((col) => {
+        col.setData(this.data);
       });
     },
   },

dist/row/index.wxml

@@ -1,3 +1,5 @@
-<view class="custom-class van-row" style="{{ viewStyle }}">
+<wxs src="./index.wxs" module="computed" />
+
+<view class="van-row custom-class" style="{{ computed.rootStyle({ gutter }) }}">
   <slot />
 </view>

dist/row/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'margin-right': addUnit(-data.gutter / 2),
+    'margin-left': addUnit(-data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

dist/sidebar-item/index.js

@@ -1,11 +1,8 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 VantComponent({
   classes: ['active-class', 'disabled-class'],
-  relation: {
-    type: 'ancestor',
-    name: 'sidebar',
-    current: 'sidebar-item',
-  },
+  relation: useParent('sidebar'),
   props: {
     dot: Boolean,
     badge: null,

dist/sidebar/index.js

@@ -1,16 +1,9 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 VantComponent({
-  relation: {
-    name: 'sidebar-item',
-    type: 'descendant',
-    current: 'sidebar',
-    linked() {
-      this.setActive(this.data.activeKey);
-    },
-    unlinked() {
-      this.setActive(this.data.activeKey);
-    },
-  },
+  relation: useChildren('sidebar-item', function () {
+    this.setActive(this.data.activeKey);
+  }),
   props: {
     activeKey: {
       type: Number,

dist/stepper/index.js

@@ -27,8 +27,8 @@ VantComponent({
       observer: 'check',
     },
     disabled: Boolean,
-    inputWidth: null,
-    buttonSize: null,
+    inputWidth: String,
+    buttonSize: String,
     asyncChange: Boolean,
     disableInput: Boolean,
     decimalLength: {

dist/stepper/index.wxml

@@ -1,10 +1,11 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="van-stepper custom-class">
   <view
     wx:if="{{ showMinus }}"
     data-type="minus"
-    style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
+    style="{{ computed.buttonStyle({ buttonSize }) }}"
     class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || currentValue <= min }) }}"
     hover-class="van-stepper__minus--hover"
     hover-stay-time="70"
@@ -15,7 +16,7 @@
   <input
     type="{{ integer ? 'number' : 'digit' }}"
     class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
-    style="width: {{ utils.addUnit(inputWidth) }}; height: {{ utils.addUnit(buttonSize) }}"
+    style="{{ computed.inputStyle({ buttonSize, inputWidth }) }}"
     value="{{ currentValue }}"
     focus="{{ focus }}"
     disabled="{{ disabled || disableInput }}"
@@ -26,7 +27,7 @@
   <view
     wx:if="{{ showPlus }}"
     data-type="plus"
-    style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
+    style="{{ computed.buttonStyle({ buttonSize }) }}"
     class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || currentValue >= max }) }}"
     hover-class="van-stepper__plus--hover"
     hover-stay-time="70"

dist/stepper/index.wxs

@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function buttonStyle(data) {
+  return style({
+    width: addUnit(data.buttonSize),
+    height: addUnit(data.buttonSize),
+  });
+}
+
+function inputStyle(data) {
+  return style({
+    width: addUnit(data.inputWidth),
+    height: addUnit(data.buttonSize),
+  });
+}
+
+module.exports = {
+  buttonStyle: buttonStyle,
+  inputStyle: inputStyle,
+};

dist/sticky/index.js

@@ -94,7 +94,9 @@ VantComponent({
           }
           return prev;
         }, {});
-        this.setData(diff);
+        if (Object.keys(diff).length > 0) {
+          this.setData(diff);
+        }
         this.$emit('scroll', {
           scrollTop: this.scrollTop,
           isFixed: data.fixed || this.data.fixed,

dist/sticky/index.wxs

@@ -1,19 +1,20 @@
 /* eslint-disable */
 var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function wrapStyle(data) {
   return style({
     transform: data.transform
       ? 'translate3d(0, ' + data.transform + 'px, 0)'
       : '',
-    top: data.fixed ? data.offsetTop + 'px' : '',
+    top: data.fixed ? addUnit(data.offsetTop) : '',
     'z-index': data.zIndex,
   });
 }
 
 function containerStyle(data) {
   return style({
-    height: data.fixed ? data.height + 'px' : '',
+    height: data.fixed ? addUnit(data.height) : '',
     'z-index': data.zIndex,
   });
 }

dist/swipe-cell/index.js

@@ -26,7 +26,7 @@ VantComponent({
     },
     asyncClose: Boolean,
     name: {
-      type: [Number, String],
+      type: null,
       value: '',
     },
   },
@@ -99,7 +99,9 @@ VantComponent({
         return;
       }
       this.dragging = true;
-      ARRAY.filter((item) => item !== this).forEach((item) => item.close());
+      ARRAY.filter(
+        (item) => item !== this && item.offset !== 0
+      ).forEach((item) => item.close());
       this.setData({ catchMove: true });
       this.swipeMove(this.startOffset + this.deltaX);
     },

dist/switch/index.js

@@ -1,23 +1,16 @@
 import { VantComponent } from '../common/component';
-import { BLUE, GRAY_DARK } from '../common/color';
 VantComponent({
   field: true,
   classes: ['node-class'],
   props: {
-    checked: {
-      type: null,
-      observer(value) {
-        const loadingColor = this.getLoadingColor(value);
-        this.setData({ value, loadingColor });
-      },
-    },
+    checked: null,
     loading: Boolean,
     disabled: Boolean,
     activeColor: String,
     inactiveColor: String,
     size: {
       type: String,
-      value: '30px',
+      value: '30',
     },
     activeValue: {
       type: null,
@@ -28,24 +21,16 @@ VantComponent({
       value: false,
     },
   },
-  created() {
-    const { checked: value } = this.data;
-    const loadingColor = this.getLoadingColor(value);
-    this.setData({ value, loadingColor });
-  },
   methods: {
-    getLoadingColor(checked) {
-      const { activeColor, inactiveColor } = this.data;
-      return checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
-    },
     onClick() {
-      const { activeValue, inactiveValue } = this.data;
-      if (!this.data.disabled && !this.data.loading) {
-        const checked = this.data.checked === activeValue;
-        const value = checked ? inactiveValue : activeValue;
-        this.$emit('input', value);
-        this.$emit('change', value);
+      const { activeValue, inactiveValue, disabled, loading } = this.data;
+      if (disabled || loading) {
+        return;
       }
+      const checked = this.data.checked === activeValue;
+      const value = checked ? inactiveValue : activeValue;
+      this.$emit('input', value);
+      this.$emit('change', value);
     },
   },
 });

dist/switch/index.wxml

@@ -1,11 +1,16 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
-  class="custom-class {{ utils.bem('switch', { on: value === activeValue, disabled }) }}"
-  style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
+  class="{{ utils.bem('switch', { on: checked === activeValue, disabled }) }} custom-class"
+  style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor }) }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
-    <van-loading wx:if="{{ loading }}" color="{{ loadingColor }}" custom-class="van-switch__loading" />
+    <van-loading
+      wx:if="{{ loading }}"
+      color="{{ computed.loadingColor({ checked, activeColor, inactiveColor }) }}"
+      custom-class="van-switch__loading"
+    />
   </view>
 </view>

dist/switch/index.wxs

@@ -0,0 +1,26 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  var currentColor = data.checked ? data.activeColor : data.inactiveColor;
+
+  return style({
+    'font-size': addUnit(data.size),
+    'background-color': currentColor,
+  });
+}
+
+var BLUE = '#1989fa';
+var GRAY_DARK = '#969799';
+
+function loadingColor(data) {
+  return data.checked
+    ? data.activeColor || BLUE
+    : data.inactiveColor || GRAY_DARK;
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};

dist/tab/index.js

@@ -1,10 +1,7 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 VantComponent({
-  relation: {
-    name: 'tabs',
-    type: 'ancestor',
-    current: 'tab',
-  },
+  relation: useParent('tabs'),
   props: {
     dot: {
       type: Boolean,
@@ -27,7 +24,7 @@ VantComponent({
       observer: 'update',
     },
     name: {
-      type: [Number, String],
+      type: null,
       value: '',
     },
   },

dist/tabbar-item/index.js

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 VantComponent({
   props: {
     info: null,
@@ -10,13 +11,11 @@ VantComponent({
       value: 'van-icon',
     },
   },
-  relation: {
-    name: 'tabbar',
-    type: 'ancestor',
-    current: 'tabbar-item',
-  },
+  relation: useParent('tabbar'),
   data: {
     active: false,
+    activeColor: '',
+    inactiveColor: '',
   },
   methods: {
     onClick() {

dist/tabbar/index.js

@@ -1,18 +1,10 @@
-import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+import { getRect } from '../common/utils';
 VantComponent({
-  relation: {
-    name: 'tabbar-item',
-    type: 'descendant',
-    current: 'tabbar',
-    linked(target) {
-      target.parent = this;
-      target.updateFromParent();
-    },
-    unlinked() {
-      this.updateChildren();
-    },
-  },
+  relation: useChildren('tabbar-item', function () {
+    this.updateChildren();
+  }),
   props: {
     active: {
       type: null,

dist/tabs/index.js

@@ -8,25 +8,13 @@ import {
   requestAnimationFrame,
 } from '../common/utils';
 import { isDef } from '../common/validator';
+import { useChildren } from '../common/relation';
 VantComponent({
   mixins: [touch],
   classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
-  relation: {
-    name: 'tab',
-    type: 'descendant',
-    current: 'tabs',
-    linked(target) {
-      target.index = this.children.length - 1;
-      this.updateTabs();
-    },
-    unlinked() {
-      this.children = this.children.map((child, index) => {
-        child.index = index;
-        return child;
-      });
-      this.updateTabs();
-    },
-  },
+  relation: useChildren('tab', function () {
+    this.updateTabs();
+  }),
   props: {
     sticky: Boolean,
     border: Boolean,
@@ -43,16 +31,16 @@ VantComponent({
       },
     },
     lineWidth: {
-      type: [String, Number],
+      type: null,
       value: 40,
       observer: 'resize',
     },
     lineHeight: {
-      type: [String, Number],
+      type: null,
       value: -1,
     },
     active: {
-      type: [String, Number],
+      type: null,
       value: 0,
       observer(name) {
         if (name !== this.getCurrentName()) {

dist/tag/index.wxml

@@ -1,8 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }}"
-  style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
+  style="{{ computed.rootStyle({ plain, color, textColor }) }}"
 >
   <slot />
   <van-icon

dist/tag/index.wxs

@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  return style({
+    'background-color': data.plain ? '' : data.color,
+    color: data.textColor || data.plain ? data.textColor || data.color : '',
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

dist/transition/index.wxml

@@ -1,7 +1,9 @@
+<wxs src="./index.wxs" module="computed" />
+
 <view
   wx:if="{{ inited }}"
   class="van-transition custom-class {{ classes }}"
-  style="-webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ currentDuration, display, customStyle }) }}"
   bind:transitionend="onTransitionEnd"
 >
   <slot />

dist/transition/index.wxs

@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

dist/tree-select/index.js

@@ -20,7 +20,7 @@ VantComponent({
       observer: 'updateSubItems',
     },
     height: {
-      type: [Number, String],
+      type: null,
       value: 300,
     },
     max: {

dist/uploader/index.js

@@ -17,7 +17,7 @@ VantComponent({
           value: 80,
         },
         name: {
-          type: [Number, String],
+          type: null,
           value: '',
         },
         accept: {

dist/uploader/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="van-uploader">
   <view class="van-uploader__wrapper">
@@ -17,7 +18,7 @@
         src="{{ item.thumb || item.url }}"
         alt="{{ item.name || ('图片' + index) }}"
         class="van-uploader__preview-image"
-        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
+        style="{{ computed.sizeStyle({ previewSize }) }}"
         data-index="{{ index }}"
         bind:tap="onPreviewImage"
       />
@@ -28,7 +29,7 @@
         poster="{{ item.thumb }}"
         autoplay="{{ item.autoplay }}"
         class="van-uploader__preview-image"
-        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
+        style="{{ computed.sizeStyle({ previewSize }) }}"
         data-index="{{ index }}"
         bind:tap="onPreviewVideo"
       >
@@ -36,7 +37,7 @@
       <view
         wx:else
         class="van-uploader__file"
-        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
+        style="{{ computed.sizeStyle({ previewSize }) }}"
       >
         <van-icon name="description" class="van-uploader__file-icon" />
         <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url }}</view>
@@ -69,7 +70,7 @@
       <view
         wx:if="{{ showUpload }}"
         class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}"
-        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
+        style="{{ computed.sizeStyle({ previewSize }) }}"
         bindtap="startUpload"
       >
         <van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" />

dist/uploader/index.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function sizeStyle(data) {
+  return style({
+    width: addUnit(data.previewSize),
+    height: addUnit(data.previewSize),
+  });
+}
+
+module.exports = {
+  sizeStyle: sizeStyle,
+};

dist/wxs/add-unit.wxs

@@ -1,5 +1,5 @@
 /* eslint-disable */
-var REGEXP = getRegExp('^\d+(\.\d+)?$');
+var REGEXP = getRegExp('^-?\d+(\.\d+)?$');
 
 function addUnit(value) {
   if (value == null) {

dist/wxs/style.wxs

@@ -6,7 +6,7 @@ function style(styles) {
   if (array.isArray(styles)) {
     return styles
       .filter(function (item) {
-        return item != null;
+        return item != null && item !== '';
       })
       .map(function (item) {
         return style(item);
@@ -18,7 +18,7 @@ function style(styles) {
     return object
       .keys(styles)
       .filter(function (key) {
-        return styles[key] != null;
+        return styles[key] != null && styles[key] !== '';
       })
       .map(function (key) {
         return [key, [styles[key]]].join(':');

lib/button/index.wxml

@@ -8,7 +8,7 @@
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"
   form-type="{{ formType }}"
-  style="{{ computed.rootStyle({ plain, color }) }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
   open-type="{{ disabled ? '' : openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"

lib/button/index.wxs

@@ -3,7 +3,7 @@ var style = require('../wxs/style.wxs');
 
 function rootStyle(data) {
   if (!data.color) {
-    return '';
+    return data.customStyle;
   }
 
   var properties = {
@@ -18,7 +18,7 @@ function rootStyle(data) {
     properties['border-color'] = data.color;
   }
 
-  return style(properties);
+  return style([properties, data.customStyle]);
 }
 
 function loadingColor(data) {

lib/calendar/components/month/index.js

@@ -22,13 +22,13 @@ component_1.VantComponent({
       observer: 'setDays',
     },
     showMark: Boolean,
-    rowHeight: [Number, String],
+    rowHeight: null,
     formatter: {
       type: null,
       observer: 'setDays',
     },
     currentDate: {
-      type: [null, Array],
+      type: null,
       observer: 'setDays',
     },
     allowSameDay: Boolean,

lib/calendar/index.js

@@ -42,7 +42,7 @@ component_1.VantComponent({
     },
     rangePrompt: String,
     defaultDate: {
-      type: [Number, Array],
+      type: null,
       observer: function (val) {
         this.setData({ currentDate: val });
         this.scrollIntoView();
@@ -72,7 +72,7 @@ component_1.VantComponent({
       value: 'bottom',
     },
     rowHeight: {
-      type: [Number, String],
+      type: null,
       value: utils_1.ROW_HEIGHT,
     },
     round: {
@@ -108,7 +108,7 @@ component_1.VantComponent({
       value: true,
     },
     maxRange: {
-      type: [Number, String],
+      type: null,
       value: null,
     },
   },

lib/cell/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
@@ -16,7 +17,7 @@
   <slot wx:else name="icon" />
 
   <view
-    style="{{ (titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth + ';' : '') + titleStyle }}"
+    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
     class="van-cell__title title-class"
   >
     <block wx:if="{{ title }}">{{ title }}</block>

lib/cell/index.wxs

@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function titleStyle(data) {
+  return style([
+    {
+      'max-width': addUnit(data.titleWidth),
+      'min-width': addUnit(data.titleWidth),
+    },
+    data.titleStyle,
+  ]);
+}
+
+module.exports = {
+  titleStyle: titleStyle,
+};

lib/checkbox-group/index.js

@@ -1,16 +1,12 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
+var relation_1 = require('../common/relation');
 var component_1 = require('../common/component');
 component_1.VantComponent({
   field: true,
-  relation: {
-    name: 'checkbox',
-    type: 'descendant',
-    current: 'checkbox-group',
-    linked: function (target) {
-      this.updateChild(target);
-    },
-  },
+  relation: relation_1.useChildren('checkbox', function (target) {
+    this.updateChild(target);
+  }),
   props: {
     max: Number,
     value: {
@@ -25,7 +21,7 @@ component_1.VantComponent({
   methods: {
     updateChildren: function () {
       var _this = this;
-      (this.children || []).forEach(function (child) {
+      this.children.forEach(function (child) {
         return _this.updateChild(child);
       });
     },

lib/checkbox/index.js

@@ -1,5 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
+var relation_1 = require('../common/relation');
 var component_1 = require('../common/component');
 function emit(target, value) {
   target.$emit('input', value);
@@ -7,11 +8,7 @@ function emit(target, value) {
 }
 component_1.VantComponent({
   field: true,
-  relation: {
-    name: 'checkbox-group',
-    type: 'ancestor',
-    current: 'checkbox',
-  },
+  relation: relation_1.useParent('checkbox-group'),
   classes: ['icon-class', 'label-class'],
   props: {
     value: Boolean,