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

package/dist/floating-panel/floating-panel.machine.js

@@ -0,0 +1,70 @@
+import { initial } from "./floating-panel.state.js";
+import { canDrag, canResize, cancelDragToOpen, clearDragFrom, clearResizeFrom, closeOnEscape, dragMove, dragStart, escapeCancel, maximize, minimize, resizeMove, resizeStart, restore, restoreResizeGeometry, setSize } from "./floating-panel.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/floating-panel/floating-panel.machine.ts
+function floatingPanel(args = {}, authored = () => false) {
+	return createMachine({
+		id: "floating-panel",
+		initial: "closed",
+		context: initial(args, authored),
+		fields: {
+			size: { event: "SIZE.SET" },
+			draggable: {},
+			resizable: {},
+			closeOnEscape: {},
+			label: {},
+			disabled: {}
+		},
+		on: {
+			"SIZE.SET": { assign: setSize },
+			"MINIMIZE": [{ assign: minimize }],
+			"MAXIMIZE": [{ assign: maximize }],
+			"RESTORE": [{ assign: restore }]
+		},
+		states: {
+			closed: { on: { "OPEN": [{ target: "open" }] } },
+			open: { on: {
+				"CLOSE": [{ target: "closed" }],
+				"ESCAPE": [{
+					cond: closeOnEscape,
+					target: "closed"
+				}, { assign: escapeCancel }],
+				"DRAG.START": [{
+					cond: canDrag,
+					target: "dragging",
+					assign: dragStart
+				}],
+				"RESIZE.START": [{
+					cond: canResize,
+					target: "resizing",
+					assign: resizeStart
+				}]
+			} },
+			dragging: { on: {
+				"DRAG.MOVE": [{ assign: dragMove }],
+				"DRAG.END": [{
+					target: "open",
+					assign: clearDragFrom
+				}],
+				"ESCAPE": [{
+					target: "open",
+					assign: [cancelDragToOpen, clearDragFrom]
+				}]
+			} },
+			resizing: { on: {
+				"RESIZE.MOVE": [{ assign: resizeMove }],
+				"RESIZE.END": [{
+					target: "open",
+					assign: clearResizeFrom
+				}],
+				"ESCAPE": [{
+					target: "open",
+					assign: [restoreResizeGeometry, clearResizeFrom]
+				}]
+			} }
+		}
+	});
+}
+export { floatingPanel };
+
+//# sourceMappingURL=floating-panel.machine.js.map

package/dist/floating-panel/floating-panel.presentation.d.ts

@@ -0,0 +1,239 @@
+import { FloatingPanelArgs, FloatingPanelContext, FloatingPanelSize, FloatingPanelStage, FloatingPanelState } from "./floating-panel.state.js";
+import { FloatingPanelEvents } from "./floating-panel.events.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { DragDelta } from "@spinjs/runtime/actions";
+/** The stage a stage-trigger addresses: ark's vocabulary. "default"
+ * is the panel's restored geometry. */
+export interface FloatingPanelStageTrigger {
+  readonly stage: "minimized" | "maximized" | "default";
+}
+export type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+type ScopeLike = ViewFor<FloatingPanelContext, FloatingPanelEvents, FloatingPanelState>;
+export declare const def: {
+  name: string;
+  machine: (props: FloatingPanelArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<FloatingPanelContext, FloatingPanelEvents, FloatingPanelState>;
+  start: (raw: Record<string, unknown>, authored: (name: string) => boolean) => "open" | "closed";
+  reconcile: ({ context, state, parsed, authored, send }: {
+    readonly context: FloatingPanelContext;
+    readonly state: FloatingPanelState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    trigger: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+        "data-state": string;
+        hidden: boolean;
+        onClick: () => void;
+        id: string;
+        "aria-label": string;
+      };
+    };
+    positioner: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        role: string;
+        "aria-label": string;
+        "data-state": string;
+        "data-stage": FloatingPanelStage;
+        "data-dragging": string | undefined;
+        "data-resizing": string | undefined;
+        "data-disabled": string | undefined;
+        "use:dismissable": {
+          onOutside: () => void;
+          onEscape: () => void;
+        };
+      };
+    };
+    content: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+        id: string;
+        "data-state": string;
+        "data-stage": FloatingPanelStage;
+        style: {
+          height?: string | undefined;
+          left: string;
+          top: string;
+          width: string;
+        };
+      };
+    };
+    dragTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+        id: string;
+        "aria-label": string;
+        "data-disabled": string | undefined;
+        tabIndex: number | undefined;
+        "use:drag": {
+          onStart: (press: {
+            readonly altKey: boolean;
+            readonly shiftKey: boolean;
+          }) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: (end: {
+            readonly cancelled: boolean;
+          }) => void;
+          enabled: boolean;
+        };
+      };
+    };
+    stageTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        id: string;
+        "data-stage": "minimized" | "maximized" | "default";
+        "aria-label": string;
+        hidden: boolean;
+        type: string;
+        onClick: () => void;
+      };
+    };
+    closeTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+        id: string;
+        "aria-label": string;
+        onClick: () => void;
+      };
+    };
+    resizeTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        id: string;
+        "aria-label": string;
+        "data-edge": ResizeEdge;
+        "data-disabled": string | undefined;
+        "use:drag": {
+          onStart: (press: {
+            readonly altKey: boolean;
+            readonly shiftKey: boolean;
+          }) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: (end: {
+            readonly cancelled: boolean;
+          }) => void;
+          enabled: boolean;
+        };
+      };
+    };
+  };
+  slots: {};
+  settled: ({ before, after, focus, root }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: FloatingPanelContext;
+      readonly state: FloatingPanelState;
+    };
+    readonly after: {
+      readonly context: FloatingPanelContext;
+      readonly state: FloatingPanelState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+  commands: {
+    setOpen: {
+      event: () => {
+        type: "OPEN";
+      };
+    };
+    close: {
+      event: () => {
+        type: "CLOSE";
+      };
+    };
+    minimize: {
+      event: () => {
+        type: "MINIMIZE";
+      };
+    };
+    maximize: {
+      event: () => {
+        type: "MAXIMIZE";
+      };
+    };
+    restore: {
+      event: () => {
+        type: "RESTORE";
+      };
+    };
+  };
+  readers: {
+    isOpen: {
+      read: (_context: FloatingPanelContext, state: FloatingPanelState) => state is "dragging" | "open" | "resizing";
+    };
+    dragging: {
+      read: (_context: FloatingPanelContext, state: FloatingPanelState) => state is "dragging";
+    };
+    stage: {
+      read: (context: FloatingPanelContext) => FloatingPanelStage;
+    };
+    position: {
+      read: (context: FloatingPanelContext) => {
+        x: number;
+        y: number;
+      };
+    };
+    size: {
+      read: (context: FloatingPanelContext) => {
+        w: number;
+        h: number;
+      };
+    };
+    state: {
+      read: (_context: FloatingPanelContext, state: FloatingPanelState) => FloatingPanelState;
+    };
+  };
+  events: {
+    "open-change": {
+      prop: string;
+      watch: (_context: FloatingPanelContext, state: FloatingPanelState) => boolean[];
+      detail: (watched: readonly unknown[]) => {
+        open: boolean;
+      };
+    };
+    "size-change": {
+      prop: string;
+      watch: (context: FloatingPanelContext) => number[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: FloatingPanelContext) => {
+        size: {
+          w: number;
+          h: number;
+        };
+      };
+    };
+    "position-change": {
+      prop: string;
+      watch: (context: FloatingPanelContext) => number[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: FloatingPanelContext) => {
+        position: {
+          x: number;
+          y: number;
+        };
+      };
+    };
+    "stage-change": {
+      prop: string;
+      watch: (context: FloatingPanelContext) => FloatingPanelStage[];
+      detail: (watched: readonly unknown[]) => {
+        stage: FloatingPanelStage;
+      };
+    };
+  };
+};
+export type FloatingPanelApi = ApiOf<typeof def>;
+export declare const floatingPanel: import("@spinjs/runtime").DefinedComponent<FloatingPanelApi, FloatingPanelArgs>;
+export type { FloatingPanelSize, FloatingPanelStage };
+//# sourceMappingURL=floating-panel.presentation.d.ts.map

package/dist/floating-panel/floating-panel.presentation.js

@@ -0,0 +1,271 @@
+import { startOpen } from "./floating-panel.state.js";
+import { floatingPanel as floatingPanel$1 } from "./floating-panel.machine.js";
+import { dataAttr, defineComponent, disclosureTrigger, isRecord } from "@spinjs/runtime";
+// src/floating-panel/floating-panel.presentation.ts
+const EDGES = {
+	n: {
+		x: 0,
+		y: -1
+	},
+	s: {
+		x: 0,
+		y: 1
+	},
+	e: {
+		x: 1,
+		y: 0
+	},
+	w: {
+		x: -1,
+		y: 0
+	},
+	ne: {
+		x: 1,
+		y: -1
+	},
+	nw: {
+		x: -1,
+		y: -1
+	},
+	se: {
+		x: 1,
+		y: 1
+	},
+	sw: {
+		x: -1,
+		y: 1
+	}
+};
+const stageOf = (arg) => {
+	if (!isRecord(arg)) return "default";
+	const stage = arg["stage"];
+	return stage === "minimized" || stage === "maximized" ? stage : "default";
+};
+const isEdge = (arg) => typeof arg === "string" && Object.keys(EDGES).includes(arg);
+const edgeOf = (arg) => isEdge(arg) ? arg : "se";
+const dragHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const dragFor = (scope, mode) => {
+	let byEdge = dragHandlersByBridge.get(scope.id);
+	if (byEdge === void 0) {
+		byEdge = /* @__PURE__ */ new Map();
+		dragHandlersByBridge.set(scope.id, byEdge);
+	}
+	const hit = byEdge.get(mode);
+	if (hit !== void 0) return hit;
+	const made = {
+		onStart: () => {
+			if (mode === "move") scope.send({ type: "DRAG.START" });
+			else scope.send({
+				type: "RESIZE.START",
+				...EDGES[mode]
+			});
+		},
+		onMove: (delta) => {
+			if (mode === "move") scope.send({
+				type: "DRAG.MOVE",
+				dx: delta.dx,
+				dy: delta.dy
+			});
+			else scope.send({
+				type: "RESIZE.MOVE",
+				dx: delta.dx,
+				dy: delta.dy
+			});
+		},
+		onEnd: () => {
+			if (mode === "move") scope.send({ type: "DRAG.END" });
+			else scope.send({ type: "RESIZE.END" });
+		}
+	};
+	byEdge.set(mode, made);
+	return made;
+};
+const def = {
+	name: "floating-panel",
+	machine: (props, authored) => floatingPanel$1(props, authored),
+	start: (raw, authored) => startOpen(raw, authored) ? "open" : "closed",
+	reconcile: ({ context, state, parsed, authored, send }) => {
+		if (authored("stage")) {
+			const stage = parsed["stage"];
+			const outer = stage === "minimized" || stage === "maximized" || stage === "restored" ? stage : null;
+			if (outer !== null && context.stage !== outer) {
+				send(outer === "minimized" ? { type: "MINIMIZE" } : outer === "maximized" ? { type: "MAXIMIZE" } : { type: "RESTORE" });
+				return true;
+			}
+		}
+		if (authored("open")) {
+			const outer = parsed["open"] === true;
+			if (state !== "closed" !== outer) {
+				send(outer ? { type: "OPEN" } : { type: "CLOSE" });
+				return true;
+			}
+		}
+		return false;
+	},
+	parts: {
+		trigger: { attrs: (scope) => {
+			const open = scope.state !== "closed";
+			return {
+				id: scope.id("trigger"),
+				"aria-label": scope.context.label,
+				...disclosureTrigger(scope, {
+					expanded: open,
+					hasPopup: "dialog",
+					controls: { part: "positioner" }
+				}),
+				"data-state": open ? "open" : "closed",
+				hidden: open,
+				onClick: () => scope.send({ type: open ? "CLOSE" : "OPEN" })
+			};
+		} },
+		positioner: { attrs: (scope) => {
+			const ctx = scope.context;
+			const open = scope.state !== "closed";
+			return {
+				id: scope.id("positioner"),
+				role: "dialog",
+				"aria-label": scope.context.label,
+				"data-state": open ? "open" : "closed",
+				"data-stage": ctx.stage,
+				"data-dragging": scope.attr(scope.state === "dragging"),
+				"data-resizing": scope.attr(scope.state === "resizing"),
+				"data-disabled": dataAttr(scope.context.disabled),
+				"use:dismissable": {
+					onOutside: () => scope.send({ type: "CLOSE" }),
+					onEscape: () => scope.send({ type: "ESCAPE" })
+				}
+			};
+		} },
+		content: { attrs: (scope) => {
+			const ctx = scope.context;
+			return {
+				id: scope.id("content"),
+				"data-state": scope.state === "closed" ? "closed" : "open",
+				"data-stage": ctx.stage,
+				style: {
+					left: `${ctx.position.x}px`,
+					top: `${ctx.position.y}px`,
+					width: `${ctx.size.w}px`,
+					...ctx.stage === "minimized" ? {} : { height: `${ctx.size.h}px` }
+				}
+			};
+		} },
+		dragTrigger: {
+			id: "drag",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				const disabled = scope.context.disabled;
+				return {
+					id: scope.id("dragTrigger"),
+					"aria-label": "Move",
+					"data-disabled": dataAttr(ctx.stage !== "restored" || disabled),
+					tabIndex: ctx.stage === "restored" && !disabled ? 0 : void 0,
+					"use:drag": {
+						enabled: ctx.stage === "restored" && !disabled,
+						...dragFor(scope, "move")
+					}
+				};
+			}
+		},
+		stageTrigger: {
+			id: "stage",
+			attrs: (scope, arg) => {
+				const want = stageOf(arg);
+				const staged = scope.context.stage !== "restored";
+				const self = want === "default" ? !staged : staged;
+				return {
+					id: scope.id("stage", want),
+					"data-stage": want,
+					"aria-label": want === "minimized" ? "Minimize" : want === "maximized" ? "Maximize" : "Restore",
+					hidden: self,
+					type: "button",
+					onClick: () => scope.send({ type: want === "minimized" ? "MINIMIZE" : want === "maximized" ? "MAXIMIZE" : "RESTORE" })
+				};
+			}
+		},
+		closeTrigger: {
+			id: "close",
+			attrs: (scope) => ({
+				id: scope.id("closeTrigger"),
+				"aria-label": "Close",
+				onClick: () => scope.send({ type: "CLOSE" })
+			})
+		},
+		resizeTrigger: {
+			id: "resize",
+			attrs: (scope, arg) => {
+				const edge = edgeOf(arg);
+				const ctx = scope.context;
+				const disabled = scope.context.disabled;
+				return {
+					id: scope.id("resizeTrigger", edge),
+					"aria-label": `Resize ${edge}`,
+					"data-edge": edge,
+					"data-disabled": dataAttr(ctx.stage !== "restored" || disabled),
+					"use:drag": {
+						enabled: ctx.stage === "restored" && !disabled,
+						...dragFor(scope, edge)
+					}
+				};
+			}
+		}
+	},
+	slots: {},
+	settled: ({ before, after, focus, root }) => {
+		if (before.state === "closed" || after.state !== "closed") return;
+		const active = typeof document === "undefined" ? null : document.activeElement;
+		if (active instanceof Element && root().contains(active)) focus("trigger");
+	},
+	commands: {
+		setOpen: { event: () => ({ type: "OPEN" }) },
+		close: { event: () => ({ type: "CLOSE" }) },
+		minimize: { event: () => ({ type: "MINIMIZE" }) },
+		maximize: { event: () => ({ type: "MAXIMIZE" }) },
+		restore: { event: () => ({ type: "RESTORE" }) }
+	},
+	readers: {
+		isOpen: { read: (_context, state) => state !== "closed" },
+		dragging: { read: (_context, state) => state === "dragging" },
+		stage: { read: (context) => context.stage },
+		position: { read: (context) => ({ ...context.position }) },
+		size: { read: (context) => ({ ...context.size }) },
+		state: { read: (_context, state) => state }
+	},
+	events: {
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [state !== "closed"],
+			detail: (watched) => {
+				return { open: watched[0] === true };
+			}
+		},
+		"size-change": {
+			prop: "onSizeChange",
+			watch: (context) => {
+				const size = context.size;
+				return [size.w, size.h];
+			},
+			detail: (_watched, _event, _props, context) => ({ size: { ...context.size } })
+		},
+		"position-change": {
+			prop: "onPositionChange",
+			watch: (context) => {
+				const position = context.position;
+				return [position.x, position.y];
+			},
+			detail: (_watched, _event, _props, context) => ({ position: { ...context.position } })
+		},
+		"stage-change": {
+			prop: "onStageChange",
+			watch: (context) => [context.stage],
+			detail: (watched) => {
+				const stage = watched[0];
+				return { stage: stage === "minimized" || stage === "maximized" ? stage : "restored" };
+			}
+		}
+	}
+};
+const floatingPanel = defineComponent(def);
+export { def, floatingPanel };
+
+//# sourceMappingURL=floating-panel.presentation.js.map

