From 982dc853befe8ccf54163a0b145e563da06f5dc1 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 5 Apr 2022 12:12:13 -0400 Subject: [PATCH 1/8] fix(datetime): warn when parsing an invalid date value (#25049) --- core/src/components/datetime/datetime.tsx | 24 ++++++++++++++--------- core/src/utils/logging/index.ts | 9 +++++++++ 2 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 core/src/utils/logging/index.ts diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index b4c38cb95e..396725828f 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core'; +import { printIonWarning } from '@utils/logging'; import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons'; import { getIonMode } from '../../global/ionic-global'; @@ -298,15 +299,20 @@ export class Datetime implements ComponentInterface { * This allows us to update the current value's date/time display without * refocusing or shifting the user's display (leaves the user in place). */ - const { month, day, year, hour, minute } = parseDate(this.value); - this.activePartsClone = { - ...this.activeParts, - month, - day, - year, - hour, - minute, - }; + const valueDateParts = parseDate(this.value); + if (valueDateParts) { + const { month, day, year, hour, minute } = valueDateParts; + this.activePartsClone = { + ...this.activeParts, + month, + day, + year, + hour, + minute, + }; + } else { + printIonWarning(`Unable to parse date string: ${this.value}. Please provide a valid ISO 8601 datetime string.`); + } } this.emitStyle(); diff --git a/core/src/utils/logging/index.ts b/core/src/utils/logging/index.ts new file mode 100644 index 0000000000..ebfe9e2e5f --- /dev/null +++ b/core/src/utils/logging/index.ts @@ -0,0 +1,9 @@ +/** + * Logs a warning to the console with an Ionic prefix + * to indicate the library that is warning the developer. + * + * @param message - The string message to be logged to the console. + */ +export const printIonWarning = (message: string) => { + return console.warn(`[Ionic Warning]: ${message}`); +}; From eea25d091d7eb319d6ec1de8b793881d3a10949b Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 5 Apr 2022 12:44:45 -0400 Subject: [PATCH 2/8] fix(angular): item styling when control has value (#24932) Resolves #23809 --- .../control-value-accessors/value-accessor.ts | 21 ++++++++------- angular/test/test-app/e2e/src/modal.spec.ts | 27 ++++++++++++++++++- .../modal-example.component.html | 10 +++++++ .../modal-example/modal-example.component.ts | 5 ++++ 4 files changed, 52 insertions(+), 11 deletions(-) diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts index daa4a72685..615d736828 100644 --- a/angular/src/directives/control-value-accessors/value-accessor.ts +++ b/angular/src/directives/control-value-accessors/value-accessor.ts @@ -110,13 +110,17 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes export const setIonicClasses = (element: ElementRef): void => { raf(() => { - const input = element.nativeElement as HTMLElement; + const input = element.nativeElement as HTMLInputElement; + const hasValue = input.value != null && input.value.toString().length > 0; const classes = getClasses(input); setClasses(input, classes); - const item = input.closest('ion-item'); if (item) { - setClasses(item, classes); + if (hasValue) { + setClasses(item, [...classes, 'item-has-value']); + } else { + setClasses(item, classes); + } } }); }; @@ -127,7 +131,7 @@ const getClasses = (element: HTMLElement) => { for (let i = 0; i < classList.length; i++) { const item = classList.item(i); if (item !== null && startsWith(item, 'ng-')) { - classes.push(`ion-${item.substr(3)}`); + classes.push(`ion-${item.substring(3)}`); } } return classes; @@ -135,13 +139,10 @@ const getClasses = (element: HTMLElement) => { const setClasses = (element: HTMLElement, classes: string[]) => { const classList = element.classList; - ['ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine'].forEach((c) => - classList.remove(c) - ); - - classes.forEach((c) => classList.add(c)); + classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine'); + classList.add(...classes); }; const startsWith = (input: string, search: string): boolean => { - return input.substr(0, search.length) === search; + return input.substring(0, search.length) === search; }; diff --git a/angular/test/test-app/e2e/src/modal.spec.ts b/angular/test/test-app/e2e/src/modal.spec.ts index b2854cc05c..cb937fcca6 100644 --- a/angular/test/test-app/e2e/src/modal.spec.ts +++ b/angular/test/test-app/e2e/src/modal.spec.ts @@ -43,7 +43,6 @@ describe('Modals', () => { }); - describe('Modals: Inline', () => { beforeEach(() => { cy.visit('/modal-inline'); @@ -77,3 +76,29 @@ describe('Modals: Inline', () => { cy.get('ion-modal').children('.ion-page').should('not.exist'); }) }); + +describe('when in a modal', () => { + + beforeEach(() => { + cy.visit('/modals'); + cy.get('#action-button').click(); + cy.get('#close-modal').click(); + cy.get('#action-button').click(); + }); + + it('should render ion-item item-has-value class when control value is set', () => { + cy.get('[formControlName="select"]').invoke('attr', 'value', 0); + cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value'); + }); + + it('should not render ion-item item-has-value class when control value is undefined', () => { + cy.get('[formControlName="select"]').invoke('attr', 'value', undefined); + cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value'); + }); + + it('should not render ion-item item-has-value class when control value is null', () => { + cy.get('[formControlName="select"]').invoke('attr', 'value', null); + cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value'); + }); + +}); diff --git a/angular/test/test-app/src/app/modal-example/modal-example.component.html b/angular/test/test-app/src/app/modal-example/modal-example.component.html index 6562262ede..513f7ad889 100644 --- a/angular/test/test-app/src/app/modal-example/modal-example.component.html +++ b/angular/test/test-app/src/app/modal-example/modal-example.component.html @@ -22,4 +22,14 @@ Push page Pop page

+ +
+ + Floating Label + + Option 0 + Option 1 + + +
diff --git a/angular/test/test-app/src/app/modal-example/modal-example.component.ts b/angular/test/test-app/src/app/modal-example/modal-example.component.ts index 363e0db61e..a9640244c8 100644 --- a/angular/test/test-app/src/app/modal-example/modal-example.component.ts +++ b/angular/test/test-app/src/app/modal-example/modal-example.component.ts @@ -1,4 +1,5 @@ import { Component, Input, NgZone, OnInit, Optional } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular'; @Component({ @@ -9,6 +10,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte @Input() value: string; + form = new FormGroup({ + select: new FormControl([]) + }); + valueFromParams: string; onInit = 0; willEnter = 0; From 0dd0646e9d887f289d5e1953d9c188e670cdec46 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 6 Apr 2022 10:40:01 -0400 Subject: [PATCH 3/8] chore(ci): ensure that the latest commit is pulled when checking out (#25063) --- .github/workflows/actions/build-core/action.yml | 3 +++ .github/workflows/build.yml | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml index 4d711dd0c7..6b7647160b 100644 --- a/.github/workflows/actions/build-core/action.yml +++ b/.github/workflows/actions/build-core/action.yml @@ -4,6 +4,9 @@ runs: using: 'composite' steps: - uses: actions/checkout@v2 + with: + # Checkout the latest commit in this branch + ref: ${{ github.event.pull_request.head.sha }} - uses: actions/setup-node@v1 with: node-version: 15.x diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e20d6c76d1..d8894de7a8 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -9,6 +9,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 + - uses: actions/checkout@v2 + with: + # Checkout the latest commit in this branch + ref: ${{ github.event.pull_request.head.sha }} - uses: ./.github/workflows/actions/build-core test-core-clean-build: From 333051cfbba2d48e6647fdc1d9b8ff8fa548036e Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 6 Apr 2022 19:04:14 +0000 Subject: [PATCH 4/8] v6.0.15 --- CHANGELOG.md | 15 +++++++++++++++ angular/CHANGELOG.md | 12 ++++++++++++ angular/package-lock.json | 2 +- angular/package.json | 4 ++-- core/CHANGELOG.md | 13 +++++++++++++ core/package-lock.json | 2 +- core/package.json | 2 +- docs/CHANGELOG.md | 8 ++++++++ docs/package.json | 2 +- lerna.json | 2 +- packages/angular-server/CHANGELOG.md | 8 ++++++++ packages/angular-server/package-lock.json | 2 +- packages/angular-server/package.json | 4 ++-- packages/react-router/CHANGELOG.md | 8 ++++++++ packages/react-router/package-lock.json | 2 +- packages/react-router/package.json | 4 ++-- packages/react/CHANGELOG.md | 8 ++++++++ packages/react/package-lock.json | 2 +- packages/react/package.json | 4 ++-- packages/vue-router/CHANGELOG.md | 8 ++++++++ packages/vue-router/package-lock.json | 2 +- packages/vue-router/package.json | 4 ++-- packages/vue/CHANGELOG.md | 8 ++++++++ packages/vue/package-lock.json | 2 +- packages/vue/package.json | 4 ++-- 25 files changed, 110 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d97cc5f979..5975af68bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic-framework/compare/v6.0.14...v6.0.15) (2022-04-06) + + +### Bug Fixes + +* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic-framework/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic-framework/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic-framework/issues/23809) +* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic-framework/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic-framework/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic-framework/issues/24413) +* **datetime:** warn when parsing an invalid date value ([#25049](https://github.com/ionic-team/ionic-framework/issues/25049)) ([982dc85](https://github.com/ionic-team/ionic-framework/commit/982dc853befe8ccf54163a0b145e563da06f5dc1)) +* **picker-column:** column renders correctly with selected value ([#24988](https://github.com/ionic-team/ionic-framework/issues/24988)) ([8318659](https://github.com/ionic-team/ionic-framework/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57)), closes [#17664](https://github.com/ionic-team/ionic-framework/issues/17664) +* **popover:** allow arrow on desktop ([#25056](https://github.com/ionic-team/ionic-framework/issues/25056)) ([bcd00c7](https://github.com/ionic-team/ionic-framework/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215)) + + + + + ## [6.0.14](https://github.com/ionic-team/ionic-framework/compare/v6.0.13...v6.0.14) (2022-03-30) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index e1157487fe..71cee8f371 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + + +### Bug Fixes + +* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic/issues/23809) +* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic/issues/24413) + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/angular diff --git a/angular/package-lock.json b/angular/package-lock.json index 8dec44faf2..30768cd1f1 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/angular/package.json b/angular/package.json index 3e26d67fe4..e589be58b6 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "6.0.14", + "version": "6.0.15", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -44,7 +44,7 @@ "validate": "npm i && npm run lint && npm run test && npm run build" }, "dependencies": { - "@ionic/core": "^6.0.14", + "@ionic/core": "^6.0.15", "jsonc-parser": "^3.0.0", "tslib": "^2.0.0" }, diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index be945c9260..502c149c3a 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + + +### Bug Fixes + +* **datetime:** warn when parsing an invalid date value ([#25049](https://github.com/ionic-team/ionic/issues/25049)) ([982dc85](https://github.com/ionic-team/ionic/commit/982dc853befe8ccf54163a0b145e563da06f5dc1)) +* **picker-column:** column renders correctly with selected value ([#24988](https://github.com/ionic-team/ionic/issues/24988)) ([8318659](https://github.com/ionic-team/ionic/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57)), closes [#17664](https://github.com/ionic-team/ionic/issues/17664) +* **popover:** allow arrow on desktop ([#25056](https://github.com/ionic-team/ionic/issues/25056)) ([bcd00c7](https://github.com/ionic-team/ionic/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215)) + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/core diff --git a/core/package-lock.json b/core/package-lock.json index 3a57a3a199..8040284519 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/core/package.json b/core/package.json index fe11654474..cac7aae742 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "6.0.14", + "version": "6.0.15", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 38c6f1670b..8371beca9c 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic-docs/compare/v6.0.14...v6.0.15) (2022-04-06) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [6.0.14](https://github.com/ionic-team/ionic-docs/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/docs diff --git a/docs/package.json b/docs/package.json index 8ca425ab0e..c99472e86f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "6.0.14", + "version": "6.0.15", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/lerna.json b/lerna.json index 64a1b6b2be..61835b9711 100644 --- a/lerna.json +++ b/lerna.json @@ -5,5 +5,5 @@ "angular", "packages/*" ], - "version": "6.0.14" + "version": "6.0.15" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 7d4a8aec90..2d7e4a144f 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index a0846be8e9..1e2c733062 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index 4f00ed6b70..a56c677a63 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "6.0.14", + "version": "6.0.15", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -56,7 +56,7 @@ "@angular/platform-browser": "^12.0.0", "@angular/platform-browser-dynamic": "^12.2.10", "@angular/platform-server": "^12.0.0", - "@ionic/core": "^6.0.14", + "@ionic/core": "^6.0.15", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@typescript-eslint/eslint-plugin": "^5.2.0", diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 100829c79d..1329cfece2 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index c326678258..02452ef492 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 6e4bf43c2d..504213d7ac 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "6.0.14", + "version": "6.0.15", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -37,7 +37,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^6.0.14", + "@ionic/react": "^6.0.15", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 7fb332f50a..bc83f8b77a 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + +**Note:** Version bump only for package @ionic/react + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index dafc3cc155..935552b4cd 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/packages/react/package.json b/packages/react/package.json index f112e155a9..634f9de459 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "6.0.14", + "version": "6.0.15", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -41,7 +41,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^6.0.14", + "@ionic/core": "^6.0.15", "ionicons": "^6.0.0", "tslib": "*" }, diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 49f5af0f65..5b7322534f 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index fa62dc9452..7921883702 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index 1a94b920e9..43f4f9d7fd 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "6.0.14", + "version": "6.0.15", "description": "Vue Router integration for @ionic/vue", "scripts": { "prepublishOnly": "npm run build", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^6.0.14" + "@ionic/vue": "^6.0.15" }, "devDependencies": { "@types/jest": "^26.0.13", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 0e8abc0bd8..bbb9924e14 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [6.0.14](https://github.com/ionic-team/ionic/compare/v6.0.13...v6.0.14) (2022-03-30) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index fbc6bcc43e..642113afd0 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "6.0.14", + "version": "6.0.15", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/packages/vue/package.json b/packages/vue/package.json index bca68f4fe4..0ca0adefa7 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "6.0.14", + "version": "6.0.15", "description": "Vue specific wrapper for @ionic/core", "scripts": { "prepublishOnly": "npm run build", @@ -60,7 +60,7 @@ "vue-router": "^4.0.0-rc.4" }, "dependencies": { - "@ionic/core": "^6.0.14", + "@ionic/core": "^6.0.15", "ionicons": "^6.0.0" }, "vetur": { From 0fdda21f5b230304cea68f48c25338bafb54039a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Apr 2022 10:09:14 -0400 Subject: [PATCH 5/8] chore(ci): fix workflow for build (#25072) --- .github/workflows/build.yml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index d8894de7a8..c1194c6998 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -9,10 +9,9 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: actions/checkout@v2 - with: - # Checkout the latest commit in this branch - ref: ${{ github.event.pull_request.head.sha }} + with: + # Checkout the latest commit in this branch + ref: ${{ github.event.pull_request.head.sha }} - uses: ./.github/workflows/actions/build-core test-core-clean-build: From 1c26e9b9b0fc45a8691e972fe17a168f89a27a79 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Apr 2022 11:57:15 -0400 Subject: [PATCH 6/8] fix(angular): button components now route correctly without reload (#25071) --- .../navigation/router-link-delegate.ts | 61 ++++++++++++++++++- angular/src/index.ts | 6 +- angular/src/ionic-module.ts | 6 +- 3 files changed, 68 insertions(+), 5 deletions(-) diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts index 31bcf9c8e3..40a2a395a8 100644 --- a/angular/src/directives/navigation/router-link-delegate.ts +++ b/angular/src/directives/navigation/router-link-delegate.ts @@ -12,7 +12,7 @@ import { NavController } from '../../providers/nav-controller'; * animation so that the routing integration will transition correctly. */ @Directive({ - selector: '[routerLink]', + selector: ':not(a):not(area)[routerLink]', }) export class RouterLinkDelegateDirective implements OnInit, OnChanges { @Input() @@ -37,9 +37,56 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges { this.updateTargetUrlAndHref(); } - @HostListener('click') - onClick(): void { + private updateTargetUrlAndHref() { + if (this.routerLink?.urlTree) { + const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree)); + this.elementRef.nativeElement.href = href; + } + } + + /** + * @internal + */ + @HostListener('click', ['$event']) + onClick(ev: UIEvent): void { this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation); + + /** + * This prevents the browser from + * performing a page reload when pressing + * an Ionic component with routerLink. + * The page reload interferes with routing + * and causes ion-back-button to disappear + * since the local history is wiped on reload. + */ + ev.preventDefault(); + } +} + +@Directive({ + selector: 'a[routerLink],area[routerLink]', +}) +export class RouterLinkWithHrefDelegateDirective implements OnInit, OnChanges { + @Input() + routerDirection: RouterDirection = 'forward'; + + @Input() + routerAnimation?: AnimationBuilder; + + constructor( + private locationStrategy: LocationStrategy, + private navCtrl: NavController, + private elementRef: ElementRef, + private router: Router, + @Optional() private routerLink?: RouterLink + ) {} + + ngOnInit(): void { + this.updateTargetUrlAndHref(); + } + + ngOnChanges(): void { + this.updateTargetUrlAndHref(); } private updateTargetUrlAndHref() { @@ -48,4 +95,12 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges { this.elementRef.nativeElement.href = href; } } + + /** + * @internal + */ + @HostListener('click') + onClick(): void { + this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation); + } } diff --git a/angular/src/index.ts b/angular/src/index.ts index 12f9f34c9e..1ad3660a2e 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -8,7 +8,11 @@ export { IonTabs } from './directives/navigation/ion-tabs'; export { IonBackButtonDelegateDirective as IonBackButtonDelegate } from './directives/navigation/ion-back-button'; export { NavDelegate } from './directives/navigation/nav-delegate'; export { IonRouterOutlet } from './directives/navigation/ion-router-outlet'; -export { RouterLinkDelegateDirective as RouterLinkDelegate } from './directives/navigation/router-link-delegate'; +export { + RouterLinkDelegateDirective as RouterLinkDelegate, + RouterLinkWithHrefDelegateDirective as RouterLinkWithHrefDelegate, +} from './directives/navigation/router-link-delegate'; + export { NavParams } from './directives/navigation/nav-params'; export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll'; export { VirtualItem } from './directives/virtual-scroll/virtual-item'; diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 28986acd97..2e58b0ba1c 100644 --- a/angular/src/ionic-module.ts +++ b/angular/src/ionic-module.ts @@ -12,7 +12,10 @@ import { IonBackButtonDelegateDirective } from './directives/navigation/ion-back import { IonRouterOutlet } from './directives/navigation/ion-router-outlet'; import { IonTabs } from './directives/navigation/ion-tabs'; import { NavDelegate } from './directives/navigation/nav-delegate'; -import { RouterLinkDelegateDirective } from './directives/navigation/router-link-delegate'; +import { + RouterLinkDelegateDirective, + RouterLinkWithHrefDelegateDirective, +} from './directives/navigation/router-link-delegate'; import { IonModal } from './directives/overlays/modal'; import { IonPopover } from './directives/overlays/popover'; import { @@ -195,6 +198,7 @@ const DECLARATIONS = [ IonBackButtonDelegateDirective, NavDelegate, RouterLinkDelegateDirective, + RouterLinkWithHrefDelegateDirective, // virtual scroll VirtualFooter, From 9fbaaf95eb65ebf034b8b54ccbee58b4634f5c3c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Apr 2022 14:11:30 -0400 Subject: [PATCH 7/8] chore(): simplify overlay attribute types (#25074) --- angular/src/directives/proxies.ts | 2 +- core/api.txt | 16 +- .../action-sheet/action-sheet-interface.ts | 7 +- core/src/components/action-sheet/readme.md | 10 +- core/src/components/alert/alert-interface.ts | 18 +- core/src/components/alert/readme.md | 22 +- core/src/components/item-sliding/readme.md | 4 +- .../components/loading/loading-interface.ts | 7 +- core/src/components/loading/readme.md | 9 +- core/src/components/modal/modal-interface.ts | 7 +- core/src/components/modal/readme.md | 9 +- .../src/components/picker/picker-interface.ts | 7 +- core/src/components/picker/readme.md | 9 +- .../components/picker/test/basic/index.html | 265 +++++++++--------- .../components/popover/popover-interface.ts | 7 +- core/src/components/popover/readme.md | 9 +- core/src/components/segment-button/readme.md | 14 +- core/src/components/select/readme.md | 28 +- core/src/components/toast/readme.md | 9 +- core/src/components/toast/toast-interface.ts | 7 +- 20 files changed, 221 insertions(+), 245 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 529ac88d23..2ef6ce4330 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1775,7 +1775,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane { /** * Expression to be called when the split-pane visibility has changed */ - ionSplitPaneVisible: EventEmitter>; + ionSplitPaneVisible: EventEmitter>; } diff --git a/core/api.txt b/core/api.txt index 08e3a24d30..2514eb9138 100644 --- a/core/api.txt +++ b/core/api.txt @@ -27,7 +27,7 @@ ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-action-sheet,prop,header,string | undefined,undefined,false,false -ion-action-sheet,prop,htmlAttributes,ActionSheetAttributes | undefined,undefined,false,false +ion-action-sheet,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-action-sheet,prop,keyboardClose,boolean,true,false,false ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false @@ -72,7 +72,7 @@ ion-alert,prop,buttons,(string | AlertButton)[],[],false,false ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-alert,prop,header,string | undefined,undefined,false,false -ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false +ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-alert,prop,inputs,AlertInput[],[],false,false ion-alert,prop,keyboardClose,boolean,true,false,false ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false @@ -681,7 +681,7 @@ ion-loading,prop,backdropDismiss,boolean,false,false,false ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false ion-loading,prop,duration,number,0,false,false ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false -ion-loading,prop,htmlAttributes,LoadingAttributes | undefined,undefined,false,false +ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-loading,prop,keyboardClose,boolean,true,false,false ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false @@ -769,7 +769,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-modal,prop,handle,boolean | undefined,undefined,false,false -ion-modal,prop,htmlAttributes,ModalAttributes | undefined,undefined,false,false +ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false ion-modal,prop,isOpen,boolean,false,false,false ion-modal,prop,keyboardClose,boolean,true,false,false @@ -848,7 +848,7 @@ ion-picker,prop,columns,PickerColumn[],[],false,false ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false ion-picker,prop,duration,number,0,false,false ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false -ion-picker,prop,htmlAttributes,PickerAttributes | undefined,undefined,false,false +ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-picker,prop,keyboardClose,boolean,true,false,false ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-picker,prop,mode,"ios" | "md",undefined,false,false @@ -886,7 +886,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa ion-popover,prop,dismissOnSelect,boolean,false,false,false ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-popover,prop,event,any,undefined,false,false -ion-popover,prop,htmlAttributes,PopoverAttributes | undefined,undefined,false,false +ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-popover,prop,isOpen,boolean,false,false,false ion-popover,prop,keyboardClose,boolean,true,false,false ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false @@ -1122,7 +1122,7 @@ ion-segment-button,prop,disabled,boolean,false,false,false ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false ion-segment-button,prop,mode,"ios" | "md",undefined,false,false ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false -ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false +ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false ion-segment-button,css-prop,--background ion-segment-button,css-prop,--background-checked ion-segment-button,css-prop,--background-focused @@ -1361,7 +1361,7 @@ ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false ion-toast,prop,duration,number,0,false,false ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,header,string | undefined,undefined,false,false -ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false +ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-toast,prop,icon,string | undefined,undefined,false,false ion-toast,prop,keyboardClose,boolean,false,false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 1e19094da6..55c72eb01c 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode } from '../../interface'; export interface ActionSheetOptions { @@ -19,7 +17,10 @@ export interface ActionSheetOptions { leaveAnimation?: AnimationBuilder; } -export type ActionSheetAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type ActionSheetAttributes = { [key: string]: any }; export interface ActionSheetButton { text?: string; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 5118dee711..d0051e663d 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -65,19 +65,13 @@ interface ActionSheetOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: ActionSheetAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } ``` -### ActionSheetAttributes - -```typescript -interface ActionSheetAttributes extends JSXBase.HTMLAttributes {} -``` - @@ -569,7 +563,7 @@ export default defineComponent({ | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `ActionSheetAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `undefined \| { [key: string]: any; }` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index fbcde7c7a4..9cc650179d 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; @@ -23,7 +21,10 @@ export interface AlertOptions { leaveAnimation?: AnimationBuilder; } -export type AlertAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type AlertAttributes = { [key: string]: any }; export interface AlertInput { type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; @@ -42,8 +43,15 @@ export interface AlertInput { tabindex?: number; } -export type AlertTextareaAttributes = JSXBase.TextareaHTMLAttributes; -export type AlertInputAttributes = JSXBase.InputHTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type AlertTextareaAttributes = { [key: string]: any }; + +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type AlertInputAttributes = { [key: string]: any }; export interface AlertButton { text: string; diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index c99b964ae7..151a1d39f8 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -71,16 +71,11 @@ interface AlertInput { min?: string | number; max?: string | number; cssClass?: string | string[]; - attributes?: AlertInputAttributes | AlertTextareaAttributes; + attributes?: { [key: string]: any }; tabindex?: number; } ``` -### AlertInputAttributes - -```typescript -interface AlertInputAttributes extends JSXBase.InputHTMLAttributes {} -``` ### AlertOptions @@ -95,7 +90,7 @@ interface AlertOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; - htmlAttributes?: AlertAttributes; + htmlAttributes?: { [key: string]: any }; mode?: Mode; keyboardClose?: boolean; @@ -106,17 +101,6 @@ interface AlertOptions { } ``` -### AlertAttributes -```typescript -interface AlertAttributes extends JSXBase.HTMLAttributes {} -``` - -### AlertTextareaAttributes -```typescript -interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes {} -``` - - @@ -1784,7 +1768,7 @@ export default defineComponent({ | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `AlertAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `undefined \| { [key: string]: any; }` | `undefined` | | `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md index aa23ff1f7c..9a92a0a187 100644 --- a/core/src/components/item-sliding/readme.md +++ b/core/src/components/item-sliding/readme.md @@ -873,7 +873,7 @@ export default defineComponent({ ### `close() => Promise` -Close the sliding item. Items can also be closed from the [List](../list). +Close the sliding item. Items can also be closed from the [List](./list). #### Returns @@ -883,7 +883,7 @@ Type: `Promise` ### `closeOpened() => Promise` -Close all of the sliding items in the list. Items can also be closed from the [List](../list). +Close all of the sliding items in the list. Items can also be closed from the [List](./list). #### Returns diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts index c9a80c5ad7..ed76940e29 100644 --- a/core/src/components/loading/loading-interface.ts +++ b/core/src/components/loading/loading-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode, SpinnerTypes } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; @@ -21,4 +19,7 @@ export interface LoadingOptions { leaveAnimation?: AnimationBuilder; } -export type LoadingAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type LoadingAttributes = { [key: string]: any }; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index f72094383d..1d8af440fa 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -54,18 +54,13 @@ interface LoadingOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: LoadingAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } ``` -### LoadingAttributes - -```typescript -interface LoadingAttributes extends JSXBase.HTMLAttributes {} -``` @@ -380,7 +375,7 @@ export default defineComponent({ | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | | `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `LoadingAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `undefined \| { [key: string]: any; }` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` | diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts index 30e062a789..8e43390615 100644 --- a/core/src/components/modal/modal-interface.ts +++ b/core/src/components/modal/modal-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface'; export interface ModalOptions { @@ -33,4 +31,7 @@ export interface ModalAnimationOptions { backdropBreakpoint?: number; } -export type ModalAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type ModalAttributes = { [key: string]: any }; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 2d9cec7d27..4438ca8494 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -122,7 +122,7 @@ interface ModalOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: ModalAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; @@ -134,11 +134,6 @@ interface ModalOptions { } ``` -### ModalAttributes - -```typescript -interface ModalAttributes extends JSXBase.HTMLAttributes {} -``` ## Accessibility @@ -1383,7 +1378,7 @@ export default { | `breakpoints` | -- | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1] | `number[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `handle` | `handle` | The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties. | `boolean \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `ModalAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `undefined \| { [key: string]: any; }` | `undefined` | | `initialBreakpoint` | `initial-breakpoint` | A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. | `number \| undefined` | `undefined` | | `isOpen` | `is-open` | If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code. | `boolean` | `false` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts index 58b9bcebd6..6fed197756 100644 --- a/core/src/components/picker/picker-interface.ts +++ b/core/src/components/picker/picker-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Mode } from '../../interface'; export interface PickerOptions { @@ -19,7 +17,10 @@ export interface PickerOptions { leaveAnimation?: AnimationBuilder; } -export type PickerAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type PickerAttributes = { [key: string]: any }; export interface PickerButton { text?: string; diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index c661f46422..7fedbad88d 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -62,18 +62,13 @@ interface PickerOptions { mode?: Mode; keyboardClose?: boolean; id?: string; - htmlAttributes?: PickerAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; } ``` -### PickerAttributes - -```typescript -interface PickerAttributes extends JSXBase.HTMLAttributes {} -``` @@ -235,7 +230,7 @@ export default { | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` | | `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `PickerAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `undefined \| { [key: string]: any; }` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html index 0e5cd2d956..e166d44f17 100644 --- a/core/src/components/picker/test/basic/index.html +++ b/core/src/components/picker/test/basic/index.html @@ -1,133 +1,142 @@ - - - - Picker - Basic - - - - - - - - - - - - - - Show Picker - Show Custom Picker - - - - - - + + + + - + + + + Show Picker + Show Custom Picker + + + + + + + diff --git a/core/src/components/popover/popover-interface.ts b/core/src/components/popover/popover-interface.ts index 8e5c42480e..a70691b9c7 100644 --- a/core/src/components/popover/popover-interface.ts +++ b/core/src/components/popover/popover-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, ComponentProps, @@ -43,7 +41,10 @@ export interface PopoverOptions { triggerAction?: string; } -export type PopoverAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type PopoverAttributes = { [key: string]: any }; export type PopoverSize = 'cover' | 'auto'; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index f1300471e0..6d84a66a32 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -98,7 +98,7 @@ interface PopoverOptions { mode?: 'ios' | 'md'; keyboardClose?: boolean; id?: string; - htmlAttributes?: PopoverAttributes; + htmlAttributes?: { [key: string]: any }; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; @@ -112,11 +112,6 @@ interface PopoverOptions { } ``` -### PopoverAttributes - -```typescript -interface PopoverAttributes extends JSXBase.HTMLAttributes {} -``` ## Types @@ -962,7 +957,7 @@ export default { | `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` | | `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `HTMLAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `undefined \| { [key: string]: any; }` | `undefined` | | `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index 921a9d8b2f..f2fb8f0c3d 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -798,13 +798,13 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- | -| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` | -| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | -| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------- | +| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` | +| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | +| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + ids++` | ## Shadow Parts diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 042a495455..37335a5c55 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -1367,20 +1367,20 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------------- | -| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` | -| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` | -| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` | -| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](../alert), the [ion-action-sheet docs](../action-sheet) and the [ion-popover docs](../popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` | -| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` | -| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` | -| `value` | `value` | the value of the select. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------- | +| `cancelText` | `cancel-text` | The text to display on the cancel button. | `string` | `'Cancel'` | +| `compareWith` | `compare-with` | A property name or function used to compare object values | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the select. | `boolean` | `false` | +| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. | `"action-sheet" \| "alert" \| "popover"` | `'alert'` | +| `interfaceOptions` | `interface-options` | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface. Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. | `any` | `{}` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` | +| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` | +| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` | +| `value` | `value` | the value of the select. | `any` | `undefined` | ## Events diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index ead2432bd7..1b336f1887 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -42,7 +42,7 @@ interface ToastOptions { translucent?: boolean; animated?: boolean; icon?: string; - htmlAttributes?: ToastAttributes; + htmlAttributes?: { [key: string]: any }; color?: Color; mode?: Mode; @@ -54,11 +54,6 @@ interface ToastOptions { } ``` -### ToastAttributes -```typescript -interface ToastAttributes extends JSXBase.HTMLAttributes {} -``` - ## Accessibility ### Focus Management @@ -447,7 +442,7 @@ export default defineComponent({ | `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | | `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `ToastAttributes \| undefined` | `undefined` | +| `htmlAttributes` | -- | Additional attributes to pass to the toast. | `undefined \| { [key: string]: any; }` | `undefined` | | `icon` | `icon` | The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons | `string \| undefined` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | | `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 079bb2e568..64ce592051 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -1,5 +1,3 @@ -import type { JSXBase } from '@stencil/core/internal'; - import type { AnimationBuilder, Color, Mode } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; @@ -24,7 +22,10 @@ export interface ToastOptions { leaveAnimation?: AnimationBuilder; } -export type ToastAttributes = JSXBase.HTMLAttributes; +/** + * @deprecated - Use { [key: string]: any } directly instead. + */ +export type ToastAttributes = { [key: string]: any }; export interface ToastButton { text?: string; From 9ed1d3d70bde19515a5f3dfda297c34cb9752810 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Apr 2022 18:20:14 +0000 Subject: [PATCH 8/8] chore(datetime): correctly resolve merge conflict --- core/src/components/datetime/datetime.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index ebab2a6e15..ede717eb90 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1,6 +1,5 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core'; -import { printIonError } from '@utils/logging'; import { printIonError, printIonWarning } from '@utils/logging'; import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';