slim-select 3.4.2 → 3.5.0

package/src/slim-select/classes.test.ts

@@ -1,73 +0,0 @@
-'use strict'
-
-import { describe, expect, test } from 'vitest'
-import CssClasses from './classes'
-
-const defaultClasses: { [key: string]: string } = {
-  main: 'ss-main',
-  placeholder: 'ss-placeholder',
-  values: 'ss-values',
-  single: 'ss-single',
-  max: 'ss-max',
-  value: 'ss-value',
-  valueText: 'ss-value-text',
-  valueDelete: 'ss-value-delete',
-  valueOut: 'ss-value-out',
-  deselect: 'ss-deselect',
-  deselectPath: 'M10,10 L90,90 M10,90 L90,10',
-  arrow: 'ss-arrow',
-  arrowClose: 'M10,30 L50,70 L90,30',
-  arrowOpen: 'M10,70 L50,30 L90,70',
-  content: 'ss-content',
-  contentOpen: 'ss-open',
-  dirAbove: 'ss-dir-above',
-  dirBelow: 'ss-dir-below',
-  search: 'ss-search',
-  searchHighlighter: 'ss-search-highlight',
-  searching: 'ss-searching',
-  addable: 'ss-addable',
-  addablePath: 'M50,10 L50,90 M10,50 L90,50',
-  list: 'ss-list',
-  optgroup: 'ss-optgroup',
-  optgroupLabel: 'ss-optgroup-label',
-  optgroupLabelText: 'ss-optgroup-label-text',
-  optgroupActions: 'ss-optgroup-actions',
-  optgroupSelectAll: 'ss-selectall',
-  optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
-  optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
-  optgroupClosable: 'ss-closable',
-  option: 'ss-option',
-  optionDelete: 'M10,10 L90,90 M10,90 L90,10',
-  highlighted: 'ss-highlighted',
-  mainOpen: 'ss-open',
-  close: 'ss-close',
-  selected: 'ss-selected',
-  error: 'ss-error',
-  disabled: 'ss-disabled',
-  hide: 'ss-hide'
-}
-
-describe('CssClasses module', () => {
-  test('empty constructor returns default classes', () => {
-    // We test the traditional classes here. Since old versions of slim-select didn't allow CSS class overrides, users
-    // may have written their CSS to match those classes, which means we should never change them in the library.
-
-    // Convert to unknown and then to custom object to prevent TS from throwing errors
-    const classes = new CssClasses() as unknown as { [key: string]: string }
-    Object.keys(defaultClasses).forEach((key) => {
-      expect(classes[key]).toBe(defaultClasses[key])
-    })
-  })
-
-  test('classes can be added via the constructor', () => {
-    const classesWithOverride = JSON.parse(JSON.stringify(defaultClasses))
-    classesWithOverride['main'] = 'ss-main new-main'
-    classesWithOverride['mainOpen'] = 'ss-open new-open'
-
-    // Convert to unknown and then to custom object to prevent TS from throwing errors
-    const classes = new CssClasses({ main: 'new-main', mainOpen: 'new-open' }) as unknown as { [key: string]: string }
-    Object.keys(classesWithOverride).forEach((key) => {
-      expect(classes[key]).toBe(classesWithOverride[key])
-    })
-  })
-})

package/src/slim-select/classes.ts

