Support for non-form slideouts

Resolves #13593
Resolves #17187

Author: brandonkelly

CHANGELOG-WIP.md

@@ -26,3 +26,4 @@
 - Added `craft\web\Request::getValidatedQueryParam()`.
 - Added the `buttonGroup` and `buttonGroupField` macros to the `_includes/forms.twig` template.
 - Added the `_includes/forms/buttonGroup.twig` template.
+- `Craft.CpScreenSlideout` now supports overriding the `closeOnEsc`, `closeOnShadeClick`, `containerElement`, and `containerAttributes` settings. Slideouts with a non-`<form>` container element won’t get a “Save” button, and the close button will be labelled “Close” rather than “Cancel”. ([#13593](https://github.com/craftcms/cms/discussions/13593))

src/web/assets/cp/dist/cp.js

@@ -55,7 +55,20 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
 
     init: function (action, settings) {
       this.action = action;
-      this.setSettings(settings, Craft.CpScreenSlideout.defaults);
+
+      settings = Object.assign({}, Craft.CpScreenSlideout.defaults, settings);
+      Object.assign(settings.containerAttributes, {
+        id: `cp-screen-${Math.floor(Math.random() * 100000000)}`,
+        class: 'cp-screen',
+      });
+      const isForm = settings.containerElement === 'form';
+      if (isForm) {
+        Object.assign(settings.containerAttributes, {
+          action: '',
+          method: 'post',
+          novalidate: '',
+        });
+      }
 
       this.fieldsWithErrors = [];
 
@@ -124,29 +137,20 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
       this.$cancelBtn = $('<button/>', {
         type: 'button',
         class: 'btn',
-        text: Craft.t('app', 'Cancel'),
+        text: isForm ? Craft.t('app', 'Cancel') : Craft.t('app', 'Close'),
       }).appendTo($btnContainer);
-      this.$saveBtn = Craft.ui
-        .createSubmitButton({
-          label: Craft.t('app', 'Save'),
-          spinner: true,
-        })
-        .appendTo($btnContainer);
+      if (isForm) {
+        this.$saveBtn = Craft.ui
+          .createSubmitButton({
+            label: Craft.t('app', 'Save'),
+            spinner: true,
+          })
+          .appendTo($btnContainer);
+      }
 
       let $contents = this.$header.add(this.$body).add(this.$footer);
 
-      this.base($contents, {
-        containerElement: 'form',
-        containerAttributes: {
-          id: `cp-screen-${Math.floor(Math.random() * 100000000)}`,
-          action: '',
-          method: 'post',
-          novalidate: '',
-          class: 'cp-screen',
-        },
-        closeOnEsc: false,
-        closeOnShadeClick: false,
-      });
+      this.base($contents, settings);
 
       this.$container.data('cpScreen', this);
       this.on('beforeClose', () => {
@@ -817,9 +821,13 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
   },
   {
     defaults: {
+      containerElement: 'form',
+      containerAttributes: {},
       params: {},
       requestOptions: {},
       showHeader: null,
+      closeOnEsc: false,
+      closeOnShadeClick: false,
       closeOnSubmit: true,
       onLoad: () => {},
       onSubmit: () => {},