Merge branch 'main' into patrickhlauke-navs-tabs

Author: patrickhlauke

.eslintrc.json

@@ -36,23 +36,23 @@
       "error",
       "always"
     ],
-    "prefer-named-capture-group": "off",
     "semi": [
       "error",
       "never"
     ],
     "unicorn/consistent-function-scoping": "off",
     "unicorn/explicit-length-check": "off",
     "unicorn/no-array-callback-reference": "off",
+    "unicorn/no-array-for-each": "off",
     "unicorn/no-for-loop": "off",
     "unicorn/no-null": "off",
     "unicorn/no-unused-properties": "error",
     "unicorn/no-useless-undefined": "off",
     "unicorn/prefer-dom-node-append": "off",
     "unicorn/prefer-dom-node-dataset": "off",
     "unicorn/prefer-dom-node-remove": "off",
-    "unicorn/prefer-optional-catch-binding": "off",
     "unicorn/prefer-query-selector": "off",
+    "unicorn/prefer-spread": "off",
     "unicorn/prevent-abbreviations": "off"
   }
 }

.github/workflows/js.yml

@@ -47,7 +47,7 @@ jobs:
         run: npm run js-test
 
       - name: Run Coveralls
-        uses: coverallsapp/github-action@master
+        uses: coverallsapp/github-action@v1.1.2
         if: matrix.node == 14
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"

build/change-version.js

