Skip to content

Commit

Permalink
refactor(back-top): sfc to tsx (#1333)
Browse files Browse the repository at this point in the history
* refactor(back-top): sfc to tsx

* fix: example no work

* feat: support container,visibilityHeight

* chore: 删除废弃代码
  • Loading branch information
liweijie0812 authored May 30, 2024
1 parent a2d98c9 commit cecf3d5
Show file tree
Hide file tree
Showing 13 changed files with 151 additions and 316 deletions.
196 changes: 14 additions & 182 deletions src/back-top/__test__/__snapshots__/demo.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -24,52 +24,10 @@ exports[`BackTop > BackTop baseVue demo works fine 1`] = `
</span>
<!---->
</button>
</div>
<div
data-v-33e4f6e7=""
>
<div
class="t-back-top t-back-top--fixed t-back-top--round"
data-v-33e4f6e7=""
style="display: none;"
>
<svg
class="t-icon t-icon-backtop"
fill="none"
height="1em"
style="font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
fill="currentColor"
/>
</svg>
<span
class="t-back-top__text--round"
>
顶部
</span>
</div>
</div>
</div>
`;

exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
<div
data-v-app=""
>
<div
class="button-group"
data-v-924378ec=""
>
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
data-v-924378ec=""
data-v-33e4f6e7=""
role="button"
type="button"
>
Expand All @@ -83,11 +41,11 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
</button>
</div>
<div
data-v-924378ec=""
data-v-33e4f6e7=""
>
<div
class="t-back-top t-back-top--fixed t-back-top--half-round"
data-v-924378ec=""
class="t-back-top t-back-top--fixed t-back-top--round"
data-v-33e4f6e7=""
style="display: none;"
>
<svg
Expand All @@ -104,9 +62,9 @@ exports[`BackTop > BackTop halfRoundVue demo works fine 1`] = `
/>
</svg>
<span
class="t-back-top__text--half-round"
class="t-back-top__text--round"
>
返回顶部
顶部
</span>
</div>
</div>
Expand Down Expand Up @@ -141,13 +99,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<h2
class="tdesign-mobile-demo-block__title"
>
01 类型
形状
</h2>
<p
class="tdesign-mobile-demo-block__summary"
>
圆型返回顶部
</p>
<!--v-if-->
</div>
<div
class="tdesign-mobile-demo-block__slot"
Expand All @@ -173,66 +127,10 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
</span>
<!---->
</button>
</div>
<div
data-v-33e4f6e7=""
>
<div
class="t-back-top t-back-top--fixed t-back-top--round"
data-v-33e4f6e7=""
style="display: none;"
>
<svg
class="t-icon t-icon-backtop"
fill="none"
height="1em"
style="font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
fill="currentColor"
/>
</svg>
<span
class="t-back-top__text--round"
>
顶部
</span>
</div>
</div>
</div>
</div>
<div
class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
data-v-806aae90=""
>
<div
class="tdesign-mobile-demo-block__header"
>
<!--v-if-->
<p
class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
>
半圆型返回顶部
</p>
</div>
<div
class="tdesign-mobile-demo-block__slot"
>
<div
class="button-group"
data-v-924378ec=""
>
<button
aria-disabled="false"
class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
data-v-924378ec=""
data-v-33e4f6e7=""
role="button"
type="button"
>
Expand All @@ -246,11 +144,11 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
</button>
</div>
<div
data-v-924378ec=""
data-v-33e4f6e7=""
>
<div
class="t-back-top t-back-top--fixed t-back-top--half-round"
data-v-924378ec=""
class="t-back-top t-back-top--fixed t-back-top--round"
data-v-33e4f6e7=""
style="display: none;"
>
<svg
Expand All @@ -267,9 +165,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
/>
</svg>
<span
class="t-back-top__text--half-round"
class="t-back-top__text--round"
>
返回顶部
顶部
</span>
</div>
</div>
Expand Down Expand Up @@ -308,17 +206,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<!---->
</div>
</div>
<div
class="t-skeleton__row"
>
<div
class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
>
<!---->
</div>
</div>
<div
class="t-skeleton__row"
Expand Down Expand Up @@ -352,17 +239,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<!---->
</div>
</div>
<div
class="t-skeleton__row"
>
<div
class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
>
<!---->
</div>
</div>
<div
class="t-skeleton__row"
Expand Down Expand Up @@ -396,17 +272,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<!---->
</div>
</div>
<div
class="t-skeleton__row"
>
<div
class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
>
<!---->
</div>
</div>
<div
class="t-skeleton__row"
Expand Down Expand Up @@ -440,17 +305,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<!---->
</div>
</div>
<div
class="t-skeleton__row"
>
<div
class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
>
<!---->
</div>
</div>
<div
class="t-skeleton__row"
Expand Down Expand Up @@ -484,17 +338,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<!---->
</div>
</div>
<div
class="t-skeleton__row"
>
<div
class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
>
<!---->
</div>
</div>
<div
class="t-skeleton__row"
Expand Down Expand Up @@ -528,17 +371,6 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
<!---->
</div>
</div>
<div
class="t-skeleton__row"
>
<div
class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
>
<!---->
</div>
</div>
<div
class="t-skeleton__row"
Expand Down
2 changes: 0 additions & 2 deletions src/back-top/__test__/demo.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@

import { mount } from '@vue/test-utils';
import baseVue from '@/back-top/demos/base.vue';
import halfRoundVue from '@/back-top/demos/half-round.vue';
import mobileVue from '@/back-top/demos/mobile.vue';

const mapper = {
baseVue,
halfRoundVue,
mobileVue,
};

Expand Down
2 changes: 1 addition & 1 deletion src/back-top/__test__/index.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ref } from 'vue';
import { describe, it, expect, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import { BacktopIcon as TIconBackTop, AppIcon as TIconApp } from 'tdesign-icons-vue-next';
import BackTop from '../back-top.vue';
import BackTop from '../back-top';

describe('BackTop', () => {
describe('props', () => {
Expand Down
11 changes: 7 additions & 4 deletions src/back-top/back-top.en-US.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
:: BASE_DOC ::

## API

### BackTop Props

name | type | default | description | required
-- | -- | -- | -- | --
container | Function | - | Typescript:`() => HTMLElement` | N
fixed | Boolean | true | \- | N
icon | Slot / Function / Boolean | true | Typescript:`TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
icon | Boolean / Slot / Function | true | Typescript:`boolean \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
target | Function | - | Typescript:`() => HTMLElement` | N
text | String | '' | \- | N
theme | String | round | options:round/half-round/round-dark/half-round-dark | N
theme | String | round | options: round/half-round/round-dark/half-round-dark | N
visibilityHeight | Number | 200 | \- | N
onToTop | Function | | Typescript:`() => void`<br/> | N

### BackTop Events
Expand All @@ -18,8 +21,8 @@ name | params | description
-- | -- | --
to-top | \- | \-


### CSS Variables

The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
Expand All @@ -30,4 +33,4 @@ Name | Default Value | Description
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -
--td-back-top-round-dark-color | @font-white-1 | -
11 changes: 7 additions & 4 deletions src/back-top/back-top.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
:: BASE_DOC ::

## API

### BackTop Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
container | Function | - | 滚动的容器。TS 类型:`() => HTMLElement` | N
fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
icon | Slot / Function / Boolean | true | 图标。TS 类型:`TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
icon | Boolean / Slot / Function | true | 图标。TS 类型:`boolean \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
target | Function | - | 定位滚动到指定对象。TS 类型:`() => HTMLElement` | N
text | String | '' | 文案 | N
theme | String | round | 预设的样式类型。可选项:round/half-round/round-dark/half-round-dark | N
visibilityHeight | Number | 200 | 滚动高度达到此参数值才出现 | N
onToTop | Function | | TS 类型:`() => void`<br/>点击触发 | N

### BackTop Events
Expand All @@ -18,8 +21,8 @@ onToTop | Function | | TS 类型:`() => void`<br/>点击触发 | N
-- | -- | --
to-top | \- | 点击触发

### CSS Variables

### CSS 变量
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
Expand All @@ -30,4 +33,4 @@ to-top | \- | 点击触发
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -
--td-back-top-round-dark-color | @font-white-1 | -
Loading

0 comments on commit cecf3d5

Please sign in to comment.