active_element 0.0.10 → 0.0.12

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

@@ -0,0 +1,14 @@
+<div class="d-flex">
+  <%= form.label(nil, class: 'me-2 mt-1') { 'Between' } %>
+  <%= form.datetime_field("#{field}[from]", name: "#{field}[from]",
+                                 value: component.value_for(field, :from),
+                                 class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                                 tabindex: component.tabindex,
+                                 **options) %>
+  <%= form.label(nil, class: 'ms-2 mt-1 me-2') { 'and' } %>
+  <%= form.datetime_field("#{field}[to]", name: "#{field}[to]",
+                                 value: component.value_for(field, :to),
+                                 class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                                 tabindex: component.tabindex,
+                                 **options) %>
+</div>

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

@@ -1,24 +1,27 @@
 <% if type == :select %>
   <%= render partial: 'active_element/components/form/select',
-             locals: { form: form, field: field, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, options: options, component: component } %>
 <% elsif type == :check_boxes %>
   <%= render partial: 'active_element/components/form/check_boxes',
-             locals: { field: field, form: form, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, options: options, component: component } %>
 <% elsif type == :json_field %>
   <%= render partial: 'active_element/components/form/json',
-             locals: { field: field, form: form, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, field_id: ActiveElement.element_id, options: options, component: component } %>
 <% elsif type == :text_search_field %>
   <%= render partial: 'active_element/components/form/text_search',
-             locals: { form_id: id, field: field, form: form, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, options: options, component: component } %>
 <% elsif type == :check_box %>
   <%= render partial: 'active_element/components/form/check_box',
-             locals: { form: form, type: type, field: field, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, type: type, options: options, component: component } %>
 <% elsif type == :text_area %>
   <%= render partial: 'active_element/components/form/text_area',
-             locals: { form: form, type: type, field: field, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, type: type, options: options, component: component } %>
+<% elsif type == :datetime_range_field %>
+  <%= render partial: 'active_element/components/form/datetime_range_field',
+             locals: { form_id: id, form: form, field: field, type: type, options: options, component: component } %>
 <% else %>
   <%= render partial: 'active_element/components/form/generic_field',
-             locals: { form: form, type: type, field: field, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, type: type, options: options, component: component } %>
 <% end %>
 
 <% unless component.valid?(field) %>

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

@@ -1,3 +1,4 @@
 <%= form.public_send(type, field, value: component.value_for(field),
                                   class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                                  tabindex: component.tabindex,
                                   **options) %>

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

@@ -1,12 +1,20 @@
 <div class="col-sm-10 json-field form-group"
      data-data-key="<%= ActiveElement::Components::Util.json_name("#{form.object_name}.#{field}") %>"
+     data-field-name="<%= field %>"
+     data-form-id="<%= form_id %>"
+     data-field-id="<%= field_id %>"
+     data-schema-field-id="<%= field_id %>-schema"
 >
 
 </div>
 
+<%= form.hidden_field field, name: "#{form.object_name}[#{field}]", value: '', id: field_id %>
+<%= form.hidden_field field, name: "__json_field_schemas[#{form.object_name}][#{field}]", value: '', id: "#{field_id}-schema" %>
+<%= form.hidden_field field, name: '__json_fields[]', value: "#{form.object_name}.#{field}" %>
+
 <%=
