@sprucelabs/spruce-form-utils 17.2.216 → 18.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/completing/FormPlayerCard.vc.js +34 -39
- package/build/completing/formCompletionCalculator.js +5 -6
- package/build/esm/completing/FormPlayerCard.vc.js +4 -1
- package/build/esm/viewControllers/FormCard.vc.js +3 -1
- package/build/viewControllers/FormCard.vc.js +14 -16
- package/package.json +1 -1
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
const heartwood_view_controllers_1 = require("@sprucelabs/heartwood-view-controllers");
|
|
15
4
|
const schema_1 = require("@sprucelabs/schema");
|
|
16
5
|
const spruce_image_utils_1 = require("@sprucelabs/spruce-image-utils");
|
|
17
6
|
class FormPlayerCardViewController extends heartwood_view_controllers_1.AbstractViewController {
|
|
7
|
+
swipeVc;
|
|
8
|
+
static id = 'form-player-card';
|
|
9
|
+
onChangeHandler;
|
|
10
|
+
builderSource;
|
|
11
|
+
shouldIgnoreChanges = false;
|
|
12
|
+
router;
|
|
13
|
+
onSaveAndBeDoneHandler;
|
|
14
|
+
uploader;
|
|
15
|
+
uploads = {};
|
|
18
16
|
constructor(options) {
|
|
19
17
|
super(options);
|
|
20
|
-
|
|
21
|
-
this.uploads = {};
|
|
22
|
-
const { onChange, isBusy, id, onSaveAndBeDone } = options, builderSource = __rest(options, ["onChange", "isBusy", "id", "onSaveAndBeDone"]);
|
|
18
|
+
const { onChange, isBusy, id, onSaveAndBeDone, ...builderSource } = options;
|
|
23
19
|
this.builderSource = (0, heartwood_view_controllers_1.removeUniversalViewOptions)(builderSource);
|
|
24
20
|
this.onSaveAndBeDoneHandler = onSaveAndBeDone;
|
|
25
21
|
this.swipeVc = this.SwipeVc(id, this.builderSource);
|
|
@@ -44,9 +40,8 @@ class FormPlayerCardViewController extends heartwood_view_controllers_1.Abstract
|
|
|
44
40
|
this.updateFooter();
|
|
45
41
|
}
|
|
46
42
|
renderFooter() {
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
const currentPage = (_d = (_c = this.swipeVc) === null || _c === void 0 ? void 0 : _c.getPresentSlide()) !== null && _d !== void 0 ? _d : 0;
|
|
43
|
+
const totalPages = this.builderSource.pages?.length ?? 0;
|
|
44
|
+
const currentPage = this.swipeVc?.getPresentSlide() ?? 0;
|
|
50
45
|
const buttons = [
|
|
51
46
|
{
|
|
52
47
|
id: 'saveProgress',
|
|
@@ -82,24 +77,22 @@ class FormPlayerCardViewController extends heartwood_view_controllers_1.Abstract
|
|
|
82
77
|
});
|
|
83
78
|
}
|
|
84
79
|
async handleClickSaveAndDone() {
|
|
85
|
-
var _a, _b;
|
|
86
80
|
if (this.onSaveAndBeDoneHandler) {
|
|
87
|
-
await
|
|
81
|
+
await this.onSaveAndBeDoneHandler?.();
|
|
88
82
|
return;
|
|
89
83
|
}
|
|
90
84
|
await this.alert({
|
|
91
85
|
message: `Progress saved, lets get outa here! 🚀`,
|
|
92
86
|
style: 'success',
|
|
93
87
|
});
|
|
94
|
-
await
|
|
88
|
+
await this.router?.redirect('profile.root');
|
|
95
89
|
}
|
|
96
90
|
async handleClickNext() {
|
|
97
91
|
await this.swipeVc.jumpToSlide(this.swipeVc.getPresentSlide() + 1);
|
|
98
92
|
}
|
|
99
93
|
renderHeader(options) {
|
|
100
|
-
var _a;
|
|
101
94
|
return {
|
|
102
|
-
title:
|
|
95
|
+
title: options.title ?? 'Loading your form...',
|
|
103
96
|
subtitle: options.subtitle,
|
|
104
97
|
};
|
|
105
98
|
}
|
|
@@ -107,37 +100,40 @@ class FormPlayerCardViewController extends heartwood_view_controllers_1.Abstract
|
|
|
107
100
|
this.swipeVc.setIsBusy(isLoading);
|
|
108
101
|
}
|
|
109
102
|
renderSlides(options) {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
103
|
+
const slides = options.pages?.map(({ title, ...form }) => {
|
|
104
|
+
const formVc = this.Controller('form', {
|
|
105
|
+
...form,
|
|
106
|
+
shouldShowSubmitControls: false,
|
|
107
|
+
onChange: async () => {
|
|
114
108
|
await this.handleFormChange(formVc);
|
|
115
|
-
}
|
|
109
|
+
},
|
|
110
|
+
});
|
|
116
111
|
return {
|
|
117
112
|
title,
|
|
118
113
|
form: formVc.render(),
|
|
119
114
|
};
|
|
120
|
-
})
|
|
115
|
+
}) ?? [];
|
|
121
116
|
return slides;
|
|
122
117
|
}
|
|
123
118
|
async handleFormChange(formVc) {
|
|
124
|
-
var _a;
|
|
125
119
|
const schema = formVc.getSchema();
|
|
126
120
|
for (const [name, field] of Object.entries(schema.fields)) {
|
|
127
121
|
if (field.type === 'image' && formVc.isFieldRendering(name)) {
|
|
128
122
|
const value = formVc.getValue(name);
|
|
129
|
-
if (value &&
|
|
123
|
+
if (value && this.uploads[name]?.original !== value.base64) {
|
|
130
124
|
const file = await this.uploader.upload(value);
|
|
131
|
-
this.uploads[name] = {
|
|
125
|
+
this.uploads[name] = {
|
|
126
|
+
original: value.base64,
|
|
127
|
+
uploaded: file,
|
|
128
|
+
};
|
|
132
129
|
}
|
|
133
130
|
}
|
|
134
131
|
}
|
|
135
132
|
await this.optionallyInvokeChangeHandler();
|
|
136
133
|
}
|
|
137
134
|
async optionallyInvokeChangeHandler() {
|
|
138
|
-
var _a;
|
|
139
135
|
if (!this.shouldIgnoreChanges) {
|
|
140
|
-
await
|
|
136
|
+
await this.onChangeHandler?.({ values: this.getValues() });
|
|
141
137
|
}
|
|
142
138
|
}
|
|
143
139
|
getHasCriticalError() {
|
|
@@ -153,11 +149,11 @@ class FormPlayerCardViewController extends heartwood_view_controllers_1.Abstract
|
|
|
153
149
|
return this.swipeVc;
|
|
154
150
|
}
|
|
155
151
|
async load(options) {
|
|
156
|
-
const { router
|
|
152
|
+
const { router, ...source } = options;
|
|
157
153
|
const { title, subtitle } = this.renderHeader(source);
|
|
158
154
|
this.router = router;
|
|
159
|
-
this.swipeVc.setHeaderTitle(title
|
|
160
|
-
this.swipeVc.setHeaderSubtitle(subtitle
|
|
155
|
+
this.swipeVc.setHeaderTitle(title ?? null);
|
|
156
|
+
this.swipeVc.setHeaderSubtitle(subtitle ?? null);
|
|
161
157
|
if (source.pages) {
|
|
162
158
|
this.swipeVc.setSections(this.renderSlides(source));
|
|
163
159
|
}
|
|
@@ -198,9 +194,9 @@ class FormPlayerCardViewController extends heartwood_view_controllers_1.Abstract
|
|
|
198
194
|
return values;
|
|
199
195
|
}
|
|
200
196
|
getFormVcs() {
|
|
201
|
-
var _a;
|
|
202
197
|
const slides = this.swipeVc.getSlides();
|
|
203
|
-
return (
|
|
198
|
+
return (slides?.map((s) => s.form?.controller) ??
|
|
199
|
+
[]);
|
|
204
200
|
}
|
|
205
201
|
getFormVc(idx) {
|
|
206
202
|
const formVc = this.getFormVcs()[idx];
|
|
@@ -220,5 +216,4 @@ class FormPlayerCardViewController extends heartwood_view_controllers_1.Abstract
|
|
|
220
216
|
return this.swipeVc.render();
|
|
221
217
|
}
|
|
222
218
|
}
|
|
223
|
-
FormPlayerCardViewController.id = 'form-player-card';
|
|
224
219
|
exports.default = FormPlayerCardViewController;
|
|
@@ -23,16 +23,15 @@ function validateOptions(pages, values) {
|
|
|
23
23
|
}
|
|
24
24
|
const formCompletionCalculator = {
|
|
25
25
|
calculate(pages, values) {
|
|
26
|
-
var _a, _b, _c, _d;
|
|
27
26
|
validateOptions(pages, values);
|
|
28
27
|
const requiredFields = [];
|
|
29
28
|
let totalFields = 0;
|
|
30
29
|
for (const page of pages) {
|
|
31
|
-
const fields =
|
|
30
|
+
const fields = page.schema.fields ?? {};
|
|
32
31
|
for (const section of page.sections) {
|
|
33
|
-
for (const field of
|
|
34
|
-
const fieldKey =
|
|
35
|
-
const f =
|
|
32
|
+
for (const field of section.fields ?? []) {
|
|
33
|
+
const fieldKey = field.name ?? field;
|
|
34
|
+
const f = fields[fieldKey] ?? {};
|
|
36
35
|
if (f.isRequired) {
|
|
37
36
|
totalFields++;
|
|
38
37
|
requiredFields.push(fieldKey);
|
|
@@ -45,7 +44,7 @@ const formCompletionCalculator = {
|
|
|
45
44
|
}
|
|
46
45
|
let totalAnswered = 0;
|
|
47
46
|
for (const value of values) {
|
|
48
|
-
totalAnswered += Object.keys(value
|
|
47
|
+
totalAnswered += Object.keys(value ?? {}).filter((k) => {
|
|
49
48
|
return !!value[k] && requiredFields.indexOf(k) !== -1;
|
|
50
49
|
}).length;
|
|
51
50
|
}
|
|
@@ -142,7 +142,10 @@ class FormPlayerCardViewController extends AbstractViewController {
|
|
|
142
142
|
const value = formVc.getValue(name);
|
|
143
143
|
if (value && ((_a = this.uploads[name]) === null || _a === void 0 ? void 0 : _a.original) !== value.base64) {
|
|
144
144
|
const file = yield this.uploader.upload(value);
|
|
145
|
-
this.uploads[name] = {
|
|
145
|
+
this.uploads[name] = {
|
|
146
|
+
original: value.base64,
|
|
147
|
+
uploaded: file,
|
|
148
|
+
};
|
|
146
149
|
}
|
|
147
150
|
}
|
|
148
151
|
}
|
|
@@ -23,7 +23,9 @@ import { assertOptions, } from '@sprucelabs/schema';
|
|
|
23
23
|
class FormCardViewController extends AbstractViewController {
|
|
24
24
|
constructor(options) {
|
|
25
25
|
super(options);
|
|
26
|
-
const _a = assertOptions(options, [
|
|
26
|
+
const _a = assertOptions(options, [
|
|
27
|
+
'schema',
|
|
28
|
+
]), { fields, id, header } = _a, form = __rest(_a, ["fields", "id", "header"]);
|
|
27
29
|
if (!fields && !form.sections) {
|
|
28
30
|
assertOptions(options, ['sections', 'fields'], 'You have to supply either fields or sections to your form card!');
|
|
29
31
|
}
|
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.buildFormCard = void 0;
|
|
15
4
|
const heartwood_view_controllers_1 = require("@sprucelabs/heartwood-view-controllers");
|
|
16
5
|
const schema_1 = require("@sprucelabs/schema");
|
|
17
6
|
class FormCardViewController extends heartwood_view_controllers_1.AbstractViewController {
|
|
7
|
+
static id = 'card';
|
|
8
|
+
formVc;
|
|
9
|
+
cardVc;
|
|
18
10
|
constructor(options) {
|
|
19
11
|
super(options);
|
|
20
|
-
const
|
|
12
|
+
const { fields, id, header, ...form } = (0, schema_1.assertOptions)(options, [
|
|
13
|
+
'schema',
|
|
14
|
+
]);
|
|
21
15
|
if (!fields && !form.sections) {
|
|
22
16
|
(0, schema_1.assertOptions)(options, ['sections', 'fields'], 'You have to supply either fields or sections to your form card!');
|
|
23
17
|
}
|
|
@@ -28,13 +22,16 @@ class FormCardViewController extends heartwood_view_controllers_1.AbstractViewCo
|
|
|
28
22
|
this.cardVc = this.CardVc({ id, header });
|
|
29
23
|
}
|
|
30
24
|
CardVc(options) {
|
|
31
|
-
return this.Controller('card',
|
|
25
|
+
return this.Controller('card', {
|
|
26
|
+
...options,
|
|
27
|
+
body: {
|
|
32
28
|
sections: [
|
|
33
29
|
{
|
|
34
30
|
form: this.formVc.render(),
|
|
35
31
|
},
|
|
36
32
|
],
|
|
37
|
-
}
|
|
33
|
+
},
|
|
34
|
+
});
|
|
38
35
|
}
|
|
39
36
|
getIsValid() {
|
|
40
37
|
return this.formVc.isValid();
|
|
@@ -47,7 +44,9 @@ class FormCardViewController extends heartwood_view_controllers_1.AbstractViewCo
|
|
|
47
44
|
return errors;
|
|
48
45
|
}
|
|
49
46
|
async setValues(values) {
|
|
50
|
-
await this.formVc.setValues(
|
|
47
|
+
await this.formVc.setValues({
|
|
48
|
+
...values,
|
|
49
|
+
});
|
|
51
50
|
}
|
|
52
51
|
getValues() {
|
|
53
52
|
return this.formVc.getValues();
|
|
@@ -62,7 +61,6 @@ class FormCardViewController extends heartwood_view_controllers_1.AbstractViewCo
|
|
|
62
61
|
return this.cardVc.render();
|
|
63
62
|
}
|
|
64
63
|
}
|
|
65
|
-
FormCardViewController.id = 'card';
|
|
66
64
|
exports.default = FormCardViewController;
|
|
67
65
|
function buildFormCard(options) {
|
|
68
66
|
return options;
|