chore(trendarrow): use icons-vue component

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

@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render triangle size when set iconsize 1`] = `
-"<view class=\\"nut-trend-arrow\\"><span class=\\"nut-trend-arrow-icon-before nut-trend-arrow-rate\\" style=\\"color: rgb(100, 181, 120);\\">10.00%</span>
-  <!---->
-  <!--v-if-->
-</view>"
-`;

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

@@ -1,11 +1,11 @@
-import { config, DOMWrapper, mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import Trendarrow from '../index.vue';
-import NutIcon from '../../icon/index.vue';
-import { nextTick, toRefs, reactive } from 'vue';
+import { Failure } from '@nutui/icons-vue';
+import { h } from 'vue';
 
 beforeAll(() => {
   config.global.components = {
-    NutIcon
+    Failure
   };
 });
 
@@ -126,17 +126,21 @@ 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 triangle size when set iconsize', async () => {
+test('should render SVG icon when use downIcon slots', async () => {
   const wrapper = mount(Trendarrow, {
     props: {
-      rate: -10,
-      iconSize: '14px'
+      rate: -10
+    },
+    slots: {
+      downIcon: h(Failure, {
+        color: 'blue',
+        width: '18',
+        height: '18'
+      })
     }
   });
-  await nextTick();
-  await nextTick();
-  expect(wrapper.html()).toMatchSnapshot();
-
-  const span = wrapper.find<HTMLElement>('.nut-icon');
-  expect(span.element.style.fontSize).toContain('14px');
+  const icon = wrapper.find('.nut-icon');
+  expect(icon.element.tagName).toEqual('svg');
+  expect(icon.element.getAttribute('color')).toEqual('blue');
+  expect(icon.html()).toContain('width: 18px');
 });

src/packages/__VUE/trendarrow/demo.vue

@@ -44,10 +44,11 @@
     </nut-cell>
     <view class="title">{{ translate('title7') }}</view>
     <nut-cell>
-      <nut-trend-arrow :rate="10.2365" :up-icon-name="'success'" />
-      <nut-trend-arrow :rate="-10.2365" :down-icon-name="'failure'" />
       <nut-trend-arrow :rate="10.2365">
-        <nut-icon name="heart-fill" color="#fa2c19" size="12px"></nut-icon>
+        <template #upIcon><Success color="blue" width="18" height="18" /></template>
+      </nut-trend-arrow>
+      <nut-trend-arrow :rate="-10.2365">
+        <template #downIcon><Failure color="red" /></template>
       </nut-trend-arrow>
     </nut-cell>
   </div>
@@ -56,6 +57,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('trend-arrow');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Success, Failure } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -80,6 +82,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Success, Failure },
   props: {},
   setup() {
     initTranslate();

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

@@ -36,8 +36,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :rate="10.2365"/>
-      <nut-trend-arrow :rate="-0.2535"/>
+    <nut-trend-arrow :rate="10.2365"/>
+    <nut-trend-arrow :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -50,8 +50,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :digits="0" :rate="10.2365"/>
-      <nut-trend-arrow :digits="0" :rate="-0.2535"/>
+    <nut-trend-arrow :digits="0" :rate="10.2365"/>
+    <nut-trend-arrow :digits="0" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -64,8 +64,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow arrowLeft :rate="0.2535"/>
-      <nut-trend-arrow arrowLeft :rate="-0.2535"/>
+    <nut-trend-arrow arrowLeft :rate="0.2535"/>
+    <nut-trend-arrow arrowLeft :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -78,8 +78,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow showSign :rate="1"/>
-      <nut-trend-arrow showSign :rate="-0.2535"/>
+    <nut-trend-arrow showSign :rate="1"/>
+    <nut-trend-arrow showSign :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -92,8 +92,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow showSign :rate="0"/>
-      <nut-trend-arrow showSign showZero :rate="0"/>
+    <nut-trend-arrow showSign :rate="0"/>
+    <nut-trend-arrow showSign showZero :rate="0"/>
   </nut-cell>
 </template>
 ```
@@ -106,21 +106,39 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
-      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
-      <nut-trend-arrow
-        :show-text-color="false"
-        showSign
-        :rate="-0.2535"
-        text-color="rgb(39,197,48)"
-        drop-color="rgb(255, 190, 13)"
-      />
+    <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
+    <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
+    <nut-trend-arrow
+      :show-text-color="false"
+      showSign
+      :rate="-0.2535"
+      text-color="rgb(39,197,48)"
+      drop-color="rgb(255, 190, 13)"
+    />
   </nut-cell>
 </template>
 ```
 
 :::
 
+### Custom icon
+
+::: demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-trend-arrow :rate="10.2365">
+      <template #upIcon><Success color="blue" width="18" height="18" /></template>
+    </nut-trend-arrow>
+    <nut-trend-arrow :rate="-10.2365">
+      <template #downIcon><Failure color="red" /></template>
+    </nut-trend-arrow>
+  </nut-cell>
+</template>
+```
+
+:::
 ## API
 
 ### Props
@@ -136,12 +154,10 @@ app.use(TrendArrow);
 | text-color        | text color               | String | '#333333'               |
 | rise-color         | up arrow color               | String | '#fa2c19'               |
 | drop-color         | down arrow color               | String | ‘#64b578’               |
-| icon-size         | arrow size               | String | '12px'               |
-| up-icon-name         | custom up arrow icon               | String | 'triangle-up'               |
-| down-icon-name         | custom down arrow icon               | String | 'triangle-down'               |
 
 ### Slots
 
 | Name    | Description         |
 |---------|--------------|
-| default | 	The default slot is used to customize the icon |
+| upIcon | custom up icon |
+| downIcon | custom down icon |

src/packages/__VUE/trendarrow/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-带有箭头指示的百分比数字,用以展示指标趋势
+带有箭头指示的百分比数字，用以展示指标趋势。
 
 ### 安装
 
@@ -38,8 +38,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :rate="10.2365"/>
-      <nut-trend-arrow :rate="-0.2535"/>
+    <nut-trend-arrow :rate="10.2365"/>
+    <nut-trend-arrow :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -52,8 +52,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :digits="0" :rate="10.2365"/>
-      <nut-trend-arrow :digits="0" :rate="-0.2535"/>
+    <nut-trend-arrow :digits="0" :rate="10.2365"/>
+    <nut-trend-arrow :digits="0" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -66,8 +66,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow arrowLeft :rate="0.2535"/>
-      <nut-trend-arrow arrowLeft :rate="-0.2535"/>
+    <nut-trend-arrow arrowLeft :rate="0.2535"/>
+    <nut-trend-arrow arrowLeft :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -80,8 +80,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow showSign :rate="1"/>
-      <nut-trend-arrow showSign :rate="-0.2535"/>
+    <nut-trend-arrow showSign :rate="1"/>
+    <nut-trend-arrow showSign :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -94,8 +94,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow showSign :rate="0"/>
-      <nut-trend-arrow showSign showZero :rate="0"/>
+    <nut-trend-arrow showSign :rate="0"/>
+    <nut-trend-arrow showSign showZero :rate="0"/>
   </nut-cell>
 </template>
 ```
@@ -108,15 +108,34 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
-      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
-      <nut-trend-arrow
-        :show-text-color="false"
-        showSign
-        :rate="-0.2535"
-        text-color="rgb(39,197,48)"
-        drop-color="rgb(255, 190, 13)"
-      />
+    <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
+    <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
+    <nut-trend-arrow
+      :show-text-color="false"
+      showSign
+      :rate="-0.2535"
+      text-color="rgb(39,197,48)"
+      drop-color="rgb(255, 190, 13)"
+    />
+  </nut-cell>
+</template>
+```
+
+:::
+
+### 自定义图标
+
+::: demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-trend-arrow :rate="10.2365">
+      <template #upIcon><Success color="blue" width="18" height="18" /></template>
+    </nut-trend-arrow>
+    <nut-trend-arrow :rate="-10.2365">
+      <template #downIcon><Failure color="red" /></template>
+    </nut-trend-arrow>
   </nut-cell>
 </template>
 ```
@@ -137,13 +156,10 @@ app.use(TrendArrow);
 | text-color        | 文字颜色               | String | '#333333'               |
 | rise-color         | 向上箭头颜色               | String | '#fa2c19'               |
 | drop-color         | 向下箭头颜色               | String | ‘#64b578’               |
-| icon-size         | 箭头大小               | String | '12px'               |
-| up-icon-name         | 自定义向上箭头icon               | String | 'triangle-up'               |
-| down-icon-name         | 自定义向下箭头icon               | String | 'triangle-down'               |
-
 
 ### Slots
 
 | 名称    | 说明         |
 |---------|--------------|
-| default | 	默认slot，用以自定义Icon内容 |
+| upIcon | 自定义向上箭头图标，默认使用 `TriangleUp` |
+| downIcon | 自定义向下箭头图标，默认使用 `TriangleDown` |

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

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-带有箭头指示的百分比数字,用以展示指标趋势
+带有箭头指示的百分比数字，用以展示指标趋势。
 
 ### 安装
 
@@ -38,8 +38,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :rate="10.2365"/>
-      <nut-trend-arrow :rate="-0.2535"/>
+    <nut-trend-arrow :rate="10.2365"/>
+    <nut-trend-arrow :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -52,8 +52,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :digits="0" :rate="10.2365"/>
-      <nut-trend-arrow :digits="0" :rate="-0.2535"/>
+    <nut-trend-arrow :digits="0" :rate="10.2365"/>
+    <nut-trend-arrow :digits="0" :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -66,8 +66,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow arrowLeft :rate="0.2535"/>
-      <nut-trend-arrow arrowLeft :rate="-0.2535"/>
+    <nut-trend-arrow arrowLeft :rate="0.2535"/>
+    <nut-trend-arrow arrowLeft :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -80,8 +80,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow showSign :rate="1"/>
-      <nut-trend-arrow showSign :rate="-0.2535"/>
+    <nut-trend-arrow showSign :rate="1"/>
+    <nut-trend-arrow showSign :rate="-0.2535"/>
   </nut-cell>
 </template>
 ```
@@ -94,8 +94,8 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow showSign :rate="0"/>
-      <nut-trend-arrow showSign showZero :rate="0"/>
+    <nut-trend-arrow showSign :rate="0"/>
+    <nut-trend-arrow showSign showZero :rate="0"/>
   </nut-cell>
 </template>
 ```
@@ -108,15 +108,34 @@ app.use(TrendArrow);
 ```html
 <template>
   <nut-cell>
-      <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
-      <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
-      <nut-trend-arrow
-        :show-text-color="false"
-        showSign
-        :rate="-0.2535"
-        text-color="rgb(39,197,48)"
-        drop-color="rgb(255, 190, 13)"
-      />
+    <nut-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)"/>
+    <nut-trend-arrow :rate="-0.2535" showSign drop-color="rgb(255, 190, 13)"/>
+    <nut-trend-arrow
+      :show-text-color="false"
+      showSign
+      :rate="-0.2535"
+      text-color="rgb(39,197,48)"
+      drop-color="rgb(255, 190, 13)"
+    />
+  </nut-cell>
+</template>
+```
+
+:::
+
+### 自定义图标
+
+::: demo
+
+```html
+<template>
+  <nut-cell>
+    <nut-trend-arrow :rate="10.2365">
+      <template #upIcon><Success color="blue" width="18" height="18" /></template>
+    </nut-trend-arrow>
+    <nut-trend-arrow :rate="-10.2365">
+      <template #downIcon><Failure color="red" /></template>
+    </nut-trend-arrow>
   </nut-cell>
 </template>
 ```
@@ -137,13 +156,10 @@ app.use(TrendArrow);
 | text-color        | 文字颜色               | String | '#333333'               |
 | rise-color         | 向上箭头颜色               | String | '#fa2c19'               |
 | drop-color         | 向下箭头颜色               | String | ‘#64b578’               |
-| icon-size         | 箭头大小               | String | '12px'               |
-| up-icon-name         | 自定义向上箭头icon               | String | 'triangle-up'               |
-| down-icon-name         | 自定义向下箭头icon               | String | 'triangle-down'               |
-
 
 ### Slots
 
 | 名称    | 说明         |
 |---------|--------------|
-| default | 	默认slot，用以自定义Icon内容 |
+| upIcon | 自定义向上箭头图标，默认使用 `TriangleUp` |
+| downIcon | 自定义向下箭头图标，默认使用 `TriangleDown` |

src/packages/__VUE/trendarrow/index.scss

@@ -13,5 +13,7 @@
   }
   .nut-icon {
     vertical-align: middle;
+    width: $trendarrow-icon-width;
+    height: $trendarrow-icon-width;
   }
 }

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

@@ -3,13 +3,11 @@
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
-    <slot>
-      <nut-icon
-        v-if="Number(rate) !== 0"
-        :size="calcIconProps.size"
-        :name="calcIconProps.name"
-        :color="calcIconProps.color"
-      />
+    <slot name="upIcon" v-if="Number(rate) !== 0 && rateTrend">
+      <TriangleUp :color="riseColor" />
+    </slot>
+    <slot name="downIcon" 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">{{
       calcRate
@@ -20,9 +18,11 @@
 import { reactive, toRefs, computed } from 'vue';
 import { myFixed } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
+import { TriangleUp, TriangleDown } from '@nutui/icons-vue-taro';
 const { componentName, create } = createComponent('trend-arrow');
 
 export default create({
+  components: { TriangleUp, TriangleDown },
   props: {
     rate: {
       type: Number,
@@ -59,21 +59,8 @@ export default create({
     dropColor: {
       type: String,
       default: '#64b578'
-    },
-    iconSize: {
-      type: String,
-      default: '12px'
-    },
-    upIconName: {
-      type: String,
-      default: 'triangle-up'
-    },
-    downIconName: {
-      type: String,
-      default: 'triangle-down'
     }
   },
-
   setup(props) {
     const state = reactive({
       rateTrend: props.rate > 0 ? true : false
@@ -105,17 +92,7 @@ export default create({
       };
       return style;
     });
-    const calcIconProps = computed(() => {
-      const { dropColor, riseColor, iconSize, upIconName, downIconName } = props;
-
-      let iconProps = {
-        name: state.rateTrend ? upIconName : downIconName,
-        color: state.rateTrend ? riseColor : dropColor,
-        size: iconSize
-      };
-      return iconProps;
-    });
-    return { ...toRefs(state), classes, calcRate, calcStyle, calcIconProps };
+    return { ...toRefs(state), classes, calcRate, calcStyle };
   }
 });
 </script>

src/packages/__VUE/trendarrow/index.vue

@@ -3,13 +3,11 @@
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
-    <slot>
-      <nut-icon
-        v-if="Number(rate) !== 0"
-        :size="calcIconProps.size"
-        :name="calcIconProps.name"
-        :color="calcIconProps.color"
-      />
+    <slot name="upIcon" v-if="Number(rate) !== 0 && rateTrend">
+      <TriangleUp :color="riseColor" />
+    </slot>
+    <slot name="downIcon" 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">{{
       calcRate
@@ -20,9 +18,11 @@
 import { reactive, toRefs, computed } from 'vue';
 import { myFixed } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
+import { TriangleUp, TriangleDown } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('trend-arrow');
 
 export default create({
+  components: { TriangleUp, TriangleDown },
   props: {
     rate: {
       type: Number,
@@ -59,21 +59,8 @@ export default create({
     dropColor: {
       type: String,
       default: '#64b578'
-    },
-    iconSize: {
-      type: String,
-      default: '12px'
-    },
-    upIconName: {
-      type: String,
-      default: 'triangle-up'
-    },
-    downIconName: {
-      type: String,
-      default: 'triangle-down'
     }
   },
-
   setup(props) {
     const state = reactive({
       rateTrend: props.rate > 0 ? true : false
@@ -105,17 +92,7 @@ export default create({
       };
       return style;
     });
-    const calcIconProps = computed(() => {
-      const { dropColor, riseColor, iconSize, upIconName, downIconName } = props;
-
-      let iconProps = {
-        name: state.rateTrend ? upIconName : downIconName,
-        color: state.rateTrend ? riseColor : dropColor,
-        size: iconSize
-      };
-      return iconProps;
-    });
-    return { ...toRefs(state), classes, calcRate, calcStyle, calcIconProps };
+    return { ...toRefs(state), classes, calcRate, calcStyle };
   }
 });
 </script>

src/packages/styles/css-variables.scss

@@ -916,4 +916,5 @@ page {
   // TrendArrow
   --nut-trendarrow-font-size: 14px;
   --nut-trendarrow-before-icon-margin: 4px;
+  --nut-trendarrow-icon-width: 12px;
 }

src/packages/styles/variables-jdb.scss

@@ -966,5 +966,6 @@ $invoice-padding: 10px 10px 20px !default;
 // TrendArrow
 $trendarrow-font-size: 14px !default;
 $trendarrow-before-icon-margin: 4px !default;
+$trendarrow-icon-width: 12px !default;
 
 @import './mixins/index';

src/packages/styles/variables-jddkh.scss

@@ -897,5 +897,6 @@ $invoice-padding: 10px 10px 20px !default;
 // TrendArrow
 $trendarrow-font-size: 14px !default;
 $trendarrow-before-icon-margin: 4px !default;
+$trendarrow-icon-width: 12px !default;
 
 @import './mixins/index';

src/packages/styles/variables-jdt.scss

@@ -873,5 +873,6 @@ $invoice-padding: 10px 10px 20px !default;
 // TrendArrow
 $trendarrow-font-size: 14px !default;
 $trendarrow-before-icon-margin: 4px !default;
+$trendarrow-icon-width: 12px !default;
 
 @import './mixins/index';

src/packages/styles/variables-var.scss

@@ -858,5 +858,6 @@ $invoice-padding: var(--nut-invoice-padding) !default;
 // TrendArrow
 $trendarrow-font-size: var(--nut-trendarrow-font-size) !default;
 $trendarrow-before-icon-margin: var(--nut-trendarrow-before-icon-margin) !default;
+$trendarrow-icon-width: var(--nut-trendarrow-icon-width) !default;
 
 @import './mixins/index';

src/packages/styles/variables.scss

@@ -906,5 +906,6 @@ $invoice-padding: 10px 10px 20px !default;
 // TrendArrow
 $trendarrow-font-size: 14px !default;
 $trendarrow-before-icon-margin: 4px !default;
+$trendarrow-icon-width: 12px !default;
 
 @import './mixins/index';