-  component.json(
+  active_element.component.json(
     ActiveElement::Components::Util.json_name("#{form.object_name}.#{field}"),
-    { data: component.value_for(field, options), schema: component.schema_for(field, options) }
+    { data: component.value_for(field, default: options), schema: component.schema_for(field, options) }
   )
 %>

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

@@ -1,9 +1,20 @@
 <%= form.label field do %>
   <%= options[:label] %>
-  <% if options[:description].present? %>
+  <% if options[:required] %>
     <button type="button"
             style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
+            data-bs-trigger="focus"
+            data-bs-toggle="popover"
+            title="Required"
+            data-bs-content="<%= "#{options.fetch(:label)} is a required field." %>">
+            <i class="text-secondary fa-solid fa-star-of-life"></i>
+    </button>
+  <% end %>
+  <% if options[:description].present? %>
+    <button type="button"
+            style="background: none; border: none; outline: 0; position: absolute; <%= options[:required] ? 'margin-left: 1.4rem;' : nil %> margin-top: 0.3rem"
             data-bs-toggle="popover"
+            data-bs-trigger="focus"
             title="<%= options.fetch(:label) %>"
             data-bs-content="<%= options[:description] %>">
             <i class="text-secondary fa-solid fa-circle-info"></i>

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

@@ -1,4 +1,7 @@
 <%= form.select field,
                 component.options_for_select(field, options),
                 { selected: component.value_for(field) },
-                { class: "form-select #{component.valid?(field) ? nil : 'is-invalid'}" } %>
+                {
+                  tabindex: component.tabindex,
+                  class: "form-select #{component.valid?(field) ? nil : 'is-invalid'}"
+                } %>

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

@@ -21,7 +21,17 @@
           <span class="ms-1"><%= value %></span>
         </div>
       <% end %>
-  <% elsif value.present? %>
+  <% elsif type == :datetime_range_field %>
+    <% next unless value.present? %>
+
+    <% values << value %>
+    <div class="d-inline me-3">
+      <span class="text-secondary"><%= options.fetch(:label) %>:</span>
+      <span class="ms-1 text-primary"><%= value[:from] %></span>
+      <span class="text-secondary">&rarr;</span>
+      <span class="ms-1 text-primary"><%= value[:to] %></span>
+    </div>
+  <% elsif value.class && value.present? %>
     <%# TODO: Handle other field types %>
 
     <% values << value %>

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

@@ -7,52 +7,70 @@
     <label id="json-form-check-label-template" class="form-check-label"></label>
     <label id="json-label-template" class="mb-4 fw-bold"></label>
 
-    <div id="json-form-group-template" class="form-group p-3 text-wrap m-3"></div>
-    <div id="json-form-group-floating-template" class="form-floating m-3 text-wrap"></div>
+    <div id="json-form-group-template" class="form-group text-wrap m-3"></div>
+    <div id="json-form-group-floating-template" class="form-floating m-3 text-wrap collapsed"></div>
     <div id="json-form-check-template" class="form-check m-3"></div>
 
     <input id="json-checkbox-field-template" type="checkbox" class="form-check-input json-checkbox-field" />
 
     <input id="json-text-field-template" type="text" class="form-control m-1 json-text-field" />
+    <input id="json-date-field-template" type="date" class="form-control m-1 d-inline-block json-date-field" />
+    <input id="json-time-field-template" type="time" class="form-control m-1 d-inline-block json-time-field" />
+    <input id="json-datetime-field-template" type="datetime-local" class="form-control m-1 d-inline-block json-datetime-field" />
+    <input id="json-integer-field-template" type="number" class="form-control m-1 json-integer-field" />
+    <input id="json-float-field-template" type="number" step="any" class="form-control m-1 json-float-field" />
+    <input id="json-decimal-field-template" type="number" step="any" class="form-control m-1 json-decimal-field" />
 
     <select id="json-select-template" class="form-select m-1 json-select-field"></select>
 
     <%= active_element.component.destroy_button id: 'json-delete-button-template',
-                                          class: 'button-sm json-delete-button' %>
+                                          class: 'btn-sm json-delete-button', data: { 'confirm-action': 'false' } %>
 
     <%= active_element.component.button 'Delete Item', type: 'danger', id: 'json-delete-object-button-template',
-                                          class: 'json-delete-button w-25 float-end json-delete-object-button' %>
+                                          style: 'z-index: 1500',
+                                          class: 'btn-sm json-delete-button float-end json-delete-object-button' %>
 
     <%= active_element.component.button id: 'json-append-button-template',
-                                  class: 'btn-sm mt-3 mb-3 json-add-field-button' %>
+                                  class: 'btn-sm json-add-field-button' %>
 
     <%= active_element.component.button 'Hide', id: 'json-expand-collapse-button-template',
                                   class: 'float-end expand-collapse-button' %>
 
+    <div id="json-focus-template" class="focus m-1"></div>
+    <i id="json-focus-expand-template" class="fa-solid fa-fw fa-plus"></i>
+    <i id="json-focus-collapse-template" class="fa-solid fa-fw fa-minus d-none"></i>
+    <div id="json-modal-template"
+         class="modal fade"
+         tabindex="-1"
+         aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable json-field-modal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" data-field-type="modal-title"></h5>
+            <div class="modal-buttons">
+              <button type="button" class="btn btn-primary btn-sm me-2" data-bs-dismiss="modal" aria-label="Finish Editing">
+                Finish Editing
+              </button>
+            </div>
+          </div>
+          <div class="modal-body" data-field-type="modal-body"></div>
+          <div class="modal-footer" data-field-type="modal-footer"></div>
+        </div>
+      </div>
+    </div>
   </div>
 
-  <%= active_element.component.button 'Expand Form', id: 'form-expand-button-template', class: 'mb-1 btn-sm' do %>
-    <i class="fa-solid fa-fw fa-up-right-and-down-left-from-center"></i>
-  <% end %>
-
-  <%= active_element.component.button 'Collapse Form', id: 'form-collapse-button-template', class: 'mb-1 btn-sm' do %>
-    <i class="fa-solid fa-fw fa-down-left-and-up-right-to-center"></i>
-  <% end %>
-
 
   <div id="form-search-field-templates">
-    <input id="form-search-field-hidden-input-template" type="hidden" autocomplete="off" />
-    <p id="form-search-field-response-error-template" class="text-danger position-absolute validation-error-message pt-1 m-0"></p>
+    <p id="form-search-field-response-error-template" class="text-danger validation-error-message pt-1 m-0"></p>
     <div id="form-search-field-results-template" class="search-field-results d-none border border-top-0"></div>
     <div id="form-search-field-results-item-template" class="search-field-result p-2"></div>
-    <div id="form-search-field-spinner-template" class="invisible text-end">
-      <div style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
-        <i class="fa-solid fa-spinner fa-spin"></i>
+    <div id="form-search-field-icons-template" class="text-end">
+      <div data-item-class="spinner" class="invisible" style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
+        <i class="fa-fw fa-solid fa-spinner fa-spin"></i>
       </div>
-    </div>
-    <div id="form-search-field-clear-button-template" class="invisible text-end">
-      <div style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
-        <i class="fa-solid fa-delete-left" style="cursor: pointer;"></i>
+      <div data-item-class="clear" class="invisible" style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem; cursor: pointer;">
+        <i class="fa-solid fa-fw fa-xmark"></i>
       </div>
     </div>
   </div>
@@ -65,8 +83,8 @@
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" data-field-type="modal-title"></h5>
-          <button type="button" class="btn-close fs-3" data-bs-dismiss="modal" aria-label="Close">
-            <i class="fa-regular fa-rectangle-xmark"></i>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+            <i class="fa-solid fa-xmark"></i>
           </button>
         </div>
         <div class="modal-body" data-field-type="modal-body"></div>

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

@@ -1,4 +1,5 @@
 <%= form.text_area field,
                    value: component.value_for(field),
-                   rows: 5,
+                   rows: options.fetch(:rows, 5),
+                   tabindex: component.tabindex,
                    class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}" %>

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

