inertia-bootstrap-forms 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",
@@ -42,9 +42,9 @@
         "vue3-persian-datetime-picker": "^1.2.2"
     },
     "peerDependencies": {
-        "vue": "^3.0.0",
         "@inertiajs/vue3": "^2.0.3",
-        "vue3-bootstrap-components": "^1.0"
+        "vue": "^3.0.0",
+        "vue3-bootstrap-components": "file:../novinvision-vue-bootstrap-components"
     },
     "devDependencies": {
         "sass-embedded": "^1.89.2",

package/src/Select2Input.vue

@@ -93,10 +93,10 @@ export default {
       this.$refs.input.removeEventListener('search', this.searchHandle);
       this.choices.destroy();
     },
-    searchHandle(event){
+    searchHandle(event) {
       this.doSearch(event.detail.value);
     },
-    async setLoading(){
+    async setLoading() {
       this.loading = true;
       this.choices.clearChoices();
       await this.choices.setChoices(
@@ -111,7 +111,7 @@ export default {
           true
       );
     },
-    async doSearch(searchTerm){
+    async doSearch(searchTerm) {
       await this.setLoading();
 
       if (this.searchController) {
@@ -148,7 +148,7 @@ export default {
     }
   },
   mounted() {
-    if(this.locale === 'en' && document.dir === 'rtl'){
+    if (this.locale === 'en' && document.dir === 'rtl') {
       this.currentLocale = 'fa';
     }
 
@@ -164,7 +164,7 @@ export default {
       searchController: null,
       currentLocale: this.locale,
       localeTranslates: {
-        'fa' : {
+        'fa': {
           placeholderValue: 'انتخاب کنید...',
           searchPlaceholderValue: 'برای جستجو تایپ کنید...',
           searchingPlaceholder: 'در حال جستجو...',
@@ -178,13 +178,22 @@ export default {
 }
 </script>
 <template>
-  <select
-      :name="name"
-      v-model="modelValue"
-      class="form-control-select"
-      :class="{'form-control-select--loading': loading}"
-      :placeholder="placeholder"
-      ref="input">
-    <option :value="item.id" v-for="(item, key) in options">{{item.name}}</option>
-  </select>
+  <div class="select2-controller" :class="{
+        'is-invalid': form.errors[name]
+  }">
+    <select
+        v-bind="$props"
+        :name="name"
+        v-model="modelValue"
+        class="form-control-select"
+        :class="{
+        'form-control-select--loading': loading,
+        'is-invalid': form.errors[name]
+      }"
+        :placeholder="placeholder"
+        ref="input">
+      <option :value="item.id" v-for="(item, key) in options" :selected="modelValue === item.id">{{ item.name }}
+      </option>
+    </select>
+  </div>
 </template>

package/src/css/from-select.scss

@@ -144,6 +144,10 @@
     overflow: hidden
 }
 
+.is-invalid .choices__inner{
+    border-color: var(--bs-danger, #de0021);
+}
+
 .is-focused .choices__inner, .is-open .choices__inner {
     border-color: #b7b7b7
 }
@@ -219,7 +223,7 @@
 
 .choices__list--dropdown, .choices__list[aria-expanded] {
     display: none;
-    z-index: 3;
+    z-index: 9;
     position: absolute;
     width: 100%;
     background-color: #fff;