vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #5071

pull/5098/head
mertsincan 2024-01-14 15:21:43 +00:00
parent 7107b529aa
commit 631fd839ca
3 changed files with 20 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/togglebutton/ToggleButton.d.ts vendored
View File

@ -61,6 +61,10 @@ export interface ToggleButtonPassThroughOptions {
* Used to pass attributes to the input's DOM element. * Used to pass attributes to the input's DOM element.
*/ */
input?: ToggleButtonPassThroughOptionType; input?: ToggleButtonPassThroughOptionType;
/**
* Used to pass attributes to the box's DOM element.
*/
box?: ToggleButtonPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the icon's DOM element.
*/ */

12
components/lib/togglebutton/ToggleButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-ripple :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled"> <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
<input <input
:id="inputId" :id="inputId"
type="checkbox" type="checkbox"
@ -18,10 +18,12 @@
@change="onChange" @change="onChange"
v-bind="getPTOptions('input')" v-bind="getPTOptions('input')"
/> />
<slot name="icon" :value="modelValue" :class="cx('icon')"> <div v-ripple :class="cx('box')" v-bind="getPTOptions('box')">
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" /> <slot name="icon" :value="modelValue" :class="cx('icon')">
</slot> <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span> </slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
</div>
</div> </div>
</template> </template>

30
components/lib/togglebutton/style/ToggleButtonStyle.js
View File

@ -3,49 +3,37 @@ import BaseStyle from 'primevue/base/style';
const css = ` const css = `
@layer primevue { @layer primevue {
.p-togglebutton { .p-togglebutton {
position: relative;
display: inline-flex; display: inline-flex;
user-select: none; user-select: none;
align-items: center;
vertical-align: bottom; vertical-align: bottom;
text-align: center;
overflow: hidden;
position: relative;
} }
.p-togglebutton-input { .p-togglebutton-input {
cursor: pointer; cursor: pointer;
} }
.p-button-label { .p-togglebutton .p-button {
flex: 1 1 auto; flex: 1 1 auto;
} }
.p-button-icon-right {
order: 1;
}
.p-button-icon-only {
justify-content: center;
}
.p-button-icon-only .p-button-label {
visibility: hidden;
width: 0;
flex: 0 0 auto;
}
} }
`; `;
const classes = { const classes = {
root: ({ instance, props }) => [ root: ({ instance, props }) => [
'p-togglebutton p-button p-component', 'p-togglebutton p-component',
{ {
'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-highlight': instance.active 'p-highlight': instance.active
} }
], ],
input: 'p-togglebutton-input', input: 'p-togglebutton-input',
box: ({ instance }) => [
'p-button p-component',
{
'p-button-icon-only': instance.hasIcon && !instance.hasLabel
}
],
icon: ({ instance, props }) => [ icon: ({ instance, props }) => [
'p-button-icon', 'p-button-icon',
{ {