Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd3b787b

Browse files
committed
refactor: size and sizing prop, hostClasses cleanup
1 parenta8a0461 commitd3b787b

File tree

17 files changed

+79
-47
lines changed

17 files changed

+79
-47
lines changed

‎projects/coreui-angular/src/lib/alert/alert.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export class AlertComponent {
143143
readonlyhostClasses=computed(()=>{
144144
constcolor=this.color();
145145
constvariant=this.variant();
146+
146147
return{
147148
alert:true,
148149
'alert-dismissible':this.dismissible,

‎projects/coreui-angular/src/lib/avatar/avatar.component.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class AvatarComponent {
3434
* Size the component small, large, or extra large.
3535
*@default 'md'
3636
*/
37-
readonlysize:InputSignal<Omit<Sizes,'xxl'>>=input<Omit<Sizes,'xxl'>>('');
37+
readonlysize=input<Omit<Sizes,'xxl'>>('');
3838

3939
/**
4040
* The alt attribute for the img element alternate text.
@@ -69,11 +69,15 @@ export class AvatarComponent {
6969
});
7070

7171
readonlyhostClasses=computed(()=>{
72+
constsize=this.size();
73+
constcolor=this.color();
74+
constshape=this.shape();
75+
7276
return{
7377
avatar:true,
74-
[`avatar-${this.size()}`]:!!this.size(),
75-
[`bg-${this.color()}`]:!!this.color(),
76-
[`${this.shape()}`]:!!this.shape()
78+
[`avatar-${size}`]:!!size,
79+
[`bg-${color}`]:!!color,
80+
[`${shape}`]:!!shape
7781
}asRecord<string,boolean>;
7882
});
7983
}

‎projects/coreui-angular/src/lib/badge/badge.component.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class BadgeComponent {
3535
/**
3636
* Size the component small.
3737
*/
38-
readonlysize:InputSignal<'sm'|undefined>=input();
38+
readonlysize=input<'sm'>();
3939

4040
/**
4141
* Sets the text color of the component to one of CoreUI’s themed colors.
@@ -63,12 +63,16 @@ export class BadgeComponent {
6363
'start-0':position?.includes('start')
6464
};
6565

66+
constcolor=this.color();
67+
constsize=this.size();
68+
constshape=this.shape();
69+
6670
returnObject.assign(
6771
{
6872
badge:true,
69-
[`bg-${this.color()}`]:!!this.color(),
70-
[`badge-${this.size()}`]:!!this.size(),
71-
[`${this.shape()}`]:!!this.shape()
73+
[`bg-${color}`]:!!color,
74+
[`badge-${size}`]:!!size,
75+
[`${shape}`]:!!shape
7276
},
7377
!!position ?positionClasses :{}
7478
)asRecord<string,boolean>;
Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{booleanAttribute,Component,computed,input,InputSignal,InputSignalWithTransform}from'@angular/core';
1+
import{booleanAttribute,Component,computed,input,InputSignalWithTransform}from'@angular/core';
22

33
@Component({
44
selector:'c-button-group',
@@ -8,9 +8,9 @@ import { booleanAttribute, Component, computed, input, InputSignal, InputSignalW
88
exportclassButtonGroupComponent{
99
/**
1010
* Size the component small or large.
11-
*@type { 'sm' | 'lg'}
11+
*@return { 'sm' | 'lg'}
1212
*/
13-
readonlysize:InputSignal<'sm'|'lg'|undefined>=input();
13+
readonlysize=input<''|'sm'|'lg'|string>();
1414

1515
/**
1616
* Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
@@ -20,16 +20,18 @@ export class ButtonGroupComponent {
2020

2121
/**
2222
* Default role attr for ButtonGroup. [docs]
23-
*@type InputSignal<string>
23+
*@returnstring
2424
*@default 'group'
2525
*/
26-
readonlyrole:InputSignal<string>=input('group');
26+
readonlyrole=input<string>('group');
2727

2828
readonlyhostClasses=computed(()=>{
29+
constsize=this.size();
30+
constvertical=this.vertical();
2931
return{
30-
'btn-group':!this.vertical(),
31-
'btn-group-vertical':this.vertical(),
32-
[`btn-group-${this.size()}`]:!!this.size()
32+
'btn-group':!vertical,
33+
'btn-group-vertical':vertical,
34+
[`btn-group-${size}`]:!!size
3335
}asRecord<string,boolean>;
3436
});
3537
}

‎projects/coreui-angular/src/lib/button/button-close.directive.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@ export class ButtonCloseDirective extends ButtonDirective {
2424
readonlywhite:InputSignalWithTransform<boolean,unknown>=input(false,{transform:booleanAttribute});
2525

2626
overridereadonlyhostClasses=computed(()=>{
27+
constsize=this.size();
28+
2729
return{
2830
btn:true,
2931
'btn-close':true,
3032
'btn-close-white':this.white(),
31-
[`btn-${this.size()}`]:!!this.size(),
33+
[`btn-${size}`]:!!size,
3234
active:this.active(),
3335
disabled:this._disabled()
3436
}asRecord<string,boolean>;

‎projects/coreui-angular/src/lib/button/button.directive.ts‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,15 @@ export class ButtonDirective {
4747

4848
/**
4949
* Select the shape of the component.
50-
*@type InputSignal<Shapes>
50+
*@returnShapes
5151
*/
52-
readonlyshape:InputSignal<Shapes|undefined>=input<Shapes>();
52+
readonlyshape=input<Shapes>();
5353

5454
/**
5555
* Size the component small or large.
56-
*@type InputSignal<'sm' | 'lg' | ''>
56+
*@returnsm' | 'lg' | ''
5757
*/
58-
readonlysize:InputSignal<''|'sm'|'lg'>=input<''|'sm'|'lg'>('');
58+
readonlysize=input<''|'sm'|'lg'|string>('');
5959

6060
/**
6161
* The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
@@ -77,13 +77,18 @@ export class ButtonDirective {
7777
readonlyvariant:InputSignal<'ghost'|'outline'|undefined>=input<'ghost'|'outline'>();
7878

7979
readonlyhostClasses=computed(()=>{
80+
constcolor=this.color();
81+
constvariant=this.variant();
82+
constsize=this.size();
83+
constshape=this.shape();
84+
8085
return{
8186
btn:true,
82-
[`btn-${this.color()}`]:!!this.color()&&!this.variant(),
83-
[`btn-${this.variant()}`]:!!this.variant()&&!this.color(),
84-
[`btn-${this.variant()}-${this.color()}`]:!!this.variant()&&!!this.color(),
85-
[`btn-${this.size()}`]:!!this.size(),
86-
[`${this.shape()}`]:!!this.shape(),
87+
[`btn-${color}`]:!!color&&!variant,
88+
[`btn-${variant}`]:!!variant&&!color,
89+
[`btn-${variant}-${color}`]:!!variant&&!!color,
90+
[`btn-${size}`]:!!size,
91+
[`${shape}`]:!!shape,
8792
active:this.active(),
8893
disabled:this._disabled()
8994
}asRecord<string,boolean>;

‎projects/coreui-angular/src/lib/callout/callout.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export class CalloutComponent {
1616

1717
readonlyhostClasses=computed(()=>{
1818
constcolor=this.color();
19+
1920
return{
2021
callout:true,
2122
[`callout-${color}`]:!!color

‎projects/coreui-angular/src/lib/card/card.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export class CardComponent {
3535

3636
readonlyhostClasses=computed(()=>{
3737
constcolor=this.color();
38+
3839
return{
3940
card:true,
4041
[`bg-${color}`]:!!color

‎projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export class DropdownMenuDirective implements OnInit, AfterContentInit {
5858
readonlyhostClasses=computed(()=>{
5959
constalignment=this.alignment();
6060
constvisible=this.visible();
61+
6162
return{
6263
'dropdown-menu':true,
6364
[`dropdown-menu-${alignment}`]:!!alignment,

‎projects/coreui-angular/src/lib/footer/footer.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,16 @@ export class FooterComponent {
2020

2121
/**
2222
* Default role for footer. [docs]
23-
*@type string
23+
*@return string
2424
*@default 'contentinfo'
2525
*/
26-
readonlyrole:InputSignal<string>=input('contentinfo');
26+
readonlyrole=input<string>('contentinfo');
2727

2828
readonlyhostClasses=computed(()=>{
29+
constposition=this.position();
2930
return{
3031
footer:true,
31-
[`footer-${this.position()}`]:!!this.position()
32+
[`footer-${position}`]:!!position
3233
}asRecord<string,boolean>;
3334
});
3435
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp