active_element 0.0.19 → 0.0.21

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f38b4565ed14ef722b7acd88d3c75742d4f07bdd0ba1e83459d4ebeed6e2adf3
-  data.tar.gz: cbc7e900bf6d78d571602c172e6dcb535a14d328b426477d32ad0197ff584f3b
+  metadata.gz: 61176f5d488163d3f19599507ea4c7a2af3652f682df78e825efb199b1b2099d
+  data.tar.gz: 41af730b7f551b759c79cb0a541e1ba6732d4e45182b902987fbe4c92e42df0c
 SHA512:
-  metadata.gz: e9561a790971bfc4a71d4fc18269f3b6a5972e3bcc788f12d448987d0483014a733eb16e04bfc3206f6c45a296fc2a5720955ddc4e45ed93261a72954013a64f
-  data.tar.gz: c0a6457abe28261de7f42e9b9e0802c04f6e40363cc92b72bce25736ddcd9dbbbf858a253ce5a0c083baa943ba72301110473cc2566303d5118fb5c66fb41df0
+  metadata.gz: db6f404ef4eda9dff01f1dfb3c6462cc5a46af1b27889be6dd46984404b478143b9c5d3ce939bbb7e96a251038984f4fc6f98eef73066188916803143b6f8357
+  data.tar.gz: 4be7450ece40217768ce7ce6a8fee08c830438039177ebbeb40f228b0d2fc406cd8dd6417dcab9aba2222a28e902b4548ad7cbf7c3036cd71fc25cd88f791c12

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    active_element (0.0.19)
+    active_element (0.0.20)
       bootstrap (~> 5.3.0alpha3)
       kaminari (~> 1.2)
       paintbrush (~> 0.1.2)
@@ -83,7 +83,7 @@ GEM
     autoprefixer-rails (10.4.16.0)
       execjs (~> 2)
     bcrypt (3.1.18)
-    bootstrap (5.3.2)
+    bootstrap (5.3.3)
       autoprefixer-rails (>= 9.1.0)
       popper_js (>= 2.11.8, < 3)
     brakeman (5.4.1)
@@ -150,7 +150,7 @@ GEM
     mini_mime (1.1.5)
     mini_portile2 (2.8.2)
     minitest (5.18.1)
-    net-imap (0.4.10)
+    net-imap (0.4.11)
       date
       net-protocol
     net-pop (0.1.2)
@@ -159,7 +159,7 @@ GEM
       timeout
     net-smtp (0.5.0)
       net-protocol
-    nio4r (2.7.1)
+    nio4r (2.7.3)
     nokogiri (1.15.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)

data/app/assets/javascripts/active_element/active_element.js

@@ -10,3 +10,4 @@
 //= require active_element/toast
 //= require active_element/popover
 //= require active_element/timezones
+//= require active_element/ae-ujs

data/app/assets/javascripts/active_element/ae-ujs.js

