active_scaffold 4.3.2 → 4.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d91707ceb87840fe28313d879f1c013d577ee96ed32bebe8943a39179cdbf380
-  data.tar.gz: 43e8949c1b351f672f11c99f6df2cf274262df5e3fbd7ce1c75b10f49c290ef3
+  metadata.gz: 62f92c20382d4b5a33b53bb1525e677d81259a2d89a51996caefcb68ab314ed2
+  data.tar.gz: 2b8b5f59b6bdf856af6bdb4cfd5697caca0095960c41278bdb16ea5d51e0d03b
 SHA512:
-  metadata.gz: a28f9c8088844f67c7cd5dea3c9221f15d998d6fcb89617639bb5092501e21a5ac2d5c49927877244d5b2b99579da370272203caec7b3159c9035dafdc02f7c1
-  data.tar.gz: c49905306ccda62812b8ca6ed24d25fc4c490948f56cfd2a1ab9e403fc483962080f4b0911e29db9dce97572fd82473a5a65de3f0c5a26bce95a1449058fcece
+  metadata.gz: cffce904d4531775442f630fe004153a6ff602fdf7d1d416601712038324d0ad27b75c0e075dca01cefe0cc05d103769de538c2295ae5ab0d670a85944bf59c7
+  data.tar.gz: d7b32cbea9ac2da0d506de89ccd6dd5fbfefd7f3565780e4c93d97308bf2e1808d3a4bf396e63d7f7aeaedef7b72efaa2dd03c1d9f63fb7f49390a23382e8bdf

data/CHANGELOG.rdoc

@@ -1,3 +1,29 @@
+= 4.4.1
+- Avoid unnecessary DISTINCT in searches without joins or with only belongs_to joins, fixing PostgreSQL searches on models with json columns
+- Update install generator for the supported rails versions and asset pipelines
+- Fix rendering field descriptions and tabbed forms when custom input helpers return frozen strings
+- Fix inline action links with rails-ujs on Rails 8.1 by inserting the raw HTML response instead of its parsed Document
+- Preserve nested ActiveScaffold session changes with activerecord-session_store 2.3.0
+
+= 4.4.0
+- Add support for local sorting using JS when the list has no pagination
+- Add UI rendering customization for CSS framework and theme integration: configure tags and HTML attributes for named elements, use context-aware procs, and override focused helpers when structural markup must change
+- Fix draggable lists to set hover class on the list while dragging
+- Support defining more options for jQuery.sortable with ActiveScaffold.js_config[:draggable_lists_options]
+- Support changing highlight duration with ActiveScaffold.js_config[:highlight]
+- ActiveScaffold now calls order with hash, leaving the quoting of tables and columns to rails, Arel.sql must be called on the values set on sort_by if rails requires it
+- Column search_sql accepts a symbol and uses symbol by default, delay quoting until query is generated, strings are still supported for cross-table columns or functions
+- Use nonce: true in active_scaffold_javascript_tag so rails app can setup CSP with nonce in script-src
+- Filtering by params support using range syntax (A..B) supports infinite ranges now, such as ..A or A..
+- Speed up listing when all records fit in the first page and it's not full, count query can be avoided.
+- Better PostgreSQL support, accept condition from URL for timestamp and timestamptz columns from PostgreSQL, as done with datetime MySQL columns
+- Applied and ignored filters (due to be disallowed or unknown) are tracked with @filter_states
+- Fix cache column counts on PostgreSQL when the association has order
+- Fix list with ordering using sql functions and left joins in PostgreSQL
+- Columns with includes and searching in other table won't have includes eager loaded in the same query when they are in the list columns, as may load only the records matching the search. Also, makes aliases when searching in multiple associations on the same table not depending on what columns are in the list columns.
+- Support configuring the text search operator per column, defaulting to LIKE for collated PostgreSQL columns
+- return empty collection for out-of-range method-sorted pages
+
 = 4.3.2
 - Fix adding tab in tabbed forms
 

data/README.md

@@ -41,11 +41,9 @@ Add jquery-rails to Gemfile, or handle jquery with other tools like webpack or i
 gem 'jquery-rails'
 ```
 
-For rails 7.x, install generator will add `active_scaffold` to `config/importmap.rb`, `app/javascript/application.js`, and `active_scaffold/manifest.js` to `app/assets/config/manifest.js`. It will add `jquery` and `jquery_ujs` to all the 3 files if jquery-rails gem is available.
+On supported Rails versions (7.2 and 8.x), the install generator adds the ActiveScaffold route concerns and the lines required to load its JavaScript and stylesheets for the detected asset pipeline. With import maps, this includes both the pins in `config/importmap.rb` and the imports in `app/javascript/application.js`. With Propshaft, it adds the required helpers to the application layout; with Sprockets, it updates the asset manifests instead.
 
-For rails 6.1, install generator will create `app/assets/javascripts/application.js`, add it, and `active_scaffold/manifest.js`, to `app/assets/config/manifest.js` and add `javascript_include_tag` in the layout, as ActiveScaffold doesn't work with webpack. It will add `jquery` to `app/assets/javascripts/application.js` too if query-rails gem is available, although Jquery may be loaded by packs too and it will work, it won't add `jquery_ujs` or `@rails/ujs` as it's added to `app/javascript/packs/application.js` by default.
-
--- TODO: Add notes about dartsass-rails for propshaft or dartsass-sprockets for sprockets.
+For Dart Sass, the generator adds the appropriate `@use` line to `app/assets/stylesheets/application.scss`. It can also update an older `application.css` or `application.css.erb` that contains Sprockets require directives. If `jquery-rails` is installed, the generator adds `jquery` and `jquery_ujs` to the same JavaScript setup. The exact lines for each supported setup are described in [Stylesheet Loading](#stylesheet-loading) and [Javascript Loading](#javascript-loading).
 
 Run the following commands
 
@@ -124,14 +122,14 @@ import 'jquery_ujs'
 import 'active_scaffold'
 ```
 
-In the layout, load the importmap modules and call active_scaffold_javascript_tag, that includes some script tags which was in js.erb when using sprockets, so JS ActiveScaffold dependencies are loaded (jquery UI if using jquery-ui-rails, and JS for other ActiveScaffold plugins and bridges): 
+In the layout, load the importmap modules and call active_scaffold_javascript_tag, that includes some script tags that were in js.erb when using sprockets, so JS ActiveScaffold dependencies are loaded (jquery UI if using jquery-ui-rails, and JS for other ActiveScaffold plugins and bridges): 
 
 ```erb
     <%= javascript_importmap_tags %>
     <%= active_scaffold_javascript_tag %>
 ```
 
-### Propshaft
+### Propshaft without import maps
 
 If you're not using importmaps, then you can load the JS files individually, but you only need to load jquery and jquery_ujs or rails_ujs, and then call active_scaffold_javascript_tag:
 

data/app/assets/javascripts/active_scaffold/active_scaffold.js

