slim-select 2.6.0 → 2.7.0

package/src/slim-select/render.ts

@@ -6,7 +6,7 @@ export interface Callbacks {
   open: () => void
   close: () => void
   addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null
-  setSelected: (value: string[], runAfterChange: boolean) => void
+  setSelected: (value: string | string[], runAfterChange: boolean) => void
   addOption: (option: Option) => void
   search: (search: string) => void
   beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void
@@ -230,7 +230,10 @@ export default class Render {
 
     // Add id to data-id
     main.dataset.id = this.settings.id
-    main.id = this.settings.id
+    // main.id = this.settings.id+'-main' // Remove for now as it is not needed
+
+    // Add label
+    main.setAttribute('aria-label', this.settings.ariaLabel)
 
     // Set tabable to allow tabbing to the element
     main.tabIndex = 0
@@ -238,7 +241,7 @@ export default class Render {
     // Deal with keyboard events on the main div
     // This is to allow for normal selecting
     // when you may not have a search bar
-    main.onkeydown = (e: KeyboardEvent) => {
+    main.onkeydown = (e: KeyboardEvent): boolean => {
       // Convert above if else statemets to switch
       switch (e.key) {
         case 'ArrowUp':
@@ -261,10 +264,12 @@ export default class Render {
           this.callbacks.close()
           return false
       }
+
+      return false
     }
 
     // Add onclick for main div
-    main.onclick = (e: Event) => {
+    main.onclick = (e: Event): void => {
       // Dont do anything if disabled
       if (this.settings.disabled) {
         return
@@ -314,7 +319,11 @@ export default class Render {
           this.callbacks.setSelected([], false)
           this.updateDeselectAll()
         } else {
-          this.callbacks.setSelected([''], false)
+          // Get first option and set it as selected
+          const firstOption = this.store.getFirstOption()
+          const value = firstOption ? firstOption.value : ''
+
+          this.callbacks.setSelected(value, false)
         }
 
         // Check if we need to close the dropdown
@@ -324,7 +333,7 @@ export default class Render {
 
         // Run afterChange callback
         if (this.callbacks.afterChange) {
-          this.callbacks.afterChange(after)
+          this.callbacks.afterChange(this.store.getSelectedOptions())
         }
       }
     }
@@ -624,7 +633,7 @@ export default class Render {
 
     // Add id to data-id
     main.dataset.id = this.settings.id
-    main.id = this.settings.id
+    // main.id = this.settings.id + '-content' // Remove for now as it is not needed
 
     // Add search
     const search = this.searchDiv()
@@ -696,7 +705,7 @@ export default class Render {
     }, 100)
 
     // Deal with keyboard events on search input field
-    input.onkeydown = (e: KeyboardEvent) => {
+    input.onkeydown = (e: KeyboardEvent): boolean => {
       // Convert above if else statemets to switch
       switch (e.key) {
         case 'ArrowUp':
@@ -727,6 +736,8 @@ export default class Render {
           }
           return true
       }
+
+      return true // Allow normal typing
     }
 
     main.appendChild(input)
@@ -867,15 +878,34 @@ export default class Render {
 
     // If length is 1, highlight it
     if (options.length === 1) {
-      // Check if option doesnt already has highlighted class
+      // Check if option doesnt already have highlighted class
       if (!options[0].classList.contains(this.classes.highlighted)) {
         options[0].classList.add(this.classes.highlighted)
         return
       }
     }
 
+    // Loop through options and see if there are no highlighted ones
+    let highlighted = false
+    for (const o of options) {
+      if (o.classList.contains(this.classes.highlighted)) {
+        highlighted = true
+      }
+    }
+
+    // If no highlighted, see if any are selected and if so highlight selected first one
+    if (!highlighted) {
+      for (const o of options) {
+        if (o.classList.contains(this.classes.selected)) {
+          o.classList.add(this.classes.highlighted)
+          break
+        }
+      }
+    }
+
     // Loop through options and find the highlighted one
     for (let i = 0; i < options.length; i++) {
+      // Found highlighted option
       if (options[i].classList.contains(this.classes.highlighted)) {
         const prevOption = options[i]
         // Remove highlighted class from current one

package/src/slim-select/select.ts

@@ -17,8 +17,9 @@ export default class Select {
   constructor(select: HTMLSelectElement) {
     this.select = select
 
+    this.valueChange = this.valueChange.bind(this)
     // Add change event listener
-    this.select.addEventListener('change', this.valueChange.bind(this), {
+    this.select.addEventListener('change', this.valueChange, {
       // allow bubbling of event
       passive: true,
     })
@@ -361,7 +362,7 @@ export default class Select {
     this.changeListen(false)
 
     // Remove event change listener
-    this.select.removeEventListener('change', this.valueChange.bind(this))
+    this.select.removeEventListener('change', this.valueChange)
 
     // Disconnect observer and null
     if (this.observer) {

package/src/slim-select/settings.ts

@@ -17,6 +17,7 @@ export default class Settings {
   public disabled: boolean
   public alwaysOpen: boolean
   public showSearch: boolean
+  public ariaLabel: string
   public searchPlaceholder: string
   public searchText: string
   public searchingText: string
@@ -47,6 +48,7 @@ export default class Settings {
     this.disabled = settings.disabled !== undefined ? settings.disabled : false
     this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false
     this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true
+    this.ariaLabel = settings.ariaLabel || 'Combobox'
     this.searchPlaceholder = settings.searchPlaceholder || 'Search'
     this.searchText = settings.searchText || 'No Results'
     this.searchingText = settings.searchingText || 'Searching...'

package/src/slim-select/slimselect.scss

@@ -9,6 +9,7 @@
   --ss-highlight-color: #fffb8c;
   --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
+  --ss-focus-color: #5897fb;
 
   // Heights
   --ss-main-height: 30px;
@@ -71,7 +72,7 @@
   overflow: hidden;
 
   &:focus {
-    box-shadow: 0 0 5px var(--ss-primary-color);
+    box-shadow: 0 0 5px var(--ss-focus-color);
   }
 
   &.ss-disabled {
@@ -303,7 +304,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 5px var(--ss-primary-color);
+        box-shadow: 0 0 5px var(--ss-focus-color);
       }
     }
 

package/src/slim-select/store.ts

@@ -284,6 +284,26 @@ export default class Store {
     return options.length ? options[0] : null
   }
 
+  public getSelectType(): string {
+    return this.selectType
+  }
+
+  public getFirstOption(): Option | null {
+    let option: Option | null = null
+    for (let dataObj of this.data) {
+      if (dataObj instanceof Optgroup) {
+        option = dataObj.options[0]
+      } else if (dataObj instanceof Option) {
+        option = dataObj
+      }
+
+      if (option) {
+        break
+      }
+    }
+    return option
+  }
+
   // Take in search string and return filtered list of values
   public search(search: string, searchFilter: (opt: Option, search: string) => boolean): DataArray {
     search = search.trim()
@@ -342,7 +362,4 @@ export default class Store {
     return dataSearch
   }
 
-  public getSelectType(): string {
-    return this.selectType
-  }
 }

package/src/vue/dist/slim-select/helpers.d.ts

@@ -1,5 +1,5 @@
-export declare function generateID(): string;
-export declare function hasClassInTree(element: HTMLElement, className: string): any;
-export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
-export declare function isEqual(a: any, b: any): boolean;
-export declare function kebabCase(str: string): string;
+export declare function generateID(): string;
+export declare function hasClassInTree(element: HTMLElement, className: string): any;
+export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
+export declare function isEqual(a: any, b: any): boolean;
+export declare function kebabCase(str: string): string;

package/src/vue/dist/slim-select/index.d.ts

@@ -1,46 +1,46 @@
-import Settings, { SettingsPartial } from './settings';
-import Render from './render';
-import Select from './select';
-import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store';
-export interface Config {
-    select: string | Element;
-    data?: DataArrayPartial;
-    settings?: SettingsPartial;
-    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;
-    beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
-    afterChange?: (newVal: Option[]) => void;
-    beforeOpen?: () => void;
-    afterOpen?: () => void;
-    beforeClose?: () => void;
-    afterClose?: () => void;
-    error?: (err: Error) => void;
-}
-export default class SlimSelect {
-    selectEl: HTMLSelectElement;
-    settings: Settings;
-    select: Select;
-    store: Store;
-    render: Render;
-    events: Events;
-    constructor(config: Config);
-    enable(): void;
-    disable(): void;
-    getData(): DataArray;
-    setData(data: DataArrayPartial): void;
-    getSelected(): string[];
-    setSelected(value: string | string[], runAfterChange?: boolean): void;
-    addOption(option: OptionOptional): void;
-    open(): void;
-    close(eventType?: string | null): void;
-    search(value: string): void;
-    destroy(): void;
-    private windowResize;
-    private windowScroll;
-    private documentClick;
-    private windowVisibilityChange;
-}
+import Settings, { SettingsPartial } from './settings';
+import Render from './render';
+import Select from './select';
+import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store';
+export interface Config {
+    select: string | Element;
+    data?: DataArrayPartial;
+    settings?: SettingsPartial;
+    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;
+    beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
+    afterChange?: (newVal: Option[]) => void;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
+    error?: (err: Error) => void;
+}
+export default class SlimSelect {
+    selectEl: HTMLSelectElement;
+    settings: Settings;
+    select: Select;
+    store: Store;
+    render: Render;
+    events: Events;
+    constructor(config: Config);
+    enable(): void;
+    disable(): void;
+    getData(): DataArray;
+    setData(data: DataArrayPartial): void;
+    getSelected(): string[];
+    setSelected(value: string | string[], runAfterChange?: boolean): void;
+    addOption(option: OptionOptional): void;
+    open(): void;
+    close(eventType?: string | null): void;
+    search(value: string): void;
+    destroy(): void;
+    private windowResize;
+    private windowScroll;
+    private documentClick;
+    private windowVisibilityChange;
+}

package/src/vue/dist/slim-select/render.d.ts

@@ -1,120 +1,120 @@
-import Settings from './settings';
-import Store, { DataArray, Option, OptionOptional } from './store';
-export interface Callbacks {
-    open: () => void;
-    close: () => void;
-    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null;
-    setSelected: (value: string[], runAfterChange: boolean) => void;
-    addOption: (option: Option) => void;
-    search: (search: string) => void;
-    beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
-    afterChange?: (newVal: Option[]) => void;
-}
-export interface Main {
-    main: HTMLDivElement;
-    values: HTMLDivElement;
-    deselect: {
-        main: HTMLDivElement;
-        svg: SVGSVGElement;
-        path: SVGPathElement;
-    };
-    arrow: {
-        main: SVGSVGElement;
-        path: SVGPathElement;
-    };
-}
-export interface Content {
-    main: HTMLDivElement;
-    search: Search;
-    list: HTMLDivElement;
-}
-export interface Search {
-    main: HTMLDivElement;
-    input: HTMLInputElement;
-    addable?: {
-        main: HTMLDivElement;
-        svg: SVGSVGElement;
-        path: SVGPathElement;
-    };
-}
-export default class Render {
-    settings: Settings;
-    store: Store;
-    callbacks: Callbacks;
-    main: Main;
-    content: Content;
-    classes: {
-        main: string;
-        placeholder: string;
-        values: string;
-        single: string;
-        max: string;
-        value: string;
-        valueText: string;
-        valueDelete: string;
-        valueOut: string;
-        deselect: string;
-        deselectPath: string;
-        arrow: string;
-        arrowClose: string;
-        arrowOpen: string;
-        content: string;
-        openAbove: string;
-        openBelow: string;
-        search: string;
-        searchHighlighter: string;
-        searching: string;
-        addable: string;
-        addablePath: string;
-        list: string;
-        optgroup: string;
-        optgroupLabel: string;
-        optgroupLabelText: string;
-        optgroupActions: string;
-        optgroupSelectAll: string;
-        optgroupSelectAllBox: string;
-        optgroupSelectAllCheck: string;
-        optgroupClosable: string;
-        option: string;
-        optionDelete: string;
-        highlighted: string;
-        open: string;
-        close: string;
-        selected: string;
-        error: string;
-        disabled: string;
-        hide: string;
-    };
-    constructor(settings: Required<Settings>, store: Store, callbacks: Callbacks);
-    enable(): void;
-    disable(): void;
-    open(): void;
-    close(): void;
-    updateClassStyles(): void;
-    updateAriaAttributes(): void;
-    mainDiv(): Main;
-    mainFocus(eventType: string | null): void;
-    placeholder(): HTMLDivElement;
-    renderValues(): void;
-    private renderSingleValue;
-    private renderMultipleValues;
-    multipleValue(option: Option): HTMLDivElement;
-    contentDiv(): Content;
-    moveContent(): void;
-    searchDiv(): Search;
-    searchFocus(): void;
-    getOptions(notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean): HTMLDivElement[];
-    highlight(dir: 'up' | 'down'): void;
-    listDiv(): HTMLDivElement;
-    renderError(error: string): void;
-    renderSearching(): void;
-    renderOptions(data: DataArray): void;
-    option(option: Option): HTMLDivElement;
-    destroy(): void;
-    private highlightText;
-    moveContentAbove(): void;
-    moveContentBelow(): void;
-    ensureElementInView(container: HTMLElement, element: HTMLElement): void;
-    putContent(): 'up' | 'down';
-    updateDeselectAll(): void;
-}
+import Settings from './settings';
+import Store, { DataArray, Option, OptionOptional } from './store';
+export interface Callbacks {
+    open: () => void;
+    close: () => void;
+    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null;
+    setSelected: (value: string | string[], runAfterChange: boolean) => void;
+    addOption: (option: Option) => void;
+    search: (search: string) => void;
+    beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
+    afterChange?: (newVal: Option[]) => void;
+}
+export interface Main {
+    main: HTMLDivElement;
+    values: HTMLDivElement;
+    deselect: {
+        main: HTMLDivElement;
+        svg: SVGSVGElement;
+        path: SVGPathElement;
+    };
+    arrow: {
+        main: SVGSVGElement;
+        path: SVGPathElement;
+    };
+}
+export interface Content {
+    main: HTMLDivElement;
+    search: Search;
+    list: HTMLDivElement;
+}
+export interface Search {
+    main: HTMLDivElement;
+    input: HTMLInputElement;
+    addable?: {
+        main: HTMLDivElement;
+        svg: SVGSVGElement;
+        path: SVGPathElement;
+    };
+}
+export default class Render {
+    settings: Settings;
+    store: Store;
+    callbacks: Callbacks;
+    main: Main;
+    content: Content;
+    classes: {
+        main: string;
+        placeholder: string;
+        values: string;
+        single: string;
+        max: string;
+        value: string;
+        valueText: string;
+        valueDelete: string;
+        valueOut: string;
+        deselect: string;
+        deselectPath: string;
+        arrow: string;
+        arrowClose: string;
+        arrowOpen: string;
+        content: string;
+        openAbove: string;
+        openBelow: string;
+        search: string;
+        searchHighlighter: string;
+        searching: string;
+        addable: string;
+        addablePath: string;
+        list: string;
+        optgroup: string;
+        optgroupLabel: string;
+        optgroupLabelText: string;
+        optgroupActions: string;
+        optgroupSelectAll: string;
+        optgroupSelectAllBox: string;
+        optgroupSelectAllCheck: string;
+        optgroupClosable: string;
+        option: string;
+        optionDelete: string;
+        highlighted: string;
+        open: string;
+        close: string;
+        selected: string;
+        error: string;
+        disabled: string;
+        hide: string;
+    };
+    constructor(settings: Required<Settings>, store: Store, callbacks: Callbacks);
+    enable(): void;
+    disable(): void;
+    open(): void;
+    close(): void;
+    updateClassStyles(): void;
+    updateAriaAttributes(): void;
+    mainDiv(): Main;
+    mainFocus(eventType: string | null): void;
+    placeholder(): HTMLDivElement;
+    renderValues(): void;
+    private renderSingleValue;
+    private renderMultipleValues;
+    multipleValue(option: Option): HTMLDivElement;
+    contentDiv(): Content;
+    moveContent(): void;
+    searchDiv(): Search;
+    searchFocus(): void;
+    getOptions(notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean): HTMLDivElement[];
+    highlight(dir: 'up' | 'down'): void;
+    listDiv(): HTMLDivElement;
+    renderError(error: string): void;
+    renderSearching(): void;
+    renderOptions(data: DataArray): void;
+    option(option: Option): HTMLDivElement;
+    destroy(): void;
+    private highlightText;
+    moveContentAbove(): void;
+    moveContentBelow(): void;
+    ensureElementInView(container: HTMLElement, element: HTMLElement): void;
+    putContent(): 'up' | 'down';
+    updateDeselectAll(): void;
+}

package/src/vue/dist/slim-select/select.d.ts

@@ -1,28 +1,28 @@
-import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
-export default class Select {
-    select: HTMLSelectElement;
-    onValueChange?: (value: string[]) => void;
-    onClassChange?: (classes: string[]) => void;
-    onDisabledChange?: (disabled: boolean) => void;
-    onOptionsChange?: (data: DataArrayPartial) => void;
-    listen: boolean;
-    private observer;
-    constructor(select: HTMLSelectElement);
-    enable(): void;
-    disable(): void;
-    hideUI(): void;
-    showUI(): void;
-    changeListen(listen: boolean): void;
-    valueChange(ev: Event): boolean;
-    private observeCall;
-    getData(): DataArrayPartial;
-    getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
-    getDataFromOption(option: HTMLOptionElement): Option;
-    getSelectedValues(): string[];
-    setSelected(value: string[]): void;
-    updateSelect(id?: string, style?: string, classes?: string[]): void;
-    updateOptions(data: DataArray): void;
-    createOptgroup(optgroup: Optgroup): HTMLOptGroupElement;
-    createOption(info: Option): HTMLOptionElement;
-    destroy(): void;
-}
+import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
+export default class Select {
+    select: HTMLSelectElement;
+    onValueChange?: (value: string[]) => void;
+    onClassChange?: (classes: string[]) => void;
+    onDisabledChange?: (disabled: boolean) => void;
+    onOptionsChange?: (data: DataArrayPartial) => void;
+    listen: boolean;
+    private observer;
+    constructor(select: HTMLSelectElement);
+    enable(): void;
+    disable(): void;
+    hideUI(): void;
+    showUI(): void;
+    changeListen(listen: boolean): void;
+    valueChange(ev: Event): boolean;
+    private observeCall;
+    getData(): DataArrayPartial;
+    getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
+    getDataFromOption(option: HTMLOptionElement): Option;
+    getSelectedValues(): string[];
+    setSelected(value: string[]): void;
+    updateSelect(id?: string, style?: string, classes?: string[]): void;
+    updateOptions(data: DataArray): void;
+    createOptgroup(optgroup: Optgroup): HTMLOptGroupElement;
+    createOption(info: Option): HTMLOptionElement;
+    destroy(): void;
+}