slim-select 2.8.1 → 2.9.0

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

@@ -0,0 +1,160 @@
+/**
+ * @jest-environment jsdom
+ */
+
+'use strict'
+
+import { describe, expect, test } from '@jest/globals'
+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 = jest.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 = jest.fn()
+      const debounced_function = debounce(callback, 100)
+      debounced_function()
+
+      await new Promise((r) => setTimeout(r, 50))
+      expect(callback).not.toHaveBeenCalled()
+
+      await new Promise((r) => setTimeout(r, 50))
+      expect(callback).toHaveBeenCalled()
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('debounce calls function after lower timeout', async () => {
+      const callback = jest.fn()
+      const debounced_function = debounce(callback, 10)
+      debounced_function()
+
+      await new Promise((r) => setTimeout(r, 5))
+      expect(callback).not.toHaveBeenCalled()
+
+      await new Promise((r) => setTimeout(r, 5))
+      expect(callback).toHaveBeenCalled()
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('debounce respects inmediate setting', () => {
+      const callback = jest.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 = jest.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

@@ -3,7 +3,7 @@ export function generateID(): string {
   return Math.random().toString(36).substring(2, 10)
 }
 
-export function hasClassInTree(element: HTMLElement, className: string) {
+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)) {
@@ -51,20 +51,11 @@ export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50,
   }
 }
 
-// reverseDebounce will call the function on the first call and then debounce
-function reverseDebounce<T extends (...args: any[]) => void>(func: T, timeout: number): T {
-  let timer: NodeJS.Timeout | null = null
-  return function (...args: any[]): void {
-    if (!timer) func(...args)
-    timer = setTimeout(() => (timer = null), timeout)
-  } as T
-}
-
-export function isEqual(a: any, b: any) {
+export function isEqual(a: any, b: any): boolean {
   return JSON.stringify(a) === JSON.stringify(b)
 }
 
-export function kebabCase(str: string) {
+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
 }

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

@@ -3,19 +3,112 @@
  */
 
 'use strict'
+
 import { describe, expect, test } from '@jest/globals'
 import SlimSelect from './'
 import { OptionOptional } from './store'
 import { Config } from './index'
 
 describe('SlimSelect Module', () => {
-  test('constructor', () => {
+  let slim: SlimSelect
+
+  beforeEach(() => {
     document.body.innerHTML = '<select id="test"></select>'
 
-    let slimSelect = new SlimSelect({
-      select: '#test',
+    slim = new SlimSelect({
+      select: '#test'
     })
-    expect(slimSelect).toBeInstanceOf(SlimSelect)
+  })
+
+  describe('constructor', () => {
+    test('missing select element throws error', () => {
+      const errorMock = jest.fn()
+      const slim = new SlimSelect({ select: '#invalid', events: { error: errorMock } })
+
+      expect(slim.select).toBeUndefined()
+      expect(slim.store).toBeUndefined()
+      expect(slim.render).toBeUndefined()
+      expect(errorMock).toHaveBeenCalled()
+      expect(errorMock.mock.calls[0][0].message).toBe('Could not find select element')
+    })
+
+    test('invalid element throws error', () => {
+      document.body.innerHTML = '<div id="invalid"></div>'
+
+      const errorMock = jest.fn()
+      const slim = new SlimSelect({ select: '#invalid', events: { error: errorMock } })
+
+      expect(slim.select).toBeUndefined()
+      expect(slim.store).toBeUndefined()
+      expect(slim.render).toBeUndefined()
+      expect(errorMock).toHaveBeenCalled()
+      expect(errorMock.mock.calls[0][0].message).toBe('Element isnt of type select')
+    })
+
+    test('valid minimal constructor with query string', () => {
+      document.body.innerHTML = '<select id="test"></select>'
+
+      const slimSelect = new SlimSelect({
+        select: '#test'
+      })
+
+      expect(slimSelect).toBeInstanceOf(SlimSelect)
+    })
+
+    test('valid minimal constructor with HTML element', () => {
+      document.body.innerHTML = '<select id="test"></select>'
+
+      const slimSelect = new SlimSelect({
+        select: document.getElementById('test') as Element
+      })
+
+      expect(slimSelect).toBeInstanceOf(SlimSelect)
+    })
+
+    test('disabled gets applied correctly', () => {
+      document.body.innerHTML = '<select id="test"></select>'
+
+      const slim = new SlimSelect({
+        select: document.getElementById('test') as Element,
+        settings: {
+          disabled: true
+        }
+      })
+
+      expect(slim.settings.disabled).toBe(true)
+    })
+  })
+
+  test('enable', () => {
+    slim.settings.disabled = true
+
+    const selectEnableMock = jest.fn()
+    const renderEnableMock = jest.fn()
+
+    slim.select.enable = selectEnableMock
+    slim.render.enable = renderEnableMock
+
+    slim.enable()
+
+    expect(slim.settings.disabled).toBe(false)
+    expect(selectEnableMock).toHaveBeenCalled()
+    expect(renderEnableMock).toHaveBeenCalled()
+  })
+
+  test('disable', () => {
+    slim.settings.disabled = false
+
+    const selectDisableMock = jest.fn()
+    const renderDisableMock = jest.fn()
+
+    slim.select.disable = selectDisableMock
+    slim.render.disable = renderDisableMock
+
+    slim.disable()
+
+    expect(slim.settings.disabled).toBe(true)
+    expect(selectDisableMock).toHaveBeenCalled()
+    expect(renderDisableMock).toHaveBeenCalled()
   })
 
   test('multiple - do not render deselect all with no selected options', () => {
@@ -30,25 +123,25 @@ describe('SlimSelect Module', () => {
       {
         id: '1',
         value: '1',
-        text: 'One',
+        text: 'One'
       },
       {
         id: '2',
         value: '2',
-        text: 'Two',
+        text: 'Two'
       },
       {
         id: '3',
         value: '3',
-        text: 'Three',
-      },
+        text: 'Three'
+      }
     ]
     const config: Config = {
       select: '#test',
       settings: {
-        allowDeselect: true,
+        allowDeselect: true
       },
-      data: options,
+      data: options
     }
 
     let slimSelect = new SlimSelect(config)
@@ -69,26 +162,26 @@ describe('SlimSelect Module', () => {
         id: '1',
         value: '1',
         text: 'One',
-        selected: true,
+        selected: true
       },
       {
         id: '2',
         value: '2',
         text: 'Two',
-        selected: true,
+        selected: true
       },
       {
         id: '3',
         value: '3',
-        text: 'Three',
-      },
+        text: 'Three'
+      }
     ]
     const config: Config = {
       select: '#test',
       settings: {
-        allowDeselect: true,
+        allowDeselect: true
       },
-      data: options,
+      data: options
     }
 
     let slimSelect = new SlimSelect(config)

package/src/slim-select/index.ts

@@ -1,3 +1,4 @@
+import CssClasses from './classes'
 import { debounce, hasClassInTree, isEqual } from './helpers'
 import Render from './render'
 import Select from './select'
@@ -8,13 +9,16 @@ export interface Config {
   select: string | Element
   data?: DataArrayPartial
   settings?: SettingsPartial
+  cssClasses?: Partial<CssClasses>
   events?: Events
 }
 
 export interface Events {
   search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
   searchFilter?: (option: Option, search: string) => boolean
-  addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | null | undefined
+  addable?: (
+    value: string
+  ) => Promise<OptionOptional | string> | OptionOptional | string | false | null | undefined | Error
   beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void
   afterChange?: (newVal: Option[]) => void
   beforeOpen?: () => void
@@ -29,6 +33,7 @@ export default class SlimSelect {
 
   // Classes
   public settings!: Settings
+  public cssClasses!: CssClasses
   public select!: Select
   public store!: Store
   public render!: Render
@@ -45,7 +50,7 @@ export default class SlimSelect {
     beforeOpen: undefined,
     afterOpen: undefined,
     beforeClose: undefined,
-    afterClose: undefined,
+    afterClose: undefined
   } as Events
 
   constructor(config: Config) {
@@ -74,6 +79,9 @@ export default class SlimSelect {
     // Set settings
     this.settings = new Settings(config.settings)
 
+    // Set CSS classes
+    this.cssClasses = new CssClasses(config.cssClasses)
+
     // Set events
     const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose']
     for (const key in config.events) {
@@ -102,9 +110,9 @@ export default class SlimSelect {
     this.select.hideUI() // Hide the original select element
 
     // Add select listeners
-    this.select.onValueChange = (values: string[]) => {
+    this.select.onValueChange = (options: Option[]) => {
       // Run set selected from the values given
-      this.setSelected(values)
+      this.setSelected(options.map((option) => option.id))
     }
     this.select.onClassChange = (classes: string[]) => {
       // Update settings with new class
@@ -128,7 +136,7 @@ export default class SlimSelect {
     // Set store class
     this.store = new Store(
       this.settings.isMultiple ? 'multiple' : 'single',
-      config.data ? config.data : this.select.getData(),
+      config.data ? config.data : this.select.getData()
     )
 
     // If data is passed update the original select element
@@ -145,11 +153,11 @@ export default class SlimSelect {
       addOption: this.addOption.bind(this),
       search: this.search.bind(this),
       beforeChange: this.events.beforeChange,
-      afterChange: this.events.afterChange,
+      afterChange: this.events.afterChange
     }
 
     // Setup render class
-    this.render = new Render(this.settings, this.store, renderCallbacks)
+    this.render = new Render(this.settings, this.cssClasses, this.store, renderCallbacks)
     this.render.renderValues()
     this.render.renderOptions(this.store.getData())
 
@@ -245,15 +253,36 @@ export default class SlimSelect {
   }
 
   public getSelected(): string[] {
-    return this.store.getSelected()
+    let options = this.store.getSelectedOptions()
+    if (this.settings.keepOrder) {
+      options = this.store.selectedOrderOptions(options)
+    }
+    return options.map((option) => option.value)
   }
 
-  public setSelected(value: string | string[], runAfterChange = true): void {
+  // Will take in a string or array of strings and set the selected by either the id or value
+  public setSelected(values: string | string[], runAfterChange = true): void {
     // Get original selected values
     const selected = this.store.getSelected()
+    const options = this.store.getDataOptions()
+    values = Array.isArray(values) ? values : [values]
+    const ids = []
+
+    // for back-compatibility support both, set by id and set by value
+    for (const value of values) {
+      if (options.find((option) => option.id == value)) {
+        ids.push(value)
+        continue
+      }
+
+      // if option with given id is not found try to search by value
+      for (const option of options.filter((option) => option.value == value)) {
+        ids.push(option.id)
+      }
+    }
 
     // Update the store
-    this.store.setSelectedBy('value', Array.isArray(value) ? value : [value])
+    this.store.setSelectedBy('id', ids)
     const data = this.store.getData()
 
     // Update the select element
@@ -315,7 +344,7 @@ export default class SlimSelect {
     this.render.open()
 
     // Focus on input field only if search is enabled
-    if (this.settings.showSearch) {
+    if (this.settings.showSearch && this.settings.focusSearch) {
       this.render.searchFocus()
     }
 
@@ -402,7 +431,7 @@ export default class SlimSelect {
     if (!this.events.search) {
       // If value is empty then render all options
       this.render.renderOptions(
-        value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter!),
+        value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter!)
       )
       return
     }