feat: CellGroup component

src-next/cell-group/index.js

@@ -0,0 +1,38 @@
+// Utils
+import { createNamespace } from '../utils';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
+
+const [createComponent, bem] = createNamespace('cell-group');
+
+export default createComponent({
+  props: {
+    title: String,
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { slots }) {
+    return function () {
+      const Group = (
+        <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}>
+          {slots.default?.()}
+        </div>
+      );
+
+      if (props.title || slots.title) {
+        return (
+          <>
+            <div class={bem('title')} {...this.$attrs}>
+              {slots.title ? slots.title() : props.title}
+            </div>
+            {Group}
+          </>
+        );
+      }
+
+      return Group;
+    };
+  },
+});

src-next/cell-group/index.less

@@ -0,0 +1,12 @@
+@import '../style/var';
+
+.van-cell-group {
+  background-color: @cell-group-background-color;
+
+  &__title {
+    padding: @cell-group-title-padding;
+    color: @cell-group-title-color;
+    font-size: @cell-group-title-font-size;
+    line-height: @cell-group-title-line-height;
+  }
+}