inertia-bootstrap-forms 1.0.106 → 1.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.106",
+    "version": "1.0.107",
     "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/RangeSliderInput.vue

@@ -1,6 +1,5 @@
 <script>
 import {computed, defineComponent, inject} from 'vue';
-import RangeSlider from 'svelte-range-slider-pips';
 
 export default defineComponent({
   emits: ['update:modelValue', 'change'],
@@ -68,31 +67,25 @@ export default defineComponent({
   },
   methods: {},
   mounted() {
-    let _this=this;
-    this.rangeSliderEn = new RangeSlider({
-      target: this.$refs.rangeSliderEl,
-      props: {
-        values: this.modelValue,
-        pips: true,
-        spring: true,
-        rangeFloat: true,
-        range: true,
-        formatter: (v) => Intl.NumberFormat().format(v),
-        rangeFormatter: (x, y) => Intl.NumberFormat().format(x) + ' - ' + Intl.NumberFormat().format(y),
-        first: 'label',
-        last: 'label',
-        ...this.options,
-        min: this.min || null,
-        max: this.max || null,
-
-      }
-    }).$on('change', function (e) {
-      _this.$emit('change', e);
-
-      const value = _this.range ? e.detail?.values : e.detail?.value;
-      _this.modelValue = value;
-      _this.$emit('update:modelValue', value);
-    });
+    import('svelte-range-slider-pips').then(({ default: RangeSlider }) => {
+      let _this = this
+      this.rangeSliderEn = new RangeSlider({
+        target: this.$refs.rangeSliderEl,
+        props: {
+          values: this.modelValue,
+          pips: true,
+          // ... بقیه props
+          min: this.min || null,
+          max: this.max || null,
+          ...this.options,
+        }
+      }).$on('change', function (e) {
+        _this.$emit('change', e)
+        const value = _this.range ? e.detail?.values : e.detail?.value
+        _this.modelValue = value
+        _this.$emit('update:modelValue', value)
+      })
+    })
   },
   beforeUnmount() {
   },

package/src/Select2Input.vue

@@ -1,6 +1,5 @@
 <script>
 import './css/from-select.scss';
-import Choices from 'choices.js';
 import {computed, defineComponent, inject} from "vue";
 
 export default defineComponent({
@@ -115,11 +114,17 @@ export default defineComponent({
       return (this.getKeyFromItem(item)) === this.modelValue?.toString()
     },
     init() {
+      if (!this.ChoicesClass) return
+
       if (this.choices) {
         this.destroy();
       }
 
-      this.choices = new Choices(this.$refs.input, {
+      if (this.locale === 'en' && document.dir === 'rtl') {
+        this.currentLocale = 'fa';
+      }
+
+      this.choices = new this.ChoicesClass(this.$refs.input, {
         searchEnabled: (this.searchEnabled || !!this.search?.url),
         searchChoices: (this.searchEnabled && !this.search?.url),
         removeItemButton: true,
@@ -135,7 +140,7 @@ export default defineComponent({
     },
     destroy() {
       this.$refs.input.removeEventListener('search', this.searchHandle);
-      this.choices.destroy();
+      this.choices?.destroy();
     },
     searchHandle(event) {
       this.$emit('search', event)
@@ -192,17 +197,17 @@ export default defineComponent({
     }
   },
   mounted() {
-    if (typeof window !== 'undefined' && this.locale === 'en' && document.dir === 'rtl') {
-      this.currentLocale = 'fa';
-    }
-
-    this.init()
+    import('choices.js').then(({ default: Choices }) => {
+      this.ChoicesClass = Choices
+      this.init()
+    })
   },
   beforeUnmount() {
     this.destroy()
   },
   data() {
     return {
+      ChoicesClass: null,
       choices: null,
       loading: false,
       searchDebounceTimer: null,