From de77dee07016712fa530c48d243c6b0e1a1954f5 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 28 Mar 2023 15:31:44 +0800 Subject: [PATCH 1/9] docs(Empty): add api --- src/common.ts | 10 ++++++++++ src/empty/empty.en-US.md | 12 ++++++++++++ src/empty/empty.md | 12 ++++++++++++ src/empty/props.ts | 27 +++++++++++++++++++++++++++ src/empty/type.ts | 26 ++++++++++++++++++++++++++ 5 files changed, 87 insertions(+) create mode 100644 src/empty/empty.en-US.md create mode 100644 src/empty/empty.md create mode 100644 src/empty/props.ts create mode 100644 src/empty/type.ts diff --git a/src/common.ts b/src/common.ts index 1c662d2a2..e4a4b509a 100644 --- a/src/common.ts +++ b/src/common.ts @@ -109,3 +109,13 @@ export interface TScroll { * @deprecated use TScroll instead */ export type InfinityScroll = TScroll; + +export interface ScrollToElementParams { + /** 跳转元素下标 */ + index: number; + /** 跳转元素距离顶部的距离 */ + top?: number; + /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */ + time?: number; + behavior?: 'auto' | 'smooth'; +} diff --git a/src/empty/empty.en-US.md b/src/empty/empty.en-US.md new file mode 100644 index 000000000..e212d803d --- /dev/null +++ b/src/empty/empty.en-US.md @@ -0,0 +1,12 @@ +:: BASE_DOC :: + +## API + +### Empty Props + +name | type | default | description | required +-- | -- | -- | -- | -- +action | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +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 | String / Slot / Function | - | Typescript：`string \| 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 diff --git a/src/empty/empty.md b/src/empty/empty.md new file mode 100644 index 000000000..e21d5c85c --- /dev/null +++ b/src/empty/empty.md @@ -0,0 +1,12 @@ +:: BASE_DOC :: + +## API + +### Empty Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +action | Slot / Function | - | 操作按钮。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +description | String / Slot / Function | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +icon | String / Slot / Function | - | 图标。TS 类型：`string \| 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 diff --git a/src/empty/props.ts b/src/empty/props.ts new file mode 100644 index 000000000..66c69b7ab --- /dev/null +++ b/src/empty/props.ts @@ -0,0 +1,27 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdEmptyProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 操作按钮 */ + action: { + type: Function as PropType, + }, + /** 描述文字 */ + description: { + type: [String, Function] as PropType, + }, + /** 图标 */ + icon: { + type: [String, Function] as PropType, + }, + /** 图片地址 */ + image: { + type: [String, Function] as PropType, + }, +}; diff --git a/src/empty/type.ts b/src/empty/type.ts new file mode 100644 index 000000000..90ca74b84 --- /dev/null +++ b/src/empty/type.ts @@ -0,0 +1,26 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdEmptyProps { + /** + * 操作按钮 + */ + action?: TNode; + /** + * 描述文字 + */ + description?: string | TNode; + /** + * 图标 + */ + icon?: string | TNode; + /** + * 图片地址 + */ + image?: string | TNode; +} From bbd83a8ac45f0aa8f747cc3404ffb78ff0edace4 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 28 Mar 2023 15:48:37 +0800 Subject: [PATCH 2/9] feat: add empty router --- site/docs.config.js | 6 ++++++ src/_common | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/site/docs.config.js b/site/docs.config.js index 0a04e7598..f408d9bfd 100644 --- a/site/docs.config.js +++ b/site/docs.config.js @@ -245,6 +245,12 @@ export default { path: '/mobile-vue/components/count-down', component: () => import('@/count-down/count-down.md'), }, + { + title: 'Empty 空状态', + name: 'empty', + path: '/mobile-vue/components/empty', + component: () => import('@/empty/empty.md'), + }, { title: 'Tag 标签', name: 'tag', diff --git a/src/_common b/src/_common index c799f53da..962169d4d 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c799f53daf7af7eb22b9463fd721c3fffa998ebb +Subproject commit 962169d4dbdb759f9fef141ef41254db2e475dd1 From 058e92240b8db68269c60b2e00ca7cee56ae79f7 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 30 Mar 2023 10:20:04 +0800 Subject: [PATCH 3/9] fix: fix conflict --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 962169d4d..634a70fd4 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 962169d4dbdb759f9fef141ef41254db2e475dd1 +Subproject commit 634a70fd40f3a8352024953280e8badf69e5a4dd From 8d4470275180da413008e95b33fbc3d94cfa5955 Mon Sep 17 00:00:00 2001 From: lem <11597313+lemc@user.noreply.gitee.com> Date: Tue, 28 Mar 2023 17:37:33 +0800 Subject: [PATCH 4/9] chore: empty --- src/components.ts | 1 + src/empty/demos/base.vue | 10 +++++++ src/empty/demos/buttonEmpty.vue | 14 ++++++++++ src/empty/demos/imageEmpty.vue | 8 ++++++ src/empty/demos/mobile.vue | 24 +++++++++++++++++ src/empty/empty.vue | 46 +++++++++++++++++++++++++++++++++ src/empty/index.ts | 11 ++++++++ src/empty/style/css.js | 1 + src/empty/style/index.js | 1 + 9 files changed, 116 insertions(+) create mode 100644 src/empty/demos/base.vue create mode 100644 src/empty/demos/buttonEmpty.vue create mode 100644 src/empty/demos/imageEmpty.vue create mode 100644 src/empty/demos/mobile.vue create mode 100644 src/empty/empty.vue create mode 100644 src/empty/index.ts create mode 100644 src/empty/style/css.js create mode 100644 src/empty/style/index.js diff --git a/src/components.ts b/src/components.ts index ef717e197..08a20b4bb 100644 --- a/src/components.ts +++ b/src/components.ts @@ -50,3 +50,4 @@ export { default as NoticeBar } from './notice-bar'; export { default as Result } from './result'; export { default as Cascader } from './cascader'; export { default as Footer } from './footer'; +export { default as Empty } from './empty'; diff --git a/src/empty/demos/base.vue b/src/empty/demos/base.vue new file mode 100644 index 000000000..94158ce5c --- /dev/null +++ b/src/empty/demos/base.vue @@ -0,0 +1,10 @@ + + + diff --git a/src/empty/demos/buttonEmpty.vue b/src/empty/demos/buttonEmpty.vue new file mode 100644 index 000000000..2420ea302 --- /dev/null +++ b/src/empty/demos/buttonEmpty.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/empty/demos/imageEmpty.vue b/src/empty/demos/imageEmpty.vue new file mode 100644 index 000000000..00dea349c --- /dev/null +++ b/src/empty/demos/imageEmpty.vue @@ -0,0 +1,8 @@ + diff --git a/src/empty/demos/mobile.vue b/src/empty/demos/mobile.vue new file mode 100644 index 000000000..943e6f9e7 --- /dev/null +++ b/src/empty/demos/mobile.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/empty/empty.vue b/src/empty/empty.vue new file mode 100644 index 000000000..d2160fc71 --- /dev/null +++ b/src/empty/empty.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/empty/index.ts b/src/empty/index.ts new file mode 100644 index 000000000..5a3940491 --- /dev/null +++ b/src/empty/index.ts @@ -0,0 +1,11 @@ +import Empty from './empty.vue'; +import { withInstall, WithInstallType } from '../shared'; + +import './style'; +import { TdEmptyProps } from './type'; + +export * from './type'; +export type EmptyProps = TdEmptyProps; + +const _Empty: WithInstallType = withInstall(Empty); +export default _Empty; diff --git a/src/empty/style/css.js b/src/empty/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/empty/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/empty/style/index.js b/src/empty/style/index.js new file mode 100644 index 000000000..cce646954 --- /dev/null +++ b/src/empty/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/empty/_index.less'; From 92a2ea1e0cc482093b2e87b1043d093ed7b41e4b Mon Sep 17 00:00:00 2001 From: lem <11597313+lemc@user.noreply.gitee.com> Date: Tue, 28 Mar 2023 18:00:54 +0800 Subject: [PATCH 5/9] chore: empty demo test --- .../__test__/__snapshots__/demo.test.jsx.snap | 379 ++++++++++++++++++ src/empty/__test__/demo.test.jsx | 25 ++ 2 files changed, 404 insertions(+) create mode 100644 src/empty/__test__/__snapshots__/demo.test.jsx.snap create mode 100644 src/empty/__test__/demo.test.jsx diff --git a/src/empty/__test__/__snapshots__/demo.test.jsx.snap b/src/empty/__test__/__snapshots__/demo.test.jsx.snap new file mode 100644 index 000000000..a07179cfa --- /dev/null +++ b/src/empty/__test__/__snapshots__/demo.test.jsx.snap @@ -0,0 +1,379 @@ +// Vitest Snapshot v1 + +exports[`Empty > Empty baseVue demo works fine 1`] = ` +
+
+
+ + + +
+
+
+
+ 描述文字 +
+ + +
+
+ + +
+
+`; + +exports[`Empty > Empty buttonEmptyVue demo works fine 1`] = ` +
+
+
+ + + +
+
+
+
+ 描述文字 +
+ + +
+
+ + + +
+
+`; + +exports[`Empty > Empty imageEmptyVue demo works fine 1`] = ` +
+
+
+
+ + + +
+ +
+
+
+
+ 描述文字 +
+ + +
+
+ + +
+
+`; + +exports[`Empty > Empty mobileVue demo works fine 1`] = ` +
+

+ Empty 空状态 +

+

+ 用于空状态时的占位提示。 +

+
+
+ +

+ 图标空状态 +

+
+
+ +
+
+
+ + + +
+
+
+
+ 描述文字 +
+ + +
+
+ + +
+
+ +
+
+
+
+ +

+ 自定义图片空状态 +

+
+
+ +
+
+
+
+ + + +
+ +
+
+
+
+ 描述文字 +
+ + +
+
+ + +
+
+ +
+
+
+
+ +

+ 带操作空状态 +

+
+
+ +
+
+
+ + + +
+
+
+
+ 描述文字 +
+ + +
+
+ + + +
+
+ +
+
+
+`; diff --git a/src/empty/__test__/demo.test.jsx b/src/empty/__test__/demo.test.jsx new file mode 100644 index 000000000..d2d728f97 --- /dev/null +++ b/src/empty/__test__/demo.test.jsx @@ -0,0 +1,25 @@ +/** + * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖 + */ + +import { mount } from '@vue/test-utils'; +import baseVue from '@/empty/demos/base.vue'; +import buttonEmptyVue from '@/empty/demos/buttonEmpty.vue'; +import imageEmptyVue from '@/empty/demos/imageEmpty.vue'; +import mobileVue from '@/empty/demos/mobile.vue'; + +const mapper = { + baseVue, + buttonEmptyVue, + imageEmptyVue, + mobileVue, +}; + +describe('Empty', () => { + Object.keys(mapper).forEach((demoName) => { + it(`Empty ${demoName} demo works fine`, () => { + const wrapper = mount(mapper[demoName]); + expect(wrapper.element).toMatchSnapshot(); + }); + }); +}); From 6c2ba0bbce18f0aa4d59c20f865de4baea7988ce Mon Sep 17 00:00:00 2001 From: lem <11597313+lemc@user.noreply.gitee.com> Date: Thu, 30 Mar 2023 10:36:00 +0800 Subject: [PATCH 6/9] chore: support function --- src/empty/demos/imageEmpty.vue | 8 ++------ src/empty/empty.vue | 28 ++++++++++++++++++---------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/empty/demos/imageEmpty.vue b/src/empty/demos/imageEmpty.vue index 00dea349c..1cdfef24f 100644 --- a/src/empty/demos/imageEmpty.vue +++ b/src/empty/demos/imageEmpty.vue @@ -1,8 +1,4 @@ diff --git a/src/empty/empty.vue b/src/empty/empty.vue index d2160fc71..ba6a8c139 100644 --- a/src/empty/empty.vue +++ b/src/empty/empty.vue @@ -1,19 +1,21 @@ @@ -32,12 +34,18 @@ export default defineComponent({ components: { TNode }, props: EmptyProps, - setup(props) { + setup(props, context) { const internalInstance = getCurrentInstance(); + const actionContent = computed(() => renderTNode(internalInstance, 'action')); + const descriptionContent = computed(() => renderTNode(internalInstance, 'description')); const iconContent = computed(() => renderTNode(internalInstance, 'icon')); + const imageContent = computed(() => renderTNode(internalInstance, 'image')); return { + actionContent, + descriptionContent, iconContent, + imageContent, classPrefix: name, ...toRefs(props), }; From 680427a372b6a0efb87cdca2f5d1d2d75feffa50 Mon Sep 17 00:00:00 2001 From: lem <11597313+lemc@user.noreply.gitee.com> Date: Thu, 30 Mar 2023 10:43:42 +0800 Subject: [PATCH 7/9] chore: test update --- .../__test__/__snapshots__/demo.test.jsx.snap | 200 +++++++++++------- 1 file changed, 125 insertions(+), 75 deletions(-) diff --git a/src/empty/__test__/__snapshots__/demo.test.jsx.snap b/src/empty/__test__/__snapshots__/demo.test.jsx.snap index a07179cfa..d41799c88 100644 --- a/src/empty/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/empty/__test__/__snapshots__/demo.test.jsx.snap @@ -28,18 +28,9 @@ exports[`Empty > Empty baseVue demo works fine 1`] = `
-
- 描述文字 -
- - -
-
- - + 描述文字
+ `; @@ -71,11 +62,7 @@ exports[`Empty > Empty buttonEmptyVue demo works fine 1`] = `
-
- 描述文字 -
- - + 描述文字
Empty buttonEmptyVue demo works fine 1`] = ` exports[`Empty > Empty imageEmptyVue demo works fine 1`] = `
+
+
- - - + + + +
+
- +
-
-
-
+
描述文字
- - +
- - +
+ +
+
+ + + +
+ +
+ +
+
+ 描述文字 +
+
+
`; @@ -213,18 +240,9 @@ exports[`Empty > Empty mobileVue demo works fine 1`] = `
-
- 描述文字 -
- - -
-
- - + 描述文字
+
@@ -246,16 +264,16 @@ exports[`Empty > Empty mobileVue demo works fine 1`] = ` class="tdesign-mobile-demo-block__slot" > +
+
Empty mobileVue demo works fine 1`] = ` style="object-fit: fill; object-position: center;" />
+
-
- 描述文字 -
- - + 描述文字
+ +
+
+
+
+ + + +
+ +
+
+ 描述文字 +
+
+
Empty mobileVue demo works fine 1`] = `
-
- 描述文字 -
- - + 描述文字
Date: Thu, 30 Mar 2023 10:44:26 +0800 Subject: [PATCH 8/9] fix: fix conflict --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 962169d4d..634a70fd4 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 962169d4dbdb759f9fef141ef41254db2e475dd1 +Subproject commit 634a70fd40f3a8352024953280e8badf69e5a4dd From 3d09644eec5b3f28f7dc51b290bd5d776ebc5a00 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 30 Mar 2023 11:19:00 +0800 Subject: [PATCH 9/9] feat(Empty): update api --- site/docs.config.js | 6 ++++++ src/_common | 2 +- src/empty/empty.en-US.md | 12 ++++++++++++ src/empty/empty.md | 12 ++++++++++++ src/empty/props.ts | 27 +++++++++++++++++++++++++++ src/empty/type.ts | 26 ++++++++++++++++++++++++++ 6 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 src/empty/empty.en-US.md create mode 100644 src/empty/empty.md create mode 100644 src/empty/props.ts create mode 100644 src/empty/type.ts diff --git a/site/docs.config.js b/site/docs.config.js index 0a04e7598..f408d9bfd 100644 --- a/site/docs.config.js +++ b/site/docs.config.js @@ -245,6 +245,12 @@ export default { path: '/mobile-vue/components/count-down', component: () => import('@/count-down/count-down.md'), }, + { + title: 'Empty 空状态', + name: 'empty', + path: '/mobile-vue/components/empty', + component: () => import('@/empty/empty.md'), + }, { title: 'Tag 标签', name: 'tag', diff --git a/src/_common b/src/_common index f50d47c60..634a70fd4 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit f50d47c60f3ef276d01f81e5c3bee65ea24c4663 +Subproject commit 634a70fd40f3a8352024953280e8badf69e5a4dd diff --git a/src/empty/empty.en-US.md b/src/empty/empty.en-US.md new file mode 100644 index 000000000..e212d803d --- /dev/null +++ b/src/empty/empty.en-US.md @@ -0,0 +1,12 @@ +:: BASE_DOC :: + +## API + +### Empty Props + +name | type | default | description | required +-- | -- | -- | -- | -- +action | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +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 | String / Slot / Function | - | Typescript：`string \| 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 diff --git a/src/empty/empty.md b/src/empty/empty.md new file mode 100644 index 000000000..e21d5c85c --- /dev/null +++ b/src/empty/empty.md @@ -0,0 +1,12 @@ +:: BASE_DOC :: + +## API + +### Empty Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +action | Slot / Function | - | 操作按钮。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +description | String / Slot / Function | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +icon | String / Slot / Function | - | 图标。TS 类型：`string \| 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 diff --git a/src/empty/props.ts b/src/empty/props.ts new file mode 100644 index 000000000..66c69b7ab --- /dev/null +++ b/src/empty/props.ts @@ -0,0 +1,27 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdEmptyProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 操作按钮 */ + action: { + type: Function as PropType, + }, + /** 描述文字 */ + description: { + type: [String, Function] as PropType, + }, + /** 图标 */ + icon: { + type: [String, Function] as PropType, + }, + /** 图片地址 */ + image: { + type: [String, Function] as PropType, + }, +}; diff --git a/src/empty/type.ts b/src/empty/type.ts new file mode 100644 index 000000000..90ca74b84 --- /dev/null +++ b/src/empty/type.ts @@ -0,0 +1,26 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdEmptyProps { + /** + * 操作按钮 + */ + action?: TNode; + /** + * 描述文字 + */ + description?: string | TNode; + /** + * 图标 + */ + icon?: string | TNode; + /** + * 图片地址 + */ + image?: string | TNode; +}