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

package/dist/tags-input/tags.machine.js

@@ -0,0 +1,311 @@
+import { addFromInput, caretAtStart, clampIndex, initial, sameTags, stringsOf, uniq, withSelectLog } from "./tags.state.js";
+import { addOnPaste, addTagFromPaste, beginEdit, canInsert, canLeaveInput, caretNotAtStart, clearEditAll, clearHighlight, clearInputValue, clearOnBlur, deleteHighlighted, deleteTag, finishEdit, hasHighlighted, highlightAtIndex, highlightLast, highlightPrev, insertOnBlur, setInputValue } from "./tags.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/tags-input/tags.machine.ts
+/**
+* Tags-input machine: four states, one flat config.
+*/
+const config = {
+	id: "tags-input",
+	initial: "idle",
+	context: {
+		value: [],
+		inputValue: "",
+		highlightedIndex: null,
+		editedValue: "",
+		editedIndex: null,
+		log: null,
+		logPrev: null,
+		refusal: null,
+		max: Infinity,
+		allowOverflow: false,
+		allowDuplicates: false,
+		editable: true,
+		addOnPaste: false,
+		addOnBlur: false,
+		clearOnBlur: false,
+		delimiter: ",",
+		sanitizeValue: (value) => value.trim(),
+		validate: () => true,
+		initialValue: [],
+		dir: "ltr",
+		disabled: false,
+		readOnly: false,
+		invalid: void 0,
+		required: false,
+		name: void 0,
+		form: void 0,
+		maxLength: null,
+		placeholder: "",
+		translations: void 0
+	},
+	on: {
+		DOUBLE_CLICK_TAG: [{
+			cond: (ctx) => ctx.editable,
+			target: "editing:tag",
+			assign: beginEdit
+		}],
+		POINTER_DOWN_TAG: {
+			target: "navigating:tag",
+			assign: (ctx, e) => withSelectLog(ctx, clampIndex(e.index, ctx.value.length))
+		},
+		CLICK_DELETE_TAG: {
+			target: "focused:input",
+			assign: [deleteTag, clearHighlight]
+		},
+		SET_INPUT_VALUE: { assign: setInputValue },
+		SET_VALUE: { assign: (_ctx, e) => ({ value: [...e.value] }) },
+		CLEAR_TAG: { assign: deleteTag },
+		SET_VALUE_AT_INDEX: { assign: (ctx, e) => {
+			if (e.value.length === 0) return {};
+			if (e.index < 0 || e.index >= ctx.value.length) return {};
+			const hasDuplicate = ctx.value.some((item, i) => i !== e.index && item === e.value);
+			if (!ctx.allowDuplicates && hasDuplicate) return {};
+			if (ctx.value[e.index] === e.value) return {};
+			const value = [...ctx.value];
+			value[e.index] = e.value;
+			return {
+				value,
+				log: {
+					type: "update",
+					value: e.value
+				},
+				logPrev: ctx.log
+			};
+		} },
+		CLEAR_VALUE: { assign: [(ctx) => ({
+			value: [],
+			log: { type: "clear" },
+			logPrev: ctx.log
+		}), clearInputValue] },
+		ADD_TAG: { assign: (ctx, e) => {
+			const raw = e.type === "ADD_TAG" && typeof e.value === "string" ? e.value : ctx.inputValue;
+			const inputValue = ctx.sanitizeValue(raw);
+			if (!ctx.validate({
+				inputValue,
+				value: ctx.value
+			})) return { refusal: "invalidTag" };
+			return {
+				value: ctx.allowDuplicates ? [...ctx.value, inputValue] : uniq([...ctx.value, inputValue]),
+				log: {
+					type: "add",
+					value: inputValue
+				},
+				logPrev: ctx.log
+			};
+		} },
+		EXTERNAL_BLUR: [{
+			cond: insertOnBlur,
+			assign: addFromInput
+		}, {
+			cond: clearOnBlur,
+			assign: clearInputValue
+		}]
+	},
+	states: {
+		idle: { on: {
+			FOCUS: {
+				target: "focused:input",
+				assign: clearHighlight
+			},
+			POINTER_DOWN: [{
+				cond: (ctx) => ctx.highlightedIndex === null,
+				target: "focused:input",
+				assign: clearHighlight
+			}]
+		} },
+		"focused:input": { on: {
+			TYPE: { assign: setInputValue },
+			BLUR: [
+				{
+					cond: insertOnBlur,
+					target: "idle",
+					assign: addFromInput
+				},
+				{
+					cond: (ctx) => ctx.addOnBlur,
+					target: "idle"
+				},
+				{
+					cond: clearOnBlur,
+					target: "idle",
+					assign: clearInputValue
+				},
+				{ target: "idle" }
+			],
+			ENTER: [{
+				cond: canInsert,
+				assign: addFromInput
+			}],
+			DELIMITER_KEY: [{
+				cond: canInsert,
+				assign: addFromInput
+			}],
+			ARROW_LEFT: [{
+				cond: canLeaveInput,
+				target: "navigating:tag",
+				assign: highlightLast
+			}],
+			BACKSPACE: [{
+				cond: canLeaveInput,
+				target: "navigating:tag",
+				assign: highlightLast
+			}],
+			DELETE: [{
+				cond: hasHighlighted,
+				assign: [deleteHighlighted, highlightAtIndex]
+			}],
+			PASTE: [{
+				cond: addOnPaste,
+				assign: [setInputValue, addTagFromPaste]
+			}, { assign: setInputValue }]
+		} },
+		"navigating:tag": { on: {
+			ARROW_RIGHT: [{
+				cond: (ctx, event) => ctx.value.length > 0 && caretAtStart(event) && ctx.highlightedIndex !== ctx.value.length - 1,
+				assign: (ctx) => {
+					const at = ctx.highlightedIndex;
+					if (at === null) return {};
+					return withSelectLog(ctx, at + 1 < ctx.value.length ? at + 1 : null);
+				}
+			}, {
+				target: "focused:input",
+				assign: clearHighlight
+			}],
+			ARROW_LEFT: [{
+				cond: caretNotAtStart,
+				target: "focused:input",
+				assign: clearHighlight
+			}, { assign: highlightPrev }],
+			BLUR: {
+				target: "idle",
+				assign: clearHighlight
+			},
+			ENTER: [{
+				cond: (ctx) => ctx.editable && ctx.highlightedIndex !== null,
+				target: "editing:tag",
+				assign: beginEdit
+			}],
+			ARROW_DOWN: {
+				target: "focused:input",
+				assign: clearHighlight
+			},
+			ESCAPE: {
+				target: "focused:input",
+				assign: clearHighlight
+			},
+			TYPE: {
+				target: "focused:input",
+				assign: [setInputValue, clearHighlight]
+			},
+			BACKSPACE: [
+				{
+					cond: caretNotAtStart,
+					target: "focused:input",
+					assign: clearHighlight
+				},
+				{
+					cond: (ctx) => ctx.highlightedIndex === 0,
+					assign: [deleteHighlighted, (ctx) => withSelectLog(ctx, ctx.value.length > 0 ? 0 : null)]
+				},
+				{
+					cond: hasHighlighted,
+					assign: [deleteHighlighted, highlightPrev]
+				},
+				{ assign: highlightLast }
+			],
+			DELETE: [{
+				cond: caretNotAtStart,
+				target: "focused:input",
+				assign: clearHighlight
+			}, {
+				target: "focused:input",
+				assign: [deleteHighlighted, highlightAtIndex]
+			}],
+			PASTE: [{
+				cond: addOnPaste,
+				target: "focused:input",
+				assign: [
+					setInputValue,
+					clearHighlight,
+					addTagFromPaste
+				]
+			}, {
+				target: "focused:input",
+				assign: [setInputValue, clearHighlight]
+			}]
+		} },
+		"editing:tag": { on: {
+			TAG_INPUT_TYPE: { assign: (_ctx, e) => e.type === "TAG_INPUT_TYPE" ? { editedValue: e.value } : {} },
+			TAG_INPUT_ESCAPE: {
+				target: "navigating:tag",
+				assign: [() => ({ editedValue: "" }), finishEdit]
+			},
+			TAG_INPUT_BLUR: [{
+				cond: (_ctx, event) => event.type === "TAG_INPUT_BLUR" && event.relatedToInput === true,
+				target: "navigating:tag",
+				assign: clearEditAll
+			}, {
+				target: "idle",
+				assign: clearEditAll
+			}],
+			TAG_INPUT_ENTER: [{
+				cond: (ctx) => ctx.sanitizeValue(ctx.editedValue).length === 0,
+				target: "navigating:tag",
+				assign: [deleteHighlighted, finishEdit]
+			}, {
+				target: "navigating:tag",
+				assign: [(ctx) => {
+					const index = ctx.editedIndex;
+					if (index === null) return {};
+					const editedValue = ctx.editedValue;
+					const hasDuplicate = ctx.value.some((item, i) => i !== index && item === editedValue);
+					if (!ctx.allowDuplicates && hasDuplicate) return {};
+					if (ctx.value[index] === editedValue) return {};
+					const value = [...ctx.value];
+					value[index] = editedValue;
+					return {
+						value,
+						log: {
+							type: "update",
+							value: editedValue
+						},
+						logPrev: ctx.log
+					};
+				}, finishEdit]
+			}]
+		} }
+	}
+};
+function tags(args = {}, authored = () => false) {
+	return createMachine({
+		...config,
+		context: {
+			...config.context,
+			...initial(args, authored)
+		},
+		fields: {
+			value: { parse: stringsOf },
+			inputValue: {},
+			max: {},
+			allowOverflow: {},
+			allowDuplicates: {},
+			editable: {},
+			addOnPaste: {},
+			delimiter: {},
+			dir: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			required: {},
+			name: {},
+			form: {},
+			maxLength: {},
+			placeholder: {},
+			translations: {}
+		}
+	});
+}
+export { initial, sameTags, stringsOf, tags };
+
+//# sourceMappingURL=tags.machine.js.map

