chore(cell): use icons-vue component

src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap

@@ -13,7 +13,8 @@ exports[`prop isLink  1`] = `
 "<view class=\\"nut-cell nut-cell--clickable\\" style=\\"border-radius: px;\\">
   <!--v-if-->
   <!--v-if-->
-  <!--v-if--><i class=\\"nutui-iconfont nut-icon nut-icon-right nut-cell__link\\" src=\\"\\"></i>
+  <!--v-if-->
+  <right class=\\"nut-cell__link\\"></right>
 </view>"
 `;
 

src/packages/__VUE/cell/__tests__/cell.spec.ts

@@ -1,14 +1,7 @@
 import { config, mount } from '@vue/test-utils';
 import Cell from '../index.vue';
-import Icon from '../../icon/index.vue';
 import { nextTick } from 'vue';
 
-beforeAll(() => {
-  config.global.components = {
-    [Icon.name]: Icon
-  };
-});
-
 // mock module
 jest.mock('vue-router', () => ({
   useRouter: jest.fn()

src/packages/__VUE/cell/doc.en-US.md

@@ -6,14 +6,15 @@ The cell is a single display item in the list.
 
 ### Install
 
+Register component globally via `app.use`, refer to [Component Registration](#/en-US/xinyunewlink) for more registration ways.
+
 ```javascript
 import { createApp } from 'vue';
-import { Cell, CellGroup, Icon } from '@nutui/nutui';
+import { Cell, CellGroup } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Cell);
 app.use(CellGroup);
-app.use(Icon)
 ```
 
 ### Basic Usage
@@ -201,23 +202,19 @@ You can center the left and right contents of the cell vertically through the 'c
 
 ### Cell Props
 
-| Attribute               | Description                                                                                              | Type             | Default          |
-|-------------------------|----------------------------------------------------------------------------------------------------------|------------------|------------------|
-| title                   | Title                                                                                                    | String           | -                |
-| sub-title               | Subtitle                                                                                                 | String           | -                |
-| desc                    | Description                                                                                              | String           | -                |
-| desc-text-align         | Right description text alignment [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String           | right            |
-| is-link                 | Whether to show the right arrow and turn on click feedback                                               | Boolean          | false            |
-| icon                    | Left [icon name](#/en-US/component/icon) or image url                                                                    | String           | -                |
-| right-icon`v3.2.1`      | Right [icon name](#/en-US/component/icon) or image url                                                                   | String           | right            |
-| round-radius            | Corner radius                                                                                            | Number           | 6px              |
-| url                     | Link URL                                                                                                 | String           | -                |
-| to                      | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -                |
-| replace                 | If true, the navigation will not leave a history record                                                  | Boolean          | false            |
-| center`v3.1.21`         | Whether to center content vertically                                                                     | Boolean          | false            |
-| size`v3.1.22`           | Size, can be set to `large`                                                                              | String           | ''               |
-| font-class-name`v3.2.1` | Custom icon font base class name                                                                         | String           | `nutui-iconfont` |
-| class-prefix`v3.2.1`    | Custom icon class name prefix for using custom icons                                                     | String           | `nut-icon`       |
+| Attribute       | Description                                                                                              | Type             | Default |
+|-----------------|----------------------------------------------------------------------------------------------------------|------------------|---------|
+| title           | Title                                                                                                    | String           | -       |
+| sub-title       | Subtitle                                                                                                 | String           | -       |
+| desc            | Description                                                                                              | String           | -       |
+| desc-text-align | Right description text alignment [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String           | right   |
+| is-link         | Whether to show the right arrow and turn on click feedback                                               | Boolean          | false   |
+| round-radius    | Corner radius                                                                                            | Number           | 6px     |
+| url             | Link URL                                                                                                 | String           | -       |
+| to              | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -       |
+| replace         | If true, the navigation will not leave a history record                                                  | Boolean          | false   |
+| center          | Whether to center content vertically                                                                     | Boolean          | false   |
+| size            | Size, can be set to `large`                                                                              | String           | ''      |
 
 ### Cell Events
 
@@ -227,16 +224,16 @@ You can center the left and right contents of the cell vertically through the 'c
 
 ### Cell Slots
 
-| Name            | Description        |
-|-----------------|--------------------|
-| icon `v3.1.4`   | Custom Left `icon` |
-| default         | Default slot       |
-| link            | Custom Right`link` |
-| title `v3.1.22` | Custom`title`slot  |
+| Name    | Description        |
+|---------|--------------------|
+| icon    | Custom Left `icon` |
+| default | Default slot       |
+| link    | Custom Right`link` |
+| title   | Custom`title`slot  |
 
 ### CellGroup Slots
 
-| Name            | Description       |
-|-----------------|-------------------|
-| title `v3.1.10` | Custom`title`slot |
-| desc `v3.1.12`  | Custom`desc`slot  |
+| Name  | Description       |
+|-------|-------------------|
+| title | Custom`title`slot |
+| desc  | Custom`desc`slot  |

src/packages/__VUE/cell/doc.md

@@ -6,14 +6,15 @@
 
 ### 安装
 
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/xinyunewlink)。
+
 ```javascript
 import { createApp } from 'vue';
-import { Cell, CellGroup, Icon } from '@nutui/nutui';
+import { Cell, CellGroup } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Cell);
 app.use(CellGroup);
-app.use(Icon)
 ```
 
 ### 基础用法
@@ -204,23 +205,19 @@ app.use(Icon)
 
 ### Cell Props
 
-| 字段                    | 说明                                                                                           | 类型             | 默认值           |
-|-------------------------|------------------------------------------------------------------------------------------------|------------------|------------------|
-| 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                    | 左侧 [图标名称](#/zh-CN/component/icon) 或图片链接                                                             | String           | -                |
-| right-icon`v3.2.1`      | 右侧箭头 [图标名称](#/zh-CN/component/icon) 或图片链接                                                         | String           | right            |
-| round-radius            | 圆角半径                                                                                       | Number           | 6px              |
-| url `小程序不支持`      | 点击后跳转的链接地址                                                                           | String           | -                |
-| to `小程序不支持`       | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -                |
-| replace `小程序不支持`  | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false            |
-| center`v3.1.21`         | 是否使内容垂直居中                                                                             | Boolean          | false            |
-| size`v3.1.22`           | 单元格大小，可选值为 `large`                                                                   | String           | -                |
-| font-class-name`v3.2.1` | 自定义icon 字体基础类名                                                                        | string           | `nutui-iconfont` |
-| class-prefix`v3.2.1`    | 自定义icon 类名前缀，用于使用自定义图标                                                        | string           | `nut-icon`       |
+| 字段            | 说明                                                                                           | 类型             | 默认值 |
+|-----------------|------------------------------------------------------------------------------------------------|------------------|--------|
+| 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  |
+| round-radius    | 圆角半径                                                                                       | Number           | 6px    |
+| url             | 点击后跳转的链接地址                                                                           | String           | -      |
+| to              | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -      |
+| replace         | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false  |
+| center          | 是否使内容垂直居中                                                                             | Boolean          | false  |
+| size            | 单元格大小，可选值为 `large`                                                                   | String           | -      |
 
 
 ### Cell Events
@@ -231,16 +228,16 @@ app.use(Icon)
 
 ### Cell Slots
 
-| 名称            | 说明                  |
-|-----------------|-----------------------|
-| icon `v3.1.4`   | 自定义左侧`icon`区域  |
-| default         | 自定义内容            |
-| link            | 自定义右侧`link`区域  |
-| title `v3.1.22` | 自定义`title`标题区域 |
+| 名称    | 说明                  |
+|---------|-----------------------|
+| icon    | 自定义左侧`icon`区域  |
+| default | 自定义内容            |
+| link    | 自定义右侧`link`区域  |
+| title   | 自定义`title`标题区域 |
 
 ### CellGroup Slots
 
-| 名称            | 说明                  |
-|-----------------|-----------------------|
-| title `v3.1.10` | 自定义`title`标题区域 |
-| desc `v3.1.12`  | 自定义`desc`描述区域  |
+| 名称  | 说明                  |
+|-------|-----------------------|
+| title | 自定义`title`标题区域 |
+| desc  | 自定义`desc`描述区域  |

src/packages/__VUE/cell/doc.taro.md

@@ -0,0 +1,239 @@
+# Cell 单元格
+
+### 介绍
+
+列表项，可组成列表。
+
+### 安装
+
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/xinyunewlink)。
+
+```javascript
+import { createApp } from 'vue';
+import { Cell, CellGroup } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Cell);
+app.use(CellGroup);
+```
+
+### 基础用法
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="我是标题" desc="描述文字"></nut-cell>
+  <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+  <nut-cell title="点击测试" @click="testClick"></nut-cell>
+  <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
+</template>
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const switchChecked = ref(true);
+      const testClick = (event) => {
+        console.log('click')
+      };
+      return { testClick, switchChecked };
+    }
+  };
+</script>
+```
+
+:::
+
+### 尺寸设置 large
+
+:::demo
+
+```html
+<template>
+  <nut-cell size="large" title="我是标题" desc="描述文字"></nut-cell>
+  <nut-cell size="large" title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+</template>
+```
+
+:::
+
+### 直接使用插槽
+
+:::demo
+
+```html
+<template>
+  <nut-cell>
+    <div>自定义内容</div>
+  </nut-cell>
+</template>
+```
+
+:::
+
+
+
+### 直接使用插槽(slot title)
+
+:::demo
+
+```html
+<template>
+  <nut-cell desc="描述文字">
+      <template v-slot:title>
+        <span>Title <b style="color: red">1</b></span>
+      </template>
+  </nut-cell>
+</template>
+```
+
+:::
+
+### 链接 | 分组用法
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
+    <nut-cell title="链接" is-link></nut-cell>
+    <nut-cell title="URL 跳转" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
+    <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+  </nut-cell-group>
+</template>
+```
+
+:::
+
+### 自定义右侧箭头区域
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="自定义右侧箭头区域">
+    <nut-cell title="Switch">
+      <template v-slot:link>
+        <nut-switch v-model="switchChecked" />
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+      const testClick = (event: Event) => {
+        console.log('点击事件');
+      };
+      const switchChecked = ref(true);
+      return { testClick, switchChecked };
+    }
+  };
+</script>
+```
+
+:::
+
+### 自定义左侧 Icon 区域
+
+:::demo
+
+```html
+<template>
+  <nut-cell-group title="自定义左侧 Icon 区域">
+    <nut-cell title="图片">
+      <template v-slot:icon>
+        <img
+          class="nut-icon"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </template>
+    </nut-cell>
+  </nut-cell-group>
+</template>
+```
+
+:::
+
+### 单元格展示图标
+
+:::demo
+
+```html
+<template>
+  <nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+</template>
+```
+
+:::
+
+### 只展示 desc ，可通过 desc-text-align 调整内容位置
+
+:::demo
+
+```html
+<template>
+  <nut-cell desc-text-align="left" desc="张三"></nut-cell>
+</template>
+```
+
+:::
+### 垂直居中
+
+通过 `center` 属性可以让 Cell 的左右内容都垂直居中。
+
+:::demo
+
+```html
+<template>
+  <nut-cell center title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+</template>
+```
+
+:::
+
+## API
+
+### CellGroup Props
+
+| 字段  | 说明     | 类型   | 默认值 |
+|-------|----------|--------|--------|
+| title | 分组标题 | String | -      |
+| desc  | 分组描述 | String | -      |
+
+### Cell Props
+
+| 字段            | 说明                                                                                         | 类型    | 默认值 |
+|-----------------|----------------------------------------------------------------------------------------------|---------|--------|
+| 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  |
+| round-radius    | 圆角半径                                                                                     | Number  | 6px    |
+| center          | 是否使内容垂直居中                                                                           | Boolean | false  |
+| size            | 单元格大小，可选值为 `large`                                                                 | String  | -      |
+
+
+### Cell Events
+
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| click | 点击事件 | event:Event |
+
+### Cell Slots
+
+| 名称    | 说明                  |
+|---------|-----------------------|
+| icon    | 自定义左侧`icon`区域  |
+| default | 自定义内容            |
+| link    | 自定义右侧`link`区域  |
+| title   | 自定义`title`标题区域 |
+
+### CellGroup Slots
+
+| 名称  | 说明                  |
+|-------|-----------------------|
+| title | 自定义`title`标题区域 |
+| desc  | 自定义`desc`描述区域  |

src/packages/__VUE/cell/index.taro.vue

@@ -5,8 +5,9 @@ import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 const { componentName, create } = createComponent('cell');
-
+import { Right } from '@nutui/icons-vue';
 export default create({
+  components: { Right },
   props: {
     title: { type: String, default: '' },
     subTitle: { type: String, default: '' },
@@ -17,8 +18,6 @@ export default create({
     replace: { type: Boolean, default: false },
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
-    icon: { type: String, default: '' },
-    rightIcon: { type: String, default: 'right' },
     center: { type: Boolean, default: false },
     size: { type: String, default: '' } // large
   },

src/packages/__VUE/cell/index.vue

@@ -5,8 +5,10 @@ import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useRouter } from '@/packages/utils/useRoute';
 import { pxCheck } from '@/packages/utils/pxCheck';
+import { Right } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('cell');
 export default create({
+  components: { Right },
   props: {
     title: { type: String, default: '' },
     subTitle: { type: String, default: '' },
@@ -17,8 +19,6 @@ export default create({
     replace: { type: Boolean, default: false },
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
-    icon: { type: String, default: '' },
-    rightIcon: { type: String, default: 'right' },
     center: { type: Boolean, default: false },
     size: { type: String, default: '' } // large
   },

src/packages/__VUE/cell/template.html

@@ -1,9 +1,7 @@
 <view :class="classes" :style="baseStyle" @click="handleClick">
     <slot>
         <view class="nut-cell__icon" v-if="icon || $slots.icon">
-            <slot name="icon">
-                <nut-icon v-bind="$attrs" v-if="icon" class="icon" :name="icon"></nut-icon>
-            </slot>
+            <slot name="icon"></slot>
         </view>
         <view class="nut-cell__title" v-if="title || subTitle || $slots.title">
 
@@ -23,7 +21,7 @@
             :class="{ 'nut-cell__value--alone': (!title && !subTitle && !$slots.title) }"
             :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
         <slot name="link">
-            <nut-icon v-if="isLink || to" class="nut-cell__link" v-bind="$attrs" :name="rightIcon"></nut-icon>
+            <Right v-if="isLink || to" class="nut-cell__link"></Right>
         </slot>
     </slot>
 </view>