Manipulator: Add JSON parse support (#35077)

Support parsing JSON from each component's main element using the `data-bs-config` attribute.

The `bs-config` attribute will be reserved and omitted during `getDataAttributes` parsing.

With this commit, every component, will create its config object, using:

* defaults
* data-bs-config
* the rest of data attributes
* configuration object given during instance initialization

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>

9 files changed, 27 insertions, 9 deletions

diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md
index 86de96a074..14f91911d2 100644
--- a/site/content/docs/5.1/components/carousel.md
+++ b/site/content/docs/5.1/components/carousel.md
@@ -308,7 +308,9 @@ var carousel = new bootstrap.Carousel(myCarousel)
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/collapse.md b/site/content/docs/5.1/components/collapse.md
index 4fb6f5e944..60b16826ce 100644
--- a/site/content/docs/5.1/components/collapse.md
+++ b/site/content/docs/5.1/components/collapse.md
@@ -141,7 +141,9 @@ var collapseList = collapseElementList.map(function (collapseEl) {
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index 7751a9bade..86b8491ca7 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -1064,7 +1064,9 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md
index d9bd120d46..011aee2f46 100644
--- a/site/content/docs/5.1/components/modal.md
+++ b/site/content/docs/5.1/components/modal.md
@@ -820,7 +820,9 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index 56ae26e6ba..10d184ed57 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -279,7 +279,9 @@ var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md
index f2cfdb6d0a..7dce915635 100644
--- a/site/content/docs/5.1/components/popovers.md
+++ b/site/content/docs/5.1/components/popovers.md
@@ -166,7 +166,9 @@ Additionally, while it is possible to also include interactive controls (such as
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< callout warning >}}
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md
index 6dfd9732fa..e48cc06f27 100644
--- a/site/content/docs/5.1/components/scrollspy.md
+++ b/site/content/docs/5.1/components/scrollspy.md
@@ -338,7 +338,9 @@ Target elements that are not visible will be ignored and their corresponding nav
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-root-margin=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index a54a6656a6..32a0f2f413 100644
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -355,7 +355,9 @@ var toastList = toastElList.map(function (toastEl) {
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index 9460da2a0b..f913ff5fea 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -193,7 +193,9 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
+{{< markdown >}}
+{{< partial "js-data-attributes.md" >}}
+{{< /markdown >}}
 
 {{< callout warning >}}
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.