formstrap 0.3.1 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d52dd192e41d84f75bc6be46186bd8a5739ab34f72b8a03a7f57a2518024356
-  data.tar.gz: 21985d08ac6f4837e06385a0de891e0785366322f8504a537f22a89d397903aa
+  metadata.gz: dc7c89e02028fbd50ff04f97b36ad9ef3bcbc3a1e270d025a664a721a9755e7d
+  data.tar.gz: 2375b43a0db037bcb58be9bac12d47079d7f4e5baaa03b08a5ea839053a3aaad
 SHA512:
-  metadata.gz: d4e86b30d1f485050c98c72ef426d3590624544e86675b41efe409382595d8f121878b437cf5fdb7ff8dc7aef71dd11c5f689b3bae73d805d1011f6c68cd965b
-  data.tar.gz: 1f04bdc357480984893120ef11166a2c62ade2e80ad793d49814a550f5e35099fd559ca05f57070ce51a166691a1c4c9a916fedd357b29f38c41b563e3c15601
+  metadata.gz: c888b852f01b98134dae97d0a5573ac695c4525020a9fef792af903b9c7a894c5b85dce0172633246e78a0e5ed2825c89659ecf2ff2a663f5aea9b10d844002b
+  data.tar.gz: 30ae20de2ddf908f64a82ca167bbc62fa6c0c6b744403e48ff053a9b6e1f293a323f3070947f3d29dd5e4509ef7cee20d42ec9db18d76adb53c8eddb79ee65aa

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