@@ -1,16 +1,20 @@
 <%=
-  form.text_field field, value: component.value_for(field),
+  form.text_field field, value: options.fetch(:display_value) { component.value_for(field) },
                          id: "#{form_id}-#{field}-text-search",
                          class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
                          autocomplete: 'off',
-                         placeholder: options[:placeholder].presence || 'Search...',
+                         placeholder: options[:placeholder].presence || "Search...",
+                         tabindex: component.tabindex,
                          data: {
                            field_type: 'text-search',
                            form_id: form_id,
                            search_attributes: (
-                             options.dig(:search, :attributes) || [options.dig(:search, :attribute)]
+                             options.dig(:search, :with) || [options.dig(:search, :with)]
                            )&.to_json,
-                           search_value: options.dig(:search, :value),
+                           search_value: options.dig(:search, :providing),
                            search_model: options.dig(:search, :model)
                          }
 %>
+
+<%= form.hidden_field field, id: "#{form_id}-#{field}-text-search-hidden-value",
+                             value: component.value_for(field) %>

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

@@ -1,5 +1,7 @@
 <% if destroy %>
-  <%= active_element.component.destroy_button(record, float: 'end') %>
+  <div class="container w-100 text-end">
+    <%= active_element.component.destroy_button(record) %>
+  </div>
 <% end %>
 
 <% if modal %>
