slim-select 2.2.1 → 2.2.3

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;
@@ -230,23 +269,21 @@ class Store {
         const dataSearch = [];
         this.data.forEach((dataObj) => {
             if (dataObj instanceof Optgroup) {
-                if (!includeOptgroup) {
-                    dataObj.options.forEach((option) => {
-                        if (filter && filter(option)) {
-                            dataSearch.push(option);
+                let optOptions = [];
+                dataObj.options.forEach((option) => {
+                    if (!filter || filter(option)) {
+                        if (!includeOptgroup) {
+                            dataSearch.push(new Option(option));
                         }
-                    });
-                }
-                else {
-                    let optOptions = [];
-                    dataObj.options.forEach((option) => {
-                        if (!filter || filter(option)) {
+                        else {
                             optOptions.push(new Option(option));
                         }
-                    });
-                    if (optOptions.length > 0) {
-                        dataSearch.push(new Optgroup(dataObj));
                     }
+                });
+                if (optOptions.length > 0) {
+                    let optgroup = new Optgroup(dataObj);
+                    optgroup.options = optOptions;
+                    dataSearch.push(optgroup);
                 }
             }
             if (dataObj instanceof Option) {
@@ -944,7 +981,6 @@ 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.options.some((o) => o.selected)) {
                         optgroupClosable.classList.add(this.classes.open);
@@ -1197,16 +1233,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) {
@@ -1351,6 +1390,7 @@ class Select {
                 this.select.appendChild(this.createOption(d));
             }
         }
+        this.select.dispatchEvent(new Event('change'));
         this.changeListen(true);
     }
     createOptgroup(optgroup) {
@@ -1410,42 +1450,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 = {
@@ -1578,6 +1582,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) {
@@ -1590,23 +1595,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) {
@@ -1692,6 +1708,13 @@ class SlimSelect {
 var script = vue.defineComponent({
     name: 'SlimSelect',
     props: {
+        modelValue: {
+            type: [String, Array, undefined],
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
         data: {
             type: Array,
         },
@@ -1702,6 +1725,7 @@ var script = vue.defineComponent({
             type: Object,
         },
     },
+    emits: ['update:modelValue'],
     data() {
         return {
             slim: null,
@@ -1720,7 +1744,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) {
@@ -1737,6 +1778,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;
@@ -1744,12 +1806,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/slimselect.vue.d.ts

@@ -2,8 +2,15 @@
 import { PropType } from 'vue';
 import SlimSelect, { Events } from '../slim-select';
 import Settings from '../slim-select/settings';
-import { DataArrayPartial } from '../slim-select/store';
+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>;
     };
@@ -15,7 +22,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, unknown, {
     slim: SlimSelect | null;
-}, {}, {
+}, {
+    value: {
+        get(): string | string[];
+        set(value: string | string[]): void;
+    };
+}, {
     getSlimSelect(): {
         selectEl: HTMLSelectElement;
         settings: {
@@ -65,34 +77,34 @@ declare const _default: import("vue").DefineComponent<{
             removeSelectChangeListener: () => void;
             addValueChangeListener: (func: (value: string[]) => void) => void;
             removeValueChangeListener: () => void;
-            valueChange: (ev: Event) => any;
+            valueChange: (ev: Event) => boolean;
             getData: () => DataArrayPartial;
             getDataFromOptgroup: (optgroup: HTMLOptGroupElement) => import("../slim-select/store").OptgroupOptional;
-            getDataFromOption: (option: HTMLOptionElement) => import("../slim-select/store").Option;
+            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: import("../slim-select/store").Option) => HTMLOptionElement;
+            createOption: (info: Option) => HTMLOptionElement;
             destroy: () => void;
         };
         store: {
             validateDataArray: (data: DataArrayPartial | import("../slim-select/store").DataArray) => Error | null;
-            validateOption: (option: import("../slim-select/store").OptionOptional | import("../slim-select/store").Option) => 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: () => import("../slim-select/store").Option[];
+            getDataOptions: () => Option[];
             addOption: (option: import("../slim-select/store").OptionOptional) => void;
             setSelectedBy: (selectedType: "value" | "id", selectedValues: string[]) => void;
             getSelected: () => string[];
-            getSelectedOptions: () => import("../slim-select/store").Option[];
+            getSelectedOptions: () => Option[];
             getSelectedIDs: () => string[];
             getOptgroupByID: (id: string) => import("../slim-select/store").Optgroup | null;
-            getOptionByID: (id: string) => import("../slim-select/store").Option | null;
-            search: (search: string, searchFilter: (opt: import("../slim-select/store").Option, search: string) => boolean) => import("../slim-select/store").DataArray;
-            filter: (filter: ((opt: import("../slim-select/store").Option) => boolean) | null, includeOptgroup: boolean) => import("../slim-select/store").DataArray;
+            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: {
@@ -130,30 +142,30 @@ declare const _default: import("vue").DefineComponent<{
             };
             store: {
                 validateDataArray: (data: DataArrayPartial | import("../slim-select/store").DataArray) => Error | null;
-                validateOption: (option: import("../slim-select/store").OptionOptional | import("../slim-select/store").Option) => 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: () => import("../slim-select/store").Option[];
+                getDataOptions: () => Option[];
                 addOption: (option: import("../slim-select/store").OptionOptional) => void;
                 setSelectedBy: (selectedType: "value" | "id", selectedValues: string[]) => void;
                 getSelected: () => string[];
-                getSelectedOptions: () => import("../slim-select/store").Option[];
+                getSelectedOptions: () => Option[];
                 getSelectedIDs: () => string[];
                 getOptgroupByID: (id: string) => import("../slim-select/store").Optgroup | null;
-                getOptionByID: (id: string) => import("../slim-select/store").Option | null;
-                search: (search: string, searchFilter: (opt: import("../slim-select/store").Option, search: string) => boolean) => import("../slim-select/store").DataArray;
-                filter: (filter: ((opt: import("../slim-select/store").Option) => boolean) | null, includeOptgroup: boolean) => import("../slim-select/store").DataArray;
+                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: import("../slim-select/store").Option) => void;
+                addOption: (option: Option) => void;
                 search: (search: string) => void;
-                beforeChange?: ((newVal: import("../slim-select/store").Option[], oldVal: import("../slim-select/store").Option[]) => boolean | void) | undefined;
-                afterChange?: ((newVal: import("../slim-select/store").Option[]) => void) | undefined;
+                beforeChange?: ((newVal: Option[], oldVal: Option[]) => boolean | void) | undefined;
+                afterChange?: ((newVal: Option[]) => void) | undefined;
             };
             main: {
                 main: HTMLDivElement;
@@ -230,7 +242,7 @@ declare const _default: import("vue").DefineComponent<{
             mainFocus: (trigger: boolean) => void;
             placeholder: () => HTMLDivElement;
             renderValues: () => void;
-            multipleValue: (option: import("../slim-select/store").Option) => HTMLDivElement;
+            multipleValue: (option: Option) => HTMLDivElement;
             contentDiv: () => import("../slim-select/render").Content;
             moveContent: () => void;
             searchDiv: () => import("../slim-select/render").Search;
@@ -241,7 +253,7 @@ declare const _default: import("vue").DefineComponent<{
             renderError: (error: string) => void;
             renderSearching: () => void;
             renderOptions: (data: import("../slim-select/store").DataArray) => void;
-            option: (option: import("../slim-select/store").Option) => HTMLDivElement;
+            option: (option: Option) => HTMLDivElement;
             destroy: () => void;
             moveContentAbove: () => void;
             moveContentBelow: () => void;
@@ -250,10 +262,10 @@ declare const _default: import("vue").DefineComponent<{
         };
         events: {
             search?: ((searchValue: string, currentData: import("../slim-select/store").DataArray) => DataArrayPartial | Promise<DataArrayPartial>) | undefined;
-            searchFilter?: ((option: import("../slim-select/store").Option, search: string) => boolean) | 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: import("../slim-select/store").Option[], oldVal: import("../slim-select/store").Option[]) => boolean | void) | undefined;
-            afterChange?: ((newVal: import("../slim-select/store").Option[]) => void) | undefined;
+            beforeChange?: ((newVal: Option[], oldVal: Option[]) => boolean | void) | undefined;
+            afterChange?: ((newVal: Option[]) => void) | undefined;
             beforeOpen?: (() => void) | undefined;
             afterOpen?: (() => void) | undefined;
             beforeClose?: (() => void) | undefined;
@@ -272,7 +284,14 @@ declare const _default: import("vue").DefineComponent<{
         search: (value: string) => void;
         destroy: () => void;
     } | null;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, 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>;
     };
@@ -282,5 +301,9 @@ declare const _default: import("vue").DefineComponent<{
     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.1",
+  "version": "1.2.1",
   "description": "Vue integration",
   "repository": {
     "type": "git",

package/src/vue/rollup.config.mjs

@@ -11,7 +11,7 @@ export default [
       file: './dist/slimselectvue.es.js',
     },
     external: ['vue', 'slim-select'],
-    plugins: [resolve(), typescript(), vue()],
+    plugins: [resolve(), typescript({ clean: true }), vue()],
   },
 
   // SSR build.
@@ -23,7 +23,7 @@ export default [
       file: './dist/slimselectvue.ssr.js',
     },
     external: ['vue', 'slim-select'],
-    plugins: [resolve(), typescript(), vue({ template: { optimizeSSR: true } })],
+    plugins: [resolve(), typescript({ clean: true }), vue({ template: { optimizeSSR: true } })],
   },
 
   // Browser build.
@@ -39,6 +39,6 @@ export default [
       },
     },
     external: ['vue', 'slim-select'],
-    plugins: [resolve(), typescript(), vue()],
+    plugins: [resolve(), typescript({ clean: true }), vue()],
   },
 ]

package/src/vue/slimselect.vue

@@ -3,11 +3,18 @@ import { defineComponent, PropType } from 'vue'
 
 import SlimSelect, { Config, Events } from '../slim-select'
 import Settings from '../slim-select/settings'
-import { DataArrayPartial } from '../slim-select/store'
+import { DataArrayPartial, Option } from '../slim-select/store'
 
 export default defineComponent({
   name: 'SlimSelect',
   props: {
+    modelValue: {
+      type: [String, Array, undefined] as PropType<string | string[] | undefined>,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
     data: {
       type: Array as PropType<DataArrayPartial>,
     },
@@ -18,6 +25,7 @@ export default defineComponent({
       type: Object as PropType<Events>,
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       slim: null as SlimSelect | null,
@@ -42,9 +50,37 @@ export default defineComponent({
     if (this.events) {
       config.events = this.events
     }
+    if (!config.events) {
+      config.events = {}
+    }
+
+    // Wrap config.events.afterChange to run emitUpdateSelectedValues
+    const ogAfterChange = config.events.afterChange
+    config.events.afterChange = (newVal: Option[]) => {
+      const value = this.multiple ? newVal.map((option) => option.value) : newVal[0].value
+
+      // Check if value is different from modelValue
+      if (this.value !== value) {
+        this.value = value
+      }
+
+      // If they had an original afterChange, run it
+      if (config.events && ogAfterChange) {
+        ogAfterChange(newVal)
+      }
+    }
 
     // Initialize SlimSelect
     this.slim = new SlimSelect(config)
+
+    // Get SlimSelect selected values
+    let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0]
+
+    // Check if modelValue is the same as the value of the select
+    if (this.value !== selected) {
+      // If not, set the value of the select to the modelValue
+      this.value = selected
+    }
   },
   beforeUnmount() {
     if (this.slim) {
@@ -61,6 +97,34 @@ export default defineComponent({
       deep: true,
     },
   },
+  computed: {
+    value: {
+      get(): string | string[] {
+        const multi = this.$props.multiple
+        const val = this.$props.modelValue
+
+        // If modelValue is undefined, return empty string or array
+        if (val === undefined) {
+          return multi ? [] : ''
+        }
+
+        // If its multiple and the modelValue is a string, return an array with the string
+        if (multi && typeof val === 'string') {
+          return [val]
+        }
+
+        // If its not multiple and the modelValue is an array, return the first item
+        if (!multi && Array.isArray(val)) {
+          return val[0]
+        }
+
+        return multi ? [] : ''
+      },
+      set(value: string | string[]) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
   methods: {
     // This allows via a ref to call the SlimSelect methods
     getSlimSelect() {
@@ -71,7 +135,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <select ref="slim">
+  <select :multiple="multiple" ref="slim">
     <slot />
   </select>
 </template>