@tabler/core 1.5.1 → 1.6.1

package/js/src/strength.ts

@@ -0,0 +1,290 @@
+/**
+ * --------------------------------------------------------------------------
+ * Tabler strength.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 { getElement } from './bootstrap/util/index'
+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>
+
+/**
+ * Constants
+ */
+
+const NAME = 'strength'
+const DATA_KEY = `bs.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_CHANGE = `change${EVENT_KEY}`
+
+const CLASS_NAME_ACTIVE = 'active'
+
+const SELECTOR_DATA_STRENGTH = `[data-bs-${NAME}], [data-tblr-${NAME}]`
+const SELECTOR_SEGMENT = `.${NAME}-segment`
+const SELECTOR_TEXT = `.${NAME}-text`
+const SELECTOR_PASSWORD = 'input[type="password"]'
+
+const LEVELS: StrengthLevel[] = ['weak', 'fair', 'good', 'strong']
+
+const Default: ComponentConfig = {
+  input: null,
+  minLength: 8,
+  messages: {
+    weak: 'Weak',
+    fair: 'Fair',
+    good: 'Good',
+    strong: 'Strong',
+  },
+  weights: {
+    minLength: 1,
+    extraLength: 1,
+    longPassword: 1,
+    lowercase: 1,
+    uppercase: 1,
+    numbers: 1,
+    special: 1,
+    multipleSpecial: 1,
+  },
+  thresholds: [2, 4, 6],
+  scorer: null,
+}
+
+const DefaultType: Record<keyof ComponentConfig, string> = {
+  input: '(string|null)',
+  minLength: 'number',
+  messages: 'object',
+  weights: 'object',
+  thresholds: 'array',
+  scorer: '(function|null)',
+}
+
+/**
+ * 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.
+ */
+
+class Strength extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
+  _input: HTMLInputElement | null = null
+  _segments: HTMLElement[] = []
+  _text: HTMLElement | null = null
+  // What the markup put in the label element: shown while the field is empty,
+  // so a form can keep its password rules there until a level replaces them.
+  _emptyText = ''
+  _level: StrengthLevel | null = null
+  _onInput = (): void => this.evaluate()
+
+  constructor(element: ElementSelector, config?: ComponentConfigInput) {
+    super(element, config)
+
+    if (!this._element) {
+      return
+    }
+
+    this._input = this._getInput()
+    this._segments = SelectorEngine.find(SELECTOR_SEGMENT, this._element)
+    this._text = this._getText()
+    this._emptyText = this._text?.textContent?.trim() ?? ''
+
+    this._setUpAria()
+
+    if (!this._input) {
+      return
+    }
+
+    this._input.addEventListener('input', this._onInput)
+    this.evaluate()
+  }
+
+  // Getters
+  static get Default(): ComponentConfig {
+    return Default
+  }
+
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
+    return DefaultType
+  }
+
+  static get NAME(): string {
+    return NAME
+  }
+
+  get level(): StrengthLevel | null {
+    return this._level
+  }
+
+  // Public
+  evaluate(): void {
+    if (!this._input) {
+      return
+    }
+
+    const password = this._input.value
+    const score = this._score(password)
+    const level = this._level_(score)
+
+    if (level === this._level) {
+      return
+    }
+
+    this._level = level
+    this._render(level)
+
+    // The password itself is never part of the payload.
+    EventHandler.trigger(this._element, EVENT_CHANGE, { strength: level, score })
+  }
+
+  dispose(): void {
+    this._input?.removeEventListener('input', this._onInput)
+    super.dispose()
+  }
+
+  // Private
+  _configAfterMerge(config: ComponentConfig): ComponentConfig {
+    // A partial `messages` or `weights` overrides only the keys it names.
+    return {
+      ...config,
+      messages: { ...Default.messages, ...config.messages },
+      weights: { ...Default.weights, ...config.weights },
+    }
+  }
+
+  _getInput(): HTMLInputElement | null {
+    const { input } = this._config
+    if (input) {
+      return getElement(input) as HTMLInputElement | null
+    }
+
+    // Without an explicit selector only the meter's own parent is searched.
+    // The nearest field before the meter wins, so a confirm-password field
+    // placed after it is never mistaken for the one being rated; a meter
+    // placed above its field falls back to the first field after it.
+    const parent = this._element.parentElement
+    const fields = parent ? (SelectorEngine.find(SELECTOR_PASSWORD, parent) as HTMLInputElement[]) : []
+    const precedingFields = fields.filter((field) => Boolean(field.compareDocumentPosition(this._element) & Node.DOCUMENT_POSITION_FOLLOWING))
+    return precedingFields[precedingFields.length - 1] ?? fields[0] ?? null
+  }
+
+  _getText(): HTMLElement | null {
+    const parent = this._element.parentElement
+    return parent ? SelectorEngine.findOne(SELECTOR_TEXT, parent) : null
+  }
+
+  _setUpAria(): void {
+    const element = this._element
+    element.setAttribute('role', 'progressbar')
+    element.setAttribute('aria-valuemin', '0')
+    element.setAttribute('aria-valuemax', String(LEVELS.length))
+    element.setAttribute('aria-valuenow', '0')
+
+    if (!element.hasAttribute('aria-label') && !element.hasAttribute('aria-labelledby')) {
+      element.setAttribute('aria-label', 'Password strength')
+    }
+
+    // The segments are decoration; the level is read from the meter itself.
+    for (const segment of this._segments) {
+      segment.setAttribute('aria-hidden', 'true')
+    }
+
+    this._text?.setAttribute('aria-live', 'polite')
+  }
+
+  _score(password: string): number {
+    if (!password) {
+      return 0
+    }
+
+    const { scorer, weights, minLength } = this._config
+    if (typeof scorer === 'function') {
+      return scorer(password)
+    }
+
+    const rules: [boolean, number | undefined][] = [
+      [password.length >= minLength, weights.minLength],
+      [password.length >= minLength + 4, weights.extraLength],
+      [password.length >= 16, weights.longPassword],
+      [/[a-z]/.test(password), weights.lowercase],
+      [/[A-Z]/.test(password), weights.uppercase],
+      [/\d/.test(password), weights.numbers],
+      [/[^\dA-Za-z]/.test(password), weights.special],
+      [(password.match(/[^\dA-Za-z]/g) ?? []).length > 1, weights.multipleSpecial],
+    ]
+
+    return rules.reduce((score, [passed, weight]) => score + (passed ? (weight ?? 0) : 0), 0)
+  }
+
+  // Trailing underscore: `_level` is the field holding the current value.
+  _level_(score: number): StrengthLevel | null {
+    if (score <= 0) {
+      return null
+    }
+
+    const index = this._config.thresholds.findIndex((threshold) => score <= threshold)
+    return LEVELS[index === -1 ? LEVELS.length - 1 : index] ?? null
+  }
+
+  _render(level: StrengthLevel | null): void {
+    const element = this._element
+    const index = level ? LEVELS.indexOf(level) : -1
+
+    // Emptied rather than removed: `data-bs-strength` is also the attribute
+    // the data API looks for, and an empty value matches no level in CSS.
+    element.dataset.bsStrength = level ?? ''
+
+    element.setAttribute('aria-valuenow', String(index + 1))
+    // No level means no spoken value: `aria-valuenow` of 0 says it already,
+    // and an invented word here could not be translated through `messages`.
+    if (level) {
+      element.setAttribute('aria-valuetext', this._config.messages[level] ?? level)
+    } else {
+      element.removeAttribute('aria-valuetext')
+    }
+
+    // The segments are filled in proportion, so a meter with three or five of
+    // them works as well as the usual four.
+    const filled = level ? Math.ceil(((index + 1) / LEVELS.length) * this._segments.length) : 0
+    for (const [position, segment] of this._segments.entries()) {
+      segment.classList.toggle(CLASS_NAME_ACTIVE, position < filled)
+    }
+
+    if (this._text) {
+      this._text.textContent = level ? (this._config.messages[level] ?? '') : this._emptyText
+      this._text.dataset.bsStrength = level ?? ''
+    }
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+// js-docs-start strength-init
+initAll(SELECTOR_DATA_STRENGTH, Strength)
+// js-docs-end strength-init
+
+export default Strength

package/js/src/switch-icon.ts

@@ -1,11 +1,182 @@
+/**
+ * --------------------------------------------------------------------------
+ * Tabler switch-icon.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 = Record<string, never>
+
+type ComponentConfigInput = Record<string, unknown>
+
+/**
+ * Constants
+ */
+
+const NAME = 'switch-icon'
+const DATA_KEY = `bs.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_CLICK = `click${EVENT_KEY}`
+const EVENT_TOGGLE = `toggle${EVENT_KEY}`
+const EVENT_CHANGE = `change${EVENT_KEY}`
+
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_DISABLED = 'disabled'
+const CLASS_NAME_LOADING = 'switch-icon-loading'
+
+const SELECTOR_SWITCH_ICON = '.switch-icon'
+const SELECTOR_DATA_TOGGLE = `[data-bs-toggle="${NAME}"], [data-tblr-toggle="${NAME}"]`
+
+const Default: ComponentConfig = {}
+
+const DefaultType: Record<keyof ComponentConfig, string> = {}
+
+/**
+ * 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.
+ */
+
+class SwitchIcon extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
+
+  #iconElement!: HTMLElement
+
+  constructor(element: ElementSelector, config?: ComponentConfigInput) {
+    super(element, config)
+
+    if (!this._element) {
+      return
+    }
+
+    this.#iconElement = this._element.matches(SELECTOR_SWITCH_ICON) ? this._element : (SelectorEngine.findOne(SELECTOR_SWITCH_ICON, this._element) ?? this._element)
+
+    if (!this._element.hasAttribute('aria-pressed')) {
+      this._element.setAttribute('aria-pressed', String(this.isActive))
+    }
+
+    // The button usually sits inside a clickable row or card; the click must
+    // not reach it.
+    EventHandler.on(this._element, EVENT_CLICK, (event: Event) => {
+      event.stopPropagation()
+
+      // `.disabled` only blocks the pointer; Enter and Space still fire a click
+      if (this._element.classList.contains(CLASS_NAME_DISABLED) || this._element.getAttribute('aria-disabled') === 'true') {
+        return
+      }
+
+      this.toggle()
+    })
+  }
+
+  // Getters
+  static get Default(): ComponentConfig {
+    return Default
+  }
+
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
+    return DefaultType
+  }
+
+  static get NAME(): string {
+    return NAME
+  }
+
+  get isActive(): boolean {
+    return this.#iconElement.classList.contains(CLASS_NAME_ACTIVE)
+  }
+
+  get isLoading(): boolean {
+    return this.#iconElement.classList.contains(CLASS_NAME_LOADING)
+  }
+
+  // Public
+  toggle(force?: boolean): void {
+    if (this.isLoading) {
+      return
+    }
+
+    const active = force ?? !this.isActive
+
+    // A listener can cancel with preventDefault(), or hand over a promise with
+    // wait(): the button shows a spinner until it settles and switches only
+    // when it resolves.
+    let pending: Promise<unknown> | undefined
+    const toggleEvent = EventHandler.trigger(this._element, EVENT_TOGGLE, {
+      active,
+      wait: (promise: Promise<unknown>) => {
+        pending = promise
+      },
+    })
+
+    if (toggleEvent?.defaultPrevented) {
+      return
+    }
+
+    if (!pending) {
+      this.#setActive(active)
+      return
+    }
+
+    this.#setLoading(true)
+    pending
+      .then(
+        () => this.#setActive(active),
+        () => undefined,
+      )
+      .finally(() => this.#setLoading(false))
+  }
+
+  dispose(): void {
+    // A wait() still pending must not leave the spinner on the button.
+    this.#setLoading(false)
+    super.dispose()
+  }
+
+  // Private
+  #setActive(active: boolean): void {
+    // A pending wait() may settle after dispose().
+    if (!this._element) {
+      return
+    }
+
+    this.#iconElement.classList.toggle(CLASS_NAME_ACTIVE, active)
+    this._element.setAttribute('aria-pressed', String(active))
+
+    EventHandler.trigger(this._element, EVENT_CHANGE, { active })
+  }
+
+  #setLoading(loading: boolean): void {
+    if (!this._element) {
+      return
+    }
+
+    this.#iconElement.classList.toggle(CLASS_NAME_LOADING, loading)
+    if (loading) {
+      this._element.setAttribute('aria-busy', 'true')
+    } else {
+      this._element.removeAttribute('aria-busy')
+    }
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
 // js-docs-start switch-icon-init
