Merge pull request #40 from apostrophecms/feature/stepper

Feature/stepper

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

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:
 

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)",

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({

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',

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
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+  }
+};

modules/@apostrophecms/form-group-widget/views/widget.html

@@ -0,0 +1,13 @@
+{% set prependIfPrefix = apos.modules['@apostrophecms/form'].prependIfPrefix %}
+
+<div data-apos-form-groups class="apos-form-groups {{ prependIfPrefix('__groups') }}">
+  {% for group in data.widget.groups %}
+    <fieldset
+      class="apos-form-group {{ prependIfPrefix('__group') }}"
+      data-index="{{ loop.index }}"
+    >
+      <legend>{{ group.label }}</legend>
+      {% area group, 'contents' %}
+    </fieldset>
+  {% endfor %}
+</div>

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;
 }

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"
   }
-}
+}

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;