/** * useKbxDirtyState — v60 * Track unsaved changes in forms */ import { ref, computed } from 'vue' export interface DirtyState { [key: string]: boolean } export function useKbxDirtyState(initialState: DirtyState = {}) { const dirtyFields = ref(initialState) /** * Check if form is dirty (has unsaved changes) */ const dirty = computed(() => Object.values(dirtyFields.value).some(v => v)) /** * Check if specific field is dirty */ const isFieldDirty = (field: string): boolean => { return dirtyFields.value[field] ?? false } /** * Mark field as dirty */ const markFieldDirty = (field: string): void => { dirtyFields.value[field] = true } /** * Mark field as clean */ const markFieldClean = (field: string): void => { dirtyFields.value[field] = false } /** * Mark all fields as clean */ const markAllClean = (): void => { Object.keys(dirtyFields.value).forEach(key => { dirtyFields.value[key] = false }) } /** * Mark all fields as dirty */ const markAllDirty = (): void => { Object.keys(dirtyFields.value).forEach(key => { dirtyFields.value[key] = true }) } /** * Reset to initial state */ const reset = (newInitialState: DirtyState = {}): void => { dirtyFields.value = newInitialState } /** * Touch field (mark as visited) */ const touchField = (field: string): void => { if (!(field in dirtyFields.value)) { dirtyFields.value[field] = false } } /** * Get dirty field names */ const getDirtyFields = (): string[] => { return Object.entries(dirtyFields.value) .filter(([, isDirty]) => isDirty) .map(([field]) => field) } /** * Set dirty state of multiple fields */ const setDirtyFields = (fields: DirtyState): void => { dirtyFields.value = { ...dirtyFields.value, ...fields } } return { dirty, dirtyFields, isFieldDirty, markFieldDirty, markFieldClean, markAllClean, markAllDirty, touchField, getDirtyFields, setDirtyFields, reset, } }