@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/steps/index.cjs

@@ -0,0 +1,330 @@
+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_array = require("../../array-BGtygd0o.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/steps/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("steps").parts("root", "list", "item", "trigger", "indicator", "separator", "content", "nextTrigger", "prevTrigger", "progress");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/steps/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `steps:${ctx.id}`;
+const getListId = (ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`;
+const getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`;
+const getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`;
+//#endregion
+//#region src/machines/steps/connect.ts
+function connect(service, normalize) {
+	const { context, send, computed, prop, scope } = service;
+	const step = context.get("step");
+	const count = prop("count");
+	const percent = computed("percent");
+	const hasNextStep = computed("hasNextStep");
+	const hasPrevStep = computed("hasPrevStep");
+	const isStepValid = (index) => {
+		return prop("isStepValid")?.(index) ?? true;
+	};
+	const isStepSkippable = (index) => {
+		return prop("isStepSkippable")?.(index) ?? false;
+	};
+	const getItemState = (props) => ({
+		triggerId: getTriggerId(scope, props.index),
+		contentId: getContentId(scope, props.index),
+		current: props.index === step,
+		completed: props.index < step,
+		incomplete: props.index > step,
+		index: props.index,
+		first: props.index === 0,
+		last: props.index === count - 1,
+		skippable: isStepSkippable(props.index),
+		isValid: () => isStepValid(props.index)
+	});
+	const goToNextStep = () => {
+		send({
+			type: "STEP.NEXT",
+			src: "next.trigger.click"
+		});
+	};
+	const goToPrevStep = () => {
+		send({
+			type: "STEP.PREV",
+			src: "prev.trigger.click"
+		});
+	};
+	const resetStep = () => {
+		send({
+			type: "STEP.RESET",
+			src: "reset.trigger.click"
+		});
+	};
+	const setStep = (value) => {
+		send({
+			type: "STEP.SET",
+			value,
+			src: "api.setValue"
+		});
+	};
+	return {
+		value: step,
+		count,
+		percent,
+		hasNextStep,
+		hasPrevStep,
+		isCompleted: computed("completed"),
+		isStepValid,
+		isStepSkippable,
+		goToNextStep,
+		goToPrevStep,
+		resetStep,
+		getItemState,
+		setStep,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				style: { "--percent": `${percent}%` }
+			});
+		},
+		getListProps() {
+			const triggerIds = require_array.fromLength(count).map((_, index) => getTriggerId(scope, index));
+			return normalize.element({
+				...parts.list.attrs,
+				dir: prop("dir"),
+				id: getListId(scope),
+				role: "tablist",
+				"aria-owns": triggerIds.join(" "),
+				"aria-orientation": prop("orientation"),
+				"data-orientation": prop("orientation")
+			});
+		},
+		getItemProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				"aria-current": itemState.current ? "step" : void 0,
+				"data-orientation": prop("orientation"),
+				"data-skippable": require_dom_query.dataAttr(itemState.skippable)
+			});
+		},
+		getTriggerProps(props) {
+			const itemState = getItemState(props);
+			return normalize.button({
+				...parts.trigger.attrs,
+				id: itemState.triggerId,
+				role: "tab",
+				dir: prop("dir"),
+				tabIndex: !prop("linear") || itemState.current ? 0 : -1,
+				"aria-selected": itemState.current,
+				"aria-controls": itemState.contentId,
+				"data-state": itemState.current ? "open" : "closed",
+				"data-orientation": prop("orientation"),
+				"data-complete": require_dom_query.dataAttr(itemState.completed),
+				"data-current": require_dom_query.dataAttr(itemState.current),
+				"data-incomplete": require_dom_query.dataAttr(itemState.incomplete),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (prop("linear")) return;
+					send({
+						type: "STEP.SET",
+						value: props.index,
+						src: "trigger.click"
+					});
+				}
+			});
+		},
+		getContentProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: itemState.contentId,
+				role: "tabpanel",
+				tabIndex: 0,
+				hidden: !itemState.current,
+				"data-state": itemState.current ? "open" : "closed",
+				"data-orientation": prop("orientation"),
+				"aria-labelledby": itemState.triggerId
+			});
+		},
+		getIndicatorProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-complete": require_dom_query.dataAttr(itemState.completed),
+				"data-current": require_dom_query.dataAttr(itemState.current),
+				"data-incomplete": require_dom_query.dataAttr(itemState.incomplete)
+			});
+		},
+		getSeparatorProps(props) {
+			const itemState = getItemState(props);
+			return normalize.element({
+				...parts.separator.attrs,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-complete": require_dom_query.dataAttr(itemState.completed),
+				"data-current": require_dom_query.dataAttr(itemState.current),
+				"data-incomplete": require_dom_query.dataAttr(itemState.incomplete)
+			});
+		},
+		getNextTriggerProps() {
+			return normalize.button({
+				...parts.nextTrigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				disabled: !hasNextStep,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					goToNextStep();
+				}
+			});
+		},
+		getPrevTriggerProps() {
+			return normalize.button({
+				dir: prop("dir"),
+				...parts.prevTrigger.attrs,
+				type: "button",
+				disabled: !hasPrevStep,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					goToPrevStep();
+				}
+			});
+		},
+		getProgressProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.progress.attrs,
+				role: "progressbar",
+				"aria-valuenow": percent,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuetext": `${percent}% complete`,
+				"data-complete": require_dom_query.dataAttr(percent === 100)
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/steps/machine.ts
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			defaultStep: 0,
+			count: 1,
+			linear: false,
+			orientation: "horizontal",
+			...props
+		};
+	},
+	context({ prop, bindable }) {
+		return { step: bindable(() => ({
+			defaultValue: prop("defaultStep"),
+			value: prop("step"),
+			onChange(value) {
+				prop("onStepChange")?.({ step: value });
+				if (value == prop("count")) prop("onStepComplete")?.();
+			}
+		})) };
+	},
+	computed: {
+		percent: require_core.memo(({ context, prop }) => [context.get("step"), prop("count")], ([step, count]) => step / count * 100),
+		hasNextStep: ({ context, prop }) => context.get("step") < prop("count"),
+		hasPrevStep: ({ context }) => context.get("step") > 0,
+		completed: ({ context, prop }) => context.get("step") === prop("count")
+	},
+	initialState() {
+		return "idle";
+	},
+	entry: ["validateStepIndex"],
+	states: { idle: { on: {
+		"STEP.SET": [{
+			guard: "isValidStepNavigation",
+			actions: ["setStep"]
+		}, { actions: ["invokeOnStepInvalid"] }],
+		"STEP.NEXT": [{
+			guard: "isCurrentStepValid",
+			actions: ["goToNextStep"]
+		}, { actions: ["invokeOnStepInvalid"] }],
+		"STEP.PREV": { actions: ["goToPrevStep"] },
+		"STEP.RESET": { actions: ["resetStep"] }
+	} } },
+	implementations: {
+		guards: {
+			isCurrentStepValid({ context, prop }) {
+				const current = context.get("step");
+				if (prop("isStepSkippable")?.(current)) return true;
+				const isStepValid = prop("isStepValid");
+				if (!isStepValid) return true;
+				return isStepValid(current);
+			},
+			isValidStepNavigation({ context, event, prop }) {
+				const current = context.get("step");
+				if (event.value <= current) return true;
+				if (prop("isStepSkippable")?.(current)) return true;
+				const isStepValid = prop("isStepValid");
+				if (!isStepValid) return true;
+				return isStepValid(current);
+			}
+		},
+		actions: {
+			goToNextStep({ context, prop }) {
+				const count = prop("count");
+				context.set("step", Math.min(context.get("step") + 1, count));
+			},
+			goToPrevStep({ context }) {
+				context.set("step", Math.max(context.get("step") - 1, 0));
+			},
+			resetStep({ context }) {
+				context.set("step", 0);
+			},
+			setStep({ context, event }) {
+				context.set("step", event.value);
+			},
+			validateStepIndex({ context, prop }) {
+				validateStepIndex(prop("count"), context.get("step"));
+			},
+			invokeOnStepInvalid({ context, event, prop }) {
+				prop("onStepInvalid")?.({
+					step: context.get("step"),
+					action: event.type === "STEP.NEXT" ? "next" : "set",
+					targetStep: event.value
+				});
+			}
+		}
+	}
+});
+const validateStepIndex = (count, step) => {
+	if (!require_utils.isValueWithinRange(step, 0, count)) throw new RangeError(`[wirekyt/steps] step index ${step} is out of bounds`);
+};
+//#endregion
+//#region src/machines/steps/props.ts
+const props = require_create_props.createProps()([
+	"count",
+	"defaultStep",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"isStepSkippable",
+	"isStepValid",
+	"linear",
+	"onStepChange",
+	"onStepComplete",
+	"onStepInvalid",
+	"orientation",
+	"step"
+]);
+const splitProps = require_utils.createSplitProps(props);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/machines/steps/index.d.cts

@@ -0,0 +1,109 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/steps/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "list" | "item" | "trigger" | "content" | "indicator" | "progress" | "prevTrigger" | "nextTrigger" | "separator">;
+//#endregion
+//#region src/machines/steps/types.d.ts
+interface StepChangeDetails {
+  step: number;
+}
+interface StepInvalidDetails {
+  step: number;
+  action: "next" | "set";
+  targetStep?: number;
+}
+interface ElementIds {
+  root?: string | undefined;
+  list?: string | undefined;
+  triggerId?: ((index: number) => string) | undefined;
+  contentId?: ((index: number) => string) | undefined;
+}
+interface StepsProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  step?: number | undefined;
+  defaultStep?: number | undefined;
+  onStepChange?: ((details: StepChangeDetails) => void) | undefined;
+  onStepComplete?: VoidFunction | undefined;
+  linear?: boolean | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  count?: number | undefined;
+  isStepValid?: ((index: number) => boolean) | undefined;
+  isStepSkippable?: ((index: number) => boolean) | undefined;
+  onStepInvalid?: ((details: StepInvalidDetails) => void) | undefined;
+}
+type PropsWithDefault = "orientation" | "linear" | "count";
+interface PrivateContext {
+  step: number;
+}
+type ComputedContext = Readonly<{
+  percent: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  completed: boolean;
+}>;
+interface StepsSchema {
+  props: RequiredBy<StepsProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type StepsService = Service<StepsSchema>;
+type StepsMachine = Machine<StepsSchema>;
+interface ItemProps {
+  index: number;
+}
+interface ItemState {
+  index: number;
+  triggerId: string;
+  contentId: string;
+  current: boolean;
+  completed: boolean;
+  incomplete: boolean;
+  last: boolean;
+  first: boolean;
+  skippable: boolean;
+  isValid: () => boolean;
+}
+interface StepsApi<T extends PropTypes = PropTypes> {
+  value: number;
+  percent: number;
+  count: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  isCompleted: boolean;
+  isStepValid: (index: number) => boolean;
+  isStepSkippable: (index: number) => boolean;
+  setStep: (step: number) => void;
+  goToNextStep: VoidFunction;
+  goToPrevStep: VoidFunction;
+  resetStep: VoidFunction;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getListProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getTriggerProps: (props: ItemProps) => T["element"];
+  getContentProps: (props: ItemProps) => T["element"];
+  getNextTriggerProps: () => T["button"];
+  getPrevTriggerProps: () => T["button"];
+  getProgressProps: () => T["element"];
+  getIndicatorProps: (props: ItemProps) => T["element"];
+  getSeparatorProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/steps/connect.d.ts
+declare function connect<T extends PropTypes>(service: StepsService, normalize: NormalizeProps<T>): StepsApi<T>;
+//#endregion
+//#region src/machines/steps/machine.d.ts
+declare const machine: Machine<StepsSchema>;
+//#endregion
+//#region src/machines/steps/props.d.ts
+declare const props: (keyof StepsProps)[];
+declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
+//#endregion
+export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, type StepInvalidDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/steps/index.d.ts

@@ -0,0 +1,109 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/steps/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "list" | "item" | "trigger" | "content" | "indicator" | "progress" | "prevTrigger" | "nextTrigger" | "separator">;
+//#endregion
+//#region src/machines/steps/types.d.ts
+interface StepChangeDetails {
+  step: number;
+}
+interface StepInvalidDetails {
+  step: number;
+  action: "next" | "set";
+  targetStep?: number;
+}
+interface ElementIds {
+  root?: string | undefined;
+  list?: string | undefined;
+  triggerId?: ((index: number) => string) | undefined;
+  contentId?: ((index: number) => string) | undefined;
+}
+interface StepsProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  step?: number | undefined;
+  defaultStep?: number | undefined;
+  onStepChange?: ((details: StepChangeDetails) => void) | undefined;
+  onStepComplete?: VoidFunction | undefined;
+  linear?: boolean | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  count?: number | undefined;
+  isStepValid?: ((index: number) => boolean) | undefined;
+  isStepSkippable?: ((index: number) => boolean) | undefined;
+  onStepInvalid?: ((details: StepInvalidDetails) => void) | undefined;
+}
+type PropsWithDefault = "orientation" | "linear" | "count";
+interface PrivateContext {
+  step: number;
+}
+type ComputedContext = Readonly<{
+  percent: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  completed: boolean;
+}>;
+interface StepsSchema {
+  props: RequiredBy<StepsProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type StepsService = Service<StepsSchema>;
+type StepsMachine = Machine<StepsSchema>;
+interface ItemProps {
+  index: number;
+}
+interface ItemState {
+  index: number;
+  triggerId: string;
+  contentId: string;
+  current: boolean;
+  completed: boolean;
+  incomplete: boolean;
+  last: boolean;
+  first: boolean;
+  skippable: boolean;
+  isValid: () => boolean;
+}
+interface StepsApi<T extends PropTypes = PropTypes> {
+  value: number;
+  percent: number;
+  count: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  isCompleted: boolean;
+  isStepValid: (index: number) => boolean;
+  isStepSkippable: (index: number) => boolean;
+  setStep: (step: number) => void;
+  goToNextStep: VoidFunction;
+  goToPrevStep: VoidFunction;
+  resetStep: VoidFunction;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getListProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getTriggerProps: (props: ItemProps) => T["element"];
+  getContentProps: (props: ItemProps) => T["element"];
+  getNextTriggerProps: () => T["button"];
+  getPrevTriggerProps: () => T["button"];
+  getProgressProps: () => T["element"];
+  getIndicatorProps: (props: ItemProps) => T["element"];
+  getSeparatorProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/steps/connect.d.ts
+declare function connect<T extends PropTypes>(service: StepsService, normalize: NormalizeProps<T>): StepsApi<T>;
+//#endregion
+//#region src/machines/steps/machine.d.ts
+declare const machine: Machine<StepsSchema>;
+//#endregion
+//#region src/machines/steps/props.d.ts
+declare const props: (keyof StepsProps)[];
+declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
+//#endregion
+export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, type StepInvalidDetails, anatomy, connect, machine, props, splitProps };