@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/editable/editable.presentation.d.ts

@@ -0,0 +1,278 @@
+import { EditableEvents } from "./editable.events.js";
+import { EditableArgs, EditableContext, EditableState } from "./editable.state.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { InteractOutsideEvent } from "@spinjs/runtime/actions";
+/**
+ * Editable definition: the DOM contract as data. The machine owns the two
+ * modes, the value, and the previous value; this file maps parts to
+ * attribute bags, commands to sends, and value/edit
+ * transitions to their events. Entering edit focuses the input (selecting
+ * when asked); leaving it blurs and restores focus unless the outside
+ * interaction already moved it.
+ */
+export interface EditableEditChange {
+  readonly edit: boolean;
+}
+export interface EditableValueChange {
+  readonly value: string;
+}
+type ScopeLike = ViewFor<EditableContext, EditableEvents, EditableState>;
+export declare const def: {
+  name: string;
+  machine: (args: EditableArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<EditableContext, EditableEvents, EditableState>;
+  start: (props: Record<string, unknown>) => "preview" | "edit";
+  reconcile: ({ context, state, parsed, authored, send }: {
+    readonly context: EditableContext;
+    readonly state: EditableState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  settled: ({ event, before, after, focus }: {
+    readonly event: {
+      readonly type: string;
+    } & Record<string, unknown>;
+    readonly before: {
+      readonly context: EditableContext;
+      readonly state: EditableState;
+    };
+    readonly after: {
+      readonly context: EditableContext;
+      readonly state: EditableState;
+    };
+    readonly focus: (part: string, slot?: unknown) => void;
+  }) => void;
+  parts: {
+    root: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        dir: "ltr" | "rtl";
+      };
+    };
+    area: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        dir: "ltr" | "rtl";
+        "data-state": string;
+        "data-focus": string | undefined;
+        "data-placeholder-shown": string | undefined;
+        "data-autoresize": string | undefined;
+        "data-disabled": string | undefined;
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        dir: "ltr" | "rtl";
+        for: string;
+        "data-state": string;
+        "data-focus": string | undefined;
+        "data-disabled": string | undefined;
+        "data-invalid": string | undefined;
+        "data-required": string | undefined;
+        onClick: () => void;
+      };
+    };
+    input: {
+      attrs: (scope: ScopeLike) => {
+        size: number | undefined;
+        onInput: (event: {
+          readonly currentTarget: {
+            readonly value: string;
+          };
+        }) => void;
+        onFocus: (event: FocusEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        "use:interact-outside": {
+          exclude: () => readonly (Element | null)[];
+          onPointerDownOutside: (event: InteractOutsideEvent) => void;
+          onFocusOutside: (event: InteractOutsideEvent) => void;
+        };
+        "data-state": string;
+        "data-placeholder-shown": string | undefined;
+        "data-hidden": string | undefined;
+        "data-disabled": string | undefined;
+        "data-autoresize": string | undefined;
+        "data-invalid": string | undefined;
+        "data-readonly": string | undefined;
+        id: string;
+        dir: "ltr" | "rtl";
+        type: string;
+        name: string | undefined;
+        form: string | undefined;
+        value: string;
+        placeholder: string | undefined;
+        maxLength: number | undefined;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        "aria-label": "editable input";
+      };
+    };
+    preview: {
+      attrs: (scope: ScopeLike) => {
+        tabIndex: number | undefined;
+        onClick: () => void;
+        onFocus: () => void;
+        onDoubleClick: (event: MouseEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-label": "edit";
+        id: string;
+        dir: "ltr" | "rtl";
+        "data-state": string;
+        "data-placeholder-shown": string | undefined;
+        "data-hidden": string | undefined;
+        "data-disabled": string | undefined;
+        "data-autoresize": string | undefined;
+        "data-invalid": string | undefined;
+        "data-readonly": string | undefined;
+      };
+    };
+    editTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        disabled: boolean;
+        onClick: (event: MouseEvent) => void;
+        id: string;
+        dir: "ltr" | "rtl";
+        type: string;
+        "data-state": string;
+        "data-disabled": string | undefined;
+        "aria-label": "edit";
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        dir: "ltr" | "rtl";
+      };
+    };
+    submitTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        disabled: boolean;
+        onClick: (event: MouseEvent) => void;
+        id: string;
+        dir: "ltr" | "rtl";
+        type: string;
+        "data-state": string;
+        "data-disabled": string | undefined;
+        "aria-label": "submit";
+      };
+    };
+    cancelTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        disabled: boolean;
+        onClick: (event: MouseEvent) => void;
+        id: string;
+        dir: "ltr" | "rtl";
+        type: string;
+        "data-state": string;
+        "data-disabled": string | undefined;
+        "aria-label": "cancel";
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: ([value]: [value: string]) => {
+        type: "VALUE.SET";
+        value: string;
+      };
+    };
+    clearValue: {
+      event: () => {
+        type: "VALUE.SET";
+        value: string;
+      };
+    };
+    edit: {
+      event: () => {
+        type: "EDIT";
+      };
+    };
+    cancel: {
+      event: () => {
+        type: "CANCEL";
+      };
+    };
+    submit: {
+      event: () => {
+        type: "SUBMIT";
+      };
+    };
+  };
+  readers: {
+    editing: {
+      read: (_context: EditableContext, state: EditableState) => state is "edit";
+    };
+    empty: {
+      read: (context: EditableContext) => boolean;
+    };
+    value: {
+      read: (context: EditableContext) => string;
+    };
+    valueText: {
+      read: (context: EditableContext) => string;
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: EditableContext) => string[];
+      detail: (watched: readonly [string]) => {
+        value: string;
+      };
+    };
+    "edit-change": {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly [boolean]) => {
+        edit: boolean;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: EditableContext, _after: EditableContext) => {
+        edit: boolean;
+      } | null;
+    };
+    "value-commit": {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly [string]) => {
+        value: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: EditableContext, after: EditableContext, states?: {
+        readonly was: string;
+        readonly is: string;
+      }) => {
+        value: string;
+      } | null;
+    };
+    "value-revert": {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly [string]) => {
+        value: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: EditableContext, after: EditableContext, states?: {
+        readonly was: string;
+        readonly is: string;
+      }) => {
+        value: string;
+      } | null;
+    };
+  };
+};
+export type EditableApi = ApiOf<typeof def>;
+export declare const editable: import("@spinjs/runtime").DefinedComponent<EditableApi, EditableArgs>;
+export {};
+//# sourceMappingURL=editable.presentation.d.ts.map

