formstrap 0.4.5 → 0.4.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0379b9b80ad9551b56d07884264fcc37132b72d5539976ec4034800a09adaeb2'
-  data.tar.gz: bbd8d0892fce51fa07375b3e6a414e169344825f5da142c5a06ab87a7696424b
+  metadata.gz: 7b83b9b5c0b00d0d5b3d84a26ca44c16335321c28c6c3e183a84d51fd3c2c45b
+  data.tar.gz: 11d2ec48abdc5ffaaf223d8c3401f3e47a3e6e8d4de813590b8f2543a902ef4e
 SHA512:
-  metadata.gz: '0788d10916489c6fabe8798a87ffa10a75d46a4e57a2cd8c73455cc64630414ebbdbcfe213041437b22d108df2a3fa986e3692e8ea46ba25fdc28bb068142a42'
-  data.tar.gz: 3fba876a0ce0c7be868100726d60af6b1b5aae1b8af675e4861b9ba016405920b1ff35f537a12ce9aa10865fb1e599662170446d999a9bc6e69752f9cf2dc252
+  metadata.gz: 5cdfdd6829349c2e8e3821bfc3d7ab80b7414f125126d20e9158475e337a1bc7e974a83a0209f6f56e4e45cf115599498f25976a23b616cd9006e54be16a9042
+  data.tar.gz: 22c288a45528576ff1c91c76775003fb0ebeead2bb051c492e3923390e876b49fab4b936924e29b46b5484efd1fa43cfd15f3194fab63bf4e97ea59242d585c0

data/app/assets/javascripts/formstrap/controllers/media_modal_controller.js

@@ -12,7 +12,10 @@ export default class extends Controller {
 
   connect () {
     this.validate()
-    this.updateCount()
+
+    if (this.maxSelectedItems() !== 1) {
+      this.updateCount()
+    }
   }
 
   // Actions
@@ -27,11 +30,29 @@ export default class extends Controller {
   }
 
   inputChange (event) {
-    this.handleIdsUpdate(event.target)
-    this.updateCount()
+    if (this.maxSelectedItems() === 1) {
+      this.selectOneItem(event.target)
+    } else {
+      this.selectMultipleItems(event.target)
+    }
   }
 
   // Methods
+  selectOneItem (element) {
+    this.idsValue = []
+
+    for (const checkbox of this.idCheckboxTargets.filter(e => e.value !== element.value)) {
+      checkbox.checked = false
+    }
+
+    this.handleIdsUpdate(element)
+  }
+
+  selectMultipleItems (element) {
+    this.handleIdsUpdate(element)
+    this.updateCount()
+  }
+
   hidePlaceholder () {
     this.placeholderTarget.classList.add('d-none')
   }
@@ -54,7 +75,7 @@ export default class extends Controller {
       })
     }
 
