inertia-bootstrap-forms 1.2.4 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.2.4",
+    "version": "2.1.2",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",
@@ -54,7 +54,7 @@
         "vue3-persian-datetime-picker": "^1.2.2"
     },
     "peerDependencies": {
-        "@inertiajs/vue3": ">2.0",
+        "@inertiajs/vue3": ">3.0",
         "dropzone": "^6.0.0-beta.2",
         "vue": "^3.0"
     },

package/src/AmountInput.vue

@@ -1,63 +1,86 @@
 <script>
 import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {defineComponent, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
 export default defineComponent({
-    components: {InputGroup, InputGroupText},
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        required: Boolean,
-        disabled: Boolean,
-        readonly: Boolean,
-        placeholder: {
-            type: String,
-            default: 'عدد را وارد کنید'
-        },
-        unit: {
-            type: String,
-            default: 'عدد'
-        },
+  components: {InputGroup, InputGroupText},
+  props: {
+    name: {
+      type: String,
+      required: true,
     },
-    setup(props) {
-        let form = inject('form');
+    required: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    placeholder: {
+      type: String,
+      default: 'عدد را وارد کنید'
+    },
+    unit: {
+      type: String,
+      default: 'عدد'
+    },
+  },
+  setup(props) {
+    let form = inject('form', {
+      errors: {},
+      getID(name) {
+        return name;
+      }
+    });
+    let group = inject('group', {});
 
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
+    const modelValue = computed({
+      get() {
+        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
+      },
+      set(value) {
+        if (group?.value?.name) {
+          group.value.setData(props.name, value);
+        } else {
+          form.value[props.name] = value;
         }
+      }
+    });
 
-        return {form};
-    },
-    methods: {
-        onChange(event) {
-            this.form[this.name] = parseFloat(this.$number.toEnglish(event.detail?.unmasked));
-            this.$emit('update:modelValue', parseFloat(this.$number.toEnglish(event.detail?.unmasked)));
-        }
+    const persianDigits = '۰۱۲۳۴۵۶۷۸۹';
+    const arabicDigits = '٠١٢٣٤٥٦٧٨٩';
+    function toEnglishDigits(str) {
+      return String(str).replace(/[۰-۹٠-٩]/g, (ch) => {
+        const pIndex = persianDigits.indexOf(ch);
+        if (pIndex !== -1) return pIndex;
+        return arabicDigits.indexOf(ch);
+      });
     }
+
+    const displayValue = computed({
+      get() {
+        const raw = modelValue.value;
+        if (raw === null || raw === undefined || raw === '') return '';
+        return Number(raw).toLocaleString('en-US');
+      },
+      set(value) {
+        const digitsOnly = toEnglishDigits(value).replace(/\D/g, '');
+        modelValue.value = digitsOnly === '' ? null : parseInt(digitsOnly, 10);
+      }
+    });
+
+    return {modelValue, displayValue, form, group};
+  },
 })
 </script>
 <template>
-    <InputGroup>
-        <input
-            :name="name"
-            :value="form[name]"
-            v-maska
-            data-maska="###,###,###,###,###,###,###"
-            data-maska-reversed
-            @maska="onChange"
-            :class="{'is-invalid': form.errors[name]}"
-            :disabled="disabled || form.processing"
-            :readonly="readonly"
-            :placeholder="placeholder"
-            type="tel"
-            class="form-control fanum text-start">
-        <InputGroupText class="fanum">{{ unit }}</InputGroupText>
-        <slot name="suffix"/>
-    </InputGroup>
-</template>
+  <InputGroup>
+    <input
+        :name="name"
+        v-model="displayValue"
+        :class="{'is-invalid': form.errors[name]}"
+        :disabled="disabled || form.processing"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        type="tel"
+        class="form-control fanum text-start">
+    <InputGroupText class="fanum">{{ unit }}</InputGroupText>
+    <slot name="suffix"/>
+  </InputGroup>
+</template>

package/src/CheckboxButtonInput.vue

@@ -1,69 +1,69 @@
-<script>
-import {defineComponent, inject} from "vue";
-
-export default defineComponent({
-    emits: ['change'],
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        id: {
-            type: String,
-            default: '',
-            required: false,
-        },
-        value: {
-            type: String,
-            default: 'yes',
-            required: false,
-        },
-        type: {
-            type: String,
-            default: 'radio',
-            required: false,
-        },
-    },
-    methods:{
-        change(e){
-            this.$emit('change', e);
-        }
-    },
-    setup(props) {
-        let form = inject('form');
-
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                    return name;
-                }
-            };
-        }
-
-        return {form};
-    },
-})
-</script>
-<template>
-    <label class="btn-label" :for="form.getID(name)+(id || value)" :class="{'active': (form[name] === value || form[name] === true)}">
-        <input
-            :name="name"
-            :id="form.getID(name)+(id || value)"
-            v-model="form[name]"
-            :class="{'is-invalid': form?.errors[name]}"
-            :disabled="form?.processing"
-            :type="type"
-            :value="value"
-            @change="change"
-            autocomplete="off"
-            class="btn-check">
-        <slot/>
-    </label>
-</template>
-<style>
-.btn-label:not(.active){
-    --bs-bg-opacity: .3;
-    opacity: .6;
-}
-</style>
+<script>
+import {defineComponent, inject} from "vue";
+
+export default defineComponent({
+    emits: ['change'],
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        id: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        value: {
+            type: String,
+            default: 'yes',
+            required: false,
+        },
+        type: {
+            type: String,
+            default: 'radio',
+            required: false,
+        },
+    },
+    methods:{
+        change(e){
+            this.$emit('change', e);
+        }
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                    return name;
+                }
+            };
+        }
+
+        return {form};
+    },
+})
+</script>
+<template>
+    <label class="btn-label" :for="form.getID(name)+(id || value)" :class="{'active': (form[name] === value || form[name] === true)}">
+        <input
+            :name="name"
+            :id="form.getID(name)+(id || value)"
+            v-model="form[name]"
+            :class="{'is-invalid': form?.errors[name]}"
+            :disabled="form?.processing"
+            :type="type"
+            :value="value"
+            @change="change"
+            autocomplete="off"
+            class="btn-check">
+        <slot/>
+    </label>
+</template>
+<style>
+.btn-label:not(.active){
+    --bs-bg-opacity: .3;
+    opacity: .6;
+}
+</style>

