inertia-bootstrap-forms 1.0.0

package/Bootstrap/InputGroup.vue

@@ -0,0 +1,9 @@
+<script>
+export default {}
+</script>
+
+<template>
+    <div class="input-group">
+        <slot/>
+    </div>
+</template>

package/Bootstrap/InputGroupText.vue

@@ -0,0 +1,9 @@
+<script>
+export default {}
+</script>
+
+<template>
+    <div class="input-group-text">
+        <slot/>
+    </div>
+</template>

package/Inputs/AmountInput.vue

@@ -0,0 +1,64 @@
+<script>
+import InputGroup from '../Bootstrap/InputGroup.vue';
+import InputGroupText from '../Bootstrap/InputGroupText.vue';
+import {inject} from "vue";
+
+export default {
+    components: {InputGroup, InputGroupText},
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        required: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        placeholder: {
+            type: String,
+            default: 'عدد را وارد کنید'
+        },
+        unit: {
+            type: String,
+            default: 'عدد'
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        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)));
+        }
+    }
+}
+</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>

package/Inputs/CaptchaInput.vue

@@ -0,0 +1,100 @@
+<script>
+import TextInput from "./TextInput.vue";
+
+export default {
+    components: {TextInput},
+    props: {
+        name: {
+            type: String,
+            default: 'captcha',
+            required: false,
+        },
+        modelValue: '',
+        required: Boolean,
+        placeholder: {
+            default: 'کد امنیتی روبرو را وارد کنید',
+        },
+    },
+    emits: ['update:modelValue'],
+    inject: ['form'],
+    watch: {
+        'form.processing': {
+            handler: function (val, old) {
+                if (val !== old && !val) {
+                    this.getSrc();
+                    this.emptyField();
+                }
+            },
+            deep: false,
+            immediate: false,
+        }
+    },
+    methods: {
+        emptyField() {
+            if (this.form) {
+                this.form[this.name] = null;
+            }
+        },
+        async getSrc() {
+            this.loading = true;
+            this.src = '/captcha/default?t=' + Math.random();
+
+            let _this = this;
+            setTimeout(function () {
+                _this.loading = false;
+            }, 500)
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            src: '/captcha/default?t=' + Math.random(),
+        };
+    }
+};
+
+</script>
+<template>
+    <div class="input-group captcha">
+        <TextInput
+            :name="name"
+            class="text-start"
+            type="tel"/>
+        <img
+            :src="src"
+            alt="captcha"
+            @click="getSrc"
+            v-if="!loading"
+            class="captcha-holder">
+        <div class="placeholder-wave captcha-holder" v-else>
+            <div class="placeholder w-100 h-100"></div>
+        </div>
+        <button
+            type="button"
+            :disabled="form.processing || loading"
+            @click="getSrc"
+            class="btn btn-secondary border-0">
+            <i class="fal fa-sync-alt align-middle"></i>
+        </button>
+    </div>
+</template>
+<style>
+.captcha .captcha-holder {
+    cursor: pointer;
+    width: 82px;
+    height: 43px;
+    object-fit: contain;
+    border-top: 1px solid var(--bs-border-color);
+    border-bottom: 1px solid var(--bs-border-color);
+}
+
+.input-group-lg.captcha .captcha-holder {
+    width: 100px;
+    height: auto;
+}
+
+.captcha .btn-refresh {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-border-color) !important;
+}
+</style>

package/Inputs/CheckboxInput.vue

@@ -0,0 +1,56 @@
+<script>
+import {inject} from "vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        id: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        value: {
+            type: String,
+            default: 'yes',
+            required: false,
+        },
+        type: {
+            type: String,
+            default: 'checkbox',
+            required: false,
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        return {form};
+    },
+}
+</script>
+<template>
+    <div class="form-check">
+        <input
+            :name="name"
+            :id="form.getID(name)+(id || value)"
+            v-model="form[this.name]"
+            :class="{'is-invalid': form?.errors[name]}"
+            :disabled="form?.processing"
+            :type="type"
+            :value="value"
+            class="form-check-input">
+        <label class="form-check-label" :for="form.getID(name)+(id || value)">
+            <slot/>
+        </label>
+    </div>
+</template>

package/Inputs/DatePickerInput.vue

