refactor(Layout): use relation

src/col/index.js

@@ -1,11 +1,11 @@
+import { computed } from 'vue';
 import { createNamespace } from '../utils';
-import { ChildrenMixin } from '../mixins/relation';
+import { useParent } from '../api/use-relation';
+import { ROW_KEY } from '../row';
 
 const [createComponent, bem] = createNamespace('col');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanRow')],
-
   props: {
     span: [Number, String],
     offset: [Number, String],
@@ -16,25 +16,29 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const getStyle = (vm) => {
-      const { index } = vm;
-      const { spaces } = vm.parent || {};
+    const { parent, index } = useParent(
+      ROW_KEY,
+      computed(() => props.span)
+    );
 
-      if (spaces && spaces[index]) {
-        const { left, right } = spaces[index];
+    const style = computed(() => {
+      const { spaces } = parent || {};
+
+      if (spaces && spaces.value && spaces.value[index.value]) {
+        const { left, right } = spaces.value[index.value];
         return {
           paddingLeft: left ? `${left}px` : null,
           paddingRight: right ? `${right}px` : null,
         };
       }
-    };
+    });
 
-    return (vm) => {
+    return () => {
       const { tag, span, offset } = props;
 
       return (
         <tag
-          style={getStyle(vm)}
+          style={style.value}
           class={bem({ [span]: span, [`offset-${offset}`]: offset })}
         >
           {slots.default?.()}

src/row/index.js

@@ -1,11 +1,11 @@
+import { ref, computed, provide } from 'vue';
 import { createNamespace } from '../utils';
-import { ParentMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('row');
 
-export default createComponent({
-  mixins: [ParentMixin('vanRow')],
+export const ROW_KEY = 'van-row';
 
+export default createComponent({
   props: {
     type: String,
     align: String,
@@ -20,13 +20,15 @@ export default createComponent({
     },
   },
 
-  computed: {
-    groups() {
+  setup(props, { slots }) {
+    const children = ref([]);
+
+    const groups = computed(() => {
       const groups = [[]];
 
       let totalSpan = 0;
-      this.children.forEach((item, index) => {
-        totalSpan += Number(item.span);
+      children.value.forEach((item, index) => {
+        totalSpan += Number(item.value);
 
         if (totalSpan > 24) {
           groups.push([index]);
@@ -37,10 +39,10 @@ export default createComponent({
       });
 
       return groups;
-    },
+    });
 
-    spaces() {
-      const gutter = Number(this.gutter);
+    const spaces = computed(() => {
+      const gutter = Number(props.gutter);
 
       if (!gutter) {
         return;
@@ -48,7 +50,7 @@ export default createComponent({
 
       const spaces = [];
 
-      this.groups.forEach((group) => {
+      groups.value.forEach((group) => {
         const averagePadding = (gutter * (group.length - 1)) / group.length;
 
         group.forEach((item, index) => {
@@ -63,10 +65,13 @@ export default createComponent({
       });
 
       return spaces;
-    },
-  },
+    });
+
+    provide(ROW_KEY, {
+      spaces,
+      children,
+    });
 
-  setup(props, { slots }) {
     return () => {
       const { tag, type, align, justify } = props;
       const flex = type === 'flex';