mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3965 - For InputSwitch
This commit is contained in:
parent
51f2913c48
commit
5b6fd8ac8e
3 changed files with 119 additions and 80 deletions
104
components/lib/inputswitch/BaseInputSwitch.vue
Normal file
104
components/lib/inputswitch/BaseInputSwitch.vue
Normal file
|
@ -0,0 +1,104 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-inputswitch {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-inputswitch-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.p-inputswitch-slider:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: { position: 'relative' }
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-inputswitch p-component',
|
||||
{
|
||||
'p-inputswitch-checked': instance.checked,
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
hiddenInputWrapper: 'p-hidden-accessible',
|
||||
slider: 'p-inputswitch-slider'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseInputSwitch',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
modelValue: {
|
||||
type: null,
|
||||
default: false
|
||||
},
|
||||
trueValue: {
|
||||
type: null,
|
||||
default: true
|
||||
},
|
||||
falseValue: {
|
||||
type: null,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
inlineStyles
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue