@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/angle-slider/index.js

@@ -0,0 +1,415 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { a as getEventStep, c as getNativeEvent, i as getEventPoint, m as isLeftClick, r as getEventKey } from "../../event-bTItRgiw.js";
+import { o as setElementValue } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as trackPointerMove } from "../../pointer-move-Tijb8Ptk.js";
+import { N as snapValueToStep, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { c as createRect } from "../../rect-utils-d_3gZVsc.js";
+import { t as getPointAngle } from "../../angle-oNt8uGHQ.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/angle-slider/anatomy.ts
+const anatomy = createAnatomy("angle-slider").parts("root", "label", "thumb", "valueText", "control", "track", "markerGroup", "marker");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/angle-slider/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `angle-slider:${ctx.id}`;
+const getThumbId = (ctx) => ctx.ids?.thumb ?? `angle-slider:${ctx.id}:thumb`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `angle-slider:${ctx.id}:input`;
+const getControlId = (ctx) => ctx.ids?.control ?? `angle-slider:${ctx.id}:control`;
+const getValueTextId = (ctx) => ctx.ids?.valueText ?? `angle-slider:${ctx.id}:value-text`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `angle-slider:${ctx.id}:label`;
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getThumbEl = (ctx) => ctx.getById(getThumbId(ctx));
+function mirrorAngle(angle) {
+	return (360 - angle) % 360;
+}
+function getAngle(controlEl, point, angularOffset, dir) {
+	let angle = getPointAngle(createRect(controlEl.getBoundingClientRect()), point);
+	if (angularOffset != null) return angle - angularOffset;
+	if (dir === "rtl") angle = mirrorAngle(angle);
+	return angle;
+}
+function getPointerValue(controlEl, point, angularOffset, value, dir) {
+	if (angularOffset == null) return getAngle(controlEl, point, null, dir);
+	const angle = getAngle(controlEl, point);
+	const clickAngle = value + angularOffset;
+	return dir === "rtl" ? value + clickAngle - angle : angle - angularOffset;
+}
+function getDisplayAngle(value, dir) {
+	return dir === "rtl" ? mirrorAngle(value) : value;
+}
+function clampAngle(degree) {
+	return Math.min(Math.max(degree, 0), 359);
+}
+function constrainAngle(degree, step) {
+	const clampedDegree = clampAngle(degree);
+	const upperStep = Math.ceil(clampedDegree / step);
+	const nearestStep = Math.round(clampedDegree / step);
+	return upperStep >= clampedDegree / step ? upperStep * step === 359 ? 0 : upperStep * step : nearestStep * step;
+}
+function snapAngleToStep(value, step) {
+	return snapValueToStep(value, 0, 359, step);
+}
+//#endregion
+//#region src/machines/angle-slider/connect.ts
+function connect(service, normalize) {
+	const { state, send, context, prop, computed, scope } = service;
+	const dragging = state.matches("dragging");
+	const value = context.get("value");
+	const valueAsDegree = computed("valueAsDegree");
+	const dir = prop("dir");
+	const displayAngle = getDisplayAngle(value, dir);
+	const disabled = prop("disabled");
+	const invalid = prop("invalid");
+	const readOnly = prop("readOnly");
+	const interactive = computed("interactive");
+	const ariaLabel = prop("aria-label");
+	const ariaLabelledBy = prop("aria-labelledby");
+	return {
+		value,
+		valueAsDegree,
+		dragging,
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				style: {
+					"--value": value,
+					"--angle": `${displayAngle}deg`
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				id: getLabelId(scope),
+				htmlFor: getHiddenInputId(scope),
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				onClick(event) {
+					if (!interactive) return;
+					event.preventDefault();
+					getThumbEl(scope)?.focus();
+				}
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.element({
+				type: "hidden",
+				value,
+				name: prop("name"),
+				id: getHiddenInputId(scope),
+				dir: prop("dir")
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				role: "presentation",
+				id: getControlId(scope),
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					const point = getEventPoint(event);
+					const controlEl = event.currentTarget;
+					const thumbEl = getThumbEl(scope);
+					const composedPath = getNativeEvent(event).composedPath();
+					const isOverThumb = thumbEl && composedPath.includes(thumbEl);
+					let angularOffset = null;
+					if (isOverThumb) angularOffset = getAngle(controlEl, point) - value;
+					send({
+						type: "CONTROL.POINTER_DOWN",
+						point,
+						angularOffset
+					});
+					event.stopPropagation();
+				},
+				style: {
+					touchAction: "none",
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getThumbProps() {
+			return normalize.element({
+				...parts.thumb.attrs,
+				id: getThumbId(scope),
+				role: "slider",
+				dir: prop("dir"),
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy ?? getLabelId(scope),
+				"aria-valuemax": 360,
+				"aria-valuemin": 0,
+				"aria-valuenow": value,
+				tabIndex: readOnly || interactive ? 0 : void 0,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				onFocus() {
+					send({ type: "THUMB.FOCUS" });
+				},
+				onBlur() {
+					send({ type: "THUMB.BLUR" });
+				},
+				onKeyDown(event) {
+					if (!interactive) return;
+					const step = getEventStep(event) * prop("step");
+					const exec = {
+						ArrowLeft() {
+							send({
+								type: "THUMB.ARROW_DEC",
+								step
+							});
+						},
+						ArrowUp() {
+							send({
+								type: "THUMB.ARROW_DEC",
+								step
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "THUMB.ARROW_INC",
+								step
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "THUMB.ARROW_INC",
+								step
+							});
+						},
+						Home() {
+							send({ type: "THUMB.HOME" });
+						},
+						End() {
+							send({ type: "THUMB.END" });
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: "horizontal"
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				},
+				style: { rotate: `var(--angle)` }
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				id: getValueTextId(scope),
+				dir: prop("dir")
+			});
+		},
+		getMarkerGroupProps() {
+			return normalize.element({
+				...parts.markerGroup.attrs,
+				dir: prop("dir")
+			});
+		},
+		getMarkerProps(props) {
+			let markerState;
+			if (props.value < value) markerState = "under-value";
+			else if (props.value > value) markerState = "over-value";
+			else markerState = "at-value";
+			const markerDisplayAngle = getDisplayAngle(props.value, dir);
+			return normalize.element({
+				...parts.marker.attrs,
+				dir: prop("dir"),
+				"data-value": props.value,
+				"data-state": markerState,
+				"data-disabled": dataAttr(disabled),
+				style: {
+					"--marker-value": props.value,
+					"--marker-display-value": markerDisplayAngle,
+					rotate: `calc(var(--marker-display-value) * 1deg)`
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/angle-slider/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			step: 1,
+			defaultValue: 0,
+			...props
+		};
+	},
+	context({ prop, bindable }) {
+		return { value: bindable(() => ({
+			defaultValue: prop("defaultValue"),
+			value: prop("value"),
+			onChange(value) {
+				prop("onValueChange")?.({
+					value,
+					valueAsDegree: `${value}deg`
+				});
+			}
+		})) };
+	},
+	refs() {
+		return { thumbDragOffset: null };
+	},
+	computed: {
+		interactive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+		valueAsDegree: ({ context }) => `${context.get("value")}deg`
+	},
+	watch({ track, context, action }) {
+		track([() => context.get("value")], () => {
+			action(["syncInputElement"]);
+		});
+	},
+	initialState() {
+		return "idle";
+	},
+	on: { "VALUE.SET": { actions: ["setValue"] } },
+	states: {
+		idle: { on: {
+			"CONTROL.POINTER_DOWN": {
+				target: "dragging",
+				actions: [
+					"setThumbDragOffset",
+					"setPointerValue",
+					"focusThumb"
+				]
+			},
+			"THUMB.FOCUS": { target: "focused" }
+		} },
+		focused: { on: {
+			"CONTROL.POINTER_DOWN": {
+				target: "dragging",
+				actions: [
+					"setThumbDragOffset",
+					"setPointerValue",
+					"focusThumb"
+				]
+			},
+			"THUMB.ARROW_DEC": { actions: ["decrementValue", "invokeOnChangeEnd"] },
+			"THUMB.ARROW_INC": { actions: ["incrementValue", "invokeOnChangeEnd"] },
+			"THUMB.HOME": { actions: ["setValueToMin", "invokeOnChangeEnd"] },
+			"THUMB.END": { actions: ["setValueToMax", "invokeOnChangeEnd"] },
+			"THUMB.BLUR": { target: "idle" }
+		} },
+		dragging: {
+			entry: ["focusThumb"],
+			effects: ["trackPointerMove"],
+			on: {
+				"DOC.POINTER_UP": {
+					target: "focused",
+					actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
+				},
+				"DOC.POINTER_MOVE": { actions: ["setPointerValue"] }
+			}
+		}
+	},
+	implementations: {
+		effects: { trackPointerMove({ scope, send }) {
+			return trackPointerMove(scope.getDoc(), {
+				onPointerMove(info) {
+					send({
+						type: "DOC.POINTER_MOVE",
+						point: info.point
+					});
+				},
+				onPointerUp() {
+					send({ type: "DOC.POINTER_UP" });
+				}
+			});
+		} },
+		actions: {
+			syncInputElement({ scope, context }) {
+				setElementValue(getHiddenInputEl(scope), context.get("value").toString());
+			},
+			invokeOnChangeEnd({ context, prop, computed }) {
+				prop("onValueChangeEnd")?.({
+					value: context.get("value"),
+					valueAsDegree: computed("valueAsDegree")
+				});
+			},
+			setPointerValue({ scope, event, context, prop, refs }) {
+				const controlEl = getControlEl(scope);
+				if (!controlEl) return;
+				const angularOffset = refs.get("thumbDragOffset");
+				const value = context.get("value");
+				const deg = getPointerValue(controlEl, event.point, angularOffset, value, prop("dir"));
+				context.set("value", constrainAngle(deg, prop("step")));
+			},
+			setValueToMin({ context }) {
+				context.set("value", 0);
+			},
+			setValueToMax({ context }) {
+				context.set("value", 359);
+			},
+			setValue({ context, event }) {
+				context.set("value", clampAngle(event.value));
+			},
+			decrementValue({ context, event, prop }) {
+				const value = snapAngleToStep(context.get("value") - event.step, event.step ?? prop("step"));
+				context.set("value", value);
+			},
+			incrementValue({ context, event, prop }) {
+				const value = snapAngleToStep(context.get("value") + event.step, event.step ?? prop("step"));
+				context.set("value", value);
+			},
+			focusThumb({ scope }) {
+				raf(() => {
+					getThumbEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			setThumbDragOffset({ refs, event }) {
+				refs.set("thumbDragOffset", event.angularOffset ?? null);
+			},
+			clearThumbDragOffset({ refs }) {
+				refs.set("thumbDragOffset", null);
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/angle-slider/props.ts
+const props = createProps()([
+	"aria-label",
+	"aria-labelledby",
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"name",
+	"onValueChange",
+	"onValueChangeEnd",
+	"readOnly",
+	"step",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/dist/machines/async-list/index.cjs

@@ -0,0 +1,310 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_warning = require("../../warning-HAmFXLHm.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+require("../../core.cjs");
+require("../../utils.cjs");
+//#region src/machines/async-list/connect.ts
+function connect(service) {
+	const { state, context, send } = service;
+	const loading = state.matches("loading", "sorting");
+	const sorting = state.matches("sorting");
+	const items = context.get("items");
+	const cursor = context.get("cursor");
+	const empty = items.length === 0;
+	const hasMore = cursor != null;
+	return {
+		items,
+		sortDescriptor: context.get("sortDescriptor"),
+		loading,
+		sorting,
+		empty,
+		hasMore,
+		error: context.get("error"),
+		filterText: context.get("filterText"),
+		cursor,
+		abort() {
+			send({ type: "ABORT" });
+		},
+		reload() {
+			send({ type: "RELOAD" });
+		},
+		loadMore() {
+			send({ type: "LOAD_MORE" });
+		},
+		sort(sortDescriptor) {
+			send({
+				type: "SORT",
+				sortDescriptor
+			});
+		},
+		setFilterText(filterText) {
+			send({
+				type: "FILTER",
+				filterText
+			});
+		},
+		clearFilter() {
+			send({
+				type: "FILTER",
+				filterText: ""
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/async-list/machine.ts
+const machine = require_core.createMachine({
+	props({ props }) {
+		require_warning.ensureProps(props, ["load"], "load is required");
+		return props;
+	},
+	context({ prop, bindable }) {
+		return {
+			items: bindable(() => ({ defaultValue: prop("initialItems") ?? [] })),
+			cursor: bindable(() => ({ defaultValue: null })),
+			filterText: bindable(() => ({ defaultValue: prop("initialFilterText") ?? "" })),
+			sortDescriptor: bindable(() => ({ defaultValue: prop("initialSortDescriptor") })),
+			error: bindable(() => ({ defaultValue: void 0 }))
+		};
+	},
+	refs() {
+		return {
+			abort: null,
+			seq: 0
+		};
+	},
+	watch({ prop, track, send }) {
+		track([() => hashDeps(prop("dependencies"))], () => {
+			send({ type: "RELOAD" });
+		});
+	},
+	initialState() {
+		return "idle";
+	},
+	on: { RELOAD: {
+		target: "loading",
+		reenter: true,
+		actions: ["clearItems"]
+	} },
+	entry: ["loadIfNeeded"],
+	states: {
+		idle: { on: {
+			LOAD_MORE: {
+				guard: "hasCursor",
+				target: "loading"
+			},
+			SORT: [{
+				guard: "hasSortFn",
+				target: "sorting",
+				actions: [
+					"setSortDescriptor",
+					"clearCursor",
+					"performSort"
+				]
+			}, {
+				target: "loading",
+				actions: ["setSortDescriptor", "clearCursor"]
+			}],
+			FILTER: {
+				target: "loading",
+				actions: ["setFilterText", "clearCursor"]
+			}
+		} },
+		loading: {
+			entry: ["performFetch"],
+			exit: ["cancelFetch"],
+			on: {
+				SUCCESS: {
+					target: "idle",
+					actions: [
+						"setItems",
+						"setCursor",
+						"clearError",
+						"invokeOnSuccess"
+					]
+				},
+				ERROR: {
+					target: "idle",
+					actions: ["setError", "invokeOnError"]
+				},
+				ABORT: {
+					target: "idle",
+					actions: ["cancelFetch"]
+				},
+				FILTER: {
+					reenter: true,
+					target: "loading",
+					actions: ["setFilterText", "clearCursor"]
+				}
+			}
+		},
+		sorting: { on: {
+			SUCCESS: {
+				target: "idle",
+				actions: [
+					"setItems",
+					"setCursor",
+					"clearError",
+					"invokeOnSuccess"
+				]
+			},
+			ERROR: {
+				target: "idle",
+				actions: ["setError", "invokeOnError"]
+			},
+			ABORT: {
+				target: "idle",
+				actions: ["cancelSort"]
+			},
+			FILTER: {
+				target: "loading",
+				actions: [
+					"setFilterText",
+					"clearCursor",
+					"cancelSort"
+				]
+			},
+			RELOAD: {
+				target: "loading",
+				actions: ["clearItems", "cancelSort"]
+			},
+			SORT: [{
+				guard: "hasSortFn",
+				target: "sorting",
+				reenter: true,
+				actions: [
+					"setSortDescriptor",
+					"clearCursor",
+					"cancelSort",
+					"performSort"
+				]
+			}, {
+				target: "loading",
+				actions: [
+					"setSortDescriptor",
+					"clearCursor",
+					"cancelSort"
+				]
+			}]
+		} }
+	},
+	implementations: {
+		guards: {
+			hasCursor({ context }) {
+				return context.get("cursor") != null;
+			},
+			hasSortFn({ prop }) {
+				return prop("sort") != null;
+			}
+		},
+		actions: {
+			loadIfNeeded({ prop, send }) {
+				if (!prop("autoReload")) return;
+				send({ type: "RELOAD" });
+			},
+			performFetch({ context, prop, refs, send, event }) {
+				refs.set("abort", new AbortController());
+				const abort = refs.get("abort");
+				context.set("error", void 0);
+				const seq = refs.get("seq") + 1;
+				refs.set("seq", seq);
+				const isLoadMore = event.type === "LOAD_MORE";
+				prop("load")({
+					signal: abort?.signal,
+					cursor: isLoadMore ? context.get("cursor") : null,
+					filterText: event.filterText ?? context.get("filterText"),
+					sortDescriptor: event.sortDescriptor ?? context.get("sortDescriptor")
+				}).then(({ items, cursor }) => {
+					if (seq !== refs.get("seq")) return;
+					send({
+						type: "SUCCESS",
+						items,
+						cursor,
+						append: isLoadMore
+					});
+				}).catch((error) => {
+					if (seq !== refs.get("seq")) return;
+					if (isAbortError(error)) return;
+					send({
+						type: "ERROR",
+						error
+					});
+				});
+			},
+			performSort({ context, prop, send, event, refs }) {
+				const sortFn = prop("sort");
+				require_warning.ensure(sortFn, () => "[wirekyt/async-list] sort is required");
+				const currentItems = context.get("items");
+				const filterText = context.get("filterText");
+				const seq = refs.get("seq") + 1;
+				refs.set("seq", seq);
+				Promise.resolve(sortFn({
+					items: currentItems,
+					descriptor: event.sortDescriptor,
+					filterText
+				})).then((r) => {
+					if (seq !== refs.get("seq")) return;
+					send({
+						type: "SUCCESS",
+						items: r?.items ?? currentItems,
+						cursor: void 0,
+						append: false
+					});
+				}).catch((e) => {
+					if (seq !== refs.get("seq")) return;
+					send({
+						type: "ERROR",
+						error: e
+					});
+				});
+			},
+			setSortDescriptor({ context, event }) {
+				context.set("sortDescriptor", event.sortDescriptor);
+			},
+			setFilterText({ context, event }) {
+				context.set("filterText", event.filterText);
+			},
+			invokeOnSuccess({ prop, event }) {
+				prop("onSuccess")?.({ items: event.items });
+			},
+			invokeOnError({ prop, event }) {
+				prop("onError")?.({ error: event.error });
+			},
+			clearItems({ context }) {
+				context.set("items", []);
+			},
+			setItems({ context, event }) {
+				context.set("items", (prev) => event.append ? [...prev, ...event.items] : event.items);
+			},
+			setCursor({ context, event }) {
+				context.set("cursor", event.cursor);
+			},
+			setError({ context, event }) {
+				context.set("error", event.error);
+			},
+			clearError({ context }) {
+				context.set("error", void 0);
+			},
+			clearCursor({ context }) {
+				context.set("cursor", null);
+			},
+			cancelFetch({ refs }) {
+				refs.get("abort")?.abort();
+				refs.set("abort", null);
+			},
+			cancelSort({ refs }) {
+				const seq = refs.get("seq") + 1;
+				refs.set("seq", seq);
+			}
+		}
+	}
+});
+function isAbortError(err) {
+	return err instanceof Error && err.name === "AbortError";
+}
+function hashDeps(deps = []) {
+	return deps.filter(Boolean).join(",");
+}
+//#endregion
+exports.connect = connect;
+exports.machine = machine;