@enso-ui/select 3.0.9 → 3.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/select",
-  "version": "3.0.9",
+  "version": "3.0.13",
   "description": "Select",
   "main": "index.js",
   "scripts": {

package/src/bulma/EnsoSelect.vue

@@ -1,8 +1,9 @@
 <template>
     <vue-select v-bind="$attrs"
+        :http="http"
         :i18n="i18n"
         :error-handler="errorHandler"
-        :source="source ? route(source) : null"   
+        :source="source ? route(source) : null"
         ref="select">
          <template #option="props">
             <slot name="option"
@@ -19,7 +20,7 @@ export default {
 
     components: { VueSelect },
 
-    inject: ['errorHandler', 'i18n', 'route'],
+    inject: ['errorHandler', 'http', 'i18n', 'route'],
 
     props: {
         source: {

package/src/bulma/VueSelect.vue

@@ -58,15 +58,15 @@
                             <dropdown-indicator :open="open" v-if="!disabled"/>
                         </button>
                     </template>
-                    <template #controls
+                    <template #controls="{ keydown }"
                         v-if="needsSearch">
-                        <div class="dropdown-item search">
+                        <div class="search">
                             <div class="control has-icons-right">
                                 <input class="input"
                                     v-bind="filterBindings"
                                     type="text"
                                     :placeholder="i18n(labels.search)"
-                                    v-on="filterEvents"
+                                    v-on="{ ...filterEvents, keydown }"
                                     v-focus>
                                 <search-mode class="is-right icon is-small search-mode"
                                     v-bind="modeBindings"
@@ -199,6 +199,8 @@ export default {
 
 
 <style lang="scss">
+@import 'bulma/sass/utilities/derived-variables';
+
 .vue-select {
     .dropdown {
         width: 100%;
@@ -211,6 +213,10 @@ export default {
                 height: unset;
                 min-height: 2.2125em;
 
+                &.has-error {
+                    border-color: $danger;
+                }
+
                 .control-display {
                     &.with-clear-button {
                         max-width: calc(100% - 2.5em);
@@ -291,25 +297,25 @@ export default {
             .dropdown-content {
                 width: 100%;
 
+                .search {
+                    padding: 0 0.375rem 0.6rem;
+
+                    .input {
+                        height: 2em;
+                    }
+
+                    .search-mode {
+                        right: 0.3em;
+                        pointer-events: all;
+                    }
+                }
+
                 .dropdown-item {
                     text-overflow: ellipsis;
                     overflow-x: hidden;
                     white-space: nowrap;
                     padding: 0.375rem 2rem 0.375rem 0.6rem;
 
-                    &.search {
-                        padding: 0 0.375rem 0.6rem;
-
-                        .input {
-                            height: 2em;
-                        }
-
-                        .search-mode {
-                            right: 0.3em;
-                            pointer-events: all;
-                        }
-                    }
-
                     .label.tag {
                         position: absolute;
                         padding: 0.3rem;

package/src/renderless/CoreSelect.vue

@@ -29,6 +29,10 @@ export default {
                 throw error;
             },
         },
+        http: {
+            default: null,
+            type: Function,
+        },
         i18n: {
             type: Function,
             default: v => v,
@@ -106,6 +110,8 @@ export default {
         'selection', 'update', 'update:modelValue',
     ],
 
+    inheritAttrs: false,
+
     data: v => ({
         allowsSelection: true,
         internalValue: null,
@@ -225,6 +231,10 @@ export default {
     },
 
     created() {
+        if(!this.http && this.source !== null) {
+            throw Error('Using the serverside mode requires providing a http client');
+        }
+
         this.init();
     },
 
@@ -276,10 +286,10 @@ export default {
                 this.ongoingRequest.cancel();
             }
 
-            this.ongoingRequest = axios.CancelToken.source();
+            this.ongoingRequest = this.http.CancelToken.source();
             this.loading = true;
 
-            axios.get(this.source, {
+            this.http.get(this.source, {
                 params: this.requestParams(),
                 cancelToken: this.ongoingRequest.token,
             }).then(({ data }) => {
@@ -289,7 +299,7 @@ export default {
                 this.loading = false;
             }).catch(error => {
                 this.loading = false;
-                if (!axios.isCancel(error)) {
+                if (!this.http.isCancel(error)) {
                     this.errorHandler(error);
                 }
             });
@@ -359,7 +369,7 @@ export default {
         },
         reload() {
             if (!this.hasOptions && !this.readonly && !this.disabled) {
-                this.fetch();
+                this.fetchIfServerSide();
             }
         },
         requestParams() {