sheet

1---
2import type { HTMLAttributes } from "astro/types"
3 
4type Props = HTMLAttributes<"div"> & {
5  defaultOpen?: boolean
6  closeOnClickOutside?: boolean
7  closeOnEscape?: boolean
8  lockScroll?: boolean
9}
10 
11const {
12  class: className,
13  defaultOpen,
14  closeOnClickOutside,
15  closeOnEscape,
16  lockScroll,
17  ...props
18} = Astro.props
19 
20const manageScrollLock = lockScroll !== false
21---
22 
23<div
24  data-slot="dialog"
25  data-sheet-lock-scroll={manageScrollLock ? "" : undefined}
26  class={className}
27  data-default-open={defaultOpen}
28  data-close-on-click-outside={closeOnClickOutside}
29  data-close-on-escape={closeOnEscape}
30  data-lock-scroll="false"
31  {...props}
32>
33  <slot />
34</div>
35 
36<script>
37  import { create } from "@data-slot/dialog"
38 
39  create()
40 
41  declare global {
42    interface Window {
43      __fulldevSheetScrollLock?: {
44        roots: Set<HTMLElement>
45        savedHtmlOverflow: string
46        savedHtmlScrollbarGutter: string
47        savedBodyPaddingRight: string
48      }
49      __fulldevSheetScrollLockBound?: boolean
50    }
51  }
52 
53  const state =
54    window.__fulldevSheetScrollLock ??
55    (window.__fulldevSheetScrollLock = {
56      roots: new Set<HTMLElement>(),
57      savedHtmlOverflow: "",
58      savedHtmlScrollbarGutter: "",
59      savedBodyPaddingRight: "",
60    })
61 
62  const applyScrollLock = () => {
63    const html = document.documentElement
64    const body = document.body
65 
66    if (state.roots.size === 0) {
67      html.style.overflow = state.savedHtmlOverflow
68      html.style.scrollbarGutter = state.savedHtmlScrollbarGutter
69      body.style.paddingRight = state.savedBodyPaddingRight
70      return
71    }
72 
73    if (state.roots.size === 1) {
74      state.savedHtmlOverflow = html.style.overflow
75      state.savedHtmlScrollbarGutter = html.style.scrollbarGutter
76      state.savedBodyPaddingRight = body.style.paddingRight
77    }
78 
79    const scrollbarWidth = window.innerWidth - html.clientWidth
80    const bodyPaddingRight = Number.parseFloat(
81      window.getComputedStyle(body).paddingRight || "0"
82    )
83 
84    html.style.overflow = "hidden"
85    html.style.scrollbarGutter = "auto"
86    body.style.paddingRight = `${bodyPaddingRight + Math.max(scrollbarWidth, 0)}px`
87  }
88 
89  const syncRoot = (root: HTMLElement, open: boolean) => {
90    const hasRoot = state.roots.has(root)
91    if (open === hasRoot) return
92 
93    if (open) state.roots.add(root)
94    else state.roots.delete(root)
95 
96    applyScrollLock()
97  }
98 
99  if (!window.__fulldevSheetScrollLockBound) {
100    window.__fulldevSheetScrollLockBound = true
101 
102// … truncated