@@ -0,0 +1,531 @@
+/*
+Unobtrusive JavaScript
+https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts
+Released under the MIT license
+ */;
+
+/* Reduced and customized for ActiveElementUJS */
+
+(function() {
+  var context = this;
+
+  (function() {
+    (function() {
+      this.ActiveElementUJS = { linkClickSelector: 'a[data-ae-method]' };
+    }).call(this);
+  }).call(context);
+
+  var ActiveElementUJS = context.ActiveElementUJS;
+
+  (function() {
+    (function() {
+      var nonce;
+
+      nonce = null;
+
+      ActiveElementUJS.loadCSPNonce = function() {
+        var ref;
+        return nonce = (ref = document.querySelector("meta[name=csp-nonce]")) != null ? ref.content : void 0;
+      };
+
+      ActiveElementUJS.cspNonce = function() {
+        return nonce != null ? nonce : ActiveElementUJS.loadCSPNonce();
+      };
+
+    }).call(this);
+    (function() {
+      var expando, m;
+
+      m = Element.prototype.matches || Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector;
+
+      ActiveElementUJS.matches = function(element, selector) {
+        if (selector.exclude != null) {
+          return m.call(element, selector.selector) && !m.call(element, selector.exclude);
+        } else {
+          return m.call(element, selector);
+        }
+      };
+
+      expando = '_ujsData';
+
+      ActiveElementUJS.getData = function(element, key) {
+        var ref;
+        return (ref = element[expando]) != null ? ref[key] : void 0;
+      };
+
+      ActiveElementUJS.setData = function(element, key, value) {
+        if (element[expando] == null) {
+          element[expando] = {};
+        }
+        return element[expando][key] = value;
+      };
+
+      ActiveElementUJS.$ = function(selector) {
+        return Array.prototype.slice.call(document.querySelectorAll(selector));
+      };
+
+    }).call(this);
+    (function() {
+      var $, csrfParam, csrfToken;
+
+      $ = ActiveElementUJS.$;
+
+      csrfToken = ActiveElementUJS.csrfToken = function() {
+        var meta;
+        meta = document.querySelector('meta[name=csrf-token]');
+        return meta && meta.content;
+      };
+
+      csrfParam = ActiveElementUJS.csrfParam = function() {
+        var meta;
+        meta = document.querySelector('meta[name=csrf-param]');
+        return meta && meta.content;
+      };
+
+      ActiveElementUJS.CSRFProtection = function(xhr) {
+        var token;
+        token = csrfToken();
+        if (token != null) {
+          return xhr.setRequestHeader('X-CSRF-Token', token);
+        }
+      };
+
+      ActiveElementUJS.refreshCSRFTokens = function() {
+        var param, token;
+        token = csrfToken();
+        param = csrfParam();
+        if ((token != null) && (param != null)) {
+          return $('form input[name="' + param + '"]').forEach(function(input) {
+            return input.value = token;
+          });
+        }
+      };
+
+    }).call(this);
+    (function() {
+      var CustomEvent, fire, matches, preventDefault;
+
+      matches = ActiveElementUJS.matches;
+
+      CustomEvent = window.CustomEvent;
+
+      if (typeof CustomEvent !== 'function') {
+        CustomEvent = function(event, params) {
+          var evt;
+          evt = document.createEvent('CustomEvent');
+          evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+          return evt;
+        };
+        CustomEvent.prototype = window.Event.prototype;
+        preventDefault = CustomEvent.prototype.preventDefault;
+        CustomEvent.prototype.preventDefault = function() {
+          var result;
+          result = preventDefault.call(this);
+          if (this.cancelable && !this.defaultPrevented) {
+            Object.defineProperty(this, 'defaultPrevented', {
+              get: function() {
+                return true;
+              }
+            });
+          }
+          return result;
+        };
+      }
+
+      fire = ActiveElementUJS.fire = function(obj, name, data) {
+        var event;
+        event = new CustomEvent(name, {
+          bubbles: true,
+          cancelable: true,
+          detail: data
+        });
+        obj.dispatchEvent(event);
+        return !event.defaultPrevented;
+      };
+
+      ActiveElementUJS.stopEverything = function(e) {
+        fire(e.target, 'ujs:everythingStopped');
+        e.preventDefault();
+        e.stopPropagation();
+        return e.stopImmediatePropagation();
+      };
+
+      ActiveElementUJS.delegate = function(element, selector, eventType, handler) {
+        return element.addEventListener(eventType, function(e) {
+          var target;
+          target = e.target;
+          while (!(!(target instanceof Element) || matches(target, selector))) {
+            target = target.parentNode;
+          }
+          if (target instanceof Element && handler.call(target, e) === false) {
+            e.preventDefault();
+            return e.stopPropagation();
+          }
+        });
+      };
+
+    }).call(this);
+    (function() {
+      var AcceptHeaders, CSRFProtection, createXHR, cspNonce, fire, prepareOptions, processResponse;
+
+      cspNonce = ActiveElementUJS.cspNonce, CSRFProtection = ActiveElementUJS.CSRFProtection, fire = ActiveElementUJS.fire;
+
+      AcceptHeaders = {
+        '*': '*/*',
+        text: 'text/plain',
+        html: 'text/html',
+        xml: 'application/xml, text/xml',
+        json: 'application/json, text/javascript',
+        script: 'text/javascript, application/javascript, application/ecmascript, application/x-ecmascript'
+      };
+
+      ActiveElementUJS.ajax = function(options) {
+        var xhr;
+        options = prepareOptions(options);
+        xhr = createXHR(options, function() {
+          var ref, response;
+          response = processResponse((ref = xhr.response) != null ? ref : xhr.responseText, xhr.getResponseHeader('Content-Type'));
+          if (Math.floor(xhr.status / 100) === 2) {
+            if (typeof options.success === "function") {
+              options.success(response, xhr.statusText, xhr);
+            }
+          } else {
+            if (typeof options.error === "function") {
+              options.error(response, xhr.statusText, xhr);
+            }
+          }
+          return typeof options.complete === "function" ? options.complete(xhr, xhr.statusText) : void 0;
+        });
+        if ((options.beforeSend != null) && !options.beforeSend(xhr, options)) {
+          return false;
+        }
+        if (xhr.readyState === XMLHttpRequest.OPENED) {
+          return xhr.send(options.data);
+        }
+      };
+
+      prepareOptions = function(options) {
+        options.url = options.url || location.href;
+        options.type = options.type.toUpperCase();
+        if (options.type === 'GET' && options.data) {
+          if (options.url.indexOf('?') < 0) {
+            options.url += '?' + options.data;
+          } else {
+            options.url += '&' + options.data;
+          }
+        }
+        if (AcceptHeaders[options.dataType] == null) {
+          options.dataType = '*';
+        }
+        options.accept = AcceptHeaders[options.dataType];
+        if (options.dataType !== '*') {
+          options.accept += ', */*; q=0.01';
+        }
+        return options;
+      };
+
+      createXHR = function(options, done) {
+        var xhr;
+        xhr = new XMLHttpRequest();
+        xhr.open(options.type, options.url, true);
+        xhr.setRequestHeader('Accept', options.accept);
+        if (typeof options.data === 'string') {
+          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+        }
+        if (!options.crossDomain) {
+          xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+          CSRFProtection(xhr);
+        }
+        xhr.withCredentials = !!options.withCredentials;
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState === XMLHttpRequest.DONE) {
+            return done(xhr);
+          }
+        };
+        return xhr;
+      };
+
+      processResponse = function(response, type) {
+        var parser, script;
+        if (typeof response === 'string' && typeof type === 'string') {
+          if (type.match(/\bjson\b/)) {
+            try {
+              response = JSON.parse(response);
+            } catch (error) {}
+          } else if (type.match(/\b(?:java|ecma)script\b/)) {
+            script = document.createElement('script');
+            script.setAttribute('nonce', cspNonce());
+            script.text = response;
+            document.head.appendChild(script).parentNode.removeChild(script);
+          } else if (type.match(/\b(xml|html|svg)\b/)) {
+            parser = new DOMParser();
+            type = type.replace(/;.+/, '');
+            try {
+              response = parser.parseFromString(response, type);
+            } catch (error) {}
+          }
+        }
+        return response;
+      };
+
+      ActiveElementUJS.href = function(element) {
+        return element.href;
+      };
+
+      ActiveElementUJS.isCrossDomain = function(url) {
+        var e, originAnchor, urlAnchor;
+        originAnchor = document.createElement('a');
+        originAnchor.href = location.href;
+        urlAnchor = document.createElement('a');
+        try {
+          urlAnchor.href = url;
+          return !(((!urlAnchor.protocol || urlAnchor.protocol === ':') && !urlAnchor.host) || (originAnchor.protocol + '//' + originAnchor.host === urlAnchor.protocol + '//' + urlAnchor.host));
+        } catch (error) {
+          e = error;
+          return true;
+        }
+      };
+
+    }).call(this);
+    (function() {
+      var matches, toArray;
+
+      matches = ActiveElementUJS.matches;
+
+      toArray = function(e) {
+        return Array.prototype.slice.call(e);
+      };
+
+      ActiveElementUJS.serializeElement = function(element, additionalParam) {
+        var inputs, params;
+        inputs = [element];
+        if (matches(element, 'form')) {
+          inputs = toArray(element.elements);
+        }
+        params = [];
+        inputs.forEach(function(input) {
+          if (!input.name || input.disabled) {
+            return;
+          }
+          if (matches(input, 'select')) {
+            return toArray(input.options).forEach(function(option) {
+              if (option.selected) {
+                return params.push({
+                  name: input.name,
+                  value: option.value
+                });
+              }
+            });
+          } else if (input.checked || ['radio', 'checkbox', 'submit'].indexOf(input.type) === -1) {
+            return params.push({
+              name: input.name,
+              value: input.value
+            });
+          }
+        });
+        if (additionalParam) {
+          params.push(additionalParam);
+        }
+        return params.map(function(param) {
+          if (param.name != null) {
+            return (encodeURIComponent(param.name)) + "=" + (encodeURIComponent(param.value));
+          } else {
+            return param;
+          }
+        }).join('&');
+      };
+
+      ActiveElementUJS.formElements = function(form, selector) {
+        if (matches(form, 'form')) {
+          return toArray(form.elements).filter(function(el) {
+            return matches(el, selector);
+          });
+        } else {
+          return toArray(form.querySelectorAll(selector));
+        }
+      };
+
+    }).call(this);
+    (function() {
+      var allowAction, fire, stopEverything;
+
+      fire = ActiveElementUJS.fire, stopEverything = ActiveElementUJS.stopEverything;
+
+      ActiveElementUJS.handleConfirm = function(e) {
+        if (!allowAction(this)) {
+          return stopEverything(e);
+        }
+      };
+
+      allowAction = function(element) {
+        var answer, callback, message;
+        message = element.getAttribute('data-confirm');
+        if (!message) {
+          return true;
+        }
+        answer = false;
+        if (fire(element, 'confirm')) {
+          try {
+            answer = confirm(message);
+          } catch (error) {}
+          callback = fire(element, 'confirm:complete', [answer]);
+        }
+        return answer && callback;
+      };
+
+    }).call(this);
+
+    (function() {
+      var stopEverything;
+
+      stopEverything = ActiveElementUJS.stopEverything;
+
+      ActiveElementUJS.handleMethod = function(e) {
+        var csrfParam, csrfToken, form, formContent, href, link, method;
+        link = this;
+        method = link.getAttribute('data-ae-method');
+        if (!method) {
+          return;
+        }
+        href = ActiveElementUJS.href(link);
+        csrfToken = ActiveElementUJS.csrfToken();
+        csrfParam = ActiveElementUJS.csrfParam();
+        form = document.createElement('form');
+        formContent = "<input name='_method' value='" + method + "' type='hidden' />";
+        if ((csrfParam != null) && (csrfToken != null) && !ActiveElementUJS.isCrossDomain(href)) {
+          formContent += "<input name='" + csrfParam + "' value='" + csrfToken + "' type='hidden' />";
+        }
+        formContent += '<input type="submit" />';
+        form.method = 'post';
+        form.action = href;
+        form.target = link.target;
+        form.innerHTML = formContent;
+        form.style.display = 'none';
+        document.body.appendChild(form);
+        form.querySelector('[type="submit"]').click();
+        return stopEverything(e);
+      };
+
+    }).call(this);
+    (function() {
+      var ajax, fire, getData, isCrossDomain, isRemote, matches, serializeElement, setData, stopEverything,
+        slice = [].slice;
+
+      matches = ActiveElementUJS.matches, getData = ActiveElementUJS.getData, setData = ActiveElementUJS.setData, fire = ActiveElementUJS.fire, stopEverything = ActiveElementUJS.stopEverything, ajax = ActiveElementUJS.ajax, isCrossDomain = ActiveElementUJS.isCrossDomain, serializeElement = ActiveElementUJS.serializeElement;
+
+      isRemote = function(element) {
+        var value;
+        value = element.getAttribute('data-remote');
+        return (value != null) && value !== 'false';
+      };
+
+      ActiveElementUJS.handleRemote = function(e) {
+        var button, data, dataType, element, method, url, withCredentials;
+        element = this;
+        if (!isRemote(element)) {
+          return true;
+        }
+        if (!fire(element, 'ajax:before')) {
+          fire(element, 'ajax:stopped');
+          return false;
+        }
+        withCredentials = element.getAttribute('data-with-credentials');
+        dataType = element.getAttribute('data-type') || 'script';
+        method = element.getAttribute('data-ae-method');
+        url = ActiveElementUJS.href(element);
+        data = element.getAttribute('data-params');
+        ajax({
+          type: method || 'GET',
+          url: url,
+          data: data,
+          dataType: dataType,
+          beforeSend: function(xhr, options) {
+            if (fire(element, 'ajax:beforeSend', [xhr, options])) {
+              return fire(element, 'ajax:send', [xhr]);
+            } else {
+              fire(element, 'ajax:stopped');
+              return false;
+            }
+          },
+          success: function() {
+            var args;
+            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
+            return fire(element, 'ajax:success', args);
+          },
+          error: function() {
+            var args;
+            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
+            return fire(element, 'ajax:error', args);
+          },
+          complete: function() {
+            var args;
+            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
+            return fire(element, 'ajax:complete', args);
+          },
+          crossDomain: isCrossDomain(url),
+          withCredentials: (withCredentials != null) && withCredentials !== 'false'
+        });
+        return stopEverything(e);
+      };
+
+      ActiveElementUJS.formSubmitButtonClick = function(e) {
+        var button, form;
+        button = this;
+        form = button.form;
+        if (!form) {
+          return;
+        }
+        if (button.name) {
+          setData(form, 'ujs:submit-button', {
+            name: button.name,
+            value: button.value
+          });
+        }
+        setData(form, 'ujs:formnovalidate-button', button.formNoValidate);
+        setData(form, 'ujs:submit-button-formaction', button.getAttribute('formaction'));
+        return setData(form, 'ujs:submit-button-formmethod', button.getAttribute('formmethod'));
+      };
+
+      ActiveElementUJS.preventInsignificantClick = function(e) {
+        var data, insignificantMetaClick, link, metaClick, method, nonPrimaryMouseClick;
+        link = this;
+        method = (link.getAttribute('data-ae-method') || 'GET').toUpperCase();
+        data = link.getAttribute('data-params');
+        metaClick = e.metaKey || e.ctrlKey;
+        insignificantMetaClick = metaClick && method === 'GET' && !data;
+        nonPrimaryMouseClick = (e.button != null) && e.button !== 0;
+        if (nonPrimaryMouseClick || insignificantMetaClick) {
+          return e.stopImmediatePropagation();
+        }
+      };
+
+    }).call(this);
+    (function() {
+      var $, CSRFProtection, delegate, disableElement, enableElement, fire, formSubmitButtonClick, getData, handleConfirm, handleDisabledElement, handleMethod, handleRemote, loadCSPNonce, preventInsignificantClick, refreshCSRFTokens;
+
+      fire = ActiveElementUJS.fire, delegate = ActiveElementUJS.delegate, getData = ActiveElementUJS.getData, $ = ActiveElementUJS.$, refreshCSRFTokens = ActiveElementUJS.refreshCSRFTokens, CSRFProtection = ActiveElementUJS.CSRFProtection, loadCSPNonce = ActiveElementUJS.loadCSPNonce, enableElement = ActiveElementUJS.enableElement, disableElement = ActiveElementUJS.disableElement, handleDisabledElement = ActiveElementUJS.handleDisabledElement, handleConfirm = ActiveElementUJS.handleConfirm, preventInsignificantClick = ActiveElementUJS.preventInsignificantClick, handleRemote = ActiveElementUJS.handleRemote, formSubmitButtonClick = ActiveElementUJS.formSubmitButtonClick, handleMethod = ActiveElementUJS.handleMethod;
+
+      ActiveElementUJS.start = function() {
+        if (window._active_element_loaded) {
+          throw new Error('active_element-ujs has already been loaded!');
+        }
+        delegate(document, ActiveElementUJS.linkClickSelector, 'click', handleMethod);
+        document.addEventListener('DOMContentLoaded', refreshCSRFTokens);
+        document.addEventListener('DOMContentLoaded', loadCSPNonce);
+        console.log("ActiveElement-ujs loaded.");
+        return window._active_element_loaded = true;
+      };
+
+      if (window.ActiveElementUJS === ActiveElementUJS && fire(document, 'rails:attachBindings')) {
+        ActiveElementUJS.start();
+      }
+
+    }).call(this);
+  }).call(this);
+
+  if (typeof module === "object" && module.exports) {
+    module.exports = ActiveElementUJS;
+  } else if (typeof define === "function" && define.amd) {
+    define(ActiveElementUJS);
+  }
+}).call(this);

