Refactor #2801 - InputSwitch

pull/2809/head
Tuğçe Küçükoğlu 2022-07-22 22:08:02 +03:00
parent 45ef9b3c8e
commit 262187d843
4 changed files with 56 additions and 34 deletions

View File

@ -5,18 +5,6 @@ const InputSwitchProps = [
default: "null", default: "null",
description: "Specifies whether a inputswitch should be checked or not." description: "Specifies whether a inputswitch should be checked or not."
}, },
{
name: "class",
type: "string",
default: "null",
description: "Style class of the component."
},
{
name: "style",
type: "any",
default: "null",
description: "Inline of the component."
},
{ {
name: "trueValue", name: "trueValue",
type: "any", type: "any",
@ -28,7 +16,25 @@ const InputSwitchProps = [
type: "any", type: "any",
default: "null", default: "null",
description: "Value in unchecked state." description: "Value in unchecked state."
} },
{
name: "inputId",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
},
{
name: "inputStyle",
type: "any",
default: "null",
description: "Inline style of the input field."
},
{
name: "inputClass",
type: "string",
default: "null",
description: "Style class of the input field."
},
]; ];
const InputSwitchEvents = [ const InputSwitchEvents = [

View File

@ -5,14 +5,6 @@ export interface InputSwitchProps {
* Specifies whether a inputswitch should be checked or not. * Specifies whether a inputswitch should be checked or not.
*/ */
modelValue?: boolean | string | undefined; modelValue?: boolean | string | undefined;
/**
* Inline style of the component.
*/
class?: any;
/**
* Style class of the component input field.
*/
style?: any;
/** /**
* Value in checked state. * Value in checked state.
*/ */
@ -21,6 +13,22 @@ export interface InputSwitchProps {
* Value in unchecked state. * Value in unchecked state.
*/ */
falseValue?: any; 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 InputSwitchSlots { export interface InputSwitchSlots {

View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="containerClass" @click="onClick($event)"> <div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input :id="inputId" ref="input" type="checkbox" role="switch" :checked="checked" :disabled="disabled" <input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled"
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps"> @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
</div> </div>
<span class="p-inputswitch-slider"></span> <span class="p-inputswitch-slider"></span>
@ -30,6 +30,8 @@ export default {
default: false default: false
}, },
inputId: null, inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null inputProps: null
}, },
data() { data() {

View File

@ -62,18 +62,6 @@ export default {
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>Specifies whether a inputswitch should be checked or not.</td> <td>Specifies whether a inputswitch should be checked or not.</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>
<tr> <tr>
<td>trueValue</td> <td>trueValue</td>
@ -86,6 +74,24 @@ export default {
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value in unchecked state.</td> <td>Value in unchecked state.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Style class of the component input field.</td>
</tr>
<tr>
<td>inputClass</td>
<td>string</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>
</tbody> </tbody>
</table> </table>