@@ -92,7 +92,7 @@ function main(args) {
     '.git',
     '_gh_pages',
     'node_modules',
-    'vendor'
+    'resources'
   ])
   const INCLUDED_EXTENSIONS = new Set([
     // This extension allowlist is how we avoid modifying binary files

js/src/carousel.js

@@ -90,6 +90,7 @@ 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_INDICATOR = '[data-bs-target]'
 const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
 const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
 
@@ -405,18 +406,19 @@ class Carousel extends BaseComponent {
 
   _setActiveIndicatorElement(element) {
     if (this._indicatorsElement) {
-      const indicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
+      const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement)
 
-      for (let i = 0; i < indicators.length; i++) {
-        indicators[i].classList.remove(CLASS_NAME_ACTIVE)
-      }
+      activeIndicator.classList.remove(CLASS_NAME_ACTIVE)
+      activeIndicator.removeAttribute('aria-current')
 
-      const nextIndicator = this._indicatorsElement.children[
-        this._getItemIndex(element)
-      ]
+      const indicators = SelectorEngine.find(SELECTOR_INDICATOR, this._indicatorsElement)
 
-      if (nextIndicator) {
-        nextIndicator.classList.add(CLASS_NAME_ACTIVE)
+      for (let i = 0; i < indicators.length; i++) {
+        if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) {
+          indicators[i].classList.add(CLASS_NAME_ACTIVE)
+          indicators[i].setAttribute('aria-current', 'true')
+          break
+        }
       }
     }
   }

js/src/dropdown.js

@@ -72,7 +72,7 @@ const PLACEMENT_RIGHT = isRTL ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL ? 'right-start' : 'left-start'
 
 const Default = {
-  offset: 0,
+  offset: [0, 0],
   flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',
@@ -81,7 +81,7 @@ const Default = {
 }
 
 const DefaultType = {
-  offset: '(number|string|function)',
+  offset: '(array|string|function)',
   flip: 'boolean',
   boundary: '(string|element)',
   reference: '(string|element|object)',
@@ -298,6 +298,20 @@ class Dropdown extends BaseComponent {
     return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null
   }
 
+  _getOffset() {
+    const { offset } = this._config
+
+    if (typeof offset === 'string') {
+      return offset.split(',').map(val => Number.parseInt(val, 10))
+    }
+
+    if (typeof offset === 'function') {
+      return popperData => offset(popperData, this._element)
+    }
+
+    return offset
+  }
+
   _getPopperConfig() {
     const popperConfig = {
       placement: this._getPlacement(),
@@ -313,6 +327,12 @@ class Dropdown extends BaseComponent {
         options: {
           fallbackPlacements: ['top', 'right', 'bottom', 'left']
         }
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: this._getOffset()
+        }
       }]
     }
 

js/src/tooltip.js

@@ -50,6 +50,7 @@ const DefaultType = {
   html: 'boolean',
   selector: '(string|boolean)',
   placement: '(string|function)',
+  offset: '(array|string|function)',
   container: '(string|element|boolean)',
   fallbackPlacements: 'array',
   boundary: '(string|element)',
@@ -80,6 +81,7 @@ const Default = {
   html: false,
   selector: false,
   placement: 'top',
+  offset: [0, 0],
   container: false,
   fallbackPlacements: ['top', 'right', 'bottom', 'left'],
   boundary: 'clippingParents',
@@ -191,13 +193,7 @@ class Tooltip extends BaseComponent {
     }
 
     if (event) {
-      const dataKey = this.constructor.DATA_KEY
-      let context = Data.getData(event.delegateTarget, dataKey)
-
-      if (!context) {
-        context = new this.constructor(event.delegateTarget, this._getDelegateConfig())
-        Data.setData(event.delegateTarget, dataKey, context)
-      }
+      const context = this._initializeOnDelegatedTarget(event)
 
       context._activeTrigger.click = !context._activeTrigger.click
 
@@ -245,83 +241,85 @@ class Tooltip extends BaseComponent {
       throw new Error('Please use show on visible elements')
     }
 
-    if (this.isWithContent() && this._isEnabled) {
-      const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
-      const shadowRoot = findShadowRoot(this._element)
-      const isInTheDom = shadowRoot === null ?
-        this._element.ownerDocument.documentElement.contains(this._element) :
-        shadowRoot.contains(this._element)
+    if (!(this.isWithContent() && this._isEnabled)) {
+      return
+    }
 
-      if (showEvent.defaultPrevented || !isInTheDom) {
-        return
-      }
+    const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
+    const shadowRoot = findShadowRoot(this._element)
+    const isInTheDom = shadowRoot === null ?
+      this._element.ownerDocument.documentElement.contains(this._element) :
+      shadowRoot.contains(this._element)
 
-      const tip = this.getTipElement()
-      const tipId = getUID(this.constructor.NAME)
+    if (showEvent.defaultPrevented || !isInTheDom) {
+      return
+    }
 
-      tip.setAttribute('id', tipId)
-      this._element.setAttribute('aria-describedby', tipId)
+    const tip = this.getTipElement()
+    const tipId = getUID(this.constructor.NAME)
 
-      this.setContent()
+    tip.setAttribute('id', tipId)
+    this._element.setAttribute('aria-describedby', tipId)
 
-      if (this.config.animation) {
-        tip.classList.add(CLASS_NAME_FADE)
-      }
+    this.setContent()
 
-      const placement = typeof this.config.placement === 'function' ?
-        this.config.placement.call(this, tip, this._element) :
-        this.config.placement
+    if (this.config.animation) {
+      tip.classList.add(CLASS_NAME_FADE)
+    }
 
-      const attachment = this._getAttachment(placement)
-      this._addAttachmentClass(attachment)
+    const placement = typeof this.config.placement === 'function' ?
+      this.config.placement.call(this, tip, this._element) :
+      this.config.placement
 
-      const container = this._getContainer()
-      Data.setData(tip, this.constructor.DATA_KEY, this)
+    const attachment = this._getAttachment(placement)
+    this._addAttachmentClass(attachment)
 
-      if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
-        container.appendChild(tip)
-      }
+    const container = this._getContainer()
+    Data.setData(tip, this.constructor.DATA_KEY, this)
 
-      EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
+    if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
+      container.appendChild(tip)
+    }
 
-      this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
+    EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
 
-      tip.classList.add(CLASS_NAME_SHOW)
+    this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
 
-      const customClass = typeof this.config.customClass === 'function' ? this.config.customClass() : this.config.customClass
-      if (customClass) {
-        tip.classList.add(...customClass.split(' '))
-      }
+    tip.classList.add(CLASS_NAME_SHOW)
 
-      // If this is a touch-enabled device we add extra
-      // empty mouseover listeners to the body's immediate children;
-      // only needed because of broken event delegation on iOS
-      // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-      if ('ontouchstart' in document.documentElement) {
-        [].concat(...document.body.children).forEach(element => {
-          EventHandler.on(element, 'mouseover', noop())
-        })
-      }
+    const customClass = typeof this.config.customClass === 'function' ? this.config.customClass() : this.config.customClass
+    if (customClass) {
+      tip.classList.add(...customClass.split(' '))
+    }
 
-      const complete = () => {
-        const prevHoverState = this._hoverState
+    // If this is a touch-enabled device we add extra
+    // empty mouseover listeners to the body's immediate children;
+    // only needed because of broken event delegation on iOS
+    // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
+    if ('ontouchstart' in document.documentElement) {
+      [].concat(...document.body.children).forEach(element => {
+        EventHandler.on(element, 'mouseover', noop())
+      })
+    }
 
-        this._hoverState = null
-        EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
+    const complete = () => {
+      const prevHoverState = this._hoverState
 
-        if (prevHoverState === HOVER_STATE_OUT) {
-          this._leave(null, this)
-        }
-      }
+      this._hoverState = null
+      EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
 
-      if (this.tip.classList.contains(CLASS_NAME_FADE)) {
-        const transitionDuration = getTransitionDurationFromElement(this.tip)
-        EventHandler.one(this.tip, 'transitionend', complete)
-        emulateTransitionEnd(this.tip, transitionDuration)
-      } else {
-        complete()
+      if (prevHoverState === HOVER_STATE_OUT) {
+        this._leave(null, this)
       }
     }
+
+    if (this.tip.classList.contains(CLASS_NAME_FADE)) {
+      const transitionDuration = getTransitionDurationFromElement(this.tip)
+      EventHandler.one(this.tip, 'transitionend', complete)
+      emulateTransitionEnd(this.tip, transitionDuration)
+    } else {
+      complete()
+    }
   }
 
   hide() {
@@ -465,6 +463,32 @@ class Tooltip extends BaseComponent {
 
   // Private
 
+  _initializeOnDelegatedTarget(event, context) {
+    const dataKey = this.constructor.DATA_KEY
+    context = context || Data.getData(event.delegateTarget, dataKey)
+
+    if (!context) {
+      context = new this.constructor(event.delegateTarget, this._getDelegateConfig())
+      Data.setData(event.delegateTarget, dataKey, context)
+    }
+
+    return context
+  }
+
+  _getOffset() {
+    const { offset } = this.config
+
+    if (typeof offset === 'string') {
+      return offset.split(',').map(val => Number.parseInt(val, 10))
+    }
+
+    if (typeof offset === 'function') {
+      return popperData => offset(popperData, this._element)
+    }
+
+    return offset
+  }
+
   _getPopperConfig(attachment) {
     const defaultBsConfig = {
       placement: attachment,
@@ -476,6 +500,12 @@ class Tooltip extends BaseComponent {
             fallbackPlacements: this.config.fallbackPlacements
           }
         },
+        {
+          name: 'offset',
+          options: {
+            offset: this._getOffset()
+          }
+        },
         {
           name: 'preventOverflow',
           options: {
@@ -582,16 +612,7 @@ class Tooltip extends BaseComponent {
   }
 
   _enter(event, context) {
-    const dataKey = this.constructor.DATA_KEY
-    context = context || Data.getData(event.delegateTarget, dataKey)
-
-    if (!context) {
-      context = new this.constructor(
-        event.delegateTarget,
-        this._getDelegateConfig()
-      )
-      Data.setData(event.delegateTarget, dataKey, context)
-    }
+    context = this._initializeOnDelegatedTarget(event, context)
 
     if (event) {
       context._activeTrigger[
@@ -621,16 +642,7 @@ class Tooltip extends BaseComponent {
   }
 
   _leave(event, context) {
-    const dataKey = this.constructor.DATA_KEY
-    context = context || Data.getData(event.delegateTarget, dataKey)
-
-    if (!context) {
-      context = new this.constructor(
-        event.delegateTarget,
-        this._getDelegateConfig()
-      )
-      Data.setData(event.delegateTarget, dataKey, context)
-    }
+    context = this._initializeOnDelegatedTarget(event, context)
 
     if (event) {
       context._activeTrigger[