data/app/assets/javascripts/active_element/secret.js

@@ -1,6 +1,8 @@
 (() => {
   const cloneElement = (id) => ActiveElement.cloneElement('secret', id);
 
+  if (window._active_element_secrets_loaded) return;
+
   window.addEventListener(ActiveElement.reloadEvent, () => {
     document.querySelectorAll('span[data-field-type="secret"]').forEach((element) => {
       const secret = element.dataset.secret;
@@ -36,5 +38,6 @@
       element.append(showButton);
       element.append(hideButton);
     });
+    window._active_element_secrets_loaded = true;
   });
 })();

data/app/controllers/active_element/application_controller.rb

@@ -27,8 +27,8 @@ module ActiveElement
     helper_method :active_element
     helper_method :render_active_element_hook
 
-    def render_active_element_hook(hook)
-      render_to_string partial: hook
+    def render_active_element_hook(hook, locals: {})
+      render_to_string partial: hook, locals: locals
     rescue ActionView::MissingTemplate
       nil
     end

data/app/views/active_element/components/button.html.erb

@@ -6,7 +6,7 @@
       'bs-trigger': 'hover',
       'bs-toggle': 'popover',
       'bs-content': title,
-    } : {}).merge(method&.to_s == 'get' ? {} : { 'turbo-method' => method.to_s }),
+    } : {}).merge(method&.to_s == 'get' ? {} : { 'ae-method' => method.to_s }),
     class: "btn #{button_class} #{float_class} #{kwargs_class}",
     **kwargs
   ) do %>

