refactor(empty): move to script setup (jd-opensource#2991)

src/config.json

@@ -626,6 +626,7 @@
           "version": "3.0.0",
           "name": "Empty",
           "cName": "空状态",
+          "setup": true,
           "desc": "空状态时占位提示",
           "author": "wujia8"
         },

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

@@ -48,6 +48,14 @@ app.use(Empty);
 | image | Custom image |
 | description | Custom description |
 
+### Types version
+
+The component exports the following type definitions:
+
+```ts
+import type { EmptyImage, EmptyProps, EmptyInstance } from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/empty/doc.md

@@ -48,6 +48,14 @@ app.use(Empty);
 | image | 自定义图片 |
 | description | 自定义描述文字 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { EmptyImage, EmptyProps, EmptyInstance } from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -48,6 +48,14 @@ app.use(Empty);
 | image | 自定义图片 |
 | description | 自定义描述文字 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { EmptyImage, EmptyProps, EmptyInstance } from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/empty/empty.taro.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="nut-empty">
+    <view class="nut-empty__box" :style="style">
+      <slot name="image">
+        <img v-if="src" class="nut-empty__box--img" :src="src" />
+      </slot>
+    </view>
+
+    <slot name="description">
+      <view class="nut-empty__description">{{ descriptionText }}</view>
+    </slot>
+
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { EmptyImage } from './types';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { useLocale } from '@/packages/utils/useLocale';
+
+defineOptions({
+  name: 'NutEmpty'
+});
+
+export type emptyProps = Partial<{
+  image: EmptyImage;
+  imageSize: number | string;
+  description: string;
+}>;
+
+const props = withDefaults(defineProps<emptyProps>(), {
+  image: 'empty',
+  imageSize: '',
+  description: ''
+});
+
+const translate = useLocale('NutEmpty');
+
+const defaultStatus: any = {
+  empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
+  error: 'https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png',
+  network: 'https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png'
+};
+
+const style = computed(() => {
+  if (props.imageSize) {
+    return {
+      width: pxCheck(props.imageSize),
+      height: pxCheck(props.imageSize)
+    };
+  }
+  return {};
+});
+
+const src = computed(() => {
+  if (props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//')) {
+    return props.image;
+  } else {
+    return defaultStatus[props.image];
+  }
+});
+
+const descriptionText = computed(() => {
+  return props.description || translate('noData');
+});
+</script>

src/packages/__VUE/empty/empty.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="nut-empty">
+    <view class="nut-empty__box" :style="style">
+      <slot name="image">
+        <img v-if="src" class="nut-empty__box--img" :src="src" />
+      </slot>
+    </view>
+
+    <slot name="description">
+      <view class="nut-empty__description">{{ descriptionText }}</view>
+    </slot>
+
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { EmptyImage } from './types';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { useLocale } from '@/packages/utils/useLocale';
+
+defineOptions({
+  name: 'NutEmpty'
+});
+
+export type emptyProps = Partial<{
+  image: EmptyImage;
+  imageSize: number | string;
+  description: string;
+}>;
+
+const props = withDefaults(defineProps<emptyProps>(), {
+  image: 'empty',
+  imageSize: '',
+  description: ''
+});
+
+const translate = useLocale('NutEmpty');
+
+const defaultStatus: any = {
+  empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
+  error: 'https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png',
+  network: 'https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png'
+};
+
+const style = computed(() => {
+  if (props.imageSize) {
+    return {
+      width: pxCheck(props.imageSize),
+      height: pxCheck(props.imageSize)
+    };
+  }
+  return {};
+});
+
+const src = computed(() => {
+  if (props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//')) {
+    return props.image;
+  } else {
+    return defaultStatus[props.image];
+  }
+});
+
+const descriptionText = computed(() => {
+  return props.description || translate('noData');
+});
+</script>

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

@@ -0,0 +1,12 @@
+import Empty from './empty.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Empty);
+
+export type { emptyProps } from './empty.taro.vue';
+export type { EmptyImage } from './types';
+
+export type EmptyInstance = ComponentPublicInstance & InstanceType<typeof Empty>;
+
+export { Empty, Empty as default };

src/packages/__VUE/empty/index.ts

@@ -0,0 +1,12 @@
+import Empty from './empty.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Empty);
+
+export type { emptyProps } from './empty.vue';
+export type { EmptyImage } from './types';
+
+export type EmptyInstance = ComponentPublicInstance & InstanceType<typeof Empty>;
+
+export { Empty, Empty as default };