Merge branch 'main' of https://github.com/coreui/coreui

Author: mrholek

.github/workflows/bundlewatch.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 20
+  NODE: 22
 
 permissions:
   contents: read

.github/workflows/css.yml

@@ -11,7 +11,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 20
+  NODE: 22
 
 permissions:
   contents: read

.github/workflows/docs.yml

@@ -11,7 +11,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 20
+  NODE: 22
 
 permissions:
   contents: read

.github/workflows/js.yml

@@ -11,7 +11,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 20
+  NODE: 22
 
 permissions:
   contents: read

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 20
+  NODE: 22
 
 permissions:
   contents: read

docs/content/forms/range.md

@@ -46,6 +46,26 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
 
+## Output value
+
+The value of the range input can be shown using the `output` element and a bit of JavaScript.
+
+{{< example >}}
+<label for="customRange4" class="form-label">Example range</label>
+<input type="range" class="form-range" min="0" max="100" value="50" id="customRange4">
+<output for="customRange4" id="rangeValue" aria-hidden="true"></output>
+<script>
+  // This is an example script, please modify as needed
+  const rangeInput = document.getElementById('customRange4');
+  const rangeOutput = document.getElementById('rangeValue');
+  // Set initial value
+  rangeOutput.textContent = rangeInput.value;
+  rangeInput.addEventListener('input', function() {
+    rangeOutput.textContent = this.value;
+  });
+</script>
+{{< /example >}}
+
 ## Customizing
 
 ### SASS variables

js/src/tooltip.js

@@ -451,6 +451,7 @@ class Tooltip extends BaseComponent {
       if (trigger === 'click') {
         EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => {
           const context = this._initializeOnDelegatedTarget(event)
+          context._activeTrigger[TRIGGER_CLICK] = !(context._isShown() && context._activeTrigger[TRIGGER_CLICK])
           context.toggle()
         })
       } else if (trigger !== TRIGGER_MANUAL) {

js/tests/unit/popover.spec.js

@@ -1,6 +1,8 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Popover from '../../src/popover.js'
-import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, getFixture, jQueryMock, createEvent
+} from '../helpers/fixture.js'
 
 describe('Popover', () => {
   let fixtureEl
@@ -58,7 +60,7 @@ describe('Popover', () => {
   describe('show', () => {
     it('should toggle a popover after show', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl)
@@ -78,7 +80,7 @@ describe('Popover', () => {
 
     it('should show a popover', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl)
@@ -94,7 +96,7 @@ describe('Popover', () => {
 
     it('should set title and content from functions', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl, {
@@ -117,7 +119,7 @@ describe('Popover', () => {
 
     it('should call content and title functions with trigger element', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl, {
@@ -144,7 +146,7 @@ describe('Popover', () => {
 
     it('should call content and title functions with correct this value', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl, {
@@ -247,7 +249,7 @@ describe('Popover', () => {
     })
 
     it('"setContent" should keep the initial template', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap" data-coreui-custom-class="custom-class">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap" data-coreui-custom-class="custom-class">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -264,7 +266,7 @@ describe('Popover', () => {
 
     it('should call setContent once', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl, {
@@ -298,7 +300,7 @@ describe('Popover', () => {
 
     it('should show a popover with provided custom class', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap" data-coreui-custom-class="custom-class">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap" data-coreui-custom-class="custom-class">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl)
@@ -315,10 +317,32 @@ describe('Popover', () => {
     })
   })
 
+  it('should keep popover open when mouse leaves after click trigger', () => {
+    return new Promise(resolve => {
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap" data-coreui-trigger="hover click">BS X</a>'
+
+      const popoverEl = fixtureEl.querySelector('a')
+      new Popover(popoverEl) // eslint-disable-line no-new
+
+      popoverEl.addEventListener('shown.coreui.popover', () => {
+        popoverEl.dispatchEvent(createEvent('mouseout'))
+
+        popoverEl.addEventListener('hide.coreui.popover', () => {
+          throw new Error('Popover should not hide when mouse leaves after click')
+        })
+
+        expect(document.querySelector('.popover')).not.toBeNull()
+        resolve()
+      })
+
+      popoverEl.click()
+    })
+  })
+
   describe('hide', () => {
     it('should hide a popover', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
         const popoverEl = fixtureEl.querySelector('a')
         const popover = new Popover(popoverEl)
@@ -339,7 +363,7 @@ describe('Popover', () => {
 
   describe('jQueryInterface', () => {
     it('should create a popover', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
 
@@ -352,7 +376,7 @@ describe('Popover', () => {
     })
 
     it('should create a popover with a config object', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
 
@@ -367,7 +391,7 @@ describe('Popover', () => {
     })
 
     it('should not re create a popover', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -381,7 +405,7 @@ describe('Popover', () => {
     })
 
     it('should throw error on undefined method', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const action = 'undefinedMethod'
@@ -395,7 +419,7 @@ describe('Popover', () => {
     })
 
     it('should should call show method', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -413,7 +437,7 @@ describe('Popover', () => {
 
   describe('getInstance', () => {
     it('should return popover instance', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -423,7 +447,7 @@ describe('Popover', () => {
     })
 
     it('should return null when there is no popover instance', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-coreui-content="https://x.com/getbootstrap">BS X</a>'
 
       const popoverEl = fixtureEl.querySelector('a')