feat(record-form): dirty tracking and an unsaved-changes guard #90

Merged

pienter merged 3 commits from issue/51-unsaved-changes-guard into main 2026-09-16 01:18:58 +00:00

Conversation 0 Commits 3 Files changed 11 +245 -8

pienter commented 2026-09-16 01:09:31 +00:00

Owner

Copy link

RecordForm now owns dirty tracking. A new baseline prop is the last saved state (the first modelValue seen at setup when omitted); dirty is a structural comparison of modelValue against it (isEqualRecord in utils/cms), always false in readonly mode, emitted as update:dirty for v-model:dirty and exposed on the instance.

useUnsavedChanges(dirty) (@pienter/ui/composables/useUnsavedChanges) turns that flag into a leave guard: beforeunload while dirty, a vue-router onBeforeRouteLeave guard registered inside the composable, and { pending, confirmLeave, resolve } for a consumer-rendered AlertDialog.

The five playground forms (Page, Blog, Settings, Company, Contact) keep a baseline ref refreshed after load and after a successful save, bind :baseline and v-model:dirty, and render one destructive "Discard unsaved changes?" AlertDialog bound to pending / resolve.

Closes #51

RecordForm now owns dirty tracking. A new `baseline` prop is the last saved state (the first `modelValue` seen at setup when omitted); `dirty` is a structural comparison of `modelValue` against it (`isEqualRecord` in `utils/cms`), always `false` in `readonly` mode, emitted as `update:dirty` for `v-model:dirty` and exposed on the instance. `useUnsavedChanges(dirty)` (`@pienter/ui/composables/useUnsavedChanges`) turns that flag into a leave guard: `beforeunload` while dirty, a vue-router `onBeforeRouteLeave` guard registered inside the composable, and `{ pending, confirmLeave, resolve }` for a consumer-rendered `AlertDialog`. The five playground forms (Page, Blog, Settings, Company, Contact) keep a `baseline` ref refreshed after load and after a successful save, bind `:baseline` and `v-model:dirty`, and render one destructive "Discard unsaved changes?" `AlertDialog` bound to `pending` / `resolve`. Closes #51

pienter added 2 commits 2026-09-16 01:09:32 +00:00

feat(record-form): dirty tracking and an unsaved-changes guard 0476dcb35b

feat(examples): unsaved-changes guard on the record forms af741fd9b7

pienter force-pushed issue/51-unsaved-changes-guard from af741fd9b7 to 1f7a064e2c 2026-09-16 01:10:47 +00:00 Compare

pienter referenced this pull request 2026-09-16 01:13:36 +00:00

ui: useUnsavedChanges does not guard param-only route changes #91

pienter referenced this pull request 2026-09-16 01:13:36 +00:00

ui: Storybook story for RecordForm baseline and dirty #92

pienter added 1 commit 2026-09-16 01:16:49 +00:00

merge 707ed40900

pienter merged commit bc111eab49 into main 2026-09-16 01:18:58 +00:00

pienter deleted branch issue/51-unsaved-changes-guard 2026-09-16 01:18:58 +00:00

pienter referenced this pull request from a commit 2026-09-16 01:19:00 +00:00

Merge pull request 'feat(record-form): dirty tracking and an unsaved-changes guard' (#90) from issue/51-unsaved-changes-guard into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

pienter/ui!90

No description provided.