@webitel/ui-sdk 24.12.34 → 24.12.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.34",
+  "version": "24.12.36",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-select/mixins/multiselectMixin.js

@@ -49,9 +49,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * pass "value" prop as string, receive @input event with string,
+     * but pass options as objects and calculate value from options by this prop
+     */
+    useValueFromOptionsByProp: {
+      type: String,
+      default: '',
+    },
   },
   data: () => ({
     apiOptions: [],
+    cachedOptionsMap: {}, // is needed for props.useValueFromOptionsByProp
     isLoading: false,
     defaultOptionLabel: 'name',
 
@@ -73,9 +82,16 @@ export default {
     showIntersectionObserver() {
       return this.isApiMode && !this.isLoading && this.apiOptions.length;
     },
+    // vue-multiselect doesn't show placeholder if value is empty object
     selectValue() {
-      // vue-multiselect doesn't show placeholder if value is empty object
-      return this.isValue ? this.value : '';
+      if (!this.isValue) return '';
+
+      if (this.useValueFromOptionsByProp) {
+        const valueFromOptions = this.cachedOptionsMap[this.value];
+        if (valueFromOptions) return valueFromOptions;
+      }
+
+      return this.value;
     },
 
     selectOptions() {
@@ -139,7 +155,11 @@ export default {
     },
 
     input(value) {
-      this.$emit('input', value);
+      const emittedValue = this.useValueFromOptionsByProp
+        ? value[this.useValueFromOptionsByProp]
+        : value;
+      this.$emit('input', emittedValue); // vue 2
+      this.$emit('update:model-value', emittedValue); // vue 3
     },
 
     close(event) {
@@ -154,6 +174,16 @@ export default {
       // load options if becomes enabled
       if (!this.disabled) this.fetchOptions();
     },
+    options: {
+      handler() {
+        if (this.trackBy === null) return; // then, options are primitives
+
+        for (const opt of this.options) {
+          this.cachedOptionsMap[opt[this.useValueFromOptionsByProp || this.trackBy]] = opt;
+        }
+      },
+      immediate: true,
+    },
   },
 
   created() {

package/src/components/wt-select/wt-select.vue

@@ -154,7 +154,15 @@ export default {
     taggableMixin,
   ],
   props: {
-    value: {},
+    // vue 3
+    modelValue: {},
+
+    // vue 2 fallback
+    value: {
+      default: (props) => {
+        return props.modelValue;
+      },
+    },
 
     multiple: {
       type: Boolean,
@@ -184,7 +192,8 @@ export default {
   emits: [
     'reset',
     'search-change',
-    'input',
+    'input', // vue 2
+    'update:modelValue', // vue 3
     'closed',
     'custom-value', // fires when allowCustomValues and new customValue is added
   ],