active_scaffold 4.2.2 → 4.3.0

data/app/assets/javascripts/{jquery/date_picker_bridge.js.erb → active_scaffold/date_picker_bridge.js}

@@ -1,6 +1,3 @@
-<%# encoding: utf-8 %>
-<% I18n.available_locales.each { |locale| Rails.root.glob("config/locales/#{locale}.*").each { |path| depend_on path.to_s } } %>
-<%= ActiveScaffold::Bridges[:date_picker].localization %>
 Object.getPrototypeOf(jQuery.datepicker)._attachDatepicker_without_inlineSettings = Object.getPrototypeOf(jQuery.datepicker)._attachDatepicker;
 jQuery.extend(Object.getPrototypeOf(jQuery.datepicker), {
   _attachDatepicker: function(target, settings) {

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

@@ -0,0 +1,102 @@
+// ActiveScaffold main entry point
+(function() {
+  const config = window.ActiveScaffold?.config || {};
+
+  // Load dependencies based on configuration
+  const loadDependencies = async () => {
+    // Always load these
+    await loadScript(RAILS_ASSET_URL('/jquery.ba-throttle-debounce.js'));
+    await loadScript(RAILS_ASSET_URL('/jquery.visible.min.js'));
+
+    // Check if jQuery UI should be loaded
+    if (config.jqueryUiIncluded) {
+      await loadJQueryUI();
+    }
+
+    // Load core ActiveScaffold
+    await loadScript(RAILS_ASSET_URL('/active_scaffold/active_scaffold.js'));
+    await loadScript(RAILS_ASSET_URL('/active_scaffold/jquery.editinplace.js'));
+
+    // Load plugins
+    if (config.plugins) {
+      for (const plugin of config.plugins) {
+        await loadScript(plugin);
+      }
+    }
+
+    // Load bridges
+    if (config.bridges) {
+      for (const bridge of config.bridges) {
+        await loadScript(bridge);
+      }
+    }
+
+    // ALL DEPENDENCIES ARE LOADED NOW
+    // Initialize everything
+    initializeActiveScaffold();
+  };
+
+  const loadJQueryUI = async () => {
+    // Check if jQuery UI is already loaded via importmap or script tag
+    if (typeof window.jQuery?.ui === 'undefined') {
+      // If using jquery-ui-rails gem with Sprockets/Propshaft
+      // We need to load individual components
+      if (config.jqueryUi) {
+        for (const file of config.jqueryUi) {
+          await loadScript(file);
+        }
+      } else return;
+    }
+
+    // Load jQuery UI addons
+    await loadScript(RAILS_ASSET_URL('/jquery-ui-timepicker-addon.js'));
+    await loadScript(RAILS_ASSET_URL('/active_scaffold/date_picker_bridge.js'));
+    await loadScript(RAILS_ASSET_URL('/active_scaffold/draggable_lists.js'));
+
+    // Initialize jQuery UI components
+    initializeJQueryUI();
+  };
+
+  const loadScript = (path) => {
+    return new Promise((resolve, reject) => {
+      // Check if already loaded
+      if (document.querySelector(`script[src*="${path}"]`)) {
+        resolve();
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = path;
+      script.async = false;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  };
+
+  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);
+      }
+    }
+  };
+
+  // NEW: Initialize everything after all scripts are loaded
+  const initializeActiveScaffold = () => {
+    // Run any post-load initialization
+    if (window.jQuery) {
+      jQuery(document).trigger('active-scaffold:loaded');
+    }
+  };
+
+  // Start loading when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadDependencies);
+  } else {
+    loadDependencies();
+  }
+})();

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

@@ -1,31 +1,7 @@
 <%
-  require_asset 'jquery.ba-throttle-debounce'
-  if Object.const_defined?(:Jquery)
-    if Jquery.const_defined?(:Rails) && Jquery::Rails.const_defined?(:JQUERY_UI_VERSION)
-      require_asset 'jquery-ui'
-    elsif Jquery.const_defined? :Ui
-      jquery_ui_prefix = Jquery::Ui::Rails::VERSION < '5.0.0' ? 'jquery.ui.' : 'jquery-ui/'
-      jquery_ui_widgets_prefix = Jquery::Ui::Rails::VERSION >= '6.0.0' ? 'widgets/' : ''
-      require_asset "#{jquery_ui_prefix}core" unless Jquery::Ui::Rails::VERSION >= '8.0.0'
-      require_asset "#{jquery_ui_prefix}effect"
-      require_asset "#{jquery_ui_prefix}effects/effect-highlight" if Jquery::Ui::Rails::VERSION >= '6.0.0'
-      require_asset "#{jquery_ui_prefix}#{jquery_ui_widgets_prefix}sortable"
-      require_asset "#{jquery_ui_prefix}#{jquery_ui_widgets_prefix}draggable"
-      require_asset "#{jquery_ui_prefix}#{jquery_ui_widgets_prefix}droppable"
-      require_asset "#{jquery_ui_prefix}#{jquery_ui_widgets_prefix}datepicker"
-    end
-  end
+  ActiveScaffold::Assets.active_scaffold_javascripts.each { |asset| require_asset asset }
   if ActiveScaffold.jquery_ui_included?
-    require_asset 'jquery-ui-timepicker-addon'
-    require_asset 'jquery/date_picker_bridge'
-    require_asset 'jquery/draggable_lists'
+    I18n.available_locales.each { |locale| Rails.root.glob("config/locales/#{locale}.*").each { |path| depend_on path.to_s } }
   end
-  require_asset 'jquery.visible.min'
-  require_asset 'jquery/active_scaffold'
-  require_asset 'jquery/jquery.editinplace'
-%>
-ActiveScaffold.config = <%= ActiveScaffold.js_config.to_json %>;
-<%
-  ActiveScaffold.javascripts.each { |js| require_asset js }
-  ActiveScaffold::Bridges.all_javascripts.each { |js| require_asset js }
 %>
+<%= ActiveScaffold::Assets.active_scaffold_js_code %>

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

@@ -0,0 +1,330 @@
+.active-scaffold a, .active-scaffold a:visited {
+  color: var(--as-link-color);
+}
+
+.active-scaffold a.disabled {
+  color: var(--as-disabled-color);
+}
+
+.active-scaffold a:hover, .active-scaffold div.hover, .active-scaffold td span.hover {
+  background-color: var(--as-hover-bg);
+}
+
+noscript.active-scaffold {
+  border-color: var(--as-msg-error-border-color);
+  background-color: var(--as-msg-error-bg);
+  color: var(--as-column-color);
+}
+
+/* Header
+   ======================== */
+
+.active-scaffold-header h2 {
+  color: var(--as-header-color);
+}
+
+.active-scaffold div.actions a.separator {
+  border-color: var(--as-action-group-border-color);
+}
+.active-scaffold-header div.actions a.disabled {
+  color: var(--as-actions-disabled-color);
+}
+.active-scaffold .actions .filters .active {
+  color: var(--as-active-filter);
+}
+
+/* Table :: Column Headers
+   ============================= */
+
+.active-scaffold th {
+  background-color: var(--as-column-header-bg);
+}
+
+.active-scaffold th a,
+.active-scaffold th p {
+  background-color: var(--as-column-header-bg);
+}
+
+.active-scaffold th a, .active-scaffold th a:visited {
+  color: var(--as-column-header-link-color);
+}
+
+.active-scaffold th p,
+.active-scaffold .show-view th {
+  color: var(--as-column-header-color);
+}
+
+.active-scaffold th a:hover {
+  background-color: var(--as-column-header-link-hover-bg);
+  color: var(--as-column-header-link-hover-color);
+}
+
+.active-scaffold th.sorted {
+  background-color: var(--as-column-header-sorted-bg);
+}
+
+.active-scaffold th.asc a,
+.active-scaffold th.asc a:hover,
+.active-scaffold th.desc a,
+.active-scaffold th.desc a:hover,
+.active-scaffold th.loading a,
+.active-scaffold th.loading a:hover {
+  background-color: var(--as-column-header-sorted-bg);
+}
+
+/* Table :: Record Rows
+   ============================= */
+
+.active-scaffold tr.record {
+  background-color: var(--as-column-bg);
+}
+.active-scaffold tr.record td {
+  color: var(--as-column-color);
+  border-color: var(--as-column-border-color);
+}
+
+.active-scaffold tr.even-record {
+  background-color: var(--as-column-even-bg);
+}
+.active-scaffold tr.even-record td {
+  border-left-color: var(--as-column-even-border-color);
+}
+
+.active-scaffold tr.record td.sorted {
+  background-color: var(--as-column-sorted-bg);
+  border-bottom-color: var(--as-column-sorted-border-color);
+}
+
+.active-scaffold tr.even-record td.sorted {
+  background-color: var(--as-column-even-sorted-bg);
+  border-bottom-color: var(--as-column-even-sorted-border-color);
+}
+
+.active-scaffold tbody.records td.empty {
+  color: var(--as-column-empty-color);
+}
+
+/* Table :: Actions (Edit, Delete)
+   ============================= */
+.active-scaffold tr.record td.actions {
+  border-color: var(--as-column-actions-border-color);
+}
+
+.active-scaffold tr.record td.actions table td.separator {
+  border-color: var(--as-column-actions-border-color);
+}
+
+.active-scaffold tr.record td.actions a.disabled {
+  color: var(--as-actions-disabled-color);
+}
+
+.active-scaffold .actions .action_group div:hover {
+  background-color: var(--as-action-group-hover-bg);
+}
+
+.active-scaffold .actions .action_group {
+  color: var(--as-action-group-color);
+}
+
+.active-scaffold .actions .action_group ul {
+  border-color: var(--as-action-group-border-color);
+}
+
+.active-scaffold .actions .action_group ul li {
+  background-color: var(--as-action-group-items-bg);
+  border-color: var(--as-action-group-items-border-color);
+}
+
+.active-scaffold .actions .action_group ul li a {
+  color: var(--as-action-group-link-color);
+}
+
+/* Table :: Inline Adapter
+   ============================= */
+
+.active-scaffold .view {
+  background-color: var(--as-nested-bg);
+  border-color: var(--as-nested-border-color);
+}
+
+/* Nested
+   ======================== */
+
+.active-scaffold .active-scaffold .active-scaffold-footer {
+  color: var(--as-nested-footer-color);
+}
+
+.active-scaffold .active-scaffold tr.record {
+  background-color: var(--as-nested-column-bg);
+  border-color: var(--as-nested-column-border-color);
+}
+.active-scaffold .active-scaffold tr.even-record {
+  background-color: var(--as-nested-column-even-bg);
+}
+
+.active-scaffold .active-scaffold td.inline-adapter-cell {
+  background-color: var(--as-second-nested-bg);
+  border-color: var(--as-second-nested-border-color);
+}
+
+.active-scaffold .active-scaffold .active-scaffold td.inline-adapter-cell {
+  background-color: var(--as-third-nested-bg);
+  border-color: var(--as-third-nested-border-color);
+}
+
+/* Footer
+   ========================== */
+
+.active-scaffold-calculations td {
+  background-color: var(--as-calculations-bg);
+  border-color: var(--as-calculations-border-color);
+}
+
+.active-scaffold-footer .next {
+  border-color: var(--as-pagination-border-color);
+}
+
+.active-scaffold-footer .previous {
+  border-color: var(--as-pagination-border-color);
+}
+
+/* Messages
+   ========================= */
+
+
+.active-scaffold .empty-message, .active-scaffold .filtered-message {
+  background-color: var(--as-msg-filtered-bg);
+  color: var(--as-msg-filtered-color);
+}
+
+.active-scaffold .message {
+  color: var(--as-msg-color);
+}
+
+.active-scaffold .error-message, .active-scaffold-component .error-message {
+  border-color: var(--as-msg-error-border-color);
+  background-color: var(--as-msg-error-bg);
+}
+
+.active-scaffold .warning-message {
+  border-color: var(--as-msg-warning-border-color);
+  background-color: var(--as-msg-warning-bg);
+}
+
+.active-scaffold .info-message {
+  border-color: var(--as-msg-info-border-color);
+  background-color: var(--as-msg-info-bg);
+}
+
+/* Error Styling
+   ========================== */
+
+.active-scaffold .errorExplanation {
+  background-color: var(--as-msg-error-bg);
+  border-color: var(--as-msg-error-border-color);
+}
+
+.active-scaffold .errorExplanation h2 {
+  color: var(--as-msg-color);
+  background-color: var(--as-msg-error-border-color);
+}
+
+/* Show
+   ============================= */
+
+.active-scaffold .show-view dt {
+  color: var(--as-label-color);
+}
+
+/* Form
+   ============================== */
+
+.active-scaffold h4,
+.active-scaffold h5 {
+  color: var(--as-form-title-color);
+}
+
+/* Form :: Fields
+   ============================== */
+
+.active-scaffold label {
+  color: var(--as-label-color);
+}
+
+.active-scaffold .description {
+  color: var(--as-description-color);
+}
+
+.active-scaffold label.example {
+  color: var(--as-placeholder-color);
+}
+
+.active-scaffold input.text-input,
+.active-scaffold select {
+  border-color: var(--as-input-border-color);
+}
+
+.active-scaffold input:invalid,
+.active-scaffold textarea:invalid,
+.active-scaffold select:invalid,
+.active-scaffold .fieldWithErrors input,
+.active-scaffold .field_with_errors input,
+.active-scaffold .fieldWithErrors textarea,
+.active-scaffold .field_with_errors textarea,
+.active-scaffold .fieldWithErrors select,
+.active-scaffold .field_with_errors select {
+  border-color: var(--as-input-error-border-color);
+}
+
+.active-scaffold input.example {
+  color: var(--as-placeholder-color);
+}
+
+.active-scaffold select:focus,
+.active-scaffold input.text-input:focus {
+  background-color: var(--as-input-focus-bg);
+}
+
+.active-scaffold textarea {
+  border-color: var(--as-input-border-color);
+}
+
+.active-scaffold form .checkbox-list.draggable-list {
+  background-color: var(--as-draggable-list-bg);
+}
+
+.active-scaffold form .checkbox-list.draggable-list.selected {
+  background-color: var(--as-draggable-list-selected-bg);
+}
+.active-scaffold .ui-droppable-disabled, .active-scaffold .ui-droppable-disabled.selected {
+  background-color: var(--as-draggable-list-disabled-bg);
+}
+
+
+/* Form :: Association Sub-Forms
+   ============================== */
+
+.active-scaffold .sub-form table th {
+  color: var(--as-subform-header-color);
+}
+
+.active-scaffold .sub-form .checkbox-list {
+  background-color: var(--as-checkbox-list-bg);
+  border-color: var(--as-input-border-color);
+}
+
+.active-scaffold .vertical-sub-form .sub-form-record + .sub-form-record {
+  border-color: var(--as-vertical-sub-form-border-color);
+}
+
+.active-scaffold .sub-form table td {
+  color: var(--as-subform-color);
+}
+
+.active-scaffold .sub-form .footer {
+  color: var(--as-subform-footer-color);
+}
+
+.as_touch th a, .as_touch th a:visited {
+  color: var(--as-column-header-link-color);
+}

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

@@ -0,0 +1,65 @@
+.active-scaffold-header div.actions div.action_group div {
+  background-image: url("active_scaffold/gears.png"); /* default icon for actions or override with css */
+}
+
+.active-scaffold-header div.actions a.show_config_list {
+  background-image: url("active_scaffold/config.png");
+}
+
+.active-scaffold-header div.actions a.new,
+.active-scaffold-header div.actions a.new_existing {
+  background-image: url("active_scaffold/add.png");
+}
+
+.active-scaffold-header div.actions a.show_search {
+  background-image: url("active_scaffold/magnifier.png");
+}
+
+.active-scaffold th.asc a {
+  background-image: url("active_scaffold/arrow_up.png");
+}
+
+.active-scaffold th.desc a {
+  background-image: url("active_scaffold/arrow_down.png");
+}
+
+
+.active-scaffold .draggable-lists-container .check-buttons {
+  .check-all, .uncheck-all {
+    background-image: url("active_scaffold/fast-arrow-right.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 16px;
+    text-indent: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .uncheck-all {
+    background-image: url("active_scaffold/fast-arrow-left.svg");
+  }
+}
+
+.active-scaffold th.loading a {
+  background-image: url("active_scaffold/indicator-small.gif");
+}
+
+.active-scaffold a.inline-adapter-close {
+  background-image: url("active_scaffold/close.png");
+}
+
+.active-scaffold .sub-form .association-record a.destroy {
+  background-image: url("active_scaffold/cross.png");
+}
+
+.as_touch a.inline-adapter-close {
+  background-image: url("active_scaffold/close_touch.png");
+}
+.active-scaffold .refresh-link {
+  background-image: url("active_scaffold/refresh.png");
+}
+
+.ui-dialog .loading::after {
+  background: url("active_scaffold/indicator.gif") no-repeat;
+  content: 'Loading...';
+  padding-left: 20px;
+}

data/app/assets/stylesheets/{active_scaffold_layout.scss → active_scaffold/_layout.scss}

@@ -380,6 +380,7 @@ text-indent: -4000px;
 width: 16px;
 height: 17px;
 background: 0 0 no-repeat;
+overflow: hidden;
 }
 
 /* Nested
@@ -750,6 +751,12 @@ float: left;
 .active-scaffold li.form-element dd input[type="checkbox"] {
 margin-top: 6px;
 }
+.active-scaffold form input[type=radio] {
+  margin-right: 5px;
+}
+.active-scaffold form label:has(input[type=radio]) {
+  margin-right: 10px;
+}
 
 .active-scaffold li.form-element dd .select-field:not(.draggable-lists-container) {
   display: inline-block;
@@ -983,6 +990,19 @@ clear: left;
 padding: 5px 0;
 }
 
+/* Form :: Multiple Columns Layout
+   ============================== */
+
+.active-scaffold .form-columns {
+  display: flex;
+  gap: 10px;
+
+  > ol.form {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 /* Form :: Association Sub-Forms
    ============================== */
 
@@ -1039,7 +1059,7 @@ padding: 0 2px 2px 2px;
 border: solid 1px;
 }
 
-.active-scaffold .sub-form .checkbox-list label {
+.active-scaffold .sub-form .checkbox-list li {
 display: block;
 }