@enso-ui/select 3.0.11 → 3.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/select",
-  "version": "3.0.11",
+  "version": "3.0.15",
   "description": "Select",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "@enso-ui/search-mode": "^3.0",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.2.0",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "bulma": "^0.9.0",
     "lodash": "^4.17.10",

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,14 +1,17 @@
 <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,
-                    disabled, displayLabel, filterBindings, filterEvents, hasOptions, hasSelection,
-                    highlight, i18n, isSelected, itemEvents, modeSelector, modeBindings, modeEvents,
-                    multiple, needsSearch, noResults, reload, loading, options, query, reset,
-                    selection, selectionBindings, selectionEvents, taggable, taggableBindings,
-                    taggableEvents, trackBy,
+                    allowsSelection, canAddTag, clearControl, clearEvents,
+                    dropdownDisabled, disableClear, disabled, displayLabel,
+                    filterBindings, filterEvents, hasOptions, hasSelection,
+                    highlight, i18n, isSelected, itemEvents, modeSelector,
+                    modeBindings, modeEvents, multiple, needsSearch, noResults,
+                    reload, loading, options, query, reset, selection,
+                    selectionBindings, selectionEvents, taggable,
+                    taggableBindings, taggableEvents, trackBy,
                 }">
                 <dropdown :disabled="dropdownDisabled"
                     :manual="multiple || canAddTag || !allowsSelection"
@@ -127,7 +130,7 @@
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCheck }
-    from '@fortawesome/free-solid-svg-icons';
+from '@fortawesome/free-solid-svg-icons';
 import { focus, clickOutside } from '@enso-ui/directives';
 import { Dropdown, DropdownItem } from '@enso-ui/dropdown/bulma';
 import DropdownIndicator from '@enso-ui/dropdown-indicator';
@@ -152,6 +155,8 @@ export default {
         SearchMode,
     },
 
+    inheritAttrs: false,
+
     props: {
         hasError: {
             type: Boolean,
@@ -197,7 +202,6 @@ export default {
 };
 </script>
 
-
 <style lang="scss">
 @import 'bulma/sass/utilities/derived-variables';
 

package/src/renderless/CoreSelect.vue

@@ -3,9 +3,10 @@ import { debounce } from 'lodash';
 import Modes from '@enso-ui/search-mode/src/modes';
 
 export default {
-
     name: 'CoreSelect',
 
+    inheritAttrs: false,
+
     props: {
         customParams: {
             type: Object,
@@ -29,6 +30,10 @@ export default {
                 throw error;
             },
         },
+        http: {
+            default: null,
+            type: Function,
+        },
         i18n: {
             type: Function,
             default: v => v,
@@ -106,8 +111,6 @@ export default {
         'selection', 'update', 'update:modelValue',
     ],
 
-    inheritAttrs: false,
-
     data: v => ({
         allowsSelection: true,
         internalValue: null,
@@ -162,7 +165,7 @@ export default {
                 ? this.optionList.filter(option => this.modelValue
                     .some(val => this.valueMatchesOption(val, option)))
                 : this.optionList
-                .find(option => this.valueMatchesOption(this.modelValue, option)) || null;
+                    .find(option => this.valueMatchesOption(this.modelValue, option)) || null;
         },
         serverSide() {
             return this.source !== 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() {