@enso-ui/select 3.0.10 → 3.0.14

package/package.json

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

package/src/bulma/EnsoSelect.vue

@@ -1,8 +1,9 @@
 <template>
-    <vue-select v-bind="$attrs"
+    <vue-select
+        :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

@@ -1,6 +1,7 @@
 <template>
-    <div class="vue-select">
-        <core-select v-bind="{...$attrs, class: undefined}"
+    <div class="vue-select"
+        :class="$attrs.class">
+        <core-select v-bind="$attrs"
             ref="select">
             <template #default="{
                     allowsSelection, canAddTag, clearControl, clearEvents, dropdownDisabled, disableClear,
@@ -58,15 +59,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"
@@ -142,6 +143,8 @@ export default {
 
     directives: { focus, clickOutside },
 
+    inheritAttrs: false,
+
     components: {
         CoreSelect,
         Dropdown,
@@ -199,6 +202,8 @@ export default {
 
 
 <style lang="scss">
+@import 'bulma/sass/utilities/derived-variables';
+
 .vue-select {
     .dropdown {
         width: 100%;
@@ -211,6 +216,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 +300,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

@@ -3,9 +3,15 @@ import { debounce } from 'lodash';
 import Modes from '@enso-ui/search-mode/src/modes';
 
 export default {
-
     name: 'CoreSelect',
 
+    emits: [
+        'add-tag', 'clear', 'deselect', 'fetch', 'input', 'select',
+        'selection', 'update', 'update:modelValue',
+    ],
+
+    inheritAttrs: false,
+
     props: {
         customParams: {
             type: Object,
@@ -29,6 +35,10 @@ export default {
                 throw error;
             },
         },
+        http: {
+            default: null,
+            type: Function,
+        },
         i18n: {
             type: Function,
             default: v => v,
@@ -101,13 +111,6 @@ export default {
         },
     },
 
-    emits: [
-        'add-tag', 'clear', 'deselect', 'fetch', 'input', 'select',
-        'selection', 'update', 'update:modelValue',
-    ],
-
-    inheritAttrs: false,
-
     data: v => ({
         allowsSelection: true,
         internalValue: null,
@@ -227,6 +230,10 @@ export default {
     },
 
     created() {
+        if(!this.http && this.source !== null) {
+            throw Error('Using the serverside mode requires providing a http client');
+        }
+
         this.init();
     },
 
@@ -278,10 +285,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 }) => {
@@ -291,7 +298,7 @@ export default {
                 this.loading = false;
             }).catch(error => {
                 this.loading = false;
-                if (!axios.isCancel(error)) {
+                if (!this.http.isCancel(error)) {
                     this.errorHandler(error);
                 }
             });
@@ -361,7 +368,7 @@ export default {
         },
         reload() {
             if (!this.hasOptions && !this.readonly && !this.disabled) {
-                this.fetch();
+                this.fetchIfServerSide();
             }
         },
         requestParams() {