data/app/views/active_element/components/form.html.erb

@@ -59,13 +59,23 @@
     <% fields.each_slice(columns) do |field_group| %>
       <div class="row form-fields mb-3">
         <% field_group.each do |field, type, options| %>
-          <div class="col-sm-3">
-            <%= render partial: 'active_element/components/form/label',
-                       locals: { component: component, id: id, type: type, form: form, field: field, options: options } %>
-          </div>
+          <% if type != :hidden_field %>
+            <div class="col-sm-3">
+              <%= render partial: 'active_element/components/form/label',
+                         locals: {
+                           component: component,
+                           id: id,
+                           type: type,
+                           form: form,
+                           field: field,
+                           options: options
+                         } %>
+            </div>
+          <% end %>
 
 
-          <div class="col">
+
+          <% if type != :hidden_field %><div class="col"><% end %>
             <%= render partial: 'active_element/components/form/field',
                        locals: {
                          id: id,
@@ -76,7 +86,7 @@
                          component: component,
                          record: record }
             %>
-          </div>
+          <% if type != :hidden_field %></div><% end %>
         <% end %>
       </div>
     <% end %>

data/app/views/active_element/components/table/_collection_row.html.erb

@@ -1,6 +1,6 @@
 <tr class="<%= (index % 2).zero? ? 'even' : 'odd' %> <%= row_class_mapper.call(item) %>">
   <% fields.each do |field, class_mapper, label, value_mapper| %>
