@bagelink/vue 1.10.3 → 1.10.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.10.3",
+  "version": "1.10.7",
   "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.3"
+    "@bagelink/utils": "1.10.7"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -184,7 +184,6 @@ watch(() => props.modelValue, () => {
 	padding: 0;
 	width: 100%;
 	height: 100%;
-	overflow: auto;
 	font-family: monospace;
 	font-size: 1em;
 	line-height: 1.5;

package/src/form-flow/FormFlow.vue

@@ -22,19 +22,22 @@ import { useI18n, resolveI18n } from '../i18n'
 
 import { parseQuery } from '../utils/queryFilter'
 
+export type FormState = 'idle' | 'submitting' | 'success' | 'error'
+
 export interface Props<T extends Record<string, any> = Record<string, any>> {
 	schema: SchemaDefinition
 	modelValue?: T
 	components?: Record<string, any>
 	/** External validation errors (from parent MultiStepForm) */
 	errors?: Record<string, string>
+	/** Async submit handler — use @submit="fn" to bind. FormFlow awaits it and manages formState. */
+	onSubmit?: (data: T) => Promise<void> | void
 }
 
 const props = defineProps<Props<T>>()
 
 const emit = defineEmits<{
 	'update:modelValue': [value: T]
-	'submit': [value: T]
 }>()
 
 const { $t } = useI18n()
@@ -86,6 +89,9 @@ const validationErrors = ref<Record<string, string>>({})
 // After first submit attempt, validate on input (like native form validation)
 const hasSubmitted = ref(false)
 
+// Internal form lifecycle state
+const formState = ref<FormState>('idle')
+
 // Form element ref for native validation
 const formElement = ref<HTMLFormElement>()
 
@@ -205,6 +211,9 @@ const visibleFields = computed(() => {
 // Update field value - validate on input only after first submit attempt
 function updateField(key: string, value: any, field: FieldBuilder) {
 	setNestedValue(formData.value, key, value)
+	if (formState.value === 'success' || formState.value === 'error') {
+		formState.value = 'idle'
+	}
 	if (hasSubmitted.value) {
 		validateField(key, field)
 	}
@@ -386,7 +395,7 @@ function validateAll(): boolean {
 }
 
 // Submit handler for the slot (arrow function preserves closure scope during bundling)
-function handleSubmit(event?: Event): boolean {
+async function handleSubmit(event?: Event): Promise<boolean> {
 	// Prevent default form submission if event is provided
 	if (event) {
 		event.preventDefault()
@@ -419,9 +428,14 @@ function handleSubmit(event?: Event): boolean {
 				}, 300)
 			}
 		}
-	} else {
-		// Emit submit event with form data when validation passes
-		emit('submit', formData.value)
+	} else if (props.onSubmit) {
+		formState.value = 'submitting'
+		try {
+			await props.onSubmit(formData.value)
+			formState.value = 'success'
+		} catch {
+			formState.value = 'error'
+		}
 	}
 
 	return isValid
@@ -430,7 +444,8 @@ function handleSubmit(event?: Event): boolean {
 // Expose methods for parent components (e.g., dialogs)
 defineExpose({
 	validate: validateAll,
-	handleSubmit
+	submit: handleSubmit,
+	formState
 })
 </script>
 
@@ -491,27 +506,17 @@ defineExpose({
 			name="errors" :errors="mergedErrors"
 			:error-count="Object.keys(mergedErrors).filter(k => mergedErrors[k]).length"
 			:visible-fields="visibleFields"
-		>
-			<!-- Default errors summary (only shown if there are errors) -->
-			<div v-if="Object.keys(mergedErrors).some(k => mergedErrors[k])" class="form-errors-summary">
-				<div class="form-errors-title">
-					Please fix the following errors:
-				</div>
-				<ul class="form-errors-list">
-					<template v-for="{ key, field } in visibleFields" :key="key">
-						<li v-if="mergedErrors[key]">
-							<strong>{{ generateLabel(key, field) }}:</strong> {{ mergedErrors[key] }}
-						</li>
-					</template>
-				</ul>
-			</div>
-		</slot>
+		/>
 
 		<!-- Submit slot -->
 		<slot
 			name="submit" :submit="handleSubmit" :validate="validateAll" :form-data="formData"
-			:errors="mergedErrors"
+			: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" />
 	</form>
 </template>
 

package/src/styles/base-colors.css

@@ -1401,11 +1401,11 @@
 /* Flat and Border modifiers - Universal approach */
 /* For all pair classes, flat mode uses border-color as text color */
 [class*="pair-"].bgl_flatPill {
-    background-color: transparent !important;
+    background-color: transparent;
 }
 
 [class*="pair-"].bgl_pill-border {
-    background-color: transparent !important;
+    background-color: transparent;
     outline: 1px solid;
 }