- 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.
40 lines
1.3 KiB
JavaScript
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|