slim-select 2.4.4 → 2.5.0

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

@@ -0,0 +1,99 @@
+/**
+ * @jest-environment jsdom
+ */
+
+'use strict'
+import { describe, expect, test } from '@jest/globals'
+import SlimSelect from './'
+import { OptionOptional } from 'src/vue/dist/slim-select/store'
+import { Config } from 'src/vue/dist/slim-select'
+
+describe('SlimSelect Module', () => {
+  test('constructor', () => {
+    document.body.innerHTML = '<select id="test"></select>'
+
+    let slimSelect = new SlimSelect({
+      select: '#test',
+    })
+    expect(slimSelect).toBeInstanceOf(SlimSelect)
+  })
+
+  test('multiple - do not render deselect all with no selected options', () => {
+    document.body.innerHTML = `<select id="test" multiple>
+        <option data-placeholder="true"></option>
+        <option id="1" value="1">One</option>
+        <option id="2" value="2">Two</option>
+        <option id="3" value="3">Two</option>
+    </select>`
+
+    const options: OptionOptional[] = [
+      {
+        id: '1',
+        value: '1',
+        text: 'One',
+      },
+      {
+        id: '2',
+        value: '2',
+        text: 'Two',
+      },
+      {
+        id: '3',
+        value: '3',
+        text: 'Three',
+      },
+    ]
+    const config: Config = {
+      select: '#test',
+      settings: {
+        allowDeselect: true,
+      },
+      data: options,
+    }
+
+    let slimSelect = new SlimSelect(config)
+    expect(slimSelect.store.getSelectType()).toEqual('multiple')
+    expect(slimSelect.getSelected()).toHaveLength(0)
+    expect(slimSelect.render.main.deselect.main.classList).toContain(slimSelect.render.classes.hide)
+  })
+  test('multiple - render deselect all option with selected options', () => {
+    document.body.innerHTML = `<select id="test" multiple>
+        <option data-placeholder="true"></option>
+        <option id="1" value="1">One</option>
+        <option id="2" value="2">Two</option>
+        <option id="3" value="3">Two</option>
+    </select>`
+
+    const options: OptionOptional[] = [
+      {
+        id: '1',
+        value: '1',
+        text: 'One',
+        selected: true,
+      },
+      {
+        id: '2',
+        value: '2',
+        text: 'Two',
+        selected: true,
+      },
+      {
+        id: '3',
+        value: '3',
+        text: 'Three',
+      },
+    ]
+    const config: Config = {
+      select: '#test',
+      settings: {
+        allowDeselect: true,
+      },
+      data: options,
+    }
+
+    let slimSelect = new SlimSelect(config)
+    expect(slimSelect.store.getSelectType()).toEqual('multiple')
+    expect(slimSelect.getSelected()).toHaveLength(2)
+    expect(slimSelect.render.main.deselect.main.classList).not.toContain(slimSelect.render.classes.hide)
+  })
+})

package/src/slim-select/render.ts

@@ -281,8 +281,13 @@ export default class Render {
     // Add deselect
     const deselect = document.createElement('div')
     deselect.classList.add(this.classes.deselect)
-    if (!this.settings.allowDeselect || this.settings.isMultiple) {
+
+    // Check if deselect is to be shown or not
+    const selectedOptions = this.store?.getSelectedOptions()
+    if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
       deselect.classList.add(this.classes.hide)
+    } else {
+      deselect.classList.remove(this.classes.hide)
     }
 
     // Add deselect onclick event
@@ -305,7 +310,12 @@ export default class Render {
       }
 
       if (shouldDelete) {
-        this.callbacks.setSelected([''], false)
+        if (this.settings.isMultiple) {
+          this.callbacks.setSelected([], false)
+          this.updateDeselectAll()
+        } else {
+          this.callbacks.setSelected([''], false)
+        }
 
         // Check if we need to close the dropdown
         if (this.settings.closeOnSelect) {
@@ -414,13 +424,17 @@ export default class Render {
       // Create single value container
       const singleValue = document.createElement('div')
       singleValue.classList.add(this.classes.single)
-      singleValue.innerHTML = selectedSingle.html ? selectedSingle.html : selectedSingle.text
+      if (selectedSingle.html) {
+        singleValue.innerHTML = selectedSingle.html
+      } else {
+        singleValue.innerText = selectedSingle.text
+      }
 
       // If there is a selected value, set a single div
       this.main.values.innerHTML = singleValue.outerHTML
     }
 
-    // If allowDeselect is false or selected value is empty just hide deslect
+    // If allowDeselect is false or selected value is empty just hide deselect
     if (!this.settings.allowDeselect || !selected.length) {
       this.main.deselect.main.classList.add(this.classes.hide)
     } else {
@@ -488,7 +502,9 @@ export default class Render {
     for (const n of removeNodes) {
       n.classList.add(this.classes.valueOut)
       setTimeout(() => {
-        this.main.values.removeChild(n)
+        if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
+          this.main.values.removeChild(n)
+        }
       }, 100)
     }
 
@@ -513,6 +529,7 @@ export default class Render {
         }
       }
     }
+    this.updateDeselectAll()
   }
 
   public multipleValue(option: Option): HTMLDivElement {
@@ -522,7 +539,7 @@ export default class Render {
 
     const text = document.createElement('div')
     text.classList.add(this.classes.valueText)
-    text.innerHTML = option.text // For multiple values always use text
+    text.innerText = option.text // For multiple values always use text
     value.appendChild(text)
 
     // Only add deletion if the option is not mandatory
@@ -583,6 +600,8 @@ export default class Render {
           if (this.callbacks.afterChange) {
             this.callbacks.afterChange(after)
           }
+
+          this.updateDeselectAll()
         }
       }
 
@@ -1373,4 +1392,24 @@ export default class Render {
     // Move content below
     return 'down'
   }
+
+  // Updates deselect based on item count and allowDeselect setting
+  public updateDeselectAll(): void {
+    if (!this.store || !this.settings) {
+      return
+    }
+    const selected = this.store.getSelectedOptions()
+    const hasSelectedItems = selected && selected.length > 0
+    const isMultiple = this.settings.isMultiple
+    const allowDeselect = this.settings.allowDeselect
+
+    const deselectButton = this.main.deselect.main
+    const hideClass = this.classes.hide
+
+    if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
+      deselectButton.classList.remove(hideClass)
+    } else {
+      deselectButton.classList.add(hideClass)
+    }
+  }
 }

package/src/slim-select/store.ts

@@ -338,4 +338,8 @@ 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,119 +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';
-}
+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;
+}

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;
+}