formstrap 0.4.4 → 0.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9036a76a91e170b7fb332d006940db1273770254f9d26c090365c512ce0e0c16
-  data.tar.gz: 22433a20c6970ddcee18a5df637cc7a4506bc77d4516e73b3c39cc76af3026ab
+  metadata.gz: e4b8936b5898f98f1ec48da9e055b734a5869c3a06878c91c94b3db0511d3412
+  data.tar.gz: c7b810c58dd0b5245c41a4a085d744f9daa301d536875c0a4110c36afafa903b
 SHA512:
-  metadata.gz: 733e8dc5350e55ae59df878de51daa8da355159eeccb7875ff5d9c0bfa19fafa7fc6019ed6e8779eca09a07a3657e451145f5e2c98d6f53e3bf91118ccda24d4
-  data.tar.gz: 3c39838520f7dc0d62bc010ca159e91c6df28e179c505c825362d50c941a9b972fb1845657352466e59517d3c903a27a9b86b60769392e4af7d77350c0e6d8ea
+  metadata.gz: e64b6a8e8817a5770b17b6a420ae9d5d0f3a12263625088a05775a30035c7076999f99c9ce913d68cf1e70183ac9a237e1d905e54b854fe38017e01db3e8b73d
+  data.tar.gz: 364f70b46af019753bd9c0b371d5848bf86828007ebb9066fe37dc7d18f8bf99445ae29003aded25ceb497c2364a3d56790044375ca0b1b0b19c26b7ba5ffa98

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

