Refactor TriStateCheckbox
parent
3971e0359b
commit
491188eb57
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue