From 5eb942f6803483d109af339edd9d2a2d7bbc41ae Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 8 May 2019 13:10:56 -0400 Subject: [PATCH] merge release-4.4.0 * docs(process): update release process * docs(fab-list): update the activated description (#18026) * docs(breaking): add ionDrag event arguments change (#17989) * docs(slides): add swiper prefix in animation usage (#18073) * feat(searchbar): add disabled property (#17935) closes #17921 * fix(reorder-group): remove required parameter for the complete method (#18084) also updates documentation surrounding the reorder & infinite scroll fixes #16302 * docs(components): update method and parameter descriptions (#18075) * fix(datetime): default to current date when value is null (#18105) fixes #18099 * docs(toolbar): fix end slot documentation (#18092) * fix(item): use the global activated background for md ripple color (#16752) fixes #16585 * fix(textarea): reposition textarea when keybard appears (#18098) fixes #17847 * fix(button): apply round property to button sizes in iOS (#18125) fixes #18108 * fix(): add prefixed transform for older versions of chrome (#18128) fixes #17729 * fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751) fixes #17069 * fix(): sanitize components using innerHTML (#18083) fixes #18065 * Release 4.3.1 (#18152) (#18154) * fix(angular): support replaceUrl with angular <7.2 (#18106) * fix(angular): support replaceUrl with angular <7.2 * run linter * fix(): sanitize components using innerHTML (#18146) * 4.3.1 (#18150) * doc(loading): remove mention of undefined "content" property (#18126) * feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159) - Adds `ionImgWillLoad` event that emits when the img src is set - Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading fixes #17652 closes #18161 * fix(toast): allow button-color CSS variable to be overridden (#18133) fixes #18127 * fix(label): use primary color on focus for md input labels (#18183) fixes #15602 * feat(item-sliding): add open method (#17964) resolves #17899 * feat(menu-button): add css variables for padding (#18188) fixes #18187 * feat(card): add button functionality (#17997) closes #17773 * feat(textarea): add option to expand textarea as value changes (#16916) * feat(textarea): add autoGrow - set height to scrollHeight * change 1px to inherit, remove additional 4px * feat(refresher): add pullFactor property to control speed (#16697) closes #15425 * fix(input): clear on edit from inside native input (#17115) fixes #17055 * test(angular): increase timeout for tab switch (#18221) * 4.4.0 --- .github/PROCESS.md | 8 +- CHANGELOG.md | 31 +- angular/BREAKING.md | 20 + angular/package.json | 4 +- angular/src/directives/proxies.ts | 21 +- .../test/test-app/e2e/src/tabs.e2e-spec.ts | 14 +- core/README.md | 4 +- core/api.txt | 56 +- core/package.json | 2 +- core/src/components.d.ts | 232 ++++--- .../action-sheet-controller.tsx | 13 +- .../action-sheet-controller/readme.md | 18 +- .../components/action-sheet/action-sheet.tsx | 10 +- core/src/components/action-sheet/readme.md | 13 +- .../action-sheet/test/test.utils.ts | 1 - .../components/action-sheet/usage/react.md | 1 - .../alert-controller/alert-controller.tsx | 15 +- .../src/components/alert-controller/readme.md | 20 +- core/src/components/alert/alert.tsx | 8 +- core/src/components/alert/readme.md | 9 +- core/src/components/alert/usage/react.md | 1 - core/src/components/backdrop/readme.md | 2 +- core/src/components/backdrop/usage/vue.md | 2 +- core/src/components/button/button.ios.scss | 24 +- .../button/test/standalone/index.html | 7 + core/src/components/card/card.ios.scss | 6 + core/src/components/card/card.ios.vars.scss | 6 + core/src/components/card/card.scss | 51 ++ core/src/components/card/card.tsx | 68 +- core/src/components/card/readme.md | 13 +- .../components/card/test/button/index.html | 82 +++ core/src/components/checkbox/readme.md | 2 +- core/src/components/checkbox/usage/vue.md | 2 +- core/src/components/content/content.tsx | 30 +- core/src/components/content/readme.md | 50 +- core/src/components/datetime/datetime-util.ts | 11 + core/src/components/datetime/readme.md | 2 +- .../components/datetime/test/datetime.spec.ts | 13 +- core/src/components/datetime/usage/vue.md | 2 +- .../src/components/fab-button/fab-button.scss | 22 +- core/src/components/fab-list/fab-list.tsx | 2 +- core/src/components/fab-list/readme.md | 2 +- core/src/components/fab/fab.tsx | 2 +- core/src/components/fab/readme.md | 2 +- core/src/components/img/img.tsx | 8 + core/src/components/img/readme.md | 9 +- core/src/components/img/test/basic/index.html | 4 + core/src/components/infinite-scroll/readme.md | 95 ++- .../infinite-scroll/usage/javascript.md | 2 +- .../components/infinite-scroll/usage/react.md | 93 ++- core/src/components/input/input.tsx | 9 + .../components/input/test/basic/index.html | 5 + .../src/components/input/test/spec/index.html | 35 +- .../components/item-sliding/item-sliding.tsx | 67 ++ core/src/components/item-sliding/readme.md | 16 + .../item-sliding/test/basic/index.html | 13 + .../item-sliding/test/preview/index.html | 6 + core/src/components/item/item.scss | 10 +- core/src/components/label/label.md.scss | 11 +- core/src/components/label/label.md.vars.scss | 10 +- .../loading-controller/loading-controller.tsx | 13 +- .../components/loading-controller/readme.md | 18 +- core/src/components/loading/loading.tsx | 6 + core/src/components/loading/readme.md | 11 +- core/src/components/loading/usage/react.md | 1 - .../menu-button/menu-button.ios.scss | 6 +- .../menu-button/menu-button.md.scss | 6 +- .../components/menu-button/menu-button.scss | 9 +- core/src/components/menu-button/readme.md | 10 +- .../menu-controller/menu-controller.ts | 164 +++-- core/src/components/menu-controller/readme.md | 135 ++-- core/src/components/menu/menu.tsx | 33 +- core/src/components/menu/readme.md | 67 +- core/src/components/menu/usage/vue.md | 2 +- .../modal-controller/modal-controller.tsx | 13 +- .../src/components/modal-controller/readme.md | 18 +- core/src/components/modal/modal.tsx | 5 +- core/src/components/modal/readme.md | 9 +- core/src/components/modal/usage/react.md | 1 - core/src/components/nav/nav.tsx | 79 ++- core/src/components/nav/readme.md | 149 ++-- .../nav/test/nav-controller.spec.ts | 1 - .../picker-controller/picker-controller.tsx | 13 +- .../components/picker-controller/readme.md | 18 +- core/src/components/picker/picker.tsx | 10 +- core/src/components/picker/readme.md | 16 +- .../popover-controller/popover-controller.tsx | 13 +- .../components/popover-controller/readme.md | 18 +- core/src/components/popover/popover.tsx | 3 + core/src/components/popover/readme.md | 9 +- core/src/components/popover/usage/react.md | 1 - core/src/components/refresher/readme.md | 57 +- core/src/components/refresher/refresher.tsx | 18 +- .../src/components/refresher/usage/angular.md | 7 + .../components/refresher/usage/javascript.md | 7 + core/src/components/refresher/usage/react.md | 10 +- core/src/components/refresher/usage/vue.md | 18 +- core/src/components/reorder-group/readme.md | 653 ++++++++++++------ .../reorder-group/reorder-group.tsx | 15 +- .../reorder-group/test/basic/index.html | 7 +- .../reorder-group/test/data/index.html | 62 ++ .../components/reorder-group/usage/angular.md | 168 +++-- .../reorder-group/usage/javascript.md | 140 ++-- .../components/reorder-group/usage/react.md | 141 ++-- .../src/components/reorder-group/usage/vue.md | 149 ++-- core/src/components/reorder/readme.md | 228 +++++- core/src/components/reorder/usage/angular.md | 68 ++ .../components/reorder/usage/javascript.md | 68 ++ core/src/components/reorder/usage/react.md | 77 +++ core/src/components/reorder/usage/vue.md | 69 ++ core/src/components/ripple-effect/readme.md | 12 +- .../ripple-effect/ripple-effect.tsx | 19 +- core/src/components/router/readme.md | 8 +- core/src/components/router/router.tsx | 3 + core/src/components/searchbar/readme.md | 13 + core/src/components/searchbar/searchbar.scss | 6 + core/src/components/searchbar/searchbar.tsx | 14 +- .../searchbar/test/basic/index.html | 16 + .../src/components/searchbar/usage/angular.md | 3 + .../components/searchbar/usage/javascript.md | 3 + core/src/components/searchbar/usage/react.md | 3 + core/src/components/searchbar/usage/vue.md | 3 + core/src/components/segment-button/readme.md | 2 +- .../segment-button.ios.vars.scss | 2 +- .../segment-button/segment-button.scss | 13 +- .../components/segment-button/usage/vue.md | 2 +- core/src/components/segment/readme.md | 2 +- core/src/components/segment/segment.scss | 2 +- .../components/segment/test/basic/index.html | 15 + .../segment/test/standalone/index.html | 35 +- core/src/components/segment/usage/vue.md | 2 +- core/src/components/select/readme.md | 14 +- core/src/components/select/select.tsx | 10 +- core/src/components/select/usage/vue.md | 2 +- core/src/components/skeleton-text/readme.md | 2 +- .../src/components/skeleton-text/usage/vue.md | 2 +- core/src/components/slides/readme.md | 77 ++- core/src/components/slides/slides.tsx | 44 +- core/src/components/slides/usage/vue.md | 2 +- core/src/components/split-pane/readme.md | 10 +- core/src/components/split-pane/split-pane.tsx | 8 - core/src/components/tabs/readme.md | 18 +- core/src/components/tabs/tabs.tsx | 10 +- core/src/components/textarea/readme.md | 1 + .../components/textarea/test/basic/index.html | 5 + .../textarea/test/standalone/index.html | 3 +- core/src/components/textarea/textarea.scss | 21 +- core/src/components/textarea/textarea.tsx | 33 + .../src/components/toast-controller/readme.md | 18 +- .../toast-controller/toast-controller.tsx | 10 +- core/src/components/toast/readme.md | 9 +- core/src/components/toast/toast.ios.scss | 1 - core/src/components/toast/toast.ios.vars.scss | 7 +- core/src/components/toast/toast.md.scss | 1 - core/src/components/toast/toast.md.vars.scss | 3 - core/src/components/toast/toast.tsx | 6 + core/src/components/toast/usage/react.md | 1 - core/src/components/toolbar/readme.md | 2 +- core/src/components/toolbar/toolbar.tsx | 2 +- core/src/components/virtual-scroll/readme.md | 34 +- .../virtual-scroll/virtual-scroll.tsx | 31 +- .../themes/test/css-variables/css/dark.css | 3 + .../themes/test/css-variables/css/vibrant.css | 1 + core/src/themes/test/css-variables/index.html | 4 +- core/src/utils/animation/animator.ts | 3 +- core/src/utils/input-shims/hacks/common.ts | 8 +- .../src/utils/input-shims/hacks/hide-caret.ts | 2 +- .../utils/input-shims/hacks/scroll-assist.ts | 4 +- core/src/utils/input-shims/input-shims.ts | 6 +- docs/package.json | 2 +- 170 files changed, 3370 insertions(+), 1344 deletions(-) create mode 100644 core/src/components/card/test/button/index.html create mode 100644 core/src/components/reorder-group/test/data/index.html create mode 100644 core/src/components/reorder/usage/angular.md create mode 100644 core/src/components/reorder/usage/javascript.md create mode 100644 core/src/components/reorder/usage/react.md create mode 100644 core/src/components/reorder/usage/vue.md diff --git a/.github/PROCESS.md b/.github/PROCESS.md index 28359a26ec..a0ec752ba6 100644 --- a/.github/PROCESS.md +++ b/.github/PROCESS.md @@ -243,8 +243,10 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai Merge pull request button -1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch. +1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch. For example, if this release is for `4.3.1`, the message would be `merge release-4.3.1`. -1. Create a pull request and merge the release branch back into `master` using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases. +1. Submit a pull request from the `stable` branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases. -1. Merge the release branch into its corresponding version branch. If this is a major or minor release, create the version branch off the latest `stable`. +1. Merge the release branch into its corresponding version branch. + - If this is a major or minor release, create the version branch off the latest `stable`. For example, if this release was `4.2.0`, create a branch called `4.2.x` off of `stable`. + - If this is a patch release, merge the release branch into the version branch. For example, if this release is `4.2.1`, merge the release branch into the `4.2.x` branch. diff --git a/CHANGELOG.md b/CHANGELOG.md index ae91b6aec8..99dc432f38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,39 @@ +# [4.4.0 Beryllium](https://github.com/ionic-team/ionic/compare/v4.3.1...v4.4.0) (2019-05-08) + + +### Bug Fixes + +* **button:** apply round property to button sizes in iOS ([#18125](https://github.com/ionic-team/ionic/issues/18125)) ([ae0eccc](https://github.com/ionic-team/ionic/commit/ae0eccc)), closes [#18108](https://github.com/ionic-team/ionic/issues/18108) +* **datetime:** default to current date when value is null ([#18105](https://github.com/ionic-team/ionic/issues/18105)) ([ca233b5](https://github.com/ionic-team/ionic/commit/ca233b5)), closes [#18099](https://github.com/ionic-team/ionic/issues/18099) +* **input:** clear on edit from inside native input ([#17115](https://github.com/ionic-team/ionic/issues/17115)) ([85093d6](https://github.com/ionic-team/ionic/commit/85093d6)), closes [#17055](https://github.com/ionic-team/ionic/issues/17055) +* **item:** use the global activated background for md ripple color ([#16752](https://github.com/ionic-team/ionic/issues/16752)) ([95945c0](https://github.com/ionic-team/ionic/commit/95945c0)), closes [#16585](https://github.com/ionic-team/ionic/issues/16585) +* **label:** use primary color on focus for md input labels ([#18183](https://github.com/ionic-team/ionic/issues/18183)) ([ddb8ef8](https://github.com/ionic-team/ionic/commit/ddb8ef8)), closes [#15602](https://github.com/ionic-team/ionic/issues/15602) +* **menu** add prefixed transform for side menu animation ([#18128](https://github.com/ionic-team/ionic/issues/18128)) ([2457a23](https://github.com/ionic-team/ionic/commit/2457a23)), closes [#17729](https://github.com/ionic-team/ionic/issues/17729) +* **reorder-group:** remove required parameter for the complete method ([#18084](https://github.com/ionic-team/ionic/issues/18084)) ([bd96491](https://github.com/ionic-team/ionic/commit/bd96491)), closes [#16302](https://github.com/ionic-team/ionic/issues/16302) +* **segment:** decrease icon size on ios and stretch segment buttons to fill height ([#17751](https://github.com/ionic-team/ionic/issues/17751)) ([0fa645b](https://github.com/ionic-team/ionic/commit/0fa645b)), closes [#17069](https://github.com/ionic-team/ionic/issues/17069) +* **textarea:** reposition textarea when keyboard appears ([#18098](https://github.com/ionic-team/ionic/issues/18098)) ([3cdab10](https://github.com/ionic-team/ionic/commit/3cdab10)), closes [#17847](https://github.com/ionic-team/ionic/issues/17847) +* **toast:** allow button-color CSS variable to be overridden ([#18133](https://github.com/ionic-team/ionic/issues/18133)) ([0c83fd3](https://github.com/ionic-team/ionic/commit/0c83fd3)), closes [#18127](https://github.com/ionic-team/ionic/issues/18127) + + +### Features + +* **card:** add button functionality ([#17997](https://github.com/ionic-team/ionic/issues/17997)) ([669ec0d](https://github.com/ionic-team/ionic/commit/669ec0d)), closes [#17773](https://github.com/ionic-team/ionic/issues/17773) +* **img:** add ionImgWillLoad event and emit ionImgDidLoad when image is loaded ([#18159](https://github.com/ionic-team/ionic/issues/18159)) ([38ffb98](https://github.com/ionic-team/ionic/commit/38ffb98)), closes [#17652](https://github.com/ionic-team/ionic/issues/17652) [#18161](https://github.com/ionic-team/ionic/issues/18161) +* **item-sliding:** add open method ([#17964](https://github.com/ionic-team/ionic/issues/17964)) ([f912206](https://github.com/ionic-team/ionic/commit/f912206)), closes [#17899](https://github.com/ionic-team/ionic/issues/17899) +* **menu-button:** add css variables for padding ([#18188](https://github.com/ionic-team/ionic/issues/18188)) ([ef98977](https://github.com/ionic-team/ionic/commit/ef98977)), closes [#18187](https://github.com/ionic-team/ionic/issues/18187) +* **refresher:** add pullFactor property to control speed ([#16697](https://github.com/ionic-team/ionic/issues/16697)) ([9030dcc](https://github.com/ionic-team/ionic/commit/9030dcc)), closes [#15425](https://github.com/ionic-team/ionic/issues/15425) +* **searchbar:** add disabled property ([#17935](https://github.com/ionic-team/ionic/issues/17935)) ([a5b9066](https://github.com/ionic-team/ionic/commit/a5b9066)), closes [#17921](https://github.com/ionic-team/ionic/issues/17921) +* **textarea:** add option to expand textarea as value changes ([#16916](https://github.com/ionic-team/ionic/issues/16916)) ([cc8678a](https://github.com/ionic-team/ionic/commit/cc8678a)) + + + ## [4.3.1](https://github.com/ionic-team/ionic/compare/v4.3.0...v4.3.1) (2019-04-26) ### Bug Fixes * **angular:** support replaceUrl with angular <7.2 ([#18106](https://github.com/ionic-team/ionic/issues/18106)) ([eb3cbe4](https://github.com/ionic-team/ionic/commit/eb3cbe4)) -* sanitize components using innerHTML ([#18146](https://github.com/ionic-team/ionic/issues/18146)) ([b839e6f](https://github.com/ionic-team/ionic/commit/b839e6f)) +* **security:** sanitize components using innerHTML ([#18146](https://github.com/ionic-team/ionic/issues/18146)) ([b839e6f](https://github.com/ionic-team/ionic/commit/b839e6f)) diff --git a/angular/BREAKING.md b/angular/BREAKING.md index 0d7260cf1d..9c5fea5c4b 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -783,6 +783,26 @@ The option component should now be written as an `ion-item-option`. Previously i The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options. +### Arguments Changed + +The `ionDrag` event no longer gets the sliding item as an argument. It now takes an event with a property `details` which contains two properties `amount` and `ratio` reflecting the absolute and ratio values of the sliding action respectively. + +**Old Usage Example:** + +```typescript +dragged(item: ItemSliding) { + console.log(item.getSlidingPercent()); + console.log(item.getOpenAmount()); +} +``` + +**New Usage Example:** +```typescript +dragged(ev: { details: { amount: number, ratio: number } }) { + console.log(ev.details.ratio); + console.log(ev.details.amount); +} +``` ## Label diff --git a/angular/package.json b/angular/package.json index dbb841ced7..efc8b6f4b8 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "4.3.1", + "version": "4.4.0", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -45,7 +45,7 @@ "css/" ], "dependencies": { - "@ionic/core": "4.3.1", + "@ionic/core": "4.4.0", "tslib": "^1.9.3" }, "peerDependencies": { diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 9acc693024..de758f092a 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -85,7 +85,7 @@ export class IonButtons { } export declare interface IonCard extends StencilComponents<'IonCard'> {} -@Component({ selector: 'ion-card', changeDetection: 0, template: '', inputs: ['color', 'mode'] }) +@Component({ selector: 'ion-card', changeDetection: 0, template: '', inputs: ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection'] }) export class IonCard { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -93,7 +93,7 @@ export class IonCard { this.el = r.nativeElement; } } -proxyInputs(IonCard, ['color', 'mode']); +proxyInputs(IonCard, ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection']); export declare interface IonCardContent extends StencilComponents<'IonCardContent'> {} @Component({ selector: 'ion-card-content', changeDetection: 0, template: '', inputs: ['mode'] }) @@ -293,13 +293,14 @@ proxyInputs(IonIcon, ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'm export declare interface IonImg extends StencilComponents<'IonImg'> {} @Component({ selector: 'ion-img', changeDetection: 0, template: '', inputs: ['alt', 'src'] }) export class IonImg { + ionImgWillLoad!: EventEmitter; ionImgDidLoad!: EventEmitter; ionError!: EventEmitter; protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']); + proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']); } } proxyInputs(IonImg, ['alt', 'src']); @@ -413,7 +414,7 @@ export class IonItemSliding { proxyOutputs(this, this.el, ['ionDrag']); } } -proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']); +proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']); proxyInputs(IonItemSliding, ['disabled']); export declare interface IonLabel extends StencilComponents<'IonLabel'> {} @@ -602,7 +603,7 @@ export class IonRange { proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']); export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {} -@Component({ selector: 'ion-refresher', changeDetection: 0, template: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] }) +@Component({ selector: 'ion-refresher', changeDetection: 0, template: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled'] }) export class IonRefresher { ionRefresh!: EventEmitter; ionPull!: EventEmitter; @@ -615,7 +616,7 @@ export class IonRefresher { } } proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']); -proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']); +proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled']); export declare interface IonRefresherContent extends StencilComponents<'IonRefresherContent'> {} @Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] }) @@ -675,7 +676,7 @@ export class IonRow { } export declare interface IonSearchbar extends StencilComponents<'IonSearchbar'> {} -@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] }) +@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] }) export class IonSearchbar { ionInput!: EventEmitter; ionChange!: EventEmitter; @@ -691,7 +692,7 @@ export class IonSearchbar { } } proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']); -proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']); +proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']); export declare interface IonSegment extends StencilComponents<'IonSegment'> {} @Component({ selector: 'ion-segment', changeDetection: 0, template: '', inputs: ['color', 'mode', 'disabled', 'scrollable', 'value'] }) @@ -856,7 +857,7 @@ export class IonText { proxyInputs(IonText, ['color', 'mode']); export declare interface IonTextarea extends StencilComponents<'IonTextarea'> {} -@Component({ selector: 'ion-textarea', changeDetection: 0, template: '', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'] }) +@Component({ selector: 'ion-textarea', changeDetection: 0, template: '', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value'] }) export class IonTextarea { ionChange!: EventEmitter; ionInput!: EventEmitter; @@ -870,7 +871,7 @@ export class IonTextarea { } } proxyMethods(IonTextarea, ['setFocus', 'getInputElement']); -proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']); +proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value']); export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {} @Component({ selector: 'ion-thumbnail', changeDetection: 0, template: '' }) diff --git a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts index 7b5ec4a41d..fd19217341 100644 --- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts +++ b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts @@ -130,22 +130,22 @@ describe('tabs', () => { expect(await tab.$('ion-back-button').isDisplayed()).toBe(false); }); }); - + describe('enter url - /tabs/contact/one', () => { beforeEach(async () => { await browser.get('/tabs/contact/one'); }); - - it('should return to correct tab after going to page in different outlet', async () => { + + it('should return to correct tab after going to page in different outlet', async () => { const tab = await getSelectedTab(); await tab.$('#goto-nested-page1').click(); - + await testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']); - + const nestedOutlet = await element(by.css('app-nested-outlet')); const backButton = await nestedOutlet.$('ion-back-button'); await backButton.click(); - + await testTabTitle('Tab 2 - Page 1'); }); }) @@ -156,7 +156,7 @@ async function testState(count: number, tab: string) { } async function testTabTitle(title: string) { - await waitTime(600); + await waitTime(1000); const tab = await getSelectedTab(); expect(await tab.$('ion-title').getText()).toEqual(title); return tab; diff --git a/core/README.md b/core/README.md index cc4ce0015e..f28984b177 100644 --- a/core/README.md +++ b/core/README.md @@ -23,8 +23,8 @@ The Ionic Core package contains the Web Components that make up the reusable UI Easiest way to start using Ionic Core is by adding a script tag to the CDN: ```html - - + + ``` Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`. diff --git a/core/api.txt b/core/api.txt index d56fd0ed5a..77c00ee550 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1,6 +1,6 @@ ion-action-sheet-controller,none -ion-action-sheet-controller,method,create,create(opts: ActionSheetOptions) => Promise +ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-action-sheet-controller,method,getTop,getTop() => Promise @@ -36,7 +36,7 @@ ion-action-sheet,css-prop,--min-width ion-action-sheet,css-prop,--width ion-alert-controller,none -ion-alert-controller,method,create,create(opts: AlertOptions) => Promise +ion-alert-controller,method,create,create(options: AlertOptions) => Promise ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-alert-controller,method,getTop,getTop() => Promise @@ -186,8 +186,13 @@ ion-card-title,prop,mode,"ios" | "md",undefined,false,false ion-card-title,css-prop,--color ion-card,scoped +ion-card,prop,button,boolean,false,false,false ion-card,prop,color,string | undefined,undefined,false,false +ion-card,prop,disabled,boolean,false,false,false +ion-card,prop,href,string | undefined,undefined,false,false ion-card,prop,mode,"ios" | "md",undefined,false,false +ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false +ion-card,prop,type,"button" | "reset" | "submit",'button',false,false ion-card,css-prop,--background ion-card,css-prop,--color @@ -382,6 +387,7 @@ ion-img,prop,alt,string | undefined,undefined,false,false ion-img,prop,src,string | undefined,undefined,false,false ion-img,event,ionError,void,true ion-img,event,ionImgDidLoad,void,true +ion-img,event,ionImgWillLoad,void,true ion-infinite-scroll-content,none ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false @@ -471,6 +477,7 @@ ion-item-sliding,method,close,close() => Promise ion-item-sliding,method,closeOpened,closeOpened() => Promise ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise +ion-item-sliding,method,open,open(side: string | undefined) => Promise ion-item-sliding,event,ionDrag,void,true ion-item,shadow @@ -532,7 +539,7 @@ ion-list,prop,mode,"ios" | "md",undefined,false,false ion-list,method,closeSlidingItems,closeSlidingItems() => Promise ion-loading-controller,none -ion-loading-controller,method,create,create(opts?: LoadingOptions | undefined) => Promise +ion-loading-controller,method,create,create(options?: LoadingOptions | undefined) => Promise ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-loading-controller,method,getTop,getTop() => Promise @@ -572,20 +579,24 @@ ion-menu-button,prop,color,string | undefined,undefined,false,false ion-menu-button,prop,menu,string | undefined,undefined,false,false ion-menu-button,prop,mode,"ios" | "md",undefined,false,false ion-menu-button,css-prop,--color +ion-menu-button,css-prop,--padding-bottom +ion-menu-button,css-prop,--padding-end +ion-menu-button,css-prop,--padding-start +ion-menu-button,css-prop,--padding-top ion-menu-controller,none -ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise -ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise -ion-menu-controller,method,get,get(menuId?: string | null | undefined) => Promise +ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise +ion-menu-controller,method,enable,enable(enable: boolean, menu?: string | null | undefined) => Promise +ion-menu-controller,method,get,get(menu?: string | null | undefined) => Promise ion-menu-controller,method,getMenus,getMenus() => Promise ion-menu-controller,method,getOpen,getOpen() => Promise ion-menu-controller,method,isAnimating,isAnimating() => Promise -ion-menu-controller,method,isEnabled,isEnabled(menuId?: string | null | undefined) => Promise -ion-menu-controller,method,isOpen,isOpen(menuId?: string | null | undefined) => Promise -ion-menu-controller,method,open,open(menuId?: string | null | undefined) => Promise +ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise +ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise +ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => void -ion-menu-controller,method,swipeGesture,swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise -ion-menu-controller,method,toggle,toggle(menuId?: string | null | undefined) => Promise +ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise +ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise ion-menu-toggle,shadow ion-menu-toggle,prop,autoHide,boolean,true,false,false @@ -618,7 +629,7 @@ ion-menu,css-prop,--min-width ion-menu,css-prop,--width ion-modal-controller,none -ion-modal-controller,method,create,create(opts: ModalOptions) => Promise +ion-modal-controller,method,create,create(options: ModalOptions) => Promise ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-modal-controller,method,getTop,getTop() => Promise @@ -691,7 +702,7 @@ ion-note,prop,mode,"ios" | "md",undefined,false,false ion-note,css-prop,--color ion-picker-controller,none -ion-picker-controller,method,create,create(opts: PickerOptions) => Promise +ion-picker-controller,method,create,create(options: PickerOptions) => Promise ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-picker-controller,method,getTop,getTop() => Promise @@ -730,7 +741,7 @@ ion-picker,css-prop,--min-width ion-picker,css-prop,--width ion-popover-controller,none -ion-popover-controller,method,create,create(opts: PopoverOptions) => Promise +ion-popover-controller,method,create,create(options: PopoverOptions) => Promise ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-popover-controller,method,getTop,getTop() => Promise @@ -830,6 +841,7 @@ ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,fal ion-refresher,none ion-refresher,prop,closeDuration,string,'280ms',false,false ion-refresher,prop,disabled,boolean,false,false,false +ion-refresher,prop,pullFactor,number,1,false,false ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false ion-refresher,prop,pullMin,number,60,false,false ion-refresher,prop,snapbackDuration,string,'280ms',false,false @@ -849,7 +861,7 @@ ion-reorder,shadow ion-ripple-effect,shadow ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false -ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void> +ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void> ion-route-redirect,none ion-route-redirect,prop,from,string,undefined,true,false @@ -885,6 +897,7 @@ ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false ion-searchbar,prop,color,string | undefined,undefined,false,false ion-searchbar,prop,debounce,number,250,false,false +ion-searchbar,prop,disabled,boolean,false,false,false ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,searchIcon,string,'search',false,false @@ -969,7 +982,7 @@ ion-select,prop,okText,string,'OK',false,false ion-select,prop,placeholder,null | string | undefined,undefined,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false ion-select,prop,value,any,undefined,false,false -ion-select,method,open,open(ev?: UIEvent | undefined) => Promise +ion-select,method,open,open(event?: UIEvent | undefined) => Promise ion-select,event,ionBlur,void,true ion-select,event,ionCancel,void,true ion-select,event,ionChange,SelectChangeEventDetail,true @@ -998,9 +1011,9 @@ ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise ion-slides,method,isBeginning,isBeginning() => Promise ion-slides,method,isEnd,isEnd() => Promise ion-slides,method,length,length() => Promise -ion-slides,method,lockSwipeToNext,lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise -ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise -ion-slides,method,lockSwipes,lockSwipes(shouldLockSwipes: boolean) => Promise +ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise +ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise +ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise @@ -1084,6 +1097,7 @@ ion-text,prop,color,string | undefined,undefined,false,false ion-text,prop,mode,"ios" | "md",undefined,false,false ion-textarea,scoped +ion-textarea,prop,autoGrow,boolean,false,false,false ion-textarea,prop,autocapitalize,string,'none',false,false ion-textarea,prop,autofocus,boolean,false,false,false ion-textarea,prop,clearOnEdit,boolean,false,false,false @@ -1129,7 +1143,7 @@ ion-title,prop,color,string | undefined,undefined,false,false ion-title,css-prop,--color ion-toast-controller,none -ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise +ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-toast-controller,method,getTop,getTop() => Promise @@ -1217,5 +1231,5 @@ ion-virtual-scroll,prop,renderFooter,((item: any, index: number) => any) | undef ion-virtual-scroll,prop,renderHeader,((item: any, index: number) => any) | undefined,undefined,false,false ion-virtual-scroll,prop,renderItem,((item: any, index: number) => any) | undefined,undefined,false,false ion-virtual-scroll,method,checkEnd,checkEnd() => void -ion-virtual-scroll,method,checkRange,checkRange(offset: number, len?: number) => void +ion-virtual-scroll,method,checkRange,checkRange(offset: number, length?: number) => void ion-virtual-scroll,method,positionForItem,positionForItem(index: number) => Promise \ No newline at end of file diff --git a/core/package.json b/core/package.json index 5979ca9de1..ed8b753e6e 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "4.3.1", + "version": "4.4.0", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 26b32bffc5..e7cd33756b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -89,7 +89,7 @@ export namespace Components { /** * Create an action sheet overlay with action sheet options. */ - 'create': (opts: ActionSheetOptions) => Promise; + 'create': (options: ActionSheetOptions) => Promise; /** * Dismiss the open action sheet overlay. */ @@ -143,11 +143,11 @@ export namespace Components { */ 'mode': Mode; /** - * Returns a promise that resolves when the action-sheet did dismiss. + * Returns a promise that resolves when the action sheet did dismiss. */ 'onDidDismiss': () => Promise>; /** - * Returns a promise that resolves when the action-sheet will dismiss. + * Returns a promise that resolves when the action sheet will dismiss. */ 'onWillDismiss': () => Promise>; 'overlayIndex': number; @@ -229,9 +229,9 @@ export namespace Components { interface IonAlertController { /** - * Create an alert overlay with alert options + * Create an alert overlay with alert options. */ - 'create': (opts: AlertOptions) => Promise; + 'create': (options: AlertOptions) => Promise; /** * Dismiss the open alert overlay. */ @@ -716,24 +716,64 @@ export namespace Components { } interface IonCard { + /** + * If `true`, a button tag will be rendered and the card will be tappable. + */ + 'button': boolean; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ 'color'?: Color; /** + * If `true`, the user cannot interact with the card. + */ + 'disabled': boolean; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string; + /** * The mode determines which platform styles to use. */ 'mode': Mode; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + 'routerDirection': RouterDirection; + /** + * The type of the button. Only used when an `onclick` or `button` property is present. + */ + 'type': 'submit' | 'reset' | 'button'; } interface IonCardAttributes extends StencilHTMLAttributes { + /** + * If `true`, a button tag will be rendered and the card will be tappable. + */ + 'button'?: boolean; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ 'color'?: Color; /** + * If `true`, the user cannot interact with the card. + */ + 'disabled'?: boolean; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string; + /** * The mode determines which platform styles to use. */ 'mode'?: Mode; + /** + * When using a router, it specifies the transition direction when navigating to another page using `href`. + */ + 'routerDirection'?: RouterDirection; + /** + * The type of the button. Only used when an `onclick` or `button` property is present. + */ + 'type'?: 'submit' | 'reset' | 'button'; } interface IonCheckbox { @@ -1049,11 +1089,11 @@ export namespace Components { */ 'fullscreen': boolean; /** - * Returns the element where the actual scrolling takes places. This element is the one you could subscribe to `scroll` events or manually modify `scrollTop`, however, it's recommended to use the API provided by `ion-content`: Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and scrollToPoint() to scroll the content into a certain point. + * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`: i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point. */ 'getScrollElement': () => Promise; /** - * Scroll by a specified X/Y distance in the component + * Scroll by a specified X/Y distance in the component. */ 'scrollByPoint': (x: number, y: number, duration: number) => Promise; /** @@ -1061,15 +1101,15 @@ export namespace Components { */ 'scrollEvents': boolean; /** - * Scroll to the bottom of the component + * Scroll to the bottom of the component. */ 'scrollToBottom': (duration?: number) => Promise; /** - * Scroll to a specified X/Y location in the component + * Scroll to a specified X/Y location in the component. */ 'scrollToPoint': (x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise; /** - * Scroll to the top of the component + * Scroll to the top of the component. */ 'scrollToTop': (duration?: number) => Promise; /** @@ -1416,7 +1456,7 @@ export namespace Components { interface IonFabList { /** - * If `true`, the fab list will be show all fab buttons in the list. + * If `true`, the fab list will show all fab buttons in the list. */ 'activated': boolean; /** @@ -1426,7 +1466,7 @@ export namespace Components { } interface IonFabListAttributes extends StencilHTMLAttributes { /** - * If `true`, the fab list will be show all fab buttons in the list. + * If `true`, the fab list will show all fab buttons in the list. */ 'activated'?: boolean; /** @@ -1441,7 +1481,7 @@ export namespace Components { */ 'activated': boolean; /** - * Close an active FAB list container + * Close an active FAB list container. */ 'close': () => void; /** @@ -1551,10 +1591,14 @@ export namespace Components { */ 'onIonError'?: (event: CustomEvent) => void; /** - * Emitted when the img src has been set + * Emitted when the image has finished loading */ 'onIonImgDidLoad'?: (event: CustomEvent) => void; /** + * Emitted when the img src has been set + */ + 'onIonImgWillLoad'?: (event: CustomEvent) => void; + /** * The image URL. This attribute is mandatory for the element. */ 'src'?: string; @@ -1979,6 +2023,10 @@ export namespace Components { * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options. */ 'getSlidingRatio': () => Promise; + /** + * Open the sliding item. + */ + 'open': (side: string | undefined) => Promise; } interface IonItemSlidingAttributes extends StencilHTMLAttributes { /** @@ -2163,7 +2211,7 @@ export namespace Components { /** * Create a loading overlay with loading options. */ - 'create': (opts?: LoadingOptions | undefined) => Promise; + 'create': (options?: LoadingOptions | undefined) => Promise; /** * Dismiss the open loading overlay. */ @@ -2349,53 +2397,53 @@ export namespace Components { interface IonMenuController { '_getInstance': () => Promise; /** - * Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu. + * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`. */ - 'close': (menuId?: string | null | undefined) => Promise; + 'close': (menu?: string | null | undefined) => Promise; /** - * Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side. + * Enable or disable a menu. Disabling a menu will not allow gestures for that menu or any calls to open it. This is useful when there are multiple menus on the same side and only one of them should be allowed to open. Enabling a menu will automatically disable all other menus on that side. */ - 'enable': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise; + 'enable': (enable: boolean, menu?: string | null | undefined) => Promise; /** - * Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. + * Get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`. */ - 'get': (menuId?: string | null | undefined) => Promise; + 'get': (menu?: string | null | undefined) => Promise; /** - * Returns an array of all menu instances. + * Get all menu instances. */ 'getMenus': () => Promise; /** - * Returns the instance of the menu already opened, otherwise `null`. + * Get the instance of the opened menu. Returns `null` if a menu is not found. */ 'getOpen': () => Promise; /** - * Returns `true` if any menu is currently animating. + * Get whether or not a menu is animating. Returns `true` if any menu is currently animating. */ 'isAnimating': () => Promise; /** - * Returns `true` if the specified menu is enabled. + * Get whether or not the menu is enabled. Returns `true` if the specified menu is enabled. Returns `false` if a menu is disabled or not found. */ - 'isEnabled': (menuId?: string | null | undefined) => Promise; + 'isEnabled': (menu?: string | null | undefined) => Promise; /** - * Returns `true` if the specified menu is open. If the menu is not specified, it will return `true` if any menu is currently open. + * Get whether or not the menu is open. Returns `true` if the specified menu is open. If a menu is not specified, it will return `true` if any menu is currently open. */ - 'isOpen': (menuId?: string | null | undefined) => Promise; + 'isOpen': (menu?: string | null | undefined) => Promise; /** - * Open the menu. + * Open the menu. If a menu is not provided then it will open the first menu found. If the specified menu is `start` or `end`, then it will open the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `false`. */ - 'open': (menuId?: string | null | undefined) => Promise; + 'open': (menu?: string | null | undefined) => Promise; /** - * Registers a new animation that can be used in any `ion-menu`. ``` * * ``` + * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property. */ 'registerAnimation': (name: string, animation: AnimationBuilder) => void; /** - * Used to enable or disable the ability to swipe open the menu. + * Enable or disable the ability to swipe open the menu. */ - 'swipeGesture': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise; + 'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise; /** - * Toggle the menu. If it's closed, it will open, and if opened, it will close. + * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if a menu is not found. */ - 'toggle': (menuId?: string | null | undefined) => Promise; + 'toggle': (menu?: string | null | undefined) => Promise; } interface IonMenuControllerAttributes extends StencilHTMLAttributes {} @@ -2422,7 +2470,7 @@ export namespace Components { interface IonMenu { /** - * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`. + * Close the menu. Returns `false` if the menu is already closed or it can't be closed. */ 'close': (animated?: boolean) => Promise; /** @@ -2434,11 +2482,11 @@ export namespace Components { */ 'disabled': boolean; /** - * Returns `true` is the menu is active. A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`. + * Get whether or not the menu is active. Returns `true` if the menu is active. A menu is active when it can be opened or closed, meaning it's enabled and it's not part of an `ion-split-pane`. */ 'isActive': () => Promise; /** - * Returns `true` is the menu is open. + * Get whether or not the menu is open. Returns `true` if the menu is open. */ 'isOpen': () => Promise; /** @@ -2450,11 +2498,11 @@ export namespace Components { */ 'menuId'?: string; /** - * Opens the menu. If the menu is already open or it can't be opened, it returns `false`. + * Open the menu. Returns `false` if the menu is already open or it can't be opened. */ 'open': (animated?: boolean) => Promise; /** - * Opens or closes the button. If the operation can't be completed successfully, it returns `false`. + * Sets the menu to open or closed. Returns `false` if the operation can't be completed successfully. */ 'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise; /** @@ -2466,11 +2514,11 @@ export namespace Components { */ 'swipeGesture': boolean; /** - * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`. + * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if the operation can't be completed successfully. */ 'toggle': (animated?: boolean) => Promise; /** - * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller. */ 'type'?: string; } @@ -2516,7 +2564,7 @@ export namespace Components { */ 'swipeGesture'?: boolean; /** - * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. + * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller. */ 'type'?: string; } @@ -2525,7 +2573,7 @@ export namespace Components { /** * Create a modal overlay with modal options. */ - 'create': (opts: ModalOptions) => Promise; + 'create': (options: ModalOptions) => Promise; /** * Dismiss the open modal overlay. */ @@ -2711,37 +2759,37 @@ export namespace Components { */ 'animation'?: AnimationBuilder; /** - * Returns `true` or false if the current view can go back + * Returns `true` if the current view can go back. */ 'canGoBack': (view?: ViewController | undefined) => Promise; 'delegate'?: FrameworkDelegate; /** - * Gets the active view + * Get the active view. */ 'getActive': () => Promise; /** - * Returns the view at the index + * Get the view at the specified index. */ 'getByIndex': (index: number) => Promise; /** - * Gets the previous view + * Get the previous view. */ 'getPrevious': (view?: ViewController | undefined) => Promise; 'getRouteId': () => Promise; /** - * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack. + * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack. */ 'insert': (insertIndex: number, component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. + * Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view. */ 'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Call to navigate back from a current component. Similar to push(), you can also pass navigation options. + * Pop a component off of the navigation stack. Navigates back from the current component. */ 'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Pop to a specific index in the navigation stack + * Pop to a specific index in the navigation stack. */ 'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** @@ -2749,11 +2797,11 @@ export namespace Components { */ 'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams + * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams. */ 'push': (component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Removes a page from the nav stack at the specified index. + * Removes a component from the navigation stack at the specified index. */ 'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** @@ -2765,11 +2813,11 @@ export namespace Components { */ 'rootParams'?: ComponentProps; /** - * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array. + * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array. */ 'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; /** - * Set the root for the current navigation stack. + * Set the root for the current navigation stack to a component. */ 'setRoot': (component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise; 'setRouteId': (id: string, params: { [key: string]: any; } | undefined, direction: RouterDirection) => Promise; @@ -2847,7 +2895,7 @@ export namespace Components { /** * Create a picker overlay with picker options. */ - 'create': (opts: PickerOptions) => Promise; + 'create': (options: PickerOptions) => Promise; /** * Dismiss the open picker overlay. */ @@ -2893,7 +2941,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * Returns the column the matches the specified name + * Get the column that matches the specified name. */ 'getColumn': (name: string) => Promise; /** @@ -2993,7 +3041,7 @@ export namespace Components { /** * Create a popover overlay with popover options. */ - 'create': (opts: PopoverOptions) => Promise; + 'create': (options: PopoverOptions) => Promise; /** * Dismiss the open popover overlay. */ @@ -3471,6 +3519,10 @@ export namespace Components { */ 'getProgress': () => Promise; /** + * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. + */ + 'pullFactor': number; + /** * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. */ 'pullMax': number; @@ -3505,6 +3557,10 @@ export namespace Components { */ 'onIonStart'?: (event: CustomEvent) => void; /** + * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. + */ + 'pullFactor'?: number; + /** * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. */ 'pullMax'?: number; @@ -3520,7 +3576,7 @@ export namespace Components { interface IonReorderGroup { /** - * This method must be called once the `ionItemReorder` event is handled in order to complete the reorder operation. + * Completes the reorder operation. Must be called by the `ionItemReorder` event. If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position. */ 'complete': (listOrReorder?: boolean | any[] | undefined) => Promise; /** @@ -3544,9 +3600,9 @@ export namespace Components { interface IonRippleEffect { /** - * Adds the ripple effect to the parent element + * Adds the ripple effect to the parent element. */ - 'addRipple': (pageX: number, pageY: number) => Promise<() => void>; + 'addRipple': (x: number, y: number) => Promise<() => void>; /** * Sets the type of ripple-effect: - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container. NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible. */ @@ -3720,6 +3776,10 @@ export namespace Components { */ 'debounce': number; /** + * If `true`, the user cannot interact with the input. + */ + 'disabled': boolean; + /** * Returns the native `` element used under the hood. */ 'getInputElement': () => Promise; @@ -3790,6 +3850,10 @@ export namespace Components { */ 'debounce'?: number; /** + * If `true`, the user cannot interact with the input. + */ + 'disabled'?: boolean; + /** * The mode determines which platform styles to use. */ 'mode'?: Mode; @@ -4049,9 +4113,9 @@ export namespace Components { */ 'okText': string; /** - * Opens the select overlay, it could be an alert, action-sheet or popover, based in `ion-select` settings. + * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`. */ - 'open': (ev?: UIEvent | undefined) => Promise; + 'open': (event?: UIEvent | undefined) => Promise; /** * The text to display when the select is empty. */ @@ -4172,17 +4236,17 @@ export namespace Components { */ 'length': () => Promise; /** - * Lock or unlock the ability to slide to the next slides. + * Lock or unlock the ability to slide to the next slide. */ - 'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => Promise; + 'lockSwipeToNext': (lock: boolean) => Promise; /** - * Lock or unlock the ability to slide to the previous slides. + * Lock or unlock the ability to slide to the previous slide. */ - 'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => Promise; + 'lockSwipeToPrev': (lock: boolean) => Promise; /** - * Lock or unlock the ability to slide to change slides. + * Lock or unlock the ability to slide to the next or previous slide. */ - 'lockSwipes': (shouldLockSwipes: boolean) => Promise; + 'lockSwipes': (lock: boolean) => Promise; /** * The mode determines which platform styles to use. */ @@ -4224,7 +4288,7 @@ export namespace Components { */ 'update': () => Promise; /** - * Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter + * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter. */ 'updateAutoHeight': (speed?: number | undefined) => Promise; } @@ -4350,7 +4414,7 @@ export namespace Components { interface IonSplitPane { /** - * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. ```html * * *
* * ``` + * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. */ 'contentId'?: string; /** @@ -4364,7 +4428,7 @@ export namespace Components { } interface IonSplitPaneAttributes extends StencilHTMLAttributes { /** - * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. ```html * * *
* * ``` + * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane. */ 'contentId'?: string; /** @@ -4501,15 +4565,15 @@ export namespace Components { interface IonTabs { 'getRouteId': () => Promise; /** - * Get the currently selected tab + * Get the currently selected tab. */ 'getSelected': () => Promise; /** - * Get the tab element given the tab name + * Get a specific tab by the value of its `tab` property or an element reference. */ 'getTab': (tab: string | HTMLIonTabElement) => Promise; /** - * Index or the Tab instance, of the tab to select. + * Select a tab by the value of its `tab` property or an element reference. */ 'select': (tab: string | HTMLIonTabElement) => Promise; 'setRouteId': (id: string) => Promise; @@ -4548,6 +4612,10 @@ export namespace Components { } interface IonTextarea { + /** + * If `true`, the element height will increase based on the value. + */ + 'autoGrow': boolean; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ @@ -4630,6 +4698,10 @@ export namespace Components { 'wrap'?: 'hard' | 'soft' | 'off'; } interface IonTextareaAttributes extends StencilHTMLAttributes { + /** + * If `true`, the element height will increase based on the value. + */ + 'autoGrow'?: boolean; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ @@ -4740,7 +4812,7 @@ export namespace Components { /** * Create a toast overlay with toast options. */ - 'create': (opts?: ToastOptions | undefined) => Promise; + 'create': (options?: ToastOptions | undefined) => Promise; /** * Dismiss the open toast overlay. */ @@ -5010,13 +5082,13 @@ export namespace Components { */ 'approxItemHeight': number; /** - * This method marks the tail the items array as dirty, so they can be re-rendered. It's equivalent to calling: ```js * virtualScroll.checkRange(lastItemLen); * ``` + * Marks the tail of the items array as dirty, so they can be re-rendered. It's equivalent to calling `checkRange(length)` where `length` is the total length of the items. */ 'checkEnd': () => void; /** - * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes. The subset of items to be updated can are specifing by an offset and a length. + * Marks a subset of the items as dirty so they can be re-rendered. Items should be marked as dirty any time the content or their style changes. The subset of items to be updated are specified by an offset and a length. If a length is not provided it will check all of the items beginning at the offset. */ - 'checkRange': (offset: number, len?: number) => void; + 'checkRange': (offset: number, length?: number) => void; 'domRender'?: DomRenderFn; /** * Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index 4ed53c7102..9a1208c7c6 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -12,14 +12,23 @@ export class ActionSheetController implements ComponentInterface, OverlayControl /** * Create an action sheet overlay with action sheet options. + * + * @param options The options to use to create the action sheet. */ @Method() - create(opts: ActionSheetOptions): Promise { - return createOverlay(this.doc.createElement('ion-action-sheet'), opts); + create(options: ActionSheetOptions): Promise { + return createOverlay(this.doc.createElement('ion-action-sheet'), options); } /** * Dismiss the open action sheet overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the action sheet. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the action sheet. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/action-sheet-controller/readme.md b/core/src/components/action-sheet-controller/readme.md index 3914ea3996..84f31344e0 100644 --- a/core/src/components/action-sheet-controller/readme.md +++ b/core/src/components/action-sheet-controller/readme.md @@ -7,15 +7,15 @@ Action Sheet controllers programmatically control the action sheet component. Ac ## Methods -### `create(opts: ActionSheetOptions) => Promise` +### `create(options: ActionSheetOptions) => Promise` Create an action sheet overlay with action sheet options. #### Parameters -| Name | Type | Description | -| ------ | -------------------- | ----------- | -| `opts` | `ActionSheetOptions` | | +| Name | Type | Description | +| --------- | -------------------- | ---------------------------------------------- | +| `options` | `ActionSheetOptions` | The options to use to create the action sheet. | #### Returns @@ -29,11 +29,11 @@ Dismiss the open action sheet overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet. | #### Returns diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 303ffb8e4b..ef45f6b55b 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -128,6 +128,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { /** * Dismiss the action sheet overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the action sheet. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the action sheet. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { @@ -135,7 +141,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { } /** - * Returns a promise that resolves when the action-sheet did dismiss. + * Returns a promise that resolves when the action sheet did dismiss. */ @Method() onDidDismiss(): Promise { @@ -143,7 +149,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { } /** - * Returns a promise that resolves when the action-sheet will dismiss. + * Returns a promise that resolves when the action sheet will dismiss. * */ @Method() diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 2920b496db..987e21f459 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component { ); } } - ``` @@ -290,10 +289,10 @@ Dismiss the action sheet overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns @@ -303,7 +302,7 @@ Type: `Promise` ### `onDidDismiss() => Promise>` -Returns a promise that resolves when the action-sheet did dismiss. +Returns a promise that resolves when the action sheet did dismiss. #### Returns @@ -313,7 +312,7 @@ Type: `Promise>` ### `onWillDismiss() => Promise>` -Returns a promise that resolves when the action-sheet will dismiss. +Returns a promise that resolves when the action sheet will dismiss. #### Returns diff --git a/core/src/components/action-sheet/test/test.utils.ts b/core/src/components/action-sheet/test/test.utils.ts index d30f172a9b..0f300727ac 100644 --- a/core/src/components/action-sheet/test/test.utils.ts +++ b/core/src/components/action-sheet/test/test.utils.ts @@ -50,7 +50,6 @@ export async function testActionSheetBackdrop( actionSheet: any ) { try { - console.log('backdrop hook'); const backdrop = await page.find('ion-backdrop'); await backdrop.click(); diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md index f4643fdba6..6ac8d419c4 100644 --- a/core/src/components/action-sheet/usage/react.md +++ b/core/src/components/action-sheet/usage/react.md @@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component { ); } } - ``` diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index 961b17c360..e9ac132f09 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/core/src/components/alert-controller/alert-controller.tsx @@ -11,15 +11,24 @@ export class AlertController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; /** - * Create an alert overlay with alert options + * Create an alert overlay with alert options. + * + * @param options The options to use to create the alert. */ @Method() - create(opts: AlertOptions): Promise { - return createOverlay(this.doc.createElement('ion-alert'), opts); + create(options: AlertOptions): Promise { + return createOverlay(this.doc.createElement('ion-alert'), options); } /** * Dismiss the open alert overlay. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the alert. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the alert. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. + * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert. */ @Method() dismiss(data?: any, role?: string, id?: string) { diff --git a/core/src/components/alert-controller/readme.md b/core/src/components/alert-controller/readme.md index 285cac0de2..257a3bb170 100644 --- a/core/src/components/alert-controller/readme.md +++ b/core/src/components/alert-controller/readme.md @@ -24,15 +24,15 @@ async function presentAlert() { ## Methods -### `create(opts: AlertOptions) => Promise` +### `create(options: AlertOptions) => Promise` -Create an alert overlay with alert options +Create an alert overlay with alert options. #### Parameters -| Name | Type | Description | -| ------ | -------------- | ----------- | -| `opts` | `AlertOptions` | | +| Name | Type | Description | +| --------- | -------------- | --------------------------------------- | +| `options` | `AlertOptions` | The options to use to create the alert. | #### Returns @@ -46,11 +46,11 @@ Dismiss the open alert overlay. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | -| `id` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | +| `id` | `string \| undefined` | The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert. | #### Returns diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index ad3b0abb9e..5bee010cdb 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -192,6 +192,12 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Dismiss the alert overlay after it has been presented. + * + * @param data Any data to emit in the dismiss events. + * @param role The role of the element that is dismissing the alert. + * This can be useful in a button handler for determining which button was + * clicked to dismiss the alert. + * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ @Method() dismiss(data?: any, role?: string): Promise { @@ -200,7 +206,6 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Returns a promise that resolves when the alert did dismiss. - * */ @Method() onDidDismiss(): Promise { @@ -209,7 +214,6 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * Returns a promise that resolves when the alert will dismiss. - * */ @Method() onWillDismiss(): Promise { diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 5744aed888..e70d38ce01 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -797,7 +797,6 @@ export default class AlertExample extends Component { ); } } - ``` @@ -1090,10 +1089,10 @@ Dismiss the alert overlay after it has been presented. #### Parameters -| Name | Type | Description | -| ------ | --------------------- | ----------- | -| `data` | `any` | | -| `role` | `string \| undefined` | | +| Name | Type | Description | +| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | `any` | Any data to emit in the dismiss events. | +| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. | #### Returns diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md index 81baa70067..36377af781 100644 --- a/core/src/components/alert/usage/react.md +++ b/core/src/components/alert/usage/react.md @@ -267,5 +267,4 @@ export default class AlertExample extends Component { ); } } - ``` diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md index d444bc2f17..3042468459 100644 --- a/core/src/components/backdrop/readme.md +++ b/core/src/components/backdrop/readme.md @@ -135,7 +135,7 @@ export default Example; import { Component, Vue } from 'vue-property-decorator'; @Component() - export default class Menu extends Vue { + export default class Example extends Vue { backdropDismiss = false; showBackdrop = false; shouldPropagate = false; diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md index 36fd4237da..d2ea30800e 100644 --- a/core/src/components/backdrop/usage/vue.md +++ b/core/src/components/backdrop/usage/vue.md @@ -24,7 +24,7 @@ import { Component, Vue } from 'vue-property-decorator'; @Component() - export default class Menu extends Vue { + export default class Example extends Vue { backdropDismiss = false; showBackdrop = false; shouldPropagate = false; diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 19d5876fa4..139c3bd68f 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -71,18 +71,6 @@ } -// iOS Round Button -// -------------------------------------------------- - -:host(.button-round) { - --border-radius: #{$button-ios-round-border-radius}; - --padding-top: #{$button-ios-round-padding-top}; - --padding-start: #{$button-ios-round-padding-start}; - --padding-end: #{$button-ios-round-padding-end}; - --padding-bottom: #{$button-ios-round-padding-bottom}; -} - - // iOS Button Sizes // -------------------------------------------------- @@ -111,6 +99,18 @@ } +// iOS Round Button +// -------------------------------------------------- + +:host(.button-round) { + --border-radius: #{$button-ios-round-border-radius}; + --padding-top: #{$button-ios-round-padding-top}; + --padding-start: #{$button-ios-round-padding-start}; + --padding-end: #{$button-ios-round-padding-end}; + --padding-bottom: #{$button-ios-round-padding-bottom}; +} + + // iOS strong Button // -------------------------------------------------- diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html index ab15a70cd0..faf12bf832 100644 --- a/core/src/components/button/test/standalone/index.html +++ b/core/src/components/button/test/standalone/index.html @@ -24,6 +24,13 @@ Block Clear

+

Round button combinations

+

+ Round & Small + Round & Large + Round & Outline +

+

Colors

Primary diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss index f4bec1e7fd..4e2a85df91 100755 --- a/core/src/components/card/card.ios.scss +++ b/core/src/components/card/card.ios.scss @@ -13,7 +13,13 @@ transform: translateZ(0); + transition: transform 500ms $card-ios-transition-timing-function; + font-size: $card-ios-font-size; box-shadow: $card-ios-box-shadow; } + +:host(.activated) { + transform: #{$card-ios-transform-activated}; +} \ No newline at end of file diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index 27fb5a9e0b..9fc5f3b07e 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -32,3 +32,9 @@ $card-ios-font-size: 14px !default; /// @prop - Color of the card text $card-ios-text-color: $text-color-step-400 !default; + +/// @prop - Transition timing function of the card +$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default; + +/// @prop - Transform of the card on activate +$card-ios-transform-activated: scale3d(.97, .97, 1) !default; \ No newline at end of file diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index 6cbf8fc76e..50207bb83c 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -50,3 +50,54 @@ ::slotted(*) ion-list { @include margin(0); } + + +// Disabled Card +// -------------------------------------------------- + +:host(.card-disabled) { + cursor: default; + opacity: .3; + pointer-events: none; +} + + +// Native +// -------------------------------------------------- + +.card-native { + @include text-inherit(); + @include padding(0); + @include margin(0); + + width: 100%; + min-height: var(--min-height); + + transition: var(--transition); + + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + + outline: none; + + background: var(--background); +} + +.card-native::-moz-focus-inner { + border: 0; +} + +button, a { + cursor: pointer; + user-select: none; + + -webkit-user-drag: none; +} + +// Card Button Ripple effect +// -------------------------------------------------- + +ion-ripple-effect { + color: var(--ripple-color); +} \ No newline at end of file diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index a140e5e54e..adf532cc31 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -1,7 +1,7 @@ import { Component, ComponentInterface, Prop } from '@stencil/core'; -import { Color, Mode } from '../../interface'; -import { createColorClasses } from '../../utils/theme'; +import { Color, Mode, RouterDirection } from '../../interface'; +import { createColorClasses, openURL } from '../../utils/theme'; @Component({ tag: 'ion-card', @@ -13,6 +13,8 @@ import { createColorClasses } from '../../utils/theme'; }) export class Card implements ComponentInterface { + @Prop({ context: 'window' }) win!: Window; + /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -25,12 +27,72 @@ export class Card implements ComponentInterface { */ @Prop() mode!: Mode; + /** + * If `true`, a button tag will be rendered and the card will be tappable. + */ + @Prop() button = false; + + /** + * The type of the button. Only used when an `onclick` or `button` property is present. + */ + @Prop() type: 'submit' | 'reset' | 'button' = 'button'; + + /** + * If `true`, the user cannot interact with the card. + */ + @Prop() disabled = false; + + /** + * Contains a URL or a URL fragment that the hyperlink points to. + * If this property is set, an anchor tag will be rendered. + */ + @Prop() href?: string; + + /** + * When using a router, it specifies the transition direction when navigating to + * another page using `href`. + */ + @Prop() routerDirection: RouterDirection = 'forward'; + + private isClickable(): boolean { + return (this.href !== undefined || this.button); + } + hostData() { return { class: { + [`${this.mode}`]: true, + ...createColorClasses(this.color), - [`${this.mode}`]: true + 'card-disabled': this.disabled, + 'ion-activatable': this.isClickable() } }; } + + render() { + const clickable = this.isClickable(); + + if (!clickable) { + return [ + + ]; + } + + const { href, mode, win, routerDirection, type } = this; + const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any; + const attrs = TagType === 'button' ? { type } : { href }; + + return ( + openURL(win, href, ev, routerDirection)} + > + + {clickable && mode === 'md' && } + + ); + } } diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md index 4cf5f8d0f6..808c40ef77 100644 --- a/core/src/components/card/readme.md +++ b/core/src/components/card/readme.md @@ -182,10 +182,15 @@ export default Example; ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | +| `button` | `button` | If `true`, a button tag will be rendered and the card will be tappable. | `boolean` | `false` | +| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the card. | `boolean` | `false` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | +| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | ## CSS Custom Properties diff --git a/core/src/components/card/test/button/index.html b/core/src/components/card/test/button/index.html new file mode 100644 index 0000000000..abdc9a930a --- /dev/null +++ b/core/src/components/card/test/button/index.html @@ -0,0 +1,82 @@ + + + + + + Card - Basic + + + + + + + + + + + + + Card - Button + + + + + + + + + Subtitle + + + Button Card + + + + + This is content, inside of a card with a button attribute. + + + + + + + Anchor Card + + + + + This is content, inside of a card with a href attribute. + + + + +

+ +
+ + + + Subtitle + + + Title + + + + + This button should have a background. + + + + + + + + + + diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 794d928f4e..963ff58a6a 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -174,7 +174,7 @@ export default CheckboxExample; import { Component, Vue } from 'vue-property-decorator'; @Component() - export default class Menu extends Vue { + export default class Example extends Vue { form = [ { val: 'Pepperoni', isChecked: true }, { val: 'Sausage', isChecked: false }, diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md index 9cffcee32b..4465c8d655 100644 --- a/core/src/components/checkbox/usage/vue.md +++ b/core/src/components/checkbox/usage/vue.md @@ -29,7 +29,7 @@ import { Component, Vue } from 'vue-property-decorator'; @Component() - export default class Menu extends Vue { + export default class Example extends Vue { form = [ { val: 'Pepperoni', isChecked: true }, { val: 'Sausage', isChecked: false }, diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 513c88943b..2398933e70 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -169,12 +169,12 @@ export class Content implements ComponentInterface { } /** - * Returns the element where the actual scrolling takes places. - * This element is the one you could subscribe to `scroll` events or manually modify - * `scrollTop`, however, it's recommended to use the API provided by `ion-content`: + * Get the element where the actual scrolling takes place. + * This element can be used to subscribe to `scroll` events or manually modify + * `scrollTop`. However, it's recommended to use the API provided by `ion-content`: * - * Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events - * and scrollToPoint() to scroll the content into a certain point. + * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events + * and `scrollToPoint()` to scroll the content into a certain point. */ @Method() getScrollElement(): Promise { @@ -182,7 +182,9 @@ export class Content implements ComponentInterface { } /** - * Scroll to the top of the component + * Scroll to the top of the component. + * + * @param duration The amount of time to take scrolling to the top. Defaults to `0`. */ @Method() scrollToTop(duration = 0): Promise { @@ -190,7 +192,9 @@ export class Content implements ComponentInterface { } /** - * Scroll to the bottom of the component + * Scroll to the bottom of the component. + * + * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`. */ @Method() scrollToBottom(duration = 0): Promise { @@ -199,7 +203,11 @@ export class Content implements ComponentInterface { } /** - * Scroll by a specified X/Y distance in the component + * Scroll by a specified X/Y distance in the component. + * + * @param x The amount to scroll by on the horizontal axis. + * @param y The amount to scroll by on the vertical axis. + * @param duration The amount of time to take scrolling by that amount. */ @Method() scrollByPoint(x: number, y: number, duration: number): Promise { @@ -207,7 +215,11 @@ export class Content implements ComponentInterface { } /** - * Scroll to a specified X/Y location in the component + * Scroll to a specified X/Y location in the component. + * + * @param x The point to scroll to on the horizontal axis. + * @param y The point to scroll to on the vertical axis. + * @param duration The amount of time to take scrolling to that point. Defaults to `0`. */ @Method() async scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration = 0): Promise { diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index 403368ee4b..4102fd8a11 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -96,12 +96,12 @@ export default Example; ### `getScrollElement() => Promise` -Returns the element where the actual scrolling takes places. -This element is the one you could subscribe to `scroll` events or manually modify -`scrollTop`, however, it's recommended to use the API provided by `ion-content`: +Get the element where the actual scrolling takes place. +This element can be used to subscribe to `scroll` events or manually modify +`scrollTop`. However, it's recommended to use the API provided by `ion-content`: -Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events -and scrollToPoint() to scroll the content into a certain point. +i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events +and `scrollToPoint()` to scroll the content into a certain point. #### Returns @@ -111,15 +111,15 @@ Type: `Promise` ### `scrollByPoint(x: number, y: number, duration: number) => Promise` -Scroll by a specified X/Y distance in the component +Scroll by a specified X/Y distance in the component. #### Parameters -| Name | Type | Description | -| ---------- | -------- | ----------- | -| `x` | `number` | | -| `y` | `number` | | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | -------- | ---------------------------------------------------- | +| `x` | `number` | The amount to scroll by on the horizontal axis. | +| `y` | `number` | The amount to scroll by on the vertical axis. | +| `duration` | `number` | The amount of time to take scrolling by that amount. | #### Returns @@ -129,13 +129,13 @@ Type: `Promise` ### `scrollToBottom(duration?: number) => Promise` -Scroll to the bottom of the component +Scroll to the bottom of the component. #### Parameters -| Name | Type | Description | -| ---------- | -------- | ----------- | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | -------- | -------------------------------------------------------------------- | +| `duration` | `number` | The amount of time to take scrolling to the bottom. Defaults to `0`. | #### Returns @@ -145,15 +145,15 @@ Type: `Promise` ### `scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise` -Scroll to a specified X/Y location in the component +Scroll to a specified X/Y location in the component. #### Parameters -| Name | Type | Description | -| ---------- | ----------------------------- | ----------- | -| `x` | `null \| number \| undefined` | | -| `y` | `null \| number \| undefined` | | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | ----------------------------- | -------------------------------------------------------------------- | +| `x` | `null \| number \| undefined` | The point to scroll to on the horizontal axis. | +| `y` | `null \| number \| undefined` | The point to scroll to on the vertical axis. | +| `duration` | `number` | The amount of time to take scrolling to that point. Defaults to `0`. | #### Returns @@ -163,13 +163,13 @@ Type: `Promise` ### `scrollToTop(duration?: number) => Promise` -Scroll to the top of the component +Scroll to the top of the component. #### Parameters -| Name | Type | Description | -| ---------- | -------- | ----------- | -| `duration` | `number` | | +| Name | Type | Description | +| ---------- | -------- | ----------------------------------------------------------------- | +| `duration` | `number` | The amount of time to take scrolling to the top. Defaults to `0`. | #### Returns diff --git a/core/src/components/datetime/datetime-util.ts b/core/src/components/datetime/datetime-util.ts index c7a540e8e4..bd8ff7ab45 100644 --- a/core/src/components/datetime/datetime-util.ts +++ b/core/src/components/datetime/datetime-util.ts @@ -248,6 +248,17 @@ export function parseDate(val: string | undefined | null): DatetimeData | undefi * such as "01:47" */ export const getLocalDateTime = (dateString: any = ''): Date => { + /** + * If user passed in undefined + * or null, convert it to the + * empty string since the rest + * of this functions expects + * a string + */ + if (dateString === undefined || dateString === null) { + dateString = ''; + } + /** * Ensures that YYYY-MM-DD, YYYY-MM, * YYYY-DD, etc does not get affected diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index 72e34987ba..5debb76669 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -643,7 +643,7 @@ export default Example; import { Component, Vue } from 'vue-property-decorator'; @Component() - export default class Menu extends Vue { + export default class Example extends Vue { customYearValues = [2020, 2016, 2008, 2004, 2000, 1996]; customDayShortNames = [ diff --git a/core/src/components/datetime/test/datetime.spec.ts b/core/src/components/datetime/test/datetime.spec.ts index f099ae7ce4..6f0e21719f 100644 --- a/core/src/components/datetime/test/datetime.spec.ts +++ b/core/src/components/datetime/test/datetime.spec.ts @@ -1,4 +1,4 @@ -import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime } from '../datetime-util'; +import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime, renderDatetime } from '../datetime-util'; describe('Datetime', () => { describe('getDateValue()', () => { @@ -69,6 +69,17 @@ describe('Datetime', () => { expect(convertToLocal.toISOString()).toContain(test.expectedOutput); }); }); + + it('should default to today for null and undefined cases', () => { + const today = new Date(); + const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } ) + + const convertToLocalUndefined = getLocalDateTime(undefined); + expect(convertToLocalUndefined.toISOString()).toContain(todayString); + + const convertToLocalNull = getLocalDateTime(null); + expect(convertToLocalNull.toISOString()).toContain(todayString); + }); }); describe('daysInMonth()', () => { diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md index 15ba19be5e..3734c00fc4 100644 --- a/core/src/components/datetime/usage/vue.md +++ b/core/src/components/datetime/usage/vue.md @@ -83,7 +83,7 @@ import { Component, Vue } from 'vue-property-decorator'; @Component() - export default class Menu extends Vue { + export default class Example extends Vue { customYearValues = [2020, 2016, 2008, 2004, 2000, 1996]; customDayShortNames = [ diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index 2dbae897ae..e4f49a24c2 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -4,17 +4,6 @@ // -------------------------------------------------- :host { - --transition: background-color, opacity 100ms linear; - --ripple-color: currentColor; - --border-radius: #{$fab-border-radius}; - --border-width: 0; - --border-style: none; - --border-color: initial; - --padding-top: 0; - --padding-end: 0; - --padding-bottom: 0; - --padding-start: 0; - /** * @prop --background: Background of the button * @prop --background-activated: Background of the button when activated @@ -40,6 +29,17 @@ * @prop --padding-bottom: Padding bottom of the button * @prop --padding-start: Padding start of the button */ + --transition: background-color, opacity 100ms linear; + --ripple-color: currentColor; + --border-radius: #{$fab-border-radius}; + --border-width: 0; + --border-style: none; + --border-color: initial; + --padding-top: 0; + --padding-end: 0; + --padding-bottom: 0; + --padding-start: 0; + @include margin(0); display: block; diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx index 2ce5e14a48..d9eb983140 100644 --- a/core/src/components/fab-list/fab-list.tsx +++ b/core/src/components/fab-list/fab-list.tsx @@ -13,7 +13,7 @@ export class FabList implements ComponentInterface { @Element() el!: HTMLIonFabElement; /** - * If `true`, the fab list will be show all fab buttons in the list. + * If `true`, the fab list will show all fab buttons in the list. */ @Prop() activated = false; diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md index ec965456dd..5355c9441e 100644 --- a/core/src/components/fab-list/readme.md +++ b/core/src/components/fab-list/readme.md @@ -82,7 +82,7 @@ export default Example | Property | Attribute | Description | Type | Default | | ----------- | ----------- | ------------------------------------------------------------------- | --------------------------------------- | ---------- | -| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list. | `boolean` | `false` | +| `activated` | `activated` | If `true`, the fab list will show all fab buttons in the list. | `boolean` | `false` | | `side` | `side` | The side the fab list will show on relative to the main fab button. | `"bottom" \| "end" \| "start" \| "top"` | `'bottom'` | diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index 7ec8e97218..3397f0c534 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -68,7 +68,7 @@ export class Fab implements ComponentInterface { } /** - * Close an active FAB list container + * Close an active FAB list container. */ @Method() close() { diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md index a55f04b42c..1f6ed45fb3 100644 --- a/core/src/components/fab/readme.md +++ b/core/src/components/fab/readme.md @@ -288,7 +288,7 @@ export default Example; ### `close() => void` -Close an active FAB list container +Close an active FAB list container. #### Returns diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx index 06c52cace3..21d3a50506 100644 --- a/core/src/components/img/img.tsx +++ b/core/src/components/img/img.tsx @@ -35,6 +35,9 @@ export class Img implements ComponentInterface { } /** Emitted when the img src has been set */ + @Event() ionImgWillLoad!: EventEmitter; + + /** Emitted when the image has finished loading */ @Event() ionImgDidLoad!: EventEmitter; /** Emitted when the img fails to load */ @@ -70,6 +73,10 @@ export class Img implements ComponentInterface { private load() { this.loadError = this.onError; this.loadSrc = this.src; + this.ionImgWillLoad.emit(); + } + + private onLoad = () => { this.ionImgDidLoad.emit(); } @@ -98,6 +105,7 @@ export class Img implements ComponentInterface { src={this.loadSrc} alt={this.alt} decoding="async" + onLoad={this.onLoad} onError={this.loadError} /> ); diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md index 73909e6bdb..a9a28c16dc 100644 --- a/core/src/components/img/readme.md +++ b/core/src/components/img/readme.md @@ -79,10 +79,11 @@ export default Example ## Events -| Event | Description | Type | -| --------------- | ------------------------------------- | ------------------- | -| `ionError` | Emitted when the img fails to load | `CustomEvent` | -| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent` | +| Event | Description | Type | +| ---------------- | ------------------------------------------- | ------------------- | +| `ionError` | Emitted when the img fails to load | `CustomEvent` | +| `ionImgDidLoad` | Emitted when the image has finished loading | `CustomEvent` | +| `ionImgWillLoad` | Emitted when the img src has been set | `CustomEvent` | ---------------------------------------------- diff --git a/core/src/components/img/test/basic/index.html b/core/src/components/img/test/basic/index.html index 4ac6d576e3..71b054c6c4 100644 --- a/core/src/components/img/test/basic/index.html +++ b/core/src/components/img/test/basic/index.html @@ -67,6 +67,10 @@ +``` + +#### Updating Data + +```html + ``` @@ -299,14 +518,20 @@ export default Example ### `complete(listOrReorder?: boolean | any[] | undefined) => Promise` -This method must be called once the `ionItemReorder` event is handled in order -to complete the reorder operation. +Completes the reorder operation. Must be called by the `ionItemReorder` event. + +If a list of items is passed, the list will be reordered and returned in the +proper order. + +If no parameters are passed or if `true` is passed in, the reorder will complete +and the item will remain in the position it was dragged to. If `false` is passed, +the reorder will complete and the item will bounce back to its original position. #### Parameters -| Name | Type | Description | -| --------------- | ------------------------------- | ----------- | -| `listOrReorder` | `any[] \| boolean \| undefined` | | +| Name | Type | Description | +| --------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `listOrReorder` | `any[] \| boolean \| undefined` | A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item. | #### Returns diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index 905781fa8f..628578b244 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -90,8 +90,17 @@ export class ReorderGroup implements ComponentInterface { } /** - * This method must be called once the `ionItemReorder` event is handled in order - * to complete the reorder operation. + * Completes the reorder operation. Must be called by the `ionItemReorder` event. + * + * If a list of items is passed, the list will be reordered and returned in the + * proper order. + * + * If no parameters are passed or if `true` is passed in, the reorder will complete + * and the item will remain in the position it was dragged to. If `false` is passed, + * the reorder will complete and the item will bounce back to its original position. + * + * @param listOrReorder A list of items to be sorted and returned in the new order or a + * boolean of whether or not the reorder should reposition the item. */ @Method() complete(listOrReorder?: boolean | any[]): Promise { @@ -219,7 +228,7 @@ export class ReorderGroup implements ComponentInterface { const toIndex = this.lastToIndex; const fromIndex = indexForItem(selectedItemEl); - if (listOrReorder === true) { + if (!listOrReorder || listOrReorder === true) { const ref = (fromIndex < toIndex) ? children[toIndex + 1] : children[toIndex]; diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html index 98571ec95f..fcc74f4a87 100644 --- a/core/src/components/reorder-group/test/basic/index.html +++ b/core/src/components/reorder-group/test/basic/index.html @@ -26,7 +26,6 @@ - Item 1 (default ion-reorder) @@ -126,11 +125,15 @@ function openAlert() { alert('click'); } + function toggleEdit() { const reorderGroup = document.getElementById('reorder'); reorderGroup.disabled = !reorderGroup.disabled; + reorderGroup.addEventListener('ionItemReorder', ({detail}) => { - detail.complete(true); + console.log('Dragged from index', detail.from, 'to', detail.to); + + detail.complete(); }); } diff --git a/core/src/components/reorder-group/test/data/index.html b/core/src/components/reorder-group/test/data/index.html new file mode 100644 index 0000000000..1484dd0290 --- /dev/null +++ b/core/src/components/reorder-group/test/data/index.html @@ -0,0 +1,62 @@ + + + + + + Reorder - Data + + + + + + + + + + + + + Reorder - Data + + + + + + + + + + + + + + + + + diff --git a/core/src/components/reorder-group/usage/angular.md b/core/src/components/reorder-group/usage/angular.md index 2b5304a755..de82bd6576 100644 --- a/core/src/components/reorder-group/usage/angular.md +++ b/core/src/components/reorder-group/usage/angular.md @@ -1,49 +1,135 @@ ```html - - - + + + + + + Item 1 + + + - - - Item 1 - - - + + + Item 2 + + + - - - Item 2 (default ion-reorder slot="start") - - - + + + + + Item 3 + + - - - Item 3 (custom ion-reorder) - - - - - + + + + Item 4 + + - - - Item 4 (custom ion-reorder slot="start") - - - - - + + + + Item 5 + + + + + - - - - Item 5 (the whole item can be dragged) - - - + + + Item 6 + + + + + - - - + + + + + Item 7 + + + + + + + + Item 8 + + + + +``` + +```javascript +import { Component, ViewChild } from '@angular/core'; +import { IonReorderGroup } from '@ionic/angular'; + +@Component({ + selector: 'reorder-group-example', + templateUrl: 'reorder-group-example.html', + styleUrls: ['./reorder-group-example.css'] +}) +export class ReorderGroupExample { + @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; + + constructor() {} + + doReorder(ev: any) => { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + ev.detail.complete(); + }); + + toggleReorderGroup() { + this.reorderGroup.disabled = !this.reorderGroup.disabled; + } +} +``` + +#### Updating Data + +```javascript +import { Component, ViewChild } from '@angular/core'; +import { IonReorderGroup } from '@ionic/angular'; + +@Component({ + selector: 'reorder-group-example', + templateUrl: 'reorder-group-example.html', + styleUrls: ['./reorder-group-example.css'] +}) +export class ReorderGroupExample { + items = [1, 2, 3, 4, 5]; + + @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; + + constructor() {} + + doReorder(ev: any) => { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', this.items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + this.items = ev.detail.complete(this.items); + + // After complete is called the items will be in the new order + console.log('After complete', this.items); + }); +} ``` diff --git a/core/src/components/reorder-group/usage/javascript.md b/core/src/components/reorder-group/usage/javascript.md index 7056fb390a..a51fe347dd 100644 --- a/core/src/components/reorder-group/usage/javascript.md +++ b/core/src/components/reorder-group/usage/javascript.md @@ -1,60 +1,106 @@ ```html - - - + + + + + + Item 1 + + + - - - Item 1 - - - + + + Item 2 + + + - - - Item 2 (default ion-reorder slot="start") - - - + + + + + Item 3 + + - - - Item 3 (custom ion-reorder) - - - - - + + + + Item 4 + + - - - Item 4 (custom ion-reorder slot="start") - - - - - + + + + Item 5 + + + + + - - - - Item 5 (the whole item can be dragged) - - - + + + Item 6 + + + + + - - - + + + + + Item 7 + + + + + + + + Item 8 + + + + ``` ```javascript const reorderGroup = document.querySelector('ion-reorder-group'); -reorderGroup.addEventListener('ionItemReorder', ({detail}) => { - // finishing the reorder, true means ion-reorder-group with reorder the DOM - detail.complete(true); - // or: - // reorderGroup.complete(true) +reorderGroup.addEventListener('ionItemReorder', ({detail}) => { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', detail.from, 'to', detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + detail.complete(); }); -``` \ No newline at end of file +``` + +#### Updating Data + +```javascript +const items = [1, 2, 3, 4, 5]; +const reorderGroup = document.querySelector('ion-reorder-group'); + +reorderGroup.addEventListener('ionItemReorder', ({detail}) => { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + items = detail.complete(items); + + // After complete is called the items will be in the new order + console.log('After complete', items); +}); +``` diff --git a/core/src/components/reorder-group/usage/react.md b/core/src/components/reorder-group/usage/react.md index 4dbe998621..2f8f1f6cf8 100644 --- a/core/src/components/reorder-group/usage/react.md +++ b/core/src/components/reorder-group/usage/react.md @@ -1,57 +1,112 @@ ```tsx import React from 'react'; -import { IonContent, IonList, IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react'; +import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react'; + +function doReorder(event: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + event.detail.complete(); +} const Example: React.SFC<{}> = () => ( + <> + {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/} + + {/*-- Default reorder icon, end aligned items --*/} + + + Item 1 + + + - - - + + + Item 2 + + + - - - Item 1 - - - + {/*-- Default reorder icon, start aligned items --*/} + + + + Item 3 + + - - - Item 2 (default ion-reorder slot="start") - - - + + + + Item 4 + + - - - Item 3 (custom ion-reorder) - - - - - - - - - Item 4 (custom ion-reorder slot="start") - - - - - - - - - - Item 5 (the whole item can be dragged) - - + {/*-- Custom reorder icon end items --*/} + + + Item 5 + + + + - - - + + + Item 6 + + + + + + + {/*-- Items wrapped in a reorder, entire item can be dragged --*/} + + + + Item 7 + + + + + + + + Item 8 + + + + + + } ); export default Example +``` + +#### Updating Data + +```tsx +const items = [1, 2, 3, 4, 5]; + +function doReorder(event: CustomEvent) { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', this.items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + this.items = event.detail.complete(this.items); + + // After complete is called the items will be in the new order + console.log('After complete', this.items); +} +``` diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md index 357f9dc35f..bcf11107c2 100644 --- a/core/src/components/reorder-group/usage/vue.md +++ b/core/src/components/reorder-group/usage/vue.md @@ -1,51 +1,118 @@ ```html + + +``` + +#### Updating Data + +```html + ``` diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md index bf31a45a22..7e9a5846ad 100644 --- a/core/src/components/reorder/readme.md +++ b/core/src/components/reorder/readme.md @@ -1,19 +1,239 @@ # ion-reorder -Reorder is a component that allows an item to be dragged to change its order. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface. +Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface. -`ion-reorder` is the anchor users will use to drag and drop items inside the `ion-reorder-group`. +`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation. + + + + + +## Usage + +### Angular / javascript ```html + - Item + Item 1 + + + + Item 2 + + + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + + + Item 6 + + + + + + + + + + + Item 7 + + + + + + + + Item 8 + + + +``` + + +### React + +```tsx +import React from 'react'; + +import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react'; + +const Example: React.SFC<{}> = () => ( + <> + {/*-- Default reorder icon, end aligned items --*/} + + + Item 1 + + + + + + + Item 2 + + + + + {/*-- Default reorder icon, start aligned items --*/} + + + + Item 3 + + + + + + + Item 4 + + + + {/*-- Custom reorder icon end items --*/} + + + Item 5 + + + + + + + + + Item 6 + + + + + + + {/*-- Items wrapped in a reorder, entire item can be dragged --*/} + + + + Item 7 + + + + + + + + Item 8 + + + + +); + +export default Example; +``` + + +### Vue + +```html + ``` - ---------------------------------------------- diff --git a/core/src/components/reorder/usage/angular.md b/core/src/components/reorder/usage/angular.md new file mode 100644 index 0000000000..2163e3c756 --- /dev/null +++ b/core/src/components/reorder/usage/angular.md @@ -0,0 +1,68 @@ + +```html + + + + Item 1 + + + + + + + Item 2 + + + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + + + Item 6 + + + + + + + + + + + Item 7 + + + + + + + + Item 8 + + + +``` \ No newline at end of file diff --git a/core/src/components/reorder/usage/javascript.md b/core/src/components/reorder/usage/javascript.md new file mode 100644 index 0000000000..2163e3c756 --- /dev/null +++ b/core/src/components/reorder/usage/javascript.md @@ -0,0 +1,68 @@ + +```html + + + + Item 1 + + + + + + + Item 2 + + + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + + + Item 6 + + + + + + + + + + + Item 7 + + + + + + + + Item 8 + + + +``` \ No newline at end of file diff --git a/core/src/components/reorder/usage/react.md b/core/src/components/reorder/usage/react.md new file mode 100644 index 0000000000..a0cf28c30a --- /dev/null +++ b/core/src/components/reorder/usage/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; + +import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react'; + +const Example: React.SFC<{}> = () => ( + <> + {/*-- Default reorder icon, end aligned items --*/} + + + Item 1 + + + + + + + Item 2 + + + + + {/*-- Default reorder icon, start aligned items --*/} + + + + Item 3 + + + + + + + Item 4 + + + + {/*-- Custom reorder icon end items --*/} + + + Item 5 + + + + + + + + + Item 6 + + + + + + + {/*-- Items wrapped in a reorder, entire item can be dragged --*/} + + + + Item 7 + + + + + + + + Item 8 + + + + +); + +export default Example; +``` diff --git a/core/src/components/reorder/usage/vue.md b/core/src/components/reorder/usage/vue.md new file mode 100644 index 0000000000..49b0fdcbdf --- /dev/null +++ b/core/src/components/reorder/usage/vue.md @@ -0,0 +1,69 @@ +```html + +``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md index 1ef5e31ac1..213131b001 100644 --- a/core/src/components/ripple-effect/readme.md +++ b/core/src/components/ripple-effect/readme.md @@ -33,16 +33,16 @@ The ripple effect component adds the [Material Design ink ripple interaction eff ## Methods -### `addRipple(pageX: number, pageY: number) => Promise<() => void>` +### `addRipple(x: number, y: number) => Promise<() => void>` -Adds the ripple effect to the parent element +Adds the ripple effect to the parent element. #### Parameters -| Name | Type | Description | -| ------- | -------- | ----------- | -| `pageX` | `number` | | -| `pageY` | `number` | | +| Name | Type | Description | +| ---- | -------- | ----------------------------------------------------------- | +| `x` | `number` | The horizontal coordinate of where the ripple should start. | +| `y` | `number` | The vertical coordinate of where the ripple should start. | #### Returns diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index 066967c45b..9806ab909f 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -27,10 +27,13 @@ export class RippleEffect implements ComponentInterface { @Prop() type: 'bounded' | 'unbounded' = 'bounded'; /** - * Adds the ripple effect to the parent element + * Adds the ripple effect to the parent element. + * + * @param x The horizontal coordinate of where the ripple should start. + * @param y The vertical coordinate of where the ripple should start. */ @Method() - async addRipple(pageX: number, pageY: number) { + async addRipple(x: number, y: number) { return new Promise<() => void>(resolve => { this.queue.read(() => { const rect = this.el.getBoundingClientRect(); @@ -41,14 +44,14 @@ export class RippleEffect implements ComponentInterface { const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING; const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE); const finalScale = maxRadius / initialSize; - let posX = pageX - rect.left; - let posY = pageY - rect.top; + let posX = x - rect.left; + let posY = y - rect.top; if (this.unbounded) { posX = width * 0.5; posY = height * 0.5; } - const x = posX - initialSize * 0.5; - const y = posY - initialSize * 0.5; + const styleX = posX - initialSize * 0.5; + const styleY = posY - initialSize * 0.5; const moveX = width * 0.5 - posX; const moveY = height * 0.5 - posY; @@ -56,8 +59,8 @@ export class RippleEffect implements ComponentInterface { const div = this.win.document.createElement('div'); div.classList.add('ripple-effect'); const style = div.style; - style.top = y + 'px'; - style.left = x + 'px'; + style.top = styleY + 'px'; + style.left = styleX + 'px'; style.width = style.height = initialSize + 'px'; style.setProperty('--final-scale', `${finalScale}`); style.setProperty('--translate-end', `${moveX}px, ${moveY}px`); diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md index 1e4d7cae91..129a974fda 100644 --- a/core/src/components/router/readme.md +++ b/core/src/components/router/readme.md @@ -85,10 +85,10 @@ Navigate to the specified URL. #### Parameters -| Name | Type | Description | -| ----------- | ------------------------------- | ----------- | -| `url` | `string` | | -| `direction` | `"back" \| "forward" \| "root"` | | +| Name | Type | Description | +| ----------- | ------------------------------- | -------------------------------------------------------- | +| `url` | `string` | The url to navigate to. | +| `direction` | `"back" \| "forward" \| "root"` | The direction of the animation. Defaults to `"forward"`. | #### Returns diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index c28fada1fd..454c7a38f6 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -88,6 +88,9 @@ export class Router implements ComponentInterface { /** * Navigate to the specified URL. + * + * @param url The url to navigate to. + * @param direction The direction of the animation. Defaults to `"forward"`. */ @Method() push(url: string, direction: RouterDirection = 'forward') { diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index c86beb046c..a08c430ca6 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -26,6 +26,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i + + + @@ -60,6 +63,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i + + + @@ -100,6 +106,9 @@ const Example: React.SFC<{}> = () => ( {/*-- Searchbar with telephone type --*/} + {/*-- Searchbar disabled --*/} + + {/*-- Searchbar with a cancel button and custom cancel button text --*/} @@ -139,6 +148,9 @@ export default Example; + + + @@ -172,6 +184,7 @@ export default Example; | `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss index c6ae9ee4d9..d3e029bc4c 100644 --- a/core/src/components/searchbar/searchbar.scss +++ b/core/src/components/searchbar/searchbar.scss @@ -143,3 +143,9 @@ :host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button { display: block; } + +:host(.searchbar-disabled) { + cursor: default; + opacity: .4; + pointer-events: none; +} diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index b85569ed9d..22c11c9d82 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -79,6 +79,11 @@ export class Searchbar implements ComponentInterface { this.ionChange = debounceEvent(this.ionChange, this.debounce); } + /** + * If `true`, the user cannot interact with the input. + */ + @Prop() disabled = false; + /** * Set the input's placeholder. * `placeholder` can accept either plaintext or HTML as a string. @@ -353,16 +358,22 @@ export class Searchbar implements ComponentInterface { return this.value || ''; } + private hasValue(): boolean { + return this.getValue() !== ''; + } + hostData() { const animated = this.animated && this.config.getBoolean('animated', true); return { + 'aria-disabled': this.disabled ? 'true' : null, class: { ...createColorClasses(this.color), [`${this.mode}`]: true, 'searchbar-animated': animated, + 'searchbar-disabled': this.disabled, 'searchbar-no-animate': animated && this.noAnimate, - 'searchbar-has-value': (this.getValue() !== ''), + 'searchbar-has-value': this.hasValue(), 'searchbar-left-aligned': this.shouldAlignLeft, 'searchbar-has-focus': this.focused } @@ -393,6 +404,7 @@ export class Searchbar implements ComponentInterface { return [
this.nativeInput = el} class="searchbar-input" onInput={this.onInput} diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html index 49cc0501f2..12e54d9be6 100644 --- a/core/src/components/searchbar/test/basic/index.html +++ b/core/src/components/searchbar/test/basic/index.html @@ -29,6 +29,10 @@ +
Search - Disabled
+ + +
Search - Danger
@@ -82,6 +86,10 @@ Toggle Attribute
+
+ Toggle disabled +
+