@@ -90,7 +90,7 @@
       },
       setup_history_state: function() {
         if (!jQuery('.active-scaffold').length) return;
-        var data = {}, current_search_item = jQuery('.active-scaffold .filtered-message[data-search]');
+        var data = {}, current_search_item = jQuery('.active-scaffold .messages-container [data-search]');
         if (current_search_item.length) {
           // store user settings enabled, update state with current page, search and sorting
           var sorted_columns = jQuery('th.sorted');
@@ -117,6 +117,80 @@
       auto_load_page: function(href, params) {
         jQuery.get(href, params, null, 'script');
       },
+      sort_table: function(table, column, descending) {
+        // Group rows: each group starts with a sortable row + its adapter rows
+        var groups = [], currentGroup = [], $tbody = table.find('.records:first');
+
+        $tbody.children('tr').each(function() {
+          var $row = $(this);
+          if (!$row.hasClass('as_adapter')) {
+            // Start a new group for sortable rows
+            if (currentGroup.length > 0) {
+              groups.push(currentGroup);
+            }
+            currentGroup = [$row];
+          } else {
+            // Add adapter row to current group (or create orphan group if none exists)
+            if (currentGroup.length > 0) {
+              currentGroup.push($row);
+            } else {
+              //groups.push([$row]); // Orphaned adapter
+            }
+          }
+        });
+        if (currentGroup.length > 0) {
+          groups.push(currentGroup);
+        }
+
+        // Sort groups by the first row's cell value
+        groups.sort(function(groupA, groupB) {
+          // Get sort key for group A (empty string if adapter-only group)
+          var keyA = ActiveScaffold.sort_value(groupA[0], column),
+            keyB = ActiveScaffold.sort_value(groupB[0], column),
+            comparison;
+
+          if (Array.isArray(keyA) && Array.isArray(keyB)) {
+            comparison = ActiveScaffold.compare_arrays(keyA, keyB);
+          } else if (typeof keyA === 'number' && typeof keyB === 'number') {
+            comparison = keyA - keyB;
+          } else {
+            comparison = keyA.toString().toLowerCase().localeCompare(keyB.toString().toLowerCase());
+          }
+
+          return descending ? -comparison : comparison;
+        });
+
+        // Rebuild tbody with sorted groups
+        $tbody.children().detach();
+        var fragment = document.createDocumentFragment(); // Create a DocumentFragment to minimize reflows
+        groups.forEach(function(group) {
+          group.forEach(function($row) {
+            fragment.appendChild($row[0]); // $row[0] is the DOM element
+          });
+        });
+        $tbody[0].appendChild(fragment);
+      },
+      sort_value: function(row, column) {
+        var $cell = row.find(`> .${column}-column`), value = $cell.data('sort-value');
+        if (value === undefined) value = $cell.text(); // Automatically strips HTML
+        return value;
+      },
+      compare_arrays: function(arrA, arrB) {
+        var len = Math.min(arrA.length, arrB.length);
+        for (var i = 0; i < len; i++) {
+          var a = arrA[i], b = arrB[i];
+
+          var isNumA = typeof a === 'number', isNumB = typeof b === 'number';
+          if (typeof a === 'number' && typeof b === 'number') {
+            if (a !== b) return a - b;
+          } else {
+            var cmp = a.toString().toLowerCase().localeCompare(b.toString().toLowerCase());
+            if (cmp !== 0) return cmp;
+          }
+        }
+        // If all elements so far are equal, shorter array comes first
+        return arrA.length - arrB.length;
+      },
       enable_js_form_buttons: function(element) {
         jQuery('.as-js-button', element).show();
       },
@@ -166,7 +240,7 @@
           item.closest('.active-scaffold-component').load(item.attr('href'), function(response, status, xhr) {
             if (status == 'error') {
               indicator.css({visibility: 'hidden'});
-              indicator.after(jQuery('<p>').html(item.data('error-msg')).addClass("error-message message server-error"));
+              indicator.after(item.data('error-msg'));
             } else jQuery(this).trigger('as:element_updated');
           });
         });
