@lumen-design/affix 0.0.2

package/dist/Affix.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { AffixPosition } from './types'
+    import { onMount, onDestroy } from 'svelte'
+
+    interface AffixProps {
+        offset?: number
+        position?: AffixPosition
+        target?: string
+        zIndex?: number
+        onchange?: (fixed: boolean) => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { offset = 0, position = 'top', target, zIndex = 100, onchange, children, class: cls = '', ...attrs }: AffixProps = $props()
+
+    let fixed = $state(false)
+    let affixRef: HTMLDivElement | null = $state(null)
+    let placeholderRef: HTMLDivElement | null = $state(null)
+    let container: HTMLElement | Window = $state(window)
+    let width = $state(0)
+    let height = $state(0)
+    let fixedTop = $state<number | undefined>(undefined)
+    let fixedBottom = $state<number | undefined>(undefined)
+
+    const updateFixed = (): void => {
+        if (!affixRef) return
+
+        const rect = (placeholderRef || affixRef).getBoundingClientRect()
+        const containerRect = container === window ? { top: 0, bottom: window.innerHeight } : (container as HTMLElement).getBoundingClientRect()
+
+        let shouldFix = false
+
+        if (position === 'top') {
+            shouldFix = rect.top - containerRect.top < offset
+            if (shouldFix) {
+                fixedTop = containerRect.top + offset
+                fixedBottom = undefined
+            }
+        } else {
+            shouldFix = containerRect.bottom - rect.bottom < offset
+            if (shouldFix) {
+                fixedBottom = window.innerHeight - containerRect.bottom + offset
+                fixedTop = undefined
+            }
+        }
+
+        if (shouldFix !== fixed) {
+            fixed = shouldFix
+            onchange?.(fixed)
+        }
+
+        if (fixed) {
+            width = rect.width
+            height = rect.height
+        }
+    }
+
+    onMount(() => {
+        if (target) {
+            const el = document.querySelector(target)
+            if (el) container = el as HTMLElement
+        }
+
+        const scrollEl = container === window ? window : container
+        scrollEl.addEventListener('scroll', updateFixed, { passive: true })
+        window.addEventListener('resize', updateFixed, { passive: true })
+        updateFixed()
+    })
+
+    onDestroy(() => {
+        const scrollEl = container === window ? window : container
+        scrollEl.removeEventListener('scroll', updateFixed)
+        window.removeEventListener('resize', updateFixed)
+    })
+
+    const classes = $derived(`lm-affix${fixed ? ' is-fixed' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const affixStyle = $derived.by(() => {
+        if (!fixed) return undefined
+        const styles: string[] = [`z-index: ${zIndex}`, `width: ${width}px`]
+        if (fixedTop !== undefined) styles.push(`top: ${fixedTop}px`)
+        if (fixedBottom !== undefined) styles.push(`bottom: ${fixedBottom}px`)
+        return styles.join('; ')
+    })
+
+    const placeholderStyle = $derived(fixed ? `width: ${width}px; height: ${height}px` : undefined)
+</script>
+
+<div bind:this={placeholderRef} style={placeholderStyle}>
+    <div bind:this={affixRef} class={classes} style={affixStyle} {...attrs}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+</div>

package/dist/index.js

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

package/dist/types.js

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

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lumen-design/affix",
+  "version": "0.0.2",
+  "description": "Affix 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"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}