@scrolia/vanilla/dist/components/provider/index.mjs

A headless scrollbar component

import { ScrollCoreContext } from "../../contexts/scrollcore.mjs";
import { getPropsFromAttributes } from "../../functions/attribute.mjs";
import { getComponentProps } from "../../functions/props/get.mjs";
import { setComponentProps } from "../../functions/props/set.mjs";
import * as Atom from "atomico";
import { jsx } from "atomico/jsx-runtime";

function _Provider(props) {
	const elRef = Atom.useHost();
	const [disabled] = Atom.useState(props.disabled ?? false);
	const [page] = Atom.useState(props.page ?? false);
	const [plugins] = Atom.useState(props.plugins ?? []);
	const contentRef = Atom.useRef();
	const [hvTrackX, setHvTrackX] = Atom.useState(false);
	const [hvThumbX, setHvThumbX] = Atom.useState(false);
	const [hvTrackY, setHvTrackY] = Atom.useState(false);
	const [hvThumbY, setHvThumbY] = Atom.useState(false);
	const totalX = Atom.useRef(0);
	const totalY = Atom.useRef(0);
	const viewX = Atom.useRef(0);
	const viewY = Atom.useRef(0);
	const viewOffsetX = Atom.useRef(0);
	const viewOffsetY = Atom.useRef(0);
	const [scrollbarLengthX, setScrollbarLengthX] = Atom.useState(0);
	const [scrollbarLengthY, setScrollbarLengthY] = Atom.useState(0);
	const [scrollbarOffsetX, setScrollbarOffsetX] = Atom.useState(0);
	const [scrollbarOffsetY, setScrollbarOffsetY] = Atom.useState(0);
	Atom.useProvider(ScrollCoreContext, {
		options: {
			disabled,
			page,
			plugins
		},
		contentRef,
		x: {
			hvTrack: hvTrackX,
			setHvTrack: setHvTrackX,
			hvThumb: hvThumbX,
			setHvThumb: setHvThumbX,
			total: totalX,
			view: viewX,
			viewOffset: viewOffsetX,
			scrollbarLength: scrollbarLengthX,
			setScrollbarLength: setScrollbarLengthX,
			scrollbarOffset: scrollbarOffsetX,
			setScrollbarOffset: setScrollbarOffsetX
		},
		y: {
			hvTrack: hvTrackY,
			setHvTrack: setHvTrackY,
			hvThumb: hvThumbY,
			setHvThumb: setHvThumbY,
			total: totalY,
			view: viewY,
			viewOffset: viewOffsetY,
			scrollbarLength: scrollbarLengthY,
			setScrollbarLength: setScrollbarLengthY,
			scrollbarOffset: scrollbarOffsetY,
			setScrollbarOffset: setScrollbarOffsetY
		}
	});
	Atom.useEffect(() => {
		const props$1 = getPropsFromAttributes(elRef.current.attributes);
		const newProps = getComponentProps({
			name: "provider",
			props: props$1,
			plugins: plugins ?? []
		});
		setComponentProps(elRef.current, newProps);
	}, [plugins]);
	return /* @__PURE__ */ jsx("host", {
		shadowDom: true,
		children: /* @__PURE__ */ jsx("slot", {})
	});
}
_Provider.props = {
	disabled: {
		type: Boolean,
		reflect: true,
		attr: "disabled"
	},
	page: {
		type: Boolean,
		reflect: true,
		attr: "page"
	},
	plugins: {
		type: Array,
		reflect: true,
		attr: "plugins"
	}
};
const Provider = Atom.c(_Provider);

export { Provider };
//# sourceMappingURL=index.mjs.map