@vuepress/plugin-back-to-top - npm Package Compare versions

Comparing version 2.0.0-rc.8 to 2.0.0-rc.9

lib/client/components/BackToTop.d.ts

@@ -1,2 +0,1 @@
-import '../styles/vars.css';
 import '../styles/back-to-top.css';
@@ -6,2 +5,1 @@ export declare const BackToTop: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default BackToTop;

lib/client/components/BackToTop.js

@@ -1,24 +0,50 @@
-import { debounce } from 'ts-debounce';
-import { computed, defineComponent, h, onMounted, ref, Transition } from 'vue';
-import { getScrollTop, scrollToTop } from '../utils.js';
-import '../styles/vars.css';
+import { useLocaleConfig } from '@vuepress/helper/client';
+import { useElementSize, useWindowScroll, useWindowSize } from '@vueuse/core';
+import { computed, defineComponent, h, onMounted, shallowRef, Transition, } from 'vue';
+import { usePageFrontmatter } from 'vuepress/client';
 import '../styles/back-to-top.css';
 export const BackToTop = defineComponent({
     name: 'BackToTop',
-    setup() {
-        const scrollTop = ref(0);
-        const show = computed(() => scrollTop.value > 300);
-        const onScroll = debounce(() => {
-            scrollTop.value = getScrollTop();
-        }, 100);
+    setup(props) {
+        const pageFrontmatter = usePageFrontmatter();
+        const locale = useLocaleConfig(__BACK_TO_TOP_LOCALES__);
+        const body = shallowRef();
+        const { height: bodyHeight } = useElementSize(body);
+        const { height: windowHeight } = useWindowSize();
+        /** Scroll distance */
+        const { y } = useWindowScroll();
+        /** Whether to display button */
+        const show = computed(() => pageFrontmatter.value.backToTop !== false &&
+            y.value > __BACK_TO_TOP_THRESHOLD__);
+        const progress = computed(() => (y.value / (bodyHeight.value - windowHeight.value)) * 100);
         onMounted(() => {
-            scrollTop.value = getScrollTop();
-            window.addEventListener('scroll', () => onScroll());
+            body.value = document.body;
         });
-        const backToTopEl = h('div', { class: 'back-to-top', onClick: scrollToTop });
-        return () => h(Transition, {
-            name: 'back-to-top',
-        }, () => (show.value ? backToTopEl : null));
+        return () => h(Transition, { name: 'back-to-top' }, () => show.value
+            ? h('button', {
+                'type': 'button',
+                'class': 'vp-back-to-top-button',
+                'aria-label': locale.value.backToTop,
+                'onClick': () => {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                },
+            }, [
+                __BACK_TO_TOP_PROGRESS__
+                    ? h('span', {
+                        'class': 'vp-scroll-progress',
+                        'role': 'progressbar',
+                        'aria-labelledby': 'loadinglabel',
+                        'aria-valuenow': progress.value,
+                    }, h('svg', h('circle', {
+                        cx: '50%',
+                        cy: '50%',
+                        style: {
+                            'stroke-dasharray': `calc(${Math.PI * progress.value}% - ${4 * Math.PI}px) calc(${Math.PI * 100}% - ${4 * Math.PI}px)`,
+                        },
+                    })))
+                    : null,
+                h('div', { class: 'back-to-top-icon' }),
+            ])
+            : null);
     },
 });
-export default BackToTop;

lib/client/config.d.ts

 import type { ClientConfig } from 'vuepress/client';
+import './styles/vars.css';
 declare const _default: ClientConfig;
 export default _default;

lib/client/config.js

 import { defineClientConfig } from 'vuepress/client';
 import { BackToTop } from './components/index.js';
+import './styles/vars.css';
 export default defineClientConfig({
     rootComponents: [BackToTop],
 });

lib/node/backToTopPlugin.d.ts

 import type { Plugin } from 'vuepress/core';
-export declare const backToTopPlugin: () => Plugin;
+import type { BackToTopPluginOptions } from './options.js';
+export declare const backToTopPlugin: (options?: BackToTopPluginOptions) => Plugin;

lib/node/backToTopPlugin.js

@@ -1,6 +0,23 @@
-import { getDirname, path } from 'vuepress/utils';
+import { getLocaleConfig } from '@vuepress/helper';
+import { getDirname, logger, path } from 'vuepress/utils';
+import { backToTopLocales } from './locales.js';
+import { PLUGIN_NAME } from './logger.js';
 const __dirname = getDirname(import.meta.url);
-export const backToTopPlugin = () => ({
-    name: '@vuepress/plugin-back-to-top',
-    clientConfigFile: path.resolve(__dirname, '../client/config.js'),
-});
+export const backToTopPlugin = (options = {}) => (app) => {
+    if (app.env.isDebug)
+        logger.info('Options', options);
+    return {
+        name: PLUGIN_NAME,
+        define: (app) => ({
+            __BACK_TO_TOP_LOCALES__: getLocaleConfig({
+                app,
+                name: 'back-to-top',
+                default: backToTopLocales,
+                config: options.locales,
+            }),
+            __BACK_TO_TOP_PROGRESS__: options.progress ?? true,
+            __BACK_TO_TOP_THRESHOLD__: options.threshold ?? 100,
+        }),
+        clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+    };
+};

lib/node/index.d.ts

 import { backToTopPlugin } from './backToTopPlugin.js';
 export * from './backToTopPlugin.js';
+export type * from './options.js';
+export type * from '../shared/index.js';
 export default backToTopPlugin;

package.json

 {
   "name": "@vuepress/plugin-back-to-top",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0-rc.9",
   "description": "VuePress plugin - back to top",
@@ -36,7 +36,8 @@ "keywords": [
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
-    "copy": "cpx \"src/**/*.{css,svg}\" lib",
-    "style": "sass src:lib --style=compressed --no-source-map"
+    "copy": "cpx \"src/**/*.svg\" lib",
+    "style": "sass src:lib --no-source-map"
   },
   "dependencies": {
-    "ts-debounce": "^4.0.0",
+    "@vuepress/helper": "2.0.0-rc.9",
+    "@vueuse/core": "^10.7.2",
     "vue": "^3.4.15"
@@ -50,3 +51,3 @@ },
   },
-  "gitHead": "a025fcc27e4de1d71b5b5ae18cbb9eec9e7c2a69"
+  "gitHead": "12c12dadd0758df4ad5256851fc3cb3c949873e8"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12559

increased by108.83%

Number of package files

29

increased by52.63%

Lines of code

305

increased by348.53%

Worsened metrics

Dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vuepress/helper@2.0.0-rc.9

• + Added@vueuse/core@^10.7.2

• + Added@types/node@22.5.5(transitive)

• + Added@vue/compiler-core@3.5.5(transitive)

• + Added@vue/compiler-dom@3.5.5(transitive)

• + Added@vue/compiler-sfc@3.5.5(transitive)

• + Added@vue/compiler-ssr@3.5.5(transitive)

• + Added@vue/reactivity@3.5.5(transitive)

• + Added@vue/runtime-core@3.5.5(transitive)

• + Added@vue/runtime-dom@3.5.5(transitive)

• + Added@vue/server-renderer@3.5.5(transitive)

• + Added@vue/shared@3.5.5(transitive)

• + Added@vuepress/helper@2.0.0-rc.9(transitive)

• + Addedboolbase@1.0.0(transitive)

• + Addedcheerio@1.0.0-rc.12(transitive)

• + Addedcheerio-select@2.1.0(transitive)

• + Addedcss-select@5.1.0(transitive)

• + Addedcss-what@6.1.0(transitive)

• + Addeddom-serializer@2.0.0(transitive)

• + Addeddomelementtype@2.3.0(transitive)

• + Addeddomhandler@5.0.3(transitive)

• + Addeddomutils@3.1.0(transitive)

• + Addedenvinfo@7.14.0(transitive)

• + Addedfflate@0.8.2(transitive)

• + Addedhtmlparser2@8.0.2(transitive)

• + Addednth-check@2.1.1(transitive)

• + Addedparse5@7.1.2(transitive)

• + Addedparse5-htmlparser2-tree-adapter@7.0.0(transitive)

• + Addedvue@3.5.5(transitive)

• + Addedvue-router@4.4.5(transitive)

• - Removedts-debounce@^4.0.0

• - Removed@types/node@22.5.4(transitive)

• - Removed@vue/compiler-core@3.5.4(transitive)

• - Removed@vue/compiler-dom@3.5.4(transitive)

• - Removed@vue/compiler-sfc@3.5.4(transitive)

• - Removed@vue/compiler-ssr@3.5.4(transitive)

• - Removed@vue/reactivity@3.5.4(transitive)

• - Removed@vue/runtime-core@3.5.4(transitive)

• - Removed@vue/runtime-dom@3.5.4(transitive)

• - Removed@vue/server-renderer@3.5.4(transitive)

• - Removed@vue/shared@3.5.4(transitive)

• - Removedenvinfo@7.13.0(transitive)

• - Removedts-debounce@4.0.0(transitive)

• - Removedvue@3.5.4(transitive)

• - Removedvue-router@4.4.4(transitive)