Skip to content

Commit 773bbcb

Browse files
liamdebeasiliamdebeasi
authoredJul 15, 2021
fix(overlays): overlay interfaces are now exported from framework packages and documented (#23619)
resolves #22790
·
v8.5.5v5.6.12
1 parent 3134e0a commit 773bbcb

File tree

10 files changed

+366
-4
lines changed

10 files changed

+366
-4
lines changed
 

‎angular/src/index.ts

+41-1
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,44 @@ export { IonicModule } from './ionic-module';
4646
export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core';
4747

4848
// CORE TYPES
49-
export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, NavComponentWithProps } from '@ionic/core';
49+
export {
50+
Animation,
51+
AnimationBuilder,
52+
AnimationCallbackOptions,
53+
AnimationDirection,
54+
AnimationFill,
55+
AnimationKeyFrames,
56+
AnimationLifecycle,
57+
Gesture,
58+
GestureConfig,
59+
GestureDetail,
60+
mdTransitionAnimation,
61+
iosTransitionAnimation,
62+
NavComponentWithProps,
63+
64+
SpinnerTypes,
65+
66+
ActionSheetOptions,
67+
ActionSheetButton,
68+
69+
AlertOptions,
70+
AlertInput,
71+
AlertTextareaAttributes,
72+
AlertInputAttributes,
73+
AlertButton,
74+
75+
LoadingOptions,
76+
77+
ModalOptions,
78+
79+
PickerOptions,
80+
PickerButton,
81+
PickerColumn,
82+
PickerColumnOption,
83+
84+
PopoverOptions,
85+
86+
ToastOptions,
87+
ToastButton
88+
89+
} from '@ionic/core';

‎core/src/components/action-sheet/readme.md

+33
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,39 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
3434

3535
> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
3636
37+
## Interfaces
38+
39+
### ActionSheetButton
40+
41+
```typescript
42+
interface ActionSheetButton {
43+
text?: string;
44+
role?: 'cancel' | 'destructive' | 'selected' | string;
45+
icon?: string;
46+
cssClass?: string | string[];
47+
handler?: () => boolean | void | Promise<boolean | void>;
48+
}
49+
```
50+
51+
### ActionSheetOptions
52+
53+
```typescript
54+
interface ActionSheetOptions {
55+
header?: string;
56+
subHeader?: string;
57+
cssClass?: string | string[];
58+
buttons: (ActionSheetButton | string)[];
59+
backdropDismiss?: boolean;
60+
translucent?: boolean;
61+
animated?: boolean;
62+
mode?: Mode;
63+
keyboardClose?: boolean;
64+
id?: string;
65+
66+
enterAnimation?: AnimationBuilder;
67+
leaveAnimation?: AnimationBuilder;
68+
}
69+
```
3770

3871
<!-- Auto Generated Below -->
3972

‎core/src/components/alert/readme.md

+70
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,76 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
4141

4242
> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
4343
44+
## Interfaces
45+
46+
### AlertButton
47+
48+
```typescript
49+
interface AlertButton {
50+
text: string;
51+
role?: string;
52+
cssClass?: string | string[];
53+
handler?: (value: any) => boolean | void | {[key: string]: any};
54+
}
55+
```
56+
57+
58+
### AlertInput
59+
60+
```typescript
61+
interface AlertInput {
62+
type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
63+
name?: string;
64+
placeholder?: string;
65+
value?: any;
66+
label?: string;
67+
checked?: boolean;
68+
disabled?: boolean;
69+
id?: string;
70+
handler?: (input: AlertInput) => void;
71+
min?: string | number;
72+
max?: string | number;
73+
cssClass?: string | string[];
74+
attributes?: AlertInputAttributes | AlertTextareaAttributes;
75+
tabindex?: number;
76+
}
77+
```
78+
79+
### AlertInputAttributes
80+
81+
```typescript
82+
interface AlertInputAttributes extends JSXBase.InputHTMLAttributes<HTMLInputElement> {}
83+
```
84+
85+
### AlertOptions
86+
87+
```typescript
88+
interface AlertOptions {
89+
header?: string;
90+
subHeader?: string;
91+
message?: string | IonicSafeString;
92+
cssClass?: string | string[];
93+
inputs?: AlertInput[];
94+
buttons?: (AlertButton | string)[];
95+
backdropDismiss?: boolean;
96+
translucent?: boolean;
97+
animated?: boolean;
98+
99+
mode?: Mode;
100+
keyboardClose?: boolean;
101+
id?: string;
102+
103+
enterAnimation?: AnimationBuilder;
104+
leaveAnimation?: AnimationBuilder;
105+
}
106+
```
107+
108+
### AlertTextareaAttributes
109+
```typescript
110+
interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> {}
111+
```
112+
113+
44114

