refactor(trend-arrow): move to script setup (jd-opensource#2993)

src/config.json

@@ -781,6 +781,7 @@
           "cType": "展示组件",
           "cName": "趋势箭头",
           "desc": "带有箭头指示的百分比数字,用以展示指标趋势",
+          "setup": true,
           "author": "liukun"
         },
         {

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

@@ -65,6 +65,14 @@ app.use(TrendArrow);
 | up-icon | custom up icon |
 | down-icon | custom down icon |
 
+### Types version
+
+The component exports the following type definitions:
+
+```ts
+import type { TrendArrowProps, TrendArrowInstance } from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/trendarrow/doc.md

@@ -65,6 +65,14 @@ app.use(TrendArrow);
 | up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
 | down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { TrendArrowProps, TrendArrowInstance } from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -65,6 +65,14 @@ app.use(TrendArrow);
 | up-icon | 自定义向上箭头图标，默认使用 `TriangleUp` |
 | down-icon | 自定义向下箭头图标，默认使用 `TriangleDown` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { TrendArrowProps, TrendArrowInstance } from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -0,0 +1,11 @@
+import TrendArrow from './trend-arrow.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(TrendArrow);
+
+export type { TrendArrowProps } from './trend-arrow.taro.vue';
+
+export type TrendArrowInstance = ComponentPublicInstance & InstanceType<typeof TrendArrow>;
+
+export { TrendArrow, TrendArrow as default };

src/packages/__VUE/trendarrow/index.ts

@@ -0,0 +1,11 @@
+import TrendArrow from './trend-arrow.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(TrendArrow);
+
+export type { TrendArrowProps } from './trend-arrow.vue';
+
+export type TrendArrowInstance = ComponentPublicInstance & InstanceType<typeof TrendArrow>;
+
+export { TrendArrow, TrendArrow as default };

src/packages/__VUE/trendarrow/trend-arrow.taro.vue

@@ -0,0 +1,77 @@
+<template>
+  <view class="nut-trend-arrow">
+    <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+    <slot v-if="Number(rate) !== 0 && isPositive" name="up-icon">
+      <TriangleUp :color="riseColor" />
+    </slot>
+    <slot v-if="Number(rate) !== 0 && !isPositive" name="down-icon">
+      <TriangleDown :color="dropColor" />
+    </slot>
+    <span v-if="arrowLeft" class="nut-trend-arrow-icon-after nut-trend-arrow-rate" :style="calcStyle">{{
+      calcRate
+    }}</span>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { myFixed } from '@/packages/utils/util';
+import { TriangleUp, TriangleDown } from '@nutui/icons-vue-taro';
+
+defineOptions({
+  name: 'NutTrendArrow'
+});
+
+export type TrendArrowProps = Partial<{
+  rate: number;
+  digits: number;
+  showSign: boolean;
+  showZero: boolean;
+  arrowLeft: boolean;
+  syncTextColor: boolean;
+  textColor: string;
+  riseColor: string;
+  dropColor: string;
+}>;
+
+const props = withDefaults(defineProps<TrendArrowProps>(), {
+  rate: 0,
+  digits: 2,
+  showSign: false,
+  showZero: false,
+  arrowLeft: false,
+  syncTextColor: true,
+  textColor: '#333',
+  riseColor: '#fa2c19',
+  dropColor: '#64b578'
+});
+
+const isPositive = computed(() => {
+  return props.rate > 0 ? true : false;
+});
+const calcRate = computed(() => {
+  const absRate = Math.abs(props.rate);
+  if (!props.showZero && props.rate === 0) {
+    return '--';
+  }
+  let resultRate = `${props.showSign && props.rate !== 0 ? (isPositive.value ? '+' : '-') : ''}${myFixed(
+    Number(absRate),
+    props.digits
+  )}%`;
+
+  return resultRate;
+});
+const calcStyle = computed(() => {
+  return {
+    color:
+      props.rate === 0
+        ? props.textColor
+        : props.syncTextColor
+          ? isPositive.value
+            ? props.riseColor
+            : props.dropColor
+          : props.textColor
+  };
+});
+</script>