@@ -20,32 +22,32 @@
 
   </div>
 
-<% elsif title.present? && expanded == false %>
-
-  <div data-field-type="form-expand" data-form-id="<%= id %>" class="mb-3">
-    <span class="fs-4 align-bottom"><%= title %></span>
-  </div>
-
-<% elsif title.blank? && expanded == false %>
-
-  <div data-field-type="form-expand" data-form-id="<%= id %>" class="mb-3"></div>
-
 <% elsif title.present? %>
 
   <span class="fs-4 align-bottom"><%= title %></span>
 
 <% end %>
 
-<div class="expand-collapse-form <%= modal ? 'd-none' : nil %>" id="form-wrapper-<%= id %>">
-  <%= form_with local: true, **kwargs, method: method, id: id, class: "#{class_name} m-3 #{modal == false && expanded == false ? 'd-none' : nil}" do |form| %>
+<% unless component.valid? %>
+  <p class="text-danger pt-1 m-0 validation-error-message">
+    <%= component.full_error_message %>
+  </p>
+<% end %>
+
+<div class="form <%= modal ? 'd-none' : 'pb-3' %>" id="form-wrapper-<%= id %>">
+  <%= form_with local: true, action: action, method: method, id: id, class: "#{class_name} m-3", **kwargs do |form| %>
     <% if %i[top both].include?(submit_position) %>
-      <div class="form-group sticky-top" style="top: 0.5rem;">
-        <%= form.submit submit_label, class: "btn btn-#{method == :post ? 'success' : 'primary'} float-end" %>
+      <div class="row mb-3 form-group sticky-top" style="top: 0.5rem;">
+        <div class="col-sm-3"></div>
+        <div class="col pb-3">
+          <%= form.submit submit_label, name: '', class: "btn btn-#{method == :post ? 'success' : 'primary'} ms-2 float-end" %>
+          <%= active_element.component.button 'Clear Form', class: 'btn-secondary float-end', data: { 'form-input-type': 'clear' } %>
+        </div>
       </div>
     <% end %>
 
     <% fields.each_slice(columns) do |field_group| %>
-      <div class="row mb-3">
+      <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',
@@ -71,7 +73,8 @@
 
     <% if %i[bottom both].include?(submit_position) %>
       <div class="form-group">
-        <%= form.submit submit_label, class: "btn btn-#{method == :post ? 'success' : 'primary'}" %>
+        <%= form.submit submit_label, name: '', class: "btn btn-#{method == :post ? 'success' : 'primary'}" %>
+        <%= active_element.component.button 'Clear Form', class: 'btn-secondary ms-2', data: { 'form-input-type': 'clear' } %>
       </div>
     <% end %>
   <% end %>

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

@@ -1,4 +1,5 @@
 <script type="text/javascript">