@@ -4,15 +4,22 @@ import I18n from '../config/i18n'
 
 export default class extends Controller {
   static values = {
-    selected: Array
+    remoteUrl: String,
+    remoteValue: String,
+    remoteLabel: String,
+    remoteQueryParam: String
   }
-  
+
   connect () {
-    if (this.element.hasAttribute('multiple') || this.element.dataset.tomSelect === 'true') {
+    if (this.isMultiple() || this.isTomSelect() || this.isRemote()) {
       this.initTomSelect()
     }
   }
 
+  disconnect () {
+    this.element.tomselect.destroy()
+  }
+
   defaultOptions () {
     return {
       plugins: ['drag_drop', 'caret_position', 'input_autogrow'],
@@ -22,6 +29,29 @@ export default class extends Controller {
     }
   }
 
+  isMultiple () {
+    return this.element.hasAttribute('multiple')
+  }
+
+  isTomSelect () {
+    return this.element.dataset.tomSelect === 'true'
+  }
+
+  isRemote () {
+    return this.remoteUrlValue
+  }
+
+  defaultLoadOptions () {
+    return (query, callback) => {
+      if (!query.length) return callback()
+
+      fetch(`${this.remoteUrlValue}.json?${this.remoteQueryParamValue}=${encodeURIComponent(query)}`)
+        .then(response => response.json())
+        .then(data => { callback(data) })
+        .catch(() => { callback() })
+    }
+  }
+
   renderOptions () {
     return {
       en: {
@@ -49,9 +79,15 @@ export default class extends Controller {
 
   initTomSelect () {
     const defaultOptions = this.defaultOptions()
-    const options = { 
+    const options = {
       create: this.hasTags(),
-      items: this.selectedValue
+      ...(this.isRemote() && {
+        valueField: this.remoteValueValue,
+        labelField: this.remoteLabelValue,
+        searchField: this.remoteLabelValue,
+        load: this.defaultLoadOptions()
+      }
+      )
     }
 
     /* eslint-disable no-new */

data/app/assets/javascripts/formstrap/vendor/redactor/plugins/linkstyles.js

@@ -31,11 +31,13 @@ Redactor.add('plugin', 'linkstyles', {
       }
     },
     'link.change': function (e) {
-      const link = e.params.element.nodes[0]
+      let link = e.params.element.nodes[0]
+      link = this.ensureValidProtocol(link)
       this.applyStylingToLink(link)
     },
     'link.add': function (e) {
-      const link = e.params.element.nodes[0]
+      let link = e.params.element.nodes[0]
+      link = this.ensureValidProtocol(link)
       this.applyStylingToLink(link)
     }
   },
@@ -47,6 +49,7 @@ Redactor.add('plugin', 'linkstyles', {
     const stack = this.app.modal.getStack()
 
     const item = stack.getFormItem('url')
+
     const box = this.dom('<div>').addClass('rx-form-item')
 
     // Add a select
@@ -69,6 +72,18 @@ Redactor.add('plugin', 'linkstyles', {
       link.classList.add(className)
     })
   },
+  ensureValidProtocol (link) {
+    let url = link.getAttribute('href')
+
+    // Match valid protocols
+    const regex = /^(https?:\/\/|mailto:|ftp:\/\/)/i
+    if (!regex.test(url)) {
+      url = `https://${url}`
+    }
+
+    link.setAttribute('href', url)
+    return link
+  },
   buildSelect () {
     // Create a select node
     const select = this.dom('<select>').addClass('rx-form-select')

data/app/assets/javascripts/formstrap.js

@@ -13398,10 +13398,13 @@ var repeater_controller_default = class extends Controller {
 var import_tom_select = __toESM(require_tom_select_complete());
 var select_controller_default = class extends Controller {
   connect() {
-    if (this.element.hasAttribute("multiple") || this.element.dataset.tomSelect === "true") {
+    if (this.isMultiple() || this.isTomSelect() || this.isRemote()) {
       this.initTomSelect();
     }
   }
+  disconnect() {
+    this.element.tomselect.destroy();
+  }
   defaultOptions() {
     return {
       plugins: ["drag_drop", "caret_position", "input_autogrow"],
@@ -13410,6 +13413,26 @@ var select_controller_default = class extends Controller {
       render: this.renderOptions()[i18n_default.locale]
     };
   }
+  isMultiple() {
+    return this.element.hasAttribute("multiple");
+  }
+  isTomSelect() {
+    return this.element.dataset.tomSelect === "true";
+  }
+  isRemote() {
+    return this.remoteUrlValue;
+  }
+  defaultLoadOptions() {
+    return (query, callback) => {
+      if (!query.length)
+        return callback();
+      fetch(`${this.remoteUrlValue}.json?${this.remoteQueryParamValue}=${encodeURIComponent(query)}`).then((response) => response.json()).then((data) => {
+        callback(data);
+      }).catch(() => {
+        callback();
+      });
+    };
+  }
   renderOptions() {
     return {
       en: {
@@ -13437,13 +13460,21 @@ var select_controller_default = class extends Controller {
     const defaultOptions = this.defaultOptions();
     const options = {
       create: this.hasTags(),
-      items: this.selectedValue
+      ...this.isRemote() && {
+        valueField: this.remoteValueValue,
+        labelField: this.remoteLabelValue,
+        searchField: this.remoteLabelValue,
+        load: this.defaultLoadOptions()
+      }
     };
     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
@@ -14462,11 +14493,13 @@ Redactor.add("plugin", "linkstyles", {
       }
     },
     "link.change": function(e) {
-      const link = e.params.element.nodes[0];
+      let link = e.params.element.nodes[0];
+      link = this.ensureValidProtocol(link);
       this.applyStylingToLink(link);
     },
     "link.add": function(e) {
-      const link = e.params.element.nodes[0];
+      let link = e.params.element.nodes[0];
+      link = this.ensureValidProtocol(link);
       this.applyStylingToLink(link);
     }
   },
@@ -14490,6 +14523,15 @@ Redactor.add("plugin", "linkstyles", {
       link.classList.add(className);
     });
   },
+  ensureValidProtocol(link) {
+    let url = link.getAttribute("href");
+    const regex = /^(https?:\/\/|mailto:|ftp:\/\/)/i;
+    if (!regex.test(url)) {
+      url = `https://${url}`;
+    }
+    link.setAttribute("href", url);
+    return link;
+  },
   buildSelect() {
     const select = this.dom("<select>").addClass("rx-form-select");
     const items = this.opts.get("linkstyles.items");

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/_link.html.erb

@@ -0,0 +1,3 @@
+<%= link_to url, options do %>
+  <%= yield %>
+<% end %>

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/lib/formstrap/form_builder.rb

@@ -11,15 +11,15 @@ module Formstrap
       render_input(:association, attribute, options)
     end
 
-    def preview_button(value = nil, options = {}, &block)
+    def preview_button(url = nil, options = {}, &block)
       default_options = {
         data: {
           controller: "preview",
-          "preview-url-value": options[:url]
-        },
-        type: nil
+          preview_url_value: url
+        }
       }
-      button value, default_options.deep_merge(options.except(:url)), &block
+
+      @template.render("formstrap/link", form: self, url: url, options: default_options.deep_merge(options), &block)
     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.4"
+  VERSION = "0.4.6"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "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.4
+  version: 0.4.6
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-07-16 00:00:00.000000000 Z
+date: 2025-01-16 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email:
@@ -142,6 +142,7 @@ files:
 - app/views/formstrap/_hint.html.erb
 - app/views/formstrap/_input_group.html.erb
 - app/views/formstrap/_label.html.erb
+- app/views/formstrap/_link.html.erb
 - app/views/formstrap/_media.html.erb
 - app/views/formstrap/_number.html.erb
 - app/views/formstrap/_password.html.erb