inertia-bootstrap-forms 1.0.0 → 1.0.3

package/src/CheckboxToggle.vue

@@ -0,0 +1,109 @@
+<script>
+import {computed, inject} from "vue";
+
+export default {
+  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: true,
+    },
+  },
+  computed: {
+    inputID() {
+      return this.form.getID(this) + (this.value || '');
+    }
+  },
+  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': modelValue === 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 {
+  background-color: var(--bs-warning-bg-subtle, #ffda6a);
+  border-color: var(--bs-alert-border-color, #fff0c3);
+}
+
+.form-check-toggle .form-check-toggle--input-hide {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>

package/{Inputs → src}/EditorInput.vue

@@ -54,6 +54,7 @@ export default {
           inline: false,
           toolbar_sticky: true,
           menubar: false,
+          contextmenu: false,
           branding: false,
           font_formats: true,
           directionality: 'rtl',

package/{Inputs → src}/EmailInput.vue

@@ -6,7 +6,7 @@ export default {
         TextInput
     },
     props: {
-        name: {
+      FileInput: {
             type: String,
             default: 'email',
             required: true,

package/{Inputs → src}/FormContainer.vue

@@ -1,8 +1,7 @@
 <script>
 import {useForm} from "@inertiajs/vue3";
 import {computed, reactive, toRef} from "vue";
-import Numbers from "@/Plugins/Numbers.js";
-import Alert from "@/Bootstrap/Alert.vue";
+import {Alert} from "vue3-bootstrap-components";
 
 export default {
     components: {Alert},
@@ -37,8 +36,12 @@ export default {
         const formData = reactive(props.modelValue);
         const form = useForm(formData);
 
-        form.getID = function (name) {
-            return (formEl.value && formEl.value.id || 'form') + name;
+        form.getID = function (el) {
+            if (typeof el === String) {
+                return (formEl.value?.id ? formEl.value?.id + '-' : '') + '-' + el;
+            }
+
+            return (formEl.value?.id ? formEl.value?.id + '-' : '') + ((el.group ? el.group?.name + '-' + el.group?.groupID + '-' : '')) + el.name + (el.value ? '-' + el.value : '');
         };
 
         return {form, formData, formEl};
@@ -70,7 +73,7 @@ export default {
         }
     },
     methods: {
-        reset(){
+        reset() {
             this.form.reset();
         },
         async submit(event) {
@@ -81,10 +84,20 @@ export default {
             } else {
                 this.$emit('submit', event);
                 await this.form.transform(function (formDataValues) {
-                    return JSON.parse(Numbers.toEnglish(JSON.stringify({
+
+                    let data = JSON.stringify({
                         ...formValues,
                         ...formDataValues,
-                    })));
+                    });
+
+                    const persianDigits = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
+                    const arabicDigits = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
+
+                    for (let i = 0; i < 10; i++) {
+                        data = data.replace(persianDigits[i], i).replace(arabicDigits[i], i);
+                    }
+
+                    return JSON.parse(data.toLocaleString('en-US'));
                 }).submit(this.method.toString(), this.url, {
                     only: this.only,
                     onStart: () => {
@@ -119,8 +132,8 @@ export default {
           :novalidate="!!Object.values(form.errors).length">
         <slot name="errors" v-if="form.hasErrors" :form="form">
             <Alert type="danger">
-                <ul class="list-unstyled p-0 m-0">
-                    <li v-for="error in form.errors">{{error}}</li>
+                <ul class="list-unstyled p-0 m-0 fanum">
+                    <li v-for="error in form.errors">{{ error }}</li>
                 </ul>
             </Alert>
         </slot>

package/src/GroupControl.vue

@@ -0,0 +1,67 @@
+<script>
+import {getCurrentInstance, computed, inject, ref, toRef, onMounted} from "vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props, context) {
+        let form = inject('form', {
+            errors: {},
+            getID(name) {
+                return name;
+            }
+        });
+
+        return {form};
+    },
+    provide() {
+        return {
+            group: computed(() => this)
+        }
+    },
+    mounted() {
+        this.$refs.groupEl?.parentNode?.parentNode.querySelectorAll('.form-control-group').forEach((item, index) => {
+            if(item === this.$refs.groupEl){
+                this.groupID = (index).toString();
+            }
+        })
+    },
+    methods: {
+        setData(fieldName, value) {
+            if (!this.form[this.name]) {
+                this.form[this.name] = {};
+            }
+            if (this.groupID && this.form[this.name]?.length >= 0) {
+                if(!this.form[this.name][this.groupID]){
+                    this.form[this.name][this.groupID] = {};
+                }
+                this.form[this.name][this.groupID][fieldName] = value;
+            }else{
+                this.form[this.name][fieldName] = value;
+            }
+
+        },
+        getData(fieldName) {
+            if (this.groupID && this.form[this.name]?.length >= 0) {
+                return this.form[this.name][this.groupID]?.[fieldName] || null;
+            }else{
+                return this.form[this.name][fieldName];
+            }
+        }
+    },
+    data() {
+        return {
+            groupID: '0',
+        };
+    }
+}
+</script>
+<template>
+    <div class="form-control-group" :data-group-id="groupID" ref="groupEl">
+        <slot/>
+    </div>
+</template>

package/src/MultiQuantityInput.vue

@@ -0,0 +1,68 @@
+<script>
+import {Dropdown, DropdownToggle, DropdownMenu, InputGroup, InputGroupText} from 'vue3-bootstrap-components';
+import {inject} from "vue";
+
+export default {
+    components: {InputGroup, InputGroupText, Dropdown, DropdownToggle, DropdownMenu},
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        required: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        unit: {
+            type: String,
+            default: 'عدد'
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        if(!form[props.name]) {
+            form[props.name] = 1;
+        }
+
+        return {form};
+    },
+    methods: {
+        onChange(event) {
+            let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
+            this.form[this.name] = value;
+            this.$emit('update:modelValue', value);
+        },
+        increment() {
+            if (!this.max || (this.max < this.form[this.name])) {
+                this.form[this.name]++;
+            }
+        },
+        decrement() {
+            if ((!this.min || (this.min < this.form[this.name])) && this.form[this.name] > 1) {
+                this.form[this.name]--;
+            }
+        }
+    },
+    data() {
+        return {}
+    }
+}
+</script>
+<template>
+  <Dropdown>
+    <DropdownToggle>adasd</DropdownToggle>
+    <DropdownMenu>
+      asdasd
+    </DropdownMenu>
+  </Dropdown>
+</template>
+<style>
+</style>

package/src/PersianDatePickerInput.vue

@@ -0,0 +1,176 @@
+<script>
+import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker';
+import {computed, inject} from "vue";
+
+export default {
+    components: {Vue3PersianDatetimePicker},
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        calendar: {
+            type: String,
+            default: 'date',
+        },
+        view: {
+            type: String,
+            default: 'date',
+        },
+        min: String,
+        max: String,
+        range: Boolean,
+        locale: {
+            default: 'fa',
+        },
+        format: {
+            type: String,
+            default: 'jYYYY-jMM-jDD',
+        },
+        inputFormat: {
+            type: String,
+            default: null,
+        },
+        placeholder: String,
+    },
+    emits: ['update:modelValue'],
+    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};
+    },
+    methods: {
+        clear() {
+            this.modelValue = null;
+        }
+    },
+    computed: {
+        isSsr() {
+            return !window || !document;
+        },
+        inputID() {
+            return this.form.getID(this)
+        }
+    },
+    data() {
+        return {}
+    }
+}
+</script>
+
+<template>
+    <div class="input-group">
+        <input
+            :name="name"
+            :id="inputID"
+            :value="modelValue"
+            :placeholder="(placeholder || 'انتخاب تاریخ')"
+            :class="{'is-invalid': form.errors[name]}"
+            :disabled="form?.processing"
+            type="text" class="form-control form-control--datepicker text-start fanum">
+        <button
+            type="button"
+            @click="clear"
+            class="input-group-text input-group-datepicker-delete"
+            :class="{'input-group-datepicker-delete-show': modelValue}">
+          <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C20.1752 21.4816 19.3001 21.7706 18 21.8985" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M7 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M17 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M21.5 9H16.625H10.75M2 9H5.875" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z" fill="#1C274C"/>
+            <path d="M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z" fill="#1C274C"/>
+            <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#1C274C"/>
+            <path d="M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z" fill="#1C274C"/>
+            <path d="M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z" fill="#1C274C"/>
+            <path d="M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z" fill="#1C274C"/>
+          </svg>
+        </button>
+    </div>
+    <Vue3PersianDatetimePicker
+        :type="calendar"
+        :view="view"
+        :min="min"
+        :max="max"
+        v-if="!isSsr"
+        jumpminute="15"
+        :range="range"
+        :locale="locale"
+        :simple="false"
+        :roundminute="true"
+        :showNowBtn="true"
+        :autoSubmit="true"
+        :format="format"
+        :inputFormat="(inputFormat ? inputFormat : format)"
+        :displayFormat="format"
+        v-model="modelValue"
+        :custom-input="'#'+inputID"/>
+</template>
+<style>
+.form-control--datepicker {
+    direction: rtl;
+}
+
+.input-group-datepicker-delete {
+    width: 42px;
+    text-align: center;
+}
+
+.input-group-datepicker-delete .fa-times {
+    display: none;
+}
+
+.input-group-datepicker-delete-show:hover .fa-times {
+    display: block;
+}
+
+.input-group-datepicker-delete-show:hover .fa-calendars {
+    display: none;
+}
+
+.vpd-content {
+    color: var(--bs-body-color) !important;
+    background-color: var(--bs-body-bg) !important;
+    -moz-font-feature-settings: "ss01";
+    -webkit-font-feature-settings: "ss01";
+    font-feature-settings: "ss01";
+}
+
+.vpd-time .vpd-down-arrow-btn, .vpd-time .vpd-up-arrow-btn {
+    text-align: center;
+}
+
+.vpd-time .vpd-down-arrow-btn svg,
+.vpd-time .vpd-up-arrow-btn svg {
+    margin: 0 auto;
+}
+
+.vpd-controls button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vpd-month-label {
+    width: 110px;
+}
+</style>

package/src/QuantityInput.vue

@@ -0,0 +1,106 @@
+<script>
+import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
+import {inject} from "vue";
+
+export default {
+    components: {InputGroup, InputGroupText},
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        required: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        unit: {
+            type: String,
+            default: 'عدد'
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        if(!form[props.name]) {
+            form[props.name] = 1;
+        }
+
+        return {form};
+    },
+    methods: {
+        onChange(event) {
+            let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
+            this.form[this.name] = value;
+            this.$emit('update:modelValue', value);
+        },
+        increment() {
+            if (!this.max || (this.max < this.form[this.name])) {
+                this.form[this.name]++;
+            }
+        },
+        decrement() {
+            if ((!this.min || (this.min < this.form[this.name])) && this.form[this.name] > 1) {
+                this.form[this.name]--;
+            }
+        }
+    },
+    data() {
+        return {}
+    }
+}
+</script>
+<template>
+    <InputGroup class="input-group-quantity">
+        <button @click="increment" type="button" class="btn">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                <path
+                    d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/>
+            </svg>
+        </button>
+        <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"
+            type="tel"
+            class="form-control fanum text-center">
+        <button @click="decrement" type="button" class="btn">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                <path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/>
+            </svg>
+        </button>
+        <InputGroupText class="fanum">{{ unit }}</InputGroupText>
+        <slot name="suffix"/>
+    </InputGroup>
+</template>
+<style>
+
+.input-group-quantity .input-group-text,
+.input-group-quantity .btn{
+    background-color: var(--bs-body-bg);
+    --bs-btn-hover-bg:var(--bs-secondary-bg);
+    --bs-btn-active-bg:var(--bs-secondary-bg);
+}
+
+.input-group-quantity input.form-control{
+    border: 0 !important;
+    box-shadow: none !important;
+}
+
+.input-group-quantity .btn svg {
+    width: 14px;
+    height: 14px;
+}
+</style>

package/src/SecondarySubmitButton.vue

@@ -0,0 +1,22 @@
+<script>
+import {Spinner} from "vue3-bootstrap-components";
+
+export default {
+    components: {
+        Spinner
+    },
+    inject: ['form'],
+    props: {},
+}
+</script>
+<template>
+    <button
+        type="submit"
+        :disabled="form?.processing"
+        class="btn btn-secondary px-3 px-sm-4">
+        <Spinner v-if="form?.processing"/>
+        <slot>
+            تایید و ثبت اطلاعات
+        </slot>
+    </button>
+</template>