inertia-bootstrap-forms 1.0.0 → 1.0.3

package/Inputs/DatePickerInput.vue

@@ -1,137 +0,0 @@
-<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/Select2Input.vue

@@ -1,193 +0,0 @@
-<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/TextAreaInput.vue

@@ -1,33 +0,0 @@
-<script>
-import {inject} from "vue";
-
-export default {
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-    },
-    setup(props) {
-        let form = inject('form');
-
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
-        }
-
-        return {form};
-    },
-}
-</script>
-<template>
-    <textarea
-        :name="name"
-        v-model="form[this.name]"
-        :class="{'is-invalid': form?.errors[name] !== undefined}"
-        :disabled="form?.processing"
-        class="form-control"></textarea>
-</template>

package/Inputs/TextInput.vue

@@ -1,34 +0,0 @@
-<script>
-import {inject} from "vue";
-
-export default {
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-    },
-    setup(props) {
-        let form = inject('form');
-
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
-        }
-
-        return {form};
-    },
-}
-</script>
-<template>
-    <input
-        :name="name"
-        v-model="form[this.name]"
-        :class="{'is-invalid': form?.errors[name] !== undefined}"
-        :disabled="form?.processing"
-        type="text"
-        class="form-control">
-</template>

package/Inputs/locationInput.vue

@@ -1,122 +0,0 @@
-<script>
-import "leaflet/dist/leaflet.css";
-import {LMap, LTileLayer, LMarker} from "@vue-leaflet/vue-leaflet";
-import {inject} from "vue";
-
-export default {
-    components: {
-        LMap, LTileLayer, LMarker
-    },
-    props: {
-        name: {
-            type: String,
-            default: 'location',
-            required: false,
-        },
-        disabled: {
-            type: [Boolean, String],
-            default: false,
-        },
-        modelValue: Object,
-    },
-    setup(props) {
-        let form = inject('form');
-
-        if (form === undefined) {
-            form = {
-                errors: {},
-                zoom: 8,
-                center: [47.41322, -1.219482],
-                getID(name) {
-                }
-            };
-        }
-
-        return {form};
-    },
-    methods: {
-        setMarker(event) {
-            this.marker = {
-                lat: event?.latlng?.lat || event?.target?._latlng?.lat,
-                lng: event?.latlng?.lng || event?.target?._latlng?.lng,
-            };
-
-            this.$emit('update:modelValue', this.marker);
-            this.form[this.name] = this.marker;
-        }
-    },
-    data() {
-        return {
-            zoom: 13,
-            marker: {
-                lat: this.modelValue?.lat || this.form[this.name]?.lat || null,
-                lng: this.modelValue?.lng || this.form[this.name]?.lng || null,
-            },
-            center: {
-                lat: this.modelValue?.lat || this.form[this.name]?.lat || 35.69293,
-                lng: this.modelValue?.lng || this.form[this.name]?.lng || 51.36372,
-            },
-        };
-    },
-
-}
-</script>
-<template>
-    <div class="location-map-container" :class="{disabled: disabled || form.processing, 'is-invalid': form?.errors[name] !== undefined}">
-        <l-map ref="map" v-model:zoom="zoom" :useGlobalLeaflet="false" :center="this.center" @click="setMarker">
-            <l-tile-layer
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                layer-type="base"
-                name="OpenStreetMap"
-            ></l-tile-layer>
-            <LMarker :lat-lng="marker" v-if="marker" :draggable="true" @dragend="setMarker"/>
-        </l-map>
-    </div>
-</template>
-<style>
-.location-map-container {
-    position: relative;
-    width: 100%;
-    height: 300px;
-    overflow: hidden;
-    border-radius: var(--bs-border-radius);
-}
-
-.location-map-container.is-invalid {
-    border: 1px solid var(--bs-form-invalid-border-color);
-}
-
-.location-map-container[disabled],
-.location-map-container.disabled:before {
-    content: "";
-    background-color: rgba(var(--bs-light-rgb), 0.4);
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 9999;
-}
-
-.location-map-container {
-    .leaflet-pane,
-    .leaflet-tile,
-    .leaflet-marker-icon,
-    .leaflet-marker-shadow,
-    .leaflet-tile-container,
-    .leaflet-pane > svg,
-    .leaflet-pane > canvas,
-    .leaflet-zoom-box,
-    .leaflet-image-layer,
-    .leaflet-layer {
-        left: auto;
-        right: 0;
-    }
-
-    .leaflet-control-attribution.leaflet-control {
-        display: none;
-    }
-}
-
-</style>