@tabler/core 1.5.0 → 1.6.0

package/js/src/strength.ts

@@ -0,0 +1,277 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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 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
+  _getInput(): HTMLInputElement | null {
+    const { input } = this._config
+    if (input) {
+      return SelectorEngine.findOne(input) as HTMLInputElement | null
+    }
+
+    // Without an explicit selector only the meter's own parent is searched, so
+    // a form with several password fields cannot bind the wrong one.
+    const parent = this._element.parentElement
+    const fields = parent ? (SelectorEngine.find(SELECTOR_PASSWORD, parent) as HTMLInputElement[]) : []
+    return fields[fields.length - 1] ?? 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,167 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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))
+  }
+
+  // Private
+  #setActive(active: boolean): void {
+    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 {
+    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/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/tabler-theme.ts

@@ -5,14 +5,12 @@
  */
 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)')
 
 for (const key in themeDefaults) {
-  const param = params[key]
+  const param = params.get(key)
   let selectedValue: string
 
   if (!!param) {

package/js/tabler.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,9 +12,25 @@ import './src/switch-icon'
 import './src/tab'
 import './src/toast'
 import './src/sortable'
+import './src/otp-input'
+import './src/sparkline'
+import './src/strength'
 
 // Re-export everything from bootstrap.ts (single source of truth)
 export * from './src/bootstrap'
 
-// Re-export tabler namespace
-export * as tabler from './src/tabler'
+// Tabler's own components
+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'
+
+// deprecated(2.0): the `tabler` namespace with `getColor()`, `hexToRgba()` and `prefix`
+export * as tabler from './src/deprecated'