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

package/dist/slider/examples/ticks.html

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({
+  value: [50],
+  markers: [
+    0,
+    5,
+    10,
+    15,
+    20,
+    25,
+    30,
+    35,
+    40,
+    45,
+    50,
+    55,
+    60,
+    65,
+    70,
+    75,
+    80,
+    85,
+    90,
+    95,
+    100,
+  ],
+});
+</script>
+
+<div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
+  <div class="mb-4 text-sm text-text-muted"
+    {...machine.getValueTextProps()}>{machine.valueText}</div>
+  <div
+    class="relative flex h-4 w-full touch-none items-center select-none"
+    {...machine.getControlProps()}
+  >
+    <div
+      class="relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+      {...machine.getTrackProps()}
+    >
+      <div
+        class="absolute inset-y-0 rounded-full bg-primary"
+        {...machine.getRangeProps()}
+      ></div>
+    </div>
+    <template for={machine.getThumbIndexes()} as={row} key={row}>
+      <span
+        class={["bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface", { "ring-2 ring-border-strong": machine.state === "focus" && machine.focusedIndex === row, "scale-110": machine.state === "dragging" && machine.focusedIndex === row, "opacity-50": machine.disabled }]}
+        {...machine.getThumbProps(row)}
+      ></span>
+      <input {...machine.getHiddenInputProps(row)} />
+    </template>
+  </div>
+  <div class="relative mt-2 h-8" {...machine.getMarkerGroupProps()}>
+    <template for={machine.getMarkers()} as={row} key={row}>
+      <span
+        class="absolute top-0 flex w-0 justify-center pt-4 text-xs text-text-muted"
+        {...machine.getMarkerProps(row)}
+      >
+        <span
+          class={["absolute left-1/2 top-0 ml-0 h-2 w-[1px] bg-border-strong", { "bg-primary": row < (machine.value[0] ?? 0) }]}
+          aria-hidden="true" show={row % 10 === 0}></span>
+        <span
+          class={["absolute left-1/2 top-0 ml-0 h-1 w-[1px] bg-border-strong", { "bg-primary": row < (machine.value[0] ?? 0) }]}
+          aria-hidden="true" show={row % 10 !== 0}></span>
+        <span show={row % 10 === 0}>{row}</span>
+      </span>
+    </template>
+  </div>
+</div>

package/dist/slider/examples/vertical.html

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({ value: [50], orientation: "vertical" });
+</script>
+
+<div class="mx-auto flex w-full max-w-md justify-center"
+  {...machine.getRootProps()}>
+  <div
+    class="relative flex h-[16rem] w-4 touch-none flex-col items-center select-none"
+    {...machine.getControlProps()}
+  >
+    <div
+      class="relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken"
+      {...machine.getTrackProps()}
+    >
+      <div
+        class="absolute inset-x-0 rounded-full bg-primary"
+        {...machine.getRangeProps()}
+      ></div>
+    </div>
+    <template for={machine.getThumbIndexes()} as={row} key={row}>
+      <span
+        class={["absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface", { "ring-2 ring-border-strong": machine.state === "focus" && machine.focusedIndex === row, "scale-110": machine.state === "dragging" && machine.focusedIndex === row, "opacity-50": machine.disabled }]}
+        {...machine.getThumbProps(row)}
+      ></span>
+      <input {...machine.getHiddenInputProps(row)} />
+    </template>
+  </div>
+</div>

package/dist/slider/slider.events.d.ts

@@ -0,0 +1,50 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface SliderEvents {
+  "SET_VALUE": {
+    value: readonly number[];
+    index?: number;
+  };
+  "INCREMENT": {
+    index?: number;
+    step?: number;
+  };
+  "DECREMENT": {
+    index?: number;
+    step?: number;
+  };
+  "POINTER_DOWN": {
+    pointValue: number;
+  };
+  "THUMB_POINTER_DOWN": {
+    index: number;
+  };
+  "POINTER_MOVE": {
+    pointValue: number;
+  };
+  "POINTER_UP": {};
+  "POINTER_CANCEL": {};
+  "FOCUS": {
+    index?: number;
+  };
+  "BLUR": {};
+  "ARROW_INC": {
+    step?: number;
+  };
+  "ARROW_DEC": {
+    step?: number;
+  };
+  "HOME": {};
+  "END": {};
+}
+export type SliderEvent = EventUnion<SliderEvents>;
+export type SliderValueChange = {
+  readonly value: number[];
+};
+export type SliderFocusChange = {
+  readonly focusedIndex: number;
+  readonly value: number[];
+};
+export type SliderValueChangeEnd = {
+  readonly value: number[];
+};
+//# sourceMappingURL=slider.events.d.ts.map

