slim-select 2.2.3 → 2.3.0

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

@@ -1,7 +1,6 @@
 /// <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: {
@@ -15,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataArrayPartial>;
     };
     settings: {
-        type: PropType<Settings>;
+        type: PropType<Partial<import("../slim-select/settings").default>>;
     };
     events: {
         type: PropType<Events>;
@@ -44,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
                 ref: () => NodeJS.Timeout;
                 unref: () => NodeJS.Timeout;
             } | null;
-            isEnabled: boolean;
+            disabled: boolean;
             alwaysOpen: boolean;
             showSearch: boolean;
             searchPlaceholder: string;
@@ -62,21 +61,20 @@ declare const _default: import("vue").DefineComponent<{
             minSelected: number;
             maxSelected: number;
             timeoutDelay: number;
+            maxValuesShown: number;
+            maxValuesMessage: string;
         };
         select: {
             select: HTMLSelectElement;
-            listen: boolean;
-            onSelectChange?: ((data: DataArrayPartial) => void) | undefined;
             onValueChange?: ((value: string[]) => void) | undefined;
+            onDisabledChange?: ((disabled: boolean) => void) | undefined;
+            onOptionsChange?: ((data: DataArrayPartial) => void) | undefined;
+            listen: boolean;
             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;
+            changeListen: (listen: boolean) => void;
             valueChange: (ev: Event) => boolean;
             getData: () => DataArrayPartial;
             getDataFromOptgroup: (optgroup: HTMLOptGroupElement) => import("../slim-select/store").OptgroupOptional;
@@ -97,7 +95,7 @@ declare const _default: import("vue").DefineComponent<{
             getData: () => import("../slim-select/store").DataArray;
             getDataOptions: () => Option[];
             addOption: (option: import("../slim-select/store").OptionOptional) => void;
-            setSelectedBy: (selectedType: "value" | "id", selectedValues: string[]) => void;
+            setSelectedBy: (selectedType: "id" | "value", selectedValues: string[]) => void;
             getSelected: () => string[];
             getSelectedOptions: () => Option[];
             getSelectedIDs: () => string[];
@@ -121,7 +119,7 @@ declare const _default: import("vue").DefineComponent<{
                     ref: () => NodeJS.Timeout;
                     unref: () => NodeJS.Timeout;
                 } | null;
-                isEnabled: boolean;
+                disabled: boolean;
                 alwaysOpen: boolean;
                 showSearch: boolean;
                 searchPlaceholder: string;
@@ -139,6 +137,8 @@ declare const _default: import("vue").DefineComponent<{
                 minSelected: number;
                 maxSelected: number;
                 timeoutDelay: number;
+                maxValuesShown: number;
+                maxValuesMessage: string;
             };
             store: {
                 validateDataArray: (data: DataArrayPartial | import("../slim-select/store").DataArray) => Error | null;
@@ -148,7 +148,7 @@ declare const _default: import("vue").DefineComponent<{
                 getData: () => import("../slim-select/store").DataArray;
                 getDataOptions: () => Option[];
                 addOption: (option: import("../slim-select/store").OptionOptional) => void;
-                setSelectedBy: (selectedType: "value" | "id", selectedValues: string[]) => void;
+                setSelectedBy: (selectedType: "id" | "value", selectedValues: string[]) => void;
                 getSelected: () => string[];
                 getSelectedOptions: () => Option[];
                 getSelectedIDs: () => string[];
@@ -198,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{
                 placeholder: string;
                 values: string;
                 single: string;
+                max: string;
                 value: string;
                 valueText: string;
                 valueDelete: string;
@@ -258,7 +259,7 @@ declare const _default: import("vue").DefineComponent<{
             moveContentAbove: () => void;
             moveContentBelow: () => void;
             ensureElementInView: (container: HTMLElement, element: HTMLElement) => void;
-            putContent: (el: HTMLElement, isOpen: boolean) => "up" | "down";
+            putContent: () => "up" | "down";
         };
         events: {
             search?: ((searchValue: string, currentData: import("../slim-select/store").DataArray) => DataArrayPartial | Promise<DataArrayPartial>) | undefined;
@@ -284,6 +285,7 @@ declare const _default: import("vue").DefineComponent<{
         search: (value: string) => void;
         destroy: () => void;
     } | null;
+    getCleanValue(val: string | string[] | undefined): string | string[];
 }, 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>;
@@ -296,7 +298,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataArrayPartial>;
     };
     settings: {
-        type: PropType<Settings>;
+        type: PropType<Partial<import("../slim-select/settings").default>>;
     };
     events: {
         type: PropType<Events>;

package/src/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slim-select/vue",
   "private": false,
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Vue integration",
   "repository": {
     "type": "git",

package/src/vue/slimselect.vue

@@ -2,7 +2,7 @@
 import { defineComponent, PropType } from 'vue'
 
 import SlimSelect, { Config, Events } from '../slim-select'
-import Settings from '../slim-select/settings'
+import { SettingsPartial } from '../slim-select/settings'
 import { DataArrayPartial, Option } from '../slim-select/store'
 
 export default defineComponent({
@@ -19,7 +19,7 @@ export default defineComponent({
       type: Array as PropType<DataArrayPartial>,
     },
     settings: {
-      type: Object as PropType<Settings>,
+      type: Object as PropType<SettingsPartial>,
     },
     events: {
       type: Object as PropType<Events>,
@@ -54,7 +54,7 @@ export default defineComponent({
       config.events = {}
     }
 
-    // Wrap config.events.afterChange to run emitUpdateSelectedValues
+    // Wrap config.events.afterChange to run value update
     const ogAfterChange = config.events.afterChange
     config.events.afterChange = (newVal: Option[]) => {
       const value = this.multiple ? newVal.map((option) => option.value) : newVal[0].value
@@ -79,7 +79,7 @@ export default defineComponent({
     // 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
+      this.slim.setSelected(this.value)
     }
   },
   beforeUnmount() {
@@ -88,6 +88,13 @@ export default defineComponent({
     }
   },
   watch: {
+    modelValue: {
+      handler: function (newVal: string | string[] | undefined) {
+        // Set the value of the select to the newVal
+        this.slim?.setSelected(this.getCleanValue(newVal))
+      },
+      immediate: true,
+    },
     data: {
       handler: function (newData) {
         if (this.slim) {
@@ -100,25 +107,7 @@ export default defineComponent({
   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 ? [] : ''
+        return this.getCleanValue(this.$props.modelValue)
       },
       set(value: string | string[]) {
         this.$emit('update:modelValue', value)
@@ -130,6 +119,21 @@ export default defineComponent({
     getSlimSelect() {
       return this.slim
     },
+    getCleanValue(val: string | string[] | undefined): string | string[] {
+      const multi = this.$props.multiple
+
+      // If its multiple and the modelValue is a string, return an array with the string
+      if (typeof val === 'string') {
+        return multi ? [val] : val
+      }
+
+      // If its not multiple and the modelValue is an array, return the first item
+      if (Array.isArray(val)) {
+        return multi ? val : val[0]
+      }
+
+      return multi ? [] : ''
+    },
   },
 })
 </script>