[READ-ONLY] Mirror of https://github.com/probablykasper/niceform. Convenient form validation and typing for SvelteKit
Add snapshot utility
+45
+45
niceform.ts
+45
niceform.ts
···
136
136
export const nice_form = {
137
137
zod,
138
138
}
139
+
140
+
export function auto_snapshot() {
141
+
let container_el: HTMLElement | undefined
142
+
const selector = 'input[data-snapshot],textarea[data-snapshot],select[data-snapshot]'
143
+
return {
144
+
capture() {
145
+
if (!container_el?.querySelectorAll) {
146
+
throw new Error('auto_snapshot: container element not set')
147
+
}
148
+
const elements = container_el.querySelectorAll(selector)
149
+
const values: Record<string, string> = {}
150
+
for (const element of elements) {
151
+
if (
152
+
element instanceof HTMLInputElement ||
153
+
element instanceof HTMLSelectElement ||
154
+
element instanceof HTMLTextAreaElement
155
+
) {
156
+
values[element.name] = element.value
157
+
}
158
+
}
159
+
return values
160
+
},
161
+
restore(value: Record<string, string>) {
162
+
if (!container_el?.querySelectorAll) {
163
+
throw new Error('auto_snapshot: container element not set')
164
+
}
165
+
const elements = container_el.querySelectorAll(selector)
166
+
for (const element of elements) {
167
+
if (
168
+
(element instanceof HTMLInputElement ||
169
+
element instanceof HTMLSelectElement ||
170
+
element instanceof HTMLTextAreaElement) &&
171
+
value[element.name]
172
+
) {
173
+
element.value = value[element.name]
174
+
// Trigger Svelte state to updates
175
+
element.dispatchEvent(new Event('input'))
176
+
}
177
+
}
178
+
},
179
+
container(node: HTMLElement) {
180
+
container_el = node
181
+
},
182
+
}
183
+
}