Refactor #2801 - Checkbox
Tuğçe Küçükoğlu
parent
b774bf282f
commit
14cb8073a8
|
|
@ -18,16 +18,28 @@ const CheckboxProps = [
|
|||
description: "Allows to select a boolean value instead of multiple values."
|
||||
},
|
||||
{
|
||||
name: "class",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Style class of the component."
|
||||
name: "disabled",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, it specifies that the element should be disabled."
|
||||
},
|
||||
{
|
||||
name: "style",
|
||||
type: "any",
|
||||
name: "readonly",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, it specifies that an input field is read-only."
|
||||
},
|
||||
{
|
||||
name: "required",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, it specifies that the element is required."
|
||||
},
|
||||
{
|
||||
name: "tabindex",
|
||||
type: "number",
|
||||
default: "null",
|
||||
description: "Inline of the component."
|
||||
description: "Index of the element in tabbing order."
|
||||
},
|
||||
{
|
||||
name: "trueValue",
|
||||
|
|
@ -40,6 +52,24 @@ const CheckboxProps = [
|
|||
type: "any",
|
||||
default: "null",
|
||||
description: "Value in unchecked state."
|
||||
},
|
||||
{
|
||||
name: "inputId",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Identifier of the underlying input element."
|
||||
},
|
||||
{
|
||||
name: "inputClass",
|
||||
type: "any",
|
||||
default: "null",
|
||||
description: "Style class of the input field."
|
||||
},
|
||||
{
|
||||
name: "inputStyle",
|
||||
type: "any",
|
||||
default: "null",
|
||||
description: "Inline style of the input field."
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -9,18 +9,30 @@ export interface CheckboxProps {
|
|||
* Value binding of the checkbox.
|
||||
*/
|
||||
modelValue?: any;
|
||||
/**
|
||||
* Name of the input element.
|
||||
*/
|
||||
name?: string | undefined;
|
||||
/**
|
||||
* Allows to select a boolean value instead of multiple values.
|
||||
*/
|
||||
binary?: boolean;
|
||||
/**
|
||||
* Style class of the component input field.
|
||||
* When present, it specifies that the element should be disabled.
|
||||
*/
|
||||
class?: any;
|
||||
disabled?: boolean | undefined;
|
||||
/**
|
||||
* Inline style of the component.
|
||||
* When present, it specifies that an input field is read-only.
|
||||
*/
|
||||
style?: any;
|
||||
readonly?: boolean | undefined;
|
||||
/**
|
||||
* When present, it specifies that the element is required.
|
||||
*/
|
||||
required?: boolean | undefined;
|
||||
/**
|
||||
* Index of the element in tabbing order.
|
||||
*/
|
||||
tabindex?: number | undefined;
|
||||
/**
|
||||
* Value in checked state.
|
||||
*/
|
||||
|
|
@ -29,6 +41,22 @@ export interface CheckboxProps {
|
|||
* Value in unchecked state.
|
||||
*/
|
||||
falseValue?: any;
|
||||
/**
|
||||
* Identifier of the underlying input element.
|
||||
*/
|
||||
inputId?: string | undefined;
|
||||
/**
|
||||
* Style class of the input field.
|
||||
*/
|
||||
inputClass?: any | undefined;
|
||||
/**
|
||||
* Inline style of the input field.
|
||||
*/
|
||||
inputStyle?: any | undefined;
|
||||
/**
|
||||
*
|
||||
*/
|
||||
inputProps?: object | undefined;
|
||||
}
|
||||
|
||||
export interface CheckboxSlots {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="containerClass" @click="onClick($event)">
|
||||
<div class="p-hidden-accessible">
|
||||
<input :id="inputId" ref="input" type="checkbox" :value="value" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
|
||||
<input :id="inputId" ref="input" type="checkbox" :value="value" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
|
||||
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
|
||||
</div>
|
||||
<div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
|
||||
|
|
@ -44,12 +44,14 @@ export default {
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inputId: null,
|
||||
inputProps: null,
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
inputId: null,
|
||||
inputClass: null,
|
||||
inputStyle: null,
|
||||
inputProps: null,
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
|
|
|
|||
|
|
@ -69,24 +69,18 @@ export default {
|
|||
<td>null</td>
|
||||
<td>Value binding of the checkbox.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Name of the input element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>binary</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Allows to select a boolean value instead of multiple values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>style</td>
|
||||
<td>any</td>
|
||||
<td>null</td>
|
||||
<td>Style class of the component input field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>class</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Inline style of the component.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trueValue</td>
|
||||
<td>any</td>
|
||||
|
|
@ -98,6 +92,54 @@ export default {
|
|||
<td>any</td>
|
||||
<td>null</td>
|
||||
<td>Value in unchecked state.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When present, it specifies that the element should be disabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>readonly</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When present, it specifies that an input field is read-only.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>required</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When present, it specifies that the element is required.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tabindex</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Index of the element in tabbing order.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inputId</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Identifier of the underlying input element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inputClass</td>
|
||||
<td>any</td>
|
||||
<td>null</td>
|
||||
<td>Style class of the input field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inputStyle</td>
|
||||
<td>any</td>
|
||||
<td>null</td>
|
||||
<td>Inline style of the input field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inputProps</td>
|
||||
<td>object</td>
|
||||
<td>null</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Reference in New Issue