Skip to content

Commit

Permalink
Theming | Add splitbutton & fixes #16017
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Jul 29, 2024
1 parent d2e9ea4 commit ffbac4a
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 89 deletions.
33 changes: 0 additions & 33 deletions src/app/components/splitbutton/splitbutton.css
View file

This file was deleted.

143 changes: 95 additions & 48 deletions src/app/components/splitbutton/splitbutton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import { ChevronDownIcon } from 'primeng/icons/chevrondown';
import { TieredMenu, TieredMenuModule } from 'primeng/tieredmenu';
import { UniqueComponentId } from 'primeng/utils';
import { AutoFocusModule } from 'primeng/autofocus';

import { ButtonProps, MenuButtonProps } from './splitbutton.interface';
import { BaseComponent } from 'primeng/basecomponent';
import { SplitButtonStyle } from './style/splitbuttonstyle';
import { BaseComponent } from 'primeng/basecomponent';
import { RippleModule } from 'primeng/ripple';

type SplitButtonIconPosition = 'left' | 'right';
/**
Expand All @@ -20,48 +22,63 @@ type SplitButtonIconPosition = 'left' | 'right';
template: `
<div #container [ngClass]="containerClass" [class]="styleClass" [ngStyle]="style">
<ng-container *ngIf="contentTemplate; else defaultButton">
<p-button
styleClass="p-splitbutton-button"
<button
class="p-splitbutton-button"
type="button"
pButton
pRipple
[severity]="severity"
[text]="text"
[outlined]="outlined"
[size]="size"
[icon]="icon"
[iconPos]="iconPos"
(onClick)="onDefaultButtonClick($event)"
(click)="onDefaultButtonClick($event)"
[disabled]="disabled"
[tabindex]="tabindex"
[attr.tabindex]="tabindex"
[ariaLabel]="buttonProps?.['ariaLabel'] || label"
pAutoFocus
[autofocus]="autofocus"
[pTooltip]="tooltip"
[tooltipOptions]="tooltipOptions"
>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</p-button>
</button>
</ng-container>
<ng-template #defaultButton>
<p-button
<button
#defaultbtn
styleClass="p-splitbutton-button"
class="p-splitbutton-button"
type="button"
pButton
pRipple
[severity]="severity"
[text]="text"
[outlined]="outlined"
[size]="size"
[icon]="icon"
[iconPos]="iconPos"
[label]="label"
(onClick)="onDefaultButtonClick($event)"
(click)="onDefaultButtonClick($event)"
[disabled]="buttonDisabled"
[tabindex]="tabindex"
[attr.tabindex]="tabindex"
[ariaLabel]="buttonProps?.['ariaLabel']"
pAutoFocus
[autofocus]="autofocus"
></p-button>
[pTooltip]="tooltip"
[tooltipOptions]="tooltipOptions"
></button>
</ng-template>
<p-button
<button
type="button"
pButton
pRipple
[size]="size"
[severity]="severity"
[text]="text"
[outlined]="outlined"
styleClass="p-splitbutton-button p-button-icon-only"
(onClick)="onDropdownButtonClick($event)"
class="p-splitbutton-dropdown p-button-icon-only"
(click)="onDropdownButtonClick($event)"
(keydown)="onDropdownButtonKeydown($event)"
[disabled]="menuButtonDisabled"
[ariaLabel]="menuButtonProps?.['ariaLabel'] || expandAriaLabel"
Expand All @@ -71,26 +88,25 @@ type SplitButtonIconPosition = 'left' | 'right';
>
<ChevronDownIcon *ngIf="!dropdownIconTemplate" />
<ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
</p-button>
</button>
<p-tieredMenu
[id]="ariaId"
#menu
[popup]="true"
[model]="model"
[style]="menuStyle"
styleClass="p-splitbutton-dropdown"
[styleClass]="menuStyleClass"
[appendTo]="appendTo"
[showTransitionOptions]="showTransitionOptions"
[hideTransitionOptions]="hideTransitionOptions"
(onHide)="onHide()"
(onShow)="onShow()"
></p-tieredMenu>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
class: 'p-element'
},
providers: [SplitButtonStyle]
providers: [SplitButtonStyle],
encapsulation: ViewEncapsulation.None
})
export class SplitButton extends BaseComponent {
/**
Expand Down Expand Up @@ -148,6 +164,16 @@ export class SplitButton extends BaseComponent {
* @group Props
*/
@Input() label: string | undefined;
/**
* Tooltip for the main button.
* @group Props
*/
@Input() tooltip: string | undefined;
/**
* Tooltip options for the main button.
* @group Props
*/
@Input() tooltipOptions: string | undefined;
/**
* Inline style of the element.
* @group Props
Expand All @@ -168,11 +194,7 @@ export class SplitButton extends BaseComponent {
* @group Props
*/
@Input() menuStyleClass: string | undefined;
/**
* When present, it specifies that the element should be disabled.
* @group Props
*/
@Input({ transform: numberAttribute }) tabindex: number | undefined;

/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @group Props
Expand Down Expand Up @@ -212,17 +234,9 @@ export class SplitButton extends BaseComponent {
*/
@Input({ transform: booleanAttribute }) autofocus: boolean | undefined;
/**
* Callback to invoke when default command button is clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
@Output() onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
/**
* Callback to invoke when dropdown button is clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
* When present, it specifies that the element should be disabled.
* @group Props
*/
private _disabled: boolean | undefined;
@Input({ transform: booleanAttribute }) set disabled(v: boolean | undefined) {
this._disabled = v;
this._buttonDisabled = v;
Expand All @@ -233,14 +247,13 @@ export class SplitButton extends BaseComponent {
}
/**
* Index of the element in tabbing order.
* @group Prop
* @group Props
*/

@Input({ transform: numberAttribute }) tabindex: number | undefined;
/**
* When present, it specifies that the menu button element should be disabled.
* @group Props
*/
private _menuButtonDisabled: boolean | undefined;
@Input('menuButtonDisabled') set menuButtonDisabled(v: boolean | undefined) {
if (this.disabled) {
this._menuButtonDisabled = this.disabled;
Expand All @@ -253,7 +266,6 @@ export class SplitButton extends BaseComponent {
* When present, it specifies that the button element should be disabled.
* @group Props
*/
private _buttonDisabled: boolean | undefined;
@Input() set buttonDisabled(v: boolean | undefined) {
if (this.disabled) {
this.buttonDisabled = this.disabled;
Expand All @@ -262,7 +274,27 @@ export class SplitButton extends BaseComponent {
public get buttonDisabled(): boolean {
return this._buttonDisabled;
}

/**
* Callback to invoke when default command button is clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
@Output() onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
/**
* Callback to invoke when overlay menu is hidden.
* @group Emits
*/
@Output() onMenuHide: EventEmitter<any> = new EventEmitter<any>();
/**
* Callback to invoke when overlay menu is shown.
* @group Emits
*/
@Output() onMenuShow: EventEmitter<any> = new EventEmitter<any>();
/**
* Callback to invoke when dropdown button is clicked.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
@Output() onDropdownClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

@ViewChild('container') containerViewChild: ElementRef | undefined;
Expand All @@ -281,6 +313,12 @@ export class SplitButton extends BaseComponent {

isExpanded = signal<boolean>(false);

private _disabled: boolean | undefined;

private _buttonDisabled: boolean | undefined;

private _menuButtonDisabled: boolean | undefined;

_componentStyle = inject(SplitButtonStyle);

ngOnInit() {
Expand Down Expand Up @@ -309,11 +347,11 @@ export class SplitButton extends BaseComponent {
get containerClass() {
const cls = {
'p-splitbutton p-component': true,
'p-button-raised': this.raised,
'p-button-rounded': this.rounded,
'p-button-outlined': this.outlined,
'p-button-text': this.text,
[`p-button-${this.size === 'small' ? 'sm' : 'lg'}`]: this.size
'p-splitbutton-raised': this.raised,
'p-splitbutton-rounded': this.rounded,
'p-splitbutton-outlined': this.outlined,
'p-splitbutton-text': this.text,
[`p-splitbutton-${this.size === 'small' ? 'sm' : 'lg'}`]: this.size
};

return { ...cls };
Expand All @@ -327,7 +365,6 @@ export class SplitButton extends BaseComponent {
onDropdownButtonClick(event?: MouseEvent) {
this.onDropdownClick.emit(event);
this.menu?.toggle({ currentTarget: this.containerViewChild?.nativeElement, relativeAlign: this.appendTo == null });
this.isExpanded.set(this.menu.visible);
}

onDropdownButtonKeydown(event: KeyboardEvent) {
Expand All @@ -336,10 +373,20 @@ export class SplitButton extends BaseComponent {
event.preventDefault();
}
}

onHide() {
this.isExpanded.set(false);
this.onMenuHide.emit();
}

onShow() {
this.isExpanded.set(true);
this.onMenuShow.emit();
}
}

@NgModule({
imports: [CommonModule, ButtonModule, TieredMenuModule, AutoFocusModule, ChevronDownIcon],
imports: [CommonModule, ButtonModule, TieredMenuModule, AutoFocusModule, ChevronDownIcon, RippleModule],
exports: [SplitButton, ButtonModule, TieredMenuModule],
declarations: [SplitButton]
})
Expand Down
16 changes: 8 additions & 8 deletions src/app/components/splitbutton/style/splitbuttonstyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ const theme = ({ dt }) => `
border-radius: ${dt('splitbutton.border.radius')};
}
.p-splitbutton-button {
.p-splitbutton-button.p-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
}
.p-splitbutton-button:focus-visible,
.p-splitbutton-dropdown:focus-visible {
.p-splitbutton-button.p-button:focus-visible,
.p-splitbutton-dropdown.p-button:focus-visible {
z-index: 1;
}
.p-splitbutton-button:not(:disabled):hover,
.p-splitbutton-button:not(:disabled):active {
.p-splitbutton-button.p-button:not(:disabled):hover,
.p-splitbutton-button.p-button:not(:disabled):active {
border-right: 0 none;
}
.p-splitbutton-dropdown {
.p-splitbutton-dropdown.p-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Expand All @@ -42,7 +42,7 @@ const theme = ({ dt }) => `
border-bottom-right-radius: ${dt('splitbutton.rounded.border.radius')};
}
.p-splitbutton-rounded .p-splitbutton-button {
.p-splitbutton-rounded > .p-splitbutton-button {
border-top-left-radius: ${dt('splitbutton.rounded.border.radius')};
border-bottom-left-radius: ${dt('splitbutton.rounded.border.radius')};
}
Expand All @@ -67,7 +67,7 @@ const classes = {

@Injectable()
export class SplitButtonStyle extends BaseStyle {
name = 'slpitbutton';
name = 'splitbutton';

theme = theme;

Expand Down

0 comments on commit ffbac4a

Please sign in to comment.