inertia-bootstrap-forms 2.1.8 → 2.1.9

package/index.d.ts

@@ -26,6 +26,7 @@ import SubmitButton from './src/SubmitButton.vue';
 import TelInput from './src/TelInput.vue';
 import TextAreaInput from './src/TextAreaInput.vue';
 import TextInput from './src/TextInput.vue';
+import OTPInput from './src/OTPInput.vue';
 import DropzoneInput from './src/DropzoneInput.vue';
 import { countryCodes } from './src/countryCodes';
 
@@ -58,6 +59,7 @@ export {
     TelInput,
     TextAreaInput,
     TextInput,
+    OTPInput,
     Quantity,
     File,
 };
@@ -91,6 +93,7 @@ const Vue3FormComponents = {
     TelInput,
     TextAreaInput,
     TextInput,
+    OTPInput,
 };
 
 export default Vue3FormComponents;
@@ -379,6 +382,20 @@ export const SubmitButton: DefineComponent<{
 export const TelInput: DefineComponent<{}, {}, any>;
 export const TextAreaInput: DefineComponent<{}, {}, any>;
 export const TextInput: DefineComponent<{}, {}, any>;
+export const OTPInput: DefineComponent<{
+    name: {
+        type: String,
+        required: true,
+    },
+    maxLength: {
+        type: Number,
+        default: 5,
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
+}, {}, any>;
 export const RangeSliderInput: DefineComponent<{
     name: {
         type: String,
@@ -446,6 +463,7 @@ declare const Vue3FormComponents: {
     TelInput: typeof TelInput;
     TextAreaInput: typeof TextAreaInput;
     TextInput: typeof TextInput;
+    OTPInput: typeof OTPInput;
     Quantity: typeof QuantityInput;
     RangeSliderInput: typeof RangeSliderInput;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "2.1.8",
+    "version": "2.1.9",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/AmountInput.vue

@@ -79,7 +79,7 @@ export default defineComponent({
         :readonly="readonly"
         :placeholder="placeholder"
         type="tel"
-        class="form-control fanum text-start">
+        class="form-control fanum">
     <InputGroupText class="fanum">{{ unit }}</InputGroupText>
     <slot name="suffix"/>
   </InputGroup>

package/src/FileInput.vue

@@ -31,7 +31,10 @@ export default defineComponent({
         return {form};
     },
     computed: {
-        allFiles() {
+      inputID() {
+        return this.form?.getID(this);
+      },
+      allFiles() {
             return this.files
         },
     },
@@ -110,6 +113,7 @@ export default defineComponent({
         <input
             ref="input"
             :name="name"
+            :id="inputID"
             :class="{'is-invalid': form?.errors[name] !== undefined}"
             :disabled="form?.processing"
             type="file"

package/src/FormContainer.vue

@@ -55,11 +55,38 @@ export default defineComponent({
     });
 
     form.getID = function (el) {
+
+      const output = [];
+
+      if(formEl.value?.id) {
+        output.push(formEl.value?.id)
+      }
+
       if (typeof el === String) {
-        return (formEl.value?.id ? formEl.value?.id + '-' : '') + '-' + el;
+        output.push(el);
+      }
+
+      if (el.group && (el.group.name || el.group.groupID)) {
+        console.log(el.group);
+
+        if(el.group.name){
+          output.push(el.group.name);
+        }
+
+        if(el.group.groupID){
+          output.push(el.group.groupID);
+        }
       }
 
-      return (formEl.value?.id ? formEl.value?.id + '-' : '') + ((el.group ? el.group?.name + '-' + el.group?.groupID + '-' : '')) + el.name + (el.value ? '-' + el.value : '');
+      if (el.name) {
+        output.push(el.name);
+      }
+
+      if (el.value) {
+        output.push(el.value);
+      }
+
+      return output.join('-');
     };
 
     return {form, formData, formEl};
@@ -105,6 +132,15 @@ export default defineComponent({
         this.focusNextField(el);
       }
     },
+    handleAutoSubmitLength(event) {
+      const el = event.target;
+      if (!['INPUT', 'TEXTAREA'].includes(el.tagName)) return;
+
+      const autoSubmitLength = parseInt(el.dataset.autoSubmitLength, 10);
+      if (!isNaN(autoSubmitLength) && el.value.length >= autoSubmitLength) {
+        this.submit();
+      }
+    },
     focusNextField(current) {
       const focusable = Array.from(
           this.formEl.querySelectorAll('input, select, textarea')
@@ -197,7 +233,7 @@ export default defineComponent({
         :action="url"
         :method="method"
         :data-autotab="autoTab ? 'true' : ''"
-        @input="handleAutoTab"
+        @input="(event) => { handleAutoTab(event); handleAutoSubmitLength(event) }"
         @submit.prevent="submit"
         @reset="$emit('reset')"
         :class="{'form-processing': form.processing}"

package/src/FormLabel.vue

@@ -2,22 +2,33 @@
 import {defineComponent} from "vue";
 
 export default defineComponent({
-    props: {
-        default: false,
-        required: false,
-    },
-    emits: ['update:modelValue'],
+  props: {
+    default: false,
+    required: false,
+  },
+  emits: ['update:modelValue'],
+  mounted() {
+    const sibling = this.$el.nextElementSibling;
+    if (sibling) {
+      this.forId = sibling.id || sibling.querySelector('[id]')?.id || null;
+    }
+  },
+  data() {
+    return {
+      forId: null,
+    };
+  },
 })
 </script>
 
 <template>
-    <label class="mb-2 d-block">
-        <slot/>
-        <span class="text-danger" v-if="required">*</span>
-    </label>
+  <label class="mb-2 d-block" :for="forId">
+    <slot/>
+    <span class="text-danger" v-if="required">*</span>
+  </label>
 </template>
 <style scoped>
 label {
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>

package/src/MobileInput.vue

@@ -19,5 +19,5 @@ export default defineComponent({
     <TextInput
         :name="name"
         placeholder="موبایل خود را وارد کنید"
-        type="tel"/>
+        type="tel" class="form-control-mobile fanum"/>
 </template>

package/src/OTPInput.vue

@@ -0,0 +1,84 @@
+<script>
+import {computed, inject, defineComponent, defineEmits, watch} from "vue";
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    maxLength: {
+      type: Number,
+      default: 5,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    inputID() {
+      return this.form.getID(this);
+    },
+    placeholderLines() {
+      if (this.placeholder) {
+        return this.placeholder;
+      }
+
+      return '_'.repeat(this.maxLength);
+    }
+
+  },
+  setup(props) {
+    const emits = defineEmits(['completed'])
+
+    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;
+        }
+      }
+    });
+
+    watch(modelValue, (value) => {
+      if (value && value.length >= props.maxLength) {
+        emits('completed', 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"
+      :placeholder="placeholderLines"
+      :maxlength="maxLength"
+      :data-auto-submit-length="maxLength"
+      type="tel"
+      class="form-control form-control-otp fanum">
+</template>
+<style>
+.form-control-otp {
+  letter-spacing: 1rem;
+  text-align: center;
+}
+</style>

package/src/TelInput.vue

@@ -65,7 +65,7 @@ export default defineComponent({
             placeholder: placeHolder
         }"
         v-model="defaultValue"
-        :styleClasses="'form-control' + ((valid === false || form?.errors[name] !== undefined) ? ' is-invalid' : '')"/>
+        :styleClasses="'form-control form-control-tel fanum ' + ((valid === false || form?.errors[name] !== undefined) ? ' is-invalid' : '')"/>
   </div>
 </template>
 <style>

package/src/index.js

@@ -21,6 +21,7 @@ import SubmitButton from "./SubmitButton.vue";
 import TelInput from "./TelInput.vue";
 import TextAreaInput from "./TextAreaInput.vue";
 import TextInput from "./TextInput.vue";
+import OTPInput from "./OTPInput.vue";
 import DropzoneInput from "./DropzoneInput.vue";
 import SimpleUploader from "./SimpleUploader.vue";
 import RangeSliderInput from "./RangeSliderInput.vue";
@@ -54,4 +55,5 @@ export {
     TelInput,
     TextAreaInput,
     TextInput,
+    OTPInput,
 }