slim-select 2.7.0 → 2.8.0

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"
   },
-  "type": "module",
   "main": "dist/slimselect.umd.js",
   "browser": "dist/slimselect.umd.js",
   "module": "dist/slimselect.es.js",
@@ -59,49 +58,49 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@slim-select/vue": "workspace:src/vue",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/downloadjs": "^1.4.6",
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-vue": "^4.5.2",
     "clipboard": "^2.0.11",
     "downloadjs": "^1.4.7",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "prismjs": "^1.29.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.5.2",
+    "rollup": "^4.9.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.59.2",
     "ts-jest": "^29.0.5",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vue": "^3.2.47",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vue": "^3.3.13",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.2.0",
-    "vuex": "^4.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.1",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "identity-obj-proxy": "^3.0.0",
-    "jest-canvas-mock": "^2.5.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "vite-plugin-dts": "^2.3.0"
+    "vue-tsc": "^1.8.26",
+    "vuex": "^4.0.2"
   }
-}
+}

package/src/slim-select/index.ts

@@ -1,8 +1,8 @@
-import Settings, { SettingsPartial } from './settings'
+import { debounce, hasClassInTree, isEqual } from './helpers'
 import Render from './render'
 import Select from './select'
+import Settings, { SettingsPartial } from './settings'
 import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store'
-import { debounce, hasClassInTree, isEqual } from './helpers'
 
 export interface Config {
   select: string | Element
@@ -136,8 +136,8 @@ export default class SlimSelect {
       this.select.updateOptions(this.store.getData())
     }
 
-    // Set render callbacks
-    const callbacks = {
+    // Set render renderCallbacks
+    const renderCallbacks = {
       open: this.open.bind(this),
       close: this.close.bind(this),
       addable: this.events.addable ? this.events.addable : undefined,
@@ -149,7 +149,7 @@ export default class SlimSelect {
     }
 
     // Setup render class
-    this.render = new Render(this.settings, this.store, callbacks)
+    this.render = new Render(this.settings, this.store, renderCallbacks)
     this.render.renderValues()
     this.render.renderOptions(this.store.getData())
 
@@ -168,9 +168,6 @@ export default class SlimSelect {
       this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling)
     }
 
-    // Add onclick listener to document to closeContent if clicked outside
-    document.addEventListener('click', this.documentClick)
-
     // Add window resize listener to moveContent if window size changes
     window.addEventListener('resize', this.windowResize, false)
 
@@ -336,6 +333,9 @@ export default class SlimSelect {
       if (this.settings.isOpen) {
         this.settings.isFullOpen = true
       }
+
+      // Add onclick listener to document to closeContent if clicked outside
+      document.addEventListener('click', this.documentClick)
     }, this.settings.timeoutDelay)
 
     // Start an interval to check if main has moved
@@ -380,6 +380,9 @@ export default class SlimSelect {
       if (this.events.afterClose) {
         this.events.afterClose()
       }
+
+      // Add onclick listener to document to closeContent if clicked outside
+      document.removeEventListener('click', this.documentClick)
     }, this.settings.timeoutDelay)
 
     if (this.settings.intervalMove) {

package/src/slim-select/render.ts

@@ -529,13 +529,20 @@ export default class Render {
 
       // If shouldAdd, insertAdjacentElement it to the values container in the order of the selectedOptions
       if (shouldAdd) {
-        if (currentNodes.length === 0) {
+        // If keepOrder is true, we will just append it to the end
+        if (this.settings.keepOrder) {
           this.main.values.appendChild(this.multipleValue(selectedOptions[d]))
-        } else if (d === 0) {
-          this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d])
         } else {
-          currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]))
+          // else we will insert it in the order of the selectedOptions
+          if (currentNodes.length === 0) {
+            this.main.values.appendChild(this.multipleValue(selectedOptions[d]))
+          } else if (d === 0) {
+            this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d])
+          } else {
+            currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]))
+          }
         }
+
       }
     }
     this.updateDeselectAll()

package/src/slim-select/settings.ts

@@ -29,6 +29,7 @@ export default class Settings {
   public placeholderText: string
   public allowDeselect: boolean
   public hideSelected: boolean
+  public keepOrder: boolean
   public showOptionTooltips: boolean
   public minSelected: number
   public maxSelected: number
@@ -60,6 +61,7 @@ export default class Settings {
     this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value'
     this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false
     this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false
+    this.keepOrder = settings.keepOrder !== undefined ? settings.keepOrder : false
     this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false
     this.minSelected = settings.minSelected || 0
     this.maxSelected = settings.maxSelected || 1000

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 Render from './render';
+import Select from './select';
+import Settings, { SettingsPartial } from './settings';
+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 | 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;
+}