@tabler/core 1.5.1 → 1.6.1

package/dist/types/src/deprecated.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Helpers kept only so that projects written for an older 1.x release keep
+ * working. They are exported as the `tabler` namespace: `tabler.tabler.getColor()`
+ * from the bundle, `import { tabler } from '@tabler/core'` from the module.
+ *
+ * Removed in 2.0, together with this file. Read the custom property yourself,
+ * and mix the opacity in with `color-mix()`.
+ */
+export declare const prefix: string;
+export declare const hexToRgba: (hex: string, opacity: number) => string | null;
+export declare const getColor: (color: string, opacity?: number) => string | null;

package/dist/types/src/input-mask.d.ts

@@ -1 +1,43 @@
-declare const maskElementList: HTMLElement[];
+/**
+ * --------------------------------------------------------------------------
+ * Tabler input-mask.ts
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/dev/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import BaseComponent from './bootstrap/base-component';
+import type { ElementSelector } from './bootstrap/types';
+interface IMaskInstance {
+    value: string;
+    unmaskedValue: string;
+    updateValue(): void;
+    updateOptions(options: Record<string, unknown>): void;
+    destroy(): void;
+}
+type ComponentConfig = {
+    /** an IMask mask: a pattern string, `Number`, `Date`, a RegExp or a mask object */
+    mask: unknown;
+    lazy: boolean;
+};
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>;
+/**
+ * Class definition
+ *
+ * Wraps the IMask plugin (https://imask.js.org), loaded separately as
+ * `window.IMask`. Without the plugin the component is inert.
+ */
+declare class InputMask extends BaseComponent {
+    _element: HTMLInputElement;
+    _config: ComponentConfig;
+    _mask: IMaskInstance | null;
+    constructor(element: ElementSelector, config?: ComponentConfigInput);
+    static get Default(): ComponentConfig;
+    static get DefaultType(): Record<keyof ComponentConfig, string>;
+    static get NAME(): string;
+    /** The IMask instance, for options the component does not expose. */
+    get mask(): IMaskInstance | null;
+    update(): void;
+    dispose(): void;
+    _mergeConfigObj(config?: Record<string, unknown>, element?: HTMLElement): Record<string, unknown>;
+}
+export default InputMask;
+export type { IMaskInstance };

package/dist/types/src/otp-input.d.ts

@@ -0,0 +1,75 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap otp-input.ts
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import BaseComponent from './bootstrap/base-component';
+import type { ElementSelector } from './bootstrap/types';
+type OtpInputType = 'numeric' | 'alphanumeric' | 'alpha';
+type ComponentConfig = {
+    groups: number[] | null;
+    length: number | null;
+    mask: boolean;
+    separator: string;
+    type: string;
+};
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>;
+declare const TYPES: Record<OtpInputType, {
+    inputmode: string;
+    pattern: string;
+    filter: RegExp;
+}>;
+/**
+ * Class definition
+ *
+ * A single real `<input>` inside `.otp` is turned into a transparent overlay
+ * once its value is rendered into one `.otp-slot` per character, so screen
+ * readers, password managers and SMS autofill still see one ordinary field.
+ */
+declare class OtpInput extends BaseComponent {
+    _element: HTMLElement;
+    _config: ComponentConfig;
+    _input: HTMLInputElement;
+    _type: (typeof TYPES)[OtpInputType];
+    _length: number;
+    _wasComplete: boolean;
+    _slots: HTMLElement[];
+    _slotsContainer: HTMLElement | null;
+    _pointerActive: boolean;
+    _pointerIndex: number;
+    _composedValue: string | null;
+    _onInput: (event: Event) => void;
+    _onCompositionEnd: () => void;
+    _onBeforeInput: (event: Event) => void;
+    _onFocus: () => void;
+    _onPointerDown: (event: Event) => void;
+    _onPointerEnd: () => void;
+    _onSync: () => void;
+    _onSelectionChange: () => void;
+    constructor(element: ElementSelector, config?: ComponentConfigInput);
+    static get Default(): ComponentConfig;
+    static get DefaultType(): Record<keyof ComponentConfig, string>;
+    static get NAME(): string;
+    getValue(): string;
+    setValue(value: string | number): void;
+    clear(): void;
+    focus(): void;
+    dispose(): void;
+    _resolveLength(): number;
+    _setupInput(): void;
+    _renderSlots(): void;
+    _addEventListeners(): void;
+    _handleFocus(): void;
+    _handleInput(): void;
+    _handleBeforeInput(event: InputEvent): void;
+    _handlePointerDown(event: PointerEvent): void;
+    _slotIndexFromPoint(x: number): number | null;
+    _afterValueChange(before?: string): void;
+    _firstEmptyIndex(): number;
+    _selectSlot(index: number): void;
+    _sanitize(value: string): string;
+    _render(): void;
+    _checkComplete(): void;
+}
+export default OtpInput;

package/dist/types/src/sortable.d.ts

@@ -1 +1,41 @@
-declare const sortableElements: NodeListOf<HTMLElement>;
+/**
+ * --------------------------------------------------------------------------
+ * Tabler sortable.ts
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/dev/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import BaseComponent from './bootstrap/base-component';
+import type { ElementSelector } from './bootstrap/types';
+interface SortableInstance {
+    option(name: string, value?: unknown): unknown;
+    toArray(): string[];
+    sort(order: string[], useAnimation?: boolean): void;
+    destroy(): void;
+}
+type ComponentConfig = Record<string, unknown>;
+type ComponentConfigInput = Record<string, unknown>;
+/**
+ * Class definition
+ *
+ * Wraps SortableJS (https://sortablejs.github.io/Sortable/), loaded separately
+ * as `window.Sortable`. Without the plugin the component is inert. Options come
+ * from the `data-sortable` attribute as JSON, or from the config object.
+ * Turn `forceFallback` on so the dragged copy can be styled with `.sortable-drag`.
+ */
+declare class Sortable extends BaseComponent {
+    _element: HTMLElement;
+    _config: ComponentConfig;
+    _sortable: SortableInstance | null;
+    constructor(element: ElementSelector, config?: ComponentConfigInput);
+    static get Default(): ComponentConfig;
+    static get DefaultType(): Record<string, string>;
+    static get NAME(): string;
+    /** The SortableJS instance, for options the component does not expose. */
+    get sortable(): SortableInstance | null;
+    toArray(): string[];
+    sort(order: string[], useAnimation?: boolean): void;
+    dispose(): void;
+    _mergeConfigObj(config?: Record<string, unknown>, element?: HTMLElement): Record<string, unknown>;
+}
+export default Sortable;
+export type { SortableInstance };

package/dist/types/src/sparkline.d.ts

@@ -0,0 +1,67 @@
+/**
+ * --------------------------------------------------------------------------
+ * Tabler sparkline.ts
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/dev/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import BaseComponent from './bootstrap/base-component';
+import type { ComponentConfig as BaseConfig, ElementSelector } from './bootstrap/types';
+type SparklineType = 'line' | 'bar' | 'circle' | 'tristate';
+type SparklineFill = 'none' | 'auto';
+type SparklineSpot = 'none' | 'min' | 'max' | 'last';
+type SparklineValuesInput = number[] | number | string;
+type ComponentConfig = {
+    type: SparklineType;
+    values: number[];
+    width: number;
+    height: number;
+    min: number | null;
+    max: number | null;
+    fill: SparklineFill;
+    spot: SparklineSpot;
+    pad: number;
+    barGap: number;
+    barRadius: number;
+    label: string | number | boolean | null;
+    threshold: number | null;
+    animation: number;
+};
+type ComponentConfigInput = Partial<Omit<ComponentConfig, 'values'>> & {
+    values?: SparklineValuesInput;
+};
+/**
+ * Class definition
+ *
+ * Tiny inline SVG chart (line, bar or circle) rendered from data attributes:
+ *
+ *   <span class="sparkline" data-bs-toggle="sparkline" data-bs-type="line" data-bs-values="3,4,2,6,5,8,7"></span>
+ *
+ * Colours and stroke widths come from the `--tblr-sparkline-*` custom
+ * properties, so a text colour utility on the element themes the chart.
+ */
+declare class Sparkline extends BaseComponent {
+    _element: HTMLElement;
+    _config: ComponentConfig;
+    _userConfig: ComponentConfigInput;
+    _frame: number;
+    constructor(element: ElementSelector, config?: ComponentConfigInput);
+    static get Default(): ComponentConfig;
+    static get DefaultType(): Record<keyof ComponentConfig, string>;
+    static get NAME(): string;
+    update(values: SparklineValuesInput): void;
+    render(): void;
+    dispose(): void;
+    _configAfterMerge(config: BaseConfig): BaseConfig;
+    _labelText(): string;
+    _circleRatio(): number;
+    _canAnimate(from: SVGSVGElement, to: SVGSVGElement): boolean;
+    _animate(from: SVGSVGElement, to: SVGSVGElement): void;
+    _hairline(svg: SVGSVGElement, y: number, color: string, dashed?: boolean): void;
+    _createSvg(): SVGSVGElement;
+    _renderLine(): SVGSVGElement;
+    _areaPath(ys: number[], step: number, height: number): string;
+    _renderBars(): SVGSVGElement;
+    _renderTristate(): SVGSVGElement;
+    _renderCircle(): SVGSVGElement;
+}
+export default Sparkline;

