diff --git a/CHANGELOG.md b/CHANGELOG.md index 1239384..bc056aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## UNRELEASED + +### Adds + +* Add group widget which is a fieldset container for other form widgets. + ## 1.2.0 (2023-10-12) ### Adds diff --git a/README.md b/README.md index 9cdb953..5add8a0 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,8 @@ require('apostrophe')({ '@apostrophecms/form-checkboxes-field-widget': {}, '@apostrophecms/form-boolean-field-widget': {}, '@apostrophecms/form-conditional-widget': {}, - '@apostrophecms/form-divider-widget': {} + '@apostrophecms/form-divider-widget': {}, + '@apostrophecms/form-group-widget': {} } }); ``` @@ -82,7 +83,7 @@ The `formWidgets` option allows us to change the widgets allowed in a form. It i } ``` -This includes the rich text widget so editors can add directions or notes in the form. The file field widget is *not included* by default since site owners should carefully consider the implications of potentially public upload access. See [the following section on file field support](#supporting-file-field-uploads-safely). +This includes the rich text widget so editors can add directions or notes in the form. The file field widget is *not included* by default since site owners should carefully consider the implications of potentially public upload access. See [the following section on file field support](#supporting-file-field-uploads-safely). The group widget is a simple fieldset container for other form field widgets and is *not included* by default either. Any widget type can be included. A very simple form widget configuration might look like this: diff --git a/i18n/en.json b/i18n/en.json index 9d02eef..7e09445 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -58,9 +58,14 @@ "formName": "Form name", "forms": "Forms", "globalGroup": "Form Settings", + "group": "Group", "groupAdvanced": "Advanced", "groupAfterSubmission": "After submission", "groupForm": "Form", + "groupGroups": "Groups", + "groupGroupsContents": "Groups Contents", + "groupGroupsContentsHelp": "Contains all form widgets excepts groups", + "groupGroupsLabel": "Group Label", "notFoundForm": "No matching form was found", "queryParamKey": "Key", "queryParamLimit": "Limit Saved Parameter Value Length (characters)", diff --git a/index.js b/index.js index 5227c7c..8640c6b 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,8 @@ const fs = require('fs'); const path = require('path'); const connectMultiparty = require('connect-multiparty'); const fields = require('./lib/fields'); +const recaptcha = require('./lib/recaptcha'); +const processor = require('./lib/processor'); module.exports = { extend: '@apostrophecms/piece-type', @@ -75,8 +77,8 @@ module.exports = { }, methods (self) { return { - ...require('./lib/recaptcha')(self), - ...require('./lib/process')(self), + ...recaptcha(self), + ...processor(self), async ensureCollection () { self.db = self.apos.db.collection('aposFormSubmissions'); await self.db.ensureIndex({ diff --git a/lib/fields.js b/lib/fields.js index 44f38b4..55be9d9 100644 --- a/lib/fields.js +++ b/lib/fields.js @@ -22,6 +22,7 @@ module.exports = { '@apostrophecms/form-checkboxes-field': {}, '@apostrophecms/form-conditional': {}, '@apostrophecms/form-divider': {}, + // '@apostrophecms/form-group': {} '@apostrophecms/rich-text': { toolbar: [ 'styles', 'bold', 'italic', 'link', diff --git a/lib/process.js b/lib/processor.js similarity index 100% rename from lib/process.js rename to lib/processor.js diff --git a/modules/@apostrophecms/form-group-widget/index.js b/modules/@apostrophecms/form-group-widget/index.js new file mode 100644 index 0000000..be17743 --- /dev/null +++ b/modules/@apostrophecms/form-group-widget/index.js @@ -0,0 +1,49 @@ +module.exports = { + extend: '@apostrophecms/widget-type', + options: { + label: 'aposForm:group', + className: 'apos-form-group', + icon: 'file-multiple-outline-icon' + }, + icons: { + 'file-multiple-outline-icon': 'FileMultipleOutline' + }, + fields (self) { + // Prevent nested groups + const form = self.options.apos.modules['@apostrophecms/form']; + const { + '@apostrophecms/form-group': groupWidget, + ...formWidgets + } = form.fields.contents.options.widgets; + + return { + add: { + groups: { + label: 'aposForm:groupGroups', + type: 'array', + required: true, + titleField: 'label', + inline: true, + fields: { + add: { + label: { + label: 'aposForm:groupGroupsLabel', + type: 'string', + required: true + }, + contents: { + label: 'aposForm:groupGroupsContents', + help: 'aposForm:groupGroupsContentsHelp', + type: 'area', + contextual: false, + options: { + widgets: formWidgets + } + } + } + } + } + } + }; + } +}; diff --git a/modules/@apostrophecms/form-group-widget/views/widget.html b/modules/@apostrophecms/form-group-widget/views/widget.html new file mode 100644 index 0000000..f151f10 --- /dev/null +++ b/modules/@apostrophecms/form-group-widget/views/widget.html @@ -0,0 +1,13 @@ +{% set prependIfPrefix = apos.modules['@apostrophecms/form'].prependIfPrefix %} + +
+ {% for group in data.widget.groups %} +
+ {{ group.label }} + {% area group, 'contents' %} +
+ {% endfor %} +
diff --git a/modules/@apostrophecms/form-widget/ui/src/index.scss b/modules/@apostrophecms/form-widget/ui/src/index.scss index ab3521b..9893224 100644 --- a/modules/@apostrophecms/form-widget/ui/src/index.scss +++ b/modules/@apostrophecms/form-widget/ui/src/index.scss @@ -13,6 +13,7 @@ $apos-form-spacing: 20px; } .apos-form-input, +.apos-form-group, .apos-form-fieldset { margin-bottom: $apos-form-spacing; } diff --git a/package.json b/package.json index d23bf75..6f10e51 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "form builder" ], "devDependencies": { - "apostrophe": "^3.4.0", + "apostrophe": "^3.58.1", "eslint": "^8.50.0", "eslint-config-apostrophe": "^4.1.0", "eslint-config-standard": "^17.1.0", @@ -38,4 +38,4 @@ "dependencies": { "connect-multiparty": "^2.2.0" } -} \ No newline at end of file +} diff --git a/ui/src/index.scss b/ui/src/index.scss index cacabb7..b142a7e 100644 --- a/ui/src/index.scss +++ b/ui/src/index.scss @@ -11,6 +11,7 @@ $apos-form-spacing: 35px; } .apos-form-input, +.apos-form-group, .apos-form-fieldset { .apos-modal & { margin-bottom: $apos-form-spacing;