@coreui/coreui 4.2.2 → 4.2.3

package/js/src/tooltip.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.2.2): tooltip.js
+ * CoreUI (v4.2.3): tooltip.js
  * Licensed under MIT (https://coreui.io/license)
  *
  * This component is a modified version of the Bootstrap's tooltip.js
@@ -9,12 +9,12 @@
  */
 
 import * as Popper from '@popperjs/core'
-import { defineJQueryPlugin, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index'
-import { DefaultAllowlist } from './util/sanitizer'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
-import BaseComponent from './base-component'
-import TemplateFactory from './util/template-factory'
+import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
+import { DefaultAllowlist } from './util/sanitizer.js'
+import EventHandler from './dom/event-handler.js'
+import Manipulator from './dom/manipulator.js'
+import BaseComponent from './base-component.js'
+import TemplateFactory from './util/template-factory.js'
 
 /**
  * Constants
@@ -114,15 +114,20 @@ class Tooltip extends BaseComponent {
     // Private
     this._isEnabled = true
     this._timeout = 0
-    this._isHovered = false
+    this._isHovered = null
     this._activeTrigger = {}
     this._popper = null
     this._templateFactory = null
+    this._newContent = null
 
     // Protected
     this.tip = null
 
     this._setListeners()
+
+    if (!this._config.selector) {
+      this._fixTitle()
+    }
   }
 
   // Getters
@@ -151,25 +156,12 @@ class Tooltip extends BaseComponent {
     this._isEnabled = !this._isEnabled
   }
 
-  toggle(event) {
+  toggle() {
     if (!this._isEnabled) {
       return
     }
 
-    if (event) {
-      const context = this._initializeOnDelegatedTarget(event)
-
-      context._activeTrigger.click = !context._activeTrigger.click
-
-      if (context._isWithActiveTrigger()) {
-        context._enter()
-      } else {
-        context._leave()
-      }
-
-      return
-    }
-
+    this._activeTrigger.click = !this._activeTrigger.click
     if (this._isShown()) {
       this._leave()
       return
@@ -183,8 +175,8 @@ class Tooltip extends BaseComponent {
 
     EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
 
-    if (this.tip) {
-      this.tip.remove()
+    if (this._element.getAttribute('data-coreui-original-title')) {
+      this._element.setAttribute('title', this._element.getAttribute('data-coreui-original-title'))
     }
 
     this._disposePopper()
@@ -208,6 +200,9 @@ class Tooltip extends BaseComponent {
       return
     }
 
+    // todo v6 remove this OR make it optional
+    this._disposePopper()
+
     const tip = this._getTipElement()
 
     this._element.setAttribute('aria-describedby', tip.getAttribute('id'))
@@ -219,11 +214,7 @@ class Tooltip extends BaseComponent {
       EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED))
     }
 
-    if (this._popper) {
-      this._popper.update()
-    } else {
-      this._createPopper(tip)
-    }
+    this._popper = this._createPopper(tip)
 
     tip.classList.add(CLASS_NAME_SHOW)
 
@@ -238,14 +229,13 @@ class Tooltip extends BaseComponent {
     }
 
     const complete = () => {
-      const previousHoverState = this._isHovered
-
-      this._isHovered = false
       EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN))
 
-      if (previousHoverState) {
+      if (this._isHovered === false) {
         this._leave()
       }
+
+      this._isHovered = false
     }
 
     this._queueCallback(complete, this.tip, this._isAnimated())
@@ -275,7 +265,7 @@ class Tooltip extends BaseComponent {
     this._activeTrigger[TRIGGER_CLICK] = false
     this._activeTrigger[TRIGGER_FOCUS] = false
     this._activeTrigger[TRIGGER_HOVER] = false
-    this._isHovered = false
+    this._isHovered = null // it is a trick to support manual triggering
 
     const complete = () => {
       if (this._isWithActiveTrigger()) {
@@ -283,13 +273,11 @@ class Tooltip extends BaseComponent {
       }
 
       if (!this._isHovered) {
-        tip.remove()
+        this._disposePopper()
       }
 
       this._element.removeAttribute('aria-describedby')
       EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN))
-
-      this._disposePopper()
     }
 
     this._queueCallback(complete, this.tip, this._isAnimated())
@@ -308,7 +296,7 @@ class Tooltip extends BaseComponent {
 
   _getTipElement() {
     if (!this.tip) {
-      this.tip = this._createTipElement(this._getContentForTemplate())
+      this.tip = this._createTipElement(this._newContent || this._getContentForTemplate())
     }
 
     return this.tip
@@ -338,17 +326,9 @@ class Tooltip extends BaseComponent {
   }
 
   setContent(content) {
-    let isShown = false
-    if (this.tip) {
-      isShown = this._isShown()
-      this.tip.remove()
-      this.tip = null
-    }
-
-    this._disposePopper()
-    this.tip = this._createTipElement(content)
-
-    if (isShown) {
+    this._newContent = content
+    if (this._isShown()) {
+      this._disposePopper()
       this.show()
     }
   }
@@ -376,7 +356,7 @@ class Tooltip extends BaseComponent {
   }
 
   _getTitle() {
-    return this._config.title
+    return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('data-coreui-original-title')
   }
 
   // Private
@@ -393,11 +373,9 @@ class Tooltip extends BaseComponent {
   }
 
   _createPopper(tip) {
-    const placement = typeof this._config.placement === 'function' ?
-      this._config.placement.call(this, tip, this._element) :
-      this._config.placement
+    const placement = execute(this._config.placement, [this, tip, this._element])
     const attachment = AttachmentMap[placement.toUpperCase()]
-    this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
+    return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
   }
 
   _getOffset() {
@@ -415,7 +393,7 @@ class Tooltip extends BaseComponent {
   }
 
   _resolvePossibleFunction(arg) {
-    return typeof arg === 'function' ? arg.call(this._element) : arg
+    return execute(arg, [this._element])
   }
 
   _getPopperConfig(attachment) {
@@ -461,7 +439,7 @@ class Tooltip extends BaseComponent {
 
     return {
       ...defaultBsPopperConfig,
-      ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
+      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
     }
   }
 
@@ -470,7 +448,10 @@ class Tooltip extends BaseComponent {
 
     for (const trigger of triggers) {
       if (trigger === 'click') {
-        EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => this.toggle(event))
+        EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => {
+          const context = this._initializeOnDelegatedTarget(event)
+          context.toggle()
+        })
       } else if (trigger !== TRIGGER_MANUAL) {
         const eventIn = trigger === TRIGGER_HOVER ?
           this.constructor.eventName(EVENT_MOUSEENTER) :
@@ -501,29 +482,20 @@ class Tooltip extends BaseComponent {
     }
 
     EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
-
-    if (this._config.selector) {
-      this._config = {
-        ...this._config,
-        trigger: 'manual',
-        selector: ''
-      }
-    } else {
-      this._fixTitle()
-    }
   }
 
   _fixTitle() {
-    const title = this._config.originalTitle
+    const title = this._element.getAttribute('title')
 
     if (!title) {
       return
     }
 
-    if (!this._element.getAttribute('aria-label') && !this._element.textContent) {
+    if (!this._element.getAttribute('aria-label') && !this._element.textContent.trim()) {
       this._element.setAttribute('aria-label', title)
     }
 
+    this._element.setAttribute('data-coreui-original-title', title) // DO NOT USE IT. Is only for backwards compatibility
     this._element.removeAttribute('title')
   }
 
@@ -594,8 +566,6 @@ class Tooltip extends BaseComponent {
       }
     }
 
-    config.originalTitle = this._element.getAttribute('title') || ''
-    config.title = this._resolvePossibleFunction(config.title) || config.originalTitle
     if (typeof config.title === 'number') {
       config.title = config.title.toString()
     }
@@ -610,12 +580,15 @@ class Tooltip extends BaseComponent {
   _getDelegateConfig() {
     const config = {}
 
-    for (const key in this._config) {
-      if (this.constructor.Default[key] !== this._config[key]) {
-        config[key] = this._config[key]
+    for (const [key, value] of Object.entries(this._config)) {
+      if (this.constructor.Default[key] !== value) {
+        config[key] = value
       }
     }
 
+    config.selector = false
+    config.trigger = 'manual'
+
     // In the future can be replaced with:
     // const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]])
     // `Object.fromEntries(keysWithDifferentValues)`
@@ -627,6 +600,11 @@ class Tooltip extends BaseComponent {
       this._popper.destroy()
       this._popper = null
     }
+
+    if (this.tip) {
+      this.tip.remove()
+      this.tip = null
+    }
   }
 
   // Static

package/js/src/util/backdrop.js

@@ -1,13 +1,16 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/backdrop.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/backdrop.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import { execute, executeAfterTransition, getElement, reflow } from './index'
-import Config from './config'
+import EventHandler from '../dom/event-handler.js'
+import { execute, executeAfterTransition, getElement, reflow } from './index.js'
+import Config from './config.js'
 
 /**
  * Constants

package/js/src/util/component-functions.js

@@ -1,12 +1,16 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/component-functions.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/component-functions.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled } from './index'
+import EventHandler from '../dom/event-handler.js'
+import { isDisabled } from './index.js'
+import SelectorEngine from '../dom/selector-engine.js'
 
 const enableDismissTrigger = (component, method = 'hide') => {
   const clickEvent = `click.dismiss${component.EVENT_KEY}`
@@ -21,7 +25,7 @@ const enableDismissTrigger = (component, method = 'hide') => {
       return
     }
 
-    const target = getElementFromSelector(this) || this.closest(`.${name}`)
+    const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`)
     const instance = component.getOrCreateInstance(target)
 
     // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method

package/js/src/util/config.js

@@ -1,12 +1,15 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/config.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/config.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import { isElement, toType } from './index'
-import Manipulator from '../dom/manipulator'
+import { isElement, toType } from './index.js'
+import Manipulator from '../dom/manipulator.js'
 
 /**
  * Class definition
@@ -49,8 +52,7 @@ class Config {
   }
 
   _typeCheckConfig(config, configTypes = this.constructor.DefaultType) {
-    for (const property of Object.keys(configTypes)) {
-      const expectedTypes = configTypes[property]
+    for (const [property, expectedTypes] of Object.entries(configTypes)) {
       const value = config[property]
       const valueType = isElement(value) ? 'element' : toType(value)
 

package/js/src/util/focustrap.js

@@ -1,13 +1,16 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/focustrap.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/focustrap.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import EventHandler from '../dom/event-handler'
-import SelectorEngine from '../dom/selector-engine'
-import Config from './config'
+import EventHandler from '../dom/event-handler.js'
+import SelectorEngine from '../dom/selector-engine.js'
+import Config from './config.js'
 
 /**
  * Constants

package/js/src/util/index.js

@@ -1,9 +1,9 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.2.2): alert.js
+ * CoreUI (v4.2.3): tab.js
  * Licensed under MIT (https://coreui.io/license)
  *
- * This component is a modified version of the Bootstrap's  util/index.js
+ * This is a modified version of the Bootstrap's util/index.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -12,7 +12,21 @@ const MAX_UID = 1_000_000
 const MILLISECONDS_MULTIPLIER = 1000
 const TRANSITION_END = 'transitionend'
 
-// Shoutout AngusCroll (https://goo.gl/pxwQGp)
+/**
+ * Properly escape IDs selectors to handle weird IDs
+ * @param {string} selector
+ * @returns {string}
+ */
+const parseSelector = selector => {
+  if (selector && window.CSS && window.CSS.escape) {
+    // document.querySelector needs escaping to handle IDs (html5+) containing for instance /
+    selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
+  }
+
+  return selector
+}
+
+// Shout-out Angus Croll (https://goo.gl/pxwQGp)
 const toType = object => {
   if (object === null || object === undefined) {
     return `${object}`
@@ -33,47 +47,6 @@ const getUID = prefix => {
   return prefix
 }
 
-const getSelector = element => {
-  let selector = element.getAttribute('data-coreui-target')
-
-  if (!selector || selector === '#') {
-    let hrefAttribute = element.getAttribute('href')
-
-    // The only valid content that could double as a selector are IDs or classes,
-    // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
-    // `document.querySelector` will rightfully complain it is invalid.
-    // See https://github.com/twbs/bootstrap/issues/32273
-    if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
-      return null
-    }
-
-    // Just in case some CMS puts out a full URL with the anchor appended
-    if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
-      hrefAttribute = `#${hrefAttribute.split('#')[1]}`
-    }
-
-    selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
-  }
-
-  return selector
-}
-
-const getSelectorFromElement = element => {
-  const selector = getSelector(element)
-
-  if (selector) {
-    return document.querySelector(selector) ? selector : null
-  }
-
-  return null
-}
-
-const getElementFromSelector = element => {
-  const selector = getSelector(element)
-
-  return selector ? document.querySelector(selector) : null
-}
-
 const getTransitionDurationFromElement = element => {
   if (!element) {
     return 0
@@ -120,7 +93,7 @@ const getElement = object => {
   }
 
   if (typeof object === 'string' && object.length > 0) {
-    return document.querySelector(object)
+    return document.querySelector(parseSelector(object))
   }
 
   return null
@@ -252,10 +225,8 @@ const defineJQueryPlugin = plugin => {
   })
 }
 
-const execute = callback => {
-  if (typeof callback === 'function') {
-    callback()
-  }
+const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
+  return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue
 }
 
 const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
@@ -321,10 +292,8 @@ export {
   executeAfterTransition,
   findShadowRoot,
   getElement,
-  getElementFromSelector,
   getjQuery,
   getNextActiveElement,
-  getSelectorFromElement,
   getTransitionDurationFromElement,
   getUID,
   isDisabled,
@@ -333,6 +302,7 @@ export {
   isVisible,
   noop,
   onDOMContentLoaded,
+  parseSelector,
   reflow,
   triggerTransitionEnd,
   toType

package/js/src/util/sanitizer.js

@@ -1,9 +1,9 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.2.2): alert.js
+ * CoreUI (v4.2.3): tab.js
  * Licensed under MIT (https://coreui.io/license)
  *
- * This component is a modified version of the Bootstrap's  util/sanitizer.js
+ * This is a modified version of the Bootstrap's util/sanitizer.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -24,14 +24,14 @@ const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
 /**
  * A pattern that recognizes a commonly useful subset of URLs that are safe.
  *
- * Shoutout to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
+ * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
  */
 const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i
 
 /**
  * A pattern that matches safe data URLs. Only matches image, video and audio types.
  *
- * Shoutout to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
+ * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
  */
 const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i
 

package/js/src/util/scrollbar.js

@@ -1,13 +1,16 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/scrollBar.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/scrollBar.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import SelectorEngine from '../dom/selector-engine'
-import Manipulator from '../dom/manipulator'
-import { isElement } from './index'
+import SelectorEngine from '../dom/selector-engine.js'
+import Manipulator from '../dom/manipulator.js'
+import { isElement } from './index.js'
 
 /**
  * Constants

package/js/src/util/swipe.js

@@ -1,13 +1,16 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/swipe.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/swipe.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import Config from './config'
-import EventHandler from '../dom/event-handler'
-import { execute } from './index'
+import Config from './config.js'
+import EventHandler from '../dom/event-handler.js'
+import { execute } from './index.js'
 
 /**
  * Constants

package/js/src/util/template-factory.js

@@ -1,14 +1,17 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.2.0-beta1): util/template-factory.js
+ * CoreUI (v4.2.3): tab.js
+ * Licensed under MIT (https://coreui.io/license)
+ *
+ * This is a modified version of the Bootstrap's util/template-factory.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
-import { getElement, isElement } from '../util/index'
-import SelectorEngine from '../dom/selector-engine'
-import Config from './config'
+import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js'
+import { execute, getElement, isElement } from './index.js'
+import SelectorEngine from '../dom/selector-engine.js'
+import Config from './config.js'
 
 /**
  * Constants
@@ -143,7 +146,7 @@ class TemplateFactory extends Config {
   }
 
   _resolvePossibleFunction(arg) {
-    return typeof arg === 'function' ? arg(this) : arg
+    return execute(arg, [this])
   }
 
   _putElementInTemplate(element, templateElement) {