chore(empty): optimize (#2443)

jdf2e · Jul 20, 2023 · 4d67af7 · 4d67af7
1 parent 2b6cdcf
commit 4d67af7
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 233 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue
@@ -23,11 +23,10 @@
 
     <h2>自定义图片</h2>
     <div class="show">
-      <nut-empty description="无优惠券">
-        <template #image>
-          <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-        </template>
-      </nut-empty>
+      <nut-empty
+        image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+        description="无优惠券"
+      ></nut-empty>
     </div>
 
     <h2>底部内容</h2>
@@ -41,21 +40,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const tabValue = ref(0);
-    return {
-      tabValue,
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
+const tabValue = ref(0);
 </script>
 
 <style lang="scss">

diff --git a/src/packages/__VUE/empty/__tests__/index.spec.ts b/src/packages/__VUE/empty/__tests__/index.spec.ts
@@ -1,46 +1,48 @@
 import { mount } from '@vue/test-utils';
 import Empty from '../../empty/index.vue';
 
-describe('Empty', () => {
-  test('should be shown when passing image and description', () => {
-    const wrapper = mount(Empty, {
-      props: {
-        image: 'empty',
-        description: '这是文字描述'
-      }
-    });
-
-    expect(wrapper.html()).toContain('img');
-    expect(wrapper.html()).toContain('这是文字描述');
+test('Empty: should be shown when passing image and description', () => {
+  const wrapper = mount(Empty, {
+    props: {
+      image: 'empty',
+      imageSize: '50',
+      description: '这是文字描述'
+    }
   });
 
-  test('should be shown when passing slot image', () => {
-    const wrapper = mount(Empty, {
-      slots: {
-        image: '<img src="https://abc.png"/>'
-      }
-    });
+  expect(wrapper.html()).toContain('img');
+  expect(wrapper.html()).toContain('这是文字描述');
+});
 
-    expect(wrapper.html()).toContain('abc.png');
+test('Empty: should be shown when passing slot image', () => {
+  const wrapper = mount(Empty, {
+    slots: {
+      image: '<img src="https://abc.png"/>'
+    }
   });
 
-  test('should be shown when passing slot description', () => {
-    const wrapper = mount(Empty, {
-      slots: {
-        description: 'test'
-      }
-    });
+  expect(wrapper.html()).toContain('abc.png');
+});
 
-    expect(wrapper.html()).toContain('test');
+test('Empty: should be shown when passing slot description', () => {
+  const wrapper = mount(Empty, {
+    props: {
+      image: 'https://abc.png'
+    },
+    slots: {
+      description: 'test'
+    }
   });
 
-  test('should be shown when passing slot defalut', () => {
-    const wrapper = mount(Empty, {
-      slots: {
-        default: '加载失败，请刷新页面'
-      }
-    });
+  expect(wrapper.html()).toContain('test');
+});
 
-    expect(wrapper.html()).toContain('加载失败');
+test('Empty: should be shown when passing slot defalut', () => {
+  const wrapper = mount(Empty, {
+    slots: {
+      default: '加载失败，请刷新页面'
+    }
   });
+
+  expect(wrapper.html()).toContain('加载失败');
 });
diff --git a/src/packages/__VUE/empty/demo.vue b/src/packages/__VUE/empty/demo.vue
@@ -22,10 +22,10 @@
 
     <h2>{{ translate('customImg') }}</h2>
     <div class="show">
-      <nut-empty :description="translate('description')">
-        <template #image>
-          <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-        </template>
+      <nut-empty
+        image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+        :description="translate('description')"
+      >
       </nut-empty>
     </div>
 
@@ -40,8 +40,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('empty');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -74,17 +74,8 @@ const initTranslate = () =>
       retry: 'Retry'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const tabValue = ref(0);
-    return {
-      tabValue,
-      translate
-    };
-  }
-});
+initTranslate();
+const tabValue = ref(0);
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/packages/__VUE/empty/doc.en-US.md b/src/packages/__VUE/empty/doc.en-US.md
@@ -6,7 +6,7 @@ Occupation reminder when empty.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Empty } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty description="no data"></nut-empty>
 </template>
@@ -30,7 +30,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabs v-model="tabValue">
     <nut-tab-pane title="empty">
@@ -44,16 +44,8 @@ app.use(Empty);
     </nut-tab-pane>
   </nut-tabs>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const tabValue = ref(0);
-      return {
-        tabValue
-      };
-    }
-  };
+<script setup>
+const tabValue = ref(0);
 </script>
 ```
 
@@ -63,13 +55,12 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-empty description="Description">
-    <template #image>
-      <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-    </template>
-  </nut-empty>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="Description"
+  ></nut-empty>
 </template>
 ```
 
@@ -79,7 +70,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty image="error" description="Failed to load">
     <div style="margin-top: 10px">
@@ -91,7 +82,7 @@ app.use(Empty);
 
 :::
 
-## API
+## Empty
 
 ### Props
 

diff --git a/src/packages/__VUE/empty/doc.md b/src/packages/__VUE/empty/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Empty } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty description="无数据"></nut-empty>
 </template>
@@ -30,7 +30,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabs v-model="tabValue">
     <nut-tab-pane title="无内容">
@@ -44,16 +44,8 @@ app.use(Empty);
     </nut-tab-pane>
   </nut-tabs>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const tabValue = ref(0);
-      return {
-        tabValue
-      };
-    }
-  };
+<script setup>
+const tabValue = ref(0);
 </script>
 ```
 
@@ -63,13 +55,12 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-empty description="描述文字">
-    <template #image>
-      <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-    </template>
-  </nut-empty>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="描述文字"
+  ></nut-empty>
 </template>
 ```
 
@@ -79,7 +70,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty image="error" description="加载失败">
     <div style="margin-top: 10px">
@@ -91,7 +82,7 @@ app.use(Empty);
 
 :::
 
-## API
+## Empty
 
 ### Props