@@ -0,0 +1,137 @@
+<script>
+import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker';
+import Icon from "@/Components/Icon.vue";
+import {inject} from "vue";
+
+export default {
+    components: {Icon, Vue3PersianDatetimePicker},
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        calendar: {
+            type: String,
+            default: 'date',
+        },
+        view: {
+            type: String,
+            default: 'date',
+        },
+        min: String,
+        max: String,
+        format: {
+            type: String,
+            default: 'jYYYY-jMM-jDD',
+        },
+        inputFormat: {
+            type: String,
+            default: null,
+        },
+        placeholder: String,
+    },
+    emits: ['update:modelValue'],
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        return {form};
+    },
+    methods: {
+        clear() {
+            if (this.form && this.form[this.name]) this.form[this.name] = null;
+        }
+    },
+    computed: {
+        isSsr() {
+            return !window || !document;
+        },
+    },
+    data() {
+        return {}
+    }
+}
+</script>
+
+<template>
+    <div class="input-group">
+        <input
+            :name="name"
+            :id="name+'Input'"
+            :value="form[name]"
+            :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': form[name]}">
+            <Icon icon="times" library="fal"></Icon>
+            <Icon icon="calendars" library="fal"></Icon>
+        </button>
+    </div>
+    <Vue3PersianDatetimePicker
+        :type="calendar"
+        :view="view"
+        :min="min"
+        :max="max"
+        v-if="!isSsr"
+        jumpminute="15"
+        :simple="false"
+        :roundminute="true"
+        :showNowBtn="true"
+        :autoSubmit="true"
+        :format="format"
+        :inputFormat="(inputFormat ? inputFormat : format)"
+        :displayFormat="format"
+        v-model="form[name]"
+        :custom-input="'#'+name+'Input'"/>
+</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;
+}
+</style>

package/Inputs/EditorInput.vue

@@ -0,0 +1,131 @@
+<script>
+import Editor from '@tinymce/tinymce-vue';
+import {inject} from "vue";
+
+export default {
+    components: {Editor},
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        modelValue: String,
+        placeholder: {
+            type: String,
+            default: 'اینجا بنویسید...',
+        },
+        invalid: Boolean,
+        allowLink: Boolean,
+        height: Number,
+        useStyle: {
+            type: Boolean,
+            default: false,
+        },
+        modules: {
+            default: [],
+            required: false,
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        return {form};
+    },
+    emits: ['update:modelValue'],
+}
+</script>
+
+<template>
+    <Editor
+        api-key="tbws10u99swxhai03qolxykukvqw99jd4nw9q8z34aocvc4r"
+        tinymce-script-src="/js/tinymce/tinymce.min.js"
+        v-model="form[name]"
+        :init="{
+          base_url: '/js/tinymce/',
+          disabled: true,
+          inline: false,
+          toolbar_sticky: true,
+          menubar: false,
+          branding: false,
+          font_formats: true,
+          directionality: 'rtl',
+          placeholder: placeholder,
+          plugins: [
+              ...modules,
+              'link',
+              'lists',
+              'directionality',
+              'fullscreen',
+              'wordcount',
+              'table',
+              'autosave',
+              'autoresize',
+          ],
+          style_formats : [
+              {title : 'وسط چین', classes : 'text-center', block: 'div'},
+              {title : 'فاصله از بالا و پایین', classes : 'my-3', block: 'div'},
+              {title : 'باکس اطلاعات', classes : 'code-box', block: 'span'},
+          ],
+          setup: function(editor) {
+            // editor.on('init', function(e) {
+            //     editor.setContent(modelValue || '');
+            // });
+            //
+            // editor.on('paste cut reset keyup input focusout', function(e) {
+            //     // console.log('form', form);
+            //     // $emit('update:modelValue', editor.getContent());
+            // });
+          },
+          language: 'fa',
+          toolbar: (useStyle ? 'styles |' : '') + 'fontsize | bold italic h1 h2 h3 h4 | link | numlist bullist | alignjustify aligncenter | table image  link unlink | rtl ltr | pagebreak codesample | fullscreen code',
+          fullscreen: true,
+          auto_save: true,
+          auto_link: true,
+          // images_upload_url: 'files/upload',
+          // images_upload_handler: this.uploader,
+          images_file_types: 'jpeg,jpg,png',
+          autoresize_bottom_margin: 50,
+          allow_link: !!this.allowLink,
+          allow_style: true,
+          allow_link_style: false,
+          height: this.height || 400,
+          min_height: this.height || 400,
+          allow_code: false,
+          autoresize_on_init: true,
+          autosave_ask_before_unload: false,
+          autosave_interval: '5s',
+          autosave_restore_when_empty: true,
+          paste_data_images: false,
+          paste_block_drop: false,
+          relative_urls: false,
+          remove_script_host: false,
+          paste_as_text: true,
+          valid_elements: 'p,a,b,strong,i,em,h1,h2,h3,h4,h5,ul,ol,li,img,br',
+          paste_word_valid_elements: 'p,a,b,strong,i,em,h1,h2,h3,h4,h5,ul,ol,li,img,br',
+          paste_tab_spaces: 0,
+          default_link_target: '_blank',
+          link_assume_external_targets: true,
+          link_quicklink: true,
+          powerpaste_word_import: 'clean',
+          powerpaste_html_import: 'clean',
+          auto_refresh_interval: 500,
+          convert_urls: false,
+          verify_html: false,
+          valid_children: '+a[div|h1|h2|h3|h4|h5|h6|p|#text]',
+        }"
+    />
+</template>
+<style scoped>
+textarea {
+    width: 100%;
+    min-height: 200px;
+}
+</style>

package/Inputs/EmailInput.vue

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