vue-2-custom-input-component

Custom Input Component for VueJS 2.*

Creating input field isn't same anymore. :D

Features

• Support v-model
• Generate radio and checkbox from array

Requirement

• Vue 2.*

Available Input Components

• Radio (VueRadio and VueRadioBlock)
• Checkbox (VueCheckbox and VueCheckboxBlock)

Components

Non-Block Components

Radio and Checkbox

Parameter	Usage
id	The "id" attribute for input element and label element.
values	The value of the radio or checkbox element.
nameGroup	The "name" attribute for grouping the element.
label	The value for the label element.
modelValue	It is used to mimic the v-model behaviour for checkbox element and fix the reactivity for radiobox. Filled with the name of the v-model.

Block Components

Radio Block and Checkbox Block

Parameter	Usage
blockTitle	Title of the block.
radioData / checkboxData	radio or checkbox data

How To Use

Installing the module

$ npm i vue-2-custom-input-component --save

Usage

Importing the components

import {VueRadio,VueRadioBlock,VueCheckbox,VueCheckboxBlock} from 'vue-2-custom-input-component'

Register the components

• Global

Vue.component("vue-radio", VueRadio)
Vue.component("vue-radio-block", VueRadioBlock)
Vue.component("vue-checkbox", VueCheckboxBlock)
Vue.component("vue-checkbox-block", VueCheckboxBlock)

• Local

export default {
	components: {
		 VueRadio,
		 VueRadioBlock,
		 VueCheckbox,
		 VueCheckboxBlock
	},
	data(){
		return {

		}
	}
}

Sample

• VueRadio

// component.vue
<template
	<div>
		<vue-radio
			v-for="(item, index) in radioGender.data"
			:id="radioGender.name+index"
			:key="index"
			:nameGroup="radioGender.name"
			:values="item.value"
			:label="item.label"
			:modelValue="form.gender"
			v-model="form.gender"></vue-radio>

			<div>
			<p>Selected : {{form.gender}}</p>
			</div>
	</div>
</template>
<script>
export default{
	data(){
		return {
			form:{
				gender : ""
			},
			radioGender : {
				name : 'gender',
				titile : 'Gender',
				data: [
					{value:"M", label: "Male"},
					{value:"F", label: "Female"}
				]
			}
		}
	}
}
</script>

• VueCheckbox

// component.vue
<template
	<div>
		<vue-checkbox
			v-for="(item, index) in checkboxHobby.data"
			:id="checkboxHobby.name+index"
			:key="index"
			:nameGroup="checkboxHobby.name"
			:values="item.value"
			:label="item.label"
			:modelValue = "form.hobby"
			v-model="form.hobby"></vue-checkbox>

			<div>
			<p>Selected : {{form.hobby}}</p>
			</div>
	</div>
</template>
<script>
export default{
	data(){
		return {
			form:{
				hobby : ""
			},
			checkboxHobby : {
				name : 'hobby',
				titile : 'Hobby',
				data: [
					{value:"soccer", label: "Soccer"},
					{value:"watching_anime", label: "Watching Anime"},
					{value:"playing_with_cat", label: "Playing with Cat"},
					{value:"read_history_books", label: "Read History Books"},
				]
			}
		}
	}
}
</script>

Repository

https://github.com/OnielN14/custom-input-component-vuejs2

Author

• Daniyal Ahmad Rizaldhi (Github: onieln14)

Credits

Thanks to humanity. Love You Everyone!!! Because You All Are Great!!!