feat: cellgroup

src/config.json

@@ -215,6 +215,15 @@
           "author": "richard1015"
         },
         {
+          "name": "CellGroup",
+          "sort": 1,
+          "cName": "单元格组件",
+          "type": "component",
+          "show": false,
+          "desc": "展示分组列表",
+          "author": "richard1015"
+        },
+        {
           "name": "Uploader",
           "sort": 2,
           "cName": "上传组件",

src/packages/cell/demo.vue

@@ -8,36 +8,51 @@
       desc="描述文字"
     ></nut-cell>
     <nut-cell title="点击测试" @click="testClick"></nut-cell>
+
     <h2>直接使用插槽(slot)</h2>
+
     <nut-cell title="我是标题" desc="描述文字">
       <div>自定义内容</div>
     </nut-cell>
-    <h2>链接</h2>
-    <nut-cell title="链接" is-link></nut-cell>
-    <nut-cell
-      title="URL 跳转"
-      desc="https://jd.com"
-      is-link
-      url="https://jd.com"
-    ></nut-cell>
-    <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+
+    <nut-cell-group title="链接 | 分组用法">
+      <nut-cell title="链接" is-link></nut-cell>
+      <nut-cell
+        title="URL 跳转"
+        desc="https://jd.com"
+        is-link
+        url="https://jd.com"
+      ></nut-cell>
+      <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+    </nut-cell-group>
+
+    <nut-cell-group title="自定义右侧箭头区域">
+      <nut-cell title="Switch">
+        <template v-slot:link>
+          <nut-switch v-model="switchChecked" />
+        </template>
+      </nut-cell>
+    </nut-cell-group>
+
     <h2>展示图标</h2>
-    <nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+    <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
     <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
     <nut-cell desc-text-align="left" desc="张三"></nut-cell>
   </div>
 </template>
 
 <script lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/utils/create';
+import { Toast } from '@/nutui';
 const { createDemo } = createComponent('cell');
 export default createDemo({
-  props: {},
   setup() {
     const testClick = (event: Event) => {
-      alert(event);
+      Toast.text('点击事件');
     };
-    return { testClick };
+    const switchChecked = ref(true);
+    return { testClick, switchChecked };
   }
 });
 </script>

src/packages/cell/doc.md

@@ -8,10 +8,11 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Cell } from '@nutui/nutui';
+import { Cell,CellGroup } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Cell);
+app.use(CellGroup);
 
 ```
 
@@ -27,11 +28,16 @@ app.use(Cell);
 
 ``` javascript
 // ...
-setup() {
-    const testClick = (event) => {
-      alert(event);
-    };
-    return { testClick };
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+      const switchChecked = ref(true);
+      const testClick = (event) => {
+        Toast.text('点击事件')
+      };
+      return { testClick,switchChecked };
+  }
 }
 // ...
 ```
@@ -44,14 +50,29 @@ setup() {
  </nut-cell>  
 ```
 
-### 链接
+### 链接 | 分组用法
 
 ``` html
-<nut-cell title="链接" is-link></nut-cell>
-<nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
-<nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+<nut-cell-group title="链接 | 分组用法">
+  <nut-cell title="链接" is-link></nut-cell>
+  <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
+  <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+</nut-cell-group>
 ```
 
+### 自定义右侧箭头区域
+
+``` html
+<nut-cell-group title="自定义右侧箭头区域">
+  <nut-cell title="Switch">
+    <template v-slot:link>
+      <nut-switch v-model="switchChecked" />
+    </template>
+  </nut-cell>
+</nut-cell-group>
+```
+
+
 ### 单元格展示图标
 
 ``` html
@@ -67,17 +88,17 @@ setup() {
 
 ### Prop
 
-| 字段            | 说明                                                                                           | 类型    | 默认值  |
-|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
-| title           | 标题名称                                                                                       | String  | -       |
-| sub-title       | 左侧副标题                                                                                     | String  | -       |
-| desc            | 右侧描述                                                                                       | String  | -       |
-| desc-text-align | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String  | "right" |
-| is-link         | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean | false   |
-| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
-| url             | 点击后跳转的链接地址                                                                           | String  | -       |
-| to              | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String  | -       |
-| replace         | 是否在跳转时替换当前页面历史                                                                   | Boolean | false   |
+| 字段            | 说明                                                                                           | 类型    | 默认值 |
+|-----------------|------------------------------------------------------------------------------------------------|---------|--------|
+| title           | 标题名称                                                                                       | String  | -      |
+| sub-title       | 左侧副标题                                                                                     | String  | -      |
+| desc            | 右侧描述                                                                                       | String  | -      |
+| desc-text-align | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String  | right  |
+| is-link         | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean | false  |
+| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -      |
+| url             | 点击后跳转的链接地址                                                                           | String  | -      |
+| to              | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String  | -      |
+| replace         | 是否在跳转时替换当前页面历史                                                                   | Boolean | false  |
 
 ### Event
 

src/packages/cell/index.scss

@@ -5,12 +5,31 @@
   line-height: 20px;
   padding: 13px 16px;
   background: $white;
-  border-radius: 7px;
+  border-radius: $cell-border-radius;
   box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
   font-size: $cell-title-font;
   color: $cell-color;
   margin: 10px 0;
   box-sizing: border-box;
+
+  &:last-child {
+    &::after {
+      border: 0;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 16px;
+    bottom: 0;
+    left: 16px;
+    border-bottom: 2px solid #f5f6f7;
+    transform: scaleY(0.5);
+  }
+
   &:active::before {
     opacity: 0.1;
   }
@@ -51,6 +70,8 @@
     text-align: right;
     font-size: $cell-desc-font;
     color: $cell-desc-color;
-    flex: 1;
+  }
+  &__link {
+    color: #979797;
   }
 }

src/packages/cell/index.vue

@@ -21,10 +21,11 @@
         :style="{ 'text-align': descTextAlign }"
         >{{ desc }}</view
       >
+
+      <slot v-if="$slots.link" name="link"></slot>
       <nut-icon
-        v-if="isLink || to"
-        size="14px"
-        color="#979797"
+        v-else-if="isLink || to"
+        class="nut-cell__link"
         name="right"
       ></nut-icon>
     </slot>
@@ -35,6 +36,7 @@
 import { computed } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useRouter } from 'vue-router';
+import CellGroup from '@/packages/cellgroup/index.vue';
 const { componentName, create } = createComponent('cell');
 export default create({
   props: {
@@ -49,6 +51,10 @@ export default create({
     icon: { type: String, default: '' }
   },
   emits: ['click'],
+  children: [CellGroup],
+  components: {
+    [CellGroup.name]: CellGroup
+  },
   setup(props, { emit }) {
     const classes = computed(() => {
       const prefixCls = componentName;

src/packages/cellgroup/index.scss

@@ -0,0 +1,24 @@
+.nut-cell-group {
+  display: block;
+  &__title {
+    display: inherit;
+    padding: $cell-group-title-padding;
+    color: $cell-group-title-color;
+    font-size: $cell-group-title-font-size;
+    line-height: $cell-group-title-line-height;
+    margin-top: 30px;
+    margin-bottom: 10px;
+  }
+  &__warp {
+    display: inherit;
+    border-radius: $cell-border-radius;
+    overflow: hidden;
+    background-color: $cell-group-background-color;
+    margin: 10px 0;
+    .nut-cell {
+      margin: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}

src/packages/cellgroup/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <view :class="classes">
+    <view v-if="title" class="nut-cell-group__title">{{ title }}</view>
+    <view class="nut-cell-group__warp">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { computed } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('cell-group');
+export default create({
+  props: {
+    title: { type: String, default: '' }
+  },
+  setup() {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    return {
+      classes
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/styles/variables.scss

@@ -100,6 +100,15 @@ $cell-title-font: $font-size-2;
 $cell-title-desc-font: $font-size-1;
 $cell-desc-font: $font-size-2;
 $cell-desc-color: $disable-color;
+$cell-border-radius: 7px;
+
+// cell-group
+
+$cell-group-title-padding: 0 10px;
+$cell-group-title-color: #909ca4;
+$cell-group-title-font-size: $font-size-2;
+$cell-group-title-line-height: 20px;
+$cell-group-background-color: $white;
 
 // icon