inertia-bootstrap-forms 1.0.42 → 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.42",
+    "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/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,