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

Refactor TriStateCheckbox

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

14
src/components/tristatecheckbox/TriStateCheckbox.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="value === true" :disabled="disabled" @focus="onFocus()" @blur="onBlur()" <input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()">
:autocomplete="autocomplete" :autofocus="autofocus">
</div> </div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': (value != null), 'p-disabled': disabled, 'p-focus': focused}]"> <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<span :class="['p-checkbox-icon p-c', icon]"></span> <span :class="['p-checkbox-icon p-c', icon]"></span>
</div> </div>
</div> </div>
@ -13,12 +12,7 @@
<script> <script>
export default { export default {
props: { props: {
inputId: String, value: null
value: null,
name: String,
disabled: Boolean,
autofocus: Boolean,
autocomplete: String
}, },
data() { data() {
return { return {
@ -27,7 +21,7 @@ export default {
}, },
methods: { methods: {
onClick(event) { onClick(event) {
if (!this.disabled) { if (!this.$attrs.disabled) {
let newValue; let newValue;
switch (this.value) { switch (this.value) {

33
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View File

@ -14,6 +14,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</CodeHighlight> </CodeHighlight>
<h3>Properties</h3> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -25,41 +26,11 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the native checkbox element.</td>
</tr>
<tr> <tr>
<td>value</td> <td>value</td>
<td>any</td>
<td>null</td>
<td>Value of the TriStateCheckbox.</td>
</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>boolean</td>
<td>false</td>
<td>When present, it specifies that the element value cannot be altered.</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>
<td>autocomplete</td>
<td>string</td>
<td>null</td> <td>null</td>
<td>Whether an the element should have autocomplete enabled.</td> <td>Value of the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>