refactor(badge): move to script setup

Author: eiinu

src/config.json

@@ -719,6 +719,7 @@
           "name": "Badge",
           "cName": "徽标",
           "desc": "徽标",
+          "setup": true,
           "author": "liqiong"
         },
         {

src/packages/__VUE/badge/badge.taro.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="nut-badge">
+    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="style">
+      <slot name="icon"></slot>
+    </view>
+    <slot></slot>
+    <view
+      v-show="!hidden && (content || dot)"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
+      :style="style"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NutBadge'
+})
+
+export type BadgeProps = Partial<{
+  value: string | number
+  max: number
+  dot: boolean
+  bubble: boolean
+  hidden: boolean
+  top: string
+  right: string
+  zIndex: number
+  color: string
+}>
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  max: 10000,
+  dot: false,
+  bubble: false,
+  hidden: false,
+  top: '0',
+  right: '0',
+  zIndex: 9,
+  color: ''
+})
+
+const style = computed(() => {
+  return {
+    top: `${props.top}px`,
+    right: `${props.right}px`,
+    zIndex: props.zIndex,
+    background: props.color
+  }
+})
+
+const content = computed(() => {
+  if (props.dot) return
+  const value = props.value
+  const max = props.max
+  if (typeof value === 'number' && typeof max === 'number') {
+    return max < value ? `${max}+` : value
+  }
+  return value
+})
+</script>

src/packages/__VUE/badge/badge.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="nut-badge">
+    <view v-show="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="style">
+      <slot name="icon"></slot>
+    </view>
+    <slot></slot>
+    <view
+      v-show="!hidden && (content || dot)"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
+      :style="style"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NutBadge'
+})
+
+export type BadgeProps = Partial<{
+  value: string | number
+  max: number
+  dot: boolean
+  bubble: boolean
+  hidden: boolean
+  top: string
+  right: string
+  zIndex: number
+  color: string
+}>
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  max: 10000,
+  dot: false,
+  bubble: false,
+  hidden: false,
+  top: '0',
+  right: '0',
+  zIndex: 9,
+  color: ''
+})
+
+const style = computed(() => {
+  return {
+    top: `${props.top}px`,
+    right: `${props.right}px`,
+    zIndex: props.zIndex,
+    background: props.color
+  }
+})
+
+const content = computed(() => {
+  if (props.dot) return
+  const value = props.value
+  const max = props.max
+  if (typeof value === 'number' && typeof max === 'number') {
+    return max < value ? `${max}+` : value
+  }
+  return value
+})
+</script>

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

@@ -57,6 +57,17 @@ app.use(Badge)
 | default | Default slot |
 | icon | Icon slot |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  BadgeProps,
+  BadgeInstance
+} from '@nutui/nutui'
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/badge/doc.md

@@ -57,6 +57,17 @@ app.use(Badge)
 | default | 徽标包裹的子元素 |
 | icon | 徽标自定义 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  BadgeProps,
+  BadgeInstance
+} from '@nutui/nutui'
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -57,6 +57,17 @@ app.use(Badge)
 | default | 徽标包裹的子元素 |
 | icon | 徽标自定义 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  BadgeProps,
+  BadgeInstance
+} from '@nutui/nutui-taro'
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -0,0 +1,11 @@
+import Badge from './badge.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Badge)
+
+export type { BadgeProps } from './badge.taro.vue'
+
+export type BadgeInstance = ComponentPublicInstance & InstanceType<typeof Badge>
+
+export { Badge, Badge as default }

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

@@ -0,0 +1,11 @@
+import Badge from './badge.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Badge)
+
+export type { BadgeProps } from './badge.vue'
+
+export type BadgeInstance = ComponentPublicInstance & InstanceType<typeof Badge>
+
+export { Badge, Badge as default }