inertia-bootstrap-forms 1.0.0

package/Inputs/FileInput.vue

@@ -0,0 +1,196 @@
+<script>
+import {inject} from "vue";
+
+export default {
+    props: {
+        modelValue: '',
+        name: {
+            type: String,
+            required: true,
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        endpoint: {
+            type: String,
+            default: '/upload',
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        return {form};
+    },
+    computed: {
+        allFiles() {
+            return this.files
+        },
+    },
+    methods: {
+        addFile(file) {
+            let uploadedFile = {
+                id: crypto.randomUUID(),
+                percent: 0,
+                error: 0,
+                file: file,
+            };
+
+            if (this.multiple) {
+                this.files.push(uploadedFile);
+            } else {
+                this.files = [uploadedFile];
+            }
+
+            this.uploadFile(uploadedFile);
+            this.$refs.input.value = '';
+        },
+        calculatePercent(event, file) {
+            if (event.lengthComputable) {
+                this.files.find(item => item.id === file.id)['percent'] = Math.round((event.loaded / event.total) * 100);
+            }
+        },
+        addFileToInputValue(file, res) {
+            this.files.find(item => item.id === file.id).path = res.data.path;
+
+            this.form[this.name] = this.multiple ? this.files.map(item => item.path) : this.files[0].path;
+            this.$emit('update:modelValue', this.form[this.name]);
+        },
+        async uploadFile(file) {
+            let _this = this;
+            let formData = new FormData();
+            formData.append('file', file.file);
+
+            _this.files.find(item => item.id === file.id)['error'] = '';
+
+            await axios.post(this.endpoint,
+                formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    },
+                    onUploadProgress: progressEvent => _this.calculatePercent(progressEvent, file)
+                }
+            ).then(function (res) {
+                _this.addFileToInputValue(file, res)
+            }).catch(function (err) {
+                _this.files.find(item => item.id === file.id)['error'] = (err.response?.data?.message || err.message);
+            });
+        },
+        async deleteFile(file) {
+            this.files = this.files.filter(item => item.id !== file.id);
+            await axios.delete(this.endpoint, {
+                data: file.path
+            });
+        },
+        fileSelected(e) {
+            Array.from(e.target.files).forEach(file => this.addFile(file));
+        }
+    },
+    data() {
+        return {
+            files: [],
+        }
+    }
+}
+</script>
+<template>
+    <div class="file-input-uploader">
+        <input
+            ref="input"
+            :name="name"
+            :class="{'is-invalid': form?.errors[name] !== undefined}"
+            :disabled="form?.processing"
+            type="file"
+            :multiple="multiple"
+            @change="fileSelected"
+            class="form-control">
+        <div class="file-input-uploader--list">
+            <div :id="'file-'+file.id" class="file-input-uploader--list-item" v-for="file in allFiles">
+                <div class="file-input-uploader--progress" v-if="file.percent && file.percent< 100">
+                    <div :style="{width: file.percent + '%'}"></div>
+                </div>
+                <div>{{ file.file.name }}</div>
+                <div class="file-input-uploader--list-error" v-if="file.error">{{ file.error }}</div>
+                <div class="file-input-uploader--list-item--size" dir="ltr">{{ Math.round(file.file.size / 1024) }}Kb</div>
+                <div class="file-input-uploader--list-item--actions">
+                    <button @click="uploadFile(file)" type="button" class="file-input-uploader--list-item--btn" v-if="file.error">
+                        <svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M1,12A11,11,0,0,1,17.882,2.7l1.411-1.41A1,1,0,0,1,21,2V6a1,1,0,0,1-1,1H16a1,1,0,0,1-.707-1.707l1.128-1.128A8.994,8.994,0,0,0,3,12a1,1,0,0,1-2,0Zm21-1a1,1,0,0,0-1,1,9.01,9.01,0,0,1-9,9,8.9,8.9,0,0,1-4.42-1.166l1.127-1.127A1,1,0,0,0,8,17H4a1,1,0,0,0-1,1v4a1,1,0,0,0,.617.924A.987.987,0,0,0,4,23a1,1,0,0,0,.707-.293L6.118,21.3A10.891,10.891,0,0,0,12,23,11.013,11.013,0,0,0,23,12,1,1,0,0,0,22,11Z"/>
+                        </svg>
+                    </button>
+                    <button @click="deleteFile(file)" type="button" class="file-input-uploader--list-item--btn" v-if="file.path || file.error">
+                        <svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M12,23A11,11,0,1,0,1,12,11.013,11.013,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A9.01,9.01,0,0,1,12,3ZM8.293,14.293,10.586,12,8.293,9.707A1,1,0,0,1,9.707,8.293L12,10.586l2.293-2.293a1,1,0,0,1,1.414,1.414L13.414,12l2.293,2.293a1,1,0,1,1-1.414,1.414L12,13.414,9.707,15.707a1,1,0,0,1-1.414-1.414Z"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.file-input-uploader .file-input-uploader--list .file-input-uploader--list-item {
+    background-color: var(--bs-secondary-bg);
+    border-radius: var(--bs-border-radius);
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 5px 0;
+    padding: 5px 10px;
+}
+
+.file-input-uploader .file-input-uploader--list .file-input-uploader--list-item--size {
+    margin-left: auto;
+    font-size: 90%;
+    padding: 0 5px;
+    color: var(--bs-secondary-color);
+}
+
+.file-input-uploader .file-input-uploader--list-item--btn {
+    display: inline-block;
+    outline: none;
+    border: 0;
+    padding: 7px 2px;
+}
+
+.file-input-uploader .file-input-uploader--list-item--btn:not(:last-child){
+    margin-right: 5px;
+}
+
+.file-input-uploader .file-input-uploader--list-item--btn > svg {
+    height: 20px;
+    width: 20px;
+    vertical-align: middle;
+}
+
+.file-input-uploader .file-input-uploader--progress {
+    position: absolute;
+    top: 2px;
+    left: 5px;
+    right: 5px;
+}
+
+.file-input-uploader .file-input-uploader--progress > div {
+    background-color: #de0021;
+    height: 7px;
+    width: 0;
+    min-width: 1%;
+    border-radius: var(--bs-border-radius)
+}
+
+.file-input-uploader .file-input-uploader--list-error {
+    font-size: 90%;
+    margin: 0 5px;
+    color: var(--bs-danger, #de0021);
+}
+</style>

package/Inputs/FormContainer.vue

@@ -0,0 +1,129 @@
+<script>
+import {useForm} from "@inertiajs/vue3";
+import {computed, reactive, toRef} from "vue";
+import Numbers from "@/Plugins/Numbers.js";
+import Alert from "@/Bootstrap/Alert.vue";
+
+export default {
+    components: {Alert},
+    emits: ['submit', 'reset', 'onStart', 'onFinish', 'onSuccess', 'change'],
+    props: {
+        url: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        method: {
+            default: 'post'
+        },
+        only: {
+            type: Array,
+            default: [],
+            required: false,
+        },
+        modelValue: {
+            type: Object,
+            default: {},
+            required: false,
+        },
+        submitHandler: {
+            type: Function,
+            default: null,
+            required: false,
+        },
+    },
+    setup(props) {
+        const formEl = toRef('formEl');
+        const formData = reactive(props.modelValue);
+        const form = useForm(formData);
+
+        form.getID = function (name) {
+            return (formEl.value && formEl.value.id || 'form') + name;
+        };
+
+        return {form, formData, formEl};
+    },
+    provide() {
+        return {
+            form: computed(() => this.form)
+        }
+    },
+    watch: {
+        form: {
+            handler: function (newVal) {
+                const {
+                    isDirty,
+                    errors,
+                    hasErrors,
+                    processing,
+                    progress,
+                    wasSuccessful,
+                    recentlySuccessful,
+                    __rememberable,
+                    ...cleanedData
+                } = newVal;
+
+                this.$emit('change', cleanedData);
+                this.$emit('update:modelValue', cleanedData)
+            },
+            deep: true,
+        }
+    },
+    methods: {
+        reset(){
+            this.form.reset();
+        },
+        async submit(event) {
+            const formValues = this.modelValue;
+
+            if (this.submitHandler) {
+                await this.submitHandler(event);
+            } else {
+                this.$emit('submit', event);
+                await this.form.transform(function (formDataValues) {
+                    return JSON.parse(Numbers.toEnglish(JSON.stringify({
+                        ...formValues,
+                        ...formDataValues,
+                    })));
+                }).submit(this.method.toString(), this.url, {
+                    only: this.only,
+                    onStart: () => {
+                        this.$emit('onStart');
+                        this.form.clearErrors();
+                    },
+                    onFinish: (data) => {
+                        this.$emit('onFinish', data);
+                    },
+                    onError: (errors) => {
+                    },
+                    onSuccess: (data) => {
+                        this.reset();
+                        this.$emit('onSuccess', data);
+                    }
+                });
+            }
+        }
+    },
+    expose: ['submit', 'reset'],
+}
+
+</script>
+
+<template>
+    <form ref="formEl"
+          :action="url"
+          :method="method"
+          @submit.prevent="submit"
+          @reset="$emit('reset')"
+          :class="{'form-processing loading': form.processing,}"
+          :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>
+            </Alert>
+        </slot>
+        <slot :form="form" :submit="submit"/>
+    </form>
+</template>

package/Inputs/FormLabel.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+    props: {
+        default: false,
+        required: false,
+    },
+    emits: ['update:modelValue'],
+}
+</script>
+
+<template>
+    <label class="mb-2 d-block">
+        <slot/>
+        <span class="text-danger" v-if="required">*</span>
+    </label>
+</template>
+<style scoped>
+label {
+    cursor: pointer;
+}
+</style>

