inertia-bootstrap-forms 1.0.41 → 1.0.43

package/index.d.ts

@@ -158,6 +158,44 @@ export const SubmitButton: DefineComponent<{}, {}, any>;
 export const TelInput: DefineComponent<{}, {}, any>;
 export const TextAreaInput: DefineComponent<{}, {}, any>;
 export const TextInput: DefineComponent<{}, {}, any>;
+export const RangeSliderInput: DefineComponent<{
+    name: {
+        type: String,
+        default: null,
+    },
+    modelValue: {
+        type: Number,
+        default: 0
+    },
+    value: {
+        type: Number,
+        default: 0
+    },
+    min: {
+        type: Number,
+        default: 1
+    },
+    max: {
+        type: Number,
+        default: 100
+    },
+    step: {
+        type: Number,
+        default: 1
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    range: {
+        type: Boolean,
+        default: false
+    },
+    options: {
+        type: Object,
+        default: {}
+    }
+}, {}, any>;
 
 // Export پیش‌فرض
 declare const Vue3FormComponents: {
@@ -189,6 +227,7 @@ declare const Vue3FormComponents: {
     TextAreaInput: typeof TextAreaInput;
     TextInput: typeof TextInput;
     Quantity: typeof QuantityInput;
+    RangeSliderInput: typeof RangeSliderInput;
 };
 
 export default Vue3FormComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.41",
+    "version": "1.0.43",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",
@@ -40,9 +40,10 @@
         "@vitejs/plugin-vue": "^5.2.4",
         "@vue-leaflet/vue-leaflet": "^0.10.1",
         "choices.js": "^11.1.0",
+        "svelte-range-slider-pips": "^4.1.0",
         "vue-tel-input": "^9.3.0",
-        "vue3-persian-datetime-picker": "^1.2.2",
-        "vue3-bootstrap-components": "1.0.42"
+        "vue3-bootstrap-components": "1.0.42",
+        "vue3-persian-datetime-picker": "^1.2.2"
     },
     "peerDependencies": {
         "@inertiajs/vue3": ">2.0",
@@ -50,8 +51,8 @@
         "vue": "^3.0"
     },
     "devDependencies": {
-        "sass-embedded": "^1.89.2",
         "dropzone": "^6.0.0-beta.2",
+        "sass-embedded": "^1.89.2",
         "vite": "^5"
     },
     "bugs": {

package/src/FormContainer.vue

@@ -4,162 +4,164 @@ import {computed, defineComponent, reactive, toRef} from "vue";
 import {Alert} from "vue3-bootstrap-components";
 
 export default defineComponent({
-    components: {Alert},
-    emits: ['submit', 'reset', 'onStart', 'onFinish', 'onSuccess', 'onError', '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,
-        },
+  components: {Alert},
+  emits: ['submit', 'reset', 'onStart', 'onFinish', 'onSuccess', 'onError', 'change'],
+  props: {
+    url: {
+      type: String,
+      default: '',
+      required: false,
     },
-    setup(props) {
-        const formEl = toRef('formEl');
-        const formData = reactive(props.modelValue);
-        const form = useForm({
-          hasMessage: false,
-          successMessage: null,
-          ...formData
-        });
+    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({
+      hasMessage: false,
+      successMessage: null,
+      ...formData
+    });
 
-        form.getID = function (el) {
-            if (typeof el === String) {
-                return (formEl.value?.id ? formEl.value?.id + '-' : '') + '-' + el;
-            }
+    form.getID = function (el) {
+      if (typeof el === String) {
+        return (formEl.value?.id ? formEl.value?.id + '-' : '') + '-' + el;
+      }
 
-            return (formEl.value?.id ? formEl.value?.id + '-' : '') + ((el.group ? el.group?.name + '-' + el.group?.groupID + '-' : '')) + el.name + (el.value ? '-' + el.value : '');
-        };
+      return (formEl.value?.id ? formEl.value?.id + '-' : '') + ((el.group ? el.group?.name + '-' + el.group?.groupID + '-' : '')) + el.name + (el.value ? '-' + el.value : '');
+    };
 
-        return {form, formData, formEl};
-    },
-    provide() {
-        return {
-            form: computed(() => this.form)
-        }
-    },
-    watch: {
-        form: {
-            handler: function (newVal) {
-                const {
-                    isDirty,
-                    errors,
-                    hasErrors,
-                    hasMessage,
-                    successMessage,
-                    processing,
-                    progress,
-                    wasSuccessful,
-                    recentlySuccessful,
-                    __rememberable,
-                    ...cleanedData
-                } = newVal;
+    return {form, formData, formEl};
+  },
+  provide() {
+    return {
+      form: computed(() => this.form)
+    }
+  },
+  watch: {
+    form: {
+      handler: function (newVal) {
+        const {
+          isDirty,
+          errors,
+          hasErrors,
+          hasMessage,
+          successMessage,
+          processing,
+          progress,
+          wasSuccessful,
+          recentlySuccessful,
+          __rememberable,
+          ...cleanedData
+        } = newVal;
 
-                this.$emit('change', cleanedData);
-                this.$emit('update:modelValue', cleanedData)
-            },
-            deep: true,
-        }
+        this.$emit('change', cleanedData);
+        this.$emit('update:modelValue', cleanedData)
+      },
+      deep: true,
+    }
+  },
+  methods: {
+    reset() {
+      this.form.reset();
     },
-    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) {
+    async submit(event) {
+      const formValues = this.modelValue;
 
-                    let data = JSON.stringify({
-                        ...formValues,
-                        ...formDataValues,
-                    });
+      if (this.submitHandler) {
+        await this.submitHandler(event);
+      } else {
+        this.$emit('submit', event);
+        await this.form.transform(function (formDataValues) {
+          delete formDataValues.hasMessage;
+          delete formDataValues.successMessage;
 
-                    const persianDigits = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
-                    const arabicDigits = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
+          let data = JSON.stringify({
+            ...formValues,
+            ...formDataValues,
+          });
 
-                    for (let i = 0; i < 10; i++) {
-                        data = data.replace(persianDigits[i], i).replace(arabicDigits[i], i);
-                    }
+          const persianDigits = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
+          const arabicDigits = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
 
-                    return JSON.parse(data.toLocaleString('en-US'));
-                }).submit(this.method.toString(), this.url, {
-                    only: this.only,
-                    onStart: () => {
-                      if(this.form.hasMessage){
-                        this.form.hasMessage = false;
-                      }
-                      if(this.form.successMessage){
-                        this.form.hasMessage = null;
-                      }
+          for (let i = 0; i < 10; i++) {
+            data = data.replace(persianDigits[i], i).replace(arabicDigits[i], i);
+          }
 
-                      this.$emit('onStart');
-                        this.form.clearErrors();
-                    },
-                    onFinish: (data) => {
-                        this.$emit('onFinish', data);
-                    },
-                    onError: (errors) => {
-                      this.$emit('onError', errors);
-                    },
-                    onSuccess: (data) => {
-                        this.reset();
+          return JSON.parse(data.toLocaleString('en-US'));
+        }).submit(this.method.toString(), this.url, {
+          only: this.only,
+          onStart: () => {
+            if (this.form.hasMessage) {
+              this.form.hasMessage = false;
+            }
+            if (this.form.successMessage) {
+              this.form.hasMessage = null;
+            }
 
-                        if(data?.props?.message){
-                          this.form.hasMessage = true;
-                          this.form.successMessage = data?.props?.message;
-                        }
+            this.$emit('onStart');
+            this.form.clearErrors();
+          },
+          onFinish: (data) => {
+            this.$emit('onFinish', data);
+          },
+          onError: (errors) => {
+            this.$emit('onError', errors);
+          },
+          onSuccess: (data) => {
+            this.reset();
 
-                        this.$emit('onSuccess', data);
-                    }
-                });
+            if (data?.props?.message) {
+              this.form.hasMessage = true;
+              this.form.successMessage = data?.props?.message;
             }
-        }
-    },
-    expose: ['submit', '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 fanum">
-                    <li v-for="error in form.errors">{{ error }}</li>
-                </ul>
-            </Alert>
-        </slot>
-        <slot name="message" v-if="form.hasMessage" :form="form">
-            <Alert type="success" v-html="form.successMessage" v-if="form.successMessage"></Alert>
-        </slot>
-        <slot :form="form" :submit="submit"/>
-    </form>
+  <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 fanum">
+          <li v-for="error in form.errors">{{ error }}</li>
+        </ul>
+      </Alert>
+    </slot>
+    <slot name="message" v-if="form.hasMessage" :form="form">
+      <Alert type="success" v-html="form.successMessage" v-if="form.successMessage"></Alert>
+    </slot>
+    <slot :form="form" :submit="submit"/>
+  </form>
 </template>

package/src/RangeSliderInput.vue

@@ -0,0 +1,203 @@
+<script>
+import {computed, defineComponent, inject} from 'vue';
+import RangeSlider from 'svelte-range-slider-pips';
+
+export default defineComponent({
+  emits: ['update:modelValue', 'change'],
+  props: {
+    name: {
+      type: String,
+      default: null,
+    },
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: {}
+    }
+  },
+  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: {},
+  mounted() {
+    let _this=this;
+    this.rangeSliderEn = new RangeSlider({
+      target: this.$refs.input,
+      props: {
+        values: this.modelValue,
+        pips: true,
+        spring: true,
+        rangeFloat: true,
+        range: true,
+        formatter: (v) => Intl.NumberFormat().format(v),
+        rangeFormatter: (x, y) => Intl.NumberFormat().format(x) + ' - ' + Intl.NumberFormat().format(y),
+        first: 'label',
+        last: 'label',
+        ...this.options,
+        min: this.min || null,
+        max: this.max || null,
+
+      }
+    }).$on('change', function (e) {
+      _this.$emit('change', e);
+
+      const value = _this.range ? e.detail?.values : e.detail?.value;
+      _this.modelValue = value;
+      _this.$emit('update:modelValue', value);
+    });
+  },
+  data() {
+    return {
+      rangeSliderEn: null
+    }
+  }
+})
+</script>
+<template>
+  <div class="range-input" ref="input" dir="ltr">
+  </div>
+</template>
+
+<style>
+/* purgecss start ignore */
+.range-slider {
+  direction: ltr;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background: #ddd;
+  border-radius: 4px
+}
+
+.range-slider[data-vertical] {
+  height: 100%;
+  width: 8px
+}
+
+.range-slider[data-disabled] {
+  opacity: .5;
+  cursor: not-allowed
+}
+
+.range-slider .range-slider__thumb {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: #2196f3
+}
+
+.range-slider .range-slider__thumb:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 6px rgba(33, 150, 243, .5)
+}
+
+.range-slider[data-vertical] .range-slider__thumb {
+  left: 50%
+}
+
+.range-slider .range-slider__thumb[data-disabled] {
+  z-index: 2
+}
+
+.range-slider .range-slider__range {
+  position: absolute;
+  z-index: 1;
+  transform: translate(0, -50%);
+  top: 50%;
+  width: 100%;
+  height: 100%;
+  background: #51adf6
+}
+
+.range-slider[data-vertical] .range-slider__range {
+  left: 50%;
+  transform: translate(-50%, 0)
+}
+
+.range-slider input[type=range] {
+  -webkit-appearance: none;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background-color: transparent
+}
+
+.range-slider input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none
+}
+
+.range-slider input[type=range]::-moz-range-thumb {
+  width: 0;
+  height: 0;
+  border: 0
+}
+
+.range-slider input[type=range]:focus {
+  outline: 0
+}
+
+/* purgecss end ignore */
+</style>

package/src/index.js

@@ -24,6 +24,7 @@ import TextAreaInput from "./TextAreaInput.vue";
 import TextInput from "./TextInput.vue";
 import DropzoneInput from "./DropzoneInput.vue";
 import SimpleUploader from "./SimpleUploader.vue";
+import RangeSliderInput from "./RangeSliderInput.vue";
 
 export {
     AmountInput,
@@ -37,6 +38,7 @@ export {
     EditorInput,
     DropzoneInput,
     SimpleUploader,
+    RangeSliderInput,
     GroupControl,
     FormContainer,
     LocationInput,