Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

src/packages/__VUE/navbar/demo.vue

@@ -28,7 +28,7 @@
       :titleIcon="true"
       :desc="translate('desc2')"
     >
-      <template #titleIcon>
+      <template #title-icon>
         <Cart2 width="16px"></Cart2>
       </template>
       <template #right>

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

@@ -7,7 +7,6 @@ Provide navigation function, often used at the top of the page.
 ### Install
 
 ```javascript
-
 import { createApp } from 'vue';
 import { Navbar, Tabs, TabPane } from '@nutui/nutui';
 
@@ -49,7 +48,7 @@ app.use(TabPane);
     :titleIcon="true"
     desc="Edit"
   >
-    <template #titleIcon>
+    <template #title-icon>
       <Cart2 width="16px"></Cart2>
     </template>
     <template #right>
@@ -217,8 +216,8 @@ export default {
 | left | Customize left content |
 | right | Customize the content on the right |
 | content |  Customize the middle content of the navigation bar |
-| leftShow  | Custom icon of left arrow  |
-| titleIcon  | Custom icon in header |
+| left-show  | Custom icon of left arrow  |
+| title-icon  | Custom icon in header |
 
 ## Theming
 

src/packages/__VUE/navbar/doc.md

@@ -7,7 +7,6 @@
 ### 安装
 
 ```javascript
-
 import { createApp } from 'vue';
 import { Navbar, Tabs, TabPane } from '@nutui/nutui';
 
@@ -49,7 +48,7 @@ app.use(TabPane);
     :titleIcon="true"
     desc="编辑"
   >
-    <template #titleIcon>
+    <template #title-icon>
       <Cart2 width="16px"></Cart2>
     </template>
     <template #right>