@@ -203,12 +277,12 @@
       },
       hide_empty_message: function(tbody) {
         if (this.records_for(tbody).length != 0) {
-          jQuery(tbody).parent().find('tbody.messages p.empty-message').hide();
+          jQuery(tbody).parent().find('.messages-container .empty-message').hide();
         }
       },
       show_empty_message: function(tbody) {
         if (this.records_for(tbody).length != 0) {
-          jQuery(tbody).parent().find('tbody.messages p.empty-message').hide();
+          jQuery(tbody).parent().find('.messages-container .empty-message').hide();
         }
       },
       reload_if_empty: function(tbody, url) {
@@ -503,7 +577,7 @@
       highlight: function(element) {
         if (typeof(element) == 'string') element = jQuery('#' + element);
         if (typeof(element.effect) == 'function') {
-          element.effect("highlight", jQuery.extend({}, ActiveScaffold.config.highlight), 3000);
+          element.effect("highlight", jQuery.extend({duration: 3000}, ActiveScaffold.config.highlight));
         }
       },
 
@@ -534,7 +608,7 @@
         var source = jQuery(source);
         var element, container = source.closest('.sub-form-record'), selector = '';
         if (container.length === 0) {
-          container = source.closest('form > ol.form');
+          container = source.closest('form > .form');
           selector = '>';
         }
         if (options.traverse) {
@@ -1265,7 +1339,12 @@
         return true;
       });
       jQuery(document).on('ajax:success', 'a.as_action', function(event, response) {
-        if (event.detail && !response) response = event.detail[0];
+        if (event.detail && !response) {
+          response = event.detail[0];
+          // rails-ujs parses text/html responses into a Document, which cannot be inserted and
+          // loses table rows parsed outside a table, so use the raw response from the XHR.
+          if (response instanceof Document && event.detail[2]) response = event.detail[2].responseText;
+        }
         var action_link = ActiveScaffold.ActionLink.get(jQuery(this));
         if (action_link) {
           if (action_link.position) {
@@ -1354,9 +1433,22 @@
         return true;
       });
       jQuery(document).on('ajax:before', 'a.as_sort', function(event) {
-        var as_sort = jQuery(this);
-        as_sort.closest('th').addClass('loading');
-        return true;
+        var as_sort = jQuery(this), table = as_sort.closest('.list-table'),
+          header_cell = as_sort.closest('[class$="-column_heading"],[class*="-column_heading "]'),
+          ascending = header_cell.is('.sorted.asc');
+        if (!header_cell.is('.skip-local-sorting') && table.is('.local-sorting')) {
+          var match = header_cell.attr('class').match(/\b([^\s]+)-column_heading\b/);
+          if (match) {
+            ActiveScaffold.sort_table(table, match[1], ascending);
+            header_cell.siblings().addBack().removeClass('sorted asc desc');
+            header_cell.addClass('sorted ' + (ascending ? 'desc' : 'asc'));
+            event.preventDefault();
+            return false;
+          }
+        } else {
+          as_sort.closest('th').addClass('loading');
+          return true;
+        }
       });
       jQuery(document).on('ajax:error', 'a.as_sort', function(event, xhr, status, error) {
         if (event.detail && !xhr) {
@@ -1521,8 +1613,8 @@
         return true;
       });
 
-      jQuery(document).on('click', '.message a.close', function(e) {
-        ActiveScaffold.hide(jQuery(this).closest('.message'));
+      jQuery(document).on('click', '.as-msg .msg-close', function(e) {
+        ActiveScaffold.hide(jQuery(this).closest('.as-msg'));
         e.preventDefault();
       });
 

data/app/assets/javascripts/active_scaffold/draggable_lists.js

@@ -13,15 +13,16 @@
     });
     check_buttons.find('.check-all, .uncheck-all').attr('title', function() { return jQuery(this).text() });
     element.after(check_buttons);
-    var options = {
-      hoverClass: 'hover',
+    var options = jQuery.extend({
+      over: function(event, ui) { jQuery(this).addClass("hover"); },
+      out: function(event, ui) { jQuery(this).removeClass("hover"); },
       containment: '',
       receive: function(event, ui) {
         var input = jQuery('input:checkbox', ui.item), selected = input.prop('checked');
         input.prop('checked', jQuery(this).hasClass('selected'));
         if (selected != input.prop('checked')) input.trigger('change');
       }
-    };
+    }, ActiveScaffold.config.draggable_lists_options || {});
     jQuery(element).sortable(jQuery.extend(options, {connectWith: '#'+list_selected.attr('id')}));
     jQuery(list_selected).sortable(jQuery.extend(options, {connectWith: '#'+element.attr('id')}));
     return element;

data/app/assets/javascripts/active_scaffold/load.js

@@ -76,11 +76,26 @@
 
   const initializeJQueryUI = function() {
     if (config.jqueryUiIncluded && window.jQuery) {
-      // Check if datepicker exists
-      if (jQuery.datepicker) {
-        // Execute the datepicker localization
-        // This will be replaced by actual generated code
-        eval(config.datepickerLocalization);
+      applyDatepickerLocalization();
+    }
+  };
+
+  const applyDatepickerLocalization = () => {
+    const localization = config.datepickerLocalization;
+    if (!localization) return;
+    const { locale, datepickerRegional, timepickerRegional } = localization;
+
+    if (jQuery.datepicker && datepickerRegional) {
+      Object.assign(jQuery.datepicker.regional, datepickerRegional);
+      if (jQuery.datepicker.regional[locale]) {
+        jQuery.datepicker.setDefaults(jQuery.datepicker.regional[locale]);
+      }
+    }
+
+    if (jQuery.timepicker && timepickerRegional) {
+      Object.assign(jQuery.timepicker.regional, timepickerRegional);
+      if (jQuery.timepicker.regional[locale]) {
+        jQuery.timepicker.setDefaults(jQuery.timepicker.regional[locale]);
       }
     }
   };

data/app/assets/stylesheets/active_scaffold/_images.scss

@@ -1,3 +1,32 @@
+.active-scaffold-header div.actions a.new,
+.active-scaffold-header div.actions a.new_existing,
+.active-scaffold-header div.actions a.show_search,
+.active-scaffold-header div.actions a.show_config_list,
+.active-scaffold div.actions div.action_group div {
+  margin: 0;
+  padding: 5px 5px 5px 25px;
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+}
+
+.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.new,
+.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.new_existing,
+.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.show_search,
+.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.show_config_list,
+.active-scaffold .active-scaffold .active-scaffold-header div.actions div.action_group > div {
+  margin: 0;
+  padding: 1px 5px 1px 20px;
+  background-position: 1px 50%;
+  background-repeat: no-repeat;
+}
+
+.active-scaffold th.asc a,
+.active-scaffold th.desc a,
+.active-scaffold th.loading a {
+  background-position: right 50%;
+  background-repeat: no-repeat;
+}
+
 .active-scaffold-header div.actions div.action_group div {
   background-image: url("active_scaffold/gears.png"); /* default icon for actions or override with css */
 }
@@ -45,10 +74,21 @@
 
 .active-scaffold a.inline-adapter-close {
   background-image: url("active_scaffold/close.png");
+  text-indent: 1000px;
+  width: 16px;
+  height: 17px;
+  background-repeat: no-repeat;
+  overflow: hidden;
 }
 
 .active-scaffold .sub-form .association-record a.destroy {
   background-image: url("active_scaffold/cross.png");
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  text-indent: -4000px;
+  background-repeat: no-repeat;
+  overflow: hidden;
 }
 
 .as_touch a.inline-adapter-close {
@@ -56,10 +96,22 @@
 }
 .active-scaffold .refresh-link {
   background-image: url("active_scaffold/refresh.png");
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 25px;
+  text-indent: 26px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.active-scaffold .refresh-link.add-tab {
+  background-image: url("active_scaffold/add.png");
 }
 
 .ui-dialog .loading::after {
-  background: url("active_scaffold/indicator.gif") no-repeat;
+  background-image: url("active_scaffold/indicator.gif");
+  background-repeat: no-repeat;
   content: 'Loading...';
   padding-left: 20px;
 }

data/app/assets/stylesheets/active_scaffold/_layout.scss

@@ -72,8 +72,6 @@ text-decoration: none;
 padding: 1px 2px;
 white-space: nowrap;
 margin-left: 5px;
-background-position: 1px 50%;
-background-repeat: no-repeat;
 }
 
 .active-scaffold div.actions a {
@@ -120,28 +118,6 @@ top: -3px;
 opacity: 0.5;
 }
 
-.active-scaffold-header div.actions a.new,
-.active-scaffold-header div.actions a.new_existing,
-.active-scaffold-header div.actions a.show_search,
-.active-scaffold-header div.actions a.show_config_list,
-.active-scaffold div.actions div.action_group div {
-margin:0;
-padding: 5px 5px 5px 25px;
-background-position: 5px 50%;
-background-repeat: no-repeat;
-}
-
-.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.new,
-.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.new_existing,
-.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.show_search,
-.active-scaffold .active-scaffold .active-scaffold-header div.actions > a.show_config_list,
-.active-scaffold .active-scaffold .active-scaffold-header div.actions div.action_group > div {
-margin:0;
-padding: 1px 5px 1px 20px;
-background-position: 1px 50%;
-background-repeat: no-repeat;
-}
-
 .active-scaffold div.actions a.disabled:hover,
 .active-scaffold div.actions a.disabled:hover {
 background-color: transparent;
@@ -179,12 +155,6 @@ padding: 2px 5px;
 padding-right: 18px;
 }
 
-.active-scaffold th.asc a,
-.active-scaffold th.desc a,
-.active-scaffold th.loading a {
-  background: right 50% no-repeat;
-}
-
 .active-scaffold th .mark_heading {
 margin-left: 5px;
 }
@@ -325,20 +295,6 @@ text-align: left;
   border-top: none;
 }
 
-.active-scaffold .actions .action_group ul li div {
-  margin: 0;
-  padding: 5px 5px 5px 25px;
-  background-position: 5px 50%;
-  background-repeat: no-repeat;
-}
-
-.active-scaffold .actions .action_group ul li a {
-  display: block;
-  margin: 0;
-  padding: 5px 5px 5px 25px;
-  background-position: 5px 50%;
-  background-repeat: no-repeat;
-}
 .active-scaffold .actions .action_group.dyn > ul li a {
   padding-left: 5px;
 }
@@ -376,11 +332,6 @@ border-bottom: none;
 
 .active-scaffold a.inline-adapter-close {
 float: right;
-text-indent: -4000px;
-width: 16px;
-height: 17px;
-background: 0 0 no-repeat;
-overflow: hidden;
 }
 
 /* Nested
@@ -906,15 +857,6 @@ padding: 1px;
 border: solid 1px;
 }
 
-.active-scaffold .refresh-link {
-display: inline-block;
-width: 25px;
-text-indent: 26px;
-overflow: hidden;
-background-position: 5px 50%;
-background-repeat: no-repeat;
-}
-
 .active-scaffold .checkbox-list {
 padding-left: 0px;
 }
@@ -1078,13 +1020,7 @@ clear: left;
 
 .active-scaffold .sub-form .association-record a.destroy {
 font-weight: bold;
-display: inline-block;
-height: 16px;
 padding: 0;
-width: 16px;
-text-indent: -4000px;
-background: 0 0 no-repeat;
-overflow: hidden;
 }
 .active-scaffold .sub-form .association-record * + a.destroy {
   margin-left: 5px;
@@ -1191,7 +1127,7 @@ font-size: 100%;
 .as_touch a.inline-adapter-close {
 width: 25px;
 height: 27px;
-background: 0 0 no-repeat;
+background-repeat: no-repeat;
 }
 
 .as_touch .as_paginate {
@@ -1230,7 +1166,6 @@ padding: 7px 5px 7px 25px;
 .as_touch .active-scaffold div.actions > a.show_config_list,
 .as_touch .active-scaffold div.actions div.action_group > div {
 padding: 7px 5px 7px 25px;
-background-position: 5px 50%;
 }
 
 .as_touch .actions .action_group ul li div {

data/app/views/active_scaffold_overrides/_add_existing_form.html.erb

@@ -8,21 +8,27 @@ options = {id: element_form_id(action: :add_existing),
   options[:remote] = true if xhr
   form_tag url_options, options -%>
 
-  <h4><%= active_scaffold_config.nested.label -%></h4>
+  <%= as_element :form_title, active_scaffold_config.nested.label -%>
 
-  <% if xhr -%>
-    <div id="<%= element_messages_id(action: :add_existing) %>" class="messages-container"></div>
-  <% else -%>
-    <%= render 'form_messages' %>
+  <%= as_element :form_messages_container, id: element_messages_id(action: :add_existing), class: 'messages-container' do %>
+    <%= render 'form_messages' unless xhr %>
   <% end -%>
 
-  <label for="<%= "record_#{active_scaffold_config.model}" %>"><%= active_scaffold_add_existing_label %></label>
-  <%= active_scaffold_add_existing_input(name: 'associated_id', url_options: url_options, object: nested_parent_record) %>
 
-  <p class="form-footer">
-    <%= submit_tag as_(:add), class: 'submit' %>
-    <%= link_to as_(:cancel), main_path_to_return, class: 'as_cancel', remote: true %>
+  <%= as_element :fields_container, class: 'form' do %>
+  <%= form_attribute_html(
+        nil,
+        label_tag("record_#{active_scaffold_config.model}", active_scaffold_add_existing_label),
+        active_scaffold_add_existing_input(name: 'associated_id', url_options: url_options, object: nested_parent_record),
+        nil,
+        {}
+      ) %>
+  <% end %>
+
+  <%= as_element :form_footer, class: 'form-footer' do %>
+    <%= submit_tag as_(:add), as_element_attributes(:form_submit) %>
+    <%= link_to as_(:cancel), main_path_to_return, as_element_attributes(:form_cancel, class: 'as_cancel', remote: true) %>
     <%= loading_indicator_tag(action: :add_existing, id: params[:id]) %>
-  </p>
+  <% end %>
 
 </form>

data/app/views/active_scaffold_overrides/_base_form.html.erb

@@ -25,17 +25,27 @@
    cancel_link = true if cancel_link.nil?
    submit_text ||= form_action
    apply_text ||= :"#{form_action}_apply"
+   cancel_text ||= :cancel
+   cancel_url ||= main_path_to_return
    body_partial ||= 'form'
    form_id = element_form_id(action: form_action, id: @record&.id)
+
+   if cancel_link
+     cancel_options = {class: 'as_cancel'}
+     cancel_options[:remote] = true if xhr # cancel link doesn't have to care about multipart forms
+     cancel_options = cancel_options.smart_merge cancel_attrs if local_assigns[:cancel_attrs]
+   end
 %>
 <%=
-options = {id: form_id,
-           multipart: multipart,
-           class: "as_form #{form_action} #{'floating-footer' if floating_footer} #{"descriptions-#{field_descriptions}" if field_descriptions != :show}",
-           method: method,
-           'data-loading' => defined?(loading) ? loading : true}
-cancel_options = {class: 'as_cancel'}
-cancel_options[:remote] = true if xhr # cancel link does nt have to care about multipart forms
+options = as_element_attributes(
+  :form,
+  id: form_id,
+  multipart: multipart,
+  class: "as_form #{form_action} #{'floating-footer' if floating_footer} #{"descriptions-#{field_descriptions}" if field_descriptions != :show}",
+  method: method,
+  data: {loading: defined?(loading) ? loading : true}
+)
+
 if xhr && multipart # file_uploads
   form_remote_upload_tag url_options.merge(iframe: true), options
 else
@@ -44,26 +54,26 @@ else
 end
 -%>
   <%= hidden_field :record, @record.class.locking_column if add_locking_column && @record.persisted? && @record.locking_enabled? %>
-  <h4><%= headline -%></h4>
+  <%= as_element :form_title, headline -%>
 
-  <div id="<%= element_messages_id(action: form_action) %>" class="messages-container">
+  <%= as_element :form_messages_container, id: element_messages_id(action: form_action), class: 'messages-container' do %>
     <% unless xhr %>
-      <p class="error-message message server-error" style="display:none;">
+      <%= server_error_msg class: 'as-msg', style: 'display:none;' do %>
         <%= as_(:internal_error).html_safe %>
-        <a href="#" class="close" title="<%= as_(:close).html_safe %>"><%= as_(:close).html_safe %></a>
-      </p>
+        <%= as_element :message_close, as_(:close), class: 'msg-close', title: as_(:close) %>
+      <% end %>
     <% end %>
     <%= render 'form_messages' %>
-  </div>
+  <% end %>
 
   <%= render body_partial, columns: columns, form_action: form_action, scope: scope %>
 
-  <p class="form-footer">
-    <%= submit_tag as_(submit_text), class: 'submit' if !persistent || persistent == :optional %>
-    <%= submit_tag as_(apply_text), class: 'submit', name: 'dont_close' if persistent %>
-    <%= link_to(as_(:cancel), main_path_to_return, cancel_options) if cancel_link %>
-    <%= loading_indicator_tag(action: form_action, id: @record&.id) %>
+  <%= as_element :form_footer, class: 'form-footer' do %>
+    <%= submit_tag as_(submit_text), as_element_attributes(:form_submit) if !persistent || persistent == :optional %>
+    <%= submit_tag as_(apply_text), as_element_attributes(:form_apply, name: 'dont_close') if persistent %>
+    <%= link_to as_(cancel_text), cancel_url, as_element_attributes(:form_cancel, **cancel_options) if cancel_link %>
+    <%= loading_indicator_tag action: form_action, id: @record&.id %>
     <%= render footer_extension, form_action: form_action if footer_extension %>
-  </p>
+  <% end %>
 
 </form>