Implemented RadioButton component

src/AppMenu.vue

@@ -10,6 +10,7 @@
                 <div>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; ListBox</router-link>
+                    <router-link to="/radiobutton">&#9679; RadioButton</router-link>
                     <router-link to="/textarea">&#9679; Textarea</router-link>
                 </div>
             </div>

src/components/radiobutton/RadioButton.css

@@ -0,0 +1,35 @@
+.p-radiobutton {
+    display:inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    margin-right: .25em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+.p-radiobutton .p-radiobutton-box {
+    width: 1.125em;
+    height: 1.125em;
+    line-height: 1.125em;
+    -moz-border-radius: 100%;
+    -webkit-border-radius: 100%;
+    border-radius: 100%;
+    text-align: center;
+    position: relative;
+}
+
+.p-radiobutton .p-radiobutton-icon {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 1em;
+    height: 1em;
+    margin-top: -.5em;
+    margin-left: -.5em;
+}
+ 
+.p-radiobutton + label {
+    vertical-align: middle;
+}

src/components/radiobutton/RadioButton.vue

@@ -0,0 +1,74 @@
+<template>
+   <div class="p-radiobutton p-component" @click="onClick($event)">
+       <div class="p-hidden-accessible">
+           <input ref="input" :id="inputId" type="radio" :name="name" :checked="checked" :disabled="disabled" @focus="onFocus()" @blur="onBlur()"
+                    :autocomplete="autocomplete" :autofocus="autofocus">
+        </div>
+        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
+            <span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+         value: null,
+         modelValue: null,
+         name: String,
+         inputId: String,
+         autofocus: Boolean,
+         autocomplete: String,
+         disabled: Boolean
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'input'
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                this.$emit('click', event);
+                this.$emit('input', this.value);
+                this.$refs.input.focus();
+                this.focused = true;
+
+                if (!this.checked) {
+                    this.$emit('change', event);
+                }
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur() {
+            this.focused = false;
+            this.$emit('blur', event);
+        }
+    },
+    computed: {
+        checked() {
+            return this.modelValue != null && ObjectUtils.equals(this.modelValue, this.value);
+        }
+    }
+}
+</script>
+
+<style>
+.p-radiobutton-box {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow .2s !important;
+}
+    
+.p-radiobutton-box.p-focus {
+    box-shadow: 0 0 0 0.2em #8dcdff;
+}
+</style>

src/main.js

@@ -8,6 +8,7 @@ import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import ListBox from './components/listbox/ListBox';
 import Panel from './components/panel/Panel';
+import RadioButton from './components/radiobutton/RadioButton';
 import Textarea from './components/textarea/Textarea';
 import Toolbar from './components/toolbar/Toolbar';
 import TabView from './components/tabview/TabView';
@@ -26,6 +27,7 @@ Vue.component('p-inputtext', InputText);
 Vue.component('p-listBox', ListBox);
 Vue.component('p-fieldset', Fieldset);
 Vue.component('p-panel', Panel);
+Vue.component('p-radioButton', RadioButton);
 Vue.component('p-tabView', TabView);
 Vue.component('p-tabPanel', TabPanel);
 Vue.component('p-textarea', Textarea);

src/router.js

@@ -46,6 +46,11 @@ export default new Router({
         name: 'panel',
         component: () => import('./views/panel/PanelDemo.vue')
     },
+    {
+        path: '/radiobutton',
+        name: 'radiobutton',
+        component: () => import('./views/radiobutton/RadioButtonDemo.vue')
+    },
     {
         path: '/textarea',
         name: 'textarea',

src/views/radiobutton/RadioButtonDemo.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>RadioButton</h1>
+                <p>RadioButton is an extension to standard radio button element with theming.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb1" name="city" value="New York" v-model="city" />
+                    <label for="rb1" class="p-radiobutton-label">New York</label>
+                </div>
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb2" name="city" value="San Francisco" v-model="city" />
+                    <label for="rb2" class="p-radiobutton-label">San Francisco</label>
+                </div>
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb3" name="city" value="Los Angeles" v-model="city" />
+                    <label for="rb3" class="p-radiobutton-label">Los Angeles</label>
+                </div>
+            </div>
+            Selected City : {{this.city}}
+
+            <h3>Advanced with Preselection, Value Binding and Disabled Option</h3>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb1" name="template" :value="{brand: 'Ultima', key: 'U'}" v-model="theme" />
+                    <label for="rb1" class="p-radiobutton-label">Ultima</label>
+                </div>
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb2" name="template" :value="{brand: 'Serenity', key: 'S'}" v-model="theme" />
+                    <label for="rb2" class="p-radiobutton-label">Serenity</label>
+                </div>
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb3" name="template" :value="{brand: 'Apollo', key: 'A'}" v-model="theme" />
+                    <label for="rb3" class="p-radiobutton-label">Apollo</label>
+                </div>
+                <div class="p-col-12">
+                    <p-radioButton inputId="rb4" name="template" :value="{brand: 'Babylon', key: 'B'}" v-model="theme" :disabled="true"/>
+                    <label for="rb3" class="p-radiobutton-label">Babylon</label>
+                </div>
+            </div>
+            Selected Template : {{this.theme}}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            city: 'null',
+            theme: {brand: 'Serenity', key: 'S'}
+        }
+    },
+    methods: {
+        onChange() {
+            console.log('change');
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>