package/Inputs/MobileInput.vue

@@ -0,0 +1,22 @@
+<script>
+import TextInput from "./TextInput.vue";
+
+export default {
+    components: {
+        TextInput
+    },
+    props: {
+        name: {
+            type: String,
+            default: 'mobile',
+            required: true,
+        },
+    },
+}
+</script>
+<template>
+    <TextInput
+        :name="name"
+        placeholder="موبایل خود را وارد کنید"
+        type="tel"/>
+</template>

package/Inputs/PasswordInput.vue

@@ -0,0 +1,22 @@
+<script>
+import TextInput from "./TextInput.vue";
+
+export default {
+    components: {
+        TextInput
+    },
+    props: {
+        name: {
+            type: String,
+            default: 'password',
+            required: true,
+        },
+    },
+}
+</script>
+<template>
+    <TextInput
+        :name="name"
+        placeholder="گذرواژه خود را وارد کنید"
+        type="password"/>
+</template>

package/Inputs/Select2Input.vue

@@ -0,0 +1,193 @@
+<script>
+import '../vue-select.css';
+import vSelect from 'vue-select';
+import axios from "axios";
+import Icon from "@/Components/Icon.vue";
+import {inject} from "vue";
+
+export default {
+    components: {Icon, vSelect},
+    emits: ['update:modelValue', 'search', 'change', 'selected'],
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        modelValue: '',
+        label: {
+            type: String,
+            default: 'name',
+        },
+        placeholder: {
+            type: String,
+            default: '-- انتخاب کنید',
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        options: Array,
+        search: {
+            type: Object,
+            default: {
+                url: null,
+            }
+        },
+        reduce: {
+            type: Function,
+            default: (item) => item.id
+        },
+    },
+    computed: {
+        allOptions() {
+            return [
+                ...(this.options !== undefined ? this.options : []),
+                // ...this.selectedSearchOptions,
+                ...this.searchOptions,
+            ];
+        },
+    },
+    watch: {
+        'options': function (newVal) {
+            if (this.form && this.form[this.name] && !newVal.filter(item => item.id === this.form[this.name] || item === this.form[this.name]).length) {
+                this.form[this.name] = null;
+            }
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        return {form};
+    },
+    methods: {
+        async searchHandler(search, loading) {
+            if (!search || search.length < 3) return;
+
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+
+            let _this = this;
+            this.searchTimeout = setTimeout(function () {
+                _this.doSearch(search, loading);
+            }, 500);
+        },
+        async doSearch(search, loading) {
+            if (!this.search.url) return false;
+
+            if (this.searchController) {
+                this.searchController.abort();
+            }
+            this.searchController = new AbortController();
+
+            loading(true);
+            this.searchOptions = [];
+            await axios.post(this.search.url, {
+                query: search,
+            }).then(res => {
+                this.searchOptions = res.data;
+            }).finally(() => {
+                loading(false);
+            });
+        },
+        itemsSelected(items) {
+            this.$emit('change', items);
+            this.$emit('selected', items);
+            if (this.search && this.search.url && this.searchOptions && this.searchOptions.length) {
+                this.selectedSearchOptions = items;
+            }
+        },
+        input(event) {
+            this.$emit('change', event);
+            this.form?.handlers?.handleDomInput(event);
+        },
+        change(event) {
+            this.$emit('change', event);
+            this.form?.handlers?.handleChange(event);
+        }
+    },
+    data() {
+        return {
+            searchTimeout: null,
+            searchController: null,
+            selectedSearchOptions: [],
+            searchOptions: [],
+        }
+    }
+}
+</script>
+<template>
+    <v-select
+        ref="input"
+        v-model="form[name]"
+        @change="change"
+        @input="input"
+        @search="searchHandler"
+        @option:selected="itemsSelected"
+        @option:deselected="change"
+        :label="label"
+        :multiple="multiple"
+        :options="allOptions"
+        :disabled="form?.processing"
+        :filterable="!search?.url"
+        :placeholder="placeholder"
+        class="fanum"
+        :class="{'is-invalid': form?.errors[name]}"
+        :reduce="reduce"
+        :autocomplete="false"
+        :deselectFromDropdown="true"
+        :clearable="false">
+        <template #no-options="{ search, searching, loading }">
+            <span v-if="this.search?.url" class="p-2 d-block bg-body-tertiary">
+                <Icon icon="search" class="align-middle"/>
+                برای جستجو تایپ کنید
+            </span>
+            <span v-else>هیچ آیتمی پیدا نشد</span>
+        </template>
+        <slot/>
+    </v-select>
+</template>
+<style>
+.v-select {
+    min-width: 100px;
+    max-width: 100%;
+}
+
+.v-select > ul {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.input-group > .v-select, .input-group > .form-floating, .input-group > .v-select {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+}
+
+.input-group > .v-select:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) .vs__dropdown-toggle {
+    margin-right: calc(var(--bs-border-width) * -1);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
+.input-group:not(.has-validation) > .v-select:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) .vs__dropdown-toggle {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.is-invalid .vs__dropdown-toggle {
+    border-color: var(--bs-form-invalid-border-color);
+}
+</style>

package/Inputs/SubmitButton.vue

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