@@ -114,11 +114,11 @@ export default class extends Controller {
   }
 
   minActiveItems () {
-    return parseInt(this.element.dataset.min, 10) || 0
+    return parseInt(this.validationInputTarget.dataset.min, 10) || 0
   }
 
   maxActiveItems () {
-    return parseInt(this.element.dataset.max, 10) || Infinity
+    return parseInt(this.validationInputTarget.dataset.max, 10) || Infinity
   }
 
   resetPositions () {
@@ -131,13 +131,7 @@ export default class extends Controller {
   }
 
   addNewItems (items) {
-    const itemTargetIds = this.itemTargets.map((i) => { return parseInt(i.querySelectorAll('input')[1].value) })
     items.forEach((item) => {
-      if (itemTargetIds.includes(item.blobId)) {
-        // Do not add this item (as it is already present)
-        return
-      }
-
       this.addItem(item)
     })
   }
@@ -211,7 +205,7 @@ export default class extends Controller {
     const returnedBlobIds = elements.map((e) => { return e.blobId })
 
     items.forEach((item) => {
-      const blobId = parseInt(item.querySelectorAll('input')[1].value)
+      const blobId = parseInt(item.querySelectorAll('input')[1].value, 10)
       if (returnedBlobIds.includes(blobId)) {
         // Do not delete this one
         return
@@ -237,7 +231,7 @@ export default class extends Controller {
 
   itemByBlobId (blobId) {
     return this.itemTargets.find((item) => {
-      return item.querySelector('input[name*=\'blob_id\']').value === blobId
+      return parseInt(item.querySelector('input[name*=\'blob_id\']').value, 10) === blobId
     })
   }
 
@@ -249,7 +243,7 @@ export default class extends Controller {
 
   activeIds () {
     return this.activeItems().map((item) => {
-      return item.querySelector('input[name$=\'[blob_id]\']').value
+      return parseInt(item.querySelector('input[name$=\'[blob_id]\']').value, 10)
     })
   }
 }

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

@@ -1,3 +1,4 @@
+/* global XMLHttpRequest, MutationObserver */
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
@@ -30,7 +31,6 @@ export default class extends Controller {
   }
 
   autoResizeIframe () {
-    // eslint-disable-next-line no-undef
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         this.resizeIframe()
@@ -77,7 +77,6 @@ export default class extends Controller {
 
   requestPreview () {
     // Create an AJAX request
-    // eslint-disable-next-line no-undef
     const xhr = new XMLHttpRequest()
     xhr.open('POST', this.urlValue, true)
 
@@ -109,7 +108,7 @@ export default class extends Controller {
   validateFields () {
     let allValid = true
     const fields = this.fieldsTarget
-    const formElements = fields.querySelectorAll('input[name], select[name], textarea[name]')
+    const formElements = fields.querySelectorAll('input:not([type="hidden"]), select[name], textarea[name]')
     formElements.forEach(function (element) {
       const isValid = element.reportValidity()
       if (!isValid) {
@@ -127,12 +126,15 @@ export default class extends Controller {
     const formData = new FormData()
 
     // Replace all occurrences of "page[blocks_attributes][0]" with "block"
-    const regex = /\w+\[([^\]]+)s_attributes\]\[\d+\]/g
+    const regex = /\w+\[([^\]]+)s_attributes]\[\d+]/g
     const formElements = fields.querySelectorAll('input[name]:not([name$="[id]"]), select[name]:not([name$="[id]"]), textarea[name]:not([name$="[id]"]), button[name]:not([name$="[id]"])')
-    formElements.forEach(function (element) {
+    formElements.forEach((element) => {
       const currentName = element.getAttribute('name')
       const newName = currentName.replace(regex, '$1')
-      formData.append(newName, element.value)
+      const values = this.readValues(element)
+      values.forEach((value) => {
+        formData.append(newName, value)
+      })
     })
 
     // Add authenticity token
@@ -141,6 +143,15 @@ export default class extends Controller {
     return formData
   }
 
+  readValues (element) {
+    // Check if the element is a select with multiple selection
+    if (element.tagName.toLowerCase() === 'select' && element.multiple) {
+      return [...element.selectedOptions].map(option => option.value)
+    } else {
+      return [element.value]
+    }
+  }
+
   // Prepare the iFrame for rendering
   // Objective: render the iframe content at the scale of the browser window, but resize it to fit the preview container
   prepareIframe () {

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

@@ -110,6 +110,7 @@ export default class extends Controller {
   replaceIdsWithTimestamps (template) {
     const pattern = 'rrrrrrrrr'
     const replacement = new Date().getTime().toString()
+    const regex = new RegExp(pattern, 'g')
 
     // Replace ids
     template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
@@ -117,6 +118,11 @@ export default class extends Controller {
       node.setAttribute('id', idValue.replace(pattern, replacement))
     })
 
+    // Search and replace pattern in templates
+    template.querySelectorAll('template').forEach((node) => {
+      node.innerHTML = node.innerHTML.replace(regex, replacement)
+    })
+
     // Replace labels
     template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
       const forValue = node.getAttribute('for')

data/app/assets/javascripts/formstrap.js

@@ -11035,10 +11035,10 @@ var media_controller_default = class extends Controller {
     }
   }
   minActiveItems() {
-    return parseInt(this.element.dataset.min, 10) || 0;
+    return parseInt(this.validationInputTarget.dataset.min, 10) || 0;
   }
   maxActiveItems() {
-    return parseInt(this.element.dataset.max, 10) || Infinity;
+    return parseInt(this.validationInputTarget.dataset.max, 10) || Infinity;
   }
   resetPositions() {
     this.activeItems().forEach((item, index2) => {
@@ -11049,13 +11049,7 @@ var media_controller_default = class extends Controller {
     });
   }
   addNewItems(items) {
-    const itemTargetIds = this.itemTargets.map((i) => {
-      return parseInt(i.querySelectorAll("input")[1].value);
-    });
     items.forEach((item) => {
-      if (itemTargetIds.includes(item.blobId)) {
-        return;
-      }
       this.addItem(item);
     });
   }
@@ -11112,7 +11106,7 @@ var media_controller_default = class extends Controller {
       return e.blobId;
     });
     items.forEach((item) => {
-      const blobId = parseInt(item.querySelectorAll("input")[1].value);
+      const blobId = parseInt(item.querySelectorAll("input")[1].value, 10);
       if (returnedBlobIds.includes(blobId)) {
         return;
       }
@@ -11128,7 +11122,7 @@ var media_controller_default = class extends Controller {
   }
   itemByBlobId(blobId) {
     return this.itemTargets.find((item) => {
-      return item.querySelector("input[name*='blob_id']").value === blobId;
+      return parseInt(item.querySelector("input[name*='blob_id']").value, 10) === blobId;
     });
   }
   activeItems() {
@@ -11138,7 +11132,7 @@ var media_controller_default = class extends Controller {
   }
   activeIds() {
     return this.activeItems().map((item) => {
-      return item.querySelector("input[name$='[blob_id]']").value;
+      return parseInt(item.querySelector("input[name$='[blob_id]']").value, 10);
     });
   }
 };
@@ -11374,7 +11368,7 @@ var nested_preview_controller_default = class extends Controller {
   validateFields() {
     let allValid = true;
     const fields = this.fieldsTarget;
-    const formElements = fields.querySelectorAll("input[name], select[name], textarea[name]");
+    const formElements = fields.querySelectorAll('input:not([type="hidden"]), select[name], textarea[name]');
     formElements.forEach(function(element) {
       const isValid = element.reportValidity();
       if (!isValid) {
@@ -11386,16 +11380,26 @@ var nested_preview_controller_default = class extends Controller {
   buildFormData() {
     const fields = this.fieldsTarget;
     const formData = new FormData();
-    const regex = /\w+\[([^\]]+)s_attributes\]\[\d+\]/g;
+    const regex = /\w+\[([^\]]+)s_attributes]\[\d+]/g;
     const formElements = fields.querySelectorAll('input[name]:not([name$="[id]"]), select[name]:not([name$="[id]"]), textarea[name]:not([name$="[id]"]), button[name]:not([name$="[id]"])');
-    formElements.forEach(function(element) {
+    formElements.forEach((element) => {
       const currentName = element.getAttribute("name");
       const newName = currentName.replace(regex, "$1");
-      formData.append(newName, element.value);
+      const values = this.readValues(element);
+      values.forEach((value) => {
+        formData.append(newName, value);
+      });
     });
     formData.append("authenticity_token", this.getAuthenticityToken());
     return formData;
   }
+  readValues(element) {
+    if (element.tagName.toLowerCase() === "select" && element.multiple) {
+      return [...element.selectedOptions].map((option2) => option2.value);
+    } else {
+      return [element.value];
+    }
+  }
   prepareIframe() {
     const scaleFactor = this.scaleFactor();
     const style = `
@@ -13219,10 +13223,14 @@ var repeater_controller_default = class extends Controller {
   replaceIdsWithTimestamps(template) {
     const pattern = "rrrrrrrrr";
     const replacement = new Date().getTime().toString();
+    const regex = new RegExp(pattern, "g");
     template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
       const idValue = node.getAttribute("id");
       node.setAttribute("id", idValue.replace(pattern, replacement));
     });
+    template.querySelectorAll("template").forEach((node) => {
+      node.innerHTML = node.innerHTML.replace(regex, replacement);
+    });
     template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
       const forValue = node.getAttribute("for");
       node.setAttribute("for", forValue.replace(pattern, replacement));

data/app/helpers/application_helper.rb

@@ -1,14 +1,14 @@
 class ApplicationHelper
   def show_svg(attachment, options = {})
-    return if !attachment.content_type.include?('svg')
+    return if !attachment.content_type.include?("svg")
 
     attachment.open do |file|
       content = file.read
       doc = Nokogiri::HTML::DocumentFragment.parse content
-      svg = doc.at_css 'svg'
+      svg = doc.at_css "svg"
 
       # for security
-      doc.search('script').each do |src|
+      doc.search("script").each do |src|
         src.remove
       end
 
@@ -17,4 +17,4 @@ class ApplicationHelper
       doc.to_html.html_safe
     end
   end
-end
+end

data/app/models/formstrap/media_view.rb

@@ -19,8 +19,6 @@ module Formstrap
         data: {
           controller: "media",
           name: name,
-          min: min,
-          max: max,
           sort: sort,
           accept: accept,
           required: required.nil? ? 0 : required
@@ -31,7 +29,7 @@ module Formstrap
     def item_options
       options = {
         sort: sort,
-        url: modal_url,
+        url: modal_url
       }
 
       # Don't pass width or height if it was not defined
@@ -108,10 +106,10 @@ module Formstrap
     end
 
     def min
-      if @required
-        (@min.to_i < 1) ? 1 : @min.to_i
+      if @min.to_i < 1
+        @required ? 1 : 0
       else
-        (@min.to_i < 1) ? 0 : @min.to_i
+        @min.to_i
       end
     end
 
@@ -124,7 +122,14 @@ module Formstrap
     end
 
     def modal_url
-      formstrap_media_path(name: name, ids: blob_ids, min: min, max: max, mimetype: accept, exclude_models: exclude_models)
+      formstrap_media_path(
+        name: name,
+        ids: blob_ids,
+        min: min,
+        max: max,
+        mimetype: accept,
+        exclude_models: exclude_models
+      )
     end
 
     def edit_modal_url(attachment)

data/app/models/formstrap/thumbnail_view.rb

@@ -92,10 +92,10 @@ module Formstrap
       blob.open do |file|
         content = file.read
         doc = Nokogiri::HTML::DocumentFragment.parse content
-        svg = doc.at_css 'svg'
+        svg = doc.at_css "svg"
 
         # for security
-        doc.search('script').each do |src|
+        doc.search("script").each do |src|
           src.remove
         end
 

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

@@ -5,6 +5,8 @@
   class: "formstrap-media-validation",
   data: {
     "media-target": "validationInput",
+    "min": min,
+    "max": max,
     "min-message": t(".min", count: min),
     "max-message": t(".max", count: max),
   } %>

data/lib/formstrap/form_builder.rb

@@ -15,7 +15,7 @@ module Formstrap
       default_options = {
         data: {
           controller: "preview",
-          "preview-url-value":  options[:url]
+          "preview-url-value": options[:url]
         },
         type: nil
       }

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.3.1"
+  VERSION = "0.3.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontierdotbe/formstrap",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "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.3.1
+  version: 0.3.3
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-03-18 00:00:00.000000000 Z
+date: 2024-04-02 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email:
@@ -211,7 +211,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.22
+rubygems_version: 3.5.6
 signing_key:
 specification_version: 4
 summary: Bootstrap-powered Form Helpers