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

package/dist/tree-view/tree-view.machine.js

@@ -0,0 +1,86 @@
+import { initial, nodesOf } from "./tree-view.state.js";
+import { branchCollapse, branchExpand, checkedClear, checkedSet, checkedToggle, expandOnClickGuard, expandedClear, expandedSet, extendSelectionToNode, isMultiToggle, isRangeExtend, loadDone, loadStart, nodeDeselect, nodeFocus, nodeRename, renameCancel, renameSubmit, selectNode, selectedClear, selectedSet, toggleBranch, toggleNodeSelection } from "./tree-view.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/tree-view/tree-view.machine.ts
+function treeView(args = {}, authored = () => true) {
+	return createMachine({
+		id: "tree-view",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			nodes: { parse: nodesOf },
+			expandedValue: { event: "EXPANDED.SET" },
+			selectedValue: { event: "SELECTED.SET" },
+			checkedValue: { event: "CHECKED.SET" },
+			selectionMode: {},
+			expandOnClick: {},
+			rename: {},
+			typeaheadEnabled: {},
+			loadChildren: {}
+		},
+		on: {
+			"EXPANDED.SET": { assign: expandedSet },
+			"EXPANDED.CLEAR": { assign: expandedClear },
+			"SELECTED.SET": { assign: selectedSet },
+			"SELECTED.CLEAR": { assign: selectedClear },
+			"CHECKED.SET": { assign: checkedSet },
+			"CHECKED.CLEAR": { assign: checkedClear },
+			"CHECKED.TOGGLE": { assign: checkedToggle },
+			"NODE.FOCUS": { assign: nodeFocus },
+			"BRANCH.TOGGLE": { assign: toggleBranch },
+			"BRANCH.EXPAND": { assign: branchExpand },
+			"BRANCH.COLLAPSE": { assign: branchCollapse },
+			"NODE.LOAD_START": { assign: loadStart },
+			"NODE.LOAD_DONE": { assign: loadDone }
+		},
+		states: {
+			idle: { on: {
+				"NODE.SELECT": { assign: selectNode },
+				"NODE.DESELECT": { assign: nodeDeselect },
+				"NODE.CLICK": [
+					{
+						cond: isMultiToggle,
+						assign: toggleNodeSelection
+					},
+					{
+						cond: isRangeExtend,
+						assign: extendSelectionToNode
+					},
+					{ assign: selectNode }
+				],
+				"BRANCH_NODE.CLICK": [
+					{
+						cond: isMultiToggle,
+						assign: toggleNodeSelection
+					},
+					{
+						cond: isRangeExtend,
+						assign: extendSelectionToNode
+					},
+					{
+						cond: expandOnClickGuard,
+						assign: [selectNode, toggleBranch]
+					},
+					{ assign: selectNode }
+				],
+				"NODE.RENAME": {
+					target: "renaming",
+					assign: nodeRename
+				}
+			} },
+			renaming: { on: {
+				"RENAME.SUBMIT": {
+					target: "idle",
+					assign: renameSubmit
+				},
+				"RENAME.CANCEL": {
+					target: "idle",
+					assign: renameCancel
+				}
+			} }
+		}
+	});
+}
+export { nodesOf, treeView };
+
+//# sourceMappingURL=tree-view.machine.js.map

package/dist/tree-view/tree-view.presentation.d.ts

