javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): simplify overlay attribute types (#25074)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-07 14:11:30 -04:00
committed by GitHub
parent 1c26e9b9b0
commit 9fbaaf95eb
20 changed files with 221 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/directives/proxies.ts
View File

@ -1775,7 +1775,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
/**
* Expression to be called when the split-pane visibility has changed
*/
ionSplitPaneVisible: EventEmitter<CustomEvent<{visible: boolean}>>;
ionSplitPaneVisible: EventEmitter<CustomEvent<{ visible: boolean }>>;
}

16
core/api.txt
View File

@ -27,7 +27,7 @@ ion-action-sheet,prop,buttons,(string | ActionSheetButton<any>)[],[],false,false
ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-action-sheet,prop,header,string | undefined,undefined,false,false
ion-action-sheet,prop,htmlAttributes,ActionSheetAttributes | undefined,undefined,false,false
ion-action-sheet,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-action-sheet,prop,keyboardClose,boolean,true,false,false
ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
@ -72,7 +72,7 @@ ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,header,string | undefined,undefined,false,false
ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false
ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-alert,prop,inputs,AlertInput[],[],false,false
ion-alert,prop,keyboardClose,boolean,true,false,false
ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@ -681,7 +681,7 @@ ion-loading,prop,backdropDismiss,boolean,false,false,false
ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-loading,prop,duration,number,0,false,false
ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,htmlAttributes,LoadingAttributes | undefined,undefined,false,false
ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-loading,prop,keyboardClose,boolean,true,false,false
ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
@ -769,7 +769,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-modal,prop,handle,boolean | undefined,undefined,false,false
ion-modal,prop,htmlAttributes,ModalAttributes | undefined,undefined,false,false
ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false
ion-modal,prop,isOpen,boolean,false,false,false
ion-modal,prop,keyboardClose,boolean,true,false,false
@ -848,7 +848,7 @@ ion-picker,prop,columns,PickerColumn[],[],false,false
ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-picker,prop,duration,number,0,false,false
ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-picker,prop,htmlAttributes,PickerAttributes | undefined,undefined,false,false
ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-picker,prop,keyboardClose,boolean,true,false,false
ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-picker,prop,mode,"ios" | "md",undefined,false,false
@ -886,7 +886,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
ion-popover,prop,dismissOnSelect,boolean,false,false,false
ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-popover,prop,event,any,undefined,false,false
ion-popover,prop,htmlAttributes,PopoverAttributes | undefined,undefined,false,false
ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-popover,prop,isOpen,boolean,false,false,false
ion-popover,prop,keyboardClose,boolean,true,false,false
ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@ -1122,7 +1122,7 @@ ion-segment-button,prop,disabled,boolean,false,false,false
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false
ion-segment-button,css-prop,--background
ion-segment-button,css-prop,--background-checked
ion-segment-button,css-prop,--background-focused
@ -1361,7 +1361,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-toast,prop,duration,number,0,false,false
ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-toast,prop,header,string | undefined,undefined,false,false
ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false
ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-toast,prop,icon,string | undefined,undefined,false,false
ion-toast,prop,keyboardClose,boolean,false,false,false
ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false

