Add `bs` in data attributes

- Add `bs` in data APIs everywhere
- Update unit tests

13 files changed, 39 insertions, 35 deletions

diff --git a/js/src/alert.js b/js/src/alert.js
index 7eb53ac0b..724cda017 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
-const SELECTOR_DISMISS = '[data-dismiss="alert"]'
+const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]'
 
 const EVENT_CLOSE = `close${EVENT_KEY}`
 const EVENT_CLOSED = `closed${EVENT_KEY}`
diff --git a/js/src/button.js b/js/src/button.js
index dc9bd0e9d..42376943d 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api'
 
 const CLASS_NAME_ACTIVE = 'active'
 
-const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]'
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 84a88bb04..58844a387 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item'
 const SELECTOR_ITEM_IMG = '.carousel-item img'
 const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
 const SELECTOR_INDICATORS = '.carousel-indicators'
-const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]'
-const SELECTOR_DATA_RIDE = '[data-ride="carousel"]'
+const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
+const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
 
 const PointerType = {
   TOUCH: 'touch',
@@ -419,7 +419,7 @@ class Carousel {
       return
     }
 
-    const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
+    const elementInterval = parseInt(element.getAttribute('data-bs-interval'), 10)
 
     if (elementInterval) {
       this._config.defaultInterval = this._config.defaultInterval || this._config.interval
@@ -576,7 +576,7 @@ class Carousel {
       ...Manipulator.getDataAttributes(target),
       ...Manipulator.getDataAttributes(this)
     }
-    const slideIndex = this.getAttribute('data-slide-to')
+    const slideIndex = this.getAttribute('data-bs-slide-to')
 
     if (slideIndex) {
       config.interval = false
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 838d0f2a3..f3ca86f36 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -59,7 +59,7 @@ const WIDTH = 'width'
 const HEIGHT = 'height'
 
 const SELECTOR_ACTIVES = '.show, .collapsing'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
 
 /**
  * ------------------------------------------------------------------------
@@ -74,7 +74,7 @@ class Collapse {
     this._config = this._getConfig(config)
     this._triggerArray = SelectorEngine.find(
       `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
-      `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]`
+      `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]`
     )
 
     const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@@ -137,7 +137,7 @@ class Collapse {
       actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent)
         .filter(elem => {
           if (typeof this._config.parent === 'string') {
-            return elem.getAttribute('data-parent') === this._config.parent
+            return elem.getAttribute('data-bs-parent') === this._config.parent
           }
 
           return elem.classList.contains(CLASS_NAME_COLLAPSE)
@@ -303,7 +303,7 @@ class Collapse {
       parent = SelectorEngine.findOne(parent)
     }
 
-    const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]`
+    const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]`
 
     SelectorEngine.find(selector, parent)
       .forEach(element => {
diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
index bcbd340ac..04b9543c8 100644
--- a/js/src/dom/manipulator.js
+++ b/js/src/dom/manipulator.js
@@ -47,9 +47,13 @@ const Manipulator = {
       ...element.dataset
     }
 
-    Object.keys(attributes).forEach(key => {
-      attributes[key] = normalizeData(attributes[key])
-    })
+    Object.keys(attributes)
+      .filter(key => key.startsWith('bs'))
+      .forEach(key => {
+        let pureKey = key.replace(/^bs/, '')
+        pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
+        attributes[pureKey] = normalizeData(attributes[key])
+      })
 
     return attributes
   },
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 3a3f12c48..c262997ce 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right'
 const CLASS_NAME_NAVBAR = 'navbar'
 const CLASS_NAME_POSITION_STATIC = 'position-static'
 
-const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
 const SELECTOR_FORM_CHILD = '.dropdown form'
 const SELECTOR_MENU = '.dropdown-menu'
 const SELECTOR_NAVBAR_NAV = '.navbar-nav'
diff --git a/js/src/modal.js b/js/src/modal.js
index d6d10ab93..c42dc154c 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static'
 
 const SELECTOR_DIALOG = '.modal-dialog'
 const SELECTOR_MODAL_BODY = '.modal-body'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]'
-const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
+const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]'
 const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
 
@@ -473,7 +473,7 @@ class Modal {
         .forEach(element => {
           const actualPadding = element.style.paddingRight
           const calculatedPadding = window.getComputedStyle(element)['padding-right']
-          Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
+          Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding)
           element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
         })
 
@@ -482,7 +482,7 @@ class Modal {
         .forEach(element => {
           const actualMargin = element.style.marginRight
           const calculatedMargin = window.getComputedStyle(element)['margin-right']
-          Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
+          Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin)
           element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`
         })
 
@@ -490,7 +490,7 @@ class Modal {
       const actualPadding = document.body.style.paddingRight
       const calculatedPadding = window.getComputedStyle(document.body)['padding-right']
 
-      Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding)
+      Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding)
       document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
     }
 
@@ -501,9 +501,9 @@ class Modal {
     // Restore fixed content padding
     SelectorEngine.find(SELECTOR_FIXED_CONTENT)
       .forEach(element => {
-        const padding = Manipulator.getDataAttribute(element, 'padding-right')
+        const padding = Manipulator.getDataAttribute(element, 'bs-padding-right')
         if (typeof padding !== 'undefined') {
-          Manipulator.removeDataAttribute(element, 'padding-right')
+          Manipulator.removeDataAttribute(element, 'bs-padding-right')
           element.style.paddingRight = padding
         }
       })
@@ -511,19 +511,19 @@ class Modal {
     // Restore sticky content and navbar-toggler margin
     SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`)
       .forEach(element => {
-        const margin = Manipulator.getDataAttribute(element, 'margin-right')
+        const margin = Manipulator.getDataAttribute(element, 'bs-margin-right')
         if (typeof margin !== 'undefined') {
-          Manipulator.removeDataAttribute(element, 'margin-right')
+          Manipulator.removeDataAttribute(element, 'bs-margin-right')
           element.style.marginRight = margin
         }
       })
 
     // Restore body padding
-    const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
+    const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right')
     if (typeof padding === 'undefined') {
       document.body.style.paddingRight = ''
     } else {
-      Manipulator.removeDataAttribute(document.body, 'padding-right')
+      Manipulator.removeDataAttribute(document.body, 'bs-padding-right')
       document.body.style.paddingRight = padding
     }
   }
diff --git a/js/src/popover.js b/js/src/popover.js
index 7203d9bab..46b693e69 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -123,7 +123,7 @@ class Popover extends Tooltip {
   }
 
   _getContent() {
-    return this.element.getAttribute('data-content') ||
+    return this.element.getAttribute('data-bs-content') ||
       this.config.content
   }
 
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 53c1700a5..de456e080 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -49,7 +49,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
 const CLASS_NAME_ACTIVE = 'active'
 
-const SELECTOR_DATA_SPY = '[data-spy="scroll"]'
+const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
 const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
 const SELECTOR_NAV_LINKS = '.nav-link'
 const SELECTOR_NAV_ITEMS = '.nav-item'
@@ -241,7 +241,7 @@ class ScrollSpy {
     this._clear()
 
     const queries = this._selector.split(',')
-      .map(selector => `${selector}[data-target="${target}"],${selector}[href="${target}"]`)
+      .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)
 
     const link = SelectorEngine.findOne(queries.join(','))
 
diff --git a/js/src/tab.js b/js/src/tab.js
index f7ebfc9cd..56269e2fa 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -46,7 +46,7 @@ const SELECTOR_DROPDOWN = '.dropdown'
 const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
 const SELECTOR_ACTIVE = '.active'
 const SELECTOR_ACTIVE_UL = ':scope > li > .active'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]'
 const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
 const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'
 
diff --git a/js/src/toast.js b/js/src/toast.js
index bf5a386e8..1e50b0669 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -52,7 +52,7 @@ const Default = {
   delay: 5000
 }
 
-const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]'
+const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]'
 
 /**
  * ------------------------------------------------------------------------
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 0b19a9601..505f8c853 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -443,7 +443,7 @@ class Tooltip {
   }
 
   getTitle() {
-    let title = this.element.getAttribute('data-original-title')
+    let title = this.element.getAttribute('data-bs-original-title')
 
     if (!title) {
       title = typeof this.config.title === 'function' ?
@@ -578,11 +578,11 @@ class Tooltip {
   }
 
   _fixTitle() {
-    const titleType = typeof this.element.getAttribute('data-original-title')
+    const titleType = typeof this.element.getAttribute('data-bs-original-title')
 
     if (this.element.getAttribute('title') || titleType !== 'string') {
       this.element.setAttribute(
-        'data-original-title',
+        'data-bs-original-title',
         this.element.getAttribute('title') || ''
       )
 
diff --git a/js/src/util/index.js b/js/src/util/index.js
index b7fac9c44..b8a53af96 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -33,7 +33,7 @@ const getUID = prefix => {
 }
 
 const getSelector = element => {
-  let selector = element.getAttribute('data-target')
+  let selector = element.getAttribute('data-bs-target')
 
   if (!selector || selector === '#') {
     const hrefAttr = element.getAttribute('href')
@@ -173,7 +173,7 @@ const reflow = element => element.offsetHeight
 const getjQuery = () => {
   const { jQuery } = window
 
-  if (jQuery && !document.body.hasAttribute('data-no-jquery')) {
+  if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
     return jQuery
   }