Refactor #3965 - For ToggleButton
Tuğçe Küçükoğlu
parent
2d9be7a7d0
commit
eff31e4a5a
|
|
@ -0,0 +1,95 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = ``;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-button p-togglebutton p-component',
|
||||
{
|
||||
'p-focus': instance.focused,
|
||||
'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
|
||||
'p-disabled': props.disabled,
|
||||
'p-highlight': props.modelValue === true
|
||||
}
|
||||
],
|
||||
hiddenInputWrapper: 'p-hidden-accessible',
|
||||
icon: ({ instance, props }) => [
|
||||
props.modelValue ? props.onIcon : props.offIcon,
|
||||
'p-button-icon',
|
||||
{
|
||||
'p-button-icon-left': props.iconPos === 'left' && instance.label,
|
||||
'p-button-icon-right': props.iconPos === 'right' && instance.label
|
||||
}
|
||||
],
|
||||
label: 'p-button-label'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_togglebutton_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseToggleButton',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
modelValue: Boolean,
|
||||
onIcon: String,
|
||||
offIcon: String,
|
||||
onLabel: {
|
||||
type: String,
|
||||
default: 'Yes'
|
||||
},
|
||||
offLabel: {
|
||||
type: String,
|
||||
default: 'No'
|
||||
},
|
||||
iconPos: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
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
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -136,6 +136,11 @@ export interface ToggleButtonProps {
|
|||
* @type {ToggleButtonPassThroughOptions}
|
||||
*/
|
||||
pt?: ToggleButtonPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="container" v-ripple :class="buttonClass" @click="onClick($event)" v-bind="ptm('root')">
|
||||
<span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
|
||||
<div ref="container" v-ripple :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" :data-p-active="modelValue === true">
|
||||
<span :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input
|
||||
:id="inputId"
|
||||
type="checkbox"
|
||||
|
|
@ -16,70 +16,21 @@
|
|||
v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
|
||||
/>
|
||||
</span>
|
||||
<slot name="icon" :value="modelValue" :class="iconClass">
|
||||
<span v-if="onIcon || offIcon" :class="iconClass" v-bind="ptm('icon')" />
|
||||
<slot name="icon" :value="modelValue" :class="cx('icon')">
|
||||
<span v-if="onIcon || offIcon" :class="cx('icon')" v-bind="ptm('icon')" />
|
||||
</slot>
|
||||
<span class="p-button-label" v-bind="ptm('label')">{{ label }}</span>
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import BaseToggleButton from './BaseToggleButton.vue';
|
||||
|
||||
export default {
|
||||
name: 'ToggleButton',
|
||||
extends: BaseComponent,
|
||||
extends: BaseToggleButton,
|
||||
emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
|
||||
props: {
|
||||
modelValue: Boolean,
|
||||
onIcon: String,
|
||||
offIcon: String,
|
||||
onLabel: {
|
||||
type: String,
|
||||
default: 'Yes'
|
||||
},
|
||||
offLabel: {
|
||||
type: String,
|
||||
default: 'No'
|
||||
},
|
||||
iconPos: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
outsideClickListener: null,
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -128,27 +79,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
buttonClass() {
|
||||
return [
|
||||
'p-button p-togglebutton p-component',
|
||||
{
|
||||
'p-focus': this.focused,
|
||||
'p-button-icon-only': this.hasIcon && !this.hasLabel,
|
||||
'p-disabled': this.disabled,
|
||||
'p-highlight': this.modelValue === true
|
||||
}
|
||||
];
|
||||
},
|
||||
iconClass() {
|
||||
return [
|
||||
this.modelValue ? this.onIcon : this.offIcon,
|
||||
'p-button-icon',
|
||||
{
|
||||
'p-button-icon-left': this.iconPos === 'left' && this.label,
|
||||
'p-button-icon-right': this.iconPos === 'right' && this.label
|
||||
}
|
||||
];
|
||||
},
|
||||
hasLabel() {
|
||||
return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue