inertia-bootstrap-forms 1.0.91 → 1.0.93

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.93",
     "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,
@@ -101,6 +101,19 @@ export default defineComponent({
     }
   },
   methods: {
+    getKeyFromItem(item) {
+      return ((this.key ? item[this.key] : item?.id ?? item?.name ?? item?.label ?? item?.value) ?? item)?.toString();
+    },
+    getLabelFromItem(item) {
+      return ((this.key ? item[this.key] : item?.id ?? item?.name ?? item?.label ?? item?.value) ?? item)
+    },
+    selected(item) {
+      if (this.multiple) {
+        return (this.selectedValue || []).includes(this.getKeyFromItem(item));
+      }
+
+      return (this.getKeyFromItem(item)) === this.modelValue?.toString()
+    },
     init() {
       if (this.choices) {
         this.destroy();
@@ -125,22 +138,28 @@ 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 }],
+          [{value: '', label: this.localeTranslates[this.currentLocale]['searchingPlaceholder'] || 'Searching...', disabled: true}],
           'value',
           'label',
           true  // replaceChoices
       );
     },
     async doSearch(searchTerm) {
+      this.$emit('searching', searchTerm)
       if (!this.search?.url) return;
 
-      await this.setLoading();
-
       if (this.searchController) {
         this.searchController.abort();
       }
@@ -155,8 +174,8 @@ export default defineComponent({
 
         await this.choices.setChoices(
             data.map(item => ({
-              value: item.id,
-              label: item.name || item.label || item.value,
+              value: this.getKeyFromItem(item),
+              label: this.getLabelFromItem(item),
             })),
             'value',
             'label',
@@ -164,13 +183,14 @@ 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);
         }
       }
-    }  },
+    }
+  },
   mounted() {
     if (this.locale === 'en' && document.dir === 'rtl') {
       this.currentLocale = 'fa';
@@ -185,6 +205,7 @@ export default defineComponent({
     return {
       choices: null,
       loading: false,
+      searchDebounceTimer: null,
       searchController: null,
       currentLocale: this.locale,
       localeTranslates: {
@@ -212,15 +233,12 @@ export default defineComponent({
         v-model="modelValue"
         class="form-control-select"
         :class="{
-        'form-control-select--loading': loading,
-        'is-invalid': form.errors[name]
-      }"
-        :placeholder="placeholder"
+          'form-control-select--loading': loading,
+          'is-invalid': form.errors[name]
+        }"
         ref="input">
-      <option
-          :value="((key ? item[key] : item?.name ?? item?.label ?? item?.value) ?? item)" v-for="(item, index) in options"
-          :selected="multiple ? (selectedValue || []).includes(item.id || item) : (item?.id?.toString() || item) === modelValue?.toString()">
-        {{ (label ? item[label] : item?.name ?? item?.label ?? item?.value) ?? item }}
+      <option :value="getKeyFromItem(item)" v-for="(item, index) in options" :selected="selected(item)">
+        {{ getLabelFromItem(item) }}
       </option>
     </select>
   </div>