package/src/CheckboxInput.vue

@@ -1,79 +1,79 @@
-<script>
-import {computed, defineComponent, inject} from "vue";
-
-export default defineComponent({
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        id: {
-            type: String,
-            default: '',
-            required: false,
-        },
-        value: {
-            type: [String, Number],
-            default: 'yes',
-            required: false,
-        },
-        type: {
-            type: String,
-            default: 'checkbox',
-            required: false,
-        },
-    },
-    computed: {
-        inputID() {
-            return this.form.getID(this);
-        }
-    },
-    setup(props) {
-        let form = inject('form', {
-            errors: {},
-            getID(name) {
-                return name;
-            }
-        });
-        let group = inject('group', {});
-
-        const modelValue = computed({
-            get() {
-                return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
-            },
-            set(value) {
-                if (group?.value?.name) {
-                    group.value.setData(props.name, value);
-                } else {
-                    form.value[props.name] = value;
-                }
-            }
-        });
-
-        return {modelValue, form, group};
-    },
-})
-</script>
-<template>
-    <div class="form-check">
-        <input
-            :name="name"
-            :id="inputID"
-            v-model="modelValue"
-            :class="{'is-invalid': form?.errors[name]}"
-            :disabled="form?.processing"
-            :type="type"
-            :value="value"
-            @change="e => $emit('change', e)"
-            class="form-check-input">
-        <label class="form-check-label" :for="inputID">
-            <slot/>
-        </label>
-    </div>
-</template>
-<style>
-.form-check,
-.form-check label {
-    cursor: pointer;
-}
-</style>
+<script>
+import {computed, defineComponent, inject} from "vue";
+
+export default defineComponent({
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        id: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        value: {
+            type: [String, Number],
+            default: 'yes',
+            required: false,
+        },
+        type: {
+            type: String,
+            default: 'checkbox',
+            required: false,
+        },
+    },
+    computed: {
+        inputID() {
+            return this.form.getID(this);
+        }
+    },
+    setup(props) {
+        let form = inject('form', {
+            errors: {},
+            getID(name) {
+                return name;
+            }
+        });
+        let group = inject('group', {});
+
+        const modelValue = computed({
+            get() {
+                return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
+            },
+            set(value) {
+                if (group?.value?.name) {
+                    group.value.setData(props.name, value);
+                } else {
+                    form.value[props.name] = value;
+                }
+            }
+        });
+
+        return {modelValue, form, group};
+    },
+})
+</script>
+<template>
+    <div class="form-check">
+        <input
+            :name="name"
+            :id="inputID"
+            v-model="modelValue"
+            :class="{'is-invalid': form?.errors[name]}"
+            :disabled="form?.processing"
+            :type="type"
+            :value="value"
+            @change="e => $emit('change', e)"
+            class="form-check-input">
+        <label class="form-check-label" :for="inputID">
+            <slot/>
+        </label>
+    </div>
+</template>
+<style>
+.form-check,
+.form-check label {
+    cursor: pointer;
+}
+</style>