package/dist/tags-input/tags.presentation.d.ts

@@ -0,0 +1,376 @@
+import { TagsEvents, TagsHighlightChange, TagsInputValueChange, TagsValueChange, TagsValueInvalid } from "./tags.events.js";
+import { TagsArgs, TagsContext, TagsState } from "./tags.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+export interface TagsTranslations {
+  readonly clearTriggerLabel: string;
+  readonly deleteTagTriggerLabel: (value: string) => string;
+  readonly tagAdded: (value: string) => string;
+  readonly tagEdited: (value: string) => string;
+  readonly tagUpdated: (value: string) => string;
+  readonly tagDeleted: (value: string) => string;
+  readonly tagSelected: (value: string) => string;
+  readonly tagsPasted: (values: readonly string[]) => string;
+  readonly noTagsSelected: string;
+}
+export interface TagsCommands {
+  setValue(value: readonly string[]): void;
+  addValue(value: string): void;
+  setValueAtIndex(index: number, value: string): void;
+  clearValue(id?: string | number): void;
+  setInputValue(value: string): void;
+  clearInputValue(): void;
+  focus(): void;
+}
+export interface TagsRow {
+  readonly value: string;
+  readonly occurrence: number;
+}
+export interface TagsItemState {
+  readonly id: string;
+  readonly index: number;
+  readonly editing: boolean;
+  readonly highlighted: boolean;
+  readonly disabled: boolean;
+}
+type ScopeLike = ViewFor<TagsContext, TagsEvents, TagsState>;
+type SlotLike<R> = SlotViewFor<R, TagsContext, TagsEvents, TagsState>;
+/** The component's public state: the names the markup may key on. */
+export declare const def: {
+  name: string;
+  machine: (args: TagsArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TagsContext, TagsEvents, TagsState>;
+  start: (raw: Record<string, unknown>) => "idle" | "focused:input";
+  reconcile: ({ context, parsed, authored }: {
+    readonly context: TagsContext;
+    readonly state: TagsState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  mounted: ({ root, id }: {
+    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;
+  }) => void;
+  settled: ({ event, before, after, root, id, focus }: {
+    readonly event: {
+      readonly type: string;
+    } & Record<string, unknown>;
+    readonly before: {
+      readonly context: TagsContext;
+      readonly state: TagsState;
+    };
+    readonly after: {
+      readonly context: TagsContext;
+      readonly state: TagsState;
+    };
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+  }) => void;
+  parts: {
+    root: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+        "data-focus": string | undefined;
+        "data-invalid": string | undefined;
+        "data-empty": string | undefined;
+        onPointerDown: () => void;
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+        for: string;
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+        "data-invalid": string | undefined;
+        "data-required": string | undefined;
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+        tabIndex: number | undefined;
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+        "data-invalid": string | undefined;
+        "data-focus": string | undefined;
+      };
+    };
+    input: {
+      attrs: (scope: ScopeLike) => {
+        "data-invalid": string | undefined;
+        "data-readonly": string | undefined;
+        "data-empty": string | undefined;
+        placeholder: string | undefined;
+        value: string;
+        onInput: (event: InputEvent) => void;
+        onFocus: () => void;
+        onFocusOut: (event: FocusEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        "use:dismissable": {
+          onOutside: (event: PointerEvent) => void;
+        };
+        dir: "ltr" | "rtl";
+        type: string;
+        autoComplete: string;
+        autoCorrect: string;
+        autoCapitalize: string;
+        enterKeyHint: string;
+        disabled: boolean;
+        maxLength: number | undefined;
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, TagsContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<TagsEvents>, TagsState>) => {
+        type: string;
+        hidden: boolean;
+        name: string | undefined;
+        form: string | undefined;
+        disabled: boolean;
+        readOnly: boolean;
+        required: boolean;
+        value: string;
+        "use:form-control": {
+          onFormReset: () => void;
+        };
+      };
+    };
+    clearTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        dir: "ltr" | "rtl";
+        disabled: boolean;
+        "data-readonly": string | undefined;
+        "aria-label": string;
+        hidden: boolean;
+        onClick: () => void;
+      };
+    };
+    liveRegion: {
+      id: string;
+      attrs: (_scope: ScopeLike) => {
+        role: string;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: TagsContext) => TagsRow[];
+      attrs: (scope: SlotLike<TagsRow>) => {
+        dir: "ltr" | "rtl";
+        "data-value": string;
+        "data-disabled": string | undefined;
+      };
+    };
+    itemPreview: {
+      id: string;
+      indexes: (context: TagsContext) => readonly TagsRow[];
+      attrs: (scope: SlotLike<TagsRow>) => {
+        id: string;
+        dir: "ltr" | "rtl";
+        hidden: boolean;
+        "data-value": string;
+        "data-disabled": string | undefined;
+        "data-highlighted": string | undefined;
+        onPointerDown: (event: PointerEvent) => void;
+        onDblclick: () => void;
+      };
+    };
+    itemText: {
+      id: string;
+      indexes: (context: TagsContext) => readonly TagsRow[];
+      attrs: (scope: SlotLike<TagsRow>) => {
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+        "data-highlighted": string | undefined;
+      };
+    };
+    itemInput: {
+      id: string;
+      indexes: (context: TagsContext) => readonly TagsRow[];
+      attrs: (scope: SlotLike<TagsRow>) => {
+        id: string;
+        dir: "ltr" | "rtl";
+        type: string;
+        disabled: boolean;
+        "aria-label": string;
+        hidden: boolean;
+        maxLength: number | undefined;
+        tabIndex: number;
+        autoComplete: string;
+        value: string;
+        onInput: (event: InputEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        onBlur: (event: FocusEvent) => void;
+      };
+    };
+    itemDeleteTrigger: {
+      id: string;
+      indexes: (context: TagsContext) => readonly TagsRow[];
+      attrs: (scope: SlotLike<TagsRow>) => {
+        "data-highlighted": string | undefined;
+        "aria-label": string;
+        tabIndex: number;
+        disabled: boolean;
+        onPointerDown: (event: PointerEvent) => void;
+        onClick: (event: MouseEvent) => void;
+        id: string;
+        type: string;
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: ([value]: [value: readonly string[]]) => {
+        type: "SET_VALUE";
+        value: string[];
+      };
+    };
+    addValue: {
+      event: ([value]: [value: string], context: TagsContext, id: (part: string, slot?: unknown) => string) => {
+        type: "ADD_TAG";
+        value: string;
+      };
+    };
+    setValueAtIndex: {
+      event: ([index, value]: [index: number, value: string]) => {
+        type: "SET_VALUE_AT_INDEX";
+        index: number;
+        value: string;
+      };
+    };
+    clearValue: {
+      event: (args: readonly unknown[], context: TagsContext, id: (part: string, slot?: unknown) => string) => {
+        type: "CLEAR_VALUE";
+        index?: undefined;
+      } | {
+        type: "CLEAR_TAG";
+        index: number;
+      };
+    };
+    setInputValue: {
+      event: (args: readonly unknown[]) => {
+        type: "SET_INPUT_VALUE";
+        value: string;
+      };
+    };
+    clearInputValue: {
+      event: () => {
+        type: "SET_INPUT_VALUE";
+        value: string;
+      };
+    };
+    focus: {
+      view: ({ focus }: {
+        readonly args: readonly unknown[];
+        readonly id: (part: string, slot?: unknown) => string;
+        readonly focus: (part: string, slot?: unknown) => void;
+        readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+        readonly root: () => Element;
+      }) => void;
+    };
+  };
+  readers: {
+    value: {
+      read: (context: TagsContext) => string[];
+    };
+    inputValue: {
+      read: (context: TagsContext) => string;
+    };
+    valueAsString: {
+      read: (context: TagsContext) => string;
+    };
+    count: {
+      read: (context: TagsContext) => number;
+    };
+    empty: {
+      read: (context: TagsContext) => boolean;
+    };
+    atMax: {
+      read: (context: TagsContext) => boolean;
+    };
+    highlightedIndex: {
+      read: (context: TagsContext) => number | null;
+    };
+    editing: {
+      read: (_context: TagsContext, state: TagsState) => state is "editing:tag";
+    };
+    editedIndex: {
+      read: (context: TagsContext) => number | null;
+    };
+    focused: {
+      read: (_context: TagsContext, state: TagsState) => state is "focused:input" | "navigating:tag" | "editing:tag";
+    };
+    disabled: {
+      read: (context: TagsContext) => boolean;
+    };
+  };
+  methods: {
+    getTags: {
+      call: (context: TagsContext) => readonly TagsRow[];
+    };
+    getItemState: {
+      call: (context: TagsContext, state: TagsState, [row]: [row: TagsRow], _props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => TagsItemState;
+    };
+    indexOfRow: {
+      call: (context: TagsContext, _state: TagsState, [row]: [row: TagsRow]) => number;
+    };
+    indexOfId: {
+      call: (context: TagsContext, _state: TagsState, [target]: [target: string], _props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => number;
+    };
+    announceLog: {
+      call: (context: TagsContext, _state: TagsState, _args: readonly unknown[], _props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => void;
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: TagsContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        value: string[];
+      };
+    };
+    "input-value-change": {
+      prop: string;
+      watch: (context: TagsContext) => string[];
+      detail: (watched: readonly unknown[]) => {
+        inputValue: string;
+      };
+    };
+    "highlight-change": {
+      prop: string;
+      watch: (context: TagsContext) => (number | null)[];
+      detail: (watched: readonly unknown[]) => {
+        highlightedValue: number | null;
+      };
+    };
+    "value-invalid": {
+      prop: string;
+      watch: () => never[];
+      detail: () => {
+        reason: "invalidTag";
+      };
+      select: (_event: {
+        readonly type: string;
+      } & Record<string, unknown>, before: TagsContext, after: TagsContext) => {
+        reason: string;
+      } | null;
+    };
+  };
+};
+export type TagsApi = ApiOf<typeof def>;
+export declare const tags: import("@spinjs/runtime").DefinedComponent<TagsApi, TagsArgs>;
+export type { TagsHighlightChange, TagsInputValueChange, TagsValueChange, TagsValueInvalid };
+//# sourceMappingURL=tags.presentation.d.ts.map