package/dist/editable/editable.presentation.js

@@ -0,0 +1,388 @@
+import { editable as editable$1 } from "./editable.machine.js";
+import { ariaControls, ariaDisabled, ariaInvalid, ariaReadOnly, defineComponent } from "@spinjs/runtime";
+// src/editable/editable.presentation.ts
+const TRANSLATIONS = {
+	input: "editable input",
+	edit: "edit",
+	submit: "submit",
+	cancel: "cancel"
+};
+const interactive = (scope) => !(scope.context.disabled === true || scope.context.readOnly === true);
+const editingOf = (scope) => scope.state === "edit";
+const isOutsideHandler = (value) => typeof value === "function";
+const callHandler = (scope, name, event) => {
+	const fn = scope.context[name];
+	if (isOutsideHandler(fn)) fn(event);
+};
+const def = {
+	name: "editable",
+	machine: (args, authored) => editable$1(args, authored),
+	start: (props) => props["editing"] === true || props["defaultEdit"] === true ? "edit" : "preview",
+	reconcile: ({ context, state, parsed, authored, send }) => {
+		if (context.editControlled !== authored("editing")) context.editControlled = authored("editing");
+		if (!authored("editing")) return false;
+		if (parsed["editing"] === true && state !== "edit") send({ type: "CONTROLLED.EDIT" });
+		if (parsed["editing"] !== true && state === "edit") send({
+			type: "CONTROLLED.PREVIEW",
+			previousEvent: context.lastEvent
+		});
+		return false;
+	},
+	settled: ({ event, before, after, focus }) => {
+		const wasEditing = before.state === "edit";
+		const editing = after.state === "edit";
+		if (!wasEditing && editing) {
+			focus("input");
+			return;
+		}
+		if (wasEditing && !editing) {
+			if ((typeof event["focusable"] === "boolean" ? event["focusable"] : false) === true && (event.type === "SUBMIT" || event.type === "CANCEL")) return;
+			focus("editTrigger");
+		}
+	},
+	parts: {
+		root: {
+			id: "",
+			attrs: (scope) => ({
+				id: scope.id(""),
+				dir: scope.context.dir
+			})
+		},
+		area: { attrs: (scope) => {
+			const focused = editingOf(scope);
+			const placeholderShown = scope.context.value.trim() === "";
+			return {
+				id: scope.id("area"),
+				dir: scope.context.dir,
+				"data-state": focused ? "edit" : "preview",
+				"data-focus": scope.attr(focused),
+				"data-placeholder-shown": scope.attr(placeholderShown),
+				"data-autoresize": scope.attr(scope.context.autoResize === true),
+				"data-disabled": scope.attr(scope.context.disabled)
+			};
+		} },
+		label: { attrs: (scope) => {
+			const focused = editingOf(scope);
+			return {
+				id: scope.id("label"),
+				dir: scope.context.dir,
+				for: scope.id("input"),
+				"data-state": focused ? "edit" : "preview",
+				"data-focus": scope.attr(focused),
+				"data-disabled": scope.attr(scope.context.disabled),
+				"data-invalid": scope.attr(scope.context.invalid === true),
+				"data-required": scope.attr(scope.context.required),
+				onClick: () => {
+					if (editingOf(scope)) return;
+				}
+			};
+		} },
+		input: { attrs: (scope) => {
+			const ctx = scope.context;
+			const focused = editingOf(scope);
+			const removed = !focused && scope.context.autoResize !== true;
+			const placeholderShown = ctx.value.trim() === "";
+			const raw = scope.context.placeholder;
+			const placeholder = typeof raw === "string" ? raw : raw.edit ?? "";
+			return {
+				id: scope.id("input"),
+				dir: scope.context.dir,
+				type: "text",
+				name: scope.context.name,
+				form: scope.context.form,
+				value: ctx.value,
+				placeholder: placeholder.length > 0 ? placeholder : void 0,
+				maxLength: typeof scope.context.maxLength === "number" ? scope.context.maxLength : void 0,
+				required: scope.context.required,
+				disabled: scope.context.disabled,
+				readOnly: scope.context.readOnly,
+				"aria-label": TRANSLATIONS.input,
+				...ariaInvalid(scope.context.invalid === true ? true : void 0),
+				"data-state": focused ? "edit" : "preview",
+				"data-placeholder-shown": scope.attr(placeholderShown),
+				"data-hidden": scope.attr(removed),
+				"data-disabled": scope.attr(scope.context.disabled),
+				"data-autoresize": scope.attr(scope.context.autoResize === true),
+				"data-invalid": scope.attr(scope.context.invalid === true),
+				"data-readonly": scope.attr(scope.context.readOnly),
+				...ariaControls(scope, { part: "control" }),
+				size: scope.context.autoResize === true ? 1 : void 0,
+				onInput: (event) => scope.send({
+					type: "VALUE.SET",
+					value: event.currentTarget.value
+				}),
+				onFocus: (event) => {
+					if (scope.context.selectOnFocus === false) return;
+					const target = event.currentTarget;
+					if (!(target instanceof HTMLInputElement)) return;
+					target.select();
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					if (event.isComposing === true) return;
+					switch (event.key) {
+						case "Escape":
+							if (!interactive(scope)) return;
+							event.preventDefault();
+							scope.send({
+								type: "CANCEL",
+								src: "input.escape"
+							});
+							return;
+						case "Enter": {
+							const mode = typeof scope.context.submitMode === "string" ? scope.context.submitMode : "both";
+							if (mode !== "both" && mode !== "enter") return;
+							if (event.shiftKey || event.metaKey) return;
+							if (!interactive(scope)) return;
+							event.preventDefault();
+							scope.send({
+								type: "SUBMIT",
+								src: "input.enter"
+							});
+							return;
+						}
+					}
+				},
+				"use:interact-outside": {
+					exclude: () => [scope.root().querySelector(`[id="${scope.id("cancelTrigger")}"]`), scope.root().querySelector(`[id="${scope.id("editTrigger")}"]`)],
+					onPointerDownOutside: (event) => {
+						callHandler(scope, "onPointerDownOutside", event);
+						callHandler(scope, "onInteractOutside", event);
+						reportOutside(scope, event);
+					},
+					onFocusOutside: (event) => {
+						callHandler(scope, "onFocusOutside", event);
+						callHandler(scope, "onInteractOutside", event);
+						reportOutside(scope, event);
+					}
+				}
+			};
+		} },
+		preview: { attrs: (scope) => {
+			const ctx = scope.context;
+			const focused = editingOf(scope);
+			const live = interactive(scope);
+			const placeholderShown = ctx.value.trim() === "";
+			const removed = focused && scope.context.autoResize !== true;
+			return {
+				id: scope.id("preview"),
+				dir: scope.context.dir,
+				"data-state": focused ? "edit" : "preview",
+				"data-placeholder-shown": scope.attr(placeholderShown),
+				"data-hidden": scope.attr(removed),
+				"data-disabled": scope.attr(scope.context.disabled),
+				"data-autoresize": scope.attr(scope.context.autoResize === true),
+				"data-invalid": scope.attr(scope.context.invalid === true),
+				"data-readonly": scope.attr(scope.context.readOnly),
+				...ariaReadOnly(scope.context.readOnly === true ? true : void 0),
+				...ariaDisabled(scope.context.disabled === true ? true : void 0),
+				...ariaInvalid(scope.context.invalid === true ? true : void 0),
+				"aria-label": TRANSLATIONS.edit,
+				...ariaControls(scope, { part: "control" }),
+				tabIndex: live ? 0 : void 0,
+				onClick: () => {
+					if (!live) return;
+					if ((typeof scope.context.activationMode === "string" ? scope.context.activationMode : "focus") !== "click") return;
+					scope.send({
+						type: "EDIT",
+						src: "preview.click"
+					});
+				},
+				onFocus: () => {
+					if (!live) return;
+					if ((typeof scope.context.activationMode === "string" ? scope.context.activationMode : "focus") !== "focus") return;
+					scope.send({
+						type: "EDIT",
+						src: "preview.focus"
+					});
+				},
+				onDoubleClick: (event) => {
+					if (event.defaultPrevented) return;
+					if (!live) return;
+					if ((typeof scope.context.activationMode === "string" ? scope.context.activationMode : "focus") !== "dblclick") return;
+					scope.send({
+						type: "EDIT",
+						src: "preview.dblclick"
+					});
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					if (event.key !== "Enter" && event.key !== " ") return;
+					if (!interactive(scope)) return;
+					event.preventDefault();
+					scope.send({
+						type: "EDIT",
+						src: "preview.keydown"
+					});
+				}
+			};
+		} },
+		editTrigger: {
+			id: "edit",
+			attrs: (scope) => {
+				const focused = editingOf(scope);
+				return {
+					id: scope.id("editTrigger"),
+					dir: scope.context.dir,
+					type: "button",
+					"data-state": focused ? "edit" : "preview",
+					"data-disabled": scope.attr(scope.context.disabled),
+					"aria-label": TRANSLATIONS.edit,
+					...ariaControls(scope, { part: "control" }),
+					disabled: scope.context.disabled,
+					onClick: (event) => {
+						if (event.defaultPrevented) return;
+						if (!interactive(scope)) return;
+						scope.send({
+							type: "EDIT",
+							src: "edit.click"
+						});
+					}
+				};
+			}
+		},
+		control: { attrs: (scope) => ({
+			id: scope.id("control"),
+			dir: scope.context.dir
+		}) },
+		submitTrigger: {
+			id: "submit",
+			attrs: (scope) => {
+				const focused = editingOf(scope);
+				return {
+					id: scope.id("submitTrigger"),
+					dir: scope.context.dir,
+					type: "button",
+					"data-state": focused ? "edit" : "preview",
+					"data-disabled": scope.attr(scope.context.disabled),
+					"aria-label": TRANSLATIONS.submit,
+					...ariaControls(scope, { part: "control" }),
+					disabled: scope.context.disabled,
+					onClick: (event) => {
+						if (event.defaultPrevented) return;
+						if (!interactive(scope)) return;
+						scope.send({
+							type: "SUBMIT",
+							src: "submit.click"
+						});
+					}
+				};
+			}
+		},
+		cancelTrigger: {
+			id: "cancel",
+			attrs: (scope) => {
+				const focused = editingOf(scope);
+				return {
+					id: scope.id("cancelTrigger"),
+					dir: scope.context.dir,
+					type: "button",
+					"data-state": focused ? "edit" : "preview",
+					"data-disabled": scope.attr(scope.context.disabled),
+					"aria-label": TRANSLATIONS.cancel,
+					...ariaControls(scope, { part: "control" }),
+					disabled: scope.context.disabled,
+					onClick: (event) => {
+						if (event.defaultPrevented) return;
+						if (!interactive(scope)) return;
+						scope.send({
+							type: "CANCEL",
+							src: "cancel.click"
+						});
+					}
+				};
+			}
+		}
+	},
+	commands: {
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value
+		}) },
+		clearValue: { event: () => ({
+			type: "VALUE.SET",
+			value: ""
+		}) },
+		edit: { event: () => ({ type: "EDIT" }) },
+		cancel: { event: () => ({ type: "CANCEL" }) },
+		submit: { event: () => ({ type: "SUBMIT" }) }
+	},
+	readers: {
+		editing: { read: (_context, state) => state === "edit" },
+		empty: { read: (context) => context.value.trim() === "" },
+		value: { read: (context) => context.value },
+		valueText: { read: (context) => {
+			const value = context.value;
+			if (value.trim() !== "") return value;
+			const placeholder = context.placeholder;
+			if (typeof placeholder === "object" && placeholder !== null && "preview" in placeholder && typeof placeholder.preview === "string") return placeholder.preview;
+			return typeof placeholder === "string" ? placeholder : "";
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [context.value],
+			detail: (watched) => ({ value: watched[0] })
+		},
+		"edit-change": {
+			prop: "onEditChange",
+			watch: () => [],
+			detail: (watched) => ({ edit: watched[0] }),
+			select: (event, _before, _after) => {
+				if (event.type === "EDIT") return { edit: true };
+				if (event.type === "SUBMIT" || event.type === "CANCEL") return { edit: false };
+				return null;
+			}
+		},
+		"value-commit": {
+			prop: "onValueCommit",
+			watch: () => [],
+			detail: (watched) => ({ value: watched[0] }),
+			select: (event, _before, after, states) => {
+				if (states === void 0 || states.was !== "edit" || states.is === "edit") return null;
+				if (!(event.type === "SUBMIT" || event.type === "CONTROLLED.PREVIEW" && typeof event["previousEvent"] === "string" && event["previousEvent"] === "SUBMIT")) return null;
+				return { value: after.value };
+			}
+		},
+		"value-revert": {
+			prop: "onValueRevert",
+			watch: () => [],
+			detail: (watched) => ({ value: watched[0] }),
+			select: (event, _before, after, states) => {
+				if (states === void 0 || states.was !== "edit" || states.is === "edit") return null;
+				if (event.type === "SUBMIT" || event.type === "CONTROLLED.PREVIEW" && typeof event["previousEvent"] === "string" && event["previousEvent"] === "SUBMIT") return null;
+				if (event.type !== "CONTROLLED.PREVIEW" && event.type !== "CANCEL") return null;
+				return { value: after.previousValue };
+			}
+		}
+	}
+};
+/** Zag's `trackInteractOutside` callback pair: report to the host, then let
+* the machine decide, unless the host vetoed. */
+const reportOutside = (scope, event) => {
+	if (event.defaultPrevented) return;
+	if (scope.state !== "edit") return;
+	const mode = typeof scope.context.submitMode === "string" ? scope.context.submitMode : "both";
+	const focusable = typeof event === "object" && event !== null && "detail" in event && typeof event.detail === "object" && event.detail !== null && "focusable" in event.detail ? event.detail.focusable === true : void 0;
+	if (mode === "both" || mode === "blur") scope.send(focusable === void 0 ? {
+		type: "SUBMIT",
+		src: "interact-outside"
+	} : {
+		type: "SUBMIT",
+		src: "interact-outside",
+		focusable
+	});
+	else scope.send(focusable === void 0 ? {
+		type: "CANCEL",
+		src: "interact-outside"
+	} : {
+		type: "CANCEL",
+		src: "interact-outside",
+		focusable
+	});
+};
+const editable = defineComponent(def);
+export { def, editable };
+
+//# sourceMappingURL=editable.presentation.js.map