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

package/dist/steps/examples/onboarding.html

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Profile", "Settings", "Sync", "Complete"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Onboarding</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="flex flex-col"><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span><span class="text-xs text-text-muted" show={row === 0}>Personal details</span><span class="text-xs text-text-muted" show={row === 1}>Account prefs</span><span class="text-xs text-text-muted" show={row === 2}>Sync data</span><span class="text-xs text-text-muted" show={row === 3}>All done</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 flex-1 border-t-2 border-solid", { "border-border": machine.getItemState(row).completed === false, "border-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+</div>

package/dist/steps/examples/progress.html

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Build", "Test", "Rollout", "Verify"],
+ step: 0,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <ol class="row-list items-start gap-4" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+
+ <div
+  class="mt-3 h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+  {...machine.getProgressProps()}
+ >
+  <div
+   class="h-full rounded-full bg-primary transition-all duration-fast ease-decelerate"
+   {...machine.getProgressFillProps()}></div>
+ </div>
+
+ <div
+  class="mt-3 text-center text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</div>
+
+ <div class="mt-3 flex items-center justify-center gap-2">
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}>Prev step</button>
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getNextTriggerProps()}>Next step</button>
+ </div>
+</div>

package/dist/steps/examples/segmented.html

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Build", "Test", "Rollout", "Verify"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <div class="flex items-center gap-4">
+  <button
+   class="secondary icon s-sm p-2 transition-colors hover:bg-surface disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}><span class="i-lucide-chevron-left"></span></button>
+  <ol class="row-list flex-1 items-start gap-1" {...machine.getListProps()}>
+   <template for={machine.getItems()} as={row} key={row}>
+    <li class="relative flex min-w-0 items-center not-last:flex-1"
+     {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+   </template>
+  </ol>
+  <button
+   class="secondary icon s-sm p-2 transition-colors hover:bg-surface disabled:opacity-50"
+   {...machine.getNextTriggerProps()}><span class="i-lucide-chevron-right"></span></button>
+ </div>
+</div>

package/dist/steps/examples/vertical.html

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Profile", "Settings", "Sync", "Complete"],
+ step: 1,
+ orientation: "vertical",
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Onboarding</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <ol class="flow-list flex flex-col items-stretch gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 flex-col items-start"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).completed, "border-primary bg-surface text-primary": machine.getItemState(row).current }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 0}><span class="i-lucide-user text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 1}><span class="i-lucide-settings text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 2}><span class="i-lucide-refresh-cw text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 3}><span class="i-lucide-check text-sm"></span></span></span><span class="flex flex-col"><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span><span class="text-xs text-text-muted" show={row === 0}>Personal details</span><span class="text-xs text-text-muted" show={row === 1}>Account prefs</span><span class="text-xs text-text-muted" show={row === 2}>Sync data</span><span class="text-xs text-text-muted" show={row === 3}>All done</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["ml-4 my-1 h-6 w-1 rounded-full", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+
+ <div
+  class="mt-3 h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+  {...machine.getProgressProps()}
+ >
+  <div
+   class="h-full rounded-full bg-primary transition-all duration-fast ease-decelerate"
+   {...machine.getProgressFillProps()}></div>
+ </div>
+
+ <div class="mt-3" {...machine.getContentProps(machine.value)}>
+  <p
+   class="rounded-md border border-solid border-border bg-surface-raised p-3 text-sm text-text">{machine.getItemTitle(machine.value)}</p>
+ </div>
+
+ <div class="mt-3 flex items-center gap-2">
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}
+  >Back</button>
+  <button
+   class="s-sm disabled:opacity-50"
+   {...machine.getNextTriggerProps()}
+  >Next</button>
+ </div>
+</div>

package/dist/steps/examples/verticallabels.html

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Step One", "Step Two", "Step Three", "Step Four"],
+ step: 1,
+ orientation: "vertical",
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <ol class="flow-list flex flex-col gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 flex-col items-start"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["ml-4 my-1 h-5 w-1 rounded-full", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+</div>

package/dist/steps/examples/verticalnavigation.html

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Build", "Test", "Rollout", "Verify"],
+ step: 0,
+ orientation: "vertical",
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <ol class="flow-list flex flex-col gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 flex-col items-start"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["ml-4 my-1 h-5 w-1 rounded-full", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+
+ <div class="mt-4 flex items-center gap-2">
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}>Prev step</button>
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getNextTriggerProps()}>Next step</button>
+ </div>
+</div>

package/dist/steps/steps.events.d.ts

@@ -0,0 +1,27 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface StepsEvents {
+  "STEP.SET": {
+    value: number;
+    skippable?: unknown;
+    valid?: unknown;
+  };
+  "STEP.NEXT": {
+    skippable?: unknown;
+    valid?: unknown;
+  };
+  "STEP.PREV": {};
+  "STEP.RESET": {};
+  "SET_COUNT": {
+    count: number;
+  };
+}
+export type StepsEvent = EventUnion<StepsEvents>;
+export type StepsStepChange = {
+  readonly step: number;
+};
+export type StepsInvalid = {
+  readonly step: number;
+  action: "next" | "set";
+  targetStep: number;
+};
+//# sourceMappingURL=steps.events.d.ts.map

package/dist/steps/steps.events.js

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

package/dist/steps/steps.machine.d.ts

@@ -0,0 +1,6 @@
+import { StepsArgs, StepsContext, StepsItemState, StepsState, hasNextStep, hasPrevStep, isCompleted, itemState, percent } from "./steps.state.js";
+import { StepsEvents, StepsInvalid, StepsStepChange } from "./steps.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function steps(args?: StepsArgs, authored?: (name: string) => boolean): Machine<StepsContext, StepsEvents, StepsState>;
+export { type StepsInvalid, type StepsItemState, type StepsStepChange, hasNextStep, hasPrevStep, isCompleted, itemState, percent };
+//# sourceMappingURL=steps.machine.d.ts.map

package/dist/steps/steps.machine.js

@@ -0,0 +1,36 @@
+import { hasNextStep, hasPrevStep, initial, isCompleted, itemState, percent } from "./steps.state.js";
+import { applyNextStep, applySetStep, canNextStep, canSetStep, prevStep, recordInvalidNext, recordInvalidSet, resetStep, setCount } from "./steps.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/steps/steps.machine.ts
+/** Steps machine: one idle state with guarded transitions. */
+function steps(args = {}, authored = () => false) {
+	return createMachine({
+		id: "steps",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			count: {},
+			titles: {},
+			orientation: {},
+			linear: {},
+			isStepValid: {},
+			isStepSkippable: {}
+		},
+		on: { SET_COUNT: { assign: setCount } },
+		states: { idle: { on: {
+			"STEP.SET": [{
+				cond: canSetStep,
+				assign: applySetStep
+			}, { assign: recordInvalidSet }],
+			"STEP.NEXT": [{
+				cond: canNextStep,
+				assign: applyNextStep
+			}, { assign: recordInvalidNext }],
+			"STEP.PREV": { assign: prevStep },
+			"STEP.RESET": { assign: resetStep }
+		} } }
+	});
+}
+export { hasNextStep, hasPrevStep, isCompleted, itemState, percent, steps };
+
+//# sourceMappingURL=steps.machine.js.map

package/dist/steps/steps.presentation.d.ts

@@ -0,0 +1,177 @@
+import { StepsArgs, StepsContext, StepsItemState, StepsState } from "./steps.state.js";
+import { StepsEvents } from "./steps.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+export type StepsComplete = {
+  readonly step: number;
+};
+type ScopeLike = ViewFor<StepsContext, StepsEvents, StepsState>;
+type SlotLike<R> = SlotViewFor<R, StepsContext, StepsEvents, StepsState>;
+export declare const def: {
+  name: string;
+  machine: (args: StepsArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<StepsContext, StepsEvents, "idle">;
+  start: "idle";
+  parts: {
+    root: {
+      attrs: () => {};
+    };
+    list: {
+      attrs: (scope: ScopeLike) => {
+        role: string;
+      };
+    };
+    nextTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    prevTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    progress: {
+      attrs: (scope: ScopeLike) => {
+        role: string;
+      };
+    };
+    progressFill: {
+      attrs: (scope: ScopeLike) => {
+        style: {
+          width: string;
+        };
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: StepsContext) => readonly number[];
+      attrs: (scope: SlotLike<number>) => {
+        "data-state": string;
+      };
+    };
+    trigger: {
+      indexes: (context: StepsContext) => readonly number[];
+      attrs: (scope: SlotLike<number>) => {
+        onClick: (event: MouseEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        role: string;
+        type: string;
+        tabindex: string;
+        "data-state": string;
+      };
+    };
+    content: {
+      indexes: (context: StepsContext) => readonly number[];
+      attrs: (scope: SlotLike<number>) => {
+        id: string;
+        role: string;
+        tabindex: string;
+        hidden: boolean | undefined;
+      };
+    };
+    indicator: {
+      indexes: (context: StepsContext) => readonly number[];
+      attrs: (scope: SlotLike<number>) => {
+        "data-state": string;
+      };
+    };
+    separator: {
+      indexes: (context: StepsContext) => readonly number[];
+      attrs: (scope: SlotLike<number>) => {
+        "data-state": string;
+      };
+    };
+  };
+  commands: {
+    goToNextStep: {
+      event: () => {
+        type: "STEP.NEXT";
+      };
+    };
+    goToPrevStep: {
+      event: () => {
+        type: "STEP.PREV";
+      };
+    };
+    resetStep: {
+      event: () => {
+        type: "STEP.RESET";
+      };
+    };
+    setStep: {
+      event: ([value]: [value: number]) => {
+        type: "STEP.SET";
+        value: number;
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: StepsContext) => number;
+    };
+    count: {
+      read: (context: StepsContext) => number;
+    };
+    percent: {
+      read: (context: StepsContext) => number;
+    };
+    hasNextStep: {
+      read: (context: StepsContext) => boolean;
+    };
+    hasPrevStep: {
+      read: (context: StepsContext) => boolean;
+    };
+    completed: {
+      read: (context: StepsContext) => boolean;
+    };
+  };
+  methods: {
+    getItems: {
+      call: (context: StepsContext) => readonly number[];
+    };
+    getItemTitle: {
+      call: (context: StepsContext, _state: "idle", [index]: [index: number]) => string;
+    };
+    getItemState: {
+      call: (context: StepsContext, _state: "idle", [index]: [index: number]) => StepsItemState;
+    };
+  };
+  events: {
+    "step-change": {
+      prop: string;
+      watch: (context: StepsContext) => number[];
+      detail: (watched: readonly [number]) => {
+        step: number;
+      };
+    };
+    "step-complete": {
+      prop: string;
+      watch: (context: StepsContext) => (number | boolean)[];
+      detail: (watched: readonly [boolean, number]) => {
+        step: number;
+      };
+    };
+    "step-invalid": {
+      prop: string;
+      watch: (context: StepsContext) => number[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: StepsContext | undefined) => {
+        step: number;
+        action: string;
+        targetStep: number;
+      };
+    };
+  };
+};
+export type StepsApi = ApiOf<typeof def>;
+export declare const steps: import("@spinjs/runtime").DefinedComponent<StepsApi, StepsArgs>;
+export type { StepsArgs, StepsState };
+//# sourceMappingURL=steps.presentation.d.ts.map