feat(back-top): add back-top component

site/site.config.mjs

@@ -154,6 +154,12 @@ const docs = [
         component: () => import('tdesign-vue/anchor/anchor.md'),
         componentEn: () => import('tdesign-vue/anchor/anchor.en-US.md'),
       },
+      {
+        title: 'BackTop 回到顶部',
+        name: 'back-top',
+        path: '/vue/components/back-top',
+        component: () => import('tdesign-vue/back-top/back-top.md'),
+      },
       {
         title: 'Breadcrumb 面包屑',
         titleEn: 'Breadcrumb',
@@ -553,7 +559,6 @@ const docs = [
         path: '/vue/components/rate',
         component: () => import('tdesign-vue/rate/rate.md'),
         componentEn: () => import('tdesign-vue/rate/rate.en-US.md'),
-
       },
     ],
   },

src/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap

@@ -0,0 +1,166 @@
+// Vitest Snapshot v1
+
+exports[`BackTop Component > props.content works fine 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  <span
+    class="custom-node"
+  >
+    TNode
+  </span>
+</button>
+`;
+
+exports[`BackTop Component > props.default works fine 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  <span
+    class="custom-node"
+  >
+    TNode
+  </span>
+</button>
+`;
+
+exports[`BackTop Component > props.shape is equal to circle 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--circle t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  <div>
+    <svg
+      class="t-icon t-icon-backtop t-back-top__icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
+    <span
+      class="t-back-top__text"
+    >
+      TOP
+    </span>
+  </div>
+</button>
+`;
+
+exports[`BackTop Component > props.shape is equal to square 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  <div>
+    <svg
+      class="t-icon t-icon-backtop t-back-top__icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
+    <span
+      class="t-back-top__text"
+    >
+      TOP
+    </span>
+  </div>
+</button>
+`;
+
+exports[`BackTop Component > props.size is equal to medium 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  BackTop
+</button>
+`;
+
+exports[`BackTop Component > props.size is equal to small 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-s"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  BackTop
+</button>
+`;
+
+exports[`BackTop Component > props.theme is equal to dark 1`] = `
+<button
+  class="t-back-top t-back-top--theme-dark t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  Text
+</button>
+`;
+
+exports[`BackTop Component > props.theme is equal to light 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  Text
+</button>
+`;
+
+exports[`BackTop Component > props.theme is equal to primary 1`] = `
+<button
+  class="t-back-top t-back-top--theme-primary t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  Text
+</button>
+`;
+
+exports[`BackTop Component > slots.content works fine 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  <span
+    class="custom-node"
+  >
+    TNode
+  </span>
+</button>
+`;
+
+exports[`BackTop Component > slots.default works fine 1`] = `
+<button
+  class="t-back-top t-back-top--theme-light t-back-top--square t-size-m"
+  style="inset-inline-end: 24px; inset-block-end: 80px;"
+  type="button"
+>
+  <span
+    class="custom-node"
+  >
+    TNode
+  </span>
+
+</button>
+`;

src/back-top/__tests__/vitest-back-top.test.jsx

@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * 该文件由脚本自动生成，如需修改请联系 PMC
+ * This file generated by scripts of tdesign-api. `npm run api:docs BackTop VueNext(PC) vitest,finalProject`
+ * If you need to modify this file, contact PMC first please.
+ */
+import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
+import { BackTop } from '..';
+
+describe('BackTop Component', () => {
+  it('props.content works fine', () => {
+    const wrapper = mount({
+      render() {
+        return <BackTop content={() => <span class="custom-node">TNode</span>}></BackTop>;
+      },
+    });
+    expect(wrapper.find('.custom-node').exists()).toBeTruthy();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('slots.content works fine', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <BackTop>
+            <span class="custom-node">TNode</span>
+          </BackTop>
+        );
+      },
+    });
+    expect(wrapper.find('.custom-node').exists()).toBeTruthy();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('props.default works fine', () => {
+    const wrapper = mount({
+      render() {
+        return <BackTop default={() => <span class="custom-node">TNode</span>}></BackTop>;
+      },
+    });
+    expect(wrapper.find('.custom-node').exists()).toBeTruthy();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('slots.default works fine', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <BackTop>
+            <span class="custom-node">TNode</span>{' '}
+          </BackTop>
+        );
+      },
+    });
+    expect(wrapper.find('.custom-node').exists()).toBeTruthy();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  ['circle', 'square'].forEach((item) => {
+    it(`props.shape is equal to ${item}`, () => {
+      const wrapper = mount({
+        render() {
+          return <BackTop shape={item}></BackTop>;
+        },
+      });
+      expect(wrapper.classes(`t-back-top--${item}`)).toBeTruthy();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  const sizeClassNameList = ['t-size-s', 't-size-m'];
+  ['small', 'medium'].forEach((item, index) => {
+    it(`props.size is equal to ${item}`, () => {
+      const wrapper = mount({
+        render() {
+          return <BackTop size={item}>BackTop</BackTop>;
+        },
+      });
+      expect(wrapper.classes(sizeClassNameList[index])).toBeTruthy();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  ['light', 'primary', 'dark'].forEach((item) => {
+    it(`props.theme is equal to ${item}`, () => {
+      const wrapper = mount({
+        render() {
+          return <BackTop theme={item}>Text</BackTop>;
+        },
+      });
+      expect(wrapper.classes(`t-back-top--theme-${item}`)).toBeTruthy();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});

src/back-top/_example/baseList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div style="position: relative; height: 280px">
+    <t-list class="baseList-container" style="position: relative; height: 100%; overflow-y: scroll">
+      <t-list-item v-for="index in 15" :key="index">列表内容{{ index }}</t-list-item>
+    </t-list>
+    <t-back-top
+      container=".baseList-container"
+      :visible-height="0"
+      style="position: absolute"
+      :offset="['24px', '80px']"
+    ></t-back-top>
+  </div>
+</template>

src/back-top/_example/baseListSmall.vue

@@ -0,0 +1,14 @@
+<template>
+  <div style="position: relative; height: 280px">
+    <t-list class="baseListSmall-container" style="position: relative; height: 100%; overflow-y: scroll">
+      <t-list-item v-for="index in 15" :key="index">列表内容{{ index }}</t-list-item>
+    </t-list>
+    <t-back-top
+      container=".baseListSmall-container"
+      :visible-height="0"
+      style="position: absolute"
+      :offset="['24px', '80px']"
+      :duration="2000"
+    ></t-back-top>
+  </div>
+</template>

src/back-top/_example/custom.vue

@@ -0,0 +1,21 @@
+<template>
+  <t-space style="position: relative" direction="vertical">
+    <t-space>
+      <t-back-top style="position: relative" :visible-height="0" size="medium" :offset="[0, 0]"
+      ><t-icon name="backtop" size="20"
+      /></t-back-top>
+      <t-back-top style="position: relative" :visible-height="0" size="medium" :offset="[0, 0]">
+        <template #content>
+          <span>返回顶部</span>
+        </template>
+      </t-back-top>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        size="medium"
+        :offset="[0, 0]"
+        default="回到顶部"
+      ></t-back-top>
+    </t-space>
+  </t-space>
+</template>

src/back-top/_example/shape.vue

@@ -0,0 +1,50 @@
+<template>
+  <t-space style="position: relative" direction="vertical">
+    <t-space>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        size="medium"
+        :offset="[0, 0]"
+        theme="light"
+      ></t-back-top>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        size="medium"
+        :offset="[0, 0]"
+        theme="primary"
+      ></t-back-top>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        size="medium"
+        :offset="[0, 0]"
+        theme="dark"
+      ></t-back-top>
+    </t-space>
+    <t-space>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        shape="circle"
+        :offset="[0, 0]"
+        theme="light"
+      ></t-back-top>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        shape="circle"
+        :offset="[0, 0]"
+        theme="primary"
+      ></t-back-top>
+      <t-back-top
+        style="position: relative"
+        :visible-height="0"
+        shape="circle"
+        :offset="[0, 0]"
+        theme="dark"
+      ></t-back-top>
+    </t-space>
+  </t-space>
+</template>