package/dist/slider/slider.events.js

@@ -0,0 +1 @@
+export {};

package/dist/slider/slider.machine.d.ts

@@ -0,0 +1,5 @@
+import { SliderArgs, SliderContext, SliderState } from "./slider.state.js";
+import { SliderEvents } from "./slider.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function slider(args?: SliderArgs, authored?: (name: string) => boolean): Machine<SliderContext, SliderEvents, SliderState>;
+//# sourceMappingURL=slider.machine.d.ts.map

package/dist/slider/slider.machine.js

@@ -0,0 +1,86 @@
+import { initial } from "./slider.state.js";
+import { clearFocusedIndex, decrementThumb, hasIndex, incrementThumb, setAllValues, setClosestThumb, setEndValue, setFocusedIndex, setHomeValue, setIndexedValue, setPointerValue } from "./slider.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+import { isInteractive } from "@spinjs/runtime";
+// src/slider/slider.machine.ts
+/** Slider machine: idle/focus/dragging over three states. */
+function slider(args = {}, authored = () => false) {
+	return createMachine({
+		initial: "idle",
+		context: initial(args, authored),
+		/**
+		* The machine's contract with its hosts: the context fields a host may
+		* write, and the event each write carries. A field with an event is
+		* REPORTED — the machine decides, and the change reaches the host; a
+		* field without one is SILENT.
+		*/
+		fields: {
+			value: { event: "SET_VALUE" },
+			min: {},
+			max: {},
+			step: {},
+			largeStep: {},
+			minStepsBetweenThumbs: {},
+			origin: {},
+			orientation: {},
+			thumbCollisionBehavior: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {}
+		},
+		on: {
+			SET_VALUE: [{
+				cond: hasIndex,
+				assign: setIndexedValue
+			}, { assign: setAllValues }],
+			INCREMENT: { assign: incrementThumb },
+			DECREMENT: { assign: decrementThumb }
+		},
+		states: {
+			idle: { on: {
+				POINTER_DOWN: {
+					target: "dragging",
+					assign: [setClosestThumb, setPointerValue]
+				},
+				FOCUS: {
+					target: "focus",
+					cond: isInteractive,
+					assign: setFocusedIndex
+				},
+				THUMB_POINTER_DOWN: {
+					target: "dragging",
+					assign: setFocusedIndex
+				}
+			} },
+			focus: { on: {
+				POINTER_DOWN: {
+					target: "dragging",
+					assign: [setClosestThumb, setPointerValue]
+				},
+				THUMB_POINTER_DOWN: {
+					target: "dragging",
+					assign: setFocusedIndex
+				},
+				ARROW_DEC: { assign: decrementThumb },
+				ARROW_INC: { assign: incrementThumb },
+				HOME: { assign: setHomeValue },
+				END: { assign: setEndValue },
+				BLUR: {
+					target: "idle",
+					assign: clearFocusedIndex
+				}
+			} },
+			dragging: { on: {
+				POINTER_UP: "focus",
+				POINTER_MOVE: { assign: setPointerValue },
+				POINTER_CANCEL: {
+					target: "idle",
+					assign: clearFocusedIndex
+				}
+			} }
+		}
+	});
+}
+export { slider };
+
+//# sourceMappingURL=slider.machine.js.map

package/dist/slider/slider.presentation.d.ts