-const switchesTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="switch-icon"]'))
-switchesTriggerList.map(function (switchTriggerEl: HTMLElement) {
-  switchTriggerEl.addEventListener('click', (e: MouseEvent) => {
-    e.stopPropagation()
-
-    const active = switchTriggerEl.classList.toggle('active')
-    switchTriggerEl.setAttribute('aria-pressed', active ? 'true' : 'false')
-  })
-})
+initAll(SELECTOR_DATA_TOGGLE, SwitchIcon)
 // js-docs-end switch-icon-init
+
+export default SwitchIcon

package/js/src/tab.ts

@@ -1,18 +1,28 @@
 import { Tab } from './bootstrap'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start tab-init
 export const EnableActivationTabsFromLocationHash = (): void => {
   const locationHash: string = window.location.hash
 
-  if (locationHash) {
-    const tabsList: HTMLAnchorElement[] = [].slice.call(document.querySelectorAll<HTMLAnchorElement>('[data-bs-toggle="tab"]'))
-    const matchedTabs = tabsList.filter((tab: HTMLAnchorElement) => tab.hash === locationHash)
+  if (!locationHash) {
+    return
+  }
+
+  for (const tab of document.querySelectorAll<HTMLAnchorElement>('[data-bs-toggle="tab"], [data-tblr-toggle="tab"]')) {
+    if (tab.hash !== locationHash) {
+      continue
+    }
 
-    matchedTabs.map((tab: HTMLAnchorElement) => {
-      new Tab(tab).show()
-    })
+    // A tab link outside a .nav/.list-group has no parent to switch in;
+    // show() would throw and stop the rest of the bundle.
+    try {
+      ;(Tab.getOrCreateInstance(tab) as InstanceType<typeof Tab>).show()
+    } catch (error) {
+      console.error(error)
+    }
   }
 }
 
-EnableActivationTabsFromLocationHash()
+onDOMContentLoaded(EnableActivationTabsFromLocationHash)
 // js-docs-end tab-init

package/js/src/theme-config.ts

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

package/js/src/toast.ts

@@ -1,17 +1,25 @@
 import { Toast } from './bootstrap'
+import SelectorEngine from './bootstrap/dom/selector-engine'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start toast-init
-const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"]'))
-toastsTriggerList.map(function (toastTriggerEl: HTMLElement) {
-  const target = toastTriggerEl.getAttribute('data-bs-target')
-  if (target === null) {
-    return
-  }
-
-  const toastEl = new Toast(target)
+onDOMContentLoaded(() => {
+  for (const toastTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"], [data-tblr-toggle="toast"]')) {
+    try {
+      // A trigger whose target is missing is left alone instead of getting a
+      // click handler that throws.
+      const toastEl = SelectorEngine.getElementFromSelector(toastTriggerEl)
+      if (!toastEl) {
+        continue
+      }
 
-  toastTriggerEl.addEventListener('click', () => {
-    toastEl.show()
-  })
+      const toast = Toast.getOrCreateInstance(toastEl) as InstanceType<typeof Toast>
+      toastTriggerEl.addEventListener('click', () => {
+        toast.show()
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
 })
 // js-docs-end toast-init

package/js/src/tooltip.ts

@@ -1,13 +1,22 @@
 import { Tooltip } from './bootstrap'
+import Manipulator from './bootstrap/dom/manipulator'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start tooltip-init
-const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"]'))
-tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) {
-  const options = {
-    delay: { show: 50, hide: 50 },
-    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
-    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+// One element with a broken config must not stop the rest of the bundle, so
+// every instance is created on its own. `data-bs-delay` on the element wins
+// over the shorter default delay.
+onDOMContentLoaded(() => {
+  for (const tooltipTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"], [data-tblr-toggle="tooltip"]')) {
+    try {
+      const options = {
+        delay: Manipulator.getDataAttribute(tooltipTriggerEl, 'delay') ?? { show: 50, hide: 50 },
+        placement: Manipulator.getDataAttribute(tooltipTriggerEl, 'placement') ?? 'auto',
+      }
+      Tooltip.getOrCreateInstance(tooltipTriggerEl, options)
+    } catch (error) {
+      console.error(error)
+    }
   }
-  return new Tooltip(tooltipTriggerEl, options)
 })
 // js-docs-end tooltip-init

package/js/tabler-theme.ts

@@ -5,22 +5,44 @@
  */
 import { themeDefaults, type ThemeKey } from './src/theme-config'
 
-const params = new Proxy(new URLSearchParams(window.location.search), {
-  get: (searchParams: URLSearchParams, prop: string): string | null => searchParams.get(prop),
-})
+const params = new URLSearchParams(window.location.search)
 
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
 
+// A setting value is a short token: it ends up as a `data-bs-*` attribute on
+// <html> and in localStorage, so anything else from the URL is ignored.
+const VALUE_PATTERN = /^[a-z0-9-]{1,32}$/
+
+// Accessing localStorage throws when site data is blocked (Chrome "block all
+// cookies", Safari with storage disabled, partitioned third-party frames), so
+// every access is guarded and the switcher falls back to the page defaults.
+const storage = {
+  get(key: string): string | null {
+    try {
+      return localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  },
+  set(key: string, value: string): void {
+    try {
+      localStorage.setItem(key, value)
+    } catch {
+      // ignore: the choice applies to this page only
+    }
+  },
+}
+
 for (const key in themeDefaults) {
-  const param = params[key]
+  const param = params.get(key)
   let selectedValue: string
 
-  if (!!param) {
-    localStorage.setItem('tabler-' + key, param)
+  if (param && VALUE_PATTERN.test(param)) {
+    storage.set('tabler-' + key, param)
     selectedValue = param
   } else {
     // A stored choice wins; otherwise a server-rendered attribute is the starting value.
-    const storedTheme = localStorage.getItem('tabler-' + key)
+    const storedTheme = storage.get('tabler-' + key)
     const serverValue = document.documentElement.getAttribute('data-bs-' + key)
     selectedValue = storedTheme ?? serverValue ?? themeDefaults[key as ThemeKey]
   }
@@ -38,7 +60,7 @@ for (const key in themeDefaults) {
 
 prefersDark.addEventListener('change', (event) => {
   // No stored choice means the default, which is auto.
-  if ((localStorage.getItem('tabler-theme') ?? 'auto') === 'auto') {
+  if ((storage.get('tabler-theme') ?? 'auto') === 'auto') {
     if (event.matches) {
       document.documentElement.setAttribute('data-bs-theme', 'dark')
     } else {