corrad-bp/plugins/form-hydration.client.js
Afiq cc5093655a Enhance ComponentPreview and RepeatingTable with Debugging and Loading States
- Updated ComponentPreview.vue to include debugging logs for table data and component mounting, improving traceability during development.
- Modified RepeatingTable.vue to replace the SimpleCellValue component with direct template rendering for better performance and clarity.
- Enhanced form submission logging in RepeatingTable.vue to provide detailed insights into form data handling.
- Introduced loading state styles in ComponentPreview.vue to improve user experience during data fetching and rendering.
- Ensured SSR safety in form data updates within formBuilder.js to prevent hydration issues, enhancing application stability.
2025-08-07 16:25:11 +08:00

40 lines
1.3 KiB
JavaScript

export default defineNuxtPlugin(() => {
// This plugin runs only on the client side to handle form data hydration
const { $formStore } = useNuxtApp()
// Ensure form store data is properly initialized on client hydration
if (process.client) {
// Add any additional client-side form data initialization logic here
console.log('[FormHydration] Client-side form data hydration plugin loaded')
// Handle any form data that needs to be restored after hydration
const restoreFormData = () => {
try {
// Check if there's any persisted form data that needs restoration
const persistedData = sessionStorage.getItem('form-builder-data')
if (persistedData && $formStore) {
const parsed = JSON.parse(persistedData)
if (parsed.previewFormData) {
$formStore.updatePreviewFormData(parsed.previewFormData)
console.log('[FormHydration] Restored form data from session storage')
}
}
} catch (error) {
console.warn('[FormHydration] Failed to restore form data:', error)
}
}
// Restore data after page load
window.addEventListener('load', restoreFormData)
// Clean up
return {
provide: {
formHydration: {
restoreFormData
}
}
}
}
})