slim-select 2.2.0 → 2.2.2

package/src/vue/dist/slimselectvue.ssr.js

@@ -46,11 +46,50 @@ function debounce(func, wait = 50, immediate = false) {
         }
     };
 }
+function isEqual(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
 function kebabCase(str) {
     const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
     return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
 }
 
+class Settings {
+    constructor(settings) {
+        this.id = '';
+        this.style = '';
+        this.class = [];
+        this.isMultiple = false;
+        this.isOpen = false;
+        this.triggerFocus = true;
+        this.intervalMove = null;
+        if (!settings) {
+            settings = {};
+        }
+        this.id = 'ss-' + generateID();
+        this.style = settings.style || '';
+        this.class = settings.class || [];
+        this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
+        this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
+        this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
+        this.searchPlaceholder = settings.searchPlaceholder || 'Search';
+        this.searchText = settings.searchText || 'No Results';
+        this.searchingText = settings.searchingText || 'Searching...';
+        this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
+        this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
+        this.contentLocation = settings.contentLocation || document.body;
+        this.contentPosition = settings.contentPosition || 'absolute';
+        this.openPosition = settings.openPosition || 'auto';
+        this.placeholderText = settings.placeholderText || 'Select Value';
+        this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
+        this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
+        this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
+        this.minSelected = settings.minSelected || 0;
+        this.maxSelected = settings.maxSelected || 1000;
+        this.timeoutDelay = settings.timeoutDelay || 200;
+    }
+}
+
 class Optgroup {
     constructor(optgroup) {
         this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
@@ -944,9 +983,12 @@ class Render {
                     optgroupClosableSvg.classList.add(this.classes.arrow);
                     optgroupClosable.appendChild(optgroupClosableSvg);
                     const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                    optgroupClosableArrow.setAttribute('d', this.classes.arrow);
                     optgroupClosableSvg.appendChild(optgroupClosableArrow);
-                    if (d.closable === 'open') {
+                    if (d.options.some((o) => o.selected)) {
+                        optgroupClosable.classList.add(this.classes.open);
+                        optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                    }
+                    else if (d.closable === 'open') {
                         optgroupEl.classList.add(this.classes.open);
                         optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
                     }
@@ -1193,16 +1235,19 @@ class Select {
     }
     addValueChangeListener(func) {
         this.onValueChange = func;
-        this.select.addEventListener('change', this.valueChange.bind(this));
+        this.select.addEventListener('change', this.valueChange.bind(this), {
+            passive: true,
+        });
     }
     removeValueChangeListener() {
         this.onValueChange = undefined;
         this.select.removeEventListener('change', this.valueChange.bind(this));
     }
     valueChange(ev) {
-        if (this.onValueChange) {
+        if (this.listen && this.onValueChange) {
             this.onValueChange(this.getSelectedValues());
         }
+        return true;
     }
     observeWrapper(mutations) {
         if (this.onSelectChange) {
@@ -1347,6 +1392,7 @@ class Select {
                 this.select.appendChild(this.createOption(d));
             }
         }
+        this.select.dispatchEvent(new Event('change'));
         this.changeListen(true);
     }
     createOptgroup(optgroup) {
@@ -1406,42 +1452,6 @@ class Select {
     }
 }
 
-class Settings {
-    constructor(settings) {
-        this.id = '';
-        this.style = '';
-        this.class = [];
-        this.isMultiple = false;
-        this.isOpen = false;
-        this.triggerFocus = true;
-        this.intervalMove = null;
-        if (!settings) {
-            settings = {};
-        }
-        this.id = 'ss-' + generateID();
-        this.style = settings.style || '';
-        this.class = settings.class || [];
-        this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
-        this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
-        this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
-        this.searchPlaceholder = settings.searchPlaceholder || 'Search';
-        this.searchText = settings.searchText || 'No Results';
-        this.searchingText = settings.searchingText || 'Searching...';
-        this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
-        this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
-        this.contentLocation = settings.contentLocation || document.body;
-        this.contentPosition = settings.contentPosition || 'absolute';
-        this.openPosition = settings.openPosition || 'auto';
-        this.placeholderText = settings.placeholderText || 'Select Value';
-        this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
-        this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
-        this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-        this.minSelected = settings.minSelected || 0;
-        this.maxSelected = settings.maxSelected || 1000;
-        this.timeoutDelay = settings.timeoutDelay || 200;
-    }
-}
-
 class SlimSelect {
     constructor(config) {
         this.events = {
@@ -1574,6 +1584,7 @@ class SlimSelect {
         return this.store.getData();
     }
     setData(data) {
+        const selected = this.store.getSelected();
         const err = this.store.validateDataArray(data);
         if (err) {
             if (this.events.error) {
@@ -1586,23 +1597,34 @@ class SlimSelect {
         this.select.updateOptions(dataClean);
         this.render.renderValues();
         this.render.renderOptions(dataClean);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     getSelected() {
         return this.store.getSelected();
     }
     setSelected(value) {
+        const selected = this.store.getSelected();
         this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
         this.render.renderOptions(data);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     addOption(option) {
+        const selected = this.store.getSelected();
         this.store.addOption(option);
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
         this.render.renderOptions(data);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     open() {
         if (!this.settings.isEnabled || this.settings.isOpen) {
@@ -1688,6 +1710,13 @@ class SlimSelect {
 var script = vue.defineComponent({
     name: 'SlimSelect',
     props: {
+        modelValue: {
+            type: [String, Array, undefined],
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
         data: {
             type: Array,
         },
@@ -1698,6 +1727,7 @@ var script = vue.defineComponent({
             type: Object,
         },
     },
+    emits: ['update:modelValue'],
     data() {
         return {
             slim: null,
@@ -1716,7 +1746,24 @@ var script = vue.defineComponent({
         if (this.events) {
             config.events = this.events;
         }
+        if (!config.events) {
+            config.events = {};
+        }
+        const ogAfterChange = config.events.afterChange;
+        config.events.afterChange = (newVal) => {
+            const value = this.multiple ? newVal.map((option) => option.value) : newVal[0].value;
+            if (this.value !== value) {
+                this.value = value;
+            }
+            if (config.events && ogAfterChange) {
+                ogAfterChange(newVal);
+            }
+        };
         this.slim = new SlimSelect(config);
+        let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0];
+        if (this.value !== selected) {
+            this.value = selected;
+        }
     },
     beforeUnmount() {
         if (this.slim) {
@@ -1733,6 +1780,27 @@ var script = vue.defineComponent({
             deep: true,
         },
     },
+    computed: {
+        value: {
+            get() {
+                const multi = this.$props.multiple;
+                const val = this.$props.modelValue;
+                if (val === undefined) {
+                    return multi ? [] : '';
+                }
+                if (multi && typeof val === 'string') {
+                    return [val];
+                }
+                if (!multi && Array.isArray(val)) {
+                    return val[0];
+                }
+                return multi ? [] : '';
+            },
+            set(value) {
+                this.$emit('update:modelValue', value);
+            },
+        },
+    },
     methods: {
         getSlimSelect() {
             return this.slim;
@@ -1740,12 +1808,15 @@ var script = vue.defineComponent({
     },
 });
 
-const _hoisted_1 = { ref: "slim" };
+const _hoisted_1 = ["multiple"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("select", _hoisted_1, [
+  return (vue.openBlock(), vue.createElementBlock("select", {
+    multiple: _ctx.multiple,
+    ref: "slim"
+  }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 512 /* NEED_PATCH */))
+  ], 8 /* PROPS */, _hoisted_1))
 }
 
 script.render = render;

package/src/vue/dist/vue/hello.d.ts

@@ -0,0 +1,2 @@
+declare const hello = "hello world";
+export default hello;

package/src/vue/dist/vue/slimselect.vue.d.ts

@@ -0,0 +1,309 @@
+/// <reference types="node" />
+import { PropType } from 'vue';
+import SlimSelect, { Events } from '../slim-select';
+import Settings from '../slim-select/settings';
+import { DataArrayPartial, Option } from '../slim-select/store';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: PropType<string | string[] | undefined>;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<DataArrayPartial>;
+    };
+    settings: {
+        type: PropType<Settings>;
+    };
+    events: {
+        type: PropType<Events>;
+    };
+}, unknown, {
+    slim: SlimSelect | null;
+}, {
+    value: {
+        get(): string | string[];
+        set(value: string | string[]): void;
+    };
+}, {
+    getSlimSelect(): {
+        selectEl: HTMLSelectElement;
+        settings: {
+            id: string;
+            style: string;
+            class: string[];
+            isMultiple: boolean;
+            isOpen: boolean;
+            triggerFocus: boolean;
+            intervalMove: {
+                hasRef: () => boolean;
+                refresh: () => NodeJS.Timeout;
+                [Symbol.toPrimitive]: () => number;
+                ref: () => NodeJS.Timeout;
+                unref: () => NodeJS.Timeout;
+            } | null;
+            isEnabled: boolean;
+            alwaysOpen: boolean;
+            showSearch: boolean;
+            searchPlaceholder: string;
+            searchText: string;
+            searchingText: string;
+            searchHighlight: boolean;
+            closeOnSelect: boolean;
+            contentLocation: HTMLElement;
+            contentPosition: "relative" | "absolute";
+            openPosition: "auto" | "up" | "down";
+            placeholderText: string;
+            allowDeselect: boolean;
+            hideSelected: boolean;
+            showOptionTooltips: boolean;
+            minSelected: number;
+            maxSelected: number;
+            timeoutDelay: number;
+        };
+        select: {
+            select: HTMLSelectElement;
+            listen: boolean;
+            onSelectChange?: ((data: DataArrayPartial) => void) | undefined;
+            onValueChange?: ((value: string[]) => void) | undefined;
+            enable: () => void;
+            disable: () => void;
+            hideUI: () => void;
+            showUI: () => void;
+            changeListen: (on: boolean) => void;
+            addSelectChangeListener: (func: (data: DataArrayPartial) => void) => void;
+            removeSelectChangeListener: () => void;
+            addValueChangeListener: (func: (value: string[]) => void) => void;
+            removeValueChangeListener: () => void;
+            valueChange: (ev: Event) => boolean;
+            getData: () => DataArrayPartial;
+            getDataFromOptgroup: (optgroup: HTMLOptGroupElement) => import("../slim-select/store").OptgroupOptional;
+            getDataFromOption: (option: HTMLOptionElement) => Option;
+            getSelectedValues: () => string[];
+            setSelected: (value: string[]) => void;
+            updateSelect: (id?: string | undefined, style?: string | undefined, classes?: string[] | undefined) => void;
+            updateOptions: (data: import("../slim-select/store").DataArray) => void;
+            createOptgroup: (optgroup: import("../slim-select/store").Optgroup) => HTMLOptGroupElement;
+            createOption: (info: Option) => HTMLOptionElement;
+            destroy: () => void;
+        };
+        store: {
+            validateDataArray: (data: DataArrayPartial | import("../slim-select/store").DataArray) => Error | null;
+            validateOption: (option: import("../slim-select/store").OptionOptional | Option) => Error | null;
+            partialToFullData: (data: DataArrayPartial) => import("../slim-select/store").DataArray;
+            setData: (data: DataArrayPartial | import("../slim-select/store").DataArray) => void;
+            getData: () => import("../slim-select/store").DataArray;
+            getDataOptions: () => Option[];
+            addOption: (option: import("../slim-select/store").OptionOptional) => void;
+            setSelectedBy: (selectedType: "value" | "id", selectedValues: string[]) => void;
+            getSelected: () => string[];
+            getSelectedOptions: () => Option[];
+            getSelectedIDs: () => string[];
+            getOptgroupByID: (id: string) => import("../slim-select/store").Optgroup | null;
+            getOptionByID: (id: string) => Option | null;
+            search: (search: string, searchFilter: (opt: Option, search: string) => boolean) => import("../slim-select/store").DataArray;
+            filter: (filter: ((opt: Option) => boolean) | null, includeOptgroup: boolean) => import("../slim-select/store").DataArray;
+        };
+        render: {
+            settings: {
+                id: string;
+                style: string;
+                class: string[];
+                isMultiple: boolean;
+                isOpen: boolean;
+                triggerFocus: boolean;
+                intervalMove: {
+                    hasRef: () => boolean;
+                    refresh: () => NodeJS.Timeout;
+                    [Symbol.toPrimitive]: () => number;
+                    ref: () => NodeJS.Timeout;
+                    unref: () => NodeJS.Timeout;
+                } | null;
+                isEnabled: boolean;
+                alwaysOpen: boolean;
+                showSearch: boolean;
+                searchPlaceholder: string;
+                searchText: string;
+                searchingText: string;
+                searchHighlight: boolean;
+                closeOnSelect: boolean;
+                contentLocation: HTMLElement;
+                contentPosition: "relative" | "absolute";
+                openPosition: "auto" | "up" | "down";
+                placeholderText: string;
+                allowDeselect: boolean;
+                hideSelected: boolean;
+                showOptionTooltips: boolean;
+                minSelected: number;
+                maxSelected: number;
+                timeoutDelay: number;
+            };
+            store: {
+                validateDataArray: (data: DataArrayPartial | import("../slim-select/store").DataArray) => Error | null;
+                validateOption: (option: import("../slim-select/store").OptionOptional | Option) => Error | null;
+                partialToFullData: (data: DataArrayPartial) => import("../slim-select/store").DataArray;
+                setData: (data: DataArrayPartial | import("../slim-select/store").DataArray) => void;
+                getData: () => import("../slim-select/store").DataArray;
+                getDataOptions: () => Option[];
+                addOption: (option: import("../slim-select/store").OptionOptional) => void;
+                setSelectedBy: (selectedType: "value" | "id", selectedValues: string[]) => void;
+                getSelected: () => string[];
+                getSelectedOptions: () => Option[];
+                getSelectedIDs: () => string[];
+                getOptgroupByID: (id: string) => import("../slim-select/store").Optgroup | null;
+                getOptionByID: (id: string) => Option | null;
+                search: (search: string, searchFilter: (opt: Option, search: string) => boolean) => import("../slim-select/store").DataArray;
+                filter: (filter: ((opt: Option) => boolean) | null, includeOptgroup: boolean) => import("../slim-select/store").DataArray;
+            };
+            callbacks: {
+                open: () => void;
+                close: () => void;
+                addable?: ((value: string) => string | import("../slim-select/store").OptionOptional | Promise<string | import("../slim-select/store").OptionOptional>) | undefined;
+                setSelected: (value: string[]) => void;
+                addOption: (option: Option) => void;
+                search: (search: string) => void;
+                beforeChange?: ((newVal: Option[], oldVal: Option[]) => boolean | void) | undefined;
+                afterChange?: ((newVal: Option[]) => void) | undefined;
+            };
+            main: {
+                main: HTMLDivElement;
+                values: HTMLDivElement;
+                deselect: {
+                    main: HTMLDivElement;
+                    svg: SVGSVGElement;
+                    path: SVGPathElement;
+                };
+                arrow: {
+                    main: SVGSVGElement;
+                    path: SVGPathElement;
+                };
+            };
+            content: {
+                main: HTMLDivElement;
+                search: {
+                    main: HTMLDivElement;
+                    input: HTMLInputElement;
+                    addable?: {
+                        main: HTMLDivElement;
+                        svg: SVGSVGElement;
+                        path: SVGPathElement;
+                    } | undefined;
+                };
+                list: HTMLDivElement;
+            };
+            classes: {
+                main: string;
+                placeholder: string;
+                values: string;
+                single: 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;
+            };
+            enable: () => void;
+            disable: () => void;
+            open: () => void;
+            close: () => void;
+            mainDiv: () => import("../slim-select/render").Main;
+            mainFocus: (trigger: boolean) => void;
+            placeholder: () => HTMLDivElement;
+            renderValues: () => void;
+            multipleValue: (option: Option) => HTMLDivElement;
+            contentDiv: () => import("../slim-select/render").Content;
+            moveContent: () => void;
+            searchDiv: () => import("../slim-select/render").Search;
+            searchFocus: (trigger: boolean) => void;
+            getOptions: (notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean) => HTMLDivElement[];
+            highlight: (dir: "up" | "down") => void;
+            listDiv: () => HTMLDivElement;
+            renderError: (error: string) => void;
+            renderSearching: () => void;
+            renderOptions: (data: import("../slim-select/store").DataArray) => void;
+            option: (option: Option) => HTMLDivElement;
+            destroy: () => void;
+            moveContentAbove: () => void;
+            moveContentBelow: () => void;
+            ensureElementInView: (container: HTMLElement, element: HTMLElement) => void;
+            putContent: (el: HTMLElement, isOpen: boolean) => "up" | "down";
+        };
+        events: {
+            search?: ((searchValue: string, currentData: import("../slim-select/store").DataArray) => DataArrayPartial | Promise<DataArrayPartial>) | undefined;
+            searchFilter?: ((option: Option, search: string) => boolean) | undefined;
+            addable?: ((value: string) => string | import("../slim-select/store").OptionOptional | Promise<string | import("../slim-select/store").OptionOptional>) | undefined;
+            beforeChange?: ((newVal: Option[], oldVal: Option[]) => boolean | void) | undefined;
+            afterChange?: ((newVal: Option[]) => void) | undefined;
+            beforeOpen?: (() => void) | undefined;
+            afterOpen?: (() => void) | undefined;
+            beforeClose?: (() => void) | undefined;
+            afterClose?: (() => void) | undefined;
+            error?: ((err: Error) => void) | undefined;
+        };
+        enable: () => void;
+        disable: () => void;
+        getData: () => import("../slim-select/store").DataArray;
+        setData: (data: DataArrayPartial) => void;
+        getSelected: () => string[];
+        setSelected: (value: string | string[]) => void;
+        addOption: (option: import("../slim-select/store").OptionOptional) => void;
+        open: () => void;
+        close: () => void;
+        search: (value: string) => void;
+        destroy: () => void;
+    } | null;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | string[] | undefined>;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<DataArrayPartial>;
+    };
+    settings: {
+        type: PropType<Settings>;
+    };
+    events: {
+        type: PropType<Events>;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    multiple: boolean;
+}>;
+export default _default;

package/src/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slim-select/vue",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vue integration",
   "repository": {
     "type": "git",
@@ -19,8 +19,7 @@
   "main": "dist/slimselectvue.ssr.js",
   "browser": "dist/slimselect.global.js",
   "module": "dist/slimselectvue.es.js",
-  "types": "dist/index.d.ts",
-  "typings": "dist/index.d.ts",
+  "types": "dist/vue/slimselect.vue.d.ts",
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
     "test": "echo \"Error: no test specified\" && exit 1"