@@ -1,117 +0,0 @@
-export default class CssClasses {
-  public main: string
-  // Placeholder
-  public placeholder: string
-
-  // Values
-  public values: string
-  public single: string
-  public max: string
-  public value: string
-  public valueText: string
-  public valueDelete: string
-  public valueOut: string
-
-  // Deselect
-  public deselect: string
-  public deselectPath: string // Not a class but whatever
-
-  // Arrow
-  public arrow: string
-  public arrowClose: string // Not a class but whatever
-  public arrowOpen: string // Not a class but whatever
-
-  // Content
-  public content: string
-  public contentOpen: string
-  public dirAbove: string
-  public dirBelow: string
-
-  // Search
-  public search: string
-  public searchHighlighter: string
-  public searching: string
-  public addable: string
-  public addablePath: string // Not a class but whatever
-
-  // List optgroups/options
-  public list: string
-
-  // Optgroup
-  public optgroup: string
-  public optgroupLabel: string
-  public optgroupLabelText: string
-  public optgroupActions: string
-  public optgroupSelectAll: string // optgroup select all
-  public optgroupSelectAllBox: string // Not a class but whatever
-  public optgroupSelectAllCheck: string // Not a class but whatever
-  public optgroupClosable: string
-
-  // Option
-  public option: string
-  public optionDelete: string // Not a class but whatever
-  public highlighted: string
-
-  // Misc
-  public mainOpen: string
-  public close: string
-  public selected: string
-  public error: string
-  public disabled: string
-  public hide: string
-
-  constructor(classes?: Partial<CssClasses>) {
-    if (!classes) {
-      classes = {}
-    }
-
-    let join = (a = '', b = '') => `${a} ${b}`.trim()
-
-    this.main = join('ss-main', classes.main)
-    this.placeholder = join('ss-placeholder', classes.placeholder)
-    this.values = join('ss-values', classes.values)
-    this.single = join('ss-single', classes.single)
-    this.max = join('ss-max', classes.max)
-    this.value = join('ss-value', classes.value)
-    this.valueText = join('ss-value-text', classes.valueText)
-    this.valueDelete = join('ss-value-delete', classes.valueDelete)
-    this.valueOut = join('ss-value-out', classes.valueOut)
-
-    this.deselect = join('ss-deselect', classes.deselect)
-    this.deselectPath = classes.deselectPath || 'M10,10 L90,90 M10,90 L90,10'
-    this.arrow = join('ss-arrow', classes.arrow)
-    this.arrowClose = classes.arrowClose || 'M10,30 L50,70 L90,30'
-    this.arrowOpen = classes.arrowOpen || 'M10,70 L50,30 L90,70'
-    this.content = join('ss-content', classes.content)
-    this.contentOpen = join('ss-open', classes.contentOpen)
-    this.dirAbove = join('ss-dir-above', classes.dirAbove)
-    this.dirBelow = join('ss-dir-below', classes.dirBelow)
-    this.search = join('ss-search', classes.search)
-    this.searchHighlighter = join('ss-search-highlight', classes.searchHighlighter)
-    this.searching = join('ss-searching', classes.searching)
-    this.addable = join('ss-addable', classes.addable)
-    this.addablePath = classes.addablePath || 'M50,10 L50,90 M10,50 L90,50'
-    this.list = join('ss-list', classes.list)
-    this.optgroup = join('ss-optgroup', classes.optgroup)
-    this.optgroupLabel = join('ss-optgroup-label', classes.optgroupLabel)
-    this.optgroupLabelText = join('ss-optgroup-label-text', classes.optgroupLabelText)
-    this.optgroupActions = join('ss-optgroup-actions', classes.optgroupActions)
-    this.optgroupSelectAll = join('ss-selectall', classes.optgroupSelectAll)
-    this.optgroupSelectAllBox = classes.optgroupSelectAllBox || 'M60,10 L10,10 L10,90 L90,90 L90,50'
-    this.optgroupSelectAllCheck = classes.optgroupSelectAllCheck || 'M30,45 L50,70 L90,10'
-    this.optgroupClosable = join('ss-closable', classes.optgroupClosable)
-    this.option = join('ss-option', classes.option)
-    this.optionDelete = classes.optionDelete || 'M10,10 L90,90 M10,90 L90,10'
-    this.highlighted = join('ss-highlighted', classes.highlighted)
-    this.mainOpen = join('ss-open', classes.mainOpen)
-    this.close = join('ss-close', classes.close)
-    this.selected = join('ss-selected', classes.selected)
-    this.error = join('ss-error', classes.error)
-    this.disabled = join('ss-disabled', classes.disabled)
-    this.hide = join('ss-hide', classes.hide)
-  }
-
-  public getFirst(name: keyof Omit<CssClasses, 'getFirst'>): string {
-    return this[name].split(' ')[0]
-  }
-}

package/src/slim-select/helpers.test.ts