package/src/CheckboxToggle.vue

@@ -1,113 +1,113 @@
-<script>
-import {computed, defineComponent, inject} from "vue";
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    value: {
-      type: [String, Number],
-      default: 'yes',
-      required: false,
-    },
-    type: {
-      type: String,
-      default: 'checkbox',
-      required: false,
-    },
-    hideInput: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    inputID() {
-      return this.form.getID(this) + (this.value || '');
-    },
-    selectedValue(){
-      return (typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
-    }
-  },
-  setup(props) {
-    let form = inject('form', {
-      errors: {},
-      getID(name) {
-        return name;
-      }
-    });
-    let group = inject('group', {});
-
-    const modelValue = computed({
-      get() {
-        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
-      },
-      set(value) {
-        if (group?.value?.name) {
-          group.value.setData(props.name, value);
-        } else {
-          form.value[props.name] = value;
-        }
-      }
-    });
-
-    return {modelValue, form, group};
-  },
-})
-</script>
-<template>
-  <label class="form-check-toggle" :class="{'form-check-toggle--active': (selectedValue || []).includes(value)}" :for="inputID">
-    <input
-        :name="name + (group ? '_' + group?.name + '-'+group?.groupID : '')"
-        :id="inputID"
-        v-model="modelValue"
-        :class="{'is-invalid': form?.errors[name], 'form-check-toggle--input-hide': hideInput}"
-        :disabled="form?.processing"
-        :type="type"
-        :value="value"
-        @change="e => $emit('change', e)"
-        class="form-check-toggle--input form-check-input">
-    <slot/>
-  </label>
-</template>
-<style>
-.form-check-toggle {
-  position: relative;
-  cursor: pointer;
-  display: block;
-  background-color: var(--bs-body-bg, #ffffff);
-  border-radius: var(--bs-border-radius, 1rem);
-  min-width: 100px;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.97rem;
-  font-weight: 400;
-  line-height: 1.7;
-  color: var(--bs-body-color, #000000);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-clip: padding-box;
-  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #eeeeee);
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.form-check-toggle.form-check-toggle--active,
-.form-check-toggle:has(input:checked){
-  background-color: var(--bs-warning-bg-subtle, #ffda6a);
-  border-color: var(--bs-warning-border-subtle, var(--bs-alert-border-color, #fff0c3));
-}
-
-.form-check-toggle .form-check-toggle--input-hide {
-  visibility: hidden;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-</style>
+<script>
+import {computed, defineComponent, inject} from "vue";
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    value: {
+      type: [String, Number],
+      default: 'yes',
+      required: false,
+    },
+    type: {
+      type: String,
+      default: 'checkbox',
+      required: false,
+    },
+    hideInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    inputID() {
+      return this.form.getID(this) + (this.value || '');
+    },
+    selectedValue(){
+      return (typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
+    }
+  },
+  setup(props) {
+    let form = inject('form', {
+      errors: {},
+      getID(name) {
+        return name;
+      }
+    });
+    let group = inject('group', {});
+
+    const modelValue = computed({
+      get() {
+        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
+      },
+      set(value) {
+        if (group?.value?.name) {
+          group.value.setData(props.name, value);
+        } else {
+          form.value[props.name] = value;
+        }
+      }
+    });
+
+    return {modelValue, form, group};
+  },
+})
+</script>
+<template>
+  <label class="form-check-toggle" :class="{'form-check-toggle--active': (selectedValue || []).includes(value)}" :for="inputID">
+    <input
+        :name="name + (group ? '_' + group?.name + '-'+group?.groupID : '')"
+        :id="inputID"
+        v-model="modelValue"
+        :class="{'is-invalid': form?.errors[name], 'form-check-toggle--input-hide': hideInput}"
+        :disabled="form?.processing"
+        :type="type"
+        :value="value"
+        @change="e => $emit('change', e)"
+        class="form-check-toggle--input form-check-input">
+    <slot/>
+  </label>
+</template>
+<style>
+.form-check-toggle {
+  position: relative;
+  cursor: pointer;
+  display: block;
+  background-color: var(--bs-body-bg, #ffffff);
+  border-radius: var(--bs-border-radius, 1rem);
+  min-width: 100px;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.97rem;
+  font-weight: 400;
+  line-height: 1.7;
+  color: var(--bs-body-color, #000000);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-clip: padding-box;
+  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #eeeeee);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-check-toggle.form-check-toggle--active,
+.form-check-toggle:has(input:checked){
+  background-color: var(--bs-warning-bg-subtle, #ffda6a);
+  border-color: var(--bs-warning-border-subtle, var(--bs-alert-border-color, #fff0c3));
+}
+
+.form-check-toggle .form-check-toggle--input-hide {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>