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

Merge branch 'feature-8.5' into ROU-11112-checkbox

Browse Source
This commit is contained in:
Giuliana Silva
2025-01-30 09:34:05 +00:00
committed by GitHub
parent 66210e60a8 621333d927
commit 8743a4f3be
38 changed files with 752 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
### Bug Fixes
* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)

8
core/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
**Note:** Version bump only for package @ionic/core
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)

4
core/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@ionic/core", "name": "@ionic/core",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/core", "name": "@ionic/core",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",

2
core/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/core", "name": "@ionic/core",
"version": "8.4.2", "version": "8.4.3",
"description": "Base components for Ionic", "description": "Base components for Ionic",
"keywords": [ "keywords": [
"ionic", "ionic",

2
lerna.json
View File

@ -3,5 +3,5 @@
"core", "core",
"packages/*" "packages/*"
], ],
"version": "8.4.2" "version": "8.4.3"
} }

8
packages/angular-server/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
**Note:** Version bump only for package @ionic/angular-server
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/angular-server **Note:** Version bump only for package @ionic/angular-server

18
packages/angular-server/package-lock.json generated
View File

@ -1,15 +1,15 @@
{ {
"name": "@ionic/angular-server", "name": "@ionic/angular-server",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/angular-server", "name": "@ionic/angular-server",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2" "@ionic/core": "^8.4.3"
}, },
"devDependencies": { "devDependencies": {
"@angular-eslint/eslint-plugin": "^16.0.0", "@angular-eslint/eslint-plugin": "^16.0.0",
@ -1031,9 +1031,9 @@
"dev": true "dev": true
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
@ -7189,9 +7189,9 @@
"dev": true "dev": true
}, },
"@ionic/core": { "@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"requires": { "requires": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
"ionicons": "^7.2.2", "ionicons": "^7.2.2",

4
packages/angular-server/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/angular-server", "name": "@ionic/angular-server",
"version": "8.4.2", "version": "8.4.3",
"description": "Angular SSR Module for Ionic", "description": "Angular SSR Module for Ionic",
"keywords": [ "keywords": [
"ionic", "ionic",
@ -62,6 +62,6 @@
}, },
"prettier": "@ionic/prettier-config", "prettier": "@ionic/prettier-config",
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2" "@ionic/core": "^8.4.3"
} }
} }

11
packages/angular/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
### Bug Fixes
* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/angular **Note:** Version bump only for package @ionic/angular

18
packages/angular/package-lock.json generated
View File

@ -1,15 +1,15 @@
{ {
"name": "@ionic/angular", "name": "@ionic/angular",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/angular", "name": "@ionic/angular",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2", "@ionic/core": "^8.4.3",
"ionicons": "^7.0.0", "ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0", "jsonc-parser": "^3.0.0",
"tslib": "^2.3.0" "tslib": "^2.3.0"
@ -1398,9 +1398,9 @@
"dev": true "dev": true
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
@ -9821,9 +9821,9 @@
"dev": true "dev": true
}, },
"@ionic/core": { "@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"requires": { "requires": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
"ionicons": "^7.2.2", "ionicons": "^7.2.2",

4
packages/angular/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/angular", "name": "@ionic/angular",
"version": "8.4.2", "version": "8.4.3",
"description": "Angular specific wrappers for @ionic/core", "description": "Angular specific wrappers for @ionic/core",
"keywords": [ "keywords": [
"ionic", "ionic",
@ -47,7 +47,7 @@
} }
}, },
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2", "@ionic/core": "^8.4.3",
"ionicons": "^7.0.0", "ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0", "jsonc-parser": "^3.0.0",
"tslib": "^2.3.0" "tslib": "^2.3.0"

8
packages/docs/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
**Note:** Version bump only for package @ionic/docs
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/docs **Note:** Version bump only for package @ionic/docs

4
packages/docs/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@ionic/docs", "name": "@ionic/docs",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/docs", "name": "@ionic/docs",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT" "license": "MIT"
} }
} }

2
packages/docs/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/docs", "name": "@ionic/docs",
"version": "8.4.2", "version": "8.4.3",
"description": "Pre-packaged API documentation for the Ionic docs.", "description": "Pre-packaged API documentation for the Ionic docs.",
"main": "core.json", "main": "core.json",
"types": "core.d.ts", "types": "core.d.ts",

8
packages/react-router/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
**Note:** Version bump only for package @ionic/react-router
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/react-router **Note:** Version bump only for package @ionic/react-router

34
packages/react-router/package-lock.json generated
View File