@@ -1,162 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-'use strict'
-
-import { describe, expect, test, vi } from 'vitest'
-import { hasClassInTree, debounce, isEqual, kebabCase } from './helpers'
-
-describe('helpers module', () => {
-  describe('hasClassInTree', () => {
-    test('single element does not have class', () => {
-      const element = document.createElement('div')
-      element.className = 'invalid-class'
-
-      expect(hasClassInTree(element, 'test-class')).toBeNull()
-    })
-
-    test('single element has class', () => {
-      const element = document.createElement('div')
-      element.className = 'test-class'
-
-      expect(hasClassInTree(element, 'test-class')).toBe(element)
-
-      element.classList.add('class-2', 'class-3')
-      expect(hasClassInTree(element, 'test-class')).toBe(element)
-    })
-
-    test('single element has class as data id', () => {
-      const element = document.createElement('div')
-      element.dataset.id = 'test-class'
-
-      expect(hasClassInTree(element, 'test-class')).toBe(element)
-
-      element.classList.add('class-2', 'class-3')
-      expect(hasClassInTree(element, 'test-class')).toBe(element)
-    })
-
-    test('parent element does not have class', () => {
-      const element = document.createElement('div')
-      element.className = 'invalid-class'
-      const child = document.createElement('div')
-      element.appendChild(child)
-
-      expect(hasClassInTree(child, 'test-class')).toBeNull()
-    })
-
-    test('parent element has class', () => {
-      const element = document.createElement('div')
-      element.className = 'test-class'
-      const child = document.createElement('div')
-      element.appendChild(child)
-
-      expect(hasClassInTree(child, 'test-class')).toBe(element)
-
-      element.classList.add('class-2', 'class-3')
-      expect(hasClassInTree(child, 'test-class')).toBe(element)
-    })
-
-    test('parent element has class as data id', () => {
-      const element = document.createElement('div')
-      element.dataset.id = 'test-class'
-
-      const child = document.createElement('div')
-      element.appendChild(child)
-
-      expect(hasClassInTree(child, 'test-class')).toBe(element)
-
-      element.classList.add('class-2', 'class-3')
-      expect(hasClassInTree(child, 'test-class')).toBe(element)
-    })
-  })
-
-  describe('debounce', () => {
-    test('debounce calls function after default timeout', async () => {
-      const callback = vi.fn()
-      const debounced_function = debounce(callback)
-      debounced_function()
-
-      await new Promise((r) => setTimeout(r, 100))
-
-      expect(callback).toHaveBeenCalled()
-      expect(callback).toHaveBeenCalledTimes(1)
-    })
-
-    test('debounce calls function after higher timeout', async () => {
-      const callback = vi.fn()
-      const debounced_function = debounce(callback, 100)
-      debounced_function()
-
-      await new Promise((r) => setTimeout(r, 50))
-      expect(callback).not.toHaveBeenCalled()
-
-      // Wait a bit longer to account for CI timing variations
-      await new Promise((r) => setTimeout(r, 100))
-      expect(callback).toHaveBeenCalled()
-      expect(callback).toHaveBeenCalledTimes(1)
-    })
-
-    test('debounce calls function after lower timeout', async () => {
-      const callback = vi.fn()
-      const debounced_function = debounce(callback, 10)
-      debounced_function()
-
-      await new Promise((r) => setTimeout(r, 5))
-      expect(callback).not.toHaveBeenCalled()
-
-      // Wait a bit longer to account for CI timing variations
-      await new Promise((r) => setTimeout(r, 10))
-      expect(callback).toHaveBeenCalled()
-      expect(callback).toHaveBeenCalledTimes(1)
-    })
-
-    test('debounce respects inmediate setting', () => {
-      const callback = vi.fn()
-      const debounced_function = debounce(callback, 1000, true)
-      debounced_function()
-
-      expect(callback).toHaveBeenCalled()
-      expect(callback).toHaveBeenCalledTimes(1)
-    })
-
-    test('debounce respects order of calls', async () => {
-      const callback = vi.fn(() => {})
-      const debounced_function: (a: number) => void = debounce(callback)
-      debounced_function(0)
-      debounced_function(1)
-
-      await new Promise((r) => setTimeout(r, 50))
-      expect(callback).toHaveBeenCalledTimes(1)
-      expect(callback.mock.calls[0]).toStrictEqual([1])
-    })
-  })
-
-  describe('isEqual', () => {
-    test('different objects are not equal', () => {
-      expect(isEqual({ a: 1 }, { b: 1 })).toBe(false)
-    })
-
-    test('equal objects are equal', () => {
-      expect(isEqual({ a: 1 }, { a: 1 })).toBe(true)
-    })
-
-    test('more complex objects are equal', () => {
-      expect(isEqual({ a: 1, b: { c: 'asdf' } }, { a: 1, b: { c: 'asdf' } })).toBe(true)
-    })
-  })
-
-  describe('kebabCase', () => {
-    test('kebab-case string', () => {
-      expect(kebabCase('kebab-case')).toBe('kebab-case')
-    })
-
-    test('camelCase string', () => {
-      expect(kebabCase('camelCase')).toBe('camel-case')
-    })
-
-    test('string with initial uppercase', () => {
-      expect(kebabCase('UpperCase')).toBe('upper-case')
-    })
-  })
-})

package/src/slim-select/helpers.ts

@@ -1,61 +0,0 @@
-// Generate an 8 character random string
-export function generateID(): string {
-  return Math.random().toString(36).substring(2, 10)
-}
-
-export function hasClassInTree(element: HTMLElement, className: string): HTMLElement | null {
-  function hasClass(e: HTMLElement, c: string) {
-    // If the element has the class return element
-    if (c && e && e.classList && e.classList.contains(c)) {
-      return e
-    }
-
-    // If the element has a dataset id of the class return element
-    if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
-      return e
-    }
-
-    return null
-  }
-
-  function parentByClass(e: any, c: string): any {
-    if (!e || e === (document as any)) {
-      return null
-    } else if (hasClass(e, c)) {
-      return e
-    } else {
-      return parentByClass(e.parentNode, c)
-    }
-  }
-
-  return hasClass(element, className) || parentByClass(element, className)
-}
-
-// debounce will call the last requested function after the wait time
-export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50, immediate = false): () => void {
-  let timeout: any
-  return function (this: any, ...args: any[]): void {
-    const context = self
-    const later = () => {
-      timeout = null
-      if (!immediate) {
-        func.apply(context, args)
-      }
-    }
-    const callNow = immediate && !timeout
-    clearTimeout(timeout)
-    timeout = setTimeout(later, wait)
-    if (callNow) {
-      func.apply(context, args)
-    }
-  }
-}
-
-export function isEqual(a: any, b: any): boolean {
-  return JSON.stringify(a) === JSON.stringify(b)
-}
-
-export function kebabCase(str: string): string {
-  const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase())
-  return str[0] === str[0].toUpperCase() ? result.substring(1) : result
-}