@@ -0,0 +1,252 @@
+import { SliderArgs, SliderContext, SliderState, ThumbCollisionBehavior } from "./slider.state.js";
+import { SliderEvents } from "./slider.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+type ScopeLike = ViewFor<SliderContext, SliderEvents, SliderState>;
+type SlotLike<R> = SlotViewFor<R, SliderContext, SliderEvents, SliderState>;
+export declare const def: {
+  name: string;
+  machine: (args: SliderArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<SliderContext, SliderEvents, SliderState>;
+  start: "idle";
+  commitEvents: ("POINTER_UP" | "SET_VALUE" | "HOME" | "END" | "INCREMENT" | "ARROW_INC" | "DECREMENT" | "ARROW_DEC")[];
+  parts: {
+    root: {};
+    label: {
+      attrs: (scope: ScopeLike) => {
+        for: string;
+        style: {
+          userSelect: string;
+        };
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    valueText: {
+      id: string;
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        style: {
+          position: string;
+          touchAction: string;
+        };
+        "use:drag": {
+          enabled: boolean;
+          preventDefault: boolean;
+          stopPropagation: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+      };
+    };
+    track: {
+      attrs: () => {
+        style: {
+          position: string;
+        };
+      };
+    };
+    range: {
+      attrs: (scope: ScopeLike) => {
+        style: {
+          bottom: string;
+          height: string;
+          insetInlineStart?: undefined;
+          width?: undefined;
+        } | {
+          insetInlineStart: string;
+          width: string;
+          bottom?: undefined;
+          height?: undefined;
+        };
+      };
+    };
+    markerGroup: {
+      id: string;
+    };
+  };
+  slots: {
+    thumb: {
+      indexes: (context: SliderContext) => readonly number[];
+      attrs: (scope: SlotLike<number>) => {
+        role: string;
+        tabindex: string | undefined;
+        style: {
+          bottom: string;
+          insetInlineStart?: undefined;
+        } | {
+          insetInlineStart: string;
+          bottom?: undefined;
+        };
+        "use:drag": {
+          enabled: boolean;
+          preventDefault: boolean;
+          stopPropagation: boolean;
+          cancelOnEscape: boolean;
+          onStart: () => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+        onBlur: () => void;
+        onFocus: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        "data-index": string;
+        draggable: string;
+      };
+    };
+    marker: {
+      indexes: (context: SliderContext) => number[];
+      attrs: (scope: SlotLike<number>) => {
+        id: string;
+        "data-value": string;
+        style: {
+          bottom: string;
+          insetInlineStart?: undefined;
+        } | {
+          insetInlineStart: string;
+          bottom?: undefined;
+        };
+      };
+    };
+    hiddenInput: {
+      id: string;
+      stamp: false;
+      indexes: (context: SliderContext) => readonly number[];
+      attrs: (scope: SlotLike<number>, arg?: unknown) => {
+        id: string;
+        name: string | undefined;
+        form: undefined;
+        type: string;
+        hidden: boolean;
+        value: string;
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: ([value]: [value: readonly number[]]) => {
+        type: "SET_VALUE";
+        value: readonly number[];
+      };
+    };
+    setThumbValue: {
+      event: ([index, value]: [index: number, value: number], context: SliderContext) => {
+        type: "SET_VALUE";
+        value: number[];
+        index: number;
+      };
+    };
+    increment: {
+      event: ([index]: [index?: number]) => {
+        type: "INCREMENT";
+        index: number;
+      } | {
+        type: "INCREMENT";
+        index?: undefined;
+      };
+    };
+    decrement: {
+      event: ([index]: [index?: number]) => {
+        type: "DECREMENT";
+        index: number;
+      } | {
+        type: "DECREMENT";
+        index?: undefined;
+      };
+    };
+    focus: {
+      event: () => {
+        type: "FOCUS";
+        index: number;
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: SliderContext) => number[];
+    };
+    markers: {
+      read: (context: SliderContext) => number[];
+    };
+    valueText: {
+      read: (context: SliderContext) => string;
+    };
+    dragging: {
+      read: (_context: SliderContext, state: SliderState) => state is "dragging";
+    };
+    focused: {
+      read: (_context: SliderContext, state: SliderState) => state is "focus";
+    };
+    focusedIndex: {
+      read: (context: SliderContext) => number;
+    };
+    disabled: {
+      read: (context: SliderContext) => boolean;
+    };
+  };
+  methods: {
+    getThumbValue: {
+      call: (context: SliderContext, _state: SliderState, [index]: [index: number]) => number;
+    };
+    getThumbPercent: {
+      call: (context: SliderContext, _state: SliderState, [index]: [index: number]) => number;
+    };
+    getThumbMin: {
+      call: (context: SliderContext, _state: SliderState, [index]: [index: number]) => number;
+    };
+    getThumbMax: {
+      call: (context: SliderContext, _state: SliderState, [index]: [index: number]) => number;
+    };
+    getMarkers: {
+      call: (context: SliderContext) => number[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: SliderContext) => number[];
+      detail: (watched: readonly number[]) => {
+        value: number[];
+      };
+    };
+    "value-change-end": {
+      prop: string;
+      on: "commit";
+      watch: (context: SliderContext) => number[];
+      detail: (watched: readonly number[]) => {
+        value: number[];
+      };
+    };
+    "focus-change": {
+      prop: string;
+      watch: (context: SliderContext) => number[];
+      detail: (watched: readonly [number, ...number[]]) => {
+        focusedIndex: number;
+        value: number[];
+      };
+    };
+  };
+  settled: ({ event, after, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: SliderContext;
+      readonly state: SliderState;
+    };
+    readonly after: {
+      readonly context: SliderContext;
+      readonly state: SliderState;
+    };
+    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;
+};
+export type SliderApi = ApiOf<typeof def>;
+export declare const slider: import("@spinjs/runtime").DefinedComponent<SliderApi, SliderArgs>;
+export type { SliderArgs, SliderState, ThumbCollisionBehavior };
+//# sourceMappingURL=slider.presentation.d.ts.map