package/dist/types/src/strength.d.ts

@@ -0,0 +1,53 @@
+/**
+ * --------------------------------------------------------------------------
+ * Tabler strength.ts
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/dev/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import BaseComponent from './bootstrap/base-component';
+import type { ElementSelector } from './bootstrap/types';
+type StrengthLevel = 'weak' | 'fair' | 'good' | 'strong';
+type ComponentConfig = {
+    /** selector of the password field; without it the meter looks in its own parent */
+    input: string | null;
+    minLength: number;
+    messages: Record<StrengthLevel, string>;
+    weights: Record<string, number>;
+    /** score bounds: weak up to the first, fair to the second, good to the third */
+    thresholds: number[];
+    /** replaces the built-in scoring; gets the password, returns a number */
+    scorer: ((password: string) => number) | null;
+};
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>;
+/**
+ * Class definition
+ *
+ * Rates the password typed in a field and fills a segmented meter. The score
+ * is a hint for the user, never a validation: check the password on the
+ * server as well.
+ */
+declare class Strength extends BaseComponent {
+    _element: HTMLElement;
+    _config: ComponentConfig;
+    _input: HTMLInputElement | null;
+    _segments: HTMLElement[];
+    _text: HTMLElement | null;
+    _emptyText: string;
+    _level: StrengthLevel | null;
+    _onInput: () => void;
+    constructor(element: ElementSelector, config?: ComponentConfigInput);
+    static get Default(): ComponentConfig;
+    static get DefaultType(): Record<keyof ComponentConfig, string>;
+    static get NAME(): string;
+    get level(): StrengthLevel | null;
+    evaluate(): void;
+    dispose(): void;
+    _configAfterMerge(config: ComponentConfig): ComponentConfig;
+    _getInput(): HTMLInputElement | null;
+    _getText(): HTMLElement | null;
+    _setUpAria(): void;
+    _score(password: string): number;
+    _level_(score: number): StrengthLevel | null;
+    _render(level: StrengthLevel | null): void;
+}
+export default Strength;

package/dist/types/src/switch-icon.d.ts

@@ -1 +1,32 @@
-declare const switchesTriggerList: HTMLElement[];
+/**
+ * --------------------------------------------------------------------------
+ * Tabler switch-icon.ts
+ * Licensed under MIT (https://github.com/tabler/tabler/blob/dev/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import BaseComponent from './bootstrap/base-component';
+import type { ElementSelector } from './bootstrap/types';
+type ComponentConfig = Record<string, never>;
+type ComponentConfigInput = Record<string, unknown>;
+/**
+ * Class definition
+ *
+ * A toggle button that swaps between two icons. The state is the `active`
+ * class, mirrored in `aria-pressed`. The element is the `.switch-icon` itself,
+ * or a button (e.g. `.btn-action`) wrapping one: the classes then go on the
+ * inner `.switch-icon` and the ARIA state stays on the button.
+ */
+declare class SwitchIcon extends BaseComponent {
+    #private;
+    _element: HTMLElement;
+    _config: ComponentConfig;
+    constructor(element: ElementSelector, config?: ComponentConfigInput);
+    static get Default(): ComponentConfig;
+    static get DefaultType(): Record<keyof ComponentConfig, string>;
+    static get NAME(): string;
+    get isActive(): boolean;
+    get isLoading(): boolean;
+    toggle(force?: boolean): void;
+    dispose(): void;
+}
+export default SwitchIcon;