-    <td class="align-middle <%= class_mapper.call(item) %>">
+    <td class="align-top <%= class_mapper.call(item) %>">
       <% if component.secret_field?(field) %>
         <%= controller.helpers.render partial: 'active_element/components/secret/field',
                                       locals: { secret: value_mapper.call(item), label: label } %>

data/app/views/active_element/components/table/collection.html.erb

@@ -1,5 +1,10 @@
 <% if new %>
-  <%= active_element.component.new_button(component.model&.new, float: 'end', class: 'mb-3') %>
+  <%= active_element.component.new_button(
+    component.model&.new,
+    nested_for: nested_for,
+    float: 'end',
+    class: 'mb-3'
+  ) %>
 <% end %>
 
 

data/app/views/active_element/default_views/edit.html.erb

@@ -1,9 +1,9 @@
 <%= active_element.component.page_title record.model_name.to_s.titleize %>
 
-<%= render_active_element_hook "#{controller_path}/before_edit" %>
+<%= render_active_element_hook "#{controller_path}/before_edit", locals: { record: record } %>
 
 <%= active_element.component.form model: [namespace, record].compact,
                                   destroy: active_element.state.deletable?,
                                   fields: active_element.state.editable_fields %>
 
-<%= render_active_element_hook "#{controller_path}/after_edit" %>
+<%= render_active_element_hook "#{controller_path}/after_edit", locals: { record: record } %>