-    this.handleSearchdIdsUpdate()
+    this.handleSearchIdsUpdate()
   }
 
   itemTargetConnected (element) {
@@ -155,7 +176,7 @@ export default class extends Controller {
     this.countTarget.innerHTML = this.selectedItemsCount()
   }
 
-  handleSearchdIdsUpdate () {
+  handleSearchIdsUpdate () {
     this.deleteSearchIdInputs()
     this.createSearchIdInputs()
   }

data/app/assets/javascripts/formstrap/controllers/select_controller.js

@@ -4,40 +4,159 @@ import I18n from '../config/i18n'
 
 export default class extends Controller {
   static values = {
-    selected: Array
+    remoteUrl: String,
+    remoteValue: String,
+    remoteLabel: String,
+    remoteQueryParam: String
+  }
+
+  initialize () {
+    this.tomSelect = undefined
+    this.perPage = 24
   }
 
   connect () {
-    if (this.element.hasAttribute('multiple') || this.element.dataset.tomSelect === 'true') {
-      this.initTomSelect()
+    if (this.isMultiple() || this.isTomSelect() || this.isRemote()) {
+      this.tomSelect = this.initTomSelect()
+    }
+  }
+
+  disconnect () {
+    if (this.element.tomselect) {
+      this.element.tomselect.destroy()
     }
   }
 
   defaultOptions () {
     return {
-      plugins: ['drag_drop', 'caret_position', 'input_autogrow'],
+      plugins: {
+        caret_position: {},
+        drag_drop: {},
+        input_autogrow: {}
+      },
       persist: false,
       create: true,
       render: this.renderOptions()[I18n.locale]
     }
   }
 
+  isMultiple () {
+    return this.element.hasAttribute('multiple')
+  }
+
+  isTomSelect () {
+    return this.element.dataset.tomSelect === 'true'
+  }
+
+  isRemote () {
+    return this.remoteUrlValue
+  }
+
+  setQueryParam (url, key, value) {
+    const urlObj = new URL(url)
+    const params = urlObj.searchParams
+
+    // Adds if not exists, updates if exists
+    params.set(key, value)
+
+    return urlObj.toString()
+  }
+
+  getQueryParam (url, key) {
+    const urlObj = new URL(url)
+    const params = urlObj.searchParams
+
+    return params.get(key)
+  }
+
+  firstUrl () {
+    return (query) => {
+      let url = `${this.remoteUrlValue}.json`
+      url = this.setQueryParam(url, this.remoteQueryParamValue, query)
+      url = this.setQueryParam(url, 'per_page', this.perPage)
+      url = this.setQueryParam(url, 'page', 1)
+      return url
+    }
+  }
+
+  load () {
+    return (query, callback) => {
+      let url = this.tomSelect.getUrl(query)
+
+      fetch(url)
+        .then(response => response.json())
+        .then(json => {
+          if (json.length === this.perPage) {
+            // Update page param for next call
+            const currentPage = parseInt(this.getQueryParam(url, 'page')) || 1
+            url = this.setQueryParam(url, 'page', currentPage + 1)
+            this.tomSelect.setNextUrl(query, url)
+          } else {
+            this.tomSelect.setNextUrl(query, undefined)
+          }
+
+          callback(json)
+        })
+        .catch(() => { callback() })
+    }
+  }
+
   renderOptions () {
     return {
       en: {
         option_create: function (data, escape) {
-          return '<div class="create">Add <strong>' + escape(data.input) + '</strong>&hellip;</div>'
+          return `<div class="create">Add <strong>${escape(data.input)}</strong>&hellip;</div>`
         },
         no_results: function (data, escape) {
           return '<div class="no-results">No results found</div>'
+        },
+        loading_more: function (data, escape) {
+          return '<div class="loading-more-results">Loading more results ... </div>'
+        },
+        no_more_results: function (data, escape) {
+          return '<div class="no-more-results">No more results</div>'
         }
       },
       nl: {
         option_create: function (data, escape) {
-          return '<div class="create">Voeg <strong>' + escape(data.input) + '</strong> toe &hellip;</div>'
+          return `<div class="create">Voeg <strong>${escape(data.input)}</strong> toe &hellip;</div>`
         },
         no_results: function (data, escape) {
           return '<div class="no-results">Geen resultaten gevonden</div>'
+        },
+        loading_more: function (data, escape) {
+          return '<div class="loading-more-results">Laad meer resultaten ... </div>'
+        },
+        no_more_results: function (data, escape) {
+          return '<div class="no-more-results">Geen resultaten meer</div>'
+        }
+      },
+      fr: {
+        option_create: function (data, escape) {
+          return `<div class="create">Ajouter <strong>${escape(data.input)}</strong>&hellip;</div>`
+        },
+        no_results: function (data, escape) {
+          return '<div class="no-results">Aucun résultat trouvé</div>'
+        },
+        loading_more: function (data, escape) {
+          return '<div class="loading-more-results">Chargement de plus de résultats ... </div>'
+        },
+        no_more_results: function (data, escape) {
+          return '<div class="no-more-results">Plus de résultats</div>'
+        }
+      },
+      de: {
+        option_create: function (data, escape) {
+          return `<div class="create">Hinzufügen <strong>${escape(data.input)}</strong>&hellip;</div>`
+        },
+        no_results: function (data, escape) {
+          return '<div class="no-results">Keine Ergebnisse gefunden</div>'
+        },
+        loading_more: function (data, escape) {
+          return '<div class="loading-more-results">Lade weitere Ergebnisse ... </div>'
+        },
+        no_more_results: function (data, escape) {
+          return '<div class="no-more-results">Keine weiteren Ergebnisse</div>'
         }
       }
     }
@@ -51,10 +170,29 @@ export default class extends Controller {
     const defaultOptions = this.defaultOptions()
     const options = {
       create: this.hasTags(),
-      items: this.selectedValue
+      ...(this.isRemote() && {
+        plugins: {
+          caret_position: {},
+          drag_drop: {},
+          input_autogrow: {},
+          virtual_scroll: {}
+        },
+        valueField: this.remoteValueValue,
+        labelField: this.remoteLabelValue,
+        searchField: this.remoteLabelValue,
+        firstUrl: this.firstUrl(),
+        load: this.load(),
+        // Infinite options
+        maxOptions: null,
+        // Fetch first items when focused
+        onFocus: () => {
+          this.tomSelect.clearOptions()
+          this.tomSelect.setNextUrl('', this.firstUrl()(''))
+          this.tomSelect.load('')
+        }
+      })
     }
 
-    /* eslint-disable no-new */
-    new TomSelect(this.element, { ...defaultOptions, ...options })
+    return new TomSelect(this.element, { ...defaultOptions, ...options })
   }
 }

data/app/assets/javascripts/formstrap.js

@@ -11289,7 +11289,9 @@ var media_modal_controller_default = class extends Controller {
   }
   connect() {
     this.validate();
-    this.updateCount();
+    if (this.maxSelectedItems() !== 1) {
+      this.updateCount();
+    }
   }
   select() {
     this.dispatchSelectionEvent();
@@ -11300,7 +11302,21 @@ var media_modal_controller_default = class extends Controller {
     this.triggerFormSubmission();
   }
   inputChange(event) {
-    this.handleIdsUpdate(event.target);
+    if (this.maxSelectedItems() === 1) {
+      this.selectOneItem(event.target);
+    } else {
+      this.selectMultipleItems(event.target);
+    }
+  }
+  selectOneItem(element) {
+    this.idsValue = [];
+    for (const checkbox of this.idCheckboxTargets.filter((e) => e.value !== element.value)) {
+      checkbox.checked = false;
+    }
+    this.handleIdsUpdate(element);
+  }
+  selectMultipleItems(element) {
+    this.handleIdsUpdate(element);
     this.updateCount();
   }
   hidePlaceholder() {
@@ -11321,7 +11337,7 @@ var media_modal_controller_default = class extends Controller {
         return element.value !== value;
       });
     }
-    this.handleSearchdIdsUpdate();
+    this.handleSearchIdsUpdate();
   }
   itemTargetConnected(element) {
     this.updateItem(element.querySelector("input"));
@@ -11405,7 +11421,7 @@ var media_modal_controller_default = class extends Controller {
   updateCount() {
     this.countTarget.innerHTML = this.selectedItemsCount();
   }
-  handleSearchdIdsUpdate() {
+  handleSearchIdsUpdate() {
     this.deleteSearchIdInputs();
     this.createSearchIdInputs();
   }
@@ -13397,35 +13413,134 @@ var repeater_controller_default = class extends Controller {
 // app/assets/javascripts/formstrap/controllers/select_controller.js
 var import_tom_select = __toESM(require_tom_select_complete());
 var select_controller_default = class extends Controller {
+  initialize() {
+    this.tomSelect = void 0;
+    this.perPage = 24;
+  }
   connect() {
-    if (this.element.hasAttribute("multiple") || this.element.dataset.tomSelect === "true") {
-      this.initTomSelect();
+    if (this.isMultiple() || this.isTomSelect() || this.isRemote()) {
+      this.tomSelect = this.initTomSelect();
+    }
+  }
+  disconnect() {
+    if (this.element.tomselect) {
+      this.element.tomselect.destroy();
     }
   }
   defaultOptions() {
     return {
-      plugins: ["drag_drop", "caret_position", "input_autogrow"],
+      plugins: {
+        caret_position: {},
+        drag_drop: {},
+        input_autogrow: {}
+      },
       persist: false,
       create: true,
       render: this.renderOptions()[i18n_default.locale]
     };
   }
+  isMultiple() {
+    return this.element.hasAttribute("multiple");
+  }
+  isTomSelect() {
+    return this.element.dataset.tomSelect === "true";
+  }
+  isRemote() {
+    return this.remoteUrlValue;
+  }
+  setQueryParam(url, key, value) {
+    const urlObj = new URL(url);
+    const params = urlObj.searchParams;
+    params.set(key, value);
+    return urlObj.toString();
+  }
+  getQueryParam(url, key) {
+    const urlObj = new URL(url);
+    const params = urlObj.searchParams;
+    return params.get(key);
+  }
+  firstUrl() {
+    return (query) => {
+      let url = `${this.remoteUrlValue}.json`;
+      url = this.setQueryParam(url, this.remoteQueryParamValue, query);
+      url = this.setQueryParam(url, "per_page", this.perPage);
+      url = this.setQueryParam(url, "page", 1);
+      return url;
+    };
+  }
+  load() {
+    return (query, callback) => {
+      let url = this.tomSelect.getUrl(query);
+      fetch(url).then((response) => response.json()).then((json) => {
+        if (json.length === this.perPage) {
+          const currentPage = parseInt(this.getQueryParam(url, "page")) || 1;
+          url = this.setQueryParam(url, "page", currentPage + 1);
+          this.tomSelect.setNextUrl(query, url);
+        } else {
+          this.tomSelect.setNextUrl(query, void 0);
+        }
+        callback(json);
+      }).catch(() => {
+        callback();
+      });
+    };
+  }
   renderOptions() {
     return {
       en: {
         option_create: function(data, escape) {
-          return '<div class="create">Add <strong>' + escape(data.input) + "</strong>&hellip;</div>";
+          return `<div class="create">Add <strong>${escape(data.input)}</strong>&hellip;</div>`;
         },
         no_results: function(data, escape) {
           return '<div class="no-results">No results found</div>';
+        },
+        loading_more: function(data, escape) {
+          return '<div class="loading-more-results">Loading more results ... </div>';
+        },
+        no_more_results: function(data, escape) {
+          return '<div class="no-more-results">No more results</div>';
         }
       },
       nl: {
         option_create: function(data, escape) {
-          return '<div class="create">Voeg <strong>' + escape(data.input) + "</strong> toe &hellip;</div>";
+          return `<div class="create">Voeg <strong>${escape(data.input)}</strong> toe &hellip;</div>`;
         },
         no_results: function(data, escape) {
           return '<div class="no-results">Geen resultaten gevonden</div>';
+        },
+        loading_more: function(data, escape) {
+          return '<div class="loading-more-results">Laad meer resultaten ... </div>';
+        },
+        no_more_results: function(data, escape) {
+          return '<div class="no-more-results">Geen resultaten meer</div>';
+        }
+      },
+      fr: {
+        option_create: function(data, escape) {
+          return `<div class="create">Ajouter <strong>${escape(data.input)}</strong>&hellip;</div>`;
+        },
+        no_results: function(data, escape) {
+          return '<div class="no-results">Aucun r\xE9sultat trouv\xE9</div>';
+        },
+        loading_more: function(data, escape) {
+          return '<div class="loading-more-results">Chargement de plus de r\xE9sultats ... </div>';
+        },
+        no_more_results: function(data, escape) {
+          return '<div class="no-more-results">Plus de r\xE9sultats</div>';
+        }
+      },
+      de: {
+        option_create: function(data, escape) {
+          return `<div class="create">Hinzuf\xFCgen <strong>${escape(data.input)}</strong>&hellip;</div>`;
+        },
+        no_results: function(data, escape) {
+          return '<div class="no-results">Keine Ergebnisse gefunden</div>';
+        },
+        loading_more: function(data, escape) {
+          return '<div class="loading-more-results">Lade weitere Ergebnisse ... </div>';
+        },
+        no_more_results: function(data, escape) {
+          return '<div class="no-more-results">Keine weiteren Ergebnisse</div>';
         }
       }
     };
@@ -13437,13 +13552,34 @@ var select_controller_default = class extends Controller {
     const defaultOptions = this.defaultOptions();
     const options = {
       create: this.hasTags(),
-      items: this.selectedValue
+      ...this.isRemote() && {
+        plugins: {
+          caret_position: {},
+          drag_drop: {},
+          input_autogrow: {},
+          virtual_scroll: {}
+        },
+        valueField: this.remoteValueValue,
+        labelField: this.remoteLabelValue,
+        searchField: this.remoteLabelValue,
+        firstUrl: this.firstUrl(),
+        load: this.load(),
+        maxOptions: null,
+        onFocus: () => {
+          this.tomSelect.clearOptions();
+          this.tomSelect.setNextUrl("", this.firstUrl()(""));
+          this.tomSelect.load("");
+        }
+      }
     };
-    new import_tom_select.default(this.element, { ...defaultOptions, ...options });
+    return new import_tom_select.default(this.element, { ...defaultOptions, ...options });
   }
 };
 __publicField(select_controller_default, "values", {
-  selected: Array
+  remoteUrl: String,
+  remoteValue: String,
+  remoteLabel: String,
+  remoteQueryParam: String
 });
 
 // app/assets/javascripts/formstrap/controllers/textarea_controller.js

data/app/models/formstrap/association_view.rb

@@ -36,7 +36,7 @@ module Formstrap
     end
 
     def attribute_with_id
-      attribute_with_id = collection? ? "#{association_foreign_key}s" : foreign_key
+      attribute_with_id = collection? ? "#{singular_name}_ids" : foreign_key
 
       if attribute_with_id.nil?
         raise(AssociationDoesNotExistError, "Association attribute that was passed does not exist.")
@@ -46,11 +46,28 @@ module Formstrap
     end
 
     def collection
-      association_class.all.map { |item| [item.to_s, item.id] }
+      if remote
+        collection_for_values
+      else
+        association_class.all.map { |item| [item.to_s, item.id] }
+      end
     end
 
     private
 
+    def collection_for_values
+      if collection?
+        form.object.send(attribute).map { |item| option_for_item[item] }
+      else
+        [option_for_item(form.object.send(attribute))]
+      end
+    end
+
+    def option_for_item(item)
+      return unless item
+      [item.send(remote[:label]), item.send(remote[:value])]
+    end
+
     def association_foreign_key
       reflection.association_foreign_key
     end
@@ -63,6 +80,10 @@ module Formstrap
       form.object.class.reflect_on_association(attribute)
     end
 
+    def singular_name
+      reflection.name.to_s.singularize
+    end
+
     def association_class
       reflection.klass
     end
@@ -85,6 +106,7 @@ module Formstrap
           tags: tags,
           controller: "select"
         },
+        remote: remote,
         multiple: tags,
         placeholder: placeholder
       }

data/app/models/formstrap/media_view.rb

@@ -92,7 +92,7 @@ module Formstrap
       if attached.is_a?(ActiveStorage::Attached::Many)
         form.object.send(nested_attribute).build
       else
-        form.object.send("build_#{nested_attribute}")
+        form.object.send(:"build_#{nested_attribute}")
       end
     end
 

data/app/models/formstrap/redactor_view.rb

@@ -24,7 +24,7 @@ module Formstrap
         lang: I18n.locale,
         # button to control a block/line in the editor
         control: false,
-        minHeight: '57px',
+        minHeight: "57px",
         theme: "light",
         # Popup when highlighting text
         context: false,
@@ -34,11 +34,11 @@ module Formstrap
           # Options in block/line popup
           control: [],
           # Options in format popup
-          format: %w[text h1 h2 h3 h4],
+          format: %w[text h1 h2 h3 h4]
         },
         block: {
           # Outline block/line in the editor
-          outline: false,
+          outline: false
         },
         buttons: {
           # Options when highlighting text
@@ -46,9 +46,9 @@ module Formstrap
           # Options in toolbar on the right
           extrabar: %w[],
           # Options in toolbar on the left
-          toolbar: %w[format bold italic deleted list table link html],
+          toolbar: %w[format bold italic deleted list table link html]
         },
-        plugins: %w[emoji linkstyles],
+        plugins: %w[emoji linkstyles]
       }.delete_if { |k, v| v.nil? }
     end
   end

data/app/models/formstrap/select_view.rb

@@ -9,7 +9,7 @@ module Formstrap
     include Formstrap::Wrappable
 
     def input_options
-      keys = attributes - %i[append attribute collection float form input_group include_blank label prepend validate selected tags wrapper]
+      keys = attributes - %i[append attribute collection float form input_group include_blank label prepend validate selected tags wrapper remote]
       options = to_h.slice(*keys)
       default_input_options.deep_merge(options)
     end
@@ -35,9 +35,27 @@ module Formstrap
     private
 
     def default_options
-      selected = attribute.nil? ? nil : form.object&.send(attribute)
       {
-        selected: selected
+        selected: value
+      }
+    end
+
+    def value
+      attribute.nil? ? nil : form.object&.send(attribute)
+    end
+
+    def is_remote?
+      return false unless remote
+      remote.has_key?(:url)
+    end
+
+    def remote_options
+      return nil unless is_remote?
+      {
+        select_remote_url_value: remote[:url],
+        select_remote_value_value: remote&.dig(:value) || "name",
+        select_remote_label_value: remote&.dig(:label) || "id",
+        select_remote_query_param_value: remote&.dig(:query_param) || "search"
       }
     end
 
@@ -48,7 +66,7 @@ module Formstrap
         data: {
           tags: tags,
           controller: "select",
-          "select_selected_value": select_options[:selected]
+          **remote_options
         },
         multiple: tags,
         placeholder: placeholder

data/app/models/formstrap/wysiwyg_view.rb

@@ -14,7 +14,7 @@ module Formstrap
       options = {
         redactor: {
           context: !toolbar,
-          extrabar: toolbar,
+          extrabar: toolbar
         }
       }
 

data/app/models/view_model.rb

@@ -24,7 +24,7 @@ class ViewModel
 
   def initialize(hash = {})
     hash.each do |key, value|
-      instance_variable_set("@#{key}", value)
+      instance_variable_set(:"@#{key}", value)
     end
   end
 
@@ -45,11 +45,11 @@ class ViewModel
   end
 
   def value_for(attribute)
-    reserved_methods.include?(attribute) ? instance_variable_get("@#{attribute}") : send(attribute)
+    reserved_methods.include?(attribute) ? instance_variable_get(:"@#{attribute}") : send(attribute)
   end
 
   def method_missing(m, *args, &block)
-    instance_variable_get("@#{m}")
+    instance_variable_get(:"@#{m}")
   end
 
   def respond_to_missing?

data/app/views/formstrap/_association.html.erb

@@ -6,7 +6,21 @@
   # * +form+ - Form object
   #
   # ==== Optional parameters
+  # * +append+ - Display as input group with text on the right-hand side
   # * +collection+ - Values to create option tags for
+  # * +float+ - Use floating labels. Defaults to false
+  # * +hint+ - Informative text to assist with data input. HTML markup is allowed.
+  # * +label+ - Text to display inside label tag. Defaults to the attribute name. Set to false if you don"t want to show a label.
+  # * +plaintext+ - Render input as plain text.
+  # * +prepend+ - Display as input group with text on the left-hand side
+  # * +remote+ - Hash with all options for remote data fetching
+  # * +wrapper+ - Hash with all options for the surrounding html tag
+  #
+  # ==== Remote options
+  # * +url+ -- JSON endpoint to fetch data from
+  # * +value+ -- JSON attribute to use as the value for the option tag
+  # * +label+ -- JSON attribute to use as the label for the option tag
+  # * +query_param+ -- The query parameter used for searching the json endpoint, default: "search"
   #
   #
   # ==== Examples
@@ -14,17 +28,25 @@
   #   <%= form_with do |form| %#>
   #     <%= render "formstrap/association", form: form, attribute: :product %#>
   #   <% end %#>
+  #
+  #   Remote data
+  #   <%= form_with do |form| %#>
+  #     <%= render "formstrap/association", form: form, attribute: :product, remote: {url: admin_products_path, value: "id", label: "name"} %#>
+  #   <% end %#>
 
   association = Formstrap::AssociationView.new(local_assigns)
-
 %>
 
-<%= render "formstrap/wrapper", association.wrapper_options do %>
-  <%= render "formstrap/label", association.label_options if association.prepend_label? %>
-  <%= render "formstrap/input_group", association.input_group_options do %>
-    <%= form.select(association.attribute_with_id, formstrap: false, choices: association.collection, options: association.select_options, html_options: association.input_options) %>
-  <% end %>
-  <%= render "formstrap/validation", association.validation_options if association.validate? %>
-  <%= render "formstrap/hint", association.hint_options if association.hint? %>
-  <%= render "formstrap/label", association.label_options if association.append_label? %>
-<% end %>
+<%= render(
+  "formstrap/select",
+  form: form,
+  attribute: association.attribute_with_id,
+  collection: association.collection,
+  wrapper: association.wrapper_options,
+  float: association.float,
+  hint: association.hint,
+  plaintext: association.plaintext,
+  prepend: association.prepend,
+  append: association.append,
+  remote: association.remote
+) %>

data/app/views/formstrap/_select.html.erb

@@ -16,6 +16,13 @@
   # * +prepend+ - Display as input group with text on the left-hand side
   # * +tags+ - Allow options to be created dynamically. This will set the multiple attribute to true
   # * +wrapper+ - Hash with all options for the surrounding html tag
+  # * +remote+ - Hash with all options for remote data fetching
+  #
+  # ==== Remote options
+  # * +url+ -- JSON endpoint to fetch data from
+  # * +value+ -- JSON attribute to use as the value for the option tag
+  # * +label+ -- JSON attribute to use as the label for the option tag
+  # * +query_param+ -- The query parameter used for searching the json endpoint 
   #
   # ==== References
   # https://headmin.dev/docs/forms/select
@@ -27,6 +34,11 @@
   #   <%= form_with do |form| %#>
   #     <%= render "formstrap/select", form: form, attribute: :color, collection: %w[red green blue] %#>
   #   <% end %#>
+  #
+  #   Remote data 
+  #   <%= form_with do |form| %#>
+  #     <%= render "formstrap/select", form: form, attribute: :id, collection: [["Page 1", 1]], remote: {url: admin_pages_path, value: "id", label: "title"} %#>
+  #   <% end %#>
 
   select = Formstrap::SelectView.new(local_assigns)
 %>
@@ -34,7 +46,13 @@
 <%= render "formstrap/wrapper", select.wrapper_options do %>
   <%= render "formstrap/label", select.label_options if select.prepend_label? %>
   <%= render "formstrap/input_group", select.input_group_options do %>
-    <%= form.select(select.attribute, formstrap: false, choices: select.collection, options: select.select_options, html_options: select.input_options) %>
+    <%= form.select(
+      select.attribute, 
+      formstrap: false, 
+      choices: select.collection, 
+      options: select.select_options, 
+      html_options: select.input_options
+    ) %>
   <% end %>
   <%= render "formstrap/validation", select.validation_options if select.validate? %>
   <%= render "formstrap/hint", select.hint_options if select.hint? %>

data/app/views/formstrap/media/_modal.html.erb

@@ -59,7 +59,10 @@
         <% end %>
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><%= t(".close") %></button>
         <button type="button" class="btn btn-primary" data-bs-dismiss="modal" data-action="click->media-modal#select" data-media-modal-target="selectButton">
-          <%= t(".select") %> (<span data-media-modal-target="count">0</span><%= t(".maximum", count: max.to_i) if max.present? %>)
+          <%= t(".select") %> 
+          <% unless max.present? && max.to_i == 1 %>
+            (<span data-media-modal-target="count">0</span><%= t(".maximum", count: max.to_i) if max.present? %>)
+          <% end %>
         </button>
       </div>
     </div>

data/app/views/formstrap/shared/_nested_preview.html.erb

@@ -1,6 +1,17 @@
-<div data-controller="nested-preview" data-nested-preview-url-value="<%= url %>">
+<div
+  data-controller="nested-preview"
+  data-nested-preview-url-value="<%= url %>"
+>
   <!-- Preview placeholder -->
-  <div class="nested-preview-iframe-wrapper position-relative" role="button" data-nested-preview-target="iframeWrapper" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-<%= form.options[:child_index] %>" aria-controls="offcanvasRight" data-turbo-cache="false">
+  <div
+    class="nested-preview-iframe-wrapper position-relative"
+    role="button"
+    data-nested-preview-target="iframeWrapper"
+    data-bs-toggle="offcanvas"
+    data-bs-target="#offcanvas-<%= form.options[:child_index] %>"
+    aria-controls="offcanvasRight"
+    data-turbo-temporary
+  >
     <iframe src="<%= url %>" class="pe-none" data-nested-preview-target="iframe"></iframe>
     <div data-nested-preview-target="loader" class="nested-preview-loader">
       <div class="spinner-grow text-secondary" role="status">
@@ -8,27 +19,36 @@
       </div>
     </div>
   </div>
-
   <!-- Preview fields wrapper -->
-  <div class="offcanvas offcanvas-end nested-preview-offcanvas" tabindex="-1" id="offcanvas-<%= form.options[:child_index] %>" aria-labelledby="offcanvasRightLabel" data-nested-preview-target="offcanvas">
+  <div
+    class="offcanvas offcanvas-end nested-preview-offcanvas"
+    tabindex="-1"
+    id="offcanvas-<%= form.options[:child_index] %>"
+    aria-labelledby="offcanvasRightLabel"
+    data-nested-preview-target="offcanvas"
+  >
     <div class="offcanvas-header">
-      <h5 class="offcanvas-title" id="offcanvasRightLabel"><%= t('.title', model: form.object.model_name.human) %></h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <h5 class="offcanvas-title" id="offcanvasRightLabel"><%= t(".title", model: form.object.model_name.human) %></h5>
+      <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="offcanvas"
+        aria-label="Close"
+      ></button>
     </div>
     <div class="offcanvas-body">
 
       <div class="alert alert-danger d-none" data-nested-preview-target="error">
         <%= t(".error") %>
       </div>
-
       <!-- Row content -->
       <div data-nested-preview-target="fields">
         <%= yield %>
       </div>
-
       <!-- Preview sync button -->
       <div class="btn btn-primary" data-action="click->nested-preview#update">
-        <%= bootstrap_icon("arrow-repeat") %> <%= t('.button') %>
+        <%= bootstrap_icon("arrow-repeat") %>
+        <%= t(".button") %>
       </div>
     </div>
   </div>

data/lib/formstrap/form_builder.rb

@@ -11,7 +11,7 @@ module Formstrap
       render_input(:association, attribute, options)
     end
 
-    def preview_button(url = nil, options = {}, &block)
+    def preview_button(url = nil, options = {}, &)
       default_options = {
         data: {
           controller: "preview",
@@ -19,7 +19,7 @@ module Formstrap
         }
       }
 
-      @template.render("formstrap/link", form: self, url: url, options: default_options.deep_merge(options), &block)
+      @template.render("formstrap/link", form: self, url: url, options: default_options.deep_merge(options), &)
     end
 
     def checkbox(attribute, formstrap: true, **options)
@@ -114,8 +114,8 @@ module Formstrap
       end
     end
 
-    def repeater_for(attribute, options = {}, &block)
-      @template.render("formstrap/repeater", form: self, attribute: attribute, **options, &block)
+    def repeater_for(attribute, options = {}, &)
+      @template.render("formstrap/repeater", form: self, attribute: attribute, **options, &)
     end
 
     def redactor(attribute, formstrap: true, **options)

data/lib/formstrap/form_helper.rb

@@ -1,15 +1,15 @@
 module Formstrap
   module FormHelper
-    def formstrap_form_for(record, options = {}, &block)
+    def formstrap_form_for(record, options = {}, &)
       # ToDo: Can we pass info about the view here (e.g. host, protocol ...)
       options = options.reverse_merge({builder: Formstrap::FormBuilder})
-      form_for(record, options, &block)
+      form_for(record, options, &)
     end
 
-    def formstrap_form_with(options = {}, &block)
+    def formstrap_form_with(options = {}, &)
       # ToDo: Can we pass info about the view here (e.g. host, protocol ...)
       options = options.reverse_merge({builder: Formstrap::FormBuilder})
-      form_with(**options, &block)
+      form_with(**options, &)
     end
   end
 end

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.4.5"
+  VERSION = "0.4.7"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.4.4",
+  "version": "0.4.7",
   "description": "Bootstrap-powered Form Helpers",
   "module": "app/assets/javascripts/formstrap.js",
   "main": "app/assets/javascripts/formstrap.js",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: formstrap
 version: !ruby/object:Gem::Version
-  version: 0.4.5
+  version: 0.4.7
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-11-21 00:00:00.000000000 Z
+date: 2025-02-10 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email: