কাস্টম ইনপুট কম্পোনেন্টস

Vue.js এর কাস্টম ইনপুট কম্পোনেন্টগুলি খুবই শক্তিশালী এবং ইউজার ইন্টারফেসের এক্সটেনশন ও কাস্টমাইজেশনের জন্য ব্যবহৃত হয়। কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করার মাধ্যমে আপনি সাধারণ ইনপুট ফিল্ডের চেয়ে অনেক বেশি বৈশিষ্ট্য যোগ করতে পারেন, যেমন ভ্যালিডেশন, কাস্টম স্টাইলিং, ডেটা বাইন্ডিং ইত্যাদি। এই টিউটোরিয়ালে আমরা কিভাবে Vue.js এ কাস্টম ইনপুট কম্পোনেন্ট তৈরি করতে হয় তা দেখবো।

১. কাস্টম ইনপুট কম্পোনেন্ট তৈরি করা

Vue.js এ কাস্টম ইনপুট কম্পোনেন্ট তৈরি করতে হলে, আপনাকে একটি নতুন কম্পোনেন্ট তৈরি করতে হবে, যা ইনপুট ফিল্ডের মতো কাজ করবে এবং প্রয়োজনীয় ডেটা বা ভ্যালিডেশন ফিচারগুলো গ্রহণ করবে।

কাস্টম ইনপুট কম্পোনেন্টের উদাহরণ:

<!-- CustomInput.vue -->
<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input
      :type="type"
      :id="id"
      :value="value"
      @input="updateValue($event)"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    id: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);  // Update parent component's data
    }
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
}
label {
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}
</style>

এখানে একটি কাস্টম ইনপুট কম্পোনেন্ট তৈরি করা হয়েছে, যার মধ্যে:

• label: ইনপুটের জন্য লেবেল।
• value: ইনপুটের মান (ডেটা বাইন্ডিং এর মাধ্যমে প্যারেন্ট কম্পোনেন্টে পাঠানো হবে)।
• type: ইনপুটের টাইপ (যেমন text, password ইত্যাদি)।
• id: ইনপুটের ইউনিক আইডি।
• placeholder: ইনপুট ফিল্ডের জন্য প্লেসহোল্ডার টেক্সট।

এটি প্যারেন্ট কম্পোনেন্টের সাথে ডেটা শেয়ার করতে v-model ব্যবহার করে। v-model স্বয়ংক্রিয়ভাবে ইনপুটের মানকে প্যারেন্ট কম্পোনেন্টের ডেটা প্রপার্টির সাথে বাইন্ড করে দেয়।

২. কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করা

এখন, আপনি এই কাস্টম ইনপুট কম্পোনেন্টকে অন্য কম্পোনেন্টে ব্যবহার করতে পারবেন। সাধারণত, Vue.js এ কাস্টম কম্পোনেন্টগুলোকে <CustomInput /> ট্যাগের মাধ্যমে ব্যবহার করা হয়।

কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করার উদাহরণ:

<template>
  <div>
    <h2>Registration Form</h2>
    <form @submit.prevent="submitForm">
      <CustomInput
        v-model="userData.name"
        label="Name"
        id="name"
        placeholder="Enter your name"
      />
      <CustomInput
        v-model="userData.email"
        label="Email"
        type="email"
        id="email"
        placeholder="Enter your email"
      />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';  // Import CustomInput component

export default {
  name: 'RegistrationForm',
  components: {
    CustomInput
  },
  data() {
    return {
      userData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      console.log(this.userData);  // Handle form submission
    }
  }
};
</script>

এখানে, RegistrationForm কম্পোনেন্টে দুইটি কাস্টম ইনপুট কম্পোনেন্ট (CustomInput) ব্যবহার করা হয়েছে:

• প্রথমটি name ফিল্ডের জন্য।
• দ্বিতীয়টি email ফিল্ডের জন্য।

v-model ব্যবহার করে, কাস্টম ইনপুট কম্পোনেন্টের মধ্যে যেসব ডেটা আছে তা প্যারেন্ট কম্পোনেন্টে বাইন্ড করা হয়েছে। এর মাধ্যমে প্যারেন্ট কম্পোনেন্টে ডেটা আপডেট হবে যখন ইনপুটের মান পরিবর্তিত হবে।

৩. কাস্টম ইনপুটে ভ্যালিডেশন যোগ করা

Vue.js কম্পোনেন্টে ভ্যালিডেশন যোগ করার জন্য, আপনি প্যারেন্ট কম্পোনেন্টে ভ্যালিডেশন লজিক বা কাস্টম ইনপুট কম্পোনেন্টে সরাসরি কাস্টম ভ্যালিডেশন মেথড তৈরি করতে পারেন।

উদাহরণ: কাস্টম ইনপুটে ইমেইল ভ্যালিডেশন

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input
      :type="type"
      :id="id"
      :value="value"
      @input="updateValue($event)"
      :placeholder="placeholder"
      :class="{'error': !isValid}"
    />
    <p v-if="!isValid" class="error-message">Please enter a valid email.</p>
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    id: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  computed: {
    isValid() {
      // Email validation (only for email input type)
      if (this.type === 'email') {
        return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(this.value);
      }
      return true;
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);
    }
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
}

input.error {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 12px;
}
</style>

এখানে, CustomInput কম্পোনেন্টে ইমেইল ইনপুটের জন্য একটি ভ্যালিডেশন যোগ করা হয়েছে:

• যখন ইনপুট টাইপ email হবে, তখন একটি সিম্পল ইমেইল প্যাটার্ন দ্বারা ইনপুটের মান যাচাই করা হবে।
• যদি ইমেইল ইনপুট সঠিক না হয়, তাহলে এটি একটি error class যোগ করবে এবং একটি ত্রুটি বার্তা প্রদর্শন করবে।

সারাংশ

• কাস্টম ইনপুট কম্পোনেন্ট: Vue.js এ কাস্টম ইনপুট কম্পোনেন্ট তৈরি করতে, আপনি props ব্যবহার করে ইনপুটের ডেটা গ্রহণ এবং v-model এর মাধ্যমে ডেটা বাইন্ডিং করতে পারেন।
• কাস্টম স্টাইলিং এবং ভ্যালিডেশন: ইনপুট কম্পোনেন্টে কাস্টম স্টাইলিং এবং ভ্যালিডেশন যুক্ত করা যায়, যা ইউজার ইন্টারফেসকে আরো উন্নত ও কার্যকরী করে তোলে।
• কাস্টম ইনপুট কম্পোনেন্ট পুনঃব্যবহারযোগ্য: একবার তৈরি করা কাস্টম ইনপুট কম্পোনেন্টকে বিভিন্ন স্থানে পুনঃব্যবহার করা যায়, ফলে কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বাড়ে।

এভাবে Vue.js এ কাস্টম ইনপুট কম্পোনেন্ট তৈরি এবং ব্যবহার করা হয় যা ইউজার ইন্টারফেস উন্নত করে এবং ডেটার ফ্লেক্সিবিলিটি ও কাস্টমাইজেশন সহজ করে তোলে।