@bagelink/vue 1.10.7 → 1.10.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.10.7",
+  "version": "1.10.9",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.10.7"
+    "@bagelink/utils": "1.10.9"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/form-flow/FormFlow.vue

@@ -451,72 +451,79 @@ defineExpose({
 
 <template>
 	<form ref="formElement" :class="schema._class" @submit="handleSubmit">
-		<div v-for="{ key, field } in visibleFields" :key="key" :class="[field._class, field._config.class]">
-			<!-- Custom slot for specific field -->
+		<template v-if="formState === 'success'">
+			<slot name="success" :form-data="formData" />
+		</template>
+		<template v-else>
+			<div v-for="{ key, field } in visibleFields" :key="key" :class="[field._class, field._config.class]">
+				<!-- Custom slot for specific field -->
+				<slot
+					:name="`field:${key}`" :value="getFieldValue(key)" :field="field" :form-data="formData"
+					:error="validationErrors[key]" :on-change="(val: any) => { updateField(key, val, field) }"
+				>
+					<!-- Array field with nested schema -->
+					<template v-if="field._type === 'array' && field._config.schema?._isSchema">
+						<ArrayInput v-bind="getFieldProps(field, key)">
+							<template #default="{ item }">
+								<FormFlow
+									v-model="item.value" :schema="field._config.schema"
+									:components="components"
+								/>
+							</template>
+						</ArrayInput>
+					</template>
+
+					<!-- Array field with custom component -->
+					<template v-else-if="field._type === 'array' && field._config.schema">
+						<ArrayInput v-bind="getFieldProps(field, key)">
+							<template #default="{ item }">
+								<component :is="resolveComponent(field._config.schema)" v-model="item.value" />
+							</template>
+						</ArrayInput>
+					</template>
+
+					<!-- Array field with primitive item type (e.g. from JSON Schema type: array with items: { type: string }) -->
+					<template v-else-if="field._type === 'array' && field._config.itemType">
+						<ArrayInput v-bind="getFieldProps(field, key)">
+							<template #default="{ item }">
+								<component
+									:is="getFieldComponent(field._config.itemType)" :model-value="item.value"
+									@update:model-value="(val: any) => { item.value = val }"
+								/>
+							</template>
+						</ArrayInput>
+					</template>
+
+					<!-- Custom component rendering -->
+					<template v-else-if="usesCustomComponent(field)">
+						<component
+							:is="resolveComponent(field._component!.component)" :model-value="getFieldValue(key)"
+							v-bind="field._component!.props"
+							@update:model-value="(val: any) => updateField(key, val, field)"
+						/>
+					</template>
+
+					<!-- Default field rendering -->
+					<component :is="getFieldComponent(field._type)" v-else v-bind="getFieldProps(field, key)" />
+				</slot>
+			</div>
+
+			<!-- Form-level errors summary slot -->
 			<slot
-				:name="`field:${key}`" :value="getFieldValue(key)" :field="field" :form-data="formData"
-				:error="validationErrors[key]" :on-change="(val: any) => { updateField(key, val, field) }"
-			>
-				<!-- Array field with nested schema -->
-				<template v-if="field._type === 'array' && field._config.schema?._isSchema">
-					<ArrayInput v-bind="getFieldProps(field, key)">
-						<template #default="{ item }">
-							<FormFlow v-model="item.value" :schema="field._config.schema" :components="components" />
-						</template>
-					</ArrayInput>
-				</template>
-
-				<!-- Array field with custom component -->
-				<template v-else-if="field._type === 'array' && field._config.schema">
-					<ArrayInput v-bind="getFieldProps(field, key)">
-						<template #default="{ item }">
-							<component :is="resolveComponent(field._config.schema)" v-model="item.value" />
-						</template>
-					</ArrayInput>
-				</template>
-
-				<!-- Array field with primitive item type (e.g. from JSON Schema type: array with items: { type: string }) -->
-				<template v-else-if="field._type === 'array' && field._config.itemType">
-					<ArrayInput v-bind="getFieldProps(field, key)">
-						<template #default="{ item }">
-							<component
-								:is="getFieldComponent(field._config.itemType)" :model-value="item.value"
-								@update:model-value="(val: any) => { item.value = val }"
-							/>
-						</template>
-					</ArrayInput>
-				</template>
-
-				<!-- Custom component rendering -->
-				<template v-else-if="usesCustomComponent(field)">
-					<component
-						:is="resolveComponent(field._component!.component)" :model-value="getFieldValue(key)"
-						v-bind="field._component!.props"
-						@update:model-value="(val: any) => updateField(key, val, field)"
-					/>
-				</template>
-
-				<!-- Default field rendering -->
-				<component :is="getFieldComponent(field._type)" v-else v-bind="getFieldProps(field, key)" />
-			</slot>
-		</div>
-
-		<!-- Form-level errors summary slot -->
-		<slot
-			name="errors" :errors="mergedErrors"
-			:error-count="Object.keys(mergedErrors).filter(k => mergedErrors[k]).length"
-			:visible-fields="visibleFields"
-		/>
-
-		<!-- Submit slot -->
-		<slot
-			name="submit" :submit="handleSubmit" :validate="validateAll" :form-data="formData"
-			:errors="mergedErrors" :form-state="formState"
-		/>
-
-		<!-- Success/error lifecycle slots (only rendered when submitFn is used) -->
-		<slot v-if="formState === 'success'" name="success" :form-data="formData" />
-		<slot v-else-if="formState === 'error'" name="error" :form-data="formData" />
+				name="errors" :errors="mergedErrors"
+				:error-count="Object.keys(mergedErrors).filter(k => mergedErrors[k]).length"
+				:visible-fields="visibleFields"
+			/>
+
+			<!-- Error slot renders above submit, form remains visible -->
+			<slot v-if="formState === 'error'" name="error" :form-data="formData" />
+
+			<!-- Submit slot -->
+			<slot
+				name="submit" :submit="handleSubmit" :validate="validateAll" :form-data="formData"
+				:errors="mergedErrors" :form-state="formState"
+			/>
+		</template>
 	</form>
 </template>