@bysages/solid 0.2.2 → 0.3.0

package/dist/components/virtual-list/index.mjs

@@ -0,0 +1,71 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { For, createSignal, splitProps } from "solid-js";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+//#region src/components/virtual-list/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=virtual-list data-part=inner style=position:relative>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=virtual-list data-part=row style=position:absolute;top:0;inset-inline-start:0;inline-size:100%>`);
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+* scroll length by a spacer sized from the row height, the rows
+* themselves are positioned against it — a ten-thousand-row list
+* costs the DOM a window, not the ledger. */
+function VirtualList(props) {
+	injectComponentStyle("virtual-list");
+	const [own, rest] = splitProps(props, [
+		"items",
+		"itemHeight",
+		"height",
+		"renderItem",
+		"style"
+	]);
+	const restStyle = own.style;
+	const [viewport, setViewport] = createSignal(null);
+	const virtualizer = createVirtualizer({
+		count: own.items.length,
+		getScrollElement: () => viewport(),
+		estimateSize: () => own.itemHeight ?? 40,
+		overscan: 6
+	});
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	ref(() => {
+		return setViewport;
+	}, _el$);
+	spread(_el$, [rest, {
+		"data-scope": "virtual-list",
+		"data-part": "root",
+		get style() {
+			return {
+				...typeof restStyle === "object" && restStyle ? restStyle : {},
+				"block-size": typeof own.height === "number" ? `${own.height}px` : own.height ?? "320px"
+			};
+		}
+	}], true);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return virtualizer.getVirtualItems();
+		},
+		children: (row) => (() => {
+			var _el$3 = _tmpl$2();
+			insert(_el$3, () => {
+				return own.renderItem?.(own.items[row.index], row.index);
+			});
+			effect(() => {
+				return {
+					e: `translateY(${row.start}px)`,
+					t: `${row.size}px`
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setStyleProperty(_el$3, "transform", e);
+				t !== _p$?.t && setStyleProperty(_el$3, "block-size", t);
+			});
+			return _el$3;
+		})()
+	}));
+	effect(() => `${virtualizer.getTotalSize()}px`, (_v$) => {
+		setStyleProperty(_el$2, "block-size", _v$);
+	});
+	return _el$;
+}
+//#endregion
+export { VirtualList };

package/dist/components/watermark/index.d.mts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/watermark/index.d.ts
+/**
+ * The paper bears its seal beneath the content: a canvas draws the
+ * text once into a tile (rotated, faint, crisp at the screen's pixel
+ * density) and the marks layer repeats it over the children. The
+ * seal redraws itself when a prop turns — and it never takes a
+ * pointer.
+ */
+export interface WatermarkProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  content: string;
+  opacity?: number;
+  rotate?: number;
+  fontSize?: string;
+}
+export declare function Watermark(props: WatermarkProps): JSX.Element;
+//#endregion

package/dist/components/watermark/index.mjs

@@ -0,0 +1,77 @@
+import { injectComponentStyle } from "@bysages/core";
+import { effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { createEffect, createSignal, splitProps } from "solid-js";
+//#region src/components/watermark/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=watermark data-part=content></div><div data-scope=watermark data-part=marks aria-hidden=true>`);
+/** Font-relative measures ride the root's own measure; absolute units
+* pass through untouched — the canvas needs a number, the prop may
+* speak in CSS. */
+function toPx(size) {
+	const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+	const value = Number.parseFloat(size) || 0;
+	if (size.includes("em")) return value * root;
+	return value;
+}
+function Watermark(props) {
+	injectComponentStyle("watermark");
+	const [own, rest] = splitProps(props, [
+		"content",
+		"opacity",
+		"rotate",
+		"fontSize"
+	]);
+	const [host, setHost] = createSignal();
+	const [tile, setTile] = createSignal("");
+	createEffect(() => {
+		const el = host();
+		if (!el) return;
+		const canvas = document.createElement("canvas");
+		const paint = canvas.getContext("2d");
+		if (!paint) return;
+		const styles = getComputedStyle(el);
+		const fontSizePx = toPx(own.fontSize ?? "0.875rem");
+		const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
+		paint.font = font;
+		const textWidth = paint.measureText(own.content).width;
+		const margin = fontSizePx;
+		const boxWidth = Math.ceil(textWidth + margin * 2);
+		const boxHeight = Math.ceil(fontSizePx + margin * 2);
+		const radian = (own.rotate ?? -20) * Math.PI / 180;
+		const cos = Math.cos(radian);
+		const sin = Math.sin(radian);
+		const width = Math.ceil(Math.abs(boxWidth * cos) + Math.abs(boxHeight * sin));
+		const height = Math.ceil(Math.abs(boxWidth * sin) + Math.abs(boxHeight * cos));
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		paint.scale(dpr, dpr);
+		paint.translate(width / 2, height / 2);
+		paint.rotate(radian);
+		paint.globalAlpha = own.opacity ?? .06;
+		paint.font = font;
+		paint.textAlign = "center";
+		paint.textBaseline = "middle";
+		paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
+		paint.fillText(own.content, 0, 0);
+		setTile(`url(${canvas.toDataURL()})`);
+	});
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	ref(() => {
+		return setHost;
+	}, _el$);
+	spread(_el$, [rest, {
+		"data-scope": "watermark",
+		"data-part": "root"
+	}], true);
+	insert(_el$2, () => {
+		return rest.children;
+	});
+	effect(() => tile(), (_v$) => {
+		setStyleProperty(_el$3, "background-image", _v$);
+	});
+	return _el$;
+}
+//#endregion
+export { Watermark };