data/app/views/active_element/default_views/index.html.erb

@@ -7,7 +7,17 @@
                                     fields: active_element.state.searchable_fields %>
 <% end %>
 
-<%= render_active_element_hook "#{controller_path}/before_index" %>
+<%= render_active_element_hook "#{controller_path}/before_index", locals: { collection: collection } %>
+
+<% if nested_for.present? %>
+  <%=
+    active_element.component.page_section_title(
+      nested_for.map do |nested_for_record|
+        ActiveElement::Components::Util::DefaultDisplayValue.new(object: nested_for_record).value
+      end.join(', ')
+    )
+    %>
+<% end %>
 
 <% if active_element.state.search_required && search_filters.compact_blank.blank? %>
   <% if active_element.state.creatable? %>
@@ -20,8 +30,9 @@
                                      show: active_element.state.viewable?,
                                      edit: active_element.state.editable?,
                                      destroy: active_element.state.deletable?,
+                                     nested_for: nested_for,
                                      collection: collection,
                                      fields: active_element.state.listable_fields %>
 <% end %>
 
-<%= render_active_element_hook "#{controller_path}/after_index" %>
+<%= render_active_element_hook "#{controller_path}/after_index", locals: { collection: collection } %>

data/app/views/active_element/default_views/show.html.erb

@@ -1,10 +1,10 @@
 <%= active_element.component.page_title record.model_name.to_s.titleize %>
 
-<%= render_active_element_hook "#{controller_path}/before_show" %>
+<%= render_active_element_hook "#{controller_path}/before_show", locals: { record: record } %>
 
 <%= active_element.component.table item: record,
                                    edit: active_element.state.editable?,
                                    destroy: active_element.state.deletable?,
                                    fields: active_element.state.viewable_fields %>
 
-<%= render_active_element_hook "#{controller_path}/after_show" %>
+<%= render_active_element_hook "#{controller_path}/after_show", locals: { record: record } %>

data/app/views/layouts/active_element.html.erb

@@ -19,6 +19,15 @@
       </script>
     <% end %>
 
+    <% if respond_to?(:javascript_pack_tag) && defined? Webpacker %>
+      <%= begin
+            javascript_pack_tag 'application'
+          rescue Webpacker::Manifest::MissingEntryError
+            nil
+          end
+        %>
+    <% end %>
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet"
           href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
@@ -116,6 +125,5 @@
       <%= javascript_include_tag 'active_element/active_element', 'data-turbo-track': 'reload', 'data-turbolinks-track': 'reload' %>
       <%= javascript_include_tag 'application', 'data-turbo-track': 'reload', 'data-turbolinks-track': 'reload' %>
     <% end %>
-
   </body>
 </html>

data/config/routes.rb

@@ -2,6 +2,7 @@
 
 ActiveElement::Engine.routes.draw do
   ActiveElement.eager_load_controllers
+  ActiveElement.eager_load_models
 
   ActiveElement::ApplicationController.descendants.map do |descendant|
     post "#{descendant.controller_path}/_active_element_text_search",

data/example_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    active_element (0.0.18)
+    active_element (0.0.20)
       bootstrap (~> 5.3.0alpha3)
       kaminari (~> 1.2)
       paintbrush (~> 0.1.2)

data/lib/active_element/components/button.rb

@@ -6,7 +6,7 @@ module ActiveElement
     class Button
       # rubocop:disable Metrics/MethodLength
       def initialize(controller, record, flag_or_options, confirm: false, type: :primary, method: nil,
-                     float: nil, icon: nil, tooltip: false, **kwargs, &block)
+                     float: nil, icon: nil, tooltip: false, nested_for: nil, **kwargs, &block)
         @controller = controller
         @record = record.is_a?(ActiveRecord::Relation) ? record.klass.new : record
         @flag_or_options = flag_or_options
@@ -20,6 +20,7 @@ module ActiveElement
         @block_given = block_given?
         @content = block.call if block_given?
         @tooltip = tooltip
+        @nested_for = nested_for
       end
       # rubocop:enable Metrics/MethodLength
 
@@ -49,7 +50,7 @@ module ActiveElement
       private
 
       attr_reader :controller, :record, :flag_or_options, :float, :kwargs, :kwargs_class, :type, :method, :icon,
-                  :block_given, :content, :confirm, :tooltip
+                  :block_given, :content, :confirm, :tooltip, :nested_for
 
       def link_method
         return method if method.present?
@@ -116,7 +117,21 @@ module ActiveElement
       def record_path
         return nil unless record.class.is_a?(ActiveModel::Naming)
 
-        Util::RecordPath.new(record: record, controller: controller, type: type).path
+        Util::RecordPath.new(record: record, controller: controller, type: type).path(**nested_args)
+      end
+
+      def nested_args
+        case type
+        when :new
+          nested_params
+        else
+          {}
+        end
+      end
+
+      def nested_params
+        route = controller.request.routes.recognize_path(controller.request.path)
+        route.reject { |key, _value| %w[controller action].include?(key.to_s) }
       end
     end
   end

