@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/qr-code/index.js

@@ -0,0 +1,162 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import "../../dom-query-e7fh0TEH.js";
+import { t as getDataUrl } from "../../data-url-DHUHj7UF.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { p as memo, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+import { encode } from "uqr";
+//#region src/machines/qr-code/anatomy.ts
+const anatomy = createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay", "downloadTrigger");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/qr-code/dom.ts
+const getRootId = (scope) => scope.ids?.root ?? `qr-code:${scope.id}:root`;
+const getFrameId = (scope) => scope.ids?.frame ?? `qr-code:${scope.id}:frame`;
+const getFrameEl = (scope) => scope.getById(getFrameId(scope));
+//#endregion
+//#region src/machines/qr-code/connect.ts
+function connect(service, normalize) {
+	const { context, computed, send, scope, prop } = service;
+	const encoded = computed("encoded");
+	const pixelSize = prop("pixelSize");
+	const height = encoded.size * pixelSize;
+	const width = encoded.size * pixelSize;
+	const paths = [];
+	for (let row = 0; row < encoded.size; row++) for (let col = 0; col < encoded.size; col++) {
+		const x = col * pixelSize;
+		const y = row * pixelSize;
+		if (encoded.data[row][col]) paths.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);
+	}
+	return {
+		value: context.get("value"),
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		getDataUrl(type, quality) {
+			return getDataUrl(getFrameEl(scope), {
+				type,
+				quality
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				...parts.root.attrs,
+				style: {
+					"--qrcode-pixel-size": `${pixelSize}px`,
+					"--qrcode-width": `${width}px`,
+					"--qrcode-height": `${height}px`,
+					position: "relative"
+				}
+			});
+		},
+		getFrameProps() {
+			return normalize.svg({
+				id: getFrameId(scope),
+				...parts.frame.attrs,
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: `0 0 ${width} ${height}`
+			});
+		},
+		getPatternProps() {
+			return normalize.path({
+				d: paths.join(""),
+				...parts.pattern.attrs
+			});
+		},
+		getOverlayProps() {
+			return normalize.element({
+				...parts.overlay.attrs,
+				style: {
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					translate: "-50% -50%"
+				}
+			});
+		},
+		getDownloadTriggerProps(props) {
+			return normalize.button({
+				type: "button",
+				...parts.downloadTrigger.attrs,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: "DOWNLOAD_TRIGGER.CLICK",
+						...props
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/qr-code/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			defaultValue: "",
+			pixelSize: 10,
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return { value: bindable(() => ({
+			value: prop("value"),
+			defaultValue: prop("defaultValue"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	computed: { encoded: memo(({ context, prop }) => [context.get("value"), prop("encoding")], ([value, encoding]) => encode(value, encoding)) },
+	states: { idle: { on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"DOWNLOAD_TRIGGER.CLICK": { actions: ["downloadQrCode"] }
+	} } },
+	implementations: { actions: {
+		setValue({ context, event }) {
+			context.set("value", event.value);
+		},
+		downloadQrCode({ event, scope }) {
+			const { mimeType, quality, fileName } = event;
+			const svgEl = getFrameEl(scope);
+			const doc = scope.getDoc();
+			getDataUrl(svgEl, {
+				type: mimeType,
+				quality
+			}).then((dataUri) => {
+				const a = doc.createElement("a");
+				a.href = dataUri;
+				a.rel = "noopener";
+				a.download = fileName;
+				a.click();
+				setTimeout(() => {
+					a.remove();
+				}, 0);
+			});
+		}
+	} }
+});
+//#endregion
+//#region src/machines/qr-code/props.ts
+const props = createProps()([
+	"ids",
+	"defaultValue",
+	"value",
+	"id",
+	"encoding",
+	"dir",
+	"getRootNode",
+	"onValueChange",
+	"pixelSize"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/dist/machines/radio-group/index.cjs

@@ -0,0 +1,465 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_platform = require("../../platform-BZS-dkZN.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_form = require("../../form-CoupKpuP.cjs");
+const require_visually_hidden = require("../../visually-hidden-BgSCFLz_.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_focus_visible = require("../../focus-visible-G4cmlWqq.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/radio-group/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("radio-group").parts("root", "label", "item", "itemText", "itemControl", "indicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/radio-group/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`;
+const getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`;
+const getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`;
+const getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`;
+const getIndicatorId = (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getItemHiddenInputEl = (ctx, value) => ctx.getById(getItemHiddenInputId(ctx, value));
+const getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+const getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
+const getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
+const getInputEls = (ctx) => {
+	const selector = `input[type=radio][data-ownedby='${CSS.escape(getRootId(ctx))}']:not([disabled])`;
+	return require_dom_query.queryAll(getRootEl(ctx), selector);
+};
+const getRadioEl = (ctx, value) => {
+	if (!value) return;
+	return ctx.getById(getItemId(ctx, value));
+};
+const getOffsetRect = (el) => ({
+	x: el?.offsetLeft ?? 0,
+	y: el?.offsetTop ?? 0,
+	width: el?.offsetWidth ?? 0,
+	height: el?.offsetHeight ?? 0
+});
+//#endregion
+//#region src/machines/radio-group/connect.ts
+function connect(service, normalize) {
+	const { context, send, computed, prop, scope } = service;
+	const groupDisabled = computed("isDisabled");
+	const groupInvalid = prop("invalid");
+	const readOnly = prop("readOnly");
+	function getItemState(props) {
+		return {
+			value: props.value,
+			invalid: !!props.invalid || !!groupInvalid,
+			disabled: !!props.disabled || groupDisabled,
+			checked: context.get("value") === props.value,
+			focused: context.get("focusedValue") === props.value,
+			focusVisible: context.get("focusVisibleValue") === props.value,
+			hovered: context.get("hoveredValue") === props.value,
+			active: context.get("activeValue") === props.value
+		};
+	}
+	function getItemDataAttrs(props) {
+		const itemState = getItemState(props);
+		return {
+			"data-focus": require_dom_query.dataAttr(itemState.focused),
+			"data-focus-visible": require_dom_query.dataAttr(itemState.focusVisible),
+			"data-disabled": require_dom_query.dataAttr(itemState.disabled),
+			"data-readonly": require_dom_query.dataAttr(readOnly),
+			"data-state": itemState.checked ? "checked" : "unchecked",
+			"data-hover": require_dom_query.dataAttr(itemState.hovered),
+			"data-invalid": require_dom_query.dataAttr(itemState.invalid),
+			"data-orientation": prop("orientation"),
+			"data-ssr": require_dom_query.dataAttr(context.get("ssr"))
+		};
+	}
+	const focus = () => {
+		(getFirstEnabledAndCheckedInputEl(scope) ?? getFirstEnabledInputEl(scope))?.focus();
+	};
+	return {
+		focus,
+		value: context.get("value"),
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value,
+				isTrusted: false
+			});
+		},
+		clearValue() {
+			send({
+				type: "SET_VALUE",
+				value: null,
+				isTrusted: false
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				role: "radiogroup",
+				id: getRootId(scope),
+				"aria-labelledby": getLabelId(scope),
+				"aria-required": prop("required") || void 0,
+				"aria-disabled": groupDisabled || void 0,
+				"aria-readonly": readOnly || void 0,
+				"data-orientation": prop("orientation"),
+				"data-disabled": require_dom_query.dataAttr(groupDisabled),
+				"data-invalid": require_dom_query.dataAttr(groupInvalid),
+				"data-required": require_dom_query.dataAttr(prop("required")),
+				"aria-orientation": prop("orientation"),
+				dir: prop("dir"),
+				style: { position: "relative" }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-disabled": require_dom_query.dataAttr(groupDisabled),
+				"data-invalid": require_dom_query.dataAttr(groupInvalid),
+				"data-required": require_dom_query.dataAttr(prop("required")),
+				id: getLabelId(scope),
+				onClick: focus
+			});
+		},
+		getItemState,
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			return normalize.label({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				id: getItemId(scope, props.value),
+				htmlFor: getItemHiddenInputId(scope, props.value),
+				...getItemDataAttrs(props),
+				onPointerMove() {
+					if (itemState.disabled) return;
+					if (itemState.hovered) return;
+					send({
+						type: "SET_HOVERED",
+						value: props.value,
+						hovered: true
+					});
+				},
+				onPointerLeave() {
+					if (itemState.disabled) return;
+					send({
+						type: "SET_HOVERED",
+						value: null
+					});
+				},
+				onPointerDown(event) {
+					if (itemState.disabled) return;
+					if (!require_event.isLeftClick(event)) return;
+					if (itemState.focused && event.pointerType === "mouse") event.preventDefault();
+					send({
+						type: "SET_ACTIVE",
+						value: props.value,
+						active: true
+					});
+				},
+				onPointerUp() {
+					if (itemState.disabled) return;
+					send({
+						type: "SET_ACTIVE",
+						value: null
+					});
+				},
+				onClick() {
+					if (!itemState.disabled && require_platform.isSafari()) getItemHiddenInputEl(scope, props.value)?.focus();
+				}
+			});
+		},
+		getItemTextProps(props) {
+			return normalize.element({
+				...parts.itemText.attrs,
+				dir: prop("dir"),
+				id: getItemLabelId(scope, props.value),
+				...getItemDataAttrs(props)
+			});
+		},
+		getItemControlProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.itemControl.attrs,
+				dir: prop("dir"),
+				id: getItemControlId(scope, props.value),
+				"data-active": require_dom_query.dataAttr(itemState.active),
+				"aria-hidden": true,
+				...getItemDataAttrs(props)
+			});
+		},
+		getItemHiddenInputProps(props) {
+			const itemState = getItemState(props);
+			return normalize.input({
+				"data-ownedby": getRootId(scope),
+				id: getItemHiddenInputId(scope, props.value),
+				type: "radio",
+				name: prop("name") || prop("id"),
+				form: prop("form"),
+				value: props.value,
+				required: prop("required"),
+				"aria-labelledby": getItemLabelId(scope, props.value),
+				"aria-invalid": itemState.invalid || void 0,
+				onClick(event) {
+					if (readOnly) {
+						event.preventDefault();
+						return;
+					}
+					if (event.currentTarget.checked) send({
+						type: "SET_VALUE",
+						value: props.value,
+						isTrusted: true
+					});
+				},
+				onBlur() {
+					send({
+						type: "SET_FOCUSED",
+						value: null,
+						focused: false,
+						focusVisible: false
+					});
+				},
+				onFocus() {
+					const focusVisible = require_focus_visible.isFocusVisible();
+					send({
+						type: "SET_FOCUSED",
+						value: props.value,
+						focused: true,
+						focusVisible
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === " ") send({
+						type: "SET_ACTIVE",
+						value: props.value,
+						active: true
+					});
+				},
+				onKeyUp(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === " ") send({
+						type: "SET_ACTIVE",
+						value: null
+					});
+				},
+				disabled: itemState.disabled || readOnly,
+				defaultChecked: itemState.checked,
+				style: require_visually_hidden.visuallyHiddenStyle
+			});
+		},
+		getIndicatorProps() {
+			const rect = context.get("indicatorRect");
+			const animateIndicator = context.get("animateIndicator");
+			return normalize.element({
+				id: getIndicatorId(scope),
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				hidden: context.get("value") == null || isRectEmpty(rect),
+				"data-disabled": require_dom_query.dataAttr(groupDisabled),
+				"data-orientation": prop("orientation"),
+				onTransitionEnd(event) {
+					if (require_event.getEventTarget(event) !== event.currentTarget) return;
+					send({ type: "INDICATOR_TRANSITION_END" });
+				},
+				style: {
+					"--transition-property": "left, top, width, height",
+					"--left": require_utils.toPx(rect?.x),
+					"--top": require_utils.toPx(rect?.y),
+					"--width": require_utils.toPx(rect?.width),
+					"--height": require_utils.toPx(rect?.height),
+					position: "absolute",
+					willChange: animateIndicator ? "var(--transition-property)" : "auto",
+					transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+					transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
+					transitionTimingFunction: "var(--transition-timing-function)",
+					[prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
+				}
+			});
+		}
+	};
+}
+const isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+//#endregion
+//#region src/machines/radio-group/machine.ts
+const { not } = require_core.createGuards();
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			orientation: "vertical",
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			activeValue: bindable(() => ({ defaultValue: null })),
+			focusedValue: bindable(() => ({ defaultValue: null })),
+			focusVisibleValue: bindable(() => ({ defaultValue: null })),
+			hoveredValue: bindable(() => ({ defaultValue: null })),
+			indicatorRect: bindable(() => ({ defaultValue: null })),
+			animateIndicator: bindable(() => ({ defaultValue: false })),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			ssr: bindable(() => ({ defaultValue: true }))
+		};
+	},
+	refs() {
+		return {
+			indicatorCleanup: null,
+			focusVisibleValue: null,
+			prevValue: null
+		};
+	},
+	computed: { isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled") },
+	entry: [
+		"syncPrevValue",
+		"syncIndicatorRect",
+		"syncSsr"
+	],
+	exit: ["cleanupObserver"],
+	effects: ["trackFormControlState", "trackFocusVisible"],
+	watch({ track, action, context }) {
+		track([() => context.get("value")], () => {
+			action([
+				"syncIndicatorAnimation",
+				"syncIndicatorRect",
+				"syncInputElements"
+			]);
+		});
+	},
+	on: {
+		SET_VALUE: [{
+			guard: not("isTrusted"),
+			actions: ["setValue", "dispatchChangeEvent"]
+		}, { actions: ["setValue"] }],
+		SET_HOVERED: { actions: ["setHovered"] },
+		SET_ACTIVE: { actions: ["setActive"] },
+		SET_FOCUSED: { actions: ["setFocused"] },
+		INDICATOR_TRANSITION_END: { actions: ["clearIndicatorAnimation"] }
+	},
+	states: { idle: {} },
+	implementations: {
+		guards: { isTrusted: ({ event }) => !!event.isTrusted },
+		effects: {
+			trackFormControlState({ context, scope }) {
+				return require_form.trackFormControl(getRootEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("value", context.initial("value"));
+					}
+				});
+			},
+			trackFocusVisible({ scope }) {
+				return require_focus_visible.trackFocusVisible({ root: scope.getRootNode?.() });
+			}
+		},
+		actions: {
+			setValue({ context, event }) {
+				context.set("value", event.value);
+			},
+			setHovered({ context, event }) {
+				context.set("hoveredValue", event.value);
+			},
+			setActive({ context, event }) {
+				context.set("activeValue", event.value);
+			},
+			setFocused({ context, event }) {
+				context.set("focusedValue", event.value);
+				const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
+				context.set("focusVisibleValue", focusVisibleValue);
+			},
+			syncPrevValue({ context, refs }) {
+				refs.set("prevValue", context.get("value"));
+			},
+			syncIndicatorAnimation({ context, refs }) {
+				const prevValue = refs.get("prevValue");
+				const nextValue = context.get("value");
+				const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+				context.set("animateIndicator", animate);
+				refs.set("prevValue", nextValue);
+			},
+			clearIndicatorAnimation({ context }) {
+				context.set("animateIndicator", false);
+			},
+			syncInputElements({ context, scope }) {
+				getInputEls(scope).forEach((input) => {
+					input.checked = input.value === context.get("value");
+				});
+			},
+			cleanupObserver({ refs }) {
+				refs.get("indicatorCleanup")?.();
+			},
+			syncSsr({ context }) {
+				context.set("ssr", false);
+			},
+			syncIndicatorRect({ context, scope, refs }) {
+				refs.get("indicatorCleanup")?.();
+				if (!getIndicatorEl(scope)) return;
+				const value = context.get("value");
+				const radioEl = getRadioEl(scope, value);
+				if (value == null || !radioEl) {
+					context.set("indicatorRect", null);
+					return;
+				}
+				const exec = () => {
+					context.set("indicatorRect", getOffsetRect(radioEl));
+				};
+				exec();
+				const indicatorCleanup = require_dom_query.resizeObserverBorderBox.observe(radioEl, exec);
+				refs.set("indicatorCleanup", indicatorCleanup);
+			},
+			dispatchChangeEvent({ context, scope }) {
+				getInputEls(scope).forEach((inputEl) => {
+					const checked = inputEl.value === context.get("value");
+					if (checked === inputEl.checked) return;
+					require_form.dispatchInputCheckedEvent(inputEl, { checked });
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/radio-group/props.ts
+const props = require_create_props.createProps()([
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"name",
+	"onValueChange",
+	"orientation",
+	"readOnly",
+	"required",
+	"value",
+	"defaultValue"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const itemProps = require_create_props.createProps()([
+	"value",
+	"disabled",
+	"invalid"
+]);
+const splitItemProps = require_utils.createSplitProps(itemProps);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.itemProps = itemProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitItemProps = splitItemProps;
+exports.splitProps = splitProps;