inertia-bootstrap-forms 1.0.91 → 1.0.92

package/index.d.ts

@@ -328,6 +328,7 @@ export const Select2Input: DefineComponent<{
 {
     'update:modelValue': (data) => void,
     'search': (event) => void,
+    'searching': (query) => void,
     'change': (file) => void,
     'selected': () => void,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.91",
+    "version": "1.0.92",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/Select2Input.vue

@@ -4,7 +4,7 @@ import Choices from 'choices.js';
 import {computed, defineComponent, inject} from "vue";
 
 export default defineComponent({
-  emits: ['update:modelValue', 'search', 'change', 'selected'],
+  emits: ['update:modelValue', 'search', 'searching', 'change', 'selected'],
   props: {
     name: {
       type: String,
@@ -125,9 +125,16 @@ export default defineComponent({
       this.choices.destroy();
     },
     searchHandle(event) {
-      this.doSearch(event.detail.value);
+      this.$emit('search', event)
+      clearTimeout(this.searchDebounceTimer);
+
+      this.showLoading();
+
+      this.searchDebounceTimer = setTimeout(() => {
+        this.doSearch(event.detail.value);
+      }, 400);
     },
-    async setLoading() {
+    async showLoading() {
       this.loading = true;
       await this.choices.setChoices(
           [{ value: '', label: this.localeTranslates[this.currentLocale]['searchingPlaceholder'] || 'Searching...', disabled: true }],
@@ -137,10 +144,9 @@ export default defineComponent({
       );
     },
     async doSearch(searchTerm) {
+      this.$emit('searching', searchTerm)
       if (!this.search?.url) return;
 
-      await this.setLoading();
-
       if (this.searchController) {
         this.searchController.abort();
       }
@@ -155,8 +161,8 @@ export default defineComponent({
 
         await this.choices.setChoices(
             data.map(item => ({
-              value: item.id,
-              label: item.name || item.label || item.value,
+              value: ((this.key ? item[this.key] : item?.name ?? item?.label ?? item?.value) ?? item),
+              label: (this.label ? item[this.label] : item?.name ?? item?.label ?? item?.value) ?? item,
             })),
             'value',
             'label',
@@ -164,8 +170,8 @@ export default defineComponent({
         );
         this.loading = false;
       } catch (err) {
-        this.loading = false;
         if (err.name !== 'AbortError') {
+          this.loading = false;
           console.error(err);
           await this.choices.setChoices([], 'value', 'label', true);
         }
@@ -185,6 +191,7 @@ export default defineComponent({
     return {
       choices: null,
       loading: false,
+      searchDebounceTimer: null,
       searchController: null,
       currentLocale: this.locale,
       localeTranslates: {