data/lib/active_element/components/collection_table.rb

@@ -15,7 +15,7 @@ module ActiveElement
       # rubocop:disable Metrics/MethodLength
       def initialize(controller, class_name:, collection:, fields:, params:, model_name: nil, style: nil,
                      show: false, new: false, edit: false, destroy: false, paginate: true, group: nil,
-                     group_title: false, row_class: nil, title: nil, **_kwargs)
+                     group_title: false, nested_for: nil, row_class: nil, title: nil, **_kwargs)
         @controller = controller
         @class_name = class_name
         @model_name = model_name
@@ -32,6 +32,7 @@ module ActiveElement
         @group_title = group_title
         @row_class = row_class
         @title = title
+        @nested_for = nested_for
         verify_paginate_and_group
       end
       # rubocop:enable Metrics/MethodLength
@@ -54,6 +55,7 @@ module ActiveElement
           destroy: destroy,
           group: group,
           group_title: group_title,
+          nested_for: nested_for,
           display_pagination: display_pagination?,
           page_sizes: [5, 10, 25, 50, 75, 100, 200],
           page_size: page_size,
@@ -78,7 +80,7 @@ module ActiveElement
 
       attr_reader :class_name, :collection, :fields, :style, :row_class,
                   :new, :show, :edit, :destroy,
-                  :paginate, :params, :group, :group_title, :title
+                  :paginate, :params, :group, :group_title, :title, :nested_for
 
       def paginated_collection
         return collection unless paginate && collection.respond_to?(:page) && !limit?

data/lib/active_element/components/form.rb

@@ -190,14 +190,30 @@ module ActiveElement
       end
 
       def base_options_for_select(field, field_options)
-        return normalized_options(field_options.fetch(:options)) if field_options.key?(:options)
+        return normalized_options(field_options.fetch(:options), field_options) if field_options.key?(:options)
         return default_options_for_select(field, field_options) if record.class.is_a?(ActiveModel::Naming)
 
         raise ArgumentError, "Must provide select options `[:#{field}, { options: [...] }]` or a record instance."
       end
 
-      def normalized_options(options)
-        options.map { |option| option.is_a?(Array) ? option : [option, option] }
+      def normalized_options(options, field_options)
+        options.map do |option|
+          next option if option.is_a?(Array)
+          next active_record_option(option, field_options) if option.is_a?(ActiveRecord::Base)
+          [option, option] if option.is_a?(String)
+        end
+      end
+
+      def active_record_option(option, field_options)
+        [active_record_display_value(option, field_options), option.send(option.class.primary_key)]
+      end
+
+      def active_record_display_value(option, field_options)
+        if field_options[:display_value].is_a?(Proc) && record.present?
+          field_options[:display_value].call(option)
+        else
+          Util::DefaultDisplayValue.new(object: option).value
+        end
       end
 
       def default_class_name

data/lib/active_element/components/util/default_display_value.rb

@@ -12,6 +12,10 @@ module ActiveElement
         end
 
         def value
+          if object.respond_to?(:default_display_attribute)
+            return object.public_send(object.default_display_attribute)
+          end
+
           DEFAULT_FIELDS.each do |field|
             return object.public_send(field) if active_record_value?(field)
             return object[field] if hash_key(field) if hash_value?(field)

data/lib/active_element/components/util/form_field_mapping.rb

@@ -59,10 +59,12 @@ module ActiveElement
         end
 
         def inline_configured_field(field)
-          field_options = FieldOptions.from_state(field, controller.active_element.state, record)
+          field_options = FieldOptions.from_state(
+            field, controller.active_element.state, record, controller
+          )
           return nil if field_options.blank?
 
-          [field, field_options.type, field_options.options]
+          [field, field_options.type, field_options.options.reverse_merge({ value: field_options.value })]
         end
 
         def field_with_provided_type_and_provided_options(field)
@@ -201,6 +203,7 @@ module ActiveElement
             json: :json_field,
             jsonb: :json_field,
             geometry: :text_area,
+            text: :text_area,
             datetime: :datetime_field,
             date: :date_field,
             time: :time_field,

data/lib/active_element/components/util/record_mapping.rb

@@ -80,13 +80,22 @@ module ActiveElement
         end
 
         def value_from_config
-          field_options = FieldOptions.from_state(field, component.controller.active_element.state, record)
+          field_options = field_options_from_state
           return nil if field_options.blank?
           return nil unless DATABASE_TYPES.include?(field_options.type.to_sym)
 
           send("#{field_options.type}_value")
         end
 
+        def field_options_from_state
+          FieldOptions.from_state(
+            field,
+            component.controller.active_element.state,
+            record,
+            component.controller
+          )
+        end
+
         # Override these methods as required in a class that includes this module:
 
         def mapped_association_from_record

data/lib/active_element/controller_interface.rb

@@ -25,8 +25,9 @@ module ActiveElement
       @authorize
     end
 
-    def listable_fields(*args, order: nil)
+    def listable_fields(*args, order: nil, scope: nil)
       state.list_order = order
+      state.list_scope = scope
       state.listable_fields.concat(args.map(&:to_sym)).uniq!
     end
 

