From c04369547499b12d2fab03d96d44d66bc60a7214 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 13 Mar 2024 19:15:59 +0800
Subject: [PATCH] refactor(circle-progress): move to script setup (#2969)

---
 .../exhibition/pages/circleprogress/color.vue |   2 +-
 src/config.json                               |   1 +
 .../circleprogress/__tests__/index.spec.ts    |   2 +-
 .../circleprogress/circle-progress.taro.vue   | 111 +++++++++++++++
 .../__VUE/circleprogress/circle-progress.vue  | 103 ++++++++++++++
 .../__VUE/circleprogress/demo/color.vue       |   2 +-
 .../__VUE/circleprogress/doc.en-US.md         |  12 ++
 src/packages/__VUE/circleprogress/doc.md      |  12 ++
 src/packages/__VUE/circleprogress/doc.taro.md |  12 ++
 .../__VUE/circleprogress/index.taro.ts        |  13 ++
 .../__VUE/circleprogress/index.taro.vue       | 129 ------------------
 src/packages/__VUE/circleprogress/index.ts    |  13 ++
 src/packages/__VUE/circleprogress/index.vue   | 124 -----------------
 13 files changed, 280 insertions(+), 256 deletions(-)
 create mode 100644 src/packages/__VUE/circleprogress/circle-progress.taro.vue
 create mode 100644 src/packages/__VUE/circleprogress/circle-progress.vue
 create mode 100644 src/packages/__VUE/circleprogress/index.taro.ts
 delete mode 100644 src/packages/__VUE/circleprogress/index.taro.vue
 create mode 100644 src/packages/__VUE/circleprogress/index.ts
 delete mode 100644 src/packages/__VUE/circleprogress/index.vue

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/circleprogress/color.vue b/packages/nutui-taro-demo/src/exhibition/pages/circleprogress/color.vue
index 5af96da47a..b06589b629 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/circleprogress/color.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/circleprogress/color.vue
@@ -1,6 +1,6 @@
 <template>
   <nut-space>
-    <nut-circle-progress :progress="50" color="red" />
+    <nut-circle-progress :progress="50" color="skyblue" />
     <nut-circle-progress :progress="100" :color="gradientColor" />
   </nut-space>
 </template>
diff --git a/src/config.json b/src/config.json
index 23ceb815f1..bfb91decc8 100644
--- a/src/config.json
+++ b/src/config.json
@@ -608,6 +608,7 @@
           "name": "CircleProgress",
           "cName": "环形进度条",
           "desc": "用来展示进度",
+          "setup": true,
           "author": "Drjingubo"
         },
         {
diff --git a/src/packages/__VUE/circleprogress/__tests__/index.spec.ts b/src/packages/__VUE/circleprogress/__tests__/index.spec.ts
index 4cc485ae22..ee7c447e9f 100644
--- a/src/packages/__VUE/circleprogress/__tests__/index.spec.ts
+++ b/src/packages/__VUE/circleprogress/__tests__/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Circleprogress from '../index.vue';
+import Circleprogress from '../';
 
 test('CircleProgress: should change stoke when use width props', async () => {
   const wrapper = mount(Circleprogress, {
diff --git a/src/packages/__VUE/circleprogress/circle-progress.taro.vue b/src/packages/__VUE/circleprogress/circle-progress.taro.vue
new file mode 100644
index 0000000000..d8abc2ad7c
--- /dev/null
+++ b/src/packages/__VUE/circleprogress/circle-progress.taro.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class="nut-circle-progress" :style="{ height: Number(radius) * 2 + 'px', width: Number(radius) * 2 + 'px' }">
+    <div :style="style"></div>
+    <div class="nut-circle-progress__text">
+      <slot>
+        <span>{{ progress }}%</span>
+      </slot>
+    </div>
+  </view>
+</template>
+
+<script setup lang="ts">
+import Taro from '@tarojs/taro';
+import { computed, ref, watch } from 'vue';
+import type { CircleProgressStrokeLinecap } from './types';
+
+interface Item {
+  key?: string;
+  value?: string;
+}
+
+defineOptions({
+  name: 'NutCircleProgress'
+});
+
+export type CircleProgressProps = Partial<{
+  progress: string | number;
+  strokeWidth: string | number;
+  radius: string | number;
+  strokeLinecap: CircleProgressStrokeLinecap;
+  color: any;
+  pathColor: string;
+  clockwise: boolean;
+}>;
+
+const props = withDefaults(defineProps<CircleProgressProps>(), {
+  progress: 0,
+  strokeWidth: 5,
+  radius: 50,
+  strokeLinecap: 'round',
+  color: '#fa2c19',
+  pathColor: '#d9d9d9',
+  clockwise: true
+});
+
+const isIos = Taro.getSystemInfoSync().platform === 'ios';
+const currentRate = ref(props.progress);
+const refRandomId = Math.random().toString(36).slice(-8);
+const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';
+
+const transColor = (color: string | undefined) => {
+  return color && color.replace('#', '%23');
+};
+const stop = () => {
+  if (!isObject(props.color)) {
+    return [];
+  }
+  let color = props.color;
+  const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
+
+  let stopArr: object[] = [];
+  colorArr.map((item) => {
+    let obj = {
+      key: '',
+      value: ''
+    };
+    obj.key = item;
+    obj.value = color[item];
+    stopArr.push(obj);
+  });
+  return stopArr;
+};
+
+const style = computed(() => {
+  let { strokeWidth } = props;
+
+  let stopArr: Array<object> = stop();
+  let stopDom: string[] = [];
+  if (stopArr) {
+    stopArr.map((item: Item) => {
+      let obj = '';
+      obj = `%3Cstop offset='${item.key}' stop-color='${transColor(item.value)}'/%3E`;
+      stopDom.push(obj);
+    });
+  }
+  let perimeter = 283;
+  let progress = +currentRate.value;
+  let offset = (perimeter * Number(format(parseFloat(progress.toFixed(1))))) / 100;
+  const isWise = props.clockwise ? 1 : 0;
+  const color = isObject(props.color) ? `url(%23${refRandomId})` : transColor(props.color);
+  let d = `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
+  const pa = `%3Cdefs%3E%3ClinearGradient id='${refRandomId}' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E${stopDom}%3C/linearGradient%3E%3C/defs%3E`;
+  const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(props.pathColor)}' fill='none'/%3E`;
+  const path1 = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke-dasharray='${offset},${perimeter}' stroke-linecap='round' stroke='${color}' fill='none'/%3E`;
+
+  return {
+    background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E${pa}${path}${path1}%3C/svg%3E")`,
+    width: '100%',
+    height: '100%',
+    transition: `${isIos ? '' : 'background-image .3s ease 0s, '}stroke .3s ease 0s`
+  };
+});
+const format = (progress: string | number) => Math.min(Math.max(+progress, 0), 100);
+
+watch(
+  () => props.progress,
+  (value) => {
+    currentRate.value = Math.min(Math.max(+value, 0), 100);
+  }
+);
+</script>
diff --git a/src/packages/__VUE/circleprogress/circle-progress.vue b/src/packages/__VUE/circleprogress/circle-progress.vue
new file mode 100644
index 0000000000..40e6f2ef37
--- /dev/null
+++ b/src/packages/__VUE/circleprogress/circle-progress.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="nut-circle-progress" :style="{ height: Number(radius) * 2 + 'px', width: Number(radius) * 2 + 'px' }">
+    <svg viewBox="0 0 100 100">
+      <defs>
+        <linearGradient :id="refRandomId" x1="100%" y1="0%" x2="0%" y2="0%">
+          <stop v-for="(item, index) in stop" :key="index" :offset="item.key" :stop-color="item.value"></stop>
+        </linearGradient>
+      </defs>
+      <path class="nut-circle-progress__path" :style="pathStyle" :d="path" fill="none" :stroke-width="strokeWidth">
+        >
+      </path>
+      <path
+        class="nut-circle-progress__hover"
+        :style="hoverStyle"
+        :d="path"
+        fill="none"
+        :stroke="hoverColor"
+        :stroke-linecap="strokeLinecap"
+        :stroke-width="strokeWidth"
+      ></path>
+    </svg>
+    <div class="nut-circle-progress__text">
+      <slot>
+        <div>{{ progress }}%</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isObject } from '@/packages/utils/util';
+import type { CircleProgressStrokeLinecap } from './types';
+
+export interface stopArr {
+  key: string;
+  value: string;
+}
+
+defineOptions({
+  name: 'NutCircleProgress'
+});
+
+export type CircleProgressProps = Partial<{
+  progress: string | number;
+  strokeWidth: string | number;
+  radius: string | number;
+  strokeLinecap: CircleProgressStrokeLinecap;
+  color: any;
+  pathColor: string;
+  clockwise: boolean;
+}>;
+
+const props = withDefaults(defineProps<CircleProgressProps>(), {
+  progress: 0,
+  strokeWidth: 5,
+  radius: 50,
+  strokeLinecap: 'round',
+  color: '#fa2c19',
+  pathColor: '#d9d9d9',
+  clockwise: true
+});
+
+const refRandomId = Math.random().toString(36).slice(-8);
+const path = computed(() => {
+  const isWise = props.clockwise ? 1 : 0;
+  return `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
+});
+const hoverColor = computed(() => {
+  return isObject(props.color) ? `url(#${refRandomId})` : props.color;
+});
+const hoverStyle = computed(() => {
+  let perimeter = 283;
+  let offset = (perimeter * Number(props.progress)) / 100;
+  return {
+    stroke: isObject(props.color) ? `url(#${refRandomId})` : props.color,
+    strokeDasharray: `${offset}px ${perimeter}px`
+  };
+});
+const pathStyle = computed(() => {
+  return {
+    stroke: props.pathColor
+  };
+});
+const stop = computed(() => {
+  if (!isObject(props.color)) {
+    return;
+  }
+  let color = props.color;
+  const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
+  let stopArr: stopArr[] = [];
+  colorArr.map((item) => {
+    let obj = {
+      key: '',
+      value: ''
+    };
+    obj.key = item;
+    obj.value = color[item];
+    stopArr.push(obj);
+  });
+  return stopArr;
+});
+</script>
diff --git a/src/packages/__VUE/circleprogress/demo/color.vue b/src/packages/__VUE/circleprogress/demo/color.vue
index 5af96da47a..b06589b629 100644
--- a/src/packages/__VUE/circleprogress/demo/color.vue
+++ b/src/packages/__VUE/circleprogress/demo/color.vue
@@ -1,6 +1,6 @@
 <template>
   <nut-space>
-    <nut-circle-progress :progress="50" color="red" />
+    <nut-circle-progress :progress="50" color="skyblue" />
     <nut-circle-progress :progress="100" :color="gradientColor" />
   </nut-space>
 </template>
diff --git a/src/packages/__VUE/circleprogress/doc.en-US.md b/src/packages/__VUE/circleprogress/doc.en-US.md
index 6b4150b7dd..85687db070 100644
--- a/src/packages/__VUE/circleprogress/doc.en-US.md
+++ b/src/packages/__VUE/circleprogress/doc.en-US.md
@@ -58,6 +58,18 @@ app.use(CircleProgress);
 | --- | --- |
 | default | Custom Content |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  CircleProgressStrokeLinecap,
+  CircleProgressProps,
+  CircleProgressInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/circleprogress/doc.md b/src/packages/__VUE/circleprogress/doc.md
index cc2f9c7092..3235afa634 100644
--- a/src/packages/__VUE/circleprogress/doc.md
+++ b/src/packages/__VUE/circleprogress/doc.md
@@ -58,6 +58,18 @@ app.use(CircleProgress);
 | --- | --- |
 | default | 自定义文字内容 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CircleProgressStrokeLinecap,
+  CircleProgressProps,
+  CircleProgressInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/circleprogress/doc.taro.md b/src/packages/__VUE/circleprogress/doc.taro.md
index fef55adaf8..6bc2d83e23 100644
--- a/src/packages/__VUE/circleprogress/doc.taro.md
+++ b/src/packages/__VUE/circleprogress/doc.taro.md
@@ -58,6 +58,18 @@ app.use(CircleProgress);
 | --- | --- |
 | default | 自定义文字内容 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CircleProgressStrokeLinecap,
+  CircleProgressProps,
+  CircleProgressInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/circleprogress/index.taro.ts b/src/packages/__VUE/circleprogress/index.taro.ts
new file mode 100644
index 0000000000..59cfd6ccac
--- /dev/null
+++ b/src/packages/__VUE/circleprogress/index.taro.ts
@@ -0,0 +1,13 @@
+import CircleProgress from './circle-progress.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(CircleProgress);
+
+export type { CircleProgressProps } from './circle-progress.taro.vue';
+
+export type { CircleProgressStrokeLinecap } from './types';
+
+export type CircleProgressInstance = ComponentPublicInstance & InstanceType<typeof CircleProgress>;
+
+export { CircleProgress, CircleProgress as default };
diff --git a/src/packages/__VUE/circleprogress/index.taro.vue b/src/packages/__VUE/circleprogress/index.taro.vue
deleted file mode 100644
index 72d711ab11..0000000000
--- a/src/packages/__VUE/circleprogress/index.taro.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <view class="nut-circle-progress" :style="{ height: Number(radius) * 2 + 'px', width: Number(radius) * 2 + 'px' }">
-    <div :style="style"></div>
-    <div class="nut-circle-progress__text">
-      <slot>
-        <span>{{ progress }}%</span>
-      </slot>
-    </div>
-  </view>
-</template>
-
-<script lang="ts">
-import Taro from '@tarojs/taro';
-import { computed, ref, watch, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { CircleProgressStrokeLinecap } from './types';
-const { create } = createComponent('circle-progress');
-interface Item {
-  key?: string;
-  value?: string;
-}
-export default create({
-  props: {
-    progress: {
-      type: [Number, String],
-      default: 0
-    },
-    strokeWidth: {
-      type: [Number, String],
-      default: 5
-    },
-    radius: {
-      type: [Number, String],
-      default: 50
-    },
-    strokeLinecap: {
-      type: String as PropType<CircleProgressStrokeLinecap>,
-      default: 'round'
-    },
-    color: {
-      type: [String, Object],
-      default: '#FF673E'
-    },
-    pathColor: {
-      type: String,
-      default: '#d9d9d9'
-    },
-    clockwise: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const isIos = Taro.getSystemInfoSync().platform === 'ios';
-    const currentRate = ref(props.progress);
-    const refRandomId = Math.random().toString(36).slice(-8);
-    const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';
-
-    const transColor = (color: string | undefined) => {
-      return color && color.replace('#', '%23');
-    };
-    const stop = () => {
-      if (!isObject(props.color)) {
-        return [];
-      }
-      let color = props.color;
-      const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
-
-      let stopArr: object[] = [];
-      colorArr.map((item) => {
-        let obj = {
-          key: '',
-          value: ''
-        };
-        obj.key = item;
-        obj.value = color[item];
-        stopArr.push(obj);
-      });
-      return stopArr;
-    };
-
-    const style = computed(() => {
-      let { strokeWidth } = props;
-
-      let stopArr: Array<object> = stop();
-      let stopDom: string[] = [];
-      if (stopArr) {
-        stopArr.map((item: Item) => {
-          let obj = '';
-          obj = `%3Cstop offset='${item.key}' stop-color='${transColor(item.value)}'/%3E`;
-          stopDom.push(obj);
-        });
-      }
-      let perimeter = 283;
-      let progress = +currentRate.value;
-      let offset = (perimeter * Number(format(parseFloat(progress.toFixed(1))))) / 100;
-      const isWise = props.clockwise ? 1 : 0;
-      const color = isObject(props.color) ? `url(%23${refRandomId})` : transColor(props.color);
-      let d = `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
-      const pa = `%3Cdefs%3E%3ClinearGradient id='${refRandomId}' x1='100%25' y1='0%25' x2='0%25' y2='0%25'%3E${stopDom}%3C/linearGradient%3E%3C/defs%3E`;
-      const path = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke='${transColor(
-        props.pathColor
-      )}' fill='none'/%3E`;
-      const path1 = `%3Cpath d='${d}' stroke-width='${strokeWidth}' stroke-dasharray='${offset},${perimeter}' stroke-linecap='round' stroke='${color}' fill='none'/%3E`;
-
-      return {
-        background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100'  xmlns='http://www.w3.org/2000/svg'%3E${pa}${path}${path1}%3C/svg%3E")`,
-        width: '100%',
-        height: '100%',
-        transition: `${isIos ? '' : 'background-image .3s ease 0s, '}stroke .3s ease 0s`
-      };
-    });
-    const format = (progress: string | number) => Math.min(Math.max(+progress, 0), 100);
-
-    watch(
-      () => props.progress,
-      (value) => {
-        currentRate.value = Math.min(Math.max(+value, 0), 100);
-      }
-    );
-    return {
-      style,
-      currentRate,
-      refRandomId,
-      stop
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/circleprogress/index.ts b/src/packages/__VUE/circleprogress/index.ts
new file mode 100644
index 0000000000..b52b8f2115
--- /dev/null
+++ b/src/packages/__VUE/circleprogress/index.ts
@@ -0,0 +1,13 @@
+import CircleProgress from './circle-progress.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(CircleProgress);
+
+export type { CircleProgressProps } from './circle-progress.vue';
+
+export type { CircleProgressStrokeLinecap } from './types';
+
+export type CircleProgressInstance = ComponentPublicInstance & InstanceType<typeof CircleProgress>;
+
+export { CircleProgress, CircleProgress as default };
diff --git a/src/packages/__VUE/circleprogress/index.vue b/src/packages/__VUE/circleprogress/index.vue
deleted file mode 100644
index 74f2f41b43..0000000000
--- a/src/packages/__VUE/circleprogress/index.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div class="nut-circle-progress" :style="{ height: Number(radius) * 2 + 'px', width: Number(radius) * 2 + 'px' }">
-    <svg viewBox="0 0 100 100">
-      <defs>
-        <linearGradient :id="refRandomId" x1="100%" y1="0%" x2="0%" y2="0%">
-          <stop v-for="(item, index) in stop" :key="index" :offset="item.key" :stop-color="item.value"></stop>
-        </linearGradient>
-      </defs>
-      <path class="nut-circle-progress__path" :style="pathStyle" :d="path" fill="none" :stroke-width="strokeWidth">
-        >
-      </path>
-      <path
-        class="nut-circle-progress__hover"
-        :style="hoverStyle"
-        :d="path"
-        fill="none"
-        :stroke="hoverColor"
-        :stroke-linecap="strokeLinecap"
-        :stroke-width="strokeWidth"
-      ></path>
-    </svg>
-    <div class="nut-circle-progress__text">
-      <slot>
-        <div>{{ progress }}%</div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { isObject } from '@/packages/utils/util';
-const { create } = createComponent('circle-progress');
-import { CircleProgressStrokeLinecap } from './types';
-export interface stopArr {
-  key: string;
-  value: string;
-}
-
-export default create({
-  props: {
-    progress: {
-      type: [Number, String],
-      defualt: 0
-    },
-    strokeWidth: {
-      type: [Number, String],
-      default: 5
-    },
-    radius: {
-      type: [Number, String],
-      default: 50
-    },
-    strokeLinecap: {
-      type: String as PropType<CircleProgressStrokeLinecap>,
-      default: 'round'
-    },
-    color: {
-      type: [String, Object],
-      default: ''
-    },
-    pathColor: {
-      type: String,
-      default: ''
-    },
-    clockwise: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  setup(props) {
-    const refRandomId = Math.random().toString(36).slice(-8);
-    const path = computed(() => {
-      const isWise = props.clockwise ? 1 : 0;
-      return `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
-    });
-    const hoverColor = computed(() => {
-      return isObject(props.color) ? `url(#${refRandomId})` : props.color;
-    });
-    const hoverStyle = computed(() => {
-      let perimeter = 283;
-      let offset = (perimeter * Number(props.progress)) / 100;
-      return {
-        stroke: isObject(props.color) ? `url(#${refRandomId})` : props.color,
-        strokeDasharray: `${offset}px ${perimeter}px`
-      };
-    });
-    const pathStyle = computed(() => {
-      return {
-        stroke: props.pathColor
-      };
-    });
-    const stop = computed(() => {
-      if (!isObject(props.color)) {
-        return;
-      }
-      let color = props.color;
-      const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
-      let stopArr: stopArr[] = [];
-      colorArr.map((item) => {
-        let obj = {
-          key: '',
-          value: ''
-        };
-        obj.key = item;
-        obj.value = color[item];
-        stopArr.push(obj);
-      });
-      return stopArr;
-    });
-
-    return {
-      hoverStyle,
-      pathStyle,
-      path,
-      hoverColor,
-      stop,
-      refRandomId
-    };
-  }
-});
-</script>