package/dist/types/src/theme-config.d.ts

@@ -7,14 +7,16 @@
  */
 export declare const themeDefaults: {
     readonly theme: 'auto';
-    readonly 'theme-base': 'gray';
+    readonly 'theme-base': 'neutral';
     readonly 'theme-font': 'sans-serif';
     readonly 'theme-primary': 'blue';
     readonly 'theme-radius': '1';
     readonly layout: 'default';
     readonly navbar: 'default';
     readonly 'navbar-position': 'horizontal';
+    readonly 'navbar-style': 'default';
     readonly 'navbar-theme': 'default';
+    readonly 'offcanvas-style': 'default';
     readonly sidebar: 'default';
 };
 export type ThemeKey = keyof typeof themeDefaults;

package/dist/types/tabler.d.ts

@@ -1,5 +1,8 @@
 import './src/autosize';
+import './src/clipboard';
+import './src/confetti';
 import './src/countup';
+import './src/datepicker';
 import './src/input-mask';
 import './src/dropdown';
 import './src/sidebar';
@@ -9,5 +12,19 @@ import './src/switch-icon';
 import './src/tab';
 import './src/toast';
 import './src/sortable';
+import './src/otp-input';
+import './src/sparkline';
+import './src/strength';
 export * from './src/bootstrap';
-export * as tabler from './src/tabler';
+export { default as Autosize } from './src/autosize';
+export { default as Clipboard } from './src/clipboard';
+export { default as Confetti } from './src/confetti';
+export { default as CountUp } from './src/countup';
+export { default as Datepicker } from './src/datepicker';
+export { default as InputMask } from './src/input-mask';
+export { default as OtpInput } from './src/otp-input';
+export { default as Sortable } from './src/sortable';
+export { default as Sparkline } from './src/sparkline';
+export { default as Strength } from './src/strength';
+export { default as SwitchIcon } from './src/switch-icon';
+export * as tabler from './src/deprecated';

package/js/src/autosize.ts