@@ -0,0 +1,254 @@
+import { TreeArgs, TreeContext, TreeNodeShape, TreeState } from "./tree-view.state.js";
+import { TreeEvents } from "./tree-view.events.js";
+import { ApiOf, SlotViewFor } from "@spinjs/runtime";
+/**
+ * Tree-view definition: the DOM contract as data. This file maps props to
+ * channels, parts to attribute bags, commands to sends.
+ *
+ * Flattening and navigation live here, not in the machine: the visible rows
+ * are derived from the tree plus `expandedValue`.
+ */
+export interface TreeNode {
+  readonly value: string;
+  readonly label: string;
+  readonly children?: readonly TreeNode[] | undefined;
+}
+export interface VisibleRow {
+  readonly node: TreeNode;
+  readonly depth: number;
+  readonly indexPath: number[];
+}
+export interface TreeItemState {
+  readonly expanded: boolean;
+  readonly selected: boolean;
+  readonly focused: boolean;
+  readonly checked: boolean;
+  readonly loading: boolean;
+  readonly branch: boolean;
+  readonly renaming: boolean;
+}
+type SlotLike<R> = SlotViewFor<R, TreeContext, TreeEvents, TreeState>;
+export declare const def: {
+  name: string;
+  machine: (args: TreeArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TreeContext, TreeEvents, TreeState>;
+  start: "idle";
+  settled: ({ before, after, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: TreeContext;
+      readonly state: TreeState;
+    };
+    readonly after: {
+      readonly context: TreeContext;
+      readonly state: TreeState;
+    };
+    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;
+  parts: {
+    root: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, TreeContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<TreeEvents>, TreeState>) => {
+        role: string;
+        tabindex: number;
+      };
+    };
+    tree: {
+      attrs: () => {
+        role: string;
+      };
+    };
+    label: {};
+    valueText: {};
+  };
+  slots: {
+    item: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        "data-path": string;
+        "data-checkable": string | undefined;
+        role: string;
+      };
+    };
+    branchControl: {
+      id: string;
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        onClick: (event: MouseEvent) => void;
+        onDblclick: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        onFocus: () => void;
+        style: {
+          width: string;
+          marginInlineStart: string;
+        };
+        id: string;
+        type: string;
+        tabindex: number;
+      };
+    };
+    branchIndicator: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        "data-branch": string | undefined;
+      };
+    };
+    itemIcon: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        "data-kind": "leaf" | "branch-open" | "branch-closed";
+      };
+    };
+    rail: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        hidden: boolean;
+        style: {
+          left: string;
+        };
+      };
+    };
+    branchText: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: () => {};
+    };
+    branchContent: {
+      id: string;
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        role: string;
+        hidden: boolean;
+      };
+    };
+    checkbox: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        "data-checked": string | undefined;
+        "data-mode": "multiple" | "single";
+        hidden: boolean;
+        onClick: (event: MouseEvent) => void;
+        role: string;
+        tabindex: number;
+      };
+    };
+    loading: {
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        hidden: boolean;
+      };
+    };
+    renameInput: {
+      id: string;
+      indexes: (context: TreeContext) => readonly VisibleRow[];
+      attrs: (scope: SlotLike<VisibleRow>) => {
+        type: string;
+        value: string;
+        hidden: boolean;
+        "aria-label": string;
+        onKeydown: (event: KeyboardEvent) => void;
+        onBlur: (event: FocusEvent) => void;
+      };
+    };
+  };
+  commands: {
+    startRenaming: {
+      event: ([value]: [value: string]) => {
+        type: "NODE.RENAME";
+        value: string;
+      };
+    };
+  };
+  readers: {
+    focusedValue: {
+      read: (context: TreeContext) => string | null;
+    };
+    expandedValue: {
+      read: (context: TreeContext) => string[];
+    };
+    selectedValue: {
+      read: (context: TreeContext) => string[];
+    };
+    checkedValue: {
+      read: (context: TreeContext) => string[];
+    };
+    renamingValue: {
+      read: (context: TreeContext) => string | null;
+    };
+    loadingStatus: {
+      read: (context: TreeContext) => {
+        [x: string]: "loading" | "error" | "loaded";
+      };
+    };
+    nodes: {
+      read: (context: TreeContext) => TreeNodeShape[];
+    };
+  };
+  methods: {
+    getVisibleRows: {
+      call: (context: TreeContext) => readonly VisibleRow[];
+    };
+    isBranch: {
+      call: (context: TreeContext, _state: TreeState, [row]: [row: VisibleRow]) => boolean;
+    };
+    getItemState: {
+      call: (context: TreeContext, _state: TreeState, [row]: [row: VisibleRow]) => {
+        expanded: boolean;
+        selected: boolean;
+        focused: boolean;
+        checked: boolean;
+        loading: boolean;
+        branch: boolean;
+        renaming: boolean;
+      };
+    };
+  };
+  events: {
+    "expanded-change": {
+      prop: string;
+      watch: (context: TreeContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        expandedValue: string[];
+      };
+    };
+    "selection-change": {
+      prop: string;
+      watch: (context: TreeContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        selectedValue: string[];
+      };
+    };
+    "focus-change": {
+      prop: string;
+      watch: (context: TreeContext) => (string | null)[];
+      detail: (watched: readonly unknown[]) => {
+        focusedValue: string | null;
+      };
+    };
+    "checked-change": {
+      prop: string;
+      watch: (context: TreeContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        checkedValue: string[];
+      };
+    };
+    "load-complete": {
+      prop: string;
+      watch: (context: TreeContext) => Record<string, "loading" | "error" | "loaded">[];
+      detail: () => {
+        value: string;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>) => {
+        value: string;
+      } | null;
+    };
+  };
+};
+export type TreeApi = ApiOf<typeof def>;
+export declare const treeView: import("@spinjs/runtime").DefinedComponent<TreeApi, TreeArgs>;
+export {};
+//# sourceMappingURL=tree-view.presentation.d.ts.map