@tabler/core 1.5.0 → 1.6.0

package/js/src/bootstrap/types.ts

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-export type ComponentConfig = Record<string, any>
+export type ComponentConfig = Record<string, unknown>
 
 export type ComponentConfigType = Record<string, string>
 
@@ -25,3 +25,32 @@ export interface BaseComponentStatic extends ConfigStatic {
 export type AllowList = Record<string, (string | RegExp)[]>
 
 export type SanitizeFn = (unsafeHtml: string) => string
+
+export interface JQueryEventLike {
+  isPropagationStopped(): boolean
+  isImmediatePropagationStopped(): boolean
+  isDefaultPrevented(): boolean
+  preventDefault(): void
+}
+
+export interface JQueryCollectionLike {
+  trigger(event: JQueryEventLike): unknown
+  each(callback: (this: HTMLElement, index: number) => void): unknown
+}
+
+export interface JQueryPluginFunction {
+  (this: JQueryCollectionLike, config?: unknown, ...args: unknown[]): unknown
+  Constructor?: unknown
+  noConflict?: () => JQueryPluginFunction
+}
+
+export interface JQueryStaticLike {
+  fn: Record<string, JQueryPluginFunction>
+  (selector: EventTarget): JQueryCollectionLike
+  Event(name: string, args?: Record<string, unknown>): JQueryEventLike
+}
+
+export interface JQueryPluginStatic {
+  NAME: string
+  jQueryInterface: JQueryPluginFunction
+}

package/js/src/bootstrap/util/backdrop.ts

@@ -15,7 +15,7 @@ const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`
 
-interface BackdropConfig {
+type BackdropConfig = {
   className: string
   clickCallback: (() => void) | null
   isAnimated: boolean

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

@@ -9,11 +9,34 @@ import EventHandler from '../dom/event-handler.js'
 import SelectorEngine from '../dom/selector-engine.js'
 import { isDisabled } from './index'
 
+type ComponentInstance = unknown
+
+interface PluginComponent {
+  NAME: string
+  getOrCreateInstance(element: HTMLElement | string | null): ComponentInstance
+}
+
+interface EventActionData {
+  targets: HTMLElement[]
+  event: Event
+}
+
+interface PluginEventActionData extends EventActionData {
+  instances: ComponentInstance[]
+}
+
 interface DismissibleComponent {
   EVENT_KEY: string
   NAME: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getOrCreateInstance(element: HTMLElement | string | null): any
+  getOrCreateInstance(element: HTMLElement | string | null): ComponentInstance
+}
+
+const callMethod = (instance: ComponentInstance, method: string): void => {
+  const callable = (instance as Record<string, unknown>)[method]
+
+  if (typeof callable === 'function') {
+    callable.call(instance)
+  }
 }
 
 const enableDismissTrigger = (component: DismissibleComponent, method = 'hide'): void => {
@@ -30,10 +53,56 @@ const enableDismissTrigger = (component: DismissibleComponent, method = 'hide'):
     }
 
     const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`)
-    const instance = component.getOrCreateInstance(target)
+    callMethod(component.getOrCreateInstance(target), method)
+  })
+}
 
-    instance[method]()
+const eventAction = (onEvent: string, stringSelector: string, callback: (data: EventActionData) => void): void => {
+  const selector = `${stringSelector}:not(.disabled):not(:disabled)`
+
+  EventHandler.on(document, onEvent, selector, function (this: HTMLElement, event: Event) {
+    if (['A', 'AREA'].includes(this.tagName)) {
+      event.preventDefault()
+    }
+
+    const targetSelector = SelectorEngine.getSelectorFromElement(this)
+    const targets = targetSelector ? SelectorEngine.find(targetSelector) : [this]
+
+    callback({ targets, event })
+  })
+}
+
+const eventActionOnPlugin = (Plugin: PluginComponent, onEvent: string, stringSelector: string, method: string, callback: ((data: PluginEventActionData) => void) | null = null): void => {
+  eventAction(`${onEvent}.${Plugin.NAME}`, stringSelector, (data) => {
+    const instances = data.targets.filter(Boolean).map((element) => Plugin.getOrCreateInstance(element))
+
+    if (typeof callback === 'function') {
+      callback({ ...data, instances })
+    }
+
+    for (const instance of instances) {
+      callMethod(instance, method)
+    }
   })
 }
 
-export { enableDismissTrigger }
+/**
+ * Creates the component for every element that matches on page load. One
+ * element with a broken config must not stop the rest of the bundle, so the
+ * error is logged and the loop goes on.
+ */
+const initAll = (selector: string, Plugin: PluginComponent, filter: ((element: HTMLElement) => boolean) | null = null): void => {
+  for (const element of SelectorEngine.find(selector)) {
+    if (filter && !filter(element)) {
+      continue
+    }
+
+    try {
+      Plugin.getOrCreateInstance(element)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+export { enableDismissTrigger, eventAction, eventActionOnPlugin, initAll }

package/js/src/bootstrap/util/focustrap.ts

@@ -20,7 +20,7 @@ const TAB_KEY = 'Tab'
 const TAB_NAV_FORWARD = 'forward'
 const TAB_NAV_BACKWARD = 'backward'
 
-interface FocusTrapConfig {
+type FocusTrapConfig = {
   autofocus: boolean
   trapElement: HTMLElement | null
 }
@@ -87,7 +87,7 @@ class FocusTrap extends Config {
   _handleFocusin(event: FocusEvent): void {
     const { trapElement } = this._config
 
-    if (event.target === document || event.target === trapElement || trapElement!.contains(event.target as Node)) {
+    if (!trapElement || event.target === document || event.target === trapElement || trapElement.contains(event.target as Node)) {
       return
     }
 

package/js/src/bootstrap/util/index.ts

@@ -5,12 +5,14 @@
  * --------------------------------------------------------------------------
  */
 
+import type { JQueryPluginStatic, JQueryStaticLike } from '../types'
+
 const MAX_UID = 1_000_000
 const MILLISECONDS_MULTIPLIER = 1000
 const TRANSITION_END = 'transitionend'
 
 const parseSelector = (selector: string): string => {
-  if (selector && window.CSS && window.CSS.escape) {
+  if (selector && typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
     selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
   }
 
@@ -156,6 +158,48 @@ const reflow = (element: HTMLElement): void => {
 
 const isRTL = (): boolean => document.documentElement.dir === 'rtl'
 
+const getjQuery = (): JQueryStaticLike | null => {
+  if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    return window.jQuery
+  }
+
+  return null
+}
+
+const DOMContentLoadedCallbacks: Array<() => void> = []
+
+const onDOMContentLoaded = (callback: () => void): void => {
+  if (document.readyState === 'loading') {
+    if (!DOMContentLoadedCallbacks.length) {
+      document.addEventListener('DOMContentLoaded', () => {
+        for (const domCallback of DOMContentLoadedCallbacks) {
+          domCallback()
+        }
+      })
+    }
+
+    DOMContentLoadedCallbacks.push(callback)
+  } else {
+    callback()
+  }
+}
+
+const defineJQueryPlugin = (plugin: JQueryPluginStatic): void => {
+  onDOMContentLoaded(() => {
+    const $ = getjQuery()
+    if ($) {
+      const name = plugin.NAME
+      const JQUERY_NO_CONFLICT = $.fn[name]
+      $.fn[name] = plugin.jQueryInterface
+      $.fn[name].Constructor = plugin
+      $.fn[name].noConflict = () => {
+        $.fn[name] = JQUERY_NO_CONFLICT
+        return plugin.jQueryInterface
+      }
+    }
+  })
+}
+
 const execute = (possibleCallback: unknown, args: unknown[] = [], defaultValue: unknown = possibleCallback): unknown => {
   return typeof possibleCallback === 'function' ? possibleCallback.call(args[0], ...args.slice(1)) : defaultValue
 }
@@ -206,4 +250,4 @@ const getNextActiveElement = <T>(list: T[], activeElement: T, shouldGetNext: boo
   return list[Math.max(0, Math.min(index, listLength - 1))]
 }
 
-export { execute, executeAfterTransition, findShadowRoot, getElement, getNextActiveElement, getTransitionDurationFromElement, getUID, isDisabled, isElement, isRTL, isVisible, noop, parseSelector, reflow, triggerTransitionEnd, toType }
+export { defineJQueryPlugin, execute, executeAfterTransition, findShadowRoot, getElement, getjQuery, getNextActiveElement, getTransitionDurationFromElement, getUID, isDisabled, isElement, isRTL, isVisible, noop, onDOMContentLoaded, parseSelector, reflow, triggerTransitionEnd, toType }

package/js/src/bootstrap/util/swipe.ts

@@ -22,7 +22,7 @@ const POINTER_TYPE_PEN = 'pen'
 const CLASS_NAME_POINTER_EVENT = 'pointer-event'
 const SWIPE_THRESHOLD = 40
 
-interface SwipeConfig {
+type SwipeConfig = {
   endCallback: (() => void) | null
   leftCallback: (() => void) | null
   rightCallback: (() => void) | null
@@ -43,8 +43,8 @@ const DefaultType: ComponentConfigType = {
 class Swipe extends Config {
   declare _config: SwipeConfig & ComponentConfig
   _element: HTMLElement
-  _deltaX: number
-  _supportPointerEvents: boolean
+  declare _deltaX: number
+  declare _supportPointerEvents: boolean
 
   constructor(element: HTMLElement, config?: ComponentConfig) {
     super()

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

@@ -13,7 +13,7 @@ import type { AllowList, ComponentConfig, ComponentConfigType, SanitizeFn } from
 
 const NAME = 'TemplateFactory'
 
-interface TemplateFactoryConfig {
+type TemplateFactoryConfig = {
   allowList: AllowList
   content: Record<string, unknown>
   extraClass: string | (() => string)
@@ -104,7 +104,7 @@ class TemplateFactory extends Config {
 
   _typeCheckConfig(config: ComponentConfig): void {
     super._typeCheckConfig(config)
-    this._checkContent(config.content)
+    this._checkContent(config.content as Record<string, unknown>)
   }
 
   _checkContent(arg: Record<string, unknown>): void {

package/js/src/clipboard.ts

@@ -0,0 +1,197 @@
+/**
+ * --------------------------------------------------------------------------
+ * Tabler clipboard.ts
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/dev/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './bootstrap/base-component'
+import EventHandler from './bootstrap/dom/event-handler'
+import SelectorEngine from './bootstrap/dom/selector-engine'
+import { initAll } from './bootstrap/util/component-functions'
+import type { ElementSelector } from './bootstrap/types'
+
+type ComponentConfig = {
+  /** selector of the element to read the text from */
+  target: string | null
+  /** literal text to copy; wins over `target` */
+  text: string | null
+  /** how long the copied state lasts, in milliseconds */
+  delay: number
+}
+
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
+
+/**
+ * Constants
+ */
+
+const NAME = 'clipboard'
+const DATA_KEY = `bs.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_COPIED = `copied${EVENT_KEY}`
+const EVENT_ERROR = `error${EVENT_KEY}`
+
+const CLASS_NAME_COPIED = 'copied'
+
+const SELECTOR_DATA_TOGGLE = `[data-bs-toggle="${NAME}"], [data-tblr-toggle="${NAME}"]`
+const SELECTOR_LABEL = `.${NAME}-label`
+const SELECTOR_FEEDBACK = `.${NAME}-feedback`
+
+const Default: ComponentConfig = {
+  target: null,
+  text: null,
+  delay: 2000,
+}
+
+const DefaultType: Record<keyof ComponentConfig, string> = {
+  target: '(string|null)',
+  text: '(string|number|null)',
+  delay: 'number',
+}
+
+/**
+ * Helpers
+ */
+
+// The `hidden` DOM property belongs to HTMLElement, so an `<svg>` ignores it.
+// The attribute works on any element.
+const toggleHidden = (element: Element, hidden: boolean): void => {
+  if (hidden) {
+    element.setAttribute('hidden', '')
+  } else {
+    element.removeAttribute('hidden')
+  }
+}
+
+/**
+ * Class definition
+ *
+ * Copies text to the clipboard when the trigger is clicked, then shows the
+ * copied state for a moment. Every word lives in the markup: the trigger holds
+ * a `clipboard-label` and a `clipboard-feedback`, and the component only swaps
+ * which of them is hidden.
+ *
+ * The browser gives `navigator.clipboard` to secure contexts only, so on plain
+ * http a copy fails and `error.bs.clipboard` fires.
+ */
+
+class Clipboard extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
+  _labels: Element[] = []
+  _feedbacks: Element[] = []
+  _timeout = 0
+
+  constructor(element: ElementSelector, config?: ComponentConfigInput) {
+    super(element, config)
+
+    if (!this._element) {
+      return
+    }
+
+    // Several of each are allowed: an icon-only button pairs a check icon with
+    // a visually hidden word, and both switch together.
+    this._labels = SelectorEngine.find(SELECTOR_LABEL, this._element)
+    this._feedbacks = SelectorEngine.find(SELECTOR_FEEDBACK, this._element)
+
+    for (const feedback of this._feedbacks) {
+      // Revealed rather than restyled, so a screen reader announces it.
+      toggleHidden(feedback, true)
+
+      if (!feedback.hasAttribute('role')) {
+        feedback.setAttribute('role', 'status')
+      }
+    }
+
+    EventHandler.on(this._element, `click${EVENT_KEY}`, (event: Event) => {
+      event.preventDefault()
+      void this.copy()
+    })
+  }
+
+  // Getters
+  static get Default(): ComponentConfig {
+    return Default
+  }
+
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
+    return DefaultType
+  }
+
+  static get NAME(): string {
+    return NAME
+  }
+
+  get text(): string {
+    const { text, target } = this._config
+    if (text !== null && text !== '') {
+      return String(text)
+    }
+
+    const source = target ? SelectorEngine.findOne(target) : null
+    if (!source) {
+      return ''
+    }
+
+    return source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement ? source.value : (source.textContent ?? '').trim()
+  }
+
+  // Public
+  async copy(): Promise<void> {
+    const { text } = this
+
+    if (!text || !navigator.clipboard) {
+      EventHandler.trigger(this._element, EVENT_ERROR)
+      return
+    }
+
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch {
+      EventHandler.trigger(this._element, EVENT_ERROR)
+      return
+    }
+
+    this._showCopied()
+    EventHandler.trigger(this._element, EVENT_COPIED)
+  }
+
+  dispose(): void {
+    window.clearTimeout(this._timeout)
+    super.dispose()
+  }
+
+  // Private
+  _showCopied(): void {
+    window.clearTimeout(this._timeout)
+    this._toggleCopied(true)
+
+    if (this._config.delay > 0) {
+      this._timeout = window.setTimeout(() => this._toggleCopied(false), this._config.delay)
+    }
+  }
+
+  _toggleCopied(copied: boolean): void {
+    this._element.classList.toggle(CLASS_NAME_COPIED, copied)
+
+    for (const label of this._labels) {
+      toggleHidden(label, copied)
+    }
+
+    for (const feedback of this._feedbacks) {
+      toggleHidden(feedback, !copied)
+    }
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+// js-docs-start clipboard-init
+initAll(SELECTOR_DATA_TOGGLE, Clipboard)
+// js-docs-end clipboard-init
+
+export default Clipboard