inertia-bootstrap-forms 2.1.21 → 3.0.0

package/src/RangeInput.vue

@@ -0,0 +1,96 @@
+<script>
+import { computed, defineComponent, nextTick, watch, ref } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useBsInstance } from './composables/useBsInstance.js';
+
+/** Bootstrap 6 range slider (`.form-range` + `.form-range-input`) with optional value bubble and ticks. */
+export default defineComponent({
+    name: 'RangeInput',
+    emits: ['update:modelValue', 'change', 'input', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        min: { type: Number, default: 0 },
+        max: { type: Number, default: 100 },
+        step: { type: Number, default: 1 },
+        /** Show the current value above the thumb. */
+        bubble: { type: Boolean, default: false },
+        /** (value:number) => string — formats the bubble and the tick labels. */
+        formatter: { type: Function, default: null },
+        /** Tick marks: numbers or { value, label } objects. */
+        ticks: { type: Array, default: () => [] },
+    },
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const el = ref(null);
+        const input = ref(null);
+
+        const current = computed(() => {
+            const n = Number(field.model.value);
+            return field.model.value === null || field.model.value === undefined || Number.isNaN(n) ? props.min : n;
+        });
+
+        const listId = computed(() => (props.ticks.length ? `${field.inputId.value}-ticks` : undefined));
+        const tickItems = computed(() =>
+            props.ticks.map((t) => (typeof t === 'object' && t !== null ? t : { value: t, label: props.formatter ? props.formatter(t) : String(t) }))
+        );
+
+        function onInput(event) {
+            const n = Number(event.target.value);
+            field.model.value = n;
+            emit('input', n, event);
+        }
+
+        const { instance, create } = useBsInstance(
+            'Range',
+            () => el.value,
+            () => ({ bubble: props.bubble, formatter: props.formatter })
+        );
+
+        // The thumb / fill / bubble are recalculated when the value is changed from the outside
+        watch(
+            () => [field.model.value, props.min, props.max],
+            () => nextTick(() => instance.value?.update()),
+            { flush: 'post' }
+        );
+
+        // Ticks, bubble and formatter are read when the plugin is constructed
+        watch(
+            () => [props.bubble, props.formatter, props.ticks, props.min, props.max],
+            async () => {
+                await nextTick();
+                create();
+            },
+            { deep: true }
+        );
+
+        return { ...field, el, input, current, listId, tickItems, onInput };
+    },
+});
+</script>
+
+<template>
+    <div ref="el" class="form-range">
+        <input
+            ref="input"
+            type="range"
+            class="form-range-input"
+            :class="{ 'is-invalid': isInvalid }"
+            :name="name"
+            :id="inputId"
+            :min="min"
+            :max="max"
+            :step="step"
+            :list="listId"
+            :disabled="isDisabled || readonly"
+            :aria-invalid="isInvalid || undefined"
+            :value="current"
+            @input="onInput"
+            @change="emitChange(Number($event.target.value), $event)"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <datalist v-if="listId" :id="listId">
+            <option v-for="tick in tickItems" :key="tick.value" :value="tick.value" :label="tick.label"></option>
+        </datalist>
+    </div>
+</template>

package/src/SimpleUploader.vue

@@ -1,148 +1,13 @@
 <script>
-import {defineComponent, inject} from "vue";
+import { defineComponent, h } from 'vue';
+import FileInput from './FileInput.vue';
 
+/** @deprecated Kept for backwards compatibility — identical to <FileInput>. */
 export default defineComponent({
-  props: {
-    modelValue: '',
-    name: {
-      type: String,
-      required: true,
+    name: 'SimpleUploader',
+    inheritAttrs: true,
+    setup(_, { attrs, slots }) {
+        return () => h(FileInput, attrs, slots);
     },
-    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 || res.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 fetch(this.endpoint,
-          {
-            method: 'POST',
-            headers: {
-              'Accept': 'application/json',
-            },
-            body: formData,
-          },
-      )
-          .then(response => response.json())
-          .then(function (res) {
-            if(res.errors) {
-              throw res;
-            }
-
-            _this.addFileToInputValue(file, res)
-          }).catch(function (err) {
-            console.error('error on uploader', 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 fetch(this.endpoint, {
-        method: 'DELETE',
-        body: 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>

package/src/StarRatingInput.vue

@@ -1,158 +1,134 @@
 <script>
-import {defineComponent, inject} from 'vue';
+import { computed, defineComponent, onMounted, ref } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
 
+/** Star rating with fractional precision, pointer + keyboard support and RTL awareness. */
 export default defineComponent({
-    emits: ['update:modelValue'],
+    name: 'StarRatingInput',
+    emits: ['update:modelValue', 'change', 'hover'],
     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
-        },
+        ...fieldProps,
+        /** Initial rating used when the model is empty. */
+        value: { type: Number, default: 0 },
+        maxStars: { type: Number, default: 5 },
+        /** Steps per star: 1 = whole stars, 2 = half stars, 4 = quarter stars… */
+        precision: { type: Number, default: 2 },
+        showValue: { type: Boolean, default: true },
+        /** Allow clicking the current rating again to reset it to 0. */
+        clearable: { 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;
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const container = ref(null);
+        const hovered = ref(null);
+        const isRTL = ref(false);
 
-            if (star <= fullStars) return 100;
-            if (star === fullStars + 1) return remainder * 100;
-            return 0;
-        },
-        setHover(event) {
-            if (this.readonly) return;
+        onMounted(() => {
+            if (container.value) isRTL.value = getComputedStyle(container.value).direction === 'rtl';
+        });
 
-            const rect = this.$refs.ratingContainer.getBoundingClientRect();
-            let offsetX = event.clientX - rect.left;
+        const locked = computed(() => props.readonly || field.isDisabled.value);
+        const stored = computed(() => {
+            const n = Number(field.model.value);
+            return field.model.value === null || field.model.value === undefined || Number.isNaN(n) ? props.value : n;
+        });
+        const rating = computed(() => hovered.value ?? stored.value);
+        const step = computed(() => 1 / props.precision);
 
-            if (this.isRTL) {
-                offsetX = rect.width - (event.clientX - rect.left); // اصلاح برای حالت راست‌چین
-            }
+        const fillOf = (star) => Math.max(0, Math.min(1, rating.value - (star - 1))) * 100;
 
-            const starWidth = rect.width / this.maxStars;
-            let newRating = Math.round((offsetX / starWidth) * this.precision) / this.precision;
-            newRating = Math.min(newRating, this.maxStars);
+        function ratingFromPointer(event) {
+            const rect = container.value.getBoundingClientRect();
+            const offset = isRTL.value ? rect.right - event.clientX : event.clientX - rect.left;
+            const starWidth = rect.width / props.maxStars;
+            const raw = Math.ceil((offset / starWidth) * props.precision) / props.precision;
+            return Math.min(props.maxStars, Math.max(step.value, raw));
+        }
 
-            this.hoveredRating = newRating;
-        },
-        updateRating() {
-            if (this.readonly) return;
+        function onMove(event) {
+            if (locked.value) return;
+            hovered.value = ratingFromPointer(event);
+            emit('hover', hovered.value);
+        }
 
-            if (this.name) this.form[this.name] = this.hoveredRating.toFixed(1);
-            this.$emit('update:modelValue', this.hoveredRating.toFixed(1));
-        },
-        resetHover() {
-            if (this.readonly) return;
+        function leave() {
+            hovered.value = null;
+        }
 
-            this.hoveredRating = null;
+        function commit(next, event) {
+            if (locked.value) return;
+            const value = props.clearable && next === stored.value ? 0 : next;
+            field.model.value = value;
+            field.emitChange(value, event);
         }
-    },
-    mounted() {
-        if (typeof window !== 'undefined' && this.$refs.ratingContainer) {
-            this.isRTL = getComputedStyle(this.$refs.ratingContainer).direction === 'rtl';
+
+        function onClick(event) {
+            if (locked.value) return;
+            commit(ratingFromPointer(event), event);
         }
-    },
-    data() {
-        return {
-            hoveredRating: parseFloat(this.modelValue || ((this.name ? this.form[this.name] : null) ?? this.value)),
-            isRTL: false,
+
+        function onKeydown(event) {
+            if (locked.value) return;
+            const forward = isRTL.value ? 'ArrowLeft' : 'ArrowRight';
+            const backward = isRTL.value ? 'ArrowRight' : 'ArrowLeft';
+            let next = null;
+
+            if (event.key === forward || event.key === 'ArrowUp') next = stored.value + step.value;
+            else if (event.key === backward || event.key === 'ArrowDown') next = stored.value - step.value;
+            else if (event.key === 'Home') next = 0;
+            else if (event.key === 'End') next = props.maxStars;
+
+            if (next !== null) {
+                event.preventDefault();
+                commit(Math.min(props.maxStars, Math.max(0, Number(next.toFixed(4)))), event);
+            }
         }
-    }
-})
+
+        return {
+            ...field,
+            container,
+            rating,
+            stored,
+            fillOf,
+            onMove,
+            leave,
+            onClick,
+            onKeydown,
+            locked,
+            display: computed(() => rating.value.toFixed(1)),
+        };
+    },
+});
 </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 class="star-rating d-flex align-items-center gap-2" :class="{ 'is-invalid': isInvalid }">
+        <div
+            ref="container"
+            class="star-rating-container d-flex position-relative"
+            role="slider"
+            :tabindex="locked ? -1 : 0"
+            :aria-valuemin="0"
+            :aria-valuemax="maxStars"
+            :aria-valuenow="stored"
+            :aria-readonly="locked || undefined"
+            :aria-invalid="isInvalid || undefined"
+            :style="{ cursor: locked ? 'default' : 'pointer' }"
+            @pointermove="onMove"
+            @pointerleave="leave"
+            @click="onClick"
+            @keydown="onKeydown"
+        >
+            <span v-for="star in maxStars" :key="star" class="star-wrapper position-relative d-inline-block fs-2xl lh-1">
+                <span class="star-bg fg-secondary opacity-50" aria-hidden="true">★</span>
+                <span
+                    class="star-overlay fg-warning"
+                    aria-hidden="true"
+                    :style="{ position: 'absolute', top: 0, insetInlineStart: 0, overflow: 'hidden', whiteSpace: 'nowrap', width: fillOf(star) + '%' }"
+                >★</span>
+            </span>
         </div>
-        <div class="rating-value fanum" v-if="showValue && displayRating> 0">{{ displayRating }}</div>
+        <input v-if="name" type="hidden" :name="name" :value="stored" />
+        <span v-if="showValue && rating > 0" class="rating-value fanum">{{ display }}</span>
     </div>
 </template>
-
-<style>
-.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/src/SubmitButton.vue

@@ -1,30 +1,45 @@
 <script>
-import {Spinner} from 'vue3-bootstrap-components';
-import {defineComponent} from "vue";
+import { computed, defineComponent, inject } from 'vue';
+import { useI18n } from './i18n.js';
 
 export default defineComponent({
-  components: {
-    Spinner
-  },
-  inject: ['form'],
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-})
+    name: 'SubmitButton',
+    emits: ['click'],
+    props: {
+        disabled: { type: Boolean, default: false },
+        /** Force the loading state (otherwise it follows form.processing / form.uploading). */
+        loading: { type: Boolean, default: null },
+        /** Bootstrap 6 button variant: solid | outline | subtle | text | styled | link. Use null to supply your own classes. */
+        variant: { type: String, default: 'solid' },
+        /** Bootstrap 6 theme: primary | secondary | accent | success | danger | warning | info | inverse. */
+        theme: { type: String, default: 'primary' },
+        locale: { type: String, default: null },
+    },
+    setup(props, { emit }) {
+        const formRef = inject('form', null);
+        const form = computed(() => formRef?.value ?? null);
+        const { t } = useI18n(() => props.locale);
+
+        const busy = computed(() =>
+            props.loading !== null ? props.loading : !!(form.value?.processing || form.value?.uploading)
+        );
+
+        const classes = computed(() => [
+            props.variant ? `btn-${props.variant}` : null,
+            props.theme && props.variant ? `theme-${props.theme}` : null,
+        ]);
+
+        return { form, busy, classes, t, onClick: (e) => emit('click', e) };
+    },
+});
 </script>
+
 <template>
-  <button
-      type="submit"
-      :disabled="(disabled || form?.processing || form?.uploading)">
-    <Spinner v-if="form?.processing || form?.uploading"/>
-    <slot :form="form">
-      تایید و ثبت اطلاعات
-    </slot>
-    <slot name="progress">
-      <span class="submit-upload-percent" v-if="form?.uploading">{{ form?.uploading }}%</span>
-    </slot>
-  </button>
+    <button type="submit" :class="classes" :disabled="disabled || busy" :aria-busy="busy || undefined" @click="onClick">
+        <span v-if="busy" class="spinner-border spinner-sm me-2" role="status" aria-hidden="true"></span>
+        <slot :form="form" :loading="busy">{{ t('submit.default') }}</slot>
+        <slot name="progress" :progress="form?.uploading">
+            <span v-if="form?.uploading" class="fanum">{{ form.uploading }}%</span>
+        </slot>
+    </button>
 </template>