Replace manual event listeners with vueuse onClickOutside
#21
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… `onClickOutside` and clean up unused code - Replace manually added and removed event listeners for closing custom settings and theme manager with `vueuse`'s `onClickOutside` utility - Use watchers to handle the closing behavior more effectively and cleanly - Remove unused code from the theme manager and custom settings for improved maintainability - Simplify logic and reduce potential bugs by leveraging `vueuse` functionality Changes summary: - Replaced manual event listeners for closing custom settings and theme manager with the `onClickOutside` utility from `vueuse`. This simplifies the code and ensures proper cleanup. Additionally, unused code from the theme manager and custom settings was removed to streamline the implementation and improve maintainability.
…ngs and theme manager
- Fixed critical bug where clicking the 'settings' button inside the theme manager
would immediately close the settings panel due to a missing ignore rule in the
onClickOutside handler.
- Added { ignore: [refRollerButton] } to the settings listener to prevent the
opener button from triggering the close action.
- Fixed incorrect import of 'watchEffect' instead of 'watch'.
- Enhanced robustness by adding { flush: 'post' } option to watchers. This
ensures the DOM has been updated and template refs are populated before
the onClickOutside listener is attached, preventing potential errors with
null references.
- Added a safety cleanup with onScopeDispose to remove any active event
listeners when the component is unmounted, preventing memory leaks.
The listeners are now correctly conditionally attached only when their
respective state (settingsOpen, isActive) is true and properly cleaned up
when false or on component destruction.
itsmartashub
changed the title
onClickOutside and clean up unused codeonClickOutside
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
vueuse'sonClickOutsideutilityvueusefunctionalityChanges summary:
onClickOutsideutility fromvueuse. This simplifies the code and ensures proper cleanup. Additionally, unused code from the theme manager and custom settings was removed to streamline the implementation and improve maintainability.