feat(plugin-back-to-top): add z-index variable

- refactor: extract css vars to a separate file
- refactor: extract util functions to separate files
- refactor: provide client entry

Author: meteorlxy

docs/reference/plugin/back-to-top.md

@@ -8,11 +8,4 @@ This plugin will add a _back to top_ button to your site. The button will be dis
 
 You can customize the style of the _back to top_ button via CSS variables:
 
-```css
-:root {
-  /* color */
-  --back-to-top-color: #3eaf7c;
-  /* color on mouse hover */
-  --back-to-top-color-hover: #71cda3;
-}
-```
+@[code css](@vuepress/plugin-back-to-top/src/client/styles/vars.css)

docs/zh/reference/plugin/back-to-top.md

@@ -8,11 +8,4 @@
 
 你可以通过 CSS 变量来自定义 _返回顶部_ 按钮的样式：
 
-```css
-:root {
-  /* 颜色 */
-  --back-to-top-color: #3eaf7c;
-  /* 鼠标悬停时的颜色 */
-  --back-to-top-color-hover: #71cda3;
-}
-```
+@[code css](@vuepress/plugin-back-to-top/src/client/styles/vars.css)

packages/@vuepress/plugin-back-to-top/package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "clean": "rimraf lib *.tsbuildinfo",
-    "copy": "cpx \"src/**/*.vue\" lib"
+    "copy": "cpx \"src/**/*.{css,svg}\" lib"
   },
   "dependencies": {
     "@vuepress/core": "2.0.0-beta.15",

packages/@vuepress/plugin-back-to-top/src/client/BackToTop.vue

@@ -0,0 +1,41 @@
+import { debounce } from 'ts-debounce'
+import { computed, defineComponent, h, onMounted, ref, Transition } from 'vue'
+import { getScrollTop, scrollToTop } from '../utils'
+
+import '../styles/vars.css'
+import '../styles/back-to-top.css'
+
+export const BackToTop = defineComponent({
+  name: 'BackToTop',
+
+  setup() {
+    const scrollTop = ref(0)
+    const show = computed(() => scrollTop.value > 300)
+
+    onMounted(() => {
+      scrollTop.value = getScrollTop()
+
+      window.addEventListener(
+        'scroll',
+        debounce(() => {
+          scrollTop.value = getScrollTop()
+        }, 100)
+      )
+    })
+
+    const backToTopEl = h('div', { class: 'back-to-top', onClick: scrollToTop })
+
+    return () =>
+      h(
+        Transition,
+        {
+          name: 'back-to-top',
+        },
+        {
+          default: () => (show.value ? backToTopEl : null),
+        }
+      )
+  },
+})
+
+export default BackToTop

packages/@vuepress/plugin-back-to-top/src/client/components/BackToTop.ts

@@ -0,0 +1,2 @@
+export * from './components/BackToTop'
+export * from './utils'

packages/@vuepress/plugin-back-to-top/src/client/index.ts

@@ -0,0 +1,31 @@
+.back-to-top {
+  cursor: pointer;
+  position: fixed;
+  bottom: 2rem;
+  right: 2.5rem;
+  width: 2rem;
+  height: 1.2rem;
+  background-color: var(--back-to-top-color);
+  mask: url('back-to-top.svg') no-repeat;
+  z-index: var(--back-to-top-z-index);
+}
+
+.back-to-top:hover {
+  background-color: var(--back-to-top-color-hover);
+}
+
+@media (max-width: 959px) {
+  .back-to-top {
+    display: none;
+  }
+}
+
+.back-to-top-enter-active,
+.back-to-top-leave-active {
+  transition: opacity 0.3s;
+}
+
+.back-to-top-enter-from,
+.back-to-top-leave-to {
+  opacity: 0;
+}

packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.css

@@ -0,0 +1,6 @@
+:root {
+  --back-to-top-z-index: 5;
+
+  --back-to-top-color: #3eaf7c;
+  --back-to-top-color-hover: #71cda3;
+}

packages/@vuepress/plugin-back-to-top/src/client/styles/back-to-top.svg

@@ -0,0 +1,5 @@
+export const getScrollTop = (): number =>
+  window.pageYOffset ||
+  document.documentElement.scrollTop ||
+  document.body.scrollTop ||
+  0

packages/@vuepress/plugin-back-to-top/src/client/styles/vars.css

@@ -0,0 +1,2 @@
+export * from './getScrollTop'
+export * from './scrollToTop'

packages/@vuepress/plugin-back-to-top/src/client/utils/getScrollTop.ts

@@ -0,0 +1,2 @@
+export const scrollToTop = (): void =>
+  window.scrollTo({ top: 0, behavior: 'smooth' })

packages/@vuepress/plugin-back-to-top/src/client/utils/index.ts

@@ -21,7 +21,7 @@ export const backToTopPlugin: Plugin<BackToTopPluginOptions> = (_, app) => {
 
     clientAppRootComponentFiles: path.resolve(
       __dirname,
-      '../client/BackToTop.vue'
+      '../client/components/BackToTop.js'
     ),
   }
 }

packages/@vuepress/plugin-back-to-top/src/client/utils/scrollToTop.ts

@@ -1,13 +1,10 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "module": "CommonJS",
-    "rootDir": "./src",
-    "outDir": "./lib"
-  },
-  "include": ["./src"],
   "references": [
     { "path": "../core/tsconfig.build.json" },
-    { "path": "../utils/tsconfig.build.json" }
-  ]
+    { "path": "../utils/tsconfig.build.json" },
+    { "path": "./tsconfig.esm.json" },
+    { "path": "./tsconfig.cjs.json" }
+  ],
+  "files": []
 }

packages/@vuepress/plugin-back-to-top/src/node/backToTopPlugin.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src/node"]
+}

packages/@vuepress/plugin-back-to-top/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2020",
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src/client"]
+}

packages/@vuepress/plugin-back-to-top/tsconfig.cjs.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["./src/**/*.ts", "./src/**/*.vue", "./__tests__"]
+  "include": ["./src/**/*.ts", "./__tests__"]
 }