data/lib/active_element/controller_state.rb

@@ -8,7 +8,7 @@ module ActiveElement
     attr_reader :permissions, :listable_fields, :viewable_fields, :editable_fields, :searchable_fields,
                 :field_options
     attr_accessor :sign_in_path, :sign_in, :sign_in_method, :sign_out_path, :sign_out_method,
-                  :deletable, :authorizor, :authenticator, :list_order, :search_required, :model
+                  :deletable, :authorizor, :authenticator, :list_order, :list_scope, :search_required, :model
 
     def initialize(controller:)
       @controller = controller

data/lib/active_element/default_controller/controller.rb

@@ -15,7 +15,8 @@ module ActiveElement
         controller.render 'active_element/default_views/index',
                           locals: {
                             collection: ordered(collection),
-                            search_filters: default_text_search.search_filters
+                            search_filters: default_text_search.search_filters,
+                            nested_for: nested_relations
                           }
       end
 
@@ -124,9 +125,12 @@ module ActiveElement
       end
 
       def collection
-        return model.all unless default_text_search.text_search?
+        return model.public_send(list_scope).where(nested_scope) unless default_text_search.text_search?
 
-        model.left_outer_joins(default_text_search.search_relations).where(*default_text_search.text_search)
+        model.public_send(list_scope)
+             .left_outer_joins(default_text_search.search_relations)
+             .where(nested_scope)
+             .where(*default_text_search.text_search)
       end
 
       def render_range_error(error:, action:)
@@ -140,6 +144,36 @@ module ActiveElement
 
         I18n.t('active_element.unexpected_error')
       end
+
+      def list_scope
+        return :all if state.list_scope.blank?
+        return state.list_scope.call(request) if state.list_scope.is_a?(Proc)
+
+        state.list_scope
+      end
+
+      def nested_scope
+        nested_params.presence || noop
+      end
+
+      def noop
+        Arel::Nodes::True.new.eq(Arel::Nodes::True.new)
+      end
+
+      def nested_params
+        route = controller.request.routes.recognize_path(controller.request.path)
+        route.reject { |key, _value| %w[controller action].include?(key.to_s) }
+      end
+
+      def nested_relations
+        return [] if nested_params.blank?
+
+        nested_params.map do |key, value|
+          collection.model.reflections.values.find do |reflection|
+            reflection.foreign_key.to_s == key.to_s
+          end&.klass&.find(value)
+        end.compact
+      end
     end
   end
 end

data/lib/active_element/default_controller/search.rb

@@ -25,6 +25,7 @@ module ActiveElement
         conditions = search_filters.to_h.map do |key, value|
           next relation_matches(key, value) if relation?(key)
           next datetime_between(key, value) if datetime?(key)
+          next join(key, value) if key.to_s.include?('.')
           next model.arel_table[key].matches("#{value}%") if string_like_column?(key)
 
           model.arel_table[key].eq(value)
@@ -36,7 +37,15 @@ module ActiveElement
       end
 
       def search_relations
-        search_filters.to_h.keys.map { |key| relation?(key) ? key.to_sym : nil }.compact
+        relation_joins = search_filters.to_h.keys.map { |key| relation?(key) ? key.to_sym : nil }.compact
+        (relation_joins + shorthand_joins).uniq
+      end
+
+      def shorthand_joins
+        search_filters.to_h
+                      .keys
+                      .select { |key| key.to_s.include?('.') }
+                      .map { |key| key.partition('.').first.to_sym }
       end
 
       private
@@ -66,6 +75,11 @@ module ActiveElement
         end.compact
       end
 
+      def join(key, value)
+        table, _, column = key.to_s.partition('.')
+        relation(table).klass.arel_table[column].eq(value)
+      end
+
       def noop
         Arel::Nodes::True.new.eq(Arel::Nodes::True.new)
       end

data/lib/active_element/field_options.rb

@@ -1,14 +1,14 @@
 module ActiveElement
   class FieldOptions
-    attr_accessor :type, :options
+    attr_accessor :type, :options, :value
     attr_reader :field
 
-    def self.from_state(field, state, record)
+    def self.from_state(field, state, record, controller)
       block = state.field_options[field]
       return nil if block.blank?
 
       field_options = new(field)
-      block.call(field_options, record)
+      block.call(field_options, record, controller)
       field_options
     end
 

data/lib/active_element/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ActiveElement
-  VERSION = '0.0.19'
+  VERSION = '0.0.21'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_element
 version: !ruby/object:Gem::Version
-  version: 0.0.19
+  version: 0.0.21
 platform: ruby
 authors:
 - Bob Farrell
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-04-08 00:00:00.000000000 Z
+date: 2024-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -114,6 +114,7 @@ files:
 - active_element.gemspec
 - app/assets/config/active_element/manifest.js
 - app/assets/javascripts/active_element/active_element.js
+- app/assets/javascripts/active_element/ae-ujs.js
 - app/assets/javascripts/active_element/confirm.js
 - app/assets/javascripts/active_element/form.js
 - app/assets/javascripts/active_element/highlight.js