@bagelink/vue 1.15.178 → 1.15.182

package/src/form-flow/FlowNode.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/**
+ * FlowNode — a draggable step card on the FlowDesigner canvas.
+ *
+ * Emits low-level pointer intents; all graph mutation lives in FlowDesigner:
+ *   - `move`    : node dragged to a new (x, y)
+ *   - `select`  : node clicked (opens the step's field editor)
+ *   - `startEdge`: the out-handle was grabbed to draw a new edge
+ *   - `endEdge` : pointer released over this node (edge target)
+ *   - `remove`  : delete this step
+ */
+
+import type { FormStep } from './structure'
+import { computed, ref } from 'vue'
+
+export interface Props {
+	step: FormStep
+	selected?: boolean
+	isStart?: boolean
+	fieldCount?: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+	'move': [pos: { x: number, y: number }]
+	'select': []
+	'startEdge': [ev: PointerEvent]
+	'endEdge': []
+	'remove': []
+	'setStart': []
+}>()
+
+const dragging = ref(false)
+let startX = 0
+let startY = 0
+let originX = 0
+let originY = 0
+
+function onPointerDown(ev: PointerEvent) {
+	// Ignore drags that begin on the out-handle or action buttons.
+	if ((ev.target as HTMLElement).closest('.node-handle, .node-actions')) return
+	dragging.value = true
+	startX = ev.clientX
+	startY = ev.clientY
+	originX = props.step.x ?? 0
+	originY = props.step.y ?? 0
+	;(ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId)
+}
+
+function onPointerMove(ev: PointerEvent) {
+	if (!dragging.value) return
+	emit('move', {
+		x: originX + (ev.clientX - startX),
+		y: originY + (ev.clientY - startY),
+	})
+}
+
+function onPointerUp(ev: PointerEvent) {
+	if (dragging.value) {
+		dragging.value = false
+		;(ev.currentTarget as HTMLElement).releasePointerCapture(ev.pointerId)
+	}
+}
+
+const title = computed(() => props.step.title?.trim() || props.step.key)
+const fieldLabel = computed(() => {
+	const n = props.fieldCount ?? Object.keys(props.step.schema?.properties ?? {}).length
+	return `${n} field${n === 1 ? '' : 's'}`
+})
+</script>
+
+<template>
+	<div
+		class="flow-node"
+		:class="{ selected, 'is-start': isStart }"
+		:style="{ left: `${step.x ?? 0}px`, top: `${step.y ?? 0}px` }"
+		@pointerdown="onPointerDown"
+		@pointermove="onPointerMove"
+		@pointerup="onPointerUp"
+		@click.stop="emit('select')"
+		@pointerenter="dragging || emit('endEdge')"
+	>
+		<div class="node-head">
+			<span v-if="isStart" class="node-start-badge" title="Start step">▶</span>
+			<span class="node-title" :title="title">{{ title }}</span>
+			<div class="node-actions">
+				<button
+					v-if="!isStart"
+					type="button"
+					class="node-btn"
+					title="Set as start step"
+					@click.stop="emit('setStart')"
+				>★</button>
+				<button
+					type="button"
+					class="node-btn node-del"
+					title="Delete step"
+					@click.stop="emit('remove')"
+				>×</button>
+			</div>
+		</div>
+
+		<div class="node-body">
+			<span class="node-key">{{ step.key }}</span>
+			<span class="node-fields">{{ fieldLabel }}</span>
+		</div>
+
+		<!-- Out-handle: drag from here to another node to create an edge. -->
+		<div
+			class="node-handle"
+			title="Drag to connect"
+			@pointerdown.stop="emit('startEdge', $event)"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.flow-node {
+	position: absolute;
+	width: 180px;
+	background: white;
+	border: 2px solid #e2e8f0;
+	border-radius: 8px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+	cursor: grab;
+	user-select: none;
+	transition: border-color 0.15s, box-shadow 0.15s;
+}
+.flow-node:active { cursor: grabbing; }
+.flow-node.selected {
+	border-color: var(--primary-color, #007bff);
+	box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
+}
+.flow-node.is-start { border-color: var(--success-color, #28a745); }
+
+.node-head {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 10px;
+	border-bottom: 1px solid #f1f5f9;
+}
+.node-title {
+	flex: 1;
+	font-weight: 600;
+	font-size: 13px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.node-start-badge { color: var(--success-color, #28a745); font-size: 10px; }
+.node-actions { display: flex; gap: 2px; }
+.node-btn {
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	font-size: 13px;
+	line-height: 1;
+	color: #94a3b8;
+	padding: 2px 4px;
+	border-radius: 4px;
+}
+.node-btn:hover { background: #f1f5f9; color: #475569; }
+.node-del:hover { color: #ef4444; }
+
+.node-body {
+	display: flex;
+	justify-content: space-between;
+	padding: 8px 10px;
+	font-size: 11px;
+	color: #64748b;
+}
+.node-key { font-family: ui-monospace, monospace; }
+
+.node-handle {
+	position: absolute;
+	right: -8px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: var(--primary-color, #007bff);
+	border: 2px solid white;
+	cursor: crosshair;
+}
+</style>

package/src/form-flow/FormFlowPlayer.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+/**
+ * FormFlowPlayer — decision-tree multi-step form runtime.
+ *
+ * Renders a `FormStructure` (see ./structure.ts) one step at a time, reusing
+ * FormFlow.vue per node. The client owns navigation:
+ *   - Answers accumulate into a single `formData` object across steps.
+ *   - After validating the current step, the *next* step is resolved by
+ *     first-matching SCIM edge (`resolveNext`). A `null` result means the
+ *     current step is terminal, so the primary button reads "Submit" and
+ *     clicking it emits `complete` with the full accumulated data.
+ *   - A visited-step stack enables Back without re-resolving.
+ *
+ * A single-node structure behaves like a plain single-step form (the primary
+ * button is always "Submit").
+ */
+
+import type { FormStructure } from './structure'
+import type { Slots } from 'vue'
+import { computed, ref, useSlots, watch } from 'vue'
+import { useI18n } from '../i18n'
+import { fromJSONSchema } from './form-flow'
+import FormFlow from './FormFlow.vue'
+import { entryStepKey, resolveNext, stepByKey } from './structure'
+
+export interface Props {
+	structure: FormStructure
+	modelValue?: Record<string, any>
+	components?: Record<string, any>
+	/** Optional async submit handler; awaited before `complete` is emitted. */
+	onComplete?: (data: Record<string, any>) => Promise<void> | void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: Record<string, any>]
+	'stepChange': [stepKey: string]
+	'complete': [data: Record<string, any>]
+}>()
+
+const { $t } = useI18n()
+const slots: Slots = useSlots()
+const slotNames = computed((): string[] => Object.keys(slots))
+
+// Accumulated answers across every visited step.
+const formData = ref<Record<string, any>>({ ...(props.modelValue || {}) })
+
+watch(formData, val => emit('update:modelValue', val), { deep: true })
+watch(() => props.modelValue, (val) => {
+	if (val && val !== formData.value) formData.value = { ...val }
+}, { deep: true })
+
+// Navigation state: the current step key plus the stack of previously visited
+// keys (for Back). Initialised to the structure's entry step.
+const currentKey = ref<string | undefined>(entryStepKey(props.structure))
+const history = ref<string[]>([])
+
+watch(() => props.structure, () => {
+	currentKey.value = entryStepKey(props.structure)
+	history.value = []
+}, { deep: true })
+
+watch(currentKey, (key) => {
+	if (key) emit('stepChange', key)
+}, { immediate: true })
+
+const currentStep = computed(() => stepByKey(props.structure, currentKey.value ?? null))
+
+// Convert the current step's stored JSON Schema into a renderable schema.
+const currentSchema = computed(() => {
+	const step = currentStep.value
+	return step ? fromJSONSchema(step.schema as any) : null
+})
+
+// The *next* step given current answers (reactive: recomputes as fields change).
+// `null` => the current step is terminal, so the primary action is Submit.
+const nextKey = computed<string | null>(() => {
+	if (!currentKey.value) return null
+	return resolveNext(props.structure, currentKey.value, formData.value)
+})
+
+const isTerminal = computed(() => nextKey.value === null)
+const canGoBack = computed(() => history.value.length > 0)
+
+const formRef = ref<{ validate: () => boolean } | null>(null)
+const submitting = ref(false)
+
+/** Validate the visible current step via the underlying FormFlow. */
+function validateStep(): boolean {
+	return formRef.value?.validate() ?? true
+}
+
+async function onPrimary() {
+	if (!validateStep()) return
+
+	if (isTerminal.value) {
+		submitting.value = true
+		try {
+			await props.onComplete?.({ ...formData.value })
+			emit('complete', { ...formData.value })
+		}
+		finally {
+			submitting.value = false
+		}
+		return
+	}
+
+	// Advance to the resolved next step.
+	const target = nextKey.value
+	if (target && currentKey.value) {
+		history.value.push(currentKey.value)
+		currentKey.value = target
+	}
+}
+
+function onBack() {
+	const prev = history.value.pop()
+	if (prev) currentKey.value = prev
+}
+
+// Progress: position in the visited path (best-effort; branches make total
+// step count indeterminate, so we show visited-count rather than a fixed total).
+const stepPosition = computed(() => history.value.length + 1)
+
+defineExpose({ formData, currentKey, nextKey, isTerminal, validateStep })
+</script>
+
+<template>
+	<div class="form-flow-player">
+		<div v-if="currentStep" class="ffp-step">
+			<h2 v-if="currentStep.title" class="ffp-title">
+				{{ currentStep.title }}
+			</h2>
+
+			<slot
+				name="step"
+				:step="currentStep"
+				:form-data="formData"
+				:step-key="currentKey"
+			>
+				<FormFlow
+					v-if="currentSchema"
+					ref="formRef"
+					v-model="formData"
+					:schema="currentSchema"
+					:components="components"
+				>
+					<template v-for="slotName in slotNames" :key="slotName" #[slotName]="slotProps">
+						<slot :name="slotName" v-bind="slotProps" />
+					</template>
+				</FormFlow>
+			</slot>
+		</div>
+
+		<div v-else class="ffp-empty">
+			<slot name="empty">
+				{{ $t?.('multiStep.empty') ?? 'No steps to display.' }}
+			</slot>
+		</div>
+
+		<div class="ffp-nav">
+			<button
+				type="button"
+				class="btn-secondary"
+				:disabled="!canGoBack"
+				@click="onBack"
+			>
+				{{ $t?.('multiStep.previous') ?? 'Back' }}
+			</button>
+
+			<span class="ffp-counter">{{ stepPosition }}</span>
+
+			<button
+				type="button"
+				class="btn-primary"
+				:disabled="submitting"
+				@click="onPrimary"
+			>
+				<slot name="primary-label" :is-terminal="isTerminal">
+					{{ isTerminal
+						? ($t?.('multiStep.complete') ?? 'Submit')
+						: ($t?.('multiStep.next') ?? 'Next') }}
+				</slot>
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.form-flow-player {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.ffp-title {
+	margin: 0 0 1rem 0;
+	font-size: 1.5rem;
+}
+
+.ffp-nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
+}
+
+.ffp-counter {
+	font-size: 0.875rem;
+	color: #666;
+}
+
+button {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 4px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-primary {
+	background: var(--primary-color, #007bff);
+	color: white;
+}
+
+.btn-primary:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.btn-secondary {
+	background: white;
+	color: var(--primary-color, #007bff);
+	border: 1px solid var(--primary-color, #007bff);
+}
+
+.btn-secondary:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+</style>

package/src/form-flow/structure.ts

@@ -0,0 +1,123 @@
+/**
+ * Decision-tree multi-step form structure (client mirror of the backend
+ * `common/form_submission/src/structure.py` model).
+ *
+ * A multi-step form is a graph of steps connected by directed edges carrying a
+ * SCIM 2.0 condition. From a step, edges are evaluated top-to-bottom and the
+ * first whose condition passes (against the accumulated form data) wins.
+ * `resolveNext` returning `null` means the current step is terminal (the form
+ * is complete) — this drives the reactive Next-vs-Submit button in the player.
+ *
+ * The client owns navigation; the server exposes the same logic via
+ * `POST /form/definitions/{id}/resolve-next` for non-authoritative checks.
+ */
+
+import { evaluateQuery } from '../utils/queryFilter'
+
+/** A single node in the form graph. Owns its own JSON Schema. */
+export interface FormStep {
+	key: string
+	title?: string
+	/** JSON Schema for this step's fields (stored under `schema`). */
+	schema: Record<string, any>
+	/** Canvas position (designer-only; ignored by the server). */
+	x?: number
+	y?: number
+}
+
+/** A directed edge between two steps with an optional SCIM condition. */
+export interface StepEdge {
+	from: string
+	to: string
+	/** SCIM 2.0 filter over accumulated form data. Empty/undefined => always taken. */
+	condition?: string | null
+	label?: string | null
+}
+
+/** The decision-tree graph for a multi-step form definition. */
+export interface FormStructure {
+	/** Explicit start step key; falls back to the first step. */
+	startId?: string | null
+	steps: FormStep[]
+	transitions: StepEdge[]
+}
+
+/** An empty structure (single-step / not-yet-built). */
+export function emptyStructure(): FormStructure {
+	return { steps: [], transitions: [] }
+}
+
+/** A structure is multi-step iff it has more than one node. */
+export function isMultiStep(structure: FormStructure | null | undefined): boolean {
+	return !!structure && structure.steps.length > 1
+}
+
+/** Look up a step by key. */
+export function stepByKey(structure: FormStructure, key: string | null | undefined): FormStep | undefined {
+	if (key == null) return undefined
+	return structure.steps.find(s => s.key === key)
+}
+
+/** Outgoing edges for a step, in declared (priority) order. */
+export function edgesFrom(structure: FormStructure, key: string): StepEdge[] {
+	return structure.transitions.filter(e => e.from === key)
+}
+
+/** The entry step key: explicit `startId` if valid, else the first step. */
+export function entryStepKey(structure: FormStructure): string | undefined {
+	if (structure.startId && stepByKey(structure, structure.startId)) {
+		return structure.startId
+	}
+	return structure.steps[0]?.key
+}
+
+/**
+ * Resolve the next step key from `currentKey` given the accumulated answers.
+ *
+ * First outgoing edge whose SCIM `condition` passes wins (unconditional edges
+ * always pass, so declare them last as fallbacks). Returns `null` when no edge
+ * matches — the current step is terminal and the form is complete.
+ *
+ * Mirrors `FormStructure.resolve_next` on the backend.
+ */
+export function resolveNext(
+	structure: FormStructure,
+	currentKey: string,
+	formData: Record<string, any>
+): string | null {
+	for (const edge of edgesFrom(structure, currentKey)) {
+		if (!edge.condition || edge.condition.trim() === '' || evaluateQuery(edge.condition, formData)) {
+			return edge.to
+		}
+	}
+	return null
+}
+
+/** Whether a step is terminal (a leaf) given the current answers. */
+export function isTerminal(
+	structure: FormStructure,
+	currentKey: string,
+	formData: Record<string, any>
+): boolean {
+	return resolveNext(structure, currentKey, formData) === null
+}
+
+/**
+ * Union all step schemas into one flat JSON Schema (later steps win on key
+ * collisions; `required` is the union). Mirrors `FormStructure.merged_schema`.
+ */
+export function mergedSchema(structure: FormStructure): Record<string, any> {
+	const properties: Record<string, any> = {}
+	const required: string[] = []
+	for (const step of structure.steps) {
+		const props = step.schema?.properties
+		if (props && typeof props === 'object') Object.assign(properties, props)
+		const req = step.schema?.required
+		if (Array.isArray(req)) {
+			for (const k of req) if (!required.includes(k)) required.push(k)
+		}
+	}
+	const merged: Record<string, any> = { type: 'object', properties }
+	if (required.length) merged.required = required
+	return merged
+}

package/src/index.ts

@@ -9,6 +9,12 @@ export * from './directives'
 export * from './form-flow/form-flow'
 export { default as FormFlow } from './form-flow/FormFlow.vue'
 export { default as MultiStepForm } from './form-flow/MultiStepForm.vue'
+// Decision-tree multi-step forms
+export * from './form-flow/structure'
+export { default as FormFlowPlayer } from './form-flow/FormFlowPlayer.vue'
+export { default as FlowDesigner } from './form-flow/FlowDesigner.vue'
+export { default as FlowNode } from './form-flow/FlowNode.vue'
+export { default as FlowEdge } from './form-flow/FlowEdge.vue'
 export type { FormFieldType, FormFieldValidation, FormField, JSONSchemaProperty, JSONSchemaObject } from './form-flow/schema-fields'
 export { defaultRowSpan, inferFieldType, schemaToFields, fieldsToSchema, initFormData, validateFormData, useSchemaToFields } from './form-flow/schema-fields'
 // i18n exports

package/src/styles/layout.css

@@ -4123,6 +4123,10 @@
     flex-direction: row-reverse;
 }
 
+.flex-1 {
+    flex: 1;
+}
+
 
 .column,
 .flex-column {

package/src/styles/mobilLayout.css

@@ -4154,6 +4154,10 @@
         flex-direction: row-reverse;
     }
 
+    .m_flex-1 {
+        flex: 1;
+    }
+
     .m_column {
         flex-direction: column;
     }

package/src/types/TableSchema.ts

@@ -1,4 +1,4 @@
-import type { BglFormSchemaT } from '@bagelink/vue'
+import type { BglFormSchemaT, IconType } from '@bagelink/vue'
 import type { MaybeRefOrGetter, ComputedRef } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
@@ -12,6 +12,12 @@ export interface TableSchemaProps<T extends { [key: string]: any } = { [key: str
 	selectable?: boolean
 	sortable?: boolean | { handle?: string }
 	onLastItemVisible?: () => void
+	/** Icon for the built-in empty state (default: 'inbox'). Pass 'none' to hide. */
+	emptyIcon?: IconType | 'none'
+	/** Title for the built-in empty state (default: 'No results'). */
+	emptyTitle?: string
+	/** Description shown under the empty-state title. */
+	emptyDescription?: string
 }
 
 export interface SortingOptions {