+  window.ActiveElement = window.ActiveElement || {};
   ActiveElement.jsonData = ActiveElement.jsonData || {};
 
   ActiveElement.jsonData = {

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

@@ -0,0 +1,26 @@
+<div class="application-menu <%= fixed ? 'position-fixed' : nil %> w-100 navbar navbar-dark bg-dark navbar-expand-lg">
+  <div class="container">
+    <a class="navbar-brand" href="#"><%= ActiveElement.application_title %></a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <% items.each do |navbar_item| %>
+          <li class="nav-item">
+            <%=
+              link_to navbar_item.fetch(:title) { navbar_item.fetch(:label) },
+                      navbar_item.fetch(:path),
+                      class: "nav-link #{component.active_path_class(current_navbar_item: navbar_item)}"
+            %>
+          </li>
+        <% end %>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="d-flex icon-menu p-3">
+    <%= render partial: 'active_element/user' %>
+    <%= render partial: 'active_element/theme/select' %>
+  </div>
+</div>

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

@@ -5,7 +5,8 @@
         <%= controller.helpers.render partial: 'active_element/components/secret/field',
                                       locals: { secret: value_mapper.call(item), label: label } %>
       <% else %>
-        <%= value_mapper.call(item) %>
+        <%= controller.helpers.render partial: 'active_element/components/table/field',
+                                      locals: { value: value_mapper.call(item) } %>
       <% end %>
     </td>
   <% end %>

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

@@ -0,0 +1,8 @@
+<% if value.is_a?(Array) %>
+  <% value.sort.each_with_index do |each_value, index| %>
+    <%= each_value %>
+    <%= index < value.size - 1 ? '|' : nil %>
+  <% end %>
+<% else %>
+  <%= value %>
+<% end %>

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

@@ -8,6 +8,7 @@
             <button type="button"
                     style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
                     data-bs-toggle="popover"
+                    data-bs-trigger="focus"
                     data-bs-content="<%= options[:description] %>">
                     <i class="text-secondary fa-solid fa-circle-info"></i>
             </button>

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

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

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

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if new %>
-  <%= active_element.component.new_button(item, float: 'end', class: 'mb-3') %>
+  <%= active_element.component.new_button(component.model, float: 'end', class: 'mb-3') %>
 <% end %>
 
 <table class="<%= class_name %> table" style="<%= style %>">
@@ -20,6 +20,7 @@
             <button type="button"
                     style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
                     data-bs-toggle="popover"
+                    data-bs-trigger="focus"
                     data-bs-content="<%= options[:description] %>">
                     <i class="text-secondary fa-solid fa-circle-info"></i>
             </button>
@@ -27,10 +28,11 @@
         </th>
         <td class="<%= 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 } %>
+            <%= render partial: 'active_element/components/secret/field',
+                       locals: { secret: value_mapper.call(item), label: label } %>
           <% else %>
-            <%= value_mapper.call(item) %>
+            <%= render partial: 'active_element/components/table/field',
+                       locals: { value: value_mapper.call(item) } %>
           <% end %>
         </td>
       </tr>

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

@@ -0,0 +1,5 @@
+<%= active_element.component.page_title record.model_name.to_s.titleize %>
+
+<%= active_element.component.form model: [namespace, record].compact,
+                                  destroy: active_element.state.deletable?,
+                                  fields: active_element.state.editable_fields %>

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

@@ -0,0 +1,7 @@
+<h1>Forbidden</h1>
+
+<h2 class="text-danger">Access to this resource has not been configured</h2>
+
+<p>The <span class="text-primary font-monospace"><%= type %></span> resource for <span class="text-primary font-monospace"><%= controller_name.titleize %></span> has not been configured, please contact your administrator.</p>
+
+<hr/>

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

@@ -0,0 +1,15 @@
+<% if active_element.state.searchable_fields.present? %>
+  <%= active_element.component.form title: 'Search Filters',
+                                    submit: 'Search',
+                                    modal: true,
+                                    search: true,
+                                    item: search_filters,
+                                    fields: active_element.state.searchable_fields %>
+<% end %>
+
+<%= active_element.component.table new: active_element.state.creatable?,
+                                   show: active_element.state.viewable?,
+                                   edit: active_element.state.editable?,
+                                   destroy: active_element.state.deletable?,
+                                   collection: collection,
+                                   fields: active_element.state.listable_fields %>

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

@@ -0,0 +1,4 @@
+<%= active_element.component.page_title record.model_name.to_s.titleize %>
+
+<%= active_element.component.form model: [namespace, record].compact,
+                                  fields: active_element.state.editable_fields %>

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

@@ -0,0 +1,7 @@
+<%= active_element.component.page_title record.model_name.to_s.titleize %>
+
+<%= active_element.component.table item: record,
+                                   edit: active_element.state.editable?,
+                                   destroy: active_element.state.deletable?,
+                                   fields: active_element.state.viewable_fields %>
+

data/app/views/active_element/navbar/_menu.html.erb

@@ -1,30 +1 @@
-<div class="application-menu position-fixed w-100 navbar navbar-dark bg-dark navbar-expand-lg">
-  <%= render partial: 'active_element/theme/select' %>
-  <div class="container p-0">
-    <a class="navbar-brand" href="#"><%= ActiveElement.application_title %></a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <% ActiveElement.navbar_items(active_element.current_user).each do |navbar_item| %>
-          <li class="nav-item">
-            <%=
-              link_to navbar_item.fetch(:title) { navbar_item.fetch(:label) },
-                      navbar_item.fetch(:path),
-                      class: "nav-link #{
-                        ActiveElement.active_path_class(
-                          user: active_element.current_user,
-                          current_navbar_item: navbar_item,
-                          current_path: request.path,
-                          controller_path: controller_path,
-                          action_name: action_name)
-                      }"
-            %>
-          </li>
-        <% end %>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
+<%= ActiveElement.component.navbar(items: ActiveElement.navbar_items) %>

