From 491188eb5746cb4a018e61d383cbadd96bc304b4 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 22 May 2019 19:24:05 +0300
Subject: [PATCH] Refactor TriStateCheckbox

---
 .../tristatecheckbox/TriStateCheckbox.vue     | 14 +++-----
 .../tristatecheckbox/TriStateCheckboxDoc.vue  | 33 ++-----------------
 2 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/src/components/tristatecheckbox/TriStateCheckbox.vue b/src/components/tristatecheckbox/TriStateCheckbox.vue
index 715655720..5ed4dadca 100644
--- a/src/components/tristatecheckbox/TriStateCheckbox.vue
+++ b/src/components/tristatecheckbox/TriStateCheckbox.vue
@@ -1,10 +1,9 @@
 <template>
    <div class="p-checkbox p-component" @click="onClick($event)">
        <div class="p-hidden-accessible">
-           <input ref="input" :id="inputId" type="checkbox" :name="name" :checked="value === true" :disabled="disabled" @focus="onFocus()" @blur="onBlur()"
-                    :autocomplete="autocomplete" :autofocus="autofocus">
+           <input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()">
         </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>
         </div>
     </div>
@@ -13,12 +12,7 @@
 <script>
 export default {
     props: {
-		inputId: String,
-		value: null,
-		name: String,
-		disabled: Boolean,
-		autofocus: Boolean,
-		autocomplete: String
+		value: null
     },
     data() {
         return {
@@ -27,7 +21,7 @@ export default {
     },
     methods: {
         onClick(event) {
-            if (!this.disabled) {
+            if (!this.$attrs.disabled) {
                 let newValue;
 
                 switch (this.value) {
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index 90988f391..bf9ed21b5 100644
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -14,6 +14,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 </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>
@@ -25,41 +26,11 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
                             </tr>
 						</thead>
 						<tbody>
-                            <tr>
-                                <td>inputId</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Unique identifier of the native checkbox element.</td>
-                            </tr>
                             <tr>
                                 <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>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>Whether an the element should have autocomplete enabled.</td>
+                                <td>Value of the component.</td>
                             </tr>
 						</tbody>
 					</table>