@@ -218,8 +217,8 @@ export default {
 | left | 自定义左侧内容 |
 | right | 自定义右侧内容 |
 | content |  自定义导航栏中间内容 |
-| leftShow  | 左侧箭头自定义图标 |
-| titleIcon  | 标题中自定义图标 |
+| left-show  | 左侧箭头自定义图标 |
+| title-icon  | 标题中自定义图标 |
 
 ## 主题定制
 

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

@@ -7,7 +7,6 @@
 ### 安装
 
 ```javascript
-
 import { createApp } from 'vue';
 import { Navbar, Tabs, TabPane } from '@nutui/nutui-taro';
 
@@ -49,7 +48,7 @@ app.use(TabPane);
     :titleIcon="true"
     desc="编辑"
   >
-    <template #titleIcon>
+    <template #title-icon>
       <Cart2 width="16px"></Cart2>
     </template>
     <template #right>
@@ -218,8 +217,8 @@ export default {
 | left | 自定义左侧内容 |
 | right | 自定义右侧内容 |
 | content |  自定义导航栏中间内容 |
-| leftShow  | 左侧箭头自定义图标 |
-| titleIcon  | 标题中自定义图标 |
+| left-show  | 左侧箭头自定义图标 |
+| title-icon  | 标题中自定义图标 |
 
 ## 主题定制
 

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

@@ -2,7 +2,7 @@
   <view v-if="fixed && placeholder" class="nut-navbar--placeholder" :style="{ height: navHeight + 'px' }">
     <view :class="classes" :style="styles" class="navBarHtml">
       <view class="nut-navbar__left" @click="handleLeft">
-        <slot name="leftShow" v-if="leftShow">
+        <slot name="left-show" v-if="leftShow">
           <Left height="12px" color="#979797"></Left>
         </slot>
         <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
@@ -11,7 +11,7 @@
       <view class="nut-navbar__title">
         <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
         <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
-          <slot name="titleIcon" @click="handleCenterIcon"></slot>
+          <slot name="title-icon" @click="handleCenterIcon"></slot>
         </view>
         <slot name="content"></slot>
       </view>
@@ -23,7 +23,7 @@
   </view>
   <view v-else :class="classes" :style="styles">
     <view class="nut-navbar__left" @click="handleLeft">
-      <slot name="leftShow" v-if="leftShow">
+      <slot name="left-show" v-if="leftShow">
         <Left height="12px" color="#979797"></Left>
       </slot>
       <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
@@ -32,7 +32,7 @@
     <view class="nut-navbar__title">
       <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
       <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
-        <slot name="titleIcon" @click="handleCenterIcon"></slot>
+        <slot name="title-icon" @click="handleCenterIcon"></slot>
       </view>
       <slot name="content"></slot>
     </view>

src/packages/__VUE/navbar/index.vue

@@ -2,7 +2,7 @@
   <view v-if="fixed && placeholder" class="nut-navbar--placeholder" ref="navBarWrap">
     <view :class="classes" :style="styles" ref="navBarHtml">
       <view class="nut-navbar__left" @click="handleLeft">
-        <slot name="leftShow" v-if="leftShow">
+        <slot name="left-show" v-if="leftShow">
           <Left height="12px" color="#979797"></Left>
         </slot>
         <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
@@ -11,7 +11,7 @@
       <view class="nut-navbar__title">
         <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
         <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
-          <slot name="titleIcon" @click="handleCenterIcon"></slot>
+          <slot name="title-icon" @click="handleCenterIcon"></slot>
         </view>
         <slot name="content"></slot>
       </view>
@@ -23,7 +23,7 @@
   </view>
   <view v-else :class="classes" :style="styles">
     <view class="nut-navbar__left" @click="handleLeft">
-      <slot name="leftShow" v-if="leftShow">
+      <slot name="left-show" v-if="leftShow">
         <Left height="12px" color="#979797"></Left>
       </slot>
       <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
@@ -32,7 +32,7 @@
     <view class="nut-navbar__title">
       <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
       <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
-        <slot name="titleIcon" @click="handleCenterIcon"></slot>
+        <slot name="title-icon" @click="handleCenterIcon"></slot>
       </view>
       <slot name="content"></slot>
     </view>

src/packages/__VUE/popup/demo.vue

@@ -34,7 +34,7 @@
       :style="{ height: '20%' }"
       v-model:visible="showCloseIcon"
     >
-      <template #closeIcon>
+      <template #close-icon>
         <Heart></Heart>
       </template>
     </nut-popup>

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

@@ -79,7 +79,7 @@ Control the pop-up position by setting the value of `position`
 
 ### Icon
 
-The `closeable` controls whether the icon can be closed. The `close-icon-position` sets the position of the icon. The `closeIcon` defines the display icon.
+The `closeable` controls whether the icon can be closed. The `close-icon-position` sets the position of the icon. The `close-icon` defines the display icon.
 
 :::demo
 
@@ -91,7 +91,7 @@ The `closeable` controls whether the icon can be closed. The `close-icon-positio
   <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showIconPosition" ></nut-popup>
   <nut-cell title="custom icon" is-link @click="showCloseIcon = true" ></nut-cell>
   <nut-popup position="bottom" closeable close-icon-position="top-left" close-icon="heart" :style="{ height: '20%' }" v-model:visible="showCloseIcon">
-    <template #closeIcon>
+    <template #close-icon>
       <Heart></Heart>
     </template>
   </nut-popup>
@@ -246,7 +246,7 @@ Specify the mount node through `teleport`
 | Name | Description       |
 | ------ | ---------- |
 | default  | Customize Embedded Content |
-| closeIcon  | Custom icon for close button |
+| close-icon  | Custom icon for close button |
 
 ## Theming
 

src/packages/__VUE/popup/doc.md

@@ -80,7 +80,7 @@ app.use(Popup)
 
 ### 图标
 
-通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`closeIcon` 来自定义显示图标
+通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`close-icon` 来自定义显示图标
 
 :::demo
 
@@ -92,7 +92,7 @@ app.use(Popup)
   <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showIconPosition" ></nut-popup>
   <nut-cell title="自定义图标" is-link @click="showCloseIcon = true" ></nut-cell>
   <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showCloseIcon">
-    <template #closeIcon>
+    <template #close-icon>
       <Heart></Heart>
     </template>
   </nut-popup>
@@ -244,7 +244,7 @@ app.use(Popup)
 | 名称 | 说明       |
 | ------ | ---------- |
 | default  | 自定义内嵌内容 |
-| closeIcon  | 关闭按钮的自定义图标 |
+| close-icon  | 关闭按钮的自定义图标 |
 
 
 ## 主题定制

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

@@ -12,7 +12,6 @@ import { Popup } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Popup)
-
 ```
 
 
@@ -92,11 +91,17 @@ app.use(Popup)
   <nut-cell title="图标位置" is-link @click="showIconPosition = true" ></nut-cell>
   <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showIconPosition" ></nut-popup>
   <nut-cell title="自定义图标" is-link @click="showCloseIcon = true" ></nut-cell>
-  <nut-popup position="bottom" closeable close-icon-position="top-left" close-icon="heart" :style="{ height: '20%' }" v-model:visible="showCloseIcon"></nut-popup>
+  <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showCloseIcon">
+    <template #close-icon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Heart } from '@nutui/icons-vue-taro';
   export default {
+    components: { Heart },
     props: {},
     setup() {
       const state = reactive({
@@ -211,7 +216,7 @@ app.use(Popup)
 | 名称 | 说明       |
 | ------ | ---------- |
 | default  | 自定义内嵌内容 |
-
+| close-icon  | 关闭按钮的自定义图标 |
 
 ## 主题定制
 

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

@@ -21,7 +21,7 @@
           class="nut-popup__close-icon"
           :class="'nut-popup__close-icon--' + closeIconPosition"
         >
-          <slot name="closeIcon">
+          <slot name="close-icon">
             <Close height="12px"></Close>
           </slot>
         </view>

src/packages/__VUE/popup/index.vue

@@ -21,7 +21,7 @@
           class="nut-popup__close-icon"
           :class="'nut-popup__close-icon--' + closeIconPosition"
         >
-          <slot name="closeIcon">
+          <slot name="close-icon">
             <Close height="12px"></Close>
           </slot>
         </view>

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

@@ -126,13 +126,13 @@ test('should render triangle color when dropColor used', async () => {
   const span = wrapper.find<HTMLElement>('.nut-trend-arrow-rate');
   expect(span.element.style.color).toContain('(73, 143, 242)');
 });
-test('should render SVG icon when use downIcon slots', async () => {
+test('should render SVG icon when use down-icon slots', async () => {
   const wrapper = mount(Trendarrow, {
     props: {
       rate: -10
     },
     slots: {
-      downIcon: h(Failure, {
+      'down-icon': h(Failure, {
         color: 'blue',
         width: '18',
         height: '18'

src/packages/__VUE/trendarrow/demo.vue

@@ -45,10 +45,10 @@
     <view class="title">{{ translate('title7') }}</view>
     <nut-cell>
       <nut-trend-arrow :rate="10.2365">
-        <template #upIcon><Success color="blue" width="18" height="18" /></template>
+        <template #up-icon><Success color="blue" width="18" height="18" /></template>
       </nut-trend-arrow>
       <nut-trend-arrow :rate="-10.2365">
-        <template #downIcon><Failure color="red" /></template>
+        <template #down-icon><Failure color="red" /></template>
       </nut-trend-arrow>
     </nut-cell>
   </div>

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

@@ -5,7 +5,6 @@
 ### Install
 
 ```javascript
-
 import { createApp } from 'vue';
 import { TrendArrow } from '@nutui/nutui';
 
@@ -128,10 +127,10 @@ app.use(TrendArrow);
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
-      <template #upIcon><Success color="blue" width="18" height="18" /></template>
+      <template #up-icon><Success color="blue" width="18" height="18" /></template>
     </nut-trend-arrow>
     <nut-trend-arrow :rate="-10.2365">
-      <template #downIcon><Failure color="red" /></template>
+      <template #down-icon><Failure color="red" /></template>
     </nut-trend-arrow>
   </nut-cell>
 </template>
@@ -164,8 +163,8 @@ app.use(TrendArrow);
 
 | Name    | Description         |
 |---------|--------------|
-| upIcon | custom up icon |
-| downIcon | custom down icon |
+| up-icon | custom up icon |
+| down-icon | custom down icon |
 
 ## Theming
 

src/packages/__VUE/trendarrow/doc.md

@@ -7,7 +7,6 @@
 ### 安装
 
 ```javascript
-
 import { createApp } from 'vue';
 import { TrendArrow } from '@nutui/nutui';
 
@@ -130,10 +129,10 @@ app.use(TrendArrow);
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
-      <template #upIcon><Success color="blue" width="18" height="18" /></template>
+      <template #up-icon><Success color="blue" width="18" height="18" /></template>
     </nut-trend-arrow>
     <nut-trend-arrow :rate="-10.2365">
-      <template #downIcon><Failure color="red" /></template>
+      <template #down-icon><Failure color="red" /></template>
     </nut-trend-arrow>
   </nut-cell>
 </template>
@@ -166,8 +165,8 @@ app.use(TrendArrow);
 
 | 名称    | 说明         |
 |---------|--------------|
-| upIcon | 自定义向上箭头图标，默认使用 `TriangleUp` |
-| downIcon | 自定义向下箭头图标，默认使用 `TriangleDown` |
+| up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
+| down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
 ## 主题定制
 

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

@@ -7,7 +7,6 @@
 ### 安装
 
 ```javascript
