@tabler/core 1.6.0 → 1.6.1

package/js/src/autosize.ts

@@ -92,7 +92,7 @@ class Autosize extends BaseComponent {
   // Public
   update(): void {
     const element = this._element
-    if (!element.isConnected || element.offsetParent === null) {
+    if (!element.isConnected || element.getClientRects().length === 0) {
       return
     }
 
@@ -100,11 +100,16 @@ class Autosize extends BaseComponent {
     // position is put back afterwards.
     const { scrollTop } = document.documentElement
     const style = getComputedStyle(element)
-    const border = style.boxSizing === 'border-box' ? Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth) : 0
+    // scrollHeight is the padding box: a border-box field adds its borders, a
+    // content-box field drops its padding.
+    const extra = style.boxSizing === 'border-box' ? Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth) : -(Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom))
     const before = element.style.height
 
+    // Measured without a scrollbar: one left over from the previous size
+    // would wrap the text and add a phantom line.
+    element.style.overflowY = 'hidden'
     element.style.height = 'auto'
-    const height = `${element.scrollHeight + border}px`
+    const height = `${element.scrollHeight + extra}px`
     element.style.height = height
 
     // Past max-height the content no longer fits, so let the field scroll.

package/js/src/bootstrap/base-component.ts

@@ -25,10 +25,12 @@ class BaseComponent extends Config {
       return
     }
 
+    const ctor = this.constructor as unknown as BaseComponentStatic
+    Data.get<BaseComponent>(resolved, ctor.DATA_KEY)?.dispose()
+
     this._element = resolved
     this._config = this._getConfig(config)
 
-    const ctor = this.constructor as unknown as BaseComponentStatic
     Data.set(this._element, ctor.DATA_KEY, this)
   }
 
@@ -43,7 +45,15 @@ class BaseComponent extends Config {
   }
 
   _queueCallback(callback: () => void, element: HTMLElement, isAnimated = true): void {
-    executeAfterTransition(callback, element, isAnimated)
+    executeAfterTransition(
+      () => {
+        if (this._element) {
+          callback()
+        }
+      },
+      element,
+      isAnimated,
+    )
   }
 
   _getConfig(config?: ComponentConfig): ComponentConfig {

package/js/src/bootstrap/dom/manipulator.ts

@@ -43,7 +43,7 @@ const PREFIXES = ['tblr', 'bs'] as const
 
 const Manipulator = {
   setDataAttribute(element: HTMLElement, key: string, value: string): void {
-    element.setAttribute(`data-tblr-${normalizeDataKey(key)}`, value)
+    element.setAttribute(`data-bs-${normalizeDataKey(key)}`, value)
   },
 
   removeDataAttribute(element: HTMLElement, key: string): void {

package/js/src/bootstrap/dropdown.ts

@@ -58,7 +58,9 @@ const CLASS_NAME_DROPUP_CENTER = 'dropup-center'
 const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled), [data-tblr-toggle="dropdown"]:not(.disabled):not(:disabled)'
-const SELECTOR_DATA_TOGGLE_SHOWN = `.${CLASS_NAME_SHOW}[data-bs-toggle="dropdown"], .${CLASS_NAME_SHOW}[data-tblr-toggle="dropdown"]`
+const SELECTOR_DATA_TOGGLE_SHOWN = SELECTOR_DATA_TOGGLE.split(', ')
+  .map((selector) => `${selector}.${CLASS_NAME_SHOW}`)
+  .join(', ')
 const SELECTOR_MENU = '.dropdown-menu'
 const SELECTOR_NAVBAR = '.navbar'
 const SELECTOR_NAVBAR_NAV = '.navbar-nav'

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

@@ -62,7 +62,18 @@ const triggerTransitionEnd = (element: HTMLElement): void => {
   element.dispatchEvent(new Event(TRANSITION_END))
 }
 
+// A jQuery collection stands in for its first element, as in upstream Bootstrap.
+const unwrapJQuery = (object: unknown): unknown => {
+  if (object && typeof object === 'object' && typeof (object as { jquery?: unknown }).jquery !== 'undefined') {
+    return (object as { 0?: unknown })[0]
+  }
+
+  return object
+}
+
 const isElement = (object: unknown): object is HTMLElement => {
+  object = unwrapJQuery(object)
+
   if (!object || typeof object !== 'object') {
     return false
   }
@@ -71,6 +82,8 @@ const isElement = (object: unknown): object is HTMLElement => {
 }
 
 const getElement = (object: unknown): HTMLElement | null => {
+  object = unwrapJQuery(object)
+
   if (isElement(object)) {
     return object
   }
@@ -159,7 +172,7 @@ 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')) {
+  if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery') && !document.body.hasAttribute('data-tblr-no-jquery')) {
     return window.jQuery
   }
 

package/js/src/clipboard.ts

@@ -9,6 +9,7 @@ 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 { getElement } from './bootstrap/util/index'
 import type { ElementSelector } from './bootstrap/types'
 
 type ComponentConfig = {
@@ -38,6 +39,8 @@ 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 ATTRIBUTE_TEXT = 'data-bs-text'
+const ATTRIBUTE_TEXT_ALIAS = 'data-tblr-text'
 
 const Default: ComponentConfig = {
   target: null,
@@ -130,12 +133,18 @@ class Clipboard extends BaseComponent {
       return String(text)
     }
 
-    const source = target ? SelectorEngine.findOne(target) : null
+    const source = target ? getElement(target) : null
     if (!source) {
       return ''
     }
 
-    return source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement ? source.value : (source.textContent ?? '').trim()
+    if (source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement) {
+      return source.value
+    }
+
+    // innerText keeps line breaks and skips hidden text such as a
+    // visually-hidden label; textContent is the fallback for SVG.
+    return (source instanceof HTMLElement ? source.innerText : ((source as Element).textContent ?? '')).trim()
   }
 
   // Public
@@ -158,12 +167,27 @@ class Clipboard extends BaseComponent {
     EventHandler.trigger(this._element, EVENT_COPIED)
   }
 
+  /** Ends the copied state, for a `delay` of 0 or an early reset. */
+  reset(): void {
+    window.clearTimeout(this._timeout)
+    this._toggleCopied(false)
+  }
+
   dispose(): void {
     window.clearTimeout(this._timeout)
     super.dispose()
   }
 
   // Private
+  _mergeConfigObj(config?: Record<string, unknown>, element?: HTMLElement): Record<string, unknown> {
+    // The text is copied as written: `data-bs-text="007"` or `"true"` must not
+    // be read as a number or a boolean the way other data attributes are.
+    const raw = element?.getAttribute(ATTRIBUTE_TEXT) ?? element?.getAttribute(ATTRIBUTE_TEXT_ALIAS)
+    const dataOptions: Record<string, unknown> = raw === null || raw === undefined ? {} : { text: raw }
+
+    return super._mergeConfigObj({ ...dataOptions, ...config }, element)
+  }
+
   _showCopied(): void {
     window.clearTimeout(this._timeout)
     this._toggleCopied(true)

package/js/src/confetti.ts

@@ -7,6 +7,7 @@
 
 import BaseComponent from './bootstrap/base-component'
 import EventHandler from './bootstrap/dom/event-handler'
+import Manipulator from './bootstrap/dom/manipulator'
 import SelectorEngine from './bootstrap/dom/selector-engine'
 import { isDisabled } from './bootstrap/util/index'
 import type { ComponentConfig as BaseConfig, ElementSelector } from './bootstrap/types'
@@ -58,6 +59,8 @@ type Emitter = {
   stopped: boolean
   /** every piece has landed and `end` was fired */
   done: boolean
+  /** the instance was disposed: the pieces still land, but `end` is not fired */
+  detached: boolean
 }
 
 /**
@@ -133,14 +136,21 @@ const stage = {
   frame: 0,
   lastTick: 0,
 
-  add(emitter: Emitter): void {
-    this.emitters.push(emitter)
+  add(emitter: Emitter): boolean {
     this._mount()
 
+    if (!this.context) {
+      return false
+    }
+
+    this.emitters.push(emitter)
+
     if (!this.frame) {
       this.lastTick = performance.now()
       this.frame = requestAnimationFrame((now) => this._tick(now))
     }
+
+    return true
   },
 
   _mount(): void {
@@ -161,9 +171,14 @@ const stage = {
       display: 'block',
     })
 
+    const context = canvas.getContext('2d')
+    if (!context) {
+      return
+    }
+
     document.body.append(canvas)
     this.canvas = canvas
-    this.context = canvas.getContext('2d')
+    this.context = context
     this._resize()
     window.addEventListener('resize', this._onResize)
   },
@@ -191,7 +206,7 @@ const stage = {
     // The backing store is scaled for HiDPI screens; the CSS size above keeps
     // the element at the viewport size, so the drawing stays sharp and 1:1.
     const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR)
-    this.canvas.width = window.innerWidth * dpr
+    this.canvas.width = document.documentElement.clientWidth * dpr
     this.canvas.height = window.innerHeight * dpr
     this.context.setTransform(dpr, 0, 0, dpr, 0, 0)
   },
@@ -312,7 +327,10 @@ const stage = {
 
       this.emitters.splice(i, 1)
       emitter.done = true
-      EventHandler.trigger(emitter.element, EVENT_END)
+
+      if (!emitter.detached) {
+        EventHandler.trigger(emitter.element, EVENT_END)
+      }
     }
   },
 }
@@ -372,9 +390,13 @@ class Confetti extends BaseComponent {
       emitted: 0,
       stopped: false,
       done: false,
+      detached: false,
     }
 
-    stage.add(this._emitter)
+    if (!stage.add(this._emitter)) {
+      this._emitter = null
+      EventHandler.trigger(this._element, EVENT_END)
+    }
   }
 
   stop(): void {
@@ -386,6 +408,10 @@ class Confetti extends BaseComponent {
   }
 
   dispose(): void {
+    if (this._emitter) {
+      this._emitter.detached = true
+    }
+
     this.stop()
     super.dispose()
   }
@@ -432,7 +458,16 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   }
 
   const target = SelectorEngine.getElementFromSelector(this) || this
-  const instance = Confetti.getOrCreateInstance(target) as Confetti
+  const config = Manipulator.getDataAttributes(this)
+  const instance = Confetti.getOrCreateInstance(target, config) as Confetti
+
+  // The instance lives on the target and keeps the config it was created
+  // with, so re-read the trigger's options on every click; several triggers
+  // can then share one target with their own look.
+  if (target !== this) {
+    instance._config = instance._getConfig(config) as ComponentConfig
+  }
+
   instance.burst()
 })
 

package/js/src/countup.ts

@@ -147,6 +147,7 @@ class CountUp extends BaseComponent {
   _elapsed = 0
   _running = false
   _paused = false
+  _started = false
 
   constructor(element: ElementSelector, config?: ComponentConfigInput) {
     super(element, config)
@@ -175,13 +176,7 @@ class CountUp extends BaseComponent {
       return
     }
 
-    this._observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) {
-        this._observer?.disconnect()
-        this._observer = null
-        this.start()
-      }
-    })
+    this._observer = new IntersectionObserver((entries) => this._observerCallback(entries))
     this._observer.observe(this._element)
   }
 
@@ -205,6 +200,8 @@ class CountUp extends BaseComponent {
 
   reset(): void {
     this._stop()
+    // Lets the observer start the animation again when the element comes into view.
+    this._started = false
     this._value = this._config.startVal
     this._print(this._value)
   }
@@ -244,7 +241,11 @@ class CountUp extends BaseComponent {
 
     if (raw) {
       try {
-        dataOptions = JSON.parse(raw)
+        const parsed: unknown = JSON.parse(raw)
+        // Only an object carries options; `null`, a number or an array is ignored.
+        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+          dataOptions = parsed as Record<string, unknown>
+        }
       } catch {
         // ignore invalid JSON
       }
@@ -253,8 +254,21 @@ class CountUp extends BaseComponent {
     return super._mergeConfigObj({ ...coerceOptions(dataOptions), ...config }, element)
   }
 
+  _observerCallback(entries: IntersectionObserverEntry[]): void {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      this._observer?.disconnect()
+      this._observer = null
+
+      // update() may have already animated it while it was off screen.
+      if (!this._started) {
+        this.start()
+      }
+    }
+  }
+
   _animate(from: number, to: number): void {
     this._stop()
+    this._started = true
 
     // Users who asked for less motion get the final number at once.
     if (from === to || this._config.duration <= 0 || reducedMotion()) {
@@ -317,14 +331,18 @@ class CountUp extends BaseComponent {
     }
 
     if (format === 'time') {
-      const minutes = Math.round(Math.abs(value))
-      return `${value < 0 ? '-' : ''}${prefix}${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}${suffix}`
+      // Rounded away from zero on both sides, so -90.5 and 90.5 give the same
+      // minutes; a value that rounds to 0 stays unsigned (-0 < 0 is false).
+      const rounded = Math.sign(value) * Math.round(Math.abs(value))
+      const minutes = Math.abs(rounded)
+      return `${rounded < 0 ? '-' : ''}${prefix}${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}${suffix}`
     }
 
-    const [integer, fraction] = Math.abs(value).toFixed(decimalPlaces).split('.') as [string, string | undefined]
+    const fixed = value.toFixed(decimalPlaces)
+    const [integer, fraction] = fixed.replace('-', '').split('.') as [string, string | undefined]
     const grouped = useGrouping ? integer.replace(/\B(?=(\d{3})+(?!\d))/g, separator) : integer
 
-    return `${value < 0 ? '-' : ''}${prefix}${grouped}${fraction ? decimal + fraction : ''}${suffix}`
+    return `${Number(fixed) < 0 ? '-' : ''}${prefix}${grouped}${fraction ? decimal + fraction : ''}${suffix}`
   }
 }