formstrap 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4dc719e94a4901d00b1b1cfce0d9c6a36653ec1bf706b56d689092db97b278d
-  data.tar.gz: 902aab69bbe1517164fd888d55a4a881522a4e313cbe77b2596486711912ca1c
+  metadata.gz: 47528e297776dc1c0bfaf1d0d15fcbe65a6872631c1275d4cfcd1af722b92bad
+  data.tar.gz: b8002a2e136bc2b14ae89b41a7641d9562cf23a151d6f37c94bb07d7fdcbcc99
 SHA512:
-  metadata.gz: 2691612aa8b8a8362495627b48cd7008e88f510a7b285242e8413111599a685fd05bcc6babd241f7d4b98456e4d31b465e1be0b4549672a2e320c1a4ac3650d7
-  data.tar.gz: 707a301d754f4bb13280c008994b6971b4844698206b6d1a7bd3537c794c5d2e90c76d50dc9351956661be43831dc1c8d64fd31fe177f1ad47e6eb5b450b387e
+  metadata.gz: 402ca1e7525e7847453c7026d46828c6c60f73020cd77d927757cdbbecfbb29e3dbfad79cc08b3ffcb1e95be5b66d490fa437f4d52eda80c1180a68f2e7d5b6f
+  data.tar.gz: 764ed214b9c39f07a01a7028b0a2b65ef4c3719717db522efd86936231eba94151f008d81274920af8d697ececef6fc60deca7ab3db0bfaa9c82b9ae4c727301

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

@@ -1,3 +1,4 @@
+/* global crypto */
 import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 
@@ -193,7 +194,7 @@ export default class extends Controller {
 
   randomizeIds (template) {
     const regex = new RegExp(template.dataset.templateIdRegex, 'g')
-    const randomNumber = Math.floor(100000000 + Math.random() * 900000000)
+    const randomNumber = crypto.randomUUID().substring(0, 8)
     return template.innerHTML.replace(regex, randomNumber)
   }
 

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

@@ -126,7 +126,8 @@ 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
+    // Replace all occurrences of "form[fields_attributes][random]" with "field"
+    const regex = /\w+\[([^\]]+)s_attributes]\[[^\]]+]/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((element) => {
       const currentName = element.getAttribute('name')

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

@@ -1,3 +1,4 @@
+/* global crypto */
 import { Controller } from '@hotwired/stimulus'
 import Sortable from 'sortablejs'
 
@@ -23,7 +24,6 @@ export default class extends Controller {
         this.resetPositions()
       }
     })
-
     this.toggleEmpty()
   }
 
@@ -38,8 +38,7 @@ export default class extends Controller {
   }
 
   updatePopupButtonIndices (index) {
-    const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
-    const buttons = popup.querySelectorAll('[data-popup-target="button"]')
+    const buttons = document.querySelectorAll(`[data-popup-target="button"][data-popup-id="repeater-buttons-${this.idValue}"]`)
     buttons.forEach((button) => {
       button.dataset.rowIndex = index
     })
@@ -53,7 +52,7 @@ export default class extends Controller {
 
     // Prepare html from template
     let template = this.getTemplate(templateName).content.cloneNode(true)
-    template = this.replaceIdsWithTimestamps(template)
+    template = this.randomizeIds(template)
 
     // Fallback to last row if no index is set
     if (rowIndex) {
@@ -107,44 +106,24 @@ export default class extends Controller {
     })[0]
   }
 
-  replaceIdsWithTimestamps (template) {
-    const pattern = 'rrrrrrrrr'
-    const replacement = new Date().getTime().toString()
+  randomizeIds (template) {
+    const randomNumber = crypto.randomUUID().substring(0, 8)
+    const pattern = `_${this.idValue}_`
     const regex = new RegExp(pattern, 'g')
 
-    // Replace ids
-    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))
-    })
-
-    // 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')
-      node.setAttribute('for', forValue.replace(pattern, replacement))
-    })
-
-    // Replace names
-    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
-      const nameValue = node.getAttribute('name')
-      node.setAttribute('name', nameValue.replace(pattern, replacement))
-    })
-
-    // Replace offcanvas targets
-    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
-      const targetValue = node.getAttribute('data-bs-target')
-      node.setAttribute('data-bs-target', targetValue.replace(pattern, replacement))
-    })
+    // Loop through each node in the template
+    template.querySelectorAll('*').forEach(node => {
+      // Replace attribute values
+      for (const attribute of node.attributes) {
+        if (attribute.value.includes(pattern)) {
+          attribute.value = attribute.value.replace(pattern, randomNumber)
+        }
+      }
 
-    // Replace offcanvas ids
-    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
-      const idValue = node.getAttribute('id')
-      node.setAttribute('id', idValue.replace(pattern, replacement))
+      // Replace template content
+      if (node.nodeName === 'TEMPLATE' && node.innerHTML.includes(pattern)) {
+        node.innerHTML = node.innerHTML.replace(regex, randomNumber)
+      }
     })
 
     return template

