vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components added. Build issues fixed

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Download patch file Download diff file Expand all files Collapse all files

50
components/inputswitch/InputSwitch.vue
View file

@ -1,8 +1,22 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled" :aria-checked="checked" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
<input
ref="input"
:id="inputId"
type="checkbox"
role="switch"
:class="inputClass"
:style="inputStyle"
:checked="checked"
:disabled="disabled"
:aria-checked="checked"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="inputProps"
/>
</div>
<span class="p-inputswitch-slider"></span>
</div>
@ -29,13 +43,25 @@ export default {
type: Boolean,
default: false
},
inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null,
inputId: {
type: String,
default: null
},
inputClass: {
type: String,
default: null
},
inputStyle: {
type: null,
default: null
},
inputProps: {
type: null,
default: null
},
'aria-labelledby': {
type: String,
default: null
default: null
},
'aria-label': {
type: String,
@ -45,18 +71,20 @@ export default {
data() {
return {
focused: false
}
};
},
methods: {
onClick(event) {
if (!this.disabled) {
const newValue = this.checked ? this.falseValue : this.trueValue;
this.$emit('click', event);
this.$emit('update:modelValue', newValue);
this.$emit('change', event);
this.$emit('input', newValue);
this.$refs.input.focus();
}
event.preventDefault();
},
onFocus(event) {
@ -74,7 +102,7 @@ export default {
'p-inputswitch p-component',
{
'p-inputswitch-checked': this.checked,
'p-disabled': this.disabled,
'p-disabled': this.disabled,
'p-focus': this.focused
}
];
@ -83,7 +111,7 @@ export default {
return this.modelValue === this.trueValue;
}
}
}
};
</script>
<style>
@ -103,7 +131,7 @@ export default {
.p-inputswitch-slider:before {
position: absolute;
content: "";
content: '';
top: 50%;
}
</style>