refactor(indicator): move to script setup (jd-opensource#3000)

src/config.json

@@ -286,6 +286,7 @@
           "name": "Indicator",
           "cName": "指示器",
           "desc": "显示一个任务或流程的进度，常用语开通流程。",
+          "setup": true,
           "author": "senyawang"
         },
         {

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

@@ -38,6 +38,14 @@ app.use(Indicator)
 | align | Alignment, which takes effect only when `block` is `true`. optional value `left`, `right`, `center` | string | `left` |
 | fill-zero | Whether to add 0 before singular number | boolean | `true` |
 
+### Types version
+
+The component exports the following type definitions:
+
+```ts
+import type { IndicatorAlign, IndicatorProps, IndicatorInstance } from '@nutui/nutui'
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/indicator/doc.md

@@ -38,6 +38,14 @@ app.use(Indicator)
 | align | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center` | string | `left` |
 | fill-zero | 单数前面是否补 0 | boolean | `true` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { IndicatorAlign, IndicatorProps, IndicatorInstance } from '@nutui/nutui'
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -38,6 +38,14 @@ app.use(Indicator)
 | align | 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center` | string | `left` |
 | fill-zero | 单数前面是否补 0 | boolean | `true` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { IndicatorAlign, IndicatorProps, IndicatorInstance } from '@nutui/nutui-taro'
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -0,0 +1,13 @@
+import Indicator from './indicator.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Indicator)
+
+export type { IndicatorProps } from './indicator.taro.vue'
+
+export type { IndicatorAlign } from './types'
+
+export type IndicatorInstance = ComponentPublicInstance & InstanceType<typeof Indicator>
+
+export { Indicator, Indicator as default }

src/packages/__VUE/indicator/index.ts

@@ -0,0 +1,13 @@
+import Indicator from './indicator.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Indicator)
+
+export type { IndicatorProps } from './indicator.vue'
+
+export type { IndicatorAlign } from './types'
+
+export type IndicatorInstance = ComponentPublicInstance & InstanceType<typeof Indicator>
+
+export { Indicator, Indicator as default }

src/packages/__VUE/indicator/indicator.taro.vue

@@ -0,0 +1,44 @@
+<template>
+  <view :class="classes">
+    <template v-for="item in size" :key="item">
+      <view v-if="item === current" class="nut-indicator--number">
+        {{ (fillZero && padZero(item)) || item }}
+      </view>
+      <view v-else class="nut-indicator--dot"></view>
+    </template>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { padZero } from '@/packages/utils/util'
+import type { IndicatorAlign } from './types'
+
+defineOptions({
+  name: 'NutIndicator'
+})
+
+export type IndicatorProps = Partial<{
+  size: number
+  current: number
+  block: boolean
+  align: IndicatorAlign
+  fillZero: boolean
+}>
+
+const props = withDefaults(defineProps<IndicatorProps>(), {
+  size: 3,
+  current: 1,
+  block: false,
+  align: 'center',
+  fillZero: true
+})
+
+const classes = computed(() => {
+  const prefixCls = 'nut-indicator'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--block`]: props.block,
+    [`${prefixCls}--align__${props.align}`]: props.block && props.align
+  }
+})
+</script>

src/packages/__VUE/indicator/indicator.vue

@@ -0,0 +1,44 @@
+<template>
+  <view :class="classes">
+    <template v-for="item in size" :key="item">
+      <view v-if="item === current" class="nut-indicator--number">
+        {{ (fillZero && padZero(item)) || item }}
+      </view>
+      <view v-else class="nut-indicator--dot"></view>
+    </template>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { padZero } from '@/packages/utils/util'
+import type { IndicatorAlign } from './types'
+
+defineOptions({
+  name: 'NutIndicator'
+})
+
+export type IndicatorProps = Partial<{
+  size: number
+  current: number
+  block: boolean
+  align: IndicatorAlign
+  fillZero: boolean
+}>
+
+const props = withDefaults(defineProps<IndicatorProps>(), {
+  size: 3,
+  current: 1,
+  block: false,
+  align: 'center',
+  fillZero: true
+})
+
+const classes = computed(() => {
+  const prefixCls = 'nut-indicator'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--block`]: props.block,
+    [`${prefixCls}--align__${props.align}`]: props.block && props.align
+  }
+})
+</script>