diff --git a/CHANGELOG.md b/CHANGELOG.md index 131383c..30ca4ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Adds * Add group widget which is a fieldset container for other form widgets. +* Add multiple and size fields to select widget. ### Fixes diff --git a/README.md b/README.md index 5add8a0..6c18319 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,25 @@ module.exports = { }; ``` +#### select field widget option + +The select field widget has an option `allowMultiple` to allow multiple select options to be selected. The default value is `false`. + +Once set to `true`, it will add two new fields to the select field widget schema: + +| Property | Type | Description | +|---|---|---| +| `allowMultiple` | Boolean | Set to `true` to enable multiple values to be selected in the select widget options, default value is `false` | +| `size` | Integer | Number of options in the list that should be visible, default value is `0` | + +```javascript +// modules/@apostrophecms/form-select-field/index.js +modules.exports = { + options: { + allowMultiple: false + } +} +``` ### Supporting file field uploads safely diff --git a/i18n/en.json b/i18n/en.json index 1a1b6e6..a8a5249 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -84,8 +84,10 @@ "recaptchaValidationError": "There was a problem validating your reCAPTCHA verification submission.", "requiredError": "This field is required", "select": "Select input", + "selectAllowMultiple": "Allow multiple options to be selected", "selectBlank": "", "selectChoice": "Select input options", + "selectSize": "Number of options in the list that should be visible", "submitLabel": "Submit button label", "templateOptional": "(Optional)", "text": "Text input", diff --git a/modules/@apostrophecms/form-select-field-widget/index.js b/modules/@apostrophecms/form-select-field-widget/index.js index c6e5c46..1183ce9 100644 --- a/modules/@apostrophecms/form-select-field-widget/index.js +++ b/modules/@apostrophecms/form-select-field-widget/index.js @@ -2,32 +2,55 @@ module.exports = { extend: '@apostrophecms/form-base-field-widget', options: { label: 'aposForm:select', - icon: 'form-select-icon' + icon: 'form-select-icon', + allowMultiple: false }, - fields: { - add: { - choices: { - label: 'aposForm:selectChoice', - type: 'array', - titleField: 'label', - required: true, - fields: { - add: { - label: { - type: 'string', - required: true, - label: 'aposForm:checkboxChoicesLabel', - help: 'aposForm:checkboxChoicesLabelHelp' - }, - value: { - type: 'string', - label: 'aposForm:checkboxChoicesValue', - help: 'aposForm:checkboxChoicesValueHelp' - } + fields(self) { + const optionalFields = self.options.allowMultiple + ? { + allowMultiple: { + label: 'aposForm:selectAllowMultiple', + type: 'boolean', + def: false + }, + size: { + label: 'aposForm:selectSize', + type: 'integer', + def: 0, + min: 0, + if: { + allowMultiple: true } } } - } + : {}; + + return { + add: { + choices: { + label: 'aposForm:selectChoice', + type: 'array', + titleField: 'label', + required: true, + fields: { + add: { + label: { + type: 'string', + required: true, + label: 'aposForm:checkboxChoicesLabel', + help: 'aposForm:checkboxChoicesLabelHelp' + }, + value: { + type: 'string', + label: 'aposForm:checkboxChoicesValue', + help: 'aposForm:checkboxChoicesValueHelp' + } + } + } + }, + ...optionalFields + } + }; }, methods (self) { return { @@ -38,5 +61,21 @@ module.exports = { output[widget.fieldName] = self.apos.launder.select(input[widget.fieldName], choices); } }; + }, + extendMethods (self) { + return { + async output(_super, req, widget, options, _with) { + return _super( + req, + { + ...widget, + allowMultiple: (self.options.allowMultiple && widget.allowMultiple) ?? false, + size: widget.size ?? 0 + }, + options, + _with + ); + } + }; } }; diff --git a/modules/@apostrophecms/form-select-field-widget/views/widget.html b/modules/@apostrophecms/form-select-field-widget/views/widget.html index 1c58568..30d9c58 100644 --- a/modules/@apostrophecms/form-select-field-widget/views/widget.html +++ b/modules/@apostrophecms/form-select-field-widget/views/widget.html @@ -17,6 +17,7 @@