-
 import { createApp } from 'vue';
 import { TrendArrow } from '@nutui/nutui-taro';
 
@@ -130,10 +129,10 @@ app.use(TrendArrow);
 <template>
   <nut-cell>
     <nut-trend-arrow :rate="10.2365">
-      <template #upIcon><Success color="blue" size="18px" /></template>
+      <template #up-icon><Success color="blue" size="18px" /></template>
     </nut-trend-arrow>
     <nut-trend-arrow :rate="-10.2365">
-      <template #downIcon><Failure color="red" /></template>
+      <template #down-icon><Failure color="red" /></template>
     </nut-trend-arrow>
   </nut-cell>
 </template>
@@ -166,8 +165,8 @@ app.use(TrendArrow);
 
 | 名称    | 说明         |
 |---------|--------------|
-| upIcon | 自定义向上箭头图标，默认使用 `TriangleUp` |
-| downIcon | 自定义向下箭头图标，默认使用 `TriangleDown` |
+| up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
+| down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
 ## 主题定制
 

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

@@ -3,10 +3,10 @@
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
-    <slot name="upIcon" v-if="Number(rate) !== 0 && rateTrend">
+    <slot name="up-icon" v-if="Number(rate) !== 0 && rateTrend">
       <TriangleUp :color="riseColor" />
     </slot>
-    <slot name="downIcon" v-if="Number(rate) !== 0 && !rateTrend">
+    <slot name="down-icon" v-if="Number(rate) !== 0 && !rateTrend">
       <TriangleDown :color="dropColor" />
     </slot>
     <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{

src/packages/__VUE/trendarrow/index.vue

@@ -3,10 +3,10 @@
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
-    <slot name="upIcon" v-if="Number(rate) !== 0 && rateTrend">
+    <slot name="up-icon" v-if="Number(rate) !== 0 && rateTrend">
       <TriangleUp :color="riseColor" />
     </slot>
-    <slot name="downIcon" v-if="Number(rate) !== 0 && !rateTrend">
+    <slot name="down-icon" v-if="Number(rate) !== 0 && !rateTrend">
       <TriangleDown :color="dropColor" />
     </slot>
     <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{

src/sites/mobile-taro/vue/src/basic/pages/popup/index.vue

@@ -34,7 +34,7 @@
       :style="{ height: '20%' }"
       v-model:visible="showCloseIcon"
     >
-      <template #closeIcon>
+      <template #close-icon>
         <Heart></Heart>
       </template>
     </nut-popup>

src/sites/mobile-taro/vue/src/exhibition/pages/trendarrow/index.vue

@@ -46,10 +46,10 @@
     <view class="title">自定义图标</view>
     <nut-cell>
       <nut-trend-arrow :rate="10.2365">
-        <template #upIcon><Success color="blue" size="18px" /></template>
+        <template #up-icon><Success color="blue" size="18px" /></template>
       </nut-trend-arrow>
       <nut-trend-arrow :rate="-10.2365">
-        <template #downIcon><Failure color="red" /></template>
+        <template #down-icon><Failure color="red" /></template>
       </nut-trend-arrow>
     </nut-cell>
   </div>

src/sites/mobile-taro/vue/src/nav/pages/navbar/index.vue

@@ -30,7 +30,7 @@
       :titleIcon="true"
       desc="编辑"
     >
-      <template #titleIcon>
+      <template #title-icon>
         <Cart2 width="16px"></Cart2>
       </template>
       <template #right>