From ffbac4ad7f5c4e65347293aa8d2362d86f3355d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 29 Jul 2024 15:23:11 +0300 Subject: [PATCH] Theming | Add splitbutton & fixes #16017 --- .../components/splitbutton/splitbutton.css | 33 ---- src/app/components/splitbutton/splitbutton.ts | 143 ++++++++++++------ .../splitbutton/style/splitbuttonstyle.ts | 16 +- 3 files changed, 103 insertions(+), 89 deletions(-) delete mode 100755 src/app/components/splitbutton/splitbutton.css diff --git a/src/app/components/splitbutton/splitbutton.css b/src/app/components/splitbutton/splitbutton.css deleted file mode 100755 index b95f56ee19b..00000000000 --- a/src/app/components/splitbutton/splitbutton.css +++ /dev/null @@ -1,33 +0,0 @@ -@layer primeng { - .p-splitbutton { - display: inline-flex; - position: relative; - } - - .p-splitbutton .p-splitbutton-defaultbutton, - .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, - .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button { - flex: 1 1 auto; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0 none; - } - - .p-splitbutton-menubutton, - .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, - .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { - display: flex; - align-items: center; - justify-content: center; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .p-splitbutton .p-menu { - min-width: 100%; - } - - .p-fluid .p-splitbutton { - display: flex; - } -} diff --git a/src/app/components/splitbutton/splitbutton.ts b/src/app/components/splitbutton/splitbutton.ts index aa3591dceb4..efb4d689270 100755 --- a/src/app/components/splitbutton/splitbutton.ts +++ b/src/app/components/splitbutton/splitbutton.ts @@ -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'; /** @@ -20,27 +22,36 @@ type SplitButtonIconPosition = 'left' | 'right'; template: `
- - + - + [pTooltip]="tooltip" + [tooltipOptions]="tooltipOptions" + > - - +
`, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, - host: { - class: 'p-element' - }, - providers: [SplitButtonStyle] + providers: [SplitButtonStyle], + encapsulation: ViewEncapsulation.None }) export class SplitButton extends BaseComponent { /** @@ -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 @@ -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 @@ -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 = new EventEmitter(); - /** - * 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; @@ -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; @@ -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; @@ -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 = new EventEmitter(); + /** + * Callback to invoke when overlay menu is hidden. + * @group Emits + */ + @Output() onMenuHide: EventEmitter = new EventEmitter(); + /** + * Callback to invoke when overlay menu is shown. + * @group Emits + */ + @Output() onMenuShow: EventEmitter = new EventEmitter(); + /** + * Callback to invoke when dropdown button is clicked. + * @param {MouseEvent} event - Mouse event. + * @group Emits + */ @Output() onDropdownClick: EventEmitter = new EventEmitter(); @ViewChild('container') containerViewChild: ElementRef | undefined; @@ -281,6 +313,12 @@ export class SplitButton extends BaseComponent { isExpanded = signal(false); + private _disabled: boolean | undefined; + + private _buttonDisabled: boolean | undefined; + + private _menuButtonDisabled: boolean | undefined; + _componentStyle = inject(SplitButtonStyle); ngOnInit() { @@ -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 }; @@ -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) { @@ -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] }) diff --git a/src/app/components/splitbutton/style/splitbuttonstyle.ts b/src/app/components/splitbutton/style/splitbuttonstyle.ts index e861154deef..6ebfb2beb9c 100644 --- a/src/app/components/splitbutton/style/splitbuttonstyle.ts +++ b/src/app/components/splitbutton/style/splitbuttonstyle.ts @@ -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; } @@ -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')}; } @@ -67,7 +67,7 @@ const classes = { @Injectable() export class SplitButtonStyle extends BaseStyle { - name = 'slpitbutton'; + name = 'splitbutton'; theme = theme;