@tabler/core 1.5.1 → 1.6.0

package/js/src/bootstrap/popover.ts

@@ -6,6 +6,9 @@
  */
 
 import Tooltip from './tooltip'
+import type { TooltipConfig, TooltipContent, TooltipContentMap } from './tooltip'
+import { defineJQueryPlugin } from './util/index'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
 
 /**
  * Constants
@@ -16,13 +19,11 @@ const NAME = 'popover'
 const SELECTOR_TITLE = '.popover-header'
 const SELECTOR_CONTENT = '.popover-body'
 
-interface ComponentConfig {
-  [key: string]: any
+type ComponentConfig = TooltipConfig & {
+  content: TooltipContent
 }
 
-interface ComponentConfigType {
-  [key: string]: string
-}
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
 
 const Default: ComponentConfig = {
   ...Tooltip.Default,
@@ -33,7 +34,7 @@ const Default: ComponentConfig = {
   trigger: 'click',
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   ...Tooltip.DefaultType,
   content: '(null|string|element|function)',
 }
@@ -43,11 +44,18 @@ const DefaultType: ComponentConfigType = {
  */
 
 class Popover extends Tooltip {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
+
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
+    super(element, config)
+  }
+
   static get Default(): ComponentConfig {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -59,16 +67,34 @@ class Popover extends Tooltip {
     return Boolean(this._getTitle() || this._getContent())
   }
 
-  _getContentForTemplate(): Record<string, any> {
+  _getContentForTemplate(): TooltipContentMap {
     return {
       [SELECTOR_TITLE]: this._getTitle(),
       [SELECTOR_CONTENT]: this._getContent(),
     }
   }
 
-  _getContent(): any {
+  _getContent(): string | HTMLElement | null {
     return this._resolvePossibleFunction(this._config.content)
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Popover.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (typeof data[config] === 'undefined') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    })
+  }
 }
 
+defineJQueryPlugin(Popover)
+
 export default Popover

package/js/src/bootstrap/scrollspy.ts

@@ -8,8 +8,18 @@
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
-import { getElement, isDisabled, isVisible, parseSelector } from './util/index'
-import type { ComponentConfig, ComponentConfigType } from './types'
+import { defineJQueryPlugin, getElement, isDisabled, isVisible, parseSelector } from './util/index'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
+
+type ComponentConfig = {
+  offset: number | null
+  rootMargin: string
+  smoothScroll: boolean
+  target: HTMLElement | null
+  threshold: number[]
+}
+
+type ComponentConfigInput = Partial<Omit<ComponentConfig, 'target' | 'threshold'>> & { target?: HTMLElement | string | null; threshold?: number[] | string } & Record<string, unknown>
 
 const NAME = 'scrollspy'
 const DATA_KEY = 'bs.scrollspy'
@@ -41,7 +51,7 @@ const Default: ComponentConfig = {
   threshold: [0.1, 0.5, 1],
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   offset: '(number|null)',
   rootMargin: 'string',
   smoothScroll: 'boolean',
@@ -50,6 +60,8 @@ const DefaultType: ComponentConfigType = {
 }
 
 class ScrollSpy extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _targetLinks: Map<string, HTMLElement>
   _observableSections: Map<string, HTMLElement>
   _rootElement: HTMLElement | null
@@ -60,7 +72,7 @@ class ScrollSpy extends BaseComponent {
     parentScrollTop: number
   }
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     super(element, config)
 
     this._targetLinks = new Map()
@@ -79,7 +91,7 @@ class ScrollSpy extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -112,8 +124,9 @@ class ScrollSpy extends BaseComponent {
 
     config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin
 
-    if (typeof config.threshold === 'string') {
-      config.threshold = config.threshold.split(',').map((value: string) => Number.parseFloat(value))
+    const threshold: unknown = config.threshold
+    if (typeof threshold === 'string') {
+      config.threshold = threshold.split(',').map((value: string) => Number.parseFloat(value))
     }
 
     return config
@@ -241,6 +254,22 @@ class ScrollSpy extends BaseComponent {
       node.classList.remove(CLASS_NAME_ACTIVE)
     }
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = ScrollSpy.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    })
+  }
 }
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
@@ -249,4 +278,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   }
 })
 
+defineJQueryPlugin(ScrollSpy)
+
 export default ScrollSpy

package/js/src/bootstrap/tab.ts

@@ -8,7 +8,8 @@
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
-import { getNextActiveElement, isDisabled } from './util/index'
+import { defineJQueryPlugin, getNextActiveElement, isDisabled } from './util/index'
+import type { JQueryCollectionLike } from './types'
 
 const NAME = 'tab'
 const DATA_KEY = 'bs.tab'
