From 773bbcb211d3cf0caf38c25b44e666d98ddfafe5 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 15 Jul 2021 08:50:50 -0400 Subject: [PATCH] fix(overlays): overlay interfaces are now exported from framework packages and documented (#23619) resolves #22790 --- angular/src/index.ts | 42 ++++++++++++- core/src/components/action-sheet/readme.md | 33 ++++++++++ core/src/components/alert/readme.md | 70 ++++++++++++++++++++++ core/src/components/loading/readme.md | 22 +++++++ core/src/components/modal/readme.md | 24 ++++++++ core/src/components/picker/readme.md | 64 ++++++++++++++++++++ core/src/components/popover/readme.md | 23 +++++++ core/src/components/toast/readme.md | 37 ++++++++++++ packages/react/src/components/index.ts | 28 ++++++++- packages/vue/src/index.ts | 27 ++++++++- 10 files changed, 366 insertions(+), 4 deletions(-) diff --git a/angular/src/index.ts b/angular/src/index.ts index fa4cb21abe..a77a85614a 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -46,4 +46,44 @@ export { IonicModule } from './ionic-module'; export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core'; // CORE TYPES -export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, NavComponentWithProps } from '@ionic/core'; +export { + Animation, + AnimationBuilder, + AnimationCallbackOptions, + AnimationDirection, + AnimationFill, + AnimationKeyFrames, + AnimationLifecycle, + Gesture, + GestureConfig, + GestureDetail, + mdTransitionAnimation, + iosTransitionAnimation, + NavComponentWithProps, + + SpinnerTypes, + + ActionSheetOptions, + ActionSheetButton, + + AlertOptions, + AlertInput, + AlertTextareaAttributes, + AlertInputAttributes, + AlertButton, + + LoadingOptions, + + ModalOptions, + + PickerOptions, + PickerButton, + PickerColumn, + PickerColumnOption, + + PopoverOptions, + + ToastOptions, + ToastButton + +} from '@ionic/core'; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 775696c94a..d40f2d0ea2 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -34,6 +34,39 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t > 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. +## Interfaces + +### ActionSheetButton + +```typescript +interface ActionSheetButton { + text?: string; + role?: 'cancel' | 'destructive' | 'selected' | string; + icon?: string; + cssClass?: string | string[]; + handler?: () => boolean | void | Promise; +} +``` + +### ActionSheetOptions + +```typescript +interface ActionSheetOptions { + header?: string; + subHeader?: string; + cssClass?: string | string[]; + buttons: (ActionSheetButton | string)[]; + backdropDismiss?: boolean; + translucent?: boolean; + animated?: boolean; + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index d5904bbc15..ab4dbc9a79 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -41,6 +41,76 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t > 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. +## Interfaces + +### AlertButton + +```typescript +interface AlertButton { + text: string; + role?: string; + cssClass?: string | string[]; + handler?: (value: any) => boolean | void | {[key: string]: any}; +} +``` + + +### AlertInput + +```typescript +interface AlertInput { + type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; + name?: string; + placeholder?: string; + value?: any; + label?: string; + checked?: boolean; + disabled?: boolean; + id?: string; + handler?: (input: AlertInput) => void; + min?: string | number; + max?: string | number; + cssClass?: string | string[]; + attributes?: AlertInputAttributes | AlertTextareaAttributes; + tabindex?: number; +} +``` + +### AlertInputAttributes + +```typescript +interface AlertInputAttributes extends JSXBase.InputHTMLAttributes {} +``` + +### AlertOptions + +```typescript +interface AlertOptions { + header?: string; + subHeader?: string; + message?: string | IonicSafeString; + cssClass?: string | string[]; + inputs?: AlertInput[]; + buttons?: (AlertButton | string)[]; + backdropDismiss?: boolean; + translucent?: boolean; + animated?: boolean; + + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` + +### AlertTextareaAttributes +```typescript +interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes {} +``` + + diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 5a901ff680..b4487fc656 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -37,6 +37,28 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t > 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. +## Interfaces + +### LoadingOptions + +```typescript +interface LoadingOptions { + spinner?: SpinnerTypes | null; + message?: string | IonicSafeString; + cssClass?: string | string[]; + showBackdrop?: boolean; + duration?: number; + translucent?: boolean; + animated?: boolean; + backdropDismiss?: boolean; + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index e361e80af7..325493333c 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -42,6 +42,30 @@ ion-modal.stack-modal { } ``` +## Interfaces + +### ModalOptions + +```typescript +interface ModalOptions { + component: T; + componentProps?: ComponentProps; + presentingElement?: HTMLElement; + showBackdrop?: boolean; + backdropDismiss?: boolean; + cssClass?: string | string[]; + animated?: boolean; + swipeToClose?: boolean; + + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` + diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index bcae3a1a86..e1f001b448 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -2,7 +2,71 @@ 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. +## Interfaces +### PickerButton + +```typescript +interface PickerButton { + text?: string; + role?: string; + cssClass?: string | string[]; + handler?: (value: any) => boolean | void; +} +``` + +### PickerColumn + +```typescript +interface PickerColumn { + name: string; + align?: string; + selectedIndex?: number; + prevSelected?: number; + prefix?: string; + suffix?: string; + options: PickerColumnOption[]; + cssClass?: string | string[]; + columnWidth?: string; + prefixWidth?: string; + suffixWidth?: string; + optionsWidth?: string; + refresh?: () => void; +} +``` + +### PickerColumnOption + +```typescript +interface PickerColumnOption { + text?: string; + value?: any; + disabled?: boolean; + duration?: number; + transform?: string; + selected?: boolean; +} +``` + +### PickerOptions + +```typescript +interface PickerOptions { + columns: PickerColumn[]; + buttons?: PickerButton[]; + cssClass?: string | string[]; + showBackdrop?: boolean; + backdropDismiss?: boolean; + animated?: boolean; + + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 7017ee1555..279dc471d8 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -34,6 +34,29 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t > 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. +## Interfaces + +### PopoverOptions + +```typescript +interface PopoverOptions { + component: any; + componentProps?: { [key: string]: any }; + showBackdrop?: boolean; + backdropDismiss?: boolean; + translucent?: boolean; + cssClass?: string | string[]; + event?: Event; + animated?: boolean; + + mode?: 'ios' | 'md'; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index a345835716..ea6324d5b5 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -10,6 +10,43 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit 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. +## Interfaces + +### ToastButton + +```typescript +interface ToastButton { + text?: string; + icon?: string; + side?: 'start' | 'end'; + role?: 'cancel' | string; + cssClass?: string | string[]; + handler?: () => boolean | void | Promise; +} +``` + +### ToastOptions + +```typescript +interface ToastOptions { + header?: string; + message?: string | IonicSafeString; + cssClass?: string | string[]; + duration?: number; + buttons?: (ToastButton | string)[]; + position?: 'top' | 'bottom' | 'middle'; + translucent?: boolean; + animated?: boolean; + + color?: Color; + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 0395ab811a..808f80ac88 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -25,8 +25,6 @@ export { AnimationLifecycle, createAnimation, createGesture, - AlertButton, - AlertInput, Gesture, GestureConfig, GestureDetail, @@ -35,6 +33,32 @@ export { mdTransitionAnimation, NavComponentWithProps, setupConfig, + + SpinnerTypes, + + ActionSheetOptions, + ActionSheetButton, + + AlertOptions, + AlertInput, + AlertTextareaAttributes, + AlertInputAttributes, + AlertButton, + + LoadingOptions, + + ModalOptions, + + PickerOptions, + PickerButton, + PickerColumn, + PickerColumnOption, + + PopoverOptions, + + ToastOptions, + ToastButton + } from '@ionic/core'; export * from './proxies'; diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index f121e581ce..1dd6a55697 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -70,7 +70,32 @@ export { getTimeGivenProgression, // Hardware Back Button - BackButtonEvent + BackButtonEvent, + + SpinnerTypes, + + ActionSheetOptions, + ActionSheetButton, + + AlertOptions, + AlertInput, + AlertTextareaAttributes, + AlertInputAttributes, + AlertButton, + + LoadingOptions, + + ModalOptions, + + PickerOptions, + PickerButton, + PickerColumn, + PickerColumnOption, + + PopoverOptions, + + ToastOptions, + ToastButton } from '@ionic/core'; // Icons that are used by internal components