@ -1,15 +1,15 @@
{ {
"name": "@ionic/react-router", "name": "@ionic/react-router",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/react-router", "name": "@ionic/react-router",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/react": "^8.4.2", "@ionic/react": "^8.4.3",
"tslib": "*" "tslib": "*"
}, },
"devDependencies": { "devDependencies": {
@ -238,9 +238,9 @@
"dev": true "dev": true
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
@ -415,12 +415,12 @@
} }
}, },
"node_modules/@ionic/react": { "node_modules/@ionic/react": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.3.tgz",
"integrity": "sha512-IDQy6a6oo9dG4Bu/svg/n8KSusTPY/bgI32FGGglm2nIe0F3hnjjIoS0Ikp0QdA4shqSnjV2Aq5AzGd3i6x5gg==", "integrity": "sha512-AqwmoRCjTDBIgmywE6VnOOacOry21ma6TWMS8Dg8ZGu41rT6edDSmX/lKvAAV+jg4TkjE/U5n//OxzHBY/0+Zg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/core": "8.4.2", "@ionic/core": "8.4.3",
"ionicons": "^7.0.0", "ionicons": "^7.0.0",
"tslib": "*" "tslib": "*"
}, },
@ -4061,9 +4061,9 @@
"dev": true "dev": true
}, },
"@ionic/core": { "@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"requires": { "requires": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
"ionicons": "^7.2.2", "ionicons": "^7.2.2",
@ -4167,11 +4167,11 @@
"requires": {} "requires": {}
}, },
"@ionic/react": { "@ionic/react": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.3.tgz",
"integrity": "sha512-IDQy6a6oo9dG4Bu/svg/n8KSusTPY/bgI32FGGglm2nIe0F3hnjjIoS0Ikp0QdA4shqSnjV2Aq5AzGd3i6x5gg==", "integrity": "sha512-AqwmoRCjTDBIgmywE6VnOOacOry21ma6TWMS8Dg8ZGu41rT6edDSmX/lKvAAV+jg4TkjE/U5n//OxzHBY/0+Zg==",
"requires": { "requires": {
"@ionic/core": "8.4.2", "@ionic/core": "8.4.3",
"ionicons": "^7.0.0", "ionicons": "^7.0.0",
"tslib": "*" "tslib": "*"
} }

4
packages/react-router/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/react-router", "name": "@ionic/react-router",
"version": "8.4.2", "version": "8.4.3",
"description": "React Router wrapper for @ionic/react", "description": "React Router wrapper for @ionic/react",
"keywords": [ "keywords": [
"ionic", "ionic",
@ -36,7 +36,7 @@
"dist/" "dist/"
], ],
"dependencies": { "dependencies": {
"@ionic/react": "^8.4.2", "@ionic/react": "^8.4.3",
"tslib": "*" "tslib": "*"
}, },
"peerDependencies": { "peerDependencies": {

8
packages/react/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
**Note:** Version bump only for package @ionic/react
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/react **Note:** Version bump only for package @ionic/react

18
packages/react/package-lock.json generated
View File

@ -1,15 +1,15 @@
{ {
"name": "@ionic/react", "name": "@ionic/react",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/react", "name": "@ionic/react",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2", "@ionic/core": "^8.4.3",
"ionicons": "^7.0.0", "ionicons": "^7.0.0",
"tslib": "*" "tslib": "*"
}, },
@ -736,9 +736,9 @@
"dev": true "dev": true
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
@ -12316,9 +12316,9 @@
"dev": true "dev": true
}, },
"@ionic/core": { "@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"requires": { "requires": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
"ionicons": "^7.2.2", "ionicons": "^7.2.2",

4
packages/react/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/react", "name": "@ionic/react",
"version": "8.4.2", "version": "8.4.3",
"description": "React specific wrapper for @ionic/core", "description": "React specific wrapper for @ionic/core",
"keywords": [ "keywords": [
"ionic", "ionic",
@ -39,7 +39,7 @@
"css/" "css/"
], ],
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2", "@ionic/core": "^8.4.3",
"ionicons": "^7.0.0", "ionicons": "^7.0.0",
"tslib": "*" "tslib": "*"
}, },

8
packages/vue-router/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
**Note:** Version bump only for package @ionic/vue-router
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/vue-router **Note:** Version bump only for package @ionic/vue-router

34
packages/vue-router/package-lock.json generated
View File

@ -1,15 +1,15 @@
{ {
"name": "@ionic/vue-router", "name": "@ionic/vue-router",
"version": "8.4.2", "version": "8.4.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ionic/vue-router", "name": "@ionic/vue-router",
"version": "8.4.2", "version": "8.4.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/vue": "^8.4.2" "@ionic/vue": "^8.4.3"
}, },
"devDependencies": { "devDependencies": {
"@ionic/eslint-config": "^0.3.0", "@ionic/eslint-config": "^0.3.0",
@ -661,9 +661,9 @@
"dev": true "dev": true
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
@ -853,12 +853,12 @@
} }
}, },
"node_modules/@ionic/vue": { "node_modules/@ionic/vue": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.3.tgz",
"integrity": "sha512-GJZJJMXRZ1LP7bpIJquSrL8HC5Gwpz9ak/H6BzdhGIhDLEPfe//4EMkijbNGEnrlW6XSamN2lf6SrRZ1Lk5NMA==", "integrity": "sha512-jg4zDRfSrk3jSx3jvYf618Nf4pwTngB2viNihsOcXd2o04JvNHytouEQ7zES40/u9+tctRd0Db98nRyDOqwrCw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ionic/core": "8.4.2", "@ionic/core": "8.4.3",
"ionicons": "^7.0.0" "ionicons": "^7.0.0"
} }
}, },
@ -7882,9 +7882,9 @@
"dev": true "dev": true
}, },
"@ionic/core": { "@ionic/core": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
"integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==", "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
"requires": { "requires": {
"@stencil/core": "4.20.0", "@stencil/core": "4.20.0",
"ionicons": "^7.2.2", "ionicons": "^7.2.2",
@ -7997,11 +7997,11 @@
"requires": {} "requires": {}
}, },
"@ionic/vue": { "@ionic/vue": {
"version": "8.4.2", "version": "8.4.3",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.2.tgz", "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.3.tgz",
"integrity": "sha512-GJZJJMXRZ1LP7bpIJquSrL8HC5Gwpz9ak/H6BzdhGIhDLEPfe//4EMkijbNGEnrlW6XSamN2lf6SrRZ1Lk5NMA==", "integrity": "sha512-jg4zDRfSrk3jSx3jvYf618Nf4pwTngB2viNihsOcXd2o04JvNHytouEQ7zES40/u9+tctRd0Db98nRyDOqwrCw==",
"requires": { "requires": {
"@ionic/core": "8.4.2", "@ionic/core": "8.4.3",
"ionicons": "^7.0.0" "ionicons": "^7.0.0"
} }
}, },

4
packages/vue-router/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/vue-router", "name": "@ionic/vue-router",
"version": "8.4.2", "version": "8.4.3",
"description": "Vue Router integration for @ionic/vue", "description": "Vue Router integration for @ionic/vue",
"scripts": { "scripts": {
"test.spec": "jest", "test.spec": "jest",
@ -44,7 +44,7 @@
}, },
"homepage": "https://github.com/ionic-team/ionic-framework#readme", "homepage": "https://github.com/ionic-team/ionic-framework#readme",
"dependencies": { "dependencies": {
"@ionic/vue": "^8.4.2" "@ionic/vue": "^8.4.3"
}, },
"devDependencies": { "devDependencies": {
"@ionic/eslint-config": "^0.3.0", "@ionic/eslint-config": "^0.3.0",

11
packages/vue/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
### Bug Fixes
* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) ## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
**Note:** Version bump only for package @ionic/vue **Note:** Version bump only for package @ionic/vue

681
packages/vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
packages/vue/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ionic/vue", "name": "@ionic/vue",
"version": "8.4.2", "version": "8.4.3",
"description": "Vue specific wrapper for @ionic/core", "description": "Vue specific wrapper for @ionic/core",
"scripts": { "scripts": {
"eslint": "eslint src", "eslint": "eslint src",
@ -52,7 +52,9 @@
"@babel/types": "^7.18.4", "@babel/types": "^7.18.4",
"@ionic/eslint-config": "^0.3.0", "@ionic/eslint-config": "^0.3.0",
"@ionic/prettier-config": "^2.0.0", "@ionic/prettier-config": "^2.0.0",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-typescript": "^11.1.5", "@rollup/plugin-typescript": "^11.1.5",
"@stencil/vue-output-target": "0.9.4",
"@typescript-eslint/eslint-plugin": "^5.48.2", "@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2", "@typescript-eslint/parser": "^5.48.2",
"change-case": "^4.1.1", "change-case": "^4.1.1",
@ -61,12 +63,12 @@
"prettier": "^2.8.3", "prettier": "^2.8.3",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^4.2.0", "rollup": "^4.2.0",
"typescript": "^4.7.3", "typescript": "^5.7.3",
"vue": "3.2.47", "vue": "3.4.38",
"vue-router": "^4.0.16" "vue-router": "^4.0.16"
}, },
"dependencies": { "dependencies": {
"@ionic/core": "^8.4.2", "@ionic/core": "^8.4.3",
"ionicons": "^7.0.0" "ionicons": "^7.0.0"
}, },
"vetur": { "vetur": {

13
packages/vue/rollup.config.mjs
View File

@ -1,4 +1,6 @@
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript'; import typescript from '@rollup/plugin-typescript';
const external = ['vue', 'vue-router']; const external = ['vue', 'vue-router'];
export default { export default {
@ -12,6 +14,13 @@ export default {
sourcemap: true sourcemap: true
}, },
], ],
plugins: [typescript()], plugins: [
external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons') typescript(),
resolve()
],
external: (
id => external.includes(id) ||
id.startsWith('@ionic/core') ||
id.startsWith('ionicons')
)
}; };

7
packages/vue/scripts/copy-overlays.js
View File

@ -37,7 +37,7 @@ function generateOverlays() {
let componentImports = []; let componentImports = [];
let componentDefinitions = []; let componentDefinitions = [];
components.forEach(component => { components.sort((a, b) => a.tag.localeCompare(b.tag)).forEach(component => {
const docsBlock = getDocsBlock(component.tag); const docsBlock = getDocsBlock(component.tag);
const props = getPropsFromDocsBlock(docsBlock); const props = getPropsFromDocsBlock(docsBlock);
@ -57,13 +57,12 @@ export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${comp
* Changes made to this file will be overwritten on build. * Changes made to this file will be overwritten on build.
*/ */
import { import type {
JSX, JSX,
} from '@ionic/core/components'; } from '@ionic/core/components';
${componentImports.join('\n')} ${componentImports.join('\n')}
import { defineOverlayContainer } from '../vue-component-lib/overlays'; import { defineOverlayContainer } from '../utils/overlays';
${componentDefinitions.join('')} ${componentDefinitions.join('')}
`; `;

32
packages/vue/src/components/IonApp.ts
View File

@ -3,20 +3,24 @@ import type { VNode } from "vue";
import { h, defineComponent, shallowRef } from "vue"; import { h, defineComponent, shallowRef } from "vue";
const userComponents = shallowRef([]); const userComponents = shallowRef([]);
export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => { export const IonApp = /*@__PURE__*/ defineComponent(
defineCustomElement(); (_, { attrs, slots }) => {
return () => { defineCustomElement();
return h( return () => {
"ion-app", return h(
{ "ion-app",
...attrs, {
}, name: "IonApp",
[slots.default && slots.default(), ...userComponents.value] ...attrs,
); },
}; [slots.default && slots.default(), ...userComponents.value]
}); );
};
IonApp.name = "IonApp"; },
{
name: "IonApp",
}
);
/** /**
* When rendering user components inside of * When rendering user components inside of

5
packages/vue/src/components/IonBackButton.ts
View File

@ -34,7 +34,8 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
slots.default && slots.default() slots.default && slots.default()
); );
}; };
},
{
name: "IonBackButton",
} }
); );
IonBackButton.name = "IonBackButton";

98
packages/vue/src/components/IonNav.ts
View File

@ -4,54 +4,56 @@ import { defineComponent, h, shallowRef } from "vue";
import { VueDelegate } from "../framework-delegate"; import { VueDelegate } from "../framework-delegate";
export const IonNav = /*@__PURE__*/ defineComponent((props) => { export const IonNav = /*@__PURE__*/ defineComponent(
defineCustomElement(); (props) => {
const views = shallowRef([]); defineCustomElement();
const views = shallowRef([]);
/** /**
* Allows us to create the component * Allows us to create the component
* within the Vue application context. * within the Vue application context.
*/ */
const addView = (component: VNode) => const addView = (component: VNode) =>
(views.value = [...views.value, component]); (views.value = [...views.value, component]);
const removeView = (component: VNode) => const removeView = (component: VNode) =>
(views.value = views.value.filter((cmp) => cmp !== component)); (views.value = views.value.filter((cmp) => cmp !== component));
const delegate = VueDelegate(addView, removeView); const delegate = VueDelegate(addView, removeView);
return () => { return () => {
return h("ion-nav", { ...props, delegate }, views.value); return h("ion-nav", { ...props, delegate }, views.value);
}; };
});
IonNav.name = "IonNav";
/**
* The default values follow what is defined at
* https://ionicframework.com/docs/api/nav#properties
* otherwise the default values on the Web Component
* may be overridden. For example, if the default animated value
* is not `true` below, then Vue would default the prop to `false`
* which would override the Web Component default of `true`.
*/
IonNav.props = {
animated: {
type: Boolean,
default: true,
}, },
animation: { {
type: Function, name: "IonNav",
default: undefined, /**
}, * The default values follow what is defined at
root: { * https://ionicframework.com/docs/api/nav#properties
type: [Function, Object, String], * otherwise the default values on the Web Component
default: undefined, * may be overridden. For example, if the default animated value
}, * is not `true` below, then Vue would default the prop to `false`
rootParams: { * which would override the Web Component default of `true`.
type: Object, */
default: undefined, props: {
}, animated: {
swipeGesture: { type: Boolean,
type: Boolean, default: true,
default: undefined, },
}, animation: {
}; type: Function,
default: undefined,
},
root: {
type: [Function, Object, String],
default: undefined,
},
rootParams: {
type: Object,
default: undefined,
},
swipeGesture: {
type: Boolean,
default: undefined,
},
},
}
);

2
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -44,7 +44,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
let previousMatchedRouteRef: Ref | undefined; let previousMatchedRouteRef: Ref | undefined;
let previousMatchedPath: string | undefined; let previousMatchedPath: string | undefined;
provide(viewDepthKey, depth + 1); provide(viewDepthKey, (depth + 1) as 0);
provide(matchedRouteKey, matchedRouteRef); provide(matchedRouteKey, matchedRouteRef);
const ionRouterOutlet = ref(); const ionRouterOutlet = ref();

4
packages/vue/src/components/IonTabBar.ts
View File

@ -43,7 +43,7 @@ export const IonTabBar = defineComponent({
data() { data() {
return { return {
tabState: { tabState: {
activeTab: undefined, activeTab: undefined as string | undefined,
tabs: {}, tabs: {},
/** /**
* Passing this prop to each tab button * Passing this prop to each tab button
@ -52,7 +52,7 @@ export const IonTabBar = defineComponent({
*/ */
hasRouterOutlet: false, hasRouterOutlet: false,
}, },
tabVnodes: [], tabVnodes: [] as VNode[],
/* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable @typescript-eslint/no-empty-function */
_tabsWillChange: { type: Function, default: () => {} }, _tabsWillChange: { type: Function, default: () => {} },
_tabsDidChange: { type: Function, default: () => {} }, _tabsDidChange: { type: Function, default: () => {} },

17
packages/vue/src/components/Overlays.ts
View File

@ -3,19 +3,18 @@
* Changes made to this file will be overwritten on build. * Changes made to this file will be overwritten on build.
*/ */
import { import type {
JSX, JSX,
} from '@ionic/core/components'; } from '@ionic/core/components';
import { defineCustomElement as defineIonActionSheetCustomElement } from '@ionic/core/components/ion-action-sheet.js' import { defineCustomElement as defineIonActionSheetCustomElement } from '@ionic/core/components/ion-action-sheet.js'
import { defineCustomElement as defineIonAlertCustomElement } from '@ionic/core/components/ion-alert.js' import { defineCustomElement as defineIonAlertCustomElement } from '@ionic/core/components/ion-alert.js'
import { defineCustomElement as defineIonLoadingCustomElement } from '@ionic/core/components/ion-loading.js' import { defineCustomElement as defineIonLoadingCustomElement } from '@ionic/core/components/ion-loading.js'
import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js'
import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js'
import { defineCustomElement as defineIonModalCustomElement } from '@ionic/core/components/ion-modal.js' import { defineCustomElement as defineIonModalCustomElement } from '@ionic/core/components/ion-modal.js'
import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js'
import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/core/components/ion-popover.js' import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/core/components/ion-popover.js'
import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js'
import { defineOverlayContainer } from '../vue-component-lib/overlays'; import { defineOverlayContainer } from '../utils/overlays';
export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']); export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
@ -23,11 +22,11 @@ export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-
export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']); export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPickerLegacy>('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true); export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPickerLegacy>('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']); export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);

4
packages/vue/src/proxies.ts
View File

@ -243,6 +243,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
'ionChange', 'ionChange',
'ionFocus', 'ionFocus',
'ionBlur' 'ionBlur'
], [
'ionChange',
'ionFocus',
'ionBlur'
], ],
'checked', 'ion-change'); 'checked', 'ion-change');

143
packages/vue/src/vue-component-lib/overlays.ts → packages/vue/src/utils/overlays.ts
View File

@ -1,4 +1,5 @@
import { defineComponent, h, ref, VNode, onMounted } from 'vue'; import type { VNode, ComponentOptions } from "vue";
import { defineComponent, h, ref, onMounted } from "vue";
// TODO(FW-2969): types // TODO(FW-2969): types
@ -9,15 +10,20 @@ export interface OverlayProps {
const EMPTY_PROP = Symbol(); const EMPTY_PROP = Symbol();
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP }; const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
export const defineOverlayContainer = <Props extends object>(name: string, defineCustomElement: () => void, componentProps: string[] = [], hasDelegateHost?: boolean, controller?: any) => { export const defineOverlayContainer = <Props extends object>(
name: string,
const createControllerComponent = () => { defineCustomElement: () => void,
componentProps: string[] = [],
hasDelegateHost?: boolean,
controller?: any
) => {
const createControllerComponent = (options: ComponentOptions) => {
return defineComponent<Props & OverlayProps>((props, { slots, emit }) => { return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
const eventListeners = [ const eventListeners = [
{ componentEv: `${name}-will-present`, frameworkEv: 'willPresent' }, { componentEv: `${name}-will-present`, frameworkEv: "willPresent" },
{ componentEv: `${name}-did-present`, frameworkEv: 'didPresent' }, { componentEv: `${name}-did-present`, frameworkEv: "didPresent" },
{ componentEv: `${name}-will-dismiss`, frameworkEv: 'willDismiss' }, { componentEv: `${name}-will-dismiss`, frameworkEv: "willDismiss" },
{ componentEv: `${name}-did-dismiss`, frameworkEv: 'didDismiss' }, { componentEv: `${name}-did-dismiss`, frameworkEv: "didDismiss" },
]; ];
if (defineCustomElement !== undefined) { if (defineCustomElement !== undefined) {
@ -27,8 +33,8 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
const overlay = ref(); const overlay = ref();
const onVnodeMounted = async () => { const onVnodeMounted = async () => {
const isOpen = props.isOpen; const isOpen = props.isOpen;
isOpen && (await present(props)) isOpen && (await present(props));
} };
const onVnodeUpdated = async (node: VNode, prevNode: VNode) => { const onVnodeUpdated = async (node: VNode, prevNode: VNode) => {
const isOpen = node.props!.isOpen; const isOpen = node.props!.isOpen;
@ -45,11 +51,11 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
} else { } else {
await dismiss(); await dismiss();
} }
} };
const onVnodeBeforeUnmount = async () => { const onVnodeBeforeUnmount = async () => {
await dismiss(); await dismiss();
} };
const dismiss = async () => { const dismiss = async () => {
if (!overlay.value) return; if (!overlay.value) return;
@ -61,7 +67,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
await overlay.value; await overlay.value;
overlay.value = undefined; overlay.value = undefined;
} };
const present = async (props: Readonly<Props>) => { const present = async (props: Readonly<Props>) => {
/** /**
@ -77,7 +83,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
return; return;
} }
let restOfProps: any = {}; const restOfProps: Record<string, unknown> = {};
/** /**
* We can use Object.entries here * We can use Object.entries here
@ -87,7 +93,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
*/ */
for (const key in props) { for (const key in props) {
const value = props[key] as any; const value = props[key] as any;
if (props.hasOwnProperty(key) && value !== EMPTY_PROP) { if (
Object.prototype.hasOwnProperty.call(props, key) &&
value !== EMPTY_PROP
) {
restOfProps[key] = value; restOfProps[key] = value;
} }
} }
@ -104,35 +113,32 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
const component = slots.default && slots.default()[0]; const component = slots.default && slots.default()[0];
overlay.value = controller.create({ overlay.value = controller.create({
...restOfProps, ...restOfProps,
component component,
}); });
overlay.value = await overlay.value; overlay.value = await overlay.value;
eventListeners.forEach(eventListener => { eventListeners.forEach((eventListener) => {
overlay.value.addEventListener(eventListener.componentEv, () => { overlay.value.addEventListener(eventListener.componentEv, () => {
emit(eventListener.frameworkEv); emit(eventListener.frameworkEv);
}); });
}) });
await overlay.value.present(); await overlay.value.present();
} };
return () => { return () => {
return h( return h("div", {
'div', style: { display: "none" },
{ onVnodeMounted,
style: { display: 'none' }, onVnodeUpdated,
onVnodeMounted, onVnodeBeforeUnmount,
onVnodeUpdated, isOpen: props.isOpen === true,
onVnodeBeforeUnmount, });
isOpen: props.isOpen === true };
} }, options);
);
}
});
}; };
const createInlineComponent = () => { const createInlineComponent = (options: any) => {
return defineComponent((props, { slots }) => { return defineComponent((props, { slots }) => {
if (defineCustomElement !== undefined) { if (defineCustomElement !== undefined) {
defineCustomElement(); defineCustomElement();
@ -141,13 +147,22 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
const elementRef = ref(); const elementRef = ref();
onMounted(() => { onMounted(() => {
elementRef.value.addEventListener('ion-mount', () => isOpen.value = true); elementRef.value.addEventListener(
elementRef.value.addEventListener('will-present', () => isOpen.value = true); "ion-mount",
elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false); () => (isOpen.value = true)
);
elementRef.value.addEventListener(
"will-present",
() => (isOpen.value = true)
);
elementRef.value.addEventListener(
"did-dismiss",
() => (isOpen.value = false)
);
}); });
return () => { return () => {
let restOfProps: any = {}; const restOfProps: Record<string, unknown> = {};
/** /**
* We can use Object.entries here * We can use Object.entries here
@ -157,7 +172,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
*/ */
for (const key in props) { for (const key in props) {
const value = (props as any)[key]; const value = (props as any)[key];
if (props.hasOwnProperty(key) && value !== EMPTY_PROP) { if (
Object.prototype.hasOwnProperty.call(props, key) &&
value !== EMPTY_PROP
) {
restOfProps[key] = value; restOfProps[key] = value;
} }
} }
@ -168,11 +186,11 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
*/ */
const renderChildren = () => { const renderChildren = () => {
if (hasDelegateHost) { if (hasDelegateHost) {
return h('div', { className: 'ion-delegate-host ion-page' }, slots); return h("div", { className: "ion-delegate-host ion-page" }, slots);
} }
return slots; return slots;
} };
return h( return h(
name, name,
@ -184,27 +202,32 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
* the value of the prop will be the empty string which is * the value of the prop will be the empty string which is
* why we still call renderChildren() in that case. * why we still call renderChildren() in that case.
*/ */
(isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined isOpen.value ||
) restOfProps.keepContentsMounted ||
} restOfProps.keepContentsMounted === ""
}); ? renderChildren()
} : undefined
);
const Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent(); };
}, options);
Container.name = name;
Container.props = {
'isOpen': DEFAULT_EMPTY_PROP
}; };
componentProps.forEach(componentProp => { const options: ComponentOptions = {
Container.props[componentProp] = DEFAULT_EMPTY_PROP; name,
}); props: {
isOpen: DEFAULT_EMPTY_PROP,
...componentProps.reduce((acc, prop) => {
acc[prop] = DEFAULT_EMPTY_PROP;
return acc;
}, {} as Record<string, unknown>),
},
emits:
typeof controller !== "undefined"
? ["willPresent", "didPresent", "willDismiss", "didDismiss"]
: undefined,
};
if (controller !== undefined) { return controller !== undefined
Container.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss']; ? createControllerComponent(options)
} : createInlineComponent(options);
};
return Container;
}

236
packages/vue/src/vue-component-lib/utils.ts
View File

@ -1,236 +0,0 @@
// @ts-nocheck
// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue';
export interface InputProps<T> {
modelValue?: T;
}
const UPDATE_VALUE_EVENT = 'update:modelValue';
const MODEL_VALUE = 'modelValue';
const ROUTER_LINK_VALUE = 'routerLink';
const NAV_MANAGER = 'navManager';
const ROUTER_PROP_PREFIX = 'router';
const ARIA_PROP_PREFIX = 'aria';
/**
* Starting in Vue 3.1.0, all properties are
* added as keys to the props object, even if
* they are not being used. In order to correctly
* account for both value props and v-model props,
* we need to check if the key exists for Vue <3.1.0
* and then check if it is not undefined for Vue >= 3.1.0.
* See https://github.com/vuejs/vue-next/issues/3889
*/
const EMPTY_PROP = Symbol();
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
interface NavManager<T = any> {
navigate: (options: T) => void;
}
const getComponentClasses = (classes: unknown) => {
return (classes as string)?.split(' ') || [];
};
const getElementClasses = (
ref: Ref<HTMLElement | undefined>,
componentClasses: Set<string>,
defaultClasses: string[] = []
) => {
return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter(
(c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
);
};
/**
* Create a callback to define a Vue component wrapper around a Web Component.
*
* @prop name - The component tag name (i.e. `ion-button`)
* @prop componentProps - An array of properties on the
* component. These usually match up with the @Prop definitions
* in each component's TSX file.
* @prop customElement - An option custom element instance to pass
* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
* @prop modelProp - The prop that v-model binds to (i.e. value)
* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
*/
export const defineContainer = <Props, VModelType = string | number | boolean>(
name: string,
defineCustomElement: any,
componentProps: string[] = [],
modelProp?: string,
modelUpdateEvent?: string
) => {
/**
* Create a Vue component wrapper around a Web Component.
* Note: The `props` here are not all properties on a component.
* They refer to whatever properties are set on an instance of a component.
*/
if (defineCustomElement !== undefined) {
defineCustomElement();
}
const Container = defineComponent<Props & InputProps<VModelType>>((props, { attrs, slots, emit }) => {
let modelPropValue = props[modelProp];
const containerRef = ref<HTMLElement>();
const classes = new Set(getComponentClasses(attrs.class));
/**
* This directive is responsible for updating any reactive
* reference associated with v-model on the component.
* This code must be run inside of the "created" callback.
* Since the following listener callbacks as well as any potential
* event callback defined in the developer's app are set on
* the same element, we need to make sure the following callbacks
* are set first so they fire first. If the developer's callback fires first
* then the reactive reference will not have been updated yet.
*/
const vModelDirective = {
created: (el: HTMLElement) => {
const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
eventsNames.forEach((eventName: string) => {
el.addEventListener(eventName.toLowerCase(), (e: Event) => {
/**
* Only update the v-model binding if the event's target is the element we are
* listening on. For example, Component A could emit ionChange, but it could also
* have a descendant Component B that also emits ionChange. We only want to update
* the v-model for Component A when ionChange originates from that element and not
* when ionChange bubbles up from Component B.
*/
if (e.target.tagName === el.tagName) {
modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
}
});
});
},
};
const currentInstance = getCurrentInstance();
const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
const handleRouterLink = (ev: Event) => {
const { routerLink } = props;
if (routerLink === EMPTY_PROP) return;
if (navManager !== undefined) {
/**
* 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();
let navigationPayload: any = { event: ev };
for (const key in props) {
const value = props[key];
if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
navigationPayload[key] = value;
}
}
navManager.navigate(navigationPayload);
} else {
console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
}
};
return () => {
modelPropValue = props[modelProp];
getComponentClasses(attrs.class).forEach((value) => {
classes.add(value);
});
const oldClick = props.onClick;
const handleClick = (ev: Event) => {
if (oldClick !== undefined) {
oldClick(ev);
}
if (!ev.defaultPrevented) {
handleRouterLink(ev);
}
};
let propsToAdd: any = {
ref: containerRef,
class: getElementClasses(containerRef, classes),
onClick: handleClick,
};
/**
* We can use Object.entries here
* to avoid the hasOwnProperty check,
* but that would require 2 iterations
* where as this only requires 1.
*/
for (const key in props) {
const value = props[key];
if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
propsToAdd[key] = value;
}
}
if (modelProp) {
/**
* If form value property was set using v-model
* then we should use that value.
* Otherwise, check to see if form value property
* was set as a static value (i.e. no v-model).
*/
if (props[MODEL_VALUE] !== EMPTY_PROP) {
propsToAdd = {
...propsToAdd,
[modelProp]: props[MODEL_VALUE],
};
} else if (modelPropValue !== EMPTY_PROP) {
propsToAdd = {
...propsToAdd,
[modelProp]: modelPropValue,
};
}
}
// If router link is defined, add href to props
// in order to properly render an anchor tag inside
// of components that should become activatable and
// focusable with router link.
if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
propsToAdd = {
...propsToAdd,
href: props[ROUTER_LINK_VALUE],
};
}
/**
* vModelDirective is only needed on components that support v-model.
* As a result, we conditionally call withDirectives with v-model components.
*/
const node = h(name, propsToAdd, slots.default && slots.default());
return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
};
});
if (typeof Container !== 'function') {
Container.name = name;
Container.props = {
[ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
};
componentProps.forEach((componentProp) => {
Container.props[componentProp] = DEFAULT_EMPTY_PROP;
});
if (modelProp) {
Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
Container.emits = [UPDATE_VALUE_EVENT];
}
}
return Container;
};

4
packages/vue/tsconfig.json
View File

@ -7,8 +7,8 @@
"experimentalDecorators": true, "experimentalDecorators": true,
"esModuleInterop": true, "esModuleInterop": true,
"lib": ["dom", "es2020"], "lib": ["dom", "es2020"],
"module": "es2015", "module": "ES2020",
"moduleResolution": "node", "moduleResolution": "bundler",
"noImplicitAny": true, "noImplicitAny": true,
"noImplicitReturns": false, "noImplicitReturns": false,
"noUnusedLocals": true, "noUnusedLocals": true,