formstrap 0.3.5 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2752e4d93f3ae7a69795c95cf1e65783fccd46979b278b8af14a8b800a053486
-  data.tar.gz: 156040c387523ad94ec3479d50c22f16db234cc93673588a84eed7eb45004f80
+  metadata.gz: 47528e297776dc1c0bfaf1d0d15fcbe65a6872631c1275d4cfcd1af722b92bad
+  data.tar.gz: b8002a2e136bc2b14ae89b41a7641d9562cf23a151d6f37c94bb07d7fdcbcc99
 SHA512:
-  metadata.gz: 10a219f54dbf8e2bbf7b38b39876108488fa8bc03c10df60ebe52fa7225d202c27d7ef6918e1886474f3e866beddfb7f440a1b3c2fd14528eb78961590920031
-  data.tar.gz: f60dc0b894f4cc4697fad1ce34de958e40340ddc6b62cc3c95c65233969d250b51ae30a74158d54c784e20237008150c54f8b6ae08a1ad915993ac5e723b3af2
+  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/redactor_controller.js

@@ -1,5 +1,6 @@
 /* global Redactor */
 import { Controller } from '@hotwired/stimulus'
+import 'redactor'
 
 export default class extends Controller {
   connect () {

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");
@@ -13229,6 +13229,7 @@ __publicField(preview_controller_default, "values", {
 });
 
 // app/assets/javascripts/formstrap/controllers/redactor_controller.js
+import "redactor";
 var redactor_controller_default = class extends Controller {
   connect() {
     this.initRedactor();
@@ -13275,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;
     });
@@ -13287,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);
@@ -13323,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/assets/stylesheets/formstrap/vendor/overrides/redactor.scss

@@ -99,7 +99,7 @@
   display: none;
 }
 
-.rx-form-input, .rx-form-textarea {
+.rx-form-input, .rx-form-textarea, .rx-form-select {
   border-radius: var(--bs-border-radius);
   background: var(--bs-body-bg);
   border: var(--bs-border-width) solid var(--bs-border-color);