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

Refactor Checkbox

pull/12/head
cagataycivici 2019-05-22 19:21:00 +03:00
parent dfcd5e08e2
commit 3971e0359b
3 changed files with 7 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/checkbox/Checkbox.vue
View File

@ -1,10 +1,9 @@
<template> <template>
<div class="p-checkbox p-component" @click="onClick($event)"> <div class="p-checkbox p-component" @click="onClick($event)">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input ref="input" :id="inputId" type="checkbox" :name="name" :checked="checked" :disabled="disabled" @focus="onFocus($event)" @blur="onBlur($event)" <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)">
:autocomplete="autocomplete" :autofocus="autofocus">
</div> </div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]"> <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span> <span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
</div> </div>
</div> </div>
@ -14,14 +13,10 @@
import ObjectUtils from '../utils/ObjectUtils'; import ObjectUtils from '../utils/ObjectUtils';
export default { export default {
inheritAttrs: false,
props: { props: {
value: null, value: null,
modelValue: null, modelValue: null,
name: String,
inputId: String,
autofocus: Boolean,
autocomplete: String,
disabled: Boolean,
binary: Boolean binary: Boolean
}, },
model: { model: {
@ -35,7 +30,7 @@ export default {
}, },
methods: { methods: {
onClick(event) { onClick(event) {
if (!this.disabled) { if (!this.$attrs.disabled) {
let newModelValue; let newModelValue;
if (this.binary) { if (this.binary) {

2
src/views/checkbox/CheckboxDemo.vue
View File

@ -9,7 +9,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Checkbox id="binary" inputId="binary" v-model="checked"/> <Checkbox id="binary" inputId="binary" v-model="checked" :binary="true" />
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label> <label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
<h3>Multiple</h3> <h3>Multiple</h3>

39
src/views/checkbox/CheckboxDoc.vue
View File

@ -36,6 +36,7 @@ export default {
checkboxes as checked by default.</p> checkboxes as checked by default.</p>
<h3>Properties</h3> <h3>Properties</h3>
<p>Any valid attribute such as name and autofocus are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -47,48 +48,12 @@ export default {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the inner native checkbox.</td>
</tr>
<tr> <tr>
<td>value</td> <td>value</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value of the checkbox.</td> <td>Value of the checkbox.</td>
</tr> </tr>
<tr>
<td>name</td>
<td>string</td>
<td>null</td>
<td>Name of the checkbox element .</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>autocomplete</td>
<td>string</td>
<td>null</td>
<td>Whether an the element should have autocomplete enabled.</td>
</tr>
<tr>
<td>autofocus</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should automatically get focus when the page loads.</td>
</tr>
<tr> <tr>
<td>binary</td> <td>binary</td>
<td>boolean</td> <td>boolean</td>
@ -191,7 +156,7 @@ export default {
&lt;div class=&quot;content-section implementation&quot;&gt; &lt;div class=&quot;content-section implementation&quot;&gt;
&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt; &lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
&lt;Checkbox id=&quot;binary&quot; inputId=&quot;binary&quot; v-model=&quot;checked&quot;/&gt; &lt;Checkbox id=&quot;binary&quot; inputId=&quot;binary&quot; v-model=&quot;checked&quot; :binary="true"/&gt;
&lt;label for=&quot;binary&quot; class=&quot;p-checkbox-label&quot; style=&quot;font-weight: bold&quot;&gt;{{checked}}&lt;/label&gt; &lt;label for=&quot;binary&quot; class=&quot;p-checkbox-label&quot; style=&quot;font-weight: bold&quot;&gt;{{checked}}&lt;/label&gt;
&lt;h3&gt;Multiple&lt;/h3&gt; &lt;h3&gt;Multiple&lt;/h3&gt;