package/dist/floating-panel/floating-panel.state.d.ts

@@ -0,0 +1,67 @@
+export type FloatingPanelState = "closed" | "open" | "dragging" | "resizing";
+export type FloatingPanelStage = "minimized" | "maximized" | "restored";
+export interface FloatingPanelSize {
+  readonly w: number;
+  readonly h: number;
+}
+export interface FloatingPanelContext {
+  position: {
+    readonly x: number;
+    readonly y: number;
+  };
+  size: FloatingPanelSize;
+  restoreSize: FloatingPanelSize | null;
+  restorePosition: {
+    readonly x: number;
+    readonly y: number;
+  } | null;
+  stage: FloatingPanelStage;
+  dragFrom: {
+    readonly x: number;
+    readonly y: number;
+  } | null;
+  minSize: FloatingPanelSize;
+  maxSize: FloatingPanelSize;
+  resizeFrom: {
+    readonly size: FloatingPanelSize;
+    readonly position: {
+      readonly x: number;
+      readonly y: number;
+    };
+  } | null;
+  axis: {
+    readonly x: -1 | 0 | 1;
+    readonly y: -1 | 0 | 1;
+  } | null;
+  draggable: boolean;
+  resizable: boolean;
+  closeOnEscape: boolean;
+  boundary: {
+    readonly w: number;
+    readonly h: number;
+  };
+  label: string;
+  disabled: boolean;
+}
+export interface FloatingPanelArgs {
+  size?: string;
+  minSize?: string;
+  maxSize?: string;
+  stage?: string;
+  draggable?: boolean;
+  resizable?: boolean;
+  closeOnEscape?: boolean;
+  defaultCloseOnEscape?: boolean;
+  label?: string;
+  disabled?: boolean;
+  defaultLabel?: string;
+  defaultDisabled?: boolean;
+}
+export declare function sizeOf(raw: unknown): FloatingPanelSize | null;
+export declare function initial(args: FloatingPanelArgs | undefined, authored: (name: string) => boolean): FloatingPanelContext;
+export declare function startOpen(raw: Record<string, unknown>, authored: (name: string) => boolean): boolean;
+export declare function clampPosition(ctx: FloatingPanelContext, x: number, y: number): {
+  readonly x: number;
+  readonly y: number;
+};
+//# sourceMappingURL=floating-panel.state.d.ts.map