active_scaffold 4.3.1 → 4.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8426370774f998d440d6ba62749ce0debb8b5caf5a050330b21c77eb34849e17
-  data.tar.gz: 60f8897a05d79cc248c5059321b42152361f5f79b24069586e46b2bd209e738e
+  metadata.gz: cafbb1cbb0273e33d48ba6efb723a4ac6abd3678c559031bbc10d1b608f61ad5
+  data.tar.gz: 7e835a08a8b21df39301360a62db0257826b5e1a654c18ef2e8fbc92d4278436
 SHA512:
-  metadata.gz: be457e4b9bc57e9e4f657642912ff5396bad888107ef9a9e27ee3cf0457e5cf8e872f2d20ee08379fa1c42105e223f8e4fd9ae43d64c6f7eececa1c6212250e4
-  data.tar.gz: 7c764c174e950240a3da87b096ed7891ed571c81880e7f42161744a591c3de626f5b14914ddb0d7b7c9500b12e48d2be2b06bd11d071f3174467da42d3627cbf
+  metadata.gz: 475d62edc638cfefd7d43bf86a033d842f387968d9e90fc83b61b3da5cfc3f688e3ab8ee200ba7a56f7cebfe9659ad108494618207104ff65b1c9bad67a738c9
+  data.tar.gz: b4eb39a97611806f10c625111a41aa67061d35093c5caae3f89673516f3785c1692d04a3e87de3f7e8174a0b286818c10a253ec449d10f1ab8aada1ef1547cbd

data/CHANGELOG.rdoc

@@ -1,4 +1,29 @@
-- Fix escaping URL in JS response, fixing auto paginate and response for actions with render_parent
+= 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
+
+= 4.3.1
+- Support Ruby 4
+- Fix date picker options translated as strings, preserving boolean and integer values
+- Fix escaping URLs in JavaScript responses, fixing auto pagination and actions with render_parent
 
 = 4.3.0
 - Support translating enums (or options for :select form_ui on any column) nested in the pluralized name of the column, activerecord.attributes.model_name.pluralized_column.enum_value, defaults to old way activerecord.attributes.model_name.enum_value

data/README.md

@@ -124,7 +124,7 @@ 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 %>

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();
       },
@@ -150,6 +224,14 @@
           if (opts.disabled) jQuery(this).find('.ui-slider-handle').hide();
         });
       },
+      activate_tab: function(tab_ctrl) {
+        tab_ctrl = jQuery(tab_ctrl);
+        var tabbed = tab_ctrl.closest('.tabbed');
+        tabbed.find('.nav-tabs .active').removeClass('active');
+        tabbed.find('.tab-content .active').removeClass('in active');
+        tab_ctrl.addClass('active');
+        jQuery(tab_ctrl.attr('href')).addClass('in active');
+      },
       load_embedded: function(element) {
         jQuery('.active-scaffold-component .load-embedded', element).each(function(index, item) {
           item = jQuery(item);
@@ -158,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');
           });
         });
@@ -195,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) {
@@ -495,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));
         }
       },
 
@@ -526,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) {
@@ -1346,9 +1428,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) {
@@ -1513,8 +1608,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();
       });
 
@@ -1572,11 +1667,7 @@
       jQuery(document).on('click', '.active-scaffold .tabbed .nav-tabs a', function(e) {
         if (typeof jQuery().tab == 'function') return; // bootstrap tab plugin is loaded and will handle tabs
         e.preventDefault();
-        var tab_ctrl = jQuery(this), tabbed = tab_ctrl.closest('.tabbed')
-        tabbed.find('.nav-tabs .active').removeClass('active');
-        tabbed.find('.tab-content .active').removeClass('in active');
-        tab_ctrl.closest('li').addClass('active');
-        jQuery(tab_ctrl.attr('href')).addClass('in active');
+        ActiveScaffold.activate_tab(this);
       });
 
       jQuery(document).on('turbolinks:before-visit turbo:before-visit', function() {

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>

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

@@ -2,14 +2,14 @@
   url_options ||= params_for(action: :index, id: nil, search: nil)
   submit_text ||= :search
   xhr ||= request.xhr?
-  options = {
+  options = as_element_attributes(
+    :field_search_form,
     id: element_form_id(action: 'search'),
-    class: 'as_form search',
+    class: "as_form search#{' floating-footer' if active_scaffold_config.field_search.floating_footer}",
     remote: xhr,
     data: {loading: true},
     method: :get
-  }
-  options[:class] += ' floating-footer' if active_scaffold_config.field_search.floating_footer
+  )
   
   hidden_params = url_options.except(:controller, :action, :id, :search).to_query.split(Rack::Utils::DEFAULT_SEP)
 -%>
@@ -22,9 +22,9 @@
 
   <%= render 'field_search_columns', columns: active_scaffold_config.field_search.columns %>
 
-  <p class="form-footer">
+  <%= as_element :field_search_footer, class: 'form-footer' do %>
     <%
-      reset_attrs = {class: 'reset'}
+      reset_attrs = {class: ''}
       if active_scaffold_config.field_search.reset_form
         reset_attrs[:data] = {reset: true}
       else
@@ -32,8 +32,8 @@
         reset_attrs.merge! remote: true, data: {refresh: true}
       end
     %>
-    <%= submit_tag as_(submit_text), class: 'submit' %>
-    <%= link_to as_(:reset), url_for(url_options.merge(search: '')), reset_attrs unless local_assigns[:skip_reset] %>
+    <%= submit_tag as_(submit_text), as_element_attributes(:field_search_submit) %>
+    <%= link_to as_(:reset), url_for(url_options.merge(search: '')), as_element_attributes(:field_search_reset, **reset_attrs) unless local_assigns[:skip_reset] %>
     <%= loading_indicator_tag(action: :search) %>
-  </p>
+  <% end %>
 </form>