@tabler/core 1.5.1 → 1.6.1

package/js/src/bootstrap/modal.ts

@@ -11,8 +11,9 @@ import SelectorEngine from './dom/selector-engine'
 import Backdrop from './util/backdrop'
 import { enableDismissTrigger } from './util/component-functions'
 import FocusTrap from './util/focustrap'
-import { isRTL, isVisible, reflow } from './util/index'
+import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
 
 /**
  * Constants
@@ -45,13 +46,13 @@ const SELECTOR_DIALOG = '.modal-dialog'
 const SELECTOR_MODAL_BODY = '.modal-body'
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"], [data-tblr-toggle="modal"]'
 
-interface ComponentConfig {
-  [key: string]: any
+type ComponentConfig = {
+  backdrop: boolean | 'static'
+  focus: boolean
+  keyboard: boolean
 }
 
-interface ComponentConfigType {
-  [key: string]: string
-}
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
 
 const Default: ComponentConfig = {
   backdrop: true,
@@ -59,7 +60,7 @@ const Default: ComponentConfig = {
   keyboard: true,
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   backdrop: '(boolean|string)',
   focus: 'boolean',
   keyboard: 'boolean',
@@ -70,6 +71,8 @@ const DefaultType: ComponentConfigType = {
  */
 
 class Modal extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _dialog: HTMLElement | null
   _backdrop: Backdrop
   _focustrap: FocusTrap
@@ -77,7 +80,7 @@ class Modal extends BaseComponent {
   _isTransitioning: boolean
   _scrollBar: ScrollBarHelper
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     super(element, config)
 
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
@@ -94,7 +97,7 @@ class Modal extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -115,7 +118,7 @@ class Modal extends BaseComponent {
       relatedTarget,
     })
 
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
@@ -138,7 +141,7 @@ class Modal extends BaseComponent {
 
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
 
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -189,7 +192,7 @@ class Modal extends BaseComponent {
     this._element.setAttribute('role', 'dialog')
     this._element.scrollTop = 0
 
-    const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
+    const modalBody = this._dialog ? SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog) : null
     if (modalBody) {
       modalBody.scrollTop = 0
     }
@@ -271,7 +274,7 @@ class Modal extends BaseComponent {
 
   _triggerBackdropTransition(): void {
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -316,6 +319,22 @@ class Modal extends BaseComponent {
     this._element.style.paddingLeft = ''
     this._element.style.paddingRight = ''
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown, relatedTarget?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Modal.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](relatedTarget)
+    })
+  }
 }
 
 /**
@@ -329,8 +348,12 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     event.preventDefault()
   }
 
+  if (!target) {
+    return
+  }
+
   EventHandler.one(target, EVENT_SHOW, (showEvent: Event) => {
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
@@ -353,4 +376,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
 enableDismissTrigger(Modal)
 
+defineJQueryPlugin(Modal)
+
 export default Modal

package/js/src/bootstrap/offcanvas.ts

@@ -11,8 +11,9 @@ import SelectorEngine from './dom/selector-engine'
 import Backdrop from './util/backdrop'
 import { enableDismissTrigger } from './util/component-functions'
 import FocusTrap from './util/focustrap'
-import { isDisabled, isVisible } from './util/index'
+import { defineJQueryPlugin, isDisabled, isVisible } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
 
 /**
  * Constants
@@ -42,13 +43,13 @@ const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"], [data-tblr-toggle="offcanvas"]'
 
-interface ComponentConfig {
-  [key: string]: any
+type ComponentConfig = {
+  backdrop: boolean | 'static'
+  keyboard: boolean
+  scroll: boolean
 }
 
-interface ComponentConfigType {
-  [key: string]: string
-}
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
 
 const Default: ComponentConfig = {
   backdrop: true,
@@ -56,7 +57,7 @@ const Default: ComponentConfig = {
   scroll: false,
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   backdrop: '(boolean|string)',
   keyboard: 'boolean',
   scroll: 'boolean',
@@ -67,11 +68,13 @@ const DefaultType: ComponentConfigType = {
  */
 
 class Offcanvas extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _isShown: boolean
   _backdrop: Backdrop
   _focustrap: FocusTrap
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     super(element, config)
 
     this._isShown = false
@@ -84,7 +87,7 @@ class Offcanvas extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -103,7 +106,7 @@ class Offcanvas extends BaseComponent {
 
     const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget })
 
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
@@ -138,7 +141,7 @@ class Offcanvas extends BaseComponent {
 
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
 
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -210,6 +213,22 @@ class Offcanvas extends BaseComponent {
       EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
     })
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Offcanvas.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](this)
+    })
+  }
 }
 
 /**
@@ -223,6 +242,10 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     event.preventDefault()
   }
 
+  if (!target) {
+    return
+  }
+
   if (isDisabled(this)) {
     return
   }
@@ -258,4 +281,6 @@ EventHandler.on(window, EVENT_RESIZE, () => {
 
 enableDismissTrigger(Offcanvas)
 
+defineJQueryPlugin(Offcanvas)
+
 export default Offcanvas

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