pxd 0.0.64 → 0.1.3

package/dist/components/resizable/index.vue

@@ -1,177 +1,358 @@
 <script setup>
-import { nextTick, onMounted, ref, shallowRef } from "vue";
-import { provideResizableContext } from "../../contexts/resizable";
+import { computed, onMounted, shallowRef, watch } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { throttleByRaf } from "../../utils/event.js";
+import { clampValue } from "../../utils/format.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { isNil } from "../../utils/is.js";
 defineOptions({
-  name: "PResizable",
-  inheritAttrs: false
+	name: "PResizable",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  direction: { type: String, required: false, default: "horizontal" }
+	direction: {
+		type: String,
+		required: false,
+		default: "horizontal"
+	},
+	unit: {
+		type: String,
+		required: false,
+		default: "percent"
+	},
+	minSize: {
+		type: Array,
+		required: false,
+		default: () => [0, 0]
+	},
+	handle: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	defaultValue: {
+		type: Array,
+		required: false,
+		default: () => [PERCENT_TOTAL / 2, PERCENT_TOTAL / 2]
+	},
+	modelValue: {
+		type: [Array, null],
+		required: false,
+		default: null
+	}
 });
-const panelSizes = ref({});
-const panelConfigs = ref([]);
-const handleConfigs = ref([]);
-const orderCounter = shallowRef(0);
+const emits = defineEmits([
+	"change",
+	"reset",
+	"update:modelValue"
+]);
+const PERCENT_TOTAL = 100;
+const KEYBOARD_STEP = 1;
+const KEYBOARD_STEP_LARGE = 10;
+const uid = getUniqueId("pxd-resizable");
+const leadingId = `${uid}-leading`;
+const trailingId = `${uid}-trailing`;
+const initialSizes = toPair(isNil(props.modelValue) ? props.defaultValue : props.modelValue);
+let drag = null;
+const flushResize = throttleByRaf(applyPendingDelta);
 const containerRef = shallowRef();
-function registerPanel(config) {
-  const existingIndex = panelConfigs.value.findIndex((p) => p.id === config.id);
-  if (existingIndex === -1) {
-    panelConfigs.value.push({ ...config, order: orderCounter.value++ });
-  } else {
-    panelConfigs.value[existingIndex] = {
-      ...config,
-      order: panelConfigs.value[existingIndex].order
-    };
-  }
-  panelConfigs.value.sort((a, b) => a.order - b.order);
-  nextTick(() => {
-    initPanelSizes();
-  });
-}
-function unregisterPanel(id) {
-  const index = panelConfigs.value.findIndex((p) => p.id === id);
-  if (index !== -1) {
-    panelConfigs.value.splice(index, 1);
-    const { [id]: _, ...rest } = panelSizes.value;
-    panelSizes.value = rest;
-  }
-}
-function registerHandle(config) {
-  const existingIndex = handleConfigs.value.findIndex((h) => h.id === config.id);
-  if (existingIndex === -1) {
-    handleConfigs.value.push({ ...config, order: orderCounter.value++ });
-  } else {
-    handleConfigs.value[existingIndex] = {
-      ...config,
-      order: handleConfigs.value[existingIndex].order
-    };
-  }
-  handleConfigs.value.sort((a, b) => a.order - b.order);
-}
-function unregisterHandle(id) {
-  const index = handleConfigs.value.findIndex((h) => h.id === id);
-  if (index !== -1) {
-    handleConfigs.value.splice(index, 1);
-  }
-}
-function getPanelSize(id) {
-  return panelSizes.value[id] || 0;
-}
-function onHandleDrag(handleId, delta) {
-  const handleOrder = handleConfigs.value.find((h) => h.id === handleId)?.order;
-  if (handleOrder === void 0) {
-    return;
-  }
-  const panelsBeforeThisHandle = panelConfigs.value.filter((p) => p.order < handleOrder).length;
-  const panelIndex = panelsBeforeThisHandle - 1;
-  if (panelIndex >= 0 && panelIndex + 1 < panelConfigs.value.length) {
-    onDrag(panelIndex, delta);
-  }
-}
-function calculateContainerSize() {
-  if (!containerRef.value) {
-    return 0;
-  }
-  return props.direction === "horizontal" ? containerRef.value.offsetWidth : containerRef.value.offsetHeight;
-}
-function calculateInitialPanelSizes() {
-  const sizes = {};
-  let remainingSize = 100;
-  const autoSizedPanelIds = [];
-  const sortedConfigs = [...panelConfigs.value].sort((a, b) => a.order - b.order);
-  sortedConfigs.forEach((config) => {
-    const minSize = config.minSize || 0;
-    const initialSizeNum = config.size;
-    if (initialSizeNum !== null && initialSizeNum !== void 0) {
-      sizes[config.id] = Math.max(initialSizeNum, minSize);
-      remainingSize -= sizes[config.id];
-    } else {
-      sizes[config.id] = minSize;
-      remainingSize -= minSize;
-      autoSizedPanelIds.push(config.id);
-    }
-  });
-  return { sizes, remainingSize, autoSizedPanelIds };
-}
-function distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIds) {
-  if (autoSizedPanelIds.length === 0 || remainingSize <= 0) {
-    return sizes;
-  }
-  const updatedSizes = { ...sizes };
-  const avgSize = remainingSize / autoSizedPanelIds.length;
-  autoSizedPanelIds.forEach((id) => {
-    updatedSizes[id] += avgSize;
-  });
-  return updatedSizes;
-}
-async function initPanelSizes() {
-  if (panelConfigs.value.length === 0) {
-    return;
-  }
-  await nextTick();
-  const { sizes, remainingSize, autoSizedPanelIds } = calculateInitialPanelSizes();
-  panelSizes.value = distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIds);
-}
-function onDrag(index, { deltaX, deltaY }) {
-  if (index < 0 || index + 1 >= panelConfigs.value.length) {
-    return;
-  }
-  const containerSize = calculateContainerSize();
-  if (containerSize <= 0) {
-    return;
-  }
-  const prevId = panelConfigs.value[index].id;
-  const nextId = panelConfigs.value[index + 1].id;
-  const delta = props.direction === "horizontal" ? deltaX : deltaY;
-  const deltaPercent = delta / containerSize * 100;
-  const prevSize = panelSizes.value[prevId] || 0;
-  const nextSize = panelSizes.value[nextId] || 0;
-  const prevMinSize = panelConfigs.value[index]?.minSize || 0;
-  const nextMinSize = panelConfigs.value[index + 1]?.minSize || 0;
-  let newPrevSize = prevSize + deltaPercent;
-  let newNextSize = nextSize - deltaPercent;
-  if (newPrevSize < prevMinSize) {
-    const diff = prevMinSize - newPrevSize;
-    newPrevSize = prevMinSize;
-    newNextSize -= diff;
-  } else if (newNextSize < nextMinSize) {
-    const diff = nextMinSize - newNextSize;
-    newNextSize = nextMinSize;
-    newPrevSize -= diff;
-  }
-  if (newPrevSize < prevMinSize) {
-    newPrevSize = prevMinSize;
-  }
-  if (newNextSize < nextMinSize) {
-    newNextSize = nextMinSize;
-  }
-  panelSizes.value[prevId] = newPrevSize;
-  panelSizes.value[nextId] = newNextSize;
-}
-provideResizableContext({
-  props,
-  panelSizes,
-  registerPanel,
-  unregisterPanel,
-  registerHandle,
-  unregisterHandle,
-  getPanelSize,
-  onHandleDrag,
-  resetPanels: initPanelSizes
+const handleRef = shallowRef();
+const containerSize = shallowRef(0);
+const isControlled = computed(() => !isNil(props.modelValue));
+const isPixel = computed(() => props.unit === "px");
+const innerSizes = shallowRef(toPair(props.defaultValue));
+/** Percent sizes are measured against 100; pixel sizes fill the measured container. */
+const totalSize = computed(() => isPixel.value ? containerSize.value : PERCENT_TOTAL);
+/** Only the leading size of a pixel group comes from the caller. */
+const sizes = computed(() => {
+	const source = toPair(isControlled.value ? props.modelValue : innerSizes.value);
+	const leading = source[0];
+	return isPixel.value ? [leading, Math.max(totalSize.value - leading, 0)] : source;
 });
-onMounted(async () => {
-  await nextTick();
-  initPanelSizes();
+/** The pair the panel slots are handed, updated only when a change settles. */
+const settledSizes = shallowRef(sizes.value);
+const restoreSizes = shallowRef(null);
+const collapsed = computed(() => restoreSizes.value !== null);
+const unitSuffix = computed(() => isPixel.value ? "px" : "%");
+const bounds = computed(() => {
+	const [leading, trailing] = toPair(props.minSize);
+	const total = totalSize.value;
+	if (total <= 0) {
+		return {
+			min: sizes.value[0],
+			max: sizes.value[0]
+		};
+	}
+	if (leading + trailing > total) {
+		return {
+			min: 0,
+			max: total
+		};
+	}
+	return {
+		min: leading,
+		max: total - trailing
+	};
+});
+const ariaValueNow = computed(() => roundSize(sizes.value[0]));
+const ariaValueText = computed(() => `${ariaValueNow.value}${unitSuffix.value}${collapsed.value ? ", folded" : ""}`);
+const modelValue = useModelValue(props, emits, { withChange: false });
+useResizeObserver(containerRef, syncContainerSize);
+function roundSize(value) {
+	return Math.round(value * 100) / 100;
+}
+function toPair(value) {
+	return [value?.[0] ?? 0, value?.[1] ?? 0];
+}
+function setSizes([leading, trailing]) {
+	const [currentLeading, currentTrailing] = sizes.value;
+	const nextLeading = roundSize(leading);
+	const next = isPixel.value ? [nextLeading, roundSize(Math.max(totalSize.value - nextLeading, 0))] : [nextLeading, roundSize(trailing)];
+	if (next[0] === currentLeading && next[1] === currentTrailing) {
+		return false;
+	}
+	if (!isControlled.value) {
+		innerSizes.value = next;
+	}
+	modelValue.value = next;
+	return true;
+}
+function applyDelta(delta) {
+	const [leading, trailing] = sizes.value;
+	const { min, max } = bounds.value;
+	const applied = clampValue(delta, min - leading, max - leading);
+	if (applied === 0) {
+		return false;
+	}
+	const nextLeading = roundSize(leading + applied);
+	const changed = setSizes([nextLeading, roundSize(leading + trailing - nextLeading)]);
+	if (changed) {
+		restoreSizes.value = null;
+	}
+	return changed;
+}
+function syncContainerSize() {
+	const container = containerRef.value;
+	if (!container) {
+		containerSize.value = 0;
+		return;
+	}
+	containerSize.value = props.direction === "horizontal" ? container.offsetWidth : container.offsetHeight;
+}
+function applyPendingDelta() {
+	if (!drag || drag.delta === 0) {
+		return;
+	}
+	const delta = drag.delta;
+	drag.delta = 0;
+	drag.resized = applyPointerDelta(delta) || drag.resized;
+}
+function applyPointerDelta(delta) {
+	if (isPixel.value) {
+		return applyDelta(delta);
+	}
+	if (containerSize.value <= 0) {
+		return false;
+	}
+	return applyDelta(delta / containerSize.value * PERCENT_TOTAL);
+}
+function commitChange() {
+	emits("change", sizes.value.slice());
+}
+function toggleCollapse() {
+	if (props.disabled) {
+		return;
+	}
+	const restore = restoreSizes.value;
+	if (restore) {
+		restoreSizes.value = null;
+		if (setSizes(restore)) {
+			commitChange();
+		}
+		return;
+	}
+	restoreSizes.value = [sizes.value[0], sizes.value[1]];
+	const { min } = bounds.value;
+	if (setSizes([min, totalSize.value - min])) {
+		commitChange();
+	}
+}
+function reset() {
+	restoreSizes.value = null;
+	if (setSizes(initialSizes)) {
+		emits("reset", sizes.value.slice());
+	}
+}
+function axisOf(event) {
+	return props.direction === "horizontal" ? event.clientX : event.clientY;
+}
+function resetDragging() {
+	const pointerId = drag?.pointerId;
+	const handle = handleRef.value;
+	flushResize.cancel();
+	drag = null;
+	settledSizes.value = sizes.value;
+	if (pointerId === undefined || !handle) {
+		return;
+	}
+	try {
+		handle.releasePointerCapture(pointerId);
+	} catch {}
+}
+function handlePointerDown(event) {
+	if (props.disabled) {
+		return;
+	}
+	drag = {
+		pointerId: event.pointerId,
+		position: axisOf(event),
+		delta: 0,
+		resized: false
+	};
+	syncContainerSize();
+	try {
+		handleRef.value?.setPointerCapture(event.pointerId);
+	} catch {}
+}
+function handlePointerMove(event) {
+	if (!drag || event.pointerId !== drag.pointerId) {
+		return;
+	}
+	event.preventDefault();
+	const position = axisOf(event);
+	drag.delta += position - drag.position;
+	drag.position = position;
+	flushResize();
+}
+function handlePointerUp(event) {
+	if (!drag || event.pointerId !== drag.pointerId) {
+		return;
+	}
+	flushResize.cancel();
+	applyPendingDelta();
+	const didResize = drag.resized;
+	resetDragging();
+	if (didResize) {
+		commitChange();
+	}
+}
+function handlePointerCancel(event) {
+	if (!drag || event.pointerId !== drag.pointerId) {
+		return;
+	}
+	resetDragging();
+}
+function handleLostCapture() {
+	if (!drag) {
+		return;
+	}
+	resetDragging();
+}
+function handleKeydown(event) {
+	if (props.disabled) {
+		return;
+	}
+	const step = event.shiftKey ? KEYBOARD_STEP_LARGE : KEYBOARD_STEP;
+	const horizontal = props.direction === "horizontal";
+	let delta = null;
+	if (event.key === (horizontal ? "ArrowLeft" : "ArrowUp")) {
+		delta = -step;
+	} else if (event.key === (horizontal ? "ArrowRight" : "ArrowDown")) {
+		delta = step;
+	} else if (event.key === "Home") {
+		delta = bounds.value.min - sizes.value[0];
+	} else if (event.key === "End") {
+		delta = bounds.value.max - sizes.value[0];
+	}
+	if (delta === null) {
+		return;
+	}
+	event.preventDefault();
+	if (applyDelta(delta)) {
+		commitChange();
+	}
+}
+/** Only the leading panel of a pixel group gets a basis; the trailing one fills. */
+function panelStyle(index) {
+	if (isPixel.value && index === 1) {
+		return {};
+	}
+	return { flexBasis: `${sizes.value[index]}${unitSuffix.value}` };
+}
+watch(sizes, (value) => {
+	if (!drag) {
+		settledSizes.value = value;
+	}
+});
+onMounted(syncContainerSize);
+defineExpose({
+	getPanelSizes: () => sizes.value.slice(),
+	reset
 });
 </script>
 
 <template>
   <div
+    data-resizable
     ref="containerRef"
     :data-orientation="direction"
+    :data-unit="unit"
     class="pxd-resizable flex size-full max-w-full flex-row overflow-hidden data-[orientation=vertical]:flex-col"
     v-bind="$attrs"
   >
-    <slot />
+    <div
+      :id="leadingId"
+      class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
+      :style="panelStyle(0)"
+    >
+      <slot name="leading" :size="settledSizes[0]" />
+    </div>
+
+    <div
+      ref="handleRef"
+      role="separator"
+      :tabindex="disabled ? -1 : 0"
+      aria-label="Resize the panels"
+      :aria-orientation="direction"
+      :aria-valuenow="ariaValueNow"
+      :aria-valuemin="bounds.min"
+      :aria-valuemax="bounds.max"
+      :aria-valuetext="ariaValueText"
+      :aria-controls="`${leadingId} ${trailingId}`"
+      :aria-disabled="disabled || void 0"
+      :data-collapsed="collapsed || void 0"
+      :data-handler="handle"
+      :data-orientation="direction"
+      class="pxd-resizable-handle relative shrink-0 touch-none self-focus-ring select-none aria-disabled:cursor-default after:motion-safe:transition-colors"
+      @pointerdown.prevent="handlePointerDown"
+      @pointermove="handlePointerMove"
+      @pointerup="handlePointerUp"
+      @pointercancel="handlePointerCancel"
+      @lostpointercapture="handleLostCapture"
+      @keydown="handleKeydown"
+      @dblclick.prevent.stop="toggleCollapse"
+    />
+
+    <div
+      :id="trailingId"
+      class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
+      :style="panelStyle(1)"
+    >
+      <slot name="trailing" :size="settledSizes[1]" />
+    </div>
   </div>
 </template>
+
+<style>
+.pxd-resizable-panel{flex-grow:0;flex-shrink:1}.pxd-resizable[data-unit=px] .pxd-resizable-panel:first-child{flex-shrink:0}.pxd-resizable[data-unit=px] .pxd-resizable-panel:last-child{flex-basis:0;flex-grow:1}.pxd-resizable-handle[data-handler=true]:before{background-color:var(--color-gray-300);border-radius:.5rem;content:"";left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.pxd-resizable-handle[data-collapsed=true]:before{opacity:.4}.pxd-resizable-handle:after{content:"";left:50%;padding:2px;position:absolute;top:50%;transform:translate(-50%,-50%)}.pxd-resizable-handle:hover:after{background-color:var(--color-primary)}.pxd-resizable-handle[data-orientation=horizontal]{border-left-width:1px;cursor:ew-resize;height:100%}.pxd-resizable-handle[data-orientation=horizontal]:before{height:1.5rem;width:.375rem}.pxd-resizable-handle[data-orientation=horizontal]:after{height:100%}.pxd-resizable-handle[data-orientation=vertical]{border-bottom-width:1px;cursor:ns-resize;width:100%}.pxd-resizable-handle[data-orientation=vertical]:before{height:.375rem;width:1.5rem}.pxd-resizable-handle[data-orientation=vertical]:after{width:100%}
+</style>

package/dist/components/resizable/types.d.ts

@@ -1,18 +1,17 @@
-import type { ComponentDirection } from '../../types/shared'
-
-export interface PanelConfig {
-  id: string
-  size?: number | null
-  order: number
-  minSize?: number
-}
-
-export interface HandleConfig {
-  id: string
-  order: number
-  onDrag: (delta: { deltaX: number; deltaY: number }) => void
-}
+import type { ComponentDirection } from '../../types/shared/props'
 
 export interface ResizableProps {
   direction?: ComponentDirection
+  unit?: 'percent' | 'px'
+  minSize?: number[]
+  handle?: boolean
+  disabled?: boolean
+  defaultValue?: number[]
+  modelValue?: number[] | null
+}
+
+export interface ResizableEmits {
+  change: [number[]]
+  reset: [number[]]
+  'update:modelValue': [number[]]
 }

package/dist/components/reveal/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { RevealProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RevealProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RevealProps> & Readonly<{}>, {
+    delay: string | number;
+    duration: string | number;
+    threshold: number | number[];
+    direction: import("../../types/shared/props.js").BasePosition;
+    trigger: import("./types").RevealTrigger;
+    rootMargin: string;
+    distance: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/reveal/index.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { computed, shallowRef } from "vue";
+import { useIntersectionObserver } from "../../composables/use-intersection-observer.js";
+import { getCssUnitValue } from "../../utils/format.js";
+defineOptions({
+	name: "PReveal",
+	inheritAttrs: false
+});
+const props = defineProps({
+	duration: {
+		type: [Number, String],
+		required: false,
+		default: 1
+	},
+	delay: {
+		type: [Number, String],
+		required: false,
+		default: 0
+	},
+	distance: {
+		type: [Number, String],
+		required: false,
+		default: 16
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: "bottom"
+	},
+	trigger: {
+		type: String,
+		required: false,
+		default: "mount"
+	},
+	root: {
+		type: null,
+		required: false
+	},
+	rootMargin: {
+		type: String,
+		required: false,
+		default: "0px"
+	},
+	threshold: {
+		type: [Number, Array],
+		required: false,
+		default: 0
+	}
+});
+const containerRef = shallowRef();
+const revealed = shallowRef(props.trigger === "mount");
+const computedStyle = computed(() => ({
+	"--reveal-duration": getTimeUnitValue(props.duration),
+	"--reveal-delay": getTimeUnitValue(props.delay),
+	"--reveal-distance": getCssUnitValue(props.distance)
+}));
+// Mount mode leaves the target unresolved, so the observer is never acquired.
+const target = computed(() => props.trigger === "viewport" ? containerRef.value : undefined);
+const observerOptions = computed(() => ({
+	root: props.root,
+	rootMargin: props.rootMargin,
+	threshold: props.threshold
+}));
+const { observer, stop } = useIntersectionObserver(target, ([{ entry }]) => {
+	if (!entry.isIntersecting || revealed.value) {
+		return;
+	}
+	revealed.value = true;
+	// One-shot: a reveal never plays twice, so drop the subscription immediately.
+	stop();
+}, observerOptions);
+/**
+* Gating arms only once an observer actually exists. Without it the paused `from`
+* frame would apply to a server-rendered element that can never be observed,
+* leaving that content permanently invisible.
+*/
+const gated = computed(() => props.trigger === "viewport" && !!observer.value);
+/** Bare numbers are seconds, matching the CSS `animation-*` time grammar. */
+function getTimeUnitValue(value) {
+	return typeof value === "number" ? `${value}s` : value;
+}
+</script>
+
+<template>
+  <div
+    data-reveal
+    ref="containerRef"
+    class="pxd-reveal motion-reduce:animate-none!"
+    :data-direction="direction"
+    :data-play-state="gated && !revealed ? 'paused' : 'running'"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.pxd-reveal{--reveal-duration:0.5s;--reveal-delay:0s;--reveal-distance:16px;--reveal-x:0px;--reveal-y:0px;animation-delay:var(--reveal-delay);animation-duration:var(--reveal-duration);animation-fill-mode:backwards;animation-name:pxd-reveal-in;animation-timing-function:var(--default-transition-timing-function)}.pxd-reveal[data-play-state=paused]{animation-play-state:paused}.pxd-reveal[data-direction=top]{--reveal-y:calc(var(--reveal-distance)*-1)}.pxd-reveal[data-direction=bottom]{--reveal-y:var(--reveal-distance)}.pxd-reveal[data-direction=left]{--reveal-x:calc(var(--reveal-distance)*-1)}.pxd-reveal[data-direction=right]{--reveal-x:var(--reveal-distance)}@keyframes pxd-reveal-in{0%{opacity:0;transform:translate(var(--reveal-x),var(--reveal-y))}}
+</style>

package/dist/components/reveal/types.d.ts

@@ -0,0 +1,15 @@
+import type { BasePosition } from '../../types/shared/props'
+
+export type RevealTrigger = 'mount' | 'viewport'
+
+export interface RevealProps {
+  duration?: number | string
+  delay?: number | string
+  /** Initial offset along the reveal axis, before the element settles at its place. */
+  distance?: number | string
+  direction?: BasePosition
+  trigger?: RevealTrigger
+  root?: Element | Document | null
+  rootMargin?: string
+  threshold?: number | number[]
+}