refactor(Row): use setup

src/col/index.js

@@ -16,25 +16,25 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    const getStyle = (vm) => {
+      const { index } = vm;
+      const { spaces } = vm.parent || {};
+
+      if (spaces && spaces[index]) {
+        const { left, right } = spaces[index];
+        return {
+          paddingLeft: left ? `${left}px` : null,
+          paddingRight: right ? `${right}px` : null,
+        };
+      }
+    };
+
     return (vm) => {
       const { tag, span, offset } = props;
 
-      const getStyle = () => {
-        const { index } = vm;
-        const { spaces } = vm.parent || {};
-
-        if (spaces && spaces[index]) {
-          const { left, right } = spaces[index];
-          return {
-            paddingLeft: left ? `${left}px` : null,
-            paddingRight: right ? `${right}px` : null,
-          };
-        }
-      };
-
       return (
         <tag
-          style={getStyle()}
+          style={getStyle(vm)}
           class={bem({ [span]: span, [`offset-${offset}`]: offset })}
         >
           {slots.default?.()}

src/row/index.js

@@ -20,17 +20,8 @@ export default createComponent({
     },
   },
 
-  emits: ['click'],
-
   computed: {
-    spaces() {
+    groups() {
-      const gutter = Number(this.gutter);
-
-      if (!gutter) {
-        return;
-      }
-
-      const spaces = [];
       const groups = [[]];
 
       let totalSpan = 0;
@@ -45,7 +36,19 @@ export default createComponent({
         }
       });
 
-      groups.forEach((group) => {
+      return groups;
+    },
+
+    spaces() {
+      const gutter = Number(this.gutter);
+
+      if (!gutter) {
+        return;
+      }
+
+      const spaces = [];
+
+      this.groups.forEach((group) => {
         const averagePadding = (gutter * (group.length - 1)) / group.length;
 
         group.forEach((item, index) => {
@@ -63,27 +66,22 @@ export default createComponent({
     },
   },
 
-  methods: {
+  setup(props, { slots }) {
-    onClick(event) {
+    return () => {
-      this.$emit('click', event);
+      const { tag, type, align, justify } = props;
-    },
+      const flex = type === 'flex';
-  },
 
-  render() {
+      return (
-    const { align, justify } = this;
+        <tag
-    const flex = this.type === 'flex';
+          class={bem({
-
+            flex,
-    return (
+            [`align-${align}`]: flex && align,
-      <this.tag
+            [`justify-${justify}`]: flex && justify,
-        class={bem({
+          })}
-          flex,
+        >
-          [`align-${align}`]: flex && align,
+          {slots.default?.()}
-          [`justify-${justify}`]: flex && justify,
+        </tag>
-        })}
+      );
-        onClick={this.onClick}
+    };
-      >
-        {this.$slots.default?.()}
-      </this.tag>
-    );
   },
 });