chore: fix demo

Tencent · Aug 29, 2024 · cc30e12 · cc30e12
1 parent 42c5592
commit cc30e12
Show file tree

Hide file tree

Showing 12 changed files with 862 additions and 67 deletions.
diff --git a/src/empty/_example-composition/base.vue b/src/empty/_example-composition/base.vue
@@ -1,7 +1,3 @@
 <template>
-  <t-space direction="vertical" align="center">
-    <t-empty>
-      <template #title>title</template>
-    </t-empty>
-  </t-space>
+  <t-empty />
 </template>
diff --git a/src/empty/_example-composition/descriptions.vue b/src/empty/_example-composition/descriptions.vue
@@ -1,18 +1,9 @@
 <template>
-  <t-empty :description="description" :title="title">
-    <template #action>
-      <t-button @click="goToIndex">返回首页</t-button>
-    </template>
-  </t-empty>
+  <t-empty :description="description" :title="title"> </t-empty>
 </template>
 <script setup>
 import { ref } from 'vue';
 
-const title = ref('空状态 Empty');
-const description = ref('暂无数据 Description');
-
-function goToIndex() {
-  console.log('go to index');
-  location.href = '/';
-}
+const title = ref('Empty');
+const description = ref('Description');
 </script>
diff --git a/src/empty/_example-composition/self-defined.vue b/src/empty/_example-composition/self-defined.vue
@@ -11,12 +11,12 @@
       <t-empty description="暂无数据">
         <template #image>
           <div
-            style="
-              width: '64px';
-              height: '64px';
-              background-image: 'url(https://tdesign.gtimg.com/demo/demo-image-1.png)';
-              background-size: '100% 100%';
-            "
+            :style="{
+              width: '64px',
+              height: '64px',
+              backgroundImage: 'url(https://tdesign.gtimg.com/demo/demo-image-1.png)',
+              backgroundSize: '100% 100%',
+            }"
           ></div>
         </template>
       </t-empty>

diff --git a/src/empty/_example-composition/size.vue b/src/empty/_example-composition/size.vue
@@ -5,7 +5,7 @@
       <t-radio-button value="medium">medium</t-radio-button>
       <t-radio-button value="large">large</t-radio-button>
     </t-radio-group>
-    <div style="margin-top: '20px'; height: '100px'">
+    <div style="margin-top: 20px; height: 100px">
       <t-row :gutter="40">
         <t-col>
           <t-empty type="empty" :size="size"></t-empty>
@@ -26,14 +26,12 @@
     </div>
   </t-space>
 </template>
-<script lang="ts" setup>
+<script setup>
 import { ref } from 'vue';
 
-type SIZE = 'small' | 'medium' | 'large';
-
 const size = ref('medium');
 
-function onChange(value: SIZE) {
+const onChange = (value) => {
   this.size = value;
-}
+};
 </script>
diff --git a/src/empty/_example/base.vue b/src/empty/_example/base.vue
@@ -1,7 +1,3 @@
 <template>
-  <t-space direction="vertical" align="center">
-    <t-empty>
-      <template #title>title</template>
-    </t-empty>
-  </t-space>
+  <t-empty />
 </template>
diff --git a/src/empty/_example/descriptions.vue b/src/empty/_example/descriptions.vue
@@ -1,17 +1,12 @@
 <template>
-  <t-empty :description="description" :title="title">
-    <template #action>
-      <t-button @click="goToIndex">返回首页</t-button>
-    </template>
-  </t-empty>
+  <t-empty :description="description" :title="title"> </t-empty>
 </template>
 <script>
 export default {
   data() {
     return {
-      title: '空状态 Empty',
-      description: '暂无数据 Description',
-      timer: null,
+      title: 'Empty',
+      description: 'Description',
     };
   },
   methods: {

diff --git a/src/empty/_example/self-defined.vue b/src/empty/_example/self-defined.vue
@@ -11,12 +11,12 @@
       <t-empty description="暂无数据">
         <template #image>
           <div
-            style="
-              width: '64px';
-              height: '64px';
-              background-image: 'url(https://tdesign.gtimg.com/demo/demo-image-1.png)';
-              background-size: '100% 100%';
-            "
+            :style="{
+              width: '64px',
+              height: '64px',
+              backgroundImage: 'url(https://tdesign.gtimg.com/demo/demo-image-1.png)',
+              backgroundSize: '100% 100%',
+            }"
           ></div>
         </template>
       </t-empty>

diff --git a/src/empty/_example/size.vue b/src/empty/_example/size.vue
@@ -5,7 +5,7 @@
       <t-radio-button value="medium">medium</t-radio-button>
       <t-radio-button value="large">large</t-radio-button>
     </t-radio-group>
-    <div style="margin-top: '20px'; height: '100px'">
+    <div style="margin-top: 20px; height: 100px">
       <t-row :gutter="40">
         <t-col>
           <t-empty type="empty" :size="size"></t-empty>

diff --git a/src/empty/empty.md b/src/empty/empty.md
@@ -8,7 +8,7 @@
 -- | -- | -- | -- | --
 action | Slot / Function | - | 操作按钮。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 description | String / Slot / Function | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-image | String / Slot / Function | - | 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：`<Empty image={{ src: '', shape: 'round' }} />`。TS 类型：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/empty/type.ts) | N
+image | String / Slot / Function | - | 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件。TS 类型：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/empty/type.ts) | N
 imageStyle | Object | - | 透传图片样式表。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 size | String | medium | 空状态的尺寸，默认为 `medium`。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 title | String / Slot / Function | - | 错误标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

diff --git a/src/empty/empty.tsx b/src/empty/empty.tsx
@@ -5,8 +5,9 @@ import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import type { TNode } from '@src/common';
 import { useConfig, usePrefixClass } from '../config-provider/useConfig';
+import { useCommonClassName } from '../hooks/useConfig';
+
 import props from './props';
-import type { TdEmptyProps } from './type';
 import Image from '../image';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import MaintenanceSvg from './assets/MaintenanceSvg';
@@ -15,6 +16,8 @@ import EmptySvg from './assets/EmptySvg';
 import FailSvg from './assets/FailSvg';
 import SuccessSvg from './assets/SuccessSvg';
 
+import type { TdEmptyProps } from './type';
+
 export default defineComponent({
   name: 'TEmpty',
   components: { TImage: Image },
@@ -23,9 +26,10 @@ export default defineComponent({
     const {
       size, image: propsImage, description: propsDescription, title: propsTitle, type,
     } = toRefs(props);
-    const { globalConfig, classPrefix: tClassPrefix } = useConfig('empty');
-    const classPrefix = usePrefixClass('empty');
-
+    const { globalConfig } = useConfig('empty');
+    const componentName = usePrefixClass('empty');
+    const showAction = computed(() => props.action || slots.action);
+    const { SIZE } = useCommonClassName();
     const defaultMaps: {
       [key in TdEmptyProps['type']]?: Pick<TdEmptyProps, 'image' | 'title'>;
     } = {
@@ -51,17 +55,11 @@ export default defineComponent({
       },
     };
 
-    const defaultSize = {
-      small: `${tClassPrefix.value}-size-s`,
-      medium: `${tClassPrefix.value}-size`,
-      large: `${tClassPrefix.value}-size-l`,
-    };
-
-    const emptyClasses = computed(() => [classPrefix.value, defaultSize[size.value]]);
-    const titleClasses = [`${classPrefix.value}__title`];
-    const imageClasses = [`${classPrefix.value}__image`];
-    const descriptionClasses = [`${classPrefix.value}__description`];
-    const actionClass = [`${classPrefix.value}__action`];
+    const emptyClasses = computed(() => [componentName.value, SIZE.value[size.value]]);
+    const titleClasses = [`${componentName.value}__title`];
+    const imageClasses = [`${componentName.value}__image`];
+    const descriptionClasses = [`${componentName.value}__description`];
+    const actionClass = [`${componentName.value}__action`];
 
     const typeImageProps = computed(() => defaultMaps[type.value] ?? null);
     const showImage = computed(() => propsImage.value || typeImageProps.value?.image || slots.image);
@@ -77,6 +75,7 @@ export default defineComponent({
       showImage,
       showTitle,
       showDescription,
+      showAction,
     };
   },
   methods: {
@@ -98,7 +97,7 @@ export default defineComponent({
       if (data && Reflect.has(data as TNode, 'render')) {
         result = h(data as unknown);
       } else if (isObject(data)) {
-        result = <t-image {...(data as any)} />;
+        result = <t-image {...data} />;
       } else if (isString(data)) {
         result = <t-image src={data} />;
       }
@@ -116,7 +115,7 @@ export default defineComponent({
         ) : null}
         {this.renderTitle()}
         {this.renderDescription()}
-        {this.$slots?.action ? <div class={this.actionClass}>{renderTNodeJSX(this, 'action')}</div> : null}
+        {this.showAction ? <div class={this.actionClass}>{renderTNodeJSX(this, 'action')}</div> : null}
       </div>
     );
   },