formstrap 0.4.6 → 0.4.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4b8936b5898f98f1ec48da9e055b734a5869c3a06878c91c94b3db0511d3412
-  data.tar.gz: c7b810c58dd0b5245c41a4a085d744f9daa301d536875c0a4110c36afafa903b
+  metadata.gz: e389e7cf84a407fab16ee8a1b2e44d6f3c5219a4d2dda9256ebf33628075933d
+  data.tar.gz: 403dabdc1b847bb03fed251052c772044692efe38f25add66802e5552f04a2ac
 SHA512:
-  metadata.gz: e64b6a8e8817a5770b17b6a420ae9d5d0f3a12263625088a05775a30035c7076999f99c9ce913d68cf1e70183ac9a237e1d905e54b854fe38017e01db3e8b73d
-  data.tar.gz: 364f70b46af019753bd9c0b371d5848bf86828007ebb9066fe37dc7d18f8bf99445ae29003aded25ceb497c2364a3d56790044375ca0b1b0b19c26b7ba5ffa98
+  metadata.gz: 6464a8b35fa692f8105babccfa93971bce0af7b18b2b65b9b2792a8951acfc1931697cf2b7c46bc32c86a34d52ed223dbd27368f8ce8f0110fe0a1412830391e
+  data.tar.gz: 42bd6c1c1027b06b7c651b05d2b789baf5a01ad451dcf2354f18911f49ead5099a4074cc9ae21d469855121594b6e484fb901121e106f747f9c4c50db567fe5f

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

@@ -10,19 +10,30 @@ export default class extends Controller {
     remoteQueryParam: String
   }
 
+  initialize () {
+    this.tomSelect = undefined
+    this.perPage = 24
+  }
+
   connect () {
     if (this.isMultiple() || this.isTomSelect() || this.isRemote()) {
-      this.initTomSelect()
+      this.tomSelect = this.initTomSelect()
     }
   }
 
   disconnect () {
-    this.element.tomselect.destroy()
+    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]
@@ -41,13 +52,56 @@ export default class extends Controller {
     return this.remoteUrlValue
   }
 
-  defaultLoadOptions () {
+  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
+      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) => {
-      if (!query.length) return callback()
+      let url = this.tomSelect.getUrl(query)
 
-      fetch(`${this.remoteUrlValue}.json?${this.remoteQueryParamValue}=${encodeURIComponent(query)}`)
+      fetch(url, {
+        headers: {
+          Accept: 'application/json',
+          'Conent-Type': 'application/json'
+        }
+      })
         .then(response => response.json())
-        .then(data => { callback(data) })
+        .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() })
     }
   }
@@ -56,18 +110,58 @@ export default class extends Controller {
     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>'
         }
       }
     }
@@ -82,15 +176,28 @@ export default class extends Controller {
     const options = {
       create: this.hasTags(),
       ...(this.isRemote() && {
+        plugins: {
+          caret_position: {},
+          drag_drop: {},
+          input_autogrow: {},
+          virtual_scroll: {}
+        },
         valueField: this.remoteValueValue,
         labelField: this.remoteLabelValue,
         searchField: this.remoteLabelValue,
-        load: this.defaultLoadOptions()
-      }
-      )
+        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,17 +13413,27 @@ 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.isMultiple() || this.isTomSelect() || this.isRemote()) {
-      this.initTomSelect();
+      this.tomSelect = this.initTomSelect();
     }
   }
   disconnect() {
-    this.element.tomselect.destroy();
+    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]
@@ -13422,12 +13448,43 @@ var select_controller_default = class extends Controller {
   isRemote() {
     return this.remoteUrlValue;
   }
-  defaultLoadOptions() {
+  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;
+      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) => {
-      if (!query.length)
-        return callback();
-      fetch(`${this.remoteUrlValue}.json?${this.remoteQueryParamValue}=${encodeURIComponent(query)}`).then((response) => response.json()).then((data) => {
-        callback(data);
+      let url = this.tomSelect.getUrl(query);
+      fetch(url, {
+        headers: {
+          Accept: "application/json",
+          "Conent-Type": "application/json"
+        }
+      }).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();
       });
@@ -13437,18 +13494,58 @@ var select_controller_default = class extends Controller {
     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>';
         }
       }
     };
@@ -13461,13 +13558,26 @@ var select_controller_default = class extends Controller {
     const options = {
       create: this.hasTags(),
       ...this.isRemote() && {
+        plugins: {
+          caret_position: {},
+          drag_drop: {},
+          input_autogrow: {},
+          virtual_scroll: {}
+        },
         valueField: this.remoteValueValue,
         labelField: this.remoteLabelValue,
         searchField: this.remoteLabelValue,
-        load: this.defaultLoadOptions()
+        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", {

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

@@ -48,5 +48,6 @@
   plaintext: association.plaintext,
   prepend: association.prepend,
   append: association.append,
-  remote: association.remote
+  remote: association.remote,
+  label: association.label,
 ) %>

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)

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.4.6"
+  VERSION = "0.4.8"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.4.5",
+  "version": "0.4.8",
   "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.6
+  version: 0.4.8
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-01-16 00:00:00.000000000 Z
+date: 2025-02-13 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email: