feat(vue): implement custom event property as source for v-model#689
Conversation
171a98d to
5a990b1
Compare
|
Hey 👋🏻 |
|
hey @adamczykpiotr could you add some tests for this please? |
|
Sure thing! |
|
I tried generating unit tests for like 3 hours now but I can't find any way of actually testing v-model handling (not just asserting schema of emitted events) inside unit tests. E2E works just fine so that'll cover my changes. |
johnjenkins
left a comment
There was a problem hiding this comment.
LGTM - thanks for contributing!
|
Hey @johnjenkins, would you be able to trigger a new release for The docs pr is also ready and waiting to be merged to have everything closed: stenciljs/site#1544 |
|
hey @adamczykpiotr there's no 'trigger' for this repo unfortunately ... It's still a manual process :D |
|
@adamczykpiotr done now :) v0.11.7 |
## [0.11.0](https://github.com/stenciljs/output-targets/compare/@stencil/vue-output-target@0.10.8...@stencil/vue-output-target@0.11.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [1.2.1](https://github.com/stenciljs/output-targets/compare/@stencil/react-output-target@1.2.0...@stencil/react-output-target@1.2.1) (2026-01-03) ### 🚀 Enhancement * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646) * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **ci:** run in macos environment ([0631306](0631306)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **react:** revive esModules option ([d98df24](d98df24)) * revert model update event renaming ([#649](#649)) ([5c67692](5c67692)) * **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [0.11.0](https://github.com/stenciljs/output-targets/compare/@stencil/vue-output-target@0.10.8...@stencil/vue-output-target@0.11.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [1.2.1](https://github.com/stenciljs/output-targets/compare/@stencil/react-output-target@1.2.0...@stencil/react-output-target@1.2.1) (2026-01-03) ### 🚀 Enhancement * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646) * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **ci:** run in macos environment ([0631306](0631306)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **react:** revive esModules option ([d98df24](d98df24)) * revert model update event renaming ([#649](#649)) ([5c67692](5c67692)) * **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [0.11.0](https://github.com/stenciljs/output-targets/compare/@stencil/vue-output-target@0.10.8...@stencil/vue-output-target@0.11.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [1.2.1](https://github.com/stenciljs/output-targets/compare/@stencil/react-output-target@1.2.0...@stencil/react-output-target@1.2.1) (2026-01-03) ### 🚀 Enhancement * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646) * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **ci:** run in macos environment ([0631306](0631306)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **react:** revive esModules option ([d98df24](d98df24)) * revert model update event renaming ([#649](#649)) ([5c67692](5c67692)) * **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd))
* chore(release): @stencil/vue-output-target@0.11.0 [skip ci] ## [0.11.0](https://github.com/stenciljs/output-targets/compare/@stencil/vue-output-target@0.10.8...@stencil/vue-output-target@0.11.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd)) * chore(release): @stencil/react-output-target@1.2.1 [skip ci] ## [1.2.1](https://github.com/stenciljs/output-targets/compare/@stencil/react-output-target@1.2.0...@stencil/react-output-target@1.2.1) (2026-01-03) ### 🚀 Enhancement * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd)) * chore(release): @stencil/ssr@0.2.0 [skip ci] ## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03) ### 🚀 Enhancement * **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9)) * Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643) * **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb)) ### 🐛 Bug Fix * **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646) * **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643) * **angular:** prettify code ([69e1cba](69e1cba)) * **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2)) * **ci:** run in macos environment ([0631306](0631306)) * **dependabot:** don't run updates based on projects ([3d43687](3d43687)) * **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20)) * **dependabot:** optimize configuration ([ce29757](ce29757)) * **internal:** update changelog ([4bb6cfc](4bb6cfc)) * nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1)) * **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531) * **react:** better style to css transformation ([ccc76a7](ccc76a7)) * **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b)) * **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0)) * **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5)) * **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7)) * **react:** properly type generated component files ([3e7cc0c](3e7cc0c)) * **react:** revive esModules option ([d98df24](d98df24)) * revert model update event renaming ([#649](#649)) ([5c67692](5c67692)) * **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f)) * **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2)) ### 📝 Documentation * **internal:** link release workflow ([0e69d0e](0e69d0e)) * **internal:** update contributing guidelines ([08c96fd](08c96fd)) * chore: * Update CHANGELOG.md --------- Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: John Jenkins <johnljenkins@Hotmail.com> Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>
Pull request checklist
Please check if your PR fulfills the following requirements:
eventAttrdescription in vue integration docs site#1544npm run build) was run locally for affected output targetsnpm test) were run locally and passednpm run prettier) was run locally and passedPull request type
What is the current behavior?
Currently v-model binding doesn't work if Stencil component simply emits events without updating the underlying attribute value. By default v-model mapping picks up the value from underlying html element. This PR allows to pick any value from the event using dot notation (so i.e.
detailwould be used forCustomEvent<boolean>anddetail.checkedwould be used forCustomEvent< {checked: boolean} >)Following changes have been made to the config:
Added property
eventAttr?: string;toComponentModelConfigso each component can pick a different property from emitted event. This way if your event dispatches multiple properties (or not enough as in this case) you can pick which one to use for v-model binding. Leaving it blank preserves original behaviour.Does this introduce a breaking change?
Other information
I'm working on transpiling Lime Elements to Vue compatible release and found this issue when trying to add v-model support for checkbox