[improvement] relations (#647)

packages/badge-group/index.ts

@@ -1,20 +1,17 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../badge/index': {
+    name: 'badge',
     type: 'descendant',
-
     linked(target) {
       this.data.badges.push(target);
       this.setActive();
     },
-
     unlinked(target) {
       this.data.badges = this.data.badges.filter(item => item !== target);
       this.setActive();
     }
-    }
   },
 
   props: {

packages/badge/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../badge-group/index': {
+    type: 'ancestor',
-      type: 'ancestor'
+    name: 'badge-group'
-    }
   },
 
   props: {

packages/col/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../row/index': {
+    name: 'row',
     type: 'ancestor'
-    }
   },
 
   props: {

packages/common/component.ts

@@ -31,11 +31,18 @@ function VantComponent<Data, Props, Watch, Methods, Computed>(
     beforeCreate: 'created',
     created: 'attached',
     mounted: 'ready',
-    destroyed: 'detached',
     relations: 'relations',
+    destroyed: 'detached',
     classes: 'externalClasses'
   });
 
+  const { relation } = vantOptions;
+  if (relation) {
+    options.relations = Object.assign(options.relations || {}, {
+      [`../${relation.name}/index`]: relation
+    });
+  }
+
   // add default externalClasses
   options.externalClasses = options.externalClasses || [];
   options.externalClasses.push('custom-class');

packages/radio-group/index.ts

@@ -1,8 +1,8 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../radio/index': {
+    name: 'radio',
     type: 'descendant',
     linked(target) {
       const { value, disabled } = this.data;
@@ -11,7 +11,6 @@ VantComponent({
         disabled: disabled || target.data.disabled
       });
     }
-    }
   },
 
   props: {

packages/radio/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../radio-group/index': {
+    name: 'radio-group',
     type: 'ancestor'
-    }
   },
 
   classes: ['icon-class', 'label-class'],

packages/row/index.ts

@@ -1,16 +1,14 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../col/index': {
+    name: 'col',
     type: 'descendant',
-
     linked(target) {
       if (this.data.gutter) {
         target.setGutter(this.data.gutter);
       }
     }
-    }
   },
 
   props: {
@@ -31,10 +29,12 @@ VantComponent({
     setGutter() {
       const { gutter } = this.data;
       const margin = `-${Number(gutter) / 2}px`;
-      const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
+      const style = gutter
+        ? `margin-right: ${margin}; margin-left: ${margin};`
+        : '';
 
       this.setData({ style });
-      this.getRelationNodes('../col/index').forEach((col) => {
+      this.getRelationNodes('../col/index').forEach(col => {
         col.setGutter(this.data.gutter);
       });
     }

packages/tab/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
+  relation: {
-    '../tabs/index': {
+    name: 'tabs',
     type: 'ancestor'
-    }
   },
 
   props: {

packages/tabbar-item/index.ts

@@ -7,10 +7,9 @@ VantComponent({
     dot: Boolean
   },
 
-  relations: {
+  relation: {
-    '../tabbar/index': {
+    name: 'tabbar',
     type: 'ancestor'
-    }
   },
 
   data: {

packages/tabbar/index.ts

@@ -1,6 +1,23 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
+  relation: {
+    name: 'tabbar-item',
+    type: 'descendant',
+    linked(target) {
+      this.data.items.push(target);
+      setTimeout(() => {
+        this.setActiveItem();
+      });
+    },
+    unlinked(target) {
+      this.data.items = this.data.items.filter(item => item !== target);
+      setTimeout(() => {
+        this.setActiveItem();
+      });
+    }
+  },
+
   props: {
     active: Number,
     fixed: {
@@ -29,26 +46,6 @@ VantComponent({
     this.setData({ currentActive: this.data.active });
   },
 
-  relations: {
-    '../tabbar-item/index': {
-      type: 'descendant',
-
-      linked(target) {
-        this.data.items.push(target);
-        setTimeout(() => {
-          this.setActiveItem();
-        });
-      },
-
-      unlinked(target) {
-        this.data.items = this.data.items.filter(item => item !== target);
-        setTimeout(() => {
-          this.setActiveItem();
-        });
-      }
-    }
-  },
-
   methods: {
     setActiveItem() {
       this.data.items.forEach((item, index) => {

packages/tabs/index.ts

@@ -6,10 +6,9 @@ type TabItemData = {
 };
 
 VantComponent({
-  relations: {
+  relation: {
-    '../tab/index': {
+    name: 'tab',
     type: 'descendant',
-
     linked(child) {
       this.data.tabs.push({
         instance: child,
@@ -17,7 +16,6 @@ VantComponent({
       });
       this.updateTabs();
     },
-
     unlinked(child) {
       const tabs = this.data.tabs.filter(item => item.instance !== child);
       this.setData({
@@ -26,7 +24,6 @@ VantComponent({
       });
       this.setActiveTab();
     }
-    }
   },
 
   props: {

types/index.d.ts

@@ -6,17 +6,19 @@ type ExternalClasses = string[];
 type LooseObject = {
   [key: string]: any;
 };
-type Relations<Instance> = {
+type Relation<Instance> = {
-  [key: string]: {
+  name?: string;
   type: string;
-    linked?: (this: Instance, target?: any) => void;
+  linked?: (this: Instance, target?: Weapp.Component) => void;
-    unlinked?: (this: Instance, target?: any) => void;
+  unlinked?: (this: Instance, target?: Weapp.Component) => void;
-  };
+};
+type Relations<Instance> = {
+  [key: string]: Relation<Instance>;
 };
 type RecordToAny<T> = { [K in keyof T]: any };
 type RecordToReturn<T> = {
   [P in keyof T]: T[P] extends (...args: any[]) => any ? ReturnType<T[P]> : T[P]
-}
+};
 
 export type CombinedComponentInstance<
   Data,
@@ -31,13 +33,21 @@ export type CombinedComponentInstance<
     data: Data & RecordToAny<Props> & RecordToReturn<Computed>;
   };
 
-export type VantComponentOptions<Data, Props, Watch, Methods, Computed, Instance> = {
+export type VantComponentOptions<
+  Data,
+  Props,
+  Watch,
+  Methods,
+  Computed,
+  Instance
+> = {
   data?: Data;
   field?: boolean;
   mixins?: Mixins;
   props?: Props & ThisType<Instance>;
   watch?: Watch & ThisType<Instance>;
   computed?: Computed & ThisType<Instance>;
+  relation?: Relation<Instance>;
   relations?: Relations<Instance>;
   classes?: ExternalClasses;
   methods?: Methods & ThisType<Instance>;