data/app/assets/javascripts/formstrap.js

@@ -11213,7 +11213,7 @@ var media_controller_default = class extends Controller {
   }
   randomizeIds(template) {
     const regex = new RegExp(template.dataset.templateIdRegex, "g");
-    const randomNumber = Math.floor(1e8 + Math.random() * 9e8);
+    const randomNumber = crypto.randomUUID().substring(0, 8);
     return template.innerHTML.replace(regex, randomNumber);
   }
   removeAllDeselectedItems(items) {
@@ -11498,7 +11498,7 @@ 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]\[[^\]]+]/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((element) => {
       const currentName = element.getAttribute("name");
@@ -13276,8 +13276,7 @@ var repeater_controller_default = class extends Controller {
     return this.rowTargets.includes(row);
   }
   updatePopupButtonIndices(index2) {
-    const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`);
-    const buttons = popup.querySelectorAll('[data-popup-target="button"]');
+    const buttons = document.querySelectorAll(`[data-popup-target="button"][data-popup-id="repeater-buttons-${this.idValue}"]`);
     buttons.forEach((button) => {
       button.dataset.rowIndex = index2;
     });
@@ -13288,7 +13287,7 @@ var repeater_controller_default = class extends Controller {
     const templateName = button.dataset.templateName;
     const rowIndex = button.dataset.rowIndex;
     let template = this.getTemplate(templateName).content.cloneNode(true);
-    template = this.replaceIdsWithTimestamps(template);
+    template = this.randomizeIds(template);
     if (rowIndex) {
       const row = this.rowTargets[rowIndex];
       this.listTarget.insertBefore(template, row.nextSibling);
@@ -13324,32 +13323,19 @@ var repeater_controller_default = class extends Controller {
       return template.dataset.templateName === name;
     })[0];
   }
-  replaceIdsWithTimestamps(template) {
-    const pattern = "rrrrrrrrr";
-    const replacement = new Date().getTime().toString();
+  randomizeIds(template) {
+    const randomNumber = crypto.randomUUID().substring(0, 8);
+    const pattern = `_${this.idValue}_`;
     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));
-    });
-    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
-      const nameValue = node.getAttribute("name");
-      node.setAttribute("name", nameValue.replace(pattern, replacement));
-    });
-    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
-      const targetValue = node.getAttribute("data-bs-target");
-      node.setAttribute("data-bs-target", targetValue.replace(pattern, replacement));
-    });
-    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
-      const idValue = node.getAttribute("id");
-      node.setAttribute("id", idValue.replace(pattern, replacement));
+    template.querySelectorAll("*").forEach((node) => {
+      for (const attribute of node.attributes) {
+        if (attribute.value.includes(pattern)) {
+          attribute.value = attribute.value.replace(pattern, randomNumber);
+        }
+      }
+      if (node.nodeName === "TEMPLATE" && node.innerHTML.includes(pattern)) {
+        node.innerHTML = node.innerHTML.replace(regex, randomNumber);
+      }
     });
     return template;
   }

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

@@ -106,8 +106,9 @@
       class="btn btn-sm btn-outline-secondary"
       data-repeater-target="addButton"
       data-popup-target="button"
-      data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+      data-popup-id="repeater-buttons-<%= repeater_id %>"
       data-popup-pass-thru="<%= pass_thru %>"
+      data-row-index=""
       data-action="click->repeater#resetButtonIndices click->popup#open"
     >
       <%= bootstrap_icon("plus") %>
@@ -121,7 +122,7 @@
           <div
             class="btn btn-sm btn-outline-secondary"
             data-popup-target="button"
-            data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+            data-popup-id="repeater-buttons-<%= repeater_id %>"
             data-action="click->repeater#addRow click->popup#close"
             data-row-index=""
             data-template-name="<%= name %>"
@@ -135,7 +136,7 @@
     <!-- Templates -->
     <% template_names.each do |template_name| %>
       <template data-repeater-target="template" data-template-name="<%= template_name %>">
-        <%= form.fields_for attribute, association_object, child_index: "rrrrrrrrr" do |ff| %>
+        <%= form.fields_for attribute, association_object, child_index: "_#{repeater_id}_" do |ff| %>
           <%= render "formstrap/repeater/row", row_options.merge(form: ff, pass_thru: pass_thru, repeater_id: repeater_id, index: nil, template_name: template_name) do %>
             <%= yield(ff, template_name) %>
           <% end %>

data/app/views/formstrap/repeater/_row.html.erb

@@ -41,7 +41,7 @@
     title="<%= t(".add") %>"
     data-repeater-target="addButton"
     data-popup-target="button"
-    data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+    data-popup-id="repeater-buttons-<%= repeater_id %>"
     data-popup-pass-thru="<%= pass_thru %>"
     data-action="click->repeater#resetButtonIndices click->popup#open"
   >

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.4.0"
+  VERSION = "0.4.1"
 end

data/package.json

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