@@ -1,11 +1,145 @@
-// js-docs-start autosize-init
-const autosizeElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-bs-toggle="autosize"]')
+/**
+ * --------------------------------------------------------------------------
+ * Tabler autosize.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 { initAll } from './bootstrap/util/component-functions'
+import type { ElementSelector } from './bootstrap/types'
+
+type ComponentConfig = Record<string, never>
+
+type ComponentConfigInput = Record<string, unknown>
+
+/**
+ * Constants
+ */
+
+const NAME = 'autosize'
+const DATA_KEY = `bs.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_RESIZED = `resized${EVENT_KEY}`
+
+const SELECTOR_DATA_TOGGLE = `[data-bs-toggle="${NAME}"], [data-tblr-toggle="${NAME}"]`
+
+const Default: ComponentConfig = {}
 
-if (autosizeElements.length) {
-  autosizeElements.forEach(function (element: HTMLElement) {
-    if (window.autosize) {
-      window.autosize(element)
+const DefaultType: Record<keyof ComponentConfig, string> = {}
+
+/**
+ * Class definition
+ *
+ * Grows a textarea with its content and shrinks it back when text is removed.
+ * The height follows `scrollHeight`, so `rows` sets the starting height and
+ * `max-height` caps the growth, after which the field scrolls again.
+ */
+
+class Autosize extends BaseComponent {
+  declare _element: HTMLTextAreaElement
+  declare _config: ComponentConfig
+  _observer: ResizeObserver | null = null
+  _inlineStyle = ''
+  _width = 0
+  _onInput = (): void => this.update()
+
+  constructor(element: ElementSelector, config?: ComponentConfigInput) {
+    super(element, config)
+
+    if (!this._element) {
+      return
     }
-  })
+
+    this._inlineStyle = this._element.getAttribute('style') ?? ''
+    this._element.style.resize = 'none'
+    this._element.style.overflowY = 'hidden'
+
+    // `input` is not in EventHandler's list of native events, so it is bound
+    // directly.
+    this._element.addEventListener('input', this._onInput)
+
+    // Text wraps differently when the field changes width (a resized window,
+    // a collapsing sidebar), so the height is measured again then.
+    if (typeof ResizeObserver !== 'undefined') {
+      this._observer = new ResizeObserver(() => {
+        if (this._element.offsetWidth !== this._width) {
+          this._width = this._element.offsetWidth
+          this.update()
+        }
+      })
+      this._observer.observe(this._element)
+    }
+
+    this.update()
+  }
+
+  // Getters
+  static get Default(): ComponentConfig {
+    return Default
+  }
+
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
+    return DefaultType
+  }
+
+  static get NAME(): string {
+    return NAME
+  }
+
+  // Public
+  update(): void {
+    const element = this._element
+    if (!element.isConnected || element.getClientRects().length === 0) {
+      return
+    }
+
+    // Collapsing the field to measure it can move the page; the scroll
+    // position is put back afterwards.
+    const { scrollTop } = document.documentElement
+    const style = getComputedStyle(element)
+    // 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 + extra}px`
+    element.style.height = height
+
+    // Past max-height the content no longer fits, so let the field scroll.
+    element.style.overflowY = element.scrollHeight > element.clientHeight ? 'auto' : 'hidden'
+    document.documentElement.scrollTop = scrollTop
+
+    if (height !== before) {
+      EventHandler.trigger(element, EVENT_RESIZED)
+    }
+  }
+
+  dispose(): void {
+    this._element.removeEventListener('input', this._onInput)
+    this._observer?.disconnect()
+    if (this._inlineStyle) {
+      this._element.setAttribute('style', this._inlineStyle)
+    } else {
+      this._element.removeAttribute('style')
+    }
+
+    super.dispose()
+  }
 }
+
+/**
+ * Data API implementation
+ */
+
+// js-docs-start autosize-init
+initAll(SELECTOR_DATA_TOGGLE, Autosize)
 // js-docs-end autosize-init
+
+export default Autosize

package/js/src/bootstrap/alert.ts

@@ -8,6 +8,8 @@
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler.js'
 import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin } from './util/index.js'
+import type { JQueryCollectionLike } from './types'
 
 const NAME = 'alert'
 const DATA_KEY = 'bs.alert'
@@ -41,8 +43,26 @@ class Alert extends BaseComponent {
     EventHandler.trigger(this._element, EVENT_CLOSED)
     this.dispose()
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Alert.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](this)
+    })
+  }
 }
 
 enableDismissTrigger(Alert, 'close')
 
+defineJQueryPlugin(Alert)
+
 export default Alert

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 {
@@ -58,7 +68,7 @@ class BaseComponent extends Config {
   }
 
   static getOrCreateInstance(element: ElementSelector, config: ComponentConfig = {}): BaseComponent {
-    return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
+    return this.getInstance(element) || new this(element, typeof config === 'object' ? config : undefined)
   }
 
   static get VERSION(): string {

package/js/src/bootstrap/button.ts

@@ -7,6 +7,8 @@
 
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler.js'
+import { defineJQueryPlugin } from './util/index.js'
+import type { JQueryCollectionLike } from './types'
 
 const NAME = 'button'
 const DATA_KEY = 'bs.button'
@@ -18,6 +20,8 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"], [data-tblr-toggle="butt
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
 class Button extends BaseComponent {
+  declare _element: HTMLElement
+
   static get NAME(): string {
     return NAME
   }
@@ -25,6 +29,16 @@ class Button extends BaseComponent {
   toggle(): void {
     this._element.setAttribute('aria-pressed', String(this._element.classList.toggle(CLASS_NAME_ACTIVE)))
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Button.getOrCreateInstance(this) as Button
+
+      if (config === 'toggle') {
+        data.toggle()
+      }
+    })
+  }
 }
 
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, (event: Event) => {
@@ -39,4 +53,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, (event: Ev
   data.toggle()
 })
 
+defineJQueryPlugin(Button)
+
 export default Button