inertia-bootstrap-forms 1.0.0 → 1.0.3

package/src/Select2Input.vue

@@ -0,0 +1,190 @@
+<script>
+import '../dist/css/from-select.scss';
+import Choices from 'choices.js';
+import {computed, inject} from "vue";
+
+export default {
+  emits: ['update:modelValue', 'search', 'change', 'selected'],
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    modelValue: '',
+    label: {
+      type: String,
+      default: 'name',
+    },
+    placeholder: {
+      type: String,
+      default: 'Click to choice',
+    },
+    searchPlaceholder: {
+      type: String,
+      default: 'Type for search...',
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    config: {
+      type: Object,
+      default: {},
+    },
+    locale: {
+      type: String,
+      default: 'en',
+    },
+    options: Array,
+    searchEnabled: {
+      type: Boolean,
+      default: false
+    },
+    search: {
+      type: Object,
+      default: {
+        url: 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};
+  },
+  methods: {
+    init() {
+      this.choices = new Choices(this.$refs.input, {
+        searchEnabled: (this.searchEnabled || !!this.search?.url),
+        removeItemButton: true,
+        placeholderValue: this.placeholder,
+        searchPlaceholderValue: this.placeholder,
+        itemSelectText: null,
+        ...this.localeTranslates[this.currentLocale],
+        ...this.config
+      });
+
+      this.$refs.input.addEventListener('search', this.searchHandle);
+    },
+    destroy() {
+      this.$refs.input.removeEventListener('search', this.searchHandle);
+      this.choices.destroy();
+    },
+    searchHandle(event){
+      this.doSearch(event.detail.value);
+    },
+    async setLoading(){
+      this.loading = true;
+      this.choices.clearChoices();
+      await this.choices.setChoices(
+          [
+            {
+              value: '',
+              label: this.localeTranslates[this.currentLocale]['searchingPlaceholder'] || 'Searching...',
+            }
+          ],
+          'value',
+          'label',
+          true
+      );
+    },
+    async doSearch(searchTerm){
+      await this.setLoading();
+
+      if (this.searchController) {
+        this.searchController.abort();
+      }
+      this.searchController = new AbortController();
+
+      try {
+        const res = await fetch(this.search?.url + '?query=' + encodeURIComponent(searchTerm), {
+          method: 'POST',
+          signal: this.searchController.signal,
+        });
+        const data = await res.json();
+
+        this.choices.clearChoices();
+        await this.choices.setChoices(
+            data.map(item => ({
+              id: item.id,
+              name: item.name,
+            })),
+            'id',
+            'name',
+            true
+        );
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+        this.choices.clearChoices();
+        if (err.name !== 'AbortError') {
+          console.error(err);
+        }
+      }
+
+    }
+  },
+  mounted() {
+    if(this.locale === 'en' && document.dir === 'rtl'){
+      this.currentLocale = 'fa';
+    }
+
+    this.init()
+  },
+  beforeUnmount() {
+    this.destroy()
+  },
+  data() {
+    return {
+      choices: null,
+      loading: false,
+      searchController: null,
+      currentLocale: this.locale,
+      localeTranslates: {
+        'fa' : {
+          placeholderValue: 'انتخاب کنید...',
+          searchPlaceholderValue: 'برای جستجو تایپ کنید...',
+          searchingPlaceholder: 'در حال جستجو...',
+          loadingText: 'در حال جستجو...',
+          noResultsText: 'نتیجه ای یافت نشد',
+          noChoicesText: 'گزینه ای وجود ندارد',
+        }
+      },
+    }
+  }
+}
+</script>
+<template>
+  <select
+      :name="name"
+      v-model="modelValue"
+      class="form-control-select"
+      :class="{'form-control-select--loading': loading}"
+      :placeholder="placeholder"
+      ref="input">
+    <option :value="item.id" v-for="(item, key) in options">{{item.name}}</option>
+  </select>
+</template>

package/src/StarRatingInput.vue

@@ -0,0 +1,158 @@
+<script>
+import {inject} from 'vue';
+
+export default {
+    emits: ['update:modelValue'],
+    props: {
+        name: {
+            type: String,
+            default: null,
+        },
+        modelValue: {
+            type: Number,
+            default: 0
+        },
+        value: {
+            type: Number,
+            default: 0
+        },
+        maxStars: {
+            type: Number,
+            default: 5
+        },
+        precision: {
+            type: Number,
+            default: 2
+        },
+        showValue: {
+            type: Boolean,
+            default: true
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+        return {form};
+    },
+    computed: {
+        displayRating() {
+            return (this.hoveredRating ?? (this.modelValue ?? (this.name ? this.form[this.name] : null)) ?? this.value).toFixed(1);
+        }
+    },
+    methods: {
+        getStarFill(star) {
+            const rating = this.hoveredRating ?? (this.modelValue || this.form[this.name]);
+            const fullStars = Math.floor(rating);
+            const remainder = rating - fullStars;
+
+            if (star <= fullStars) return 100;
+            if (star === fullStars + 1) return remainder * 100;
+            return 0;
+        },
+        setHover(event) {
+            if (this.readonly) return;
+
+            const rect = this.$refs.ratingContainer.getBoundingClientRect();
+            let offsetX = event.clientX - rect.left;
+
+            if (this.isRTL) {
+                offsetX = rect.width - (event.clientX - rect.left); // اصلاح برای حالت راست‌چین
+            }
+
+            const starWidth = rect.width / this.maxStars;
+            let newRating = Math.round((offsetX / starWidth) * this.precision) / this.precision;
+            newRating = Math.min(newRating, this.maxStars);
+
+            this.hoveredRating = newRating;
+        },
+        updateRating() {
+            if (this.readonly) return;
+
+            if (this.name) this.form[this.name] = this.hoveredRating.toFixed(1);
+            this.$emit('update:modelValue', this.hoveredRating.toFixed(1));
+        },
+        resetHover() {
+            if (this.readonly) return;
+
+            this.hoveredRating = null;
+        }
+    },
+    mounted() {
+        if (this.$refs.ratingContainer) {
+            this.isRTL = getComputedStyle(this.$refs.ratingContainer).direction === 'rtl';
+        }
+    },
+    data() {
+        return {
+            hoveredRating: parseFloat(this.modelValue || ((this.name ? this.form[this.name] : null) ?? this.value)),
+            isRTL: false,
+        }
+    }
+}
+</script>
+<template>
+    <div class="star-rating">
+        <div class="star-rating-container" ref="ratingContainer" @mouseleave="resetHover" @mousemove="setHover" @click="updateRating">
+            <div v-for="star in maxStars" :key="star" class="star-wrapper">
+                <div class="star-bg">★</div>
+                <span class="star-overlay" :style="{ width: getStarFill(star) + '%' }">★</span>
+            </div>
+        </div>
+        <div class="rating-value fanum" v-if="showValue && displayRating> 0">{{ displayRating }}</div>
+    </div>
+</template>
+
+<style scoped>
+.star-rating,
+.star-rating-container {
+    display: flex;
+    align-items: center;
+}
+
+.star-rating {
+    gap: 8px;
+}
+
+.star-rating .star-rating-container {
+    cursor: pointer;
+    position: relative;
+}
+
+.star-rating .star-wrapper {
+    position: relative;
+    font-size: 28px;
+    line-height: 1;
+    display: inline-block;
+}
+
+.star-rating .star-bg {
+    color: #ccc;
+}
+
+.star-rating .star-overlay {
+    position: absolute;
+    top: 0;
+    left: 0; /* 👈 اصلاح برای RTL */
+    overflow: hidden;
+    color: gold;
+    white-space: nowrap;
+    width: 0;
+    transition: width 0.2s ease-in-out;
+}
+
+.star-rating .rating-value {
+    font-size: 18px;
+    color: #444;
+    margin-right: 8px;
+}
+</style>

package/{Inputs → src}/SubmitButton.vue

@@ -1,5 +1,5 @@
 <script>
-import Spinner from "@/Bootstrap/Spinner.vue";
+import {Spinner} from "vue3-bootstrap-components";
 
 export default {
     components: {
@@ -15,6 +15,8 @@ export default {
         :disabled="form?.processing"
         class="btn btn-primary px-3 px-sm-4">
         <Spinner v-if="form?.processing"/>
-        تایید و ثبت اطلاعات
+        <slot>
+            تایید و ثبت اطلاعات
+        </slot>
     </button>
 </template>

package/src/TextAreaInput.vue

@@ -0,0 +1,44 @@
+<script>
+import {computed, inject} from "vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+    },
+    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>
+    <textarea
+        :name="name"
+        v-model="modelValue"
+        :class="{'is-invalid': form?.errors[name] !== undefined}"
+        :disabled="form?.processing"
+        class="form-control"></textarea>
+</template>

package/src/TextInput.vue

@@ -0,0 +1,51 @@
+<script>
+import {computed, inject} from "vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+    },
+    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>
+    <input
+        :name="name"
+        :id="inputID"
+        v-model="modelValue"
+        :class="{'is-invalid': form?.errors[name] !== undefined}"
+        :disabled="form?.processing"
+        type="text"
+        class="form-control">
+</template>

package/src/locationInput.vue

@@ -0,0 +1,124 @@
+<script>
+import "leaflet/dist/leaflet.css";
+import {LMap, LTileLayer, LMarker} from "@vue-leaflet/vue-leaflet";
+import {inject} from "vue";
+
+export default {
+  name: 'locationInput',
+  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>

package/Bootstrap/InputGroup.vue

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

package/Bootstrap/InputGroupText.vue

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