@lumen-design/backtop 0.0.2

package/dist/Backtop.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
+    import Icon from '@lumen-design/icon'
+    import { ArrowUp } from 'lucide'
+
+    interface BacktopProps {
+        visibilityHeight?: number
+        right?: number
+        bottom?: number
+        target?: string
+        onclick?: () => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { visibilityHeight = 200, right = 40, bottom = 40, target, onclick, children, class: cls = '', ...attrs }: BacktopProps = $props()
+
+    let visible = $state(false)
+    let container: HTMLElement | Window = $state(window)
+
+    const handleScroll = (): void => {
+        const scrollTop = container === window ? document.documentElement.scrollTop || document.body.scrollTop : (container as HTMLElement).scrollTop
+        visible = scrollTop >= visibilityHeight
+    }
+
+    const scrollToTop = (): void => {
+        const el = container === window ? document.documentElement : (container as HTMLElement)
+        el.scrollTo({ top: 0, behavior: 'smooth' })
+        onclick?.()
+    }
+
+    onMount(() => {
+        if (target) {
+            const el = document.querySelector(target)
+            if (el) container = el as HTMLElement
+        }
+        const scrollEl = container === window ? window : container
+        scrollEl.addEventListener('scroll', handleScroll, { passive: true })
+        handleScroll()
+    })
+
+    onDestroy(() => {
+        const scrollEl = container === window ? window : container
+        scrollEl.removeEventListener('scroll', handleScroll)
+    })
+
+    const classes = $derived(`lm-backtop${visible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+    const style = $derived(`right: ${right}px; bottom: ${bottom}px`)
+</script>
+
+{#if visible}
+    <button type="button" class={classes} {style} onclick={scrollToTop} aria-label="Back to top" {...attrs}>
+        {#if children}
+            {@render children()}
+        {:else}
+            <Icon icon={ArrowUp} size={20} />
+        {/if}
+    </button>
+{/if}

package/dist/Backtop.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface BacktopProps {
+    visibilityHeight?: number;
+    right?: number;
+    bottom?: number;
+    target?: string;
+    onclick?: () => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Backtop: import("svelte").Component<BacktopProps, {}, "">;
+type Backtop = ReturnType<typeof Backtop>;
+export default Backtop;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Backtop from './Backtop.svelte';
+export { Backtop };
+export type { BacktopProps } from './types';
+export default Backtop;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Backtop from './Backtop.svelte';
+export { Backtop };
+export default Backtop;

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/** Backtop 属性 */
+export interface BacktopProps {
+    /** 滚动高度达到此值后显示 */
+    visibilityHeight?: number;
+    /** 距离右边距 */
+    right?: number;
+    /** 距离底边距 */
+    bottom?: number;
+    /** 触发滚动的目标元素选择器 */
+    target?: string;
+    /** 点击事件 */
+    onclick?: () => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lumen-design/backtop",
+  "version": "0.0.2",
+  "description": "Backtop component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "dependencies": {
+    "@lumen-design/icon": "0.0.2",
+    "lucide": "^0.563.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}