data/app/views/active_element/theme/_select.html.erb

@@ -1 +1 @@
-<div id="theme-select"></div>
+<div class="ms-2" id="theme-select"></div>

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

@@ -2,6 +2,21 @@
   <head>
     <%= render_active_element_hook 'active_element/before_head' %>
 
+    <style>
+      <%= Rouge::Theme.find('tulip').render(scope: '.json-highlight') %>
+      .json-highlight .p {
+        color: #7e4b6f;
+      }
+
+      .json-highlight .s2 {
+        color: #6b7399
+      }
+
+      .json-highlight {
+        background-color: transparent;
+      }
+    </style>
+
     <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" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -25,7 +40,7 @@
 
   <body>
     <%= render_active_element_hook 'active_element/before_navbar' %>
-    <%= render partial: 'active_element/navbar/menu' %>
+    <%= active_element.component.navbar(items: ActiveElement.navbar_items) %>
     <%= render_active_element_hook 'active_element/after_navbar' %>
 
     <% flash.each do |type, message| %>

data/config/brakeman.ignore

@@ -0,0 +1,48 @@
+{
+  "ignored_warnings": [
+    {
+      "warning_type": "SQL Injection",
+      "warning_code": 0,
+      "fingerprint": "7d17f93e2d87d1f9dc0fbf6e4ce46856e4fb0e1f99a7e0ce4ea3ed73be68efc4",
+      "check_name": "SQL",
+      "message": "Possible SQL injection",
+      "file": "lib/active_element/json_field_schema.rb",
+      "line": 21,
+      "link": "https://brakemanscanner.org/docs/warning_types/sql_injection/",
+      "code": "ActiveRecord::Base.connection.execute(\"select #{column} from #{table}\")",
+      "render_path": null,
+      "location": {
+        "type": "method",
+        "class": "ActiveElement::JsonFieldSchema",
+        "method": "data"
+      },
+      "user_input": "column",
+      "confidence": "Medium",
+      "cwe_id": [
+        89
+      ],
+      "note": ""
+    },
+    {
+      "warning_type": "Unmaintained Dependency",
+      "warning_code": 121,
+      "fingerprint": "edf687f759ec9765bd5db185dbc615c80af77d6e7e19386fc42934e7a80307af",
+      "check_name": "EOLRuby",
+      "message": "Support for Ruby 2.7.8 ended on 2023-03-31",
+      "file": ".ruby-version",
+      "line": 1,
+      "link": "https://brakemanscanner.org/docs/warning_types/unmaintained_dependency/",
+      "code": null,
+      "render_path": null,
+      "location": null,
+      "user_input": null,
+      "confidence": "High",
+      "cwe_id": [
+        1104
+      ],
+      "note": ""
+    }
+  ],
+  "updated": "2023-06-10 13:50:20 +0100",
+  "brakeman_version": "5.4.1"
+}

data/config/locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  active_element:
+    unexpected_error: 'Unexpected error'

data/example_app/.gitattributes

@@ -0,0 +1,7 @@
+# See https://git-scm.com/docs/gitattributes for more about git attribute files.
+
+# Mark the database schema as having been generated.
+db/schema.rb linguist-generated
+
+# Mark any vendored files as having been vendored.
+vendor/* linguist-vendored