45115
<!-- Auto Generated Below -->
46116

‎core/src/components/loading/readme.md

+22
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,28 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
3737

3838
> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
3939
40+
## Interfaces
41+
42+
### LoadingOptions
43+
44+
```typescript
45+
interface LoadingOptions {
46+
spinner?: SpinnerTypes | null;
47+
message?: string | IonicSafeString;
48+
cssClass?: string | string[];
49+
showBackdrop?: boolean;
50+
duration?: number;
51+
translucent?: boolean;
52+
animated?: boolean;
53+
backdropDismiss?: boolean;
54+
mode?: Mode;
55+
keyboardClose?: boolean;
56+
id?: string;
57+
58+
enterAnimation?: AnimationBuilder;
59+
leaveAnimation?: AnimationBuilder;
60+
}
61+
```
4062

4163
<!-- Auto Generated Below -->
4264

‎core/src/components/modal/readme.md

+24
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,30 @@ ion-modal.stack-modal {
4242
}
4343
```
4444

45+
## Interfaces
46+
47+
### ModalOptions
48+
49+
```typescript
50+
interface ModalOptions<T extends ComponentRef = ComponentRef> {
51+
component: T;
52+
componentProps?: ComponentProps<T>;
53+
presentingElement?: HTMLElement;
54+
showBackdrop?: boolean;
55+
backdropDismiss?: boolean;
56+
cssClass?: string | string[];
57+
animated?: boolean;
58+
swipeToClose?: boolean;
59+
60+
mode?: Mode;
61+
keyboardClose?: boolean;
62+
id?: string;
63+
64+
enterAnimation?: AnimationBuilder;
65+
leaveAnimation?: AnimationBuilder;
66+
}
67+
```
68+
4569

4670
<!-- Auto Generated Below -->
4771

‎core/src/components/picker/readme.md

+64
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,71 @@
22

33
A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
44

5+
## Interfaces
56

7+
### PickerButton
8+
9+
```typescript
10+
interface PickerButton {
11+
text?: string;
12+
role?: string;
13+
cssClass?: string | string[];
14+
handler?: (value: any) => boolean | void;
15+
}
16+
```
17+
18+
### PickerColumn
19+
20+
```typescript
21+
interface PickerColumn {
22+
name: string;
23+
align?: string;
24+
selectedIndex?: number;
25+
prevSelected?: number;
26+
prefix?: string;
27+
suffix?: string;
28+
options: PickerColumnOption[];
29+
cssClass?: string | string[];
30+
columnWidth?: string;
31+
prefixWidth?: string;
32+
suffixWidth?: string;
33+
optionsWidth?: string;
34+
refresh?: () => void;
35+
}
36+
```
37+
38+
### PickerColumnOption
39+
40+
```typescript
41+
interface PickerColumnOption {
42+
text?: string;
43+
value?: any;
44+
disabled?: boolean;
45+
duration?: number;
46+
transform?: string;
47+
selected?: boolean;
48+
}
49+
```
50+
51+
### PickerOptions
52+
53+
```typescript
54+
interface PickerOptions {
55+
columns: PickerColumn[];
56+
buttons?: PickerButton[];
57+
cssClass?: string | string[];
58+
showBackdrop?: boolean;
59+
backdropDismiss?: boolean;
60+
animated?: boolean;
61+
62+
mode?: Mode;
63+
keyboardClose?: boolean;
64+
id?: string;
65+
66+
enterAnimation?: AnimationBuilder;
67+
leaveAnimation?: AnimationBuilder;
68+
}
69+
```
670

771
<!-- Auto Generated Below -->
872

‎core/src/components/popover/readme.md

+23
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,29 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
3434

3535
> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
3636
37+
## Interfaces
38+
39+
### PopoverOptions
40+
41+
```typescript
42+
interface PopoverOptions {
43+
component: any;
44+
componentProps?: { [key: string]: any };
45+
showBackdrop?: boolean;
46+
backdropDismiss?: boolean;
47+
translucent?: boolean;
48+
cssClass?: string | string[];
49+
event?: Event;
50+
animated?: boolean;
51+
52+
mode?: 'ios' | 'md';
53+
keyboardClose?: boolean;
54+
id?: string;
55+
56+
enterAnimation?: AnimationBuilder;
57+
leaveAnimation?: AnimationBuilder;
58+
}
59+
```
3760

3861
<!-- Auto Generated Below -->
3962

‎core/src/components/toast/readme.md

+37
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,43 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
1010

1111
The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If a button with a role of `"cancel"` is added, then that button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
1212

13+
## Interfaces
14+
15+
### ToastButton
16+
17+
```typescript
18+
interface ToastButton {
19+
text?: string;
20+
icon?: string;
21+
side?: 'start' | 'end';
22+
role?: 'cancel' | string;
23+
cssClass?: string | string[];
24+
handler?: () => boolean | void | Promise<boolean | void>;
25+
}
26+
```
27+
28+
### ToastOptions
29+
30+
```typescript
31+
interface ToastOptions {
32+
header?: string;
33+
message?: string | IonicSafeString;
34+
cssClass?: string | string[];
35+
duration?: number;
36+
buttons?: (ToastButton | string)[];
37+
position?: 'top' | 'bottom' | 'middle';
38+
translucent?: boolean;
39+
animated?: boolean;
40+
41+
color?: Color;
42+
mode?: Mode;
43+
keyboardClose?: boolean;
44+
id?: string;
45+
46+
enterAnimation?: AnimationBuilder;
47+
leaveAnimation?: AnimationBuilder;
48+
}
49+
```
1350

1451
<!-- Auto Generated Below -->
1552

‎packages/react/src/components/index.ts

+26-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ export {
2525
AnimationLifecycle,
2626
createAnimation,
2727
createGesture,
28-
AlertButton,
29-
AlertInput,
3028
Gesture,
3129
GestureConfig,
3230
GestureDetail,
@@ -35,6 +33,32 @@ export {
3533
mdTransitionAnimation,
3634
NavComponentWithProps,
3735
setupConfig,
36+
37+
SpinnerTypes,
38+
39+
ActionSheetOptions,
40+
ActionSheetButton,
41+
42+
AlertOptions,
43+
AlertInput,
44+
AlertTextareaAttributes,
45+
AlertInputAttributes,
46+
AlertButton,
47+
48+
LoadingOptions,
49+
50+
ModalOptions,
51+
52+
PickerOptions,
53+
PickerButton,
54+
PickerColumn,
55+
PickerColumnOption,
56+
57+
PopoverOptions,
58+
59+
ToastOptions,
60+
ToastButton
61+
3862
} from '@ionic/core';
3963
export * from './proxies';
4064

‎packages/vue/src/index.ts

+26-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,32 @@ export {
7070
getTimeGivenProgression,
7171

7272
// Hardware Back Button
73-
BackButtonEvent
73+
BackButtonEvent,
74+
75+
SpinnerTypes,
76+
77+
ActionSheetOptions,
78+
ActionSheetButton,
79+
80+
AlertOptions,
81+
AlertInput,
82+
AlertTextareaAttributes,
83+
AlertInputAttributes,
84+
AlertButton,
85+
86+
LoadingOptions,
87+
88+
ModalOptions,
89+
90+
PickerOptions,
91+
PickerButton,
92+
PickerColumn,
93+
PickerColumnOption,
94+
95+
PopoverOptions,
96+
97+
ToastOptions,
98+
ToastButton
7499
} from '@ionic/core';
75100

76101
// Icons that are used by internal components

0 commit comments

Comments
 (0)
Please sign in to comment.