vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor RadioButton

pull/12/head
cagataycivici 2019-05-22 19:26:55 +03:00
parent 491188eb57
commit baa322b16e
2 changed files with 6 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/radiobutton/RadioButton.vue
View File

@ -1,10 +1,9 @@
<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($event)" @blur="onBlur($event)"
:autocomplete="autocomplete" :autofocus="autofocus">
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)">
</div>
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
</div>
</div>
@ -15,13 +14,8 @@
export default {
props: {
inputId: String,
name: String,
value: null,
disabled: Boolean,
modelValue: null,
autofocus: Boolean,
autocomplete: String
modelValue: null
},
model: {
prop: 'modelValue',
@ -34,7 +28,7 @@
},
methods: {
onClick(event) {
if (!this.disabled) {
if (!this.$attrs.disabled) {
this.$emit('click', event);
this.$emit('input', this.value);
this.$refs.input.focus();

39
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -34,6 +34,7 @@ export default {
</CodeHighlight>
<h3>Properties</h3>
<p>Any valid attribute such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -45,47 +46,11 @@ export default {
</tr>
</thead>
<tbody>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the inner native radiobutton.</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the checkbox element .</td>
</tr>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the radiobutton.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element value cannot be altered.</td>
</tr>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the checkbox.</td>
</tr>
<tr>
<td>autofocus</td>
<td>boolean</td>
<td>null</td>
<td>When present, it specifies that the element should automatically get focus when the page loads.</td>
</tr>
<tr>
<td>autocomplete</td>
<td>string</td>
<td>null</td>
<td>Whether or not an the element should have autocomplete enabled.</td>
<td>Value of the component.</td>
</tr>
</tbody>
</table>