7
core/src/components/action-sheet/action-sheet-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, Mode } from '../../interface';
export interface ActionSheetOptions {
@ -19,7 +17,10 @@ export interface ActionSheetOptions {
leaveAnimation?: AnimationBuilder;
}
export type ActionSheetAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type ActionSheetAttributes = { [key: string]: any };
export interface ActionSheetButton<T = any> {
text?: string;

10
core/src/components/action-sheet/readme.md
View File

@ -65,19 +65,13 @@ interface ActionSheetOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: ActionSheetAttributes;
htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
### ActionSheetAttributes
```typescript
interface ActionSheetAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
<!-- Auto Generated Below -->
@ -569,7 +563,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `ActionSheetAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |

18
core/src/components/alert/alert-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
@ -23,7 +21,10 @@ export interface AlertOptions {
leaveAnimation?: AnimationBuilder;
}
export type AlertAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type AlertAttributes = { [key: string]: any };
export interface AlertInput {
type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
@ -42,8 +43,15 @@ export interface AlertInput {
tabindex?: number;
}
export type AlertTextareaAttributes = JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>;
export type AlertInputAttributes = JSXBase.InputHTMLAttributes<HTMLInputElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type AlertTextareaAttributes = { [key: string]: any };
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type AlertInputAttributes = { [key: string]: any };
export interface AlertButton {
text: string;

22
core/src/components/alert/readme.md
View File

@ -71,16 +71,11 @@ interface AlertInput {
min?: string | number;
max?: string | number;
cssClass?: string | string[];
attributes?: AlertInputAttributes | AlertTextareaAttributes;
attributes?: { [key: string]: any };
tabindex?: number;
}
```
### AlertInputAttributes
```typescript
interface AlertInputAttributes extends JSXBase.InputHTMLAttributes<HTMLInputElement> {}
```
### AlertOptions
@ -95,7 +90,7 @@ interface AlertOptions {
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
htmlAttributes?: AlertAttributes;
htmlAttributes?: { [key: string]: any };
mode?: Mode;
keyboardClose?: boolean;
@ -106,17 +101,6 @@ interface AlertOptions {
}
```
### AlertAttributes
```typescript
interface AlertAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
### AlertTextareaAttributes
```typescript
interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> {}
```
<!-- Auto Generated Below -->
@ -1784,7 +1768,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `undefined \| { [key: string]: any; }` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |

4
core/src/components/item-sliding/readme.md
View File

@ -873,7 +873,7 @@ export default defineComponent({
### `close() => Promise<void>`
Close the sliding item. Items can also be closed from the [List](../list).
Close the sliding item. Items can also be closed from the [List](./list).
#### Returns
@ -883,7 +883,7 @@ Type: `Promise<void>`
### `closeOpened() => Promise<boolean>`
Close all of the sliding items in the list. Items can also be closed from the [List](../list).
Close all of the sliding items in the list. Items can also be closed from the [List](./list).
#### Returns

7
core/src/components/loading/loading-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
@ -21,4 +19,7 @@ export interface LoadingOptions {
leaveAnimation?: AnimationBuilder;
}
export type LoadingAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type LoadingAttributes = { [key: string]: any };

9
core/src/components/loading/readme.md
View File

@ -54,18 +54,13 @@ interface LoadingOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: LoadingAttributes;
htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
### LoadingAttributes
```typescript
interface LoadingAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
<!-- Auto Generated Below -->
@ -380,7 +375,7 @@ export default defineComponent({
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `LoadingAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` |

7
core/src/components/modal/modal-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
export interface ModalOptions<T extends ComponentRef = ComponentRef> {
@ -33,4 +31,7 @@ export interface ModalAnimationOptions {
backdropBreakpoint?: number;
}
export type ModalAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type ModalAttributes = { [key: string]: any };

9
core/src/components/modal/readme.md
View File

@ -122,7 +122,7 @@ interface ModalOptions<T extends ComponentRef = ComponentRef> {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: ModalAttributes;
htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
@ -134,11 +134,6 @@ interface ModalOptions<T extends ComponentRef = ComponentRef> {
}
```
### ModalAttributes
```typescript
interface ModalAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
## Accessibility
@ -1383,7 +1378,7 @@ export default {
| `breakpoints` | -- | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1] | `number[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `handle` | `handle` | The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties. | `boolean \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `ModalAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `undefined \| { [key: string]: any; }` | `undefined` |
| `initialBreakpoint` | `initial-breakpoint` | A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. | `number \| undefined` | `undefined` |
| `isOpen` | `is-open` | If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code. | `boolean` | `false` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |

7
core/src/components/picker/picker-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, Mode } from '../../interface';
export interface PickerOptions {
@ -19,7 +17,10 @@ export interface PickerOptions {
leaveAnimation?: AnimationBuilder;
}
export type PickerAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type PickerAttributes = { [key: string]: any };
export interface PickerButton {
text?: string;

9
core/src/components/picker/readme.md
View File

@ -62,18 +62,13 @@ interface PickerOptions {
mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: PickerAttributes;
htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
```
### PickerAttributes
```typescript
interface PickerAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
<!-- Auto Generated Below -->
@ -235,7 +230,7 @@ export default {
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `PickerAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `undefined \| { [key: string]: any; }` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |

265
core/src/components/picker/test/basic/index.html
View File

@ -1,133 +1,142 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Picker - Basic</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<script type="module">
import { pickerController } from '../../../../dist/ionic/index.esm.js';
window.pickerController = pickerController;
</script>
<body>
<ion-app>
<ion-content class="ion-padding">
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
</ion-content>
</ion-app>
<style>
.my-custom-class {
--width: 200px;
--height: 50%;
--background: #272727;
--background-rgb: 39, 39, 39;
--border-width: 2px;
--border-color: #000000;
--border-radius: 16px 16px 0 0;
color: #d6d6d6;
}
</style>
<script>
selectedIndex = 0;
const options = [{
text: '1',
value: '01'
},
{
text: '2',
value: '02'
},
{
text: '3',
value: '03'
},
{
text: '4',
value: '04'
},
{
text: '5',
value: '05'
},
{
text: '6',
value: '06'
},
{
text: '7',
value: '07'
},
{
text: '8',
value: '08'
},
{
text: '9',
value: '09'
},
{
text: '10',
value: '10'
},
{
text: '11',
value: '11'
},
{
text: '12',
value: '12'
}];
async function presentPicker(customClass) {
const pickerElement = await pickerController.create({
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: () => console.log('Clicked Cancel!')
}, {
text: 'Save',
cssClass: 'save-btn',
handler: (ev) => {
const v = ev.hours.value;
selectedIndex = options.findIndex(opt => opt.value === v);
}
}, {
text: 'Log',
handler: (val) => {
return false;
}
}],
columns: [{
name: 'hours',
selectedIndex: selectedIndex,
prefix: 'total',
suffix: 'hours',
options: [...options]
}],
htmlAttributes: {
'data-testid': 'basic-picker'
},
cssClass: customClass
});
await pickerElement.present();
}
<head>
<meta charset="UTF-8" />
<title>Picker - Basic</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<script type="module">
import { pickerController } from '../../../../dist/ionic/index.esm.js';
window.pickerController = pickerController;
</script>
</body>
<body>
<ion-app>
<ion-content class="ion-padding">
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')"
>Show Custom Picker</ion-button
>
</ion-content>
</ion-app>
<style>
.my-custom-class {
--width: 200px;
--height: 50%;
--background: #272727;
--background-rgb: 39, 39, 39;
--border-width: 2px;
--border-color: #000000;
--border-radius: 16px 16px 0 0;
color: #d6d6d6;
}
</style>
<script>
selectedIndex = 0;
const options = [
{
text: '1',
value: '01',
},
{
text: '2',
value: '02',
},
{
text: '3',
value: '03',
},
{
text: '4',
value: '04',
},
{
text: '5',
value: '05',
},
{
text: '6',
value: '06',
},
{
text: '7',
value: '07',
},
{
text: '8',
value: '08',
},
{
text: '9',
value: '09',
},
{
text: '10',
value: '10',
},
{
text: '11',
value: '11',
},
{
text: '12',
value: '12',
},
];
async function presentPicker(customClass) {
const pickerElement = await pickerController.create({
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => console.log('Clicked Cancel!'),
},
{
text: 'Save',
cssClass: 'save-btn',
handler: (ev) => {
const v = ev.hours.value;
selectedIndex = options.findIndex((opt) => opt.value === v);
},
},
{
text: 'Log',
handler: (val) => {
return false;
},
},
],
columns: [
{
name: 'hours',
selectedIndex: selectedIndex,
prefix: 'total',
suffix: 'hours',
options: [...options],
},
],
htmlAttributes: {
'data-testid': 'basic-picker',
},
cssClass: customClass,
});
await pickerElement.present();
}
</script>
</body>
</html>

7
core/src/components/popover/popover-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type {
AnimationBuilder,
ComponentProps,
@ -43,7 +41,10 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
triggerAction?: string;
}
export type PopoverAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type PopoverAttributes = { [key: string]: any };
export type PopoverSize = 'cover' | 'auto';

9
core/src/components/popover/readme.md
View File

@ -98,7 +98,7 @@ interface PopoverOptions {
mode?: 'ios' | 'md';
keyboardClose?: boolean;
id?: string;
htmlAttributes?: PopoverAttributes;
htmlAttributes?: { [key: string]: any };
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
@ -112,11 +112,6 @@ interface PopoverOptions {
}
```
### PopoverAttributes
```typescript
interface PopoverAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
## Types
@ -962,7 +957,7 @@ export default {
| `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `HTMLAttributes<HTMLElement> \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `undefined \| { [key: string]: any; }` | `undefined` |
| `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |

14
core/src/components/segment-button/readme.md
View File

@ -798,13 +798,13 @@ export default defineComponent({
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------- |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + ids++` |
## Shadow Parts

28
core/src/components/select/readme.md
View File

@ -1367,20 +1367,20 @@ export default defineComponent({
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------- |
| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` |
| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` |
| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` |
| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](../alert), the [ion-action-sheet docs](../action-sheet) and the [ion-popover docs](../popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` |
| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` |
| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` |
| `value` | `value` | the value of the select. | `any` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------- |
| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` |
| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` |
| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` |
| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` |
| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` |
| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` |
| `value` | `value` | the value of the select. | `any` | `undefined` |
## Events

9
core/src/components/toast/readme.md
View File

@ -42,7 +42,7 @@ interface ToastOptions {
translucent?: boolean;
animated?: boolean;
icon?: string;
htmlAttributes?: ToastAttributes;
htmlAttributes?: { [key: string]: any };
color?: Color;
mode?: Mode;
@ -54,11 +54,6 @@ interface ToastOptions {
}
```
### ToastAttributes
```typescript
interface ToastAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
```
## Accessibility
### Focus Management
@ -447,7 +442,7 @@ export default defineComponent({
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `undefined \| { [key: string]: any; }` | `undefined` |
| `icon` | `icon` | The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |

7
core/src/components/toast/toast-interface.ts
View File

@ -1,5 +1,3 @@
import type { JSXBase } from '@stencil/core/internal';
import type { AnimationBuilder, Color, Mode } from '../../interface';
import type { IonicSafeString } from '../../utils/sanitization';
@ -24,7 +22,10 @@ export interface ToastOptions {
leaveAnimation?: AnimationBuilder;
}
export type ToastAttributes = JSXBase.HTMLAttributes<HTMLElement>;
/**
* @deprecated - Use { [key: string]: any } directly instead.
*/
export type ToastAttributes = { [key: string]: any };
export interface ToastButton {
text?: string;