refactor(NcModal): migrate to Typescript and script-setup #7514
+718
−929
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
susnux
added
3. to review
susnux
force-pushed
the
refactor/nc-modal-ts
branch
from
a488070 to
09e25d7
Compare
susnux
force-pushed
the
refactor/nc-modal-ts
branch
from
09e25d7 to
8ad5ebb
Compare
- Use Typescript for component - Use vueuse composable instead of custom Timer class Signed-off-by: Ferdinand Thiessen <[email protected]>
Instead of dialog example where we recommend to use NcDialog we should provide an example on how to use the slideshow feature. Signed-off-by: Ferdinand Thiessen <[email protected]>
Signed-off-by: Ferdinand Thiessen <[email protected]>
Signed-off-by: Ferdinand Thiessen <[email protected]>
Signed-off-by: Ferdinand Thiessen <[email protected]>
1. Script 2. Template 3. Styles 4. Docs Signed-off-by: Ferdinand Thiessen <[email protected]>
susnux
force-pushed
the
refactor/nc-modal-ts
branch
from
8ad5ebb to
d4641da
Compare
Contributor
Author
|
(just a rebase for CI) |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #7514 +/- ##
==========================================
+ Coverage 51.41% 52.20% +0.78%
==========================================
Files 96 95 -1
Lines 3147 3090 -57
Branches 867 863 -4
==========================================
- Hits 1618 1613 -5
+ Misses 1279 1235 -44
+ Partials 250 242 -8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
|
I'll check on the morning |
ShGKme
approved these changes
Nov 16, 2025
Contributor
ShGKme
left a comment
ShGKme
left a comment
There was a problem hiding this comment.
Nitpicks only.
Thanks for splitting into commits.
Comment on lines
+1015
to
+1016
| --slideshow-duration: v-bind('cssSlideshowDelay'); | ||
Contributor
There was a problem hiding this comment.
Is this variable needed? Cannot we use v-bind('cssSlideshowDelay') directly where the variable is used? Otherwise it looks like creating a CSS variable just to define another CSS variable just to use it in a single place.
| }>() | ||
| const modalId = createElementId() | ||
| const maskElement = useTemplateRef<HTMLDivElement>('mask') |
Contributor
There was a problem hiding this comment.
Suggested change
| const maskElement = useTemplateRef<HTMLDivElement>('mask') | |
| const maskElement = useTemplateRef('mask') |
| const modalId = createElementId() | ||
| const maskElement = useTemplateRef<HTMLDivElement>('mask') | ||
| const internalShow = ref(true) |
Contributor
There was a problem hiding this comment.
It seems to me we can simplify the component by just using defineModel. Then we don't need the second state, and the rest around the value is simpler. Is there anything blocking it I'm missing?
| useHotKey('Escape', () => { | ||
| const trapStack = getTrapStack() | ||
| // Only close the most recent focus trap modal | ||
| if (trapStack.length === 0 || trapStack[trapStack.length - 1] === focusTrap) { |
Contributor
There was a problem hiding this comment.
Suggested change
| if (trapStack.length === 0 || trapStack[trapStack.length - 1] === focusTrap) { | |
| if (trapStack.at(-1) === focusTrap) { |
| import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiPause, mdiPlay } from '@mdi/js' | ||
| import { useIntervalFn, useSwipe } from '@vueuse/core' | ||
| import { createFocusTrap } from 'focus-trap' | ||
| import { computed, nextTick, onMounted, onUnmounted, ref, toRef, useTemplateRef, warn as VueWarn, watch, watchEffect } from 'vue' |
Contributor
There was a problem hiding this comment.
warn as VueWarn
Seems like we can just use warn now
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
☑️ Resolves
This consists of multiple refactoring as you can review individually with each commit.
Basically this migrates the component to Typescript and then to script-setup with new consistent tag order.
By doing so also removed the last JS util (Timer) and just uses the
useIntervalFnfrom vueuse.🏁 Checklist
stable8for maintained Vue 2 version or not applicable