Skip to content

Commit

Permalink
Refactor/result (#543)
Browse files Browse the repository at this point in the history
* feat(Result): update api

* chore: result

* chore: update theme

* chore: update snap

---------

Co-authored-by: anlyyao <[email protected]>
Co-authored-by: lem <[email protected]>
  • Loading branch information
3 people committed Apr 7, 2023
1 parent b21ae41 commit 27311df
Show file tree
Hide file tree
Showing 9 changed files with 379 additions and 290 deletions.
531 changes: 304 additions & 227 deletions src/result/__test__/__snapshots__/demo.test.jsx.snap

Large diffs are not rendered by default.

26 changes: 2 additions & 24 deletions src/result/demos/mobile.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<p class="summary">结果反馈</p>
<tdesign-demo-block title="01 类型" />

<tdesign-demo-block v-for="(item, index) in resultList" :key="index" :summary="item.title">
<ThemeDemo :theme="item.theme" :title="item.title" :description="item.description" />
<tdesign-demo-block summary="不同结果状态">
<ThemeDemo />
</tdesign-demo-block>
<tdesign-demo-block title="" summary="自定义结果">
<CustomDemo />
Expand Down Expand Up @@ -36,28 +36,6 @@ import { ref } from 'vue';
import ThemeDemo from './theme.vue';
import CustomDemo from './custom.vue';
const resultList = [
{
title: '成功状态',
theme: 'success',
description: '描述文字',
},
{
title: '失败状态',
theme: 'error',
description: '描述文字',
},
{
title: '警示状态',
theme: 'warning',
description: '描述文字',
},
{
title: '默认状态',
theme: 'default',
description: '描述文字',
},
];
const showResult = ref(false);
const handleClick = () => {
Expand Down
29 changes: 26 additions & 3 deletions src/result/demos/theme.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,38 @@
<template>
<t-result :theme="theme" :title="title" :description="description" />
<div v-for="(item, index) in resultList" :key="index">
<t-result :theme="item.theme" :title="item.title" :description="item.description" />
</div>
</template>

<script lang="ts" setup>
import { toRefs, defineProps } from 'vue';
const resultList = [
{
title: '成功状态',
theme: 'success',
description: '描述文字',
},
{
title: '失败状态',
theme: 'error',
description: '描述文字',
},
{
title: '警示状态',
theme: 'warning',
description: '描述文字',
},
{
title: '默认状态',
theme: 'default',
description: '描述文字',
},
];
const props = defineProps({
theme: String,
title: String,
description: String,
});
const { theme, title, description } = toRefs(props);
</script>
23 changes: 13 additions & 10 deletions src/result/props.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { PropType } from 'vue';
/* eslint-disable */

/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */

import { TdResultProps } from './type';
import { PropType } from 'vue';

export default {
/** 描述文字 */
Expand All @@ -8,17 +14,13 @@ export default {
},
/** 图标名称 */
icon: {
type: [String, Function] as PropType<TdResultProps['icon']>,
type: Function as PropType<TdResultProps['icon']>,
},
/** 图片地址 */
image: {
type: [String, Function] as PropType<TdResultProps['image']>,
},
/** 标题 */
title: {
type: [String, Function] as PropType<TdResultProps['title']>,
},
/** 内置主题 */
/** 内置主题。 */
theme: {
type: String as PropType<TdResultProps['theme']>,
default: 'default' as TdResultProps['theme'],
Expand All @@ -27,8 +29,9 @@ export default {
return ['default', 'success', 'warning', 'error'].includes(val);
},
},
/** 透传 Image 组件全部属性 */
imageProps: {
type: Object as PropType<TdResultProps['imageProps']>,
/** 标题 */
title: {
type: [String, Function] as PropType<TdResultProps['title']>,
default: '',
},
};
12 changes: 12 additions & 0 deletions src/result/result.en-US.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
:: BASE_DOC ::

## API
### Result Props

name | type | default | description | required
-- | -- | -- | -- | --
description | String / Slot / Function | - | Typescript:`string \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
icon | Slot / Function | - | Typescript:`TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
image | String / Slot / Function | - | Typescript:`string \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
theme | String | default | options:default/success/warning/error | N
title | String / Slot / Function | '' | Typescript:`string \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
15 changes: 7 additions & 8 deletions src/result/result.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
## API
### Result Props

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | ------------- | ------ | ------ | ---- |
| title | String / Slot | - | 标题 | N |
| description | String / Slot | - | 描述文字 | N |
| icon | String | - | 图标名称 | N |
| image | String / Slot | - | 图片地址 | N |
| theme | String | default| 内置主题。可选项:default/success/warning/error | N |
| imageProps | Object | - | 透传 Image 组件全部属性。TS 类型:`ImageProps`[Image API Documents](./image?tab=api)。 | N
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
description | String / Slot / Function | - | 描述文字。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
icon | Slot / Function | - | 图标名称。TS 类型:`TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
image | String / Slot / Function | - | 图片地址。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
theme | String | default | 内置主题。。可选项:default/success/warning/error | N
title | String / Slot / Function | '' | 标题。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
8 changes: 3 additions & 5 deletions src/result/result.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ import { h, computed, toRefs, getCurrentInstance, defineComponent } from 'vue';
import { InfoCircleIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
import resultProps from './props';
import config from '../config';
import { TdResultProps } from './type';
import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
import { renderTNode, TNode } from '../shared';
const { prefix } = config;
const name = `${prefix}-result`;
Expand All @@ -51,20 +50,19 @@ export default defineComponent({
const classes = computed(() => [`${name}`, `${name}--theme-${props.theme}`]);
let iconContent: any;
if (props.icon !== '') {
if (props?.theme) {
if (Object.keys(iconDefault).includes(props?.theme as string)) {
const key = props.theme as string;
iconContent = computed(() => iconDefault?.[key]);
}
iconContent = props.icon ? computed(() => renderTNode(internalInstance, 'icon')) : iconContent;
}
iconContent = props.icon ? computed(() => renderTNode(internalInstance, 'icon')) : iconContent;
const baseImageProps = {
src: props.image,
};
const customImageProps = computed(() => ({
...props.imageProps,
...baseImageProps,
}));
Expand Down
2 changes: 1 addition & 1 deletion src/result/style/index.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
import '../../_common/style/mobile/components/result/_index.less';
import '../../_common/style/mobile/components/result/v2/_index.less';
23 changes: 11 additions & 12 deletions src/result/type.ts
Original file line number Diff line number Diff line change
@@ -1,33 +1,32 @@
import { ImageProps } from '../image';
/* eslint-disable */

/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */

import { TNode } from '../common';

export interface TdResultProps {
/**
* 描述文字
*/
description?: string | TNode;

/**
* 图标名称
* @default ''
*/
icon?: string | TNode;
icon?: TNode;
/**
* 图片地址
*/
image?: string | TNode;
/**
* 标题
* @default ''
*/
title?: string | TNode;
/**
* 内置主题
* 内置主题。
* @default default
*/
theme?: 'default' | 'success' | 'warning' | 'error';
/**
* 透传 Image 组件全部属性
* 标题
* @default ''
*/
imageProps?: ImageProps;
title?: string | TNode;
}

0 comments on commit 27311df

Please sign in to comment.