@@ -245,6 +246,22 @@ class Tab extends BaseComponent {
   _getOuterElement(elem: HTMLElement): HTMLElement {
     return elem.closest(SELECTOR_OUTER) || elem
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Tab.getOrCreateInstance(this) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    })
+  }
 }
 
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (this: HTMLElement, event: Event) {
@@ -265,4 +282,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   }
 })
 
+defineJQueryPlugin(Tab)
+
 export default Tab

package/js/src/bootstrap/toast.ts

@@ -8,8 +8,16 @@
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler.js'
 import { enableDismissTrigger } from './util/component-functions'
-import { reflow } from './util/index.js'
-import type { ComponentConfig, ComponentConfigType, ElementSelector } from './types'
+import { defineJQueryPlugin, reflow } from './util/index.js'
+import type { ComponentConfig as BaseComponentConfig, ElementSelector, JQueryCollectionLike } from './types'
+
+type ComponentConfig = {
+  animation: boolean
+  autohide: boolean
+  delay: number
+}
+
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
 
 const NAME = 'toast'
 const DATA_KEY = 'bs.toast'
@@ -29,7 +37,7 @@ const CLASS_NAME_HIDE = 'hide'
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_SHOWING = 'showing'
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   animation: 'boolean',
   autohide: 'boolean',
   delay: 'number',
@@ -42,11 +50,13 @@ const Default: ComponentConfig = {
 }
 
 class Toast extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _timeout: ReturnType<typeof setTimeout> | null
   _hasMouseInteraction: boolean
   _hasKeyboardInteraction: boolean
 
-  constructor(element: ElementSelector, config?: ComponentConfig) {
+  constructor(element: ElementSelector, config?: ComponentConfigInput) {
     super(element, config)
 
     this._timeout = null
@@ -59,7 +69,7 @@ class Toast extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -186,8 +196,24 @@ class Toast extends BaseComponent {
     clearTimeout(this._timeout!)
     this._timeout = null
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Toast.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
+        data[config](this)
+      }
+    })
+  }
 }
 
 enableDismissTrigger(Toast)
 
+defineJQueryPlugin(Toast)
+
 export default Toast

package/js/src/bootstrap/tooltip.ts

@@ -9,9 +9,10 @@ import * as Popper from '@popperjs/core'
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
-import { execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index'
+import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index'
 import { DefaultAllowlist } from './util/sanitizer'
 import TemplateFactory from './util/template-factory'
+import type { AllowList, ComponentConfig as BaseComponentConfig, JQueryCollectionLike, SanitizeFn } from './types'
 
 /**
  * Constants
@@ -45,13 +46,41 @@ const EVENT_FOCUSOUT = 'focusout'
 const EVENT_MOUSEENTER = 'mouseenter'
 const EVENT_MOUSELEAVE = 'mouseleave'
 
-interface ComponentConfig {
-  [key: string]: any
+type PopperOffsetData = { placement: Popper.Placement; reference: Popper.Rect; popper: Popper.Rect }
+type PopperOffsetFunction = (popperData: PopperOffsetData) => number[]
+type PopperConfigFunction = (defaultConfig: Partial<Popper.Options>) => Partial<Popper.Options>
+
+export type TooltipDelay = number | { show: number; hide: number }
+export type TooltipContent = string | HTMLElement | null | ((this: HTMLElement, element: HTMLElement) => string | HTMLElement | null)
+// Keys are selectors inside the template, values the content for that slot
+export type TooltipContentMap = Record<string, TooltipContent>
+export type TooltipPlacement = string | ((this: Tooltip, tip: HTMLElement, element: HTMLElement) => string)
+
+export type TooltipConfig = {
+  allowList: AllowList
+  animation: boolean
+  boundary: Popper.Boundary
+  container: HTMLElement | string | false
+  customClass: string | ((this: HTMLElement, element: HTMLElement) => string)
+  delay: TooltipDelay
+  fallbackPlacements: string[]
+  html: boolean
+  offset: number[] | string | ((popperData: PopperOffsetData, element: HTMLElement) => number[])
+  placement: TooltipPlacement
+  popperConfig: Partial<Popper.Options> | PopperConfigFunction | null
+  sanitize: boolean
+  sanitizeFn: SanitizeFn | null
+  selector: string | false
+  template: string
+  title: TooltipContent
+  trigger: string
 }
 
-interface ComponentConfigType {
-  [key: string]: string
-}
+type ComponentConfig = TooltipConfig
+
+export type TooltipConfigInput = Partial<TooltipConfig> & Record<string, unknown>
+
+type ComponentConfigInput = TooltipConfigInput
 
 const AttachmentMap: Record<string, string> = {
   AUTO: 'auto',
@@ -81,7 +110,7 @@ const Default: ComponentConfig = {
   trigger: 'hover focus',
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   allowList: 'object',
   animation: 'boolean',
   boundary: '(string|element)',
@@ -106,17 +135,19 @@ const DefaultType: ComponentConfigType = {
  */
 
 class Tooltip extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _isEnabled: boolean
   _timeout: ReturnType<typeof setTimeout> | number
   _isHovered: boolean | null
   _activeTrigger: Record<string, boolean>
   _popper: Popper.Instance | null
   _templateFactory: TemplateFactory | null
-  _newContent: Record<string, any> | null
+  _newContent: TooltipContentMap | null
   tip: HTMLElement | null
-  _hideModalHandler: (() => void) | null
+  _hideModalHandler: () => void
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     if (typeof Popper === 'undefined') {
       throw new TypeError("Bootstrap's tooltips require Popper (https://popper.js.org/docs/v2/)")
     }
@@ -132,7 +163,11 @@ class Tooltip extends BaseComponent {
     this._newContent = null
 
     this.tip = null
-    this._hideModalHandler = null
+    this._hideModalHandler = () => {
+      if (this._element) {
+        this.hide()
+      }
+    }
 
     this._setListeners()
 
@@ -145,7 +180,7 @@ class Tooltip extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -204,29 +239,30 @@ class Tooltip extends BaseComponent {
     const shadowRoot = findShadowRoot(this._element)
     const isInTheDom = (shadowRoot || this._element.ownerDocument.documentElement).contains(this._element)
 
-    if (showEvent.defaultPrevented || !isInTheDom) {
+    if (showEvent?.defaultPrevented || !isInTheDom) {
       return
     }
 
     this._disposePopper()
 
-    const tip = this._getTipElement()
+    const tip = this._getTipElement()!
 
-    this._element.setAttribute('aria-describedby', tip!.getAttribute('id')!)
+    this._element.setAttribute('aria-describedby', tip.getAttribute('id')!)
 
     const { container } = this._config
 
     if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
-      container.append(tip)
+      // `_configAfterMerge` resolved the container to an element
+      ;(container as HTMLElement).append(tip)
       EventHandler.trigger(this._element, (this.constructor as typeof Tooltip).eventName(EVENT_INSERTED))
     }
 
-    this._popper = this._createPopper(tip!)
+    this._popper = this._createPopper(tip)
 
     tip!.classList.add(CLASS_NAME_SHOW)
 
     if ('ontouchstart' in document.documentElement) {
-      for (const element of [].concat(...(document.body.children as any))) {
+      for (const element of Array.from(document.body.children)) {
         EventHandler.on(element, 'mouseover', noop)
       }
     }
@@ -250,7 +286,7 @@ class Tooltip extends BaseComponent {
     }
 
     const hideEvent = EventHandler.trigger(this._element, (this.constructor as typeof Tooltip).eventName(EVENT_HIDE))
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -258,7 +294,7 @@ class Tooltip extends BaseComponent {
     tip!.classList.remove(CLASS_NAME_SHOW)
 
     if ('ontouchstart' in document.documentElement) {
-      for (const element of [].concat(...(document.body.children as any))) {
+      for (const element of Array.from(document.body.children)) {
         EventHandler.off(element, 'mouseover', noop)
       }
     }
@@ -302,7 +338,7 @@ class Tooltip extends BaseComponent {
     return this.tip
   }
 
-  _createTipElement(content: Record<string, any>): HTMLElement | null {
+  _createTipElement(content: TooltipContentMap): HTMLElement | null {
     const tip = this._getTemplateFactory(content).toHtml() as HTMLElement
 
     if (!tip) {
@@ -323,7 +359,7 @@ class Tooltip extends BaseComponent {
     return tip
   }
 
-  setContent(content: Record<string, any>): void {
+  setContent(content: TooltipContentMap): void {
     this._newContent = content
     if (this._isShown()) {
       this._disposePopper()
@@ -331,7 +367,7 @@ class Tooltip extends BaseComponent {
     }
   }
 
-  _getTemplateFactory(content: Record<string, any>): TemplateFactory {
+  _getTemplateFactory(content: TooltipContentMap): TemplateFactory {
     if (this._templateFactory) {
       this._templateFactory.changeContent(content)
     } else {
@@ -345,13 +381,13 @@ class Tooltip extends BaseComponent {
     return this._templateFactory
   }
 
-  _getContentForTemplate(): Record<string, any> {
+  _getContentForTemplate(): TooltipContentMap {
     return {
       [SELECTOR_TOOLTIP_INNER]: this._getTitle(),
     }
   }
 
-  _getTitle(): string {
+  _getTitle(): string | HTMLElement {
     return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('data-bs-original-title') || this._element.getAttribute('data-tblr-original-title') || ''
   }
 
@@ -373,7 +409,7 @@ class Tooltip extends BaseComponent {
     return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
   }
 
-  _getOffset(): number[] | ((popperData: any) => number[]) {
+  _getOffset(): number[] | PopperOffsetFunction {
     const { offset } = this._config
 
     if (typeof offset === 'string') {
@@ -381,14 +417,14 @@ class Tooltip extends BaseComponent {
     }
 
     if (typeof offset === 'function') {
-      return (popperData: any) => (offset as Function)(popperData, this._element)
+      return (popperData: PopperOffsetData) => offset(popperData, this._element)
     }
 
-    return offset as number[]
+    return offset
   }
 
-  _resolvePossibleFunction(arg: any): any {
-    return execute(arg, [this._element, this._element])
+  _resolvePossibleFunction<T>(arg: T | ((this: HTMLElement, element: HTMLElement) => T)): T {
+    return execute(arg, [this._element, this._element]) as T
   }
 
   _getPopperConfig(attachment: string): Partial<Popper.Options> {
@@ -423,7 +459,7 @@ class Tooltip extends BaseComponent {
           name: 'preSetPlacement',
           enabled: true,
           phase: 'beforeMain',
-          fn: (data: any) => {
+          fn: (data: Popper.ModifierArguments<Record<string, unknown>>) => {
             this._getTipElement()!.setAttribute('data-popper-placement', data.state.placement)
           },
         },
@@ -465,12 +501,6 @@ class Tooltip extends BaseComponent {
       }
     }
 
-    this._hideModalHandler = () => {
-      if (this._element) {
-        this.hide()
-      }
-    }
-
     EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
   }
 
@@ -501,7 +531,7 @@ class Tooltip extends BaseComponent {
       if (this._isHovered) {
         this.show()
       }
-    }, this._config.delay.show)
+    }, this._getDelay().show)
   }
 
   _leave(): void {
@@ -515,7 +545,12 @@ class Tooltip extends BaseComponent {
       if (!this._isHovered) {
         this.hide()
       }
-    }, this._config.delay.hide)
+    }, this._getDelay().hide)
+  }
+
+  _getDelay(): { show: number; hide: number } {
+    const { delay } = this._config
+    return typeof delay === 'number' ? { show: delay, hide: delay } : delay
   }
 
   _setTimeout(handler: () => void, timeout: number): void {
@@ -527,7 +562,7 @@ class Tooltip extends BaseComponent {
     return Object.values(this._activeTrigger).includes(true)
   }
 
-  _getConfig(config: Partial<ComponentConfig>): ComponentConfig {
+  _getConfig(config?: ComponentConfigInput): ComponentConfig {
     const dataAttributes = Manipulator.getDataAttributes(this._element)
 
     for (const dataAttribute of Object.keys(dataAttributes)) {
@@ -536,18 +571,18 @@ class Tooltip extends BaseComponent {
       }
     }
 
-    config = {
+    let merged: Record<string, unknown> = {
       ...dataAttributes,
       ...(typeof config === 'object' && config ? config : {}),
     }
-    config = this._mergeConfigObj(config)
-    config = this._configAfterMerge(config)
-    this._typeCheckConfig(config)
-    return config
+    merged = this._mergeConfigObj(merged)
+    merged = this._configAfterMerge(merged as ComponentConfig)
+    this._typeCheckConfig(merged)
+    return merged as ComponentConfig
   }
 
   _configAfterMerge(config: ComponentConfig): ComponentConfig {
-    config.container = config.container === false ? document.body : getElement(config.container)
+    config.container = config.container === false ? document.body : (getElement(config.container) as HTMLElement)
 
     if (typeof config.delay === 'number') {
       config.delay = {
@@ -556,22 +591,25 @@ class Tooltip extends BaseComponent {
       }
     }
 
-    if (typeof config.title === 'number') {
-      config.title = config.title.toString()
+    // Numbers are accepted at runtime (`data-bs-title="42"`) even though the type says string
+    const raw = config as Record<string, unknown>
+    if (typeof raw.title === 'number') {
+      raw.title = raw.title.toString()
     }
 
-    if (typeof config.content === 'number') {
-      config.content = config.content.toString()
+    if (typeof raw.content === 'number') {
+      raw.content = raw.content.toString()
     }
 
     return config
   }
 
-  _getDelegateConfig(): Partial<ComponentConfig> {
-    const config: Partial<ComponentConfig> = {}
+  _getDelegateConfig(): ComponentConfigInput {
+    const config: Record<string, unknown> = {}
+    const defaults = (this.constructor as typeof Tooltip).Default as Record<string, unknown>
 
     for (const [key, value] of Object.entries(this._config)) {
-      if ((this.constructor as typeof Tooltip).Default[key] !== value) {
+      if (defaults[key] !== value) {
         config[key] = value
       }
     }
@@ -593,6 +631,24 @@ class Tooltip extends BaseComponent {
       this.tip = null
     }
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Tooltip.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (typeof data[config] === 'undefined') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    })
+  }
 }
 
+defineJQueryPlugin(Tooltip)
+
 export default Tooltip