1 | import WUPBaseElement from "./baseElement";
|
2 | import { nestedProperty, promiseWait, scrollIntoView } from "./indexHelpers";
|
3 | import WUPSpinElement from "./spinElement";
|
4 | import { WUPcssButton } from "./styles";
|
5 |
|
6 |
|
7 | !WUPSpinElement && console.error("!");
|
8 | export var SubmitActions;
|
9 | (function (SubmitActions) {
|
10 |
|
11 | SubmitActions[SubmitActions["none"] = 0] = "none";
|
12 |
|
13 | SubmitActions[SubmitActions["goToError"] = 1] = "goToError";
|
14 |
|
15 | SubmitActions[SubmitActions["validateUntiFirst"] = 2] = "validateUntiFirst";
|
16 |
|
17 | SubmitActions[SubmitActions["collectChanged"] = 4] = "collectChanged";
|
18 |
|
19 | SubmitActions[SubmitActions["reset"] = 8] = "reset";
|
20 | |
21 |
|
22 |
|
23 | SubmitActions[SubmitActions["lockOnPending"] = 16] = "lockOnPending";
|
24 | })(SubmitActions || (SubmitActions = {}));
|
25 | const tagName = "wup-form";
|
26 | const formStore = [];
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | export default class WUPFormElement extends WUPBaseElement {
|
77 |
|
78 | #ctr = this.constructor;
|
79 |
|
80 | static get observedOptions() {
|
81 | return ["disabled", "readOnly", "autoComplete", "autoSave"];
|
82 | }
|
83 |
|
84 | static get observedAttributes() {
|
85 | return ["disabled", "readonly", "autocomplete", "autosave"];
|
86 | }
|
87 | static get $styleRoot() {
|
88 | return `:root {
|
89 | --btn-submit-bg: var(--base-btn-bg);
|
90 | --btn-submit-text: var(--base-btn-text);
|
91 | --btn-submit-focus: var(--base-btn-focus);
|
92 | }`;
|
93 | }
|
94 | static get $style() {
|
95 | return `${super.$style}
|
96 | :host {
|
97 | position: relative;
|
98 | display: block;
|
99 | max-width: 500px;
|
100 | margin: auto;
|
101 | }
|
102 | ${WUPcssButton(":host [type='submit']")}`;
|
103 | }
|
104 |
|
105 | static $tryConnect(control) {
|
106 | const form = formStore.find((f) => f.contains(control));
|
107 | form?.$controls.push(control);
|
108 | return form;
|
109 | }
|
110 |
|
111 | static $modelToControls(m, controls, prop) {
|
112 | const out = { hasProp: undefined };
|
113 | controls.forEach((c) => {
|
114 | const key = c.$options.name;
|
115 | if (key) {
|
116 | const v = m && nestedProperty.get(m, key, out);
|
117 | if (out.hasProp) {
|
118 | c[prop] = v;
|
119 | }
|
120 | }
|
121 | });
|
122 | }
|
123 |
|
124 | static $modelFromControls(prevModel, controls, prop, isOnlyChanged) {
|
125 | if (isOnlyChanged) {
|
126 | controls.forEach((c) => c.$options.name && c.$isChanged && nestedProperty.set(prevModel, c.$options.name, c[prop]));
|
127 | }
|
128 | else {
|
129 | controls.forEach((c) => c.$options.name && nestedProperty.set(prevModel, c.$options.name, c[prop]));
|
130 | }
|
131 | return prevModel;
|
132 | }
|
133 |
|
134 | static $defaults = {
|
135 | submitActions: 1 | 2 | 8 | 16 ,
|
136 | };
|
137 |
|
138 | $onSubmit;
|
139 |
|
140 |
|
141 |
|
142 | $controls = [];
|
143 |
|
144 | get $controlsAttached() {
|
145 | return this.$controls.filter((c) => c.$options.name != null);
|
146 | }
|
147 | _model;
|
148 | |
149 |
|
150 | get $model() {
|
151 | return Object.assign(this._model || {}, this.#ctr.$modelFromControls({}, this.$controls, "$value"));
|
152 | }
|
153 | set $model(m) {
|
154 | if (m !== this._model) {
|
155 | this._model = m;
|
156 | this.#ctr.$modelToControls(m, this.$controls, "$value");
|
157 | }
|
158 | }
|
159 | _initModel;
|
160 | |
161 |
|
162 | get $initModel() {
|
163 |
|
164 | return this.#ctr.$modelFromControls(this._initModel || {}, this.$controls, "$initValue");
|
165 | }
|
166 | set $initModel(m) {
|
167 | if (m !== this._initModel) {
|
168 | this._initModel = m;
|
169 | this.#ctr.$modelToControls(m, this.$controls, "$initValue");
|
170 | }
|
171 | }
|
172 |
|
173 | get $isPending() {
|
174 | return this.#stopPending !== undefined;
|
175 | }
|
176 | set $isPending(v) {
|
177 | if (v !== this.$isPending) {
|
178 | this.changePending(v);
|
179 | }
|
180 | }
|
181 |
|
182 | get $isValid() {
|
183 | return this.$controlsAttached.every((c) => c.$isValid);
|
184 | }
|
185 |
|
186 | get $isChanged() {
|
187 | return this.$controls.some((c) => c.$options.name && c.$isChanged);
|
188 | }
|
189 |
|
190 | renderSpin(target) {
|
191 | const spin = document.createElement("wup-spin");
|
192 | spin.$options.fit = true;
|
193 | spin.$options.overflowFade = false;
|
194 | spin.$options.overflowTarget = target;
|
195 | return spin;
|
196 | }
|
197 | #stopPending;
|
198 |
|
199 | changePending(v) {
|
200 | if (v === !!this.#stopPending) {
|
201 | return;
|
202 | }
|
203 | if (v) {
|
204 | const wasDisabled = this._opts.disabled;
|
205 | if (this._opts.submitActions & 16 ) {
|
206 | this.$options.disabled = true;
|
207 | }
|
208 | const btns = [];
|
209 | const spins = [];
|
210 | this.querySelectorAll("[type='submit']").forEach((b) => {
|
211 | spins.push(this.appendChild(this.renderSpin(b)));
|
212 | b._wupDisabled = b.disabled;
|
213 | b.disabled = true;
|
214 | btns.push(b);
|
215 | });
|
216 | this.#stopPending = () => {
|
217 | this.#stopPending = undefined;
|
218 | this.$options.disabled = wasDisabled;
|
219 | btns.forEach((b) => (b.disabled = b._wupDisabled));
|
220 | spins.forEach((s) => s.remove());
|
221 | };
|
222 | }
|
223 | else {
|
224 | this.#stopPending();
|
225 | }
|
226 | }
|
227 |
|
228 | gotSubmit(e, submitter) {
|
229 | e.preventDefault();
|
230 | const willEv = new Event("$willSubmit", { bubbles: true, cancelable: true });
|
231 |
|
232 | willEv.$relatedEvent = e;
|
233 | willEv.$relatedForm = this;
|
234 | willEv.$submitter = submitter;
|
235 | this.dispatchEvent(willEv);
|
236 | if (willEv.defaultPrevented) {
|
237 | return;
|
238 | }
|
239 |
|
240 | let errCtrl;
|
241 | let arrCtrl = this.$controlsAttached;
|
242 | if (this._opts.submitActions & 2 ) {
|
243 | errCtrl = arrCtrl.find((c) => c.validateBySubmit() && c.canShowError);
|
244 | }
|
245 | else {
|
246 | arrCtrl.forEach((c) => {
|
247 | const err = c.validateBySubmit();
|
248 | if (err && !errCtrl && c.canShowError) {
|
249 | errCtrl = c;
|
250 | }
|
251 | });
|
252 | }
|
253 |
|
254 | if (errCtrl) {
|
255 | if (this._opts.submitActions & 1 ) {
|
256 | const el = errCtrl;
|
257 | scrollIntoView(el, { offsetTop: -30, onlyIfNeeded: true }).then(() => el.focus());
|
258 | }
|
259 | return;
|
260 | }
|
261 |
|
262 | arrCtrl = arrCtrl.filter((c) => c.canShowError);
|
263 |
|
264 | const onlyChanged = this._opts.submitActions & 4 ;
|
265 | const m = this.#ctr.$modelFromControls({}, arrCtrl, "$value", !!onlyChanged);
|
266 |
|
267 | const ev = new Event("$submit", { cancelable: false, bubbles: true });
|
268 | ev.$model = m;
|
269 | ev.$relatedForm = this;
|
270 | ev.$relatedEvent = e;
|
271 | ev.$submitter = submitter;
|
272 | const needReset = this._opts.submitActions & 8 ;
|
273 | setTimeout(() => {
|
274 | this.dispatchEvent(ev);
|
275 | const p1 = this.$onSubmit?.call(this, ev);
|
276 |
|
277 | const ev2 = new (window.SubmitEvent || Event)("submit", { submitter, cancelable: false, bubbles: true });
|
278 |
|
279 | if (!window.SubmitEvent) {
|
280 | ev2.submitter = submitter;
|
281 | }
|
282 | this.dispatchEvent(ev2);
|
283 | promiseWait(Promise.all([p1, ev.$waitFor]), 300, (v) => this.changePending(v)).then(() => {
|
284 | this._opts.autoSave && this.storageSave(null);
|
285 | if (needReset) {
|
286 | arrCtrl.forEach((v) => (v.$isDirty = false));
|
287 | this.$initModel = this.$model;
|
288 | }
|
289 | });
|
290 | });
|
291 | }
|
292 |
|
293 | #autoSaveT;
|
294 | #autoSaveRemEv;
|
295 | #hasControlChanges;
|
296 | gotChanges(propsChanged) {
|
297 | super.gotChanges(propsChanged);
|
298 | this._opts.disabled = this.getAttr("disabled", "bool");
|
299 | this._opts.readOnly = this.getAttr("readonly", "bool", this._opts.readOnly);
|
300 | this._opts.autoComplete = this.getAttr("autocomplete", "bool", this._opts.autoComplete);
|
301 | this._opts.autoFocus = this.getAttr("autofocus", "bool", this._opts.autoFocus);
|
302 | this.setAttr("readonly", this._opts.readOnly, true);
|
303 | this.setAttr("disabled", this._opts.disabled, true);
|
304 | this._opts.autoSave = this.getAttr("autosave", "boolOrString", this._opts.autoSave);
|
305 | if (this._opts.autoSave) {
|
306 | this.#autoSaveRemEv = this.appendEvent(this, "$change", () => {
|
307 | if (this._preventStorageSave) {
|
308 | return;
|
309 | }
|
310 | this.#autoSaveT && clearTimeout(this.#autoSaveT);
|
311 | this.#autoSaveT = setTimeout(() => this._opts.autoSave && this.storageSave(), 700);
|
312 | });
|
313 |
|
314 | !propsChanged &&
|
315 | setTimeout(() => {
|
316 | const m = this.storageGet();
|
317 | if (m) {
|
318 | this._preventStorageSave = true;
|
319 | this.$model = { ...this._initModel, ...m, ...this._model };
|
320 | setTimeout(() => delete this._preventStorageSave);
|
321 | }
|
322 | }, 2);
|
323 | }
|
324 | else if (this.#autoSaveRemEv) {
|
325 | this.#autoSaveRemEv.call(this);
|
326 | this.#autoSaveRemEv = undefined;
|
327 | }
|
328 | const p = propsChanged;
|
329 | if (this.#hasControlChanges || p?.includes("disabled")) {
|
330 | this.$controls.forEach((c) => c.gotFormChanges(propsChanged));
|
331 | this.#hasControlChanges = undefined;
|
332 | }
|
333 | }
|
334 | gotOptionsChanged(e) {
|
335 | const p = e.props;
|
336 | if (p.includes("autoComplete") || p.includes("readOnly")) {
|
337 | this.#hasControlChanges = true;
|
338 | }
|
339 | super.gotOptionsChanged(e);
|
340 | }
|
341 | gotAttributeChanged(name, oldValue, newValue) {
|
342 | if (name === "autocomplete" || name === "readonly") {
|
343 | this.#hasControlChanges = true;
|
344 | }
|
345 | super.gotAttributeChanged(name, oldValue, newValue);
|
346 | }
|
347 | gotReady() {
|
348 | super.gotReady();
|
349 | this.appendEvent(this, "keydown", (e) => e.key === "Enter" &&
|
350 | !e.defaultPrevented &&
|
351 | !e.submitPrevented &&
|
352 | !e.shiftKey &&
|
353 | !e.ctrlKey &&
|
354 | this.gotSubmit(e, e.target instanceof HTMLElement ? e.target : this), { passive: false });
|
355 | this.appendEvent(this, "click", (e) => {
|
356 | if (!e.defaultPrevented) {
|
357 | let t = e.target;
|
358 | while (t instanceof HTMLElement && t !== this) {
|
359 | if (t.type === "submit") {
|
360 | this.gotSubmit(e, t);
|
361 | return;
|
362 | }
|
363 | t = t.parentElement;
|
364 | }
|
365 | }
|
366 | }, { passive: false });
|
367 | }
|
368 | connectedCallback() {
|
369 | super.connectedCallback();
|
370 | this.setAttribute("role", "form");
|
371 | formStore.push(this);
|
372 | }
|
373 |
|
374 | get storageKey() {
|
375 | const sn = this._opts.autoSave;
|
376 | return typeof sn === "string"
|
377 | ? sn
|
378 | : `${window.location.pathname}?${this.$controls
|
379 | .map((c) => c.$options.name)
|
380 | .filter((v) => v)
|
381 | .sort()
|
382 | .join(",")}`;
|
383 | }
|
384 |
|
385 | storageGet() {
|
386 | try {
|
387 | const key = this.storageKey;
|
388 | const sv = window.localStorage.getItem(key);
|
389 | if (sv) {
|
390 | const m = JSON.parse(sv);
|
391 | let hasVals = false;
|
392 | this.$controls.forEach((c) => {
|
393 | const n = c.$options.name;
|
394 | if (!n) {
|
395 | return;
|
396 | }
|
397 | const v = m[n];
|
398 | if (v === undefined) {
|
399 | return;
|
400 | }
|
401 | const parsed = typeof v === "string" ? c.parse(v) : v;
|
402 | nestedProperty.set(m, n, parsed);
|
403 | if (n.includes(".")) {
|
404 | delete m[n];
|
405 | }
|
406 | hasVals = true;
|
407 | });
|
408 | if (!hasVals) {
|
409 | return null;
|
410 | }
|
411 | return m;
|
412 | }
|
413 | }
|
414 | catch (err) {
|
415 | this.throwError(err);
|
416 | }
|
417 | return null;
|
418 | }
|
419 | _preventStorageSave;
|
420 | |
421 |
|
422 | storageSave(model = {}) {
|
423 | try {
|
424 | const storage = window.localStorage;
|
425 | if (model == null) {
|
426 | storage.removeItem(this.storageKey);
|
427 | return null;
|
428 | }
|
429 | const m = {};
|
430 | let hasChanges = false;
|
431 | this.$controls.forEach((c) => {
|
432 |
|
433 | if (c.$options.name && c.tagName !== "WUP-PWD") {
|
434 | const v = c.$value;
|
435 | if (c.$isChanged && v !== undefined) {
|
436 | if (typeof v === "object" && !v.toJSON && !Array.isArray(v)) {
|
437 | return;
|
438 | }
|
439 | m[c.$options.name] = v;
|
440 | hasChanges = true;
|
441 | }
|
442 | }
|
443 | });
|
444 | if (hasChanges) {
|
445 | storage.setItem(this.storageKey, JSON.stringify(m));
|
446 | return m;
|
447 | }
|
448 | storage.removeItem(this.storageKey);
|
449 | }
|
450 | catch (err) {
|
451 | this.throwError(err);
|
452 | }
|
453 | return null;
|
454 | }
|
455 | disconnectedCallback() {
|
456 | super.disconnectedCallback();
|
457 | formStore.splice(formStore.indexOf(this), 1);
|
458 | }
|
459 | }
|
460 | customElements.define(tagName, WUPFormElement);
|
461 |
|