Repository navigation
fix(vue-action): follow the RouterLink on click, parse string to, disable links without href - #316
Merged
Merged
Conversation
…isable links without `href` - Navigate with the `navigate` function the RouterLink passes to its slot, so a click goes where the rendered `href` points. `router.push` and `registerRouteActionHandler` remain as the fallback when the slot has no `navigate`. (#314) - Keep the leading `#` of the hash, parse the query with Vue Router's `parseQuery`, and render a `to` with a protocol as a plain `<a href>` instead of joining it to the current path. Export `isExternalLocation`. (#315) - Render a disabled link without `href`, with `role="link"` and `aria-disabled="true"`, and drop the `disabled` attribute that `<a>` does not have. A disabled link could still be followed with a modifier key, a middle click or `target`, and a disabled `href` link without `guard` or `onClick` on a plain click. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 25ac70a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Merged
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
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.
Fixes #314.
Fixes #315.
Problem
hrefof the RouterLink #314: Withto, the renderedhrefcame from the RouterLink's slot, but a click navigated withrouter.push(to). Anything the RouterLink applied to the location (NuxtLink'strailingSlash, a wrapper that adds a locale prefix) showed in thehrefbut not in the navigation.tobreaks the hash, the query, and absolute URLs #315: A stringtowas parsed by hand. The hash lost its#(/a/#b→/a/b), query values were not decoded and were cut at a second=, repeated keys kept only the last value, andhttps:/tel:/mailto:were joined to the current path as relative paths.hrefand was rendered as<a disabled="true">, an attribute<a>does not have. A modifier-key click, a middle click ortargetstill followed it, and a disabledhreflink withoutguardoronClickwas followed on a plain click. With the protocoltofrom vue-action: stringtobreaks the hash, the query, and absolute URLs #315 rendered ashref, this would also have applied toto.Change
@fastkit/vue-action(minor)navigate()(Option B in vue-action: navigation on click can diverge from the renderedhrefof the RouterLink #314). It is called without the event: the click handler has already prevented its default, and Vue Router'snavigateignores such events. When the slot has nonavigate, the previousrouter.pushandregisterRouteActionHandlerare used. NuxtLink's custom slot providesnavigateand it matches thehref.to: the hash keeps its#; the query goes through Vue Router'sparseQuery; atowith a protocol, or a protocol-relative one, is rendered as a plain<a href>.isExternalLocation()is exported.toorhref) is rendered withouthref, withrole="link"andaria-disabled="true", and withoutdisabled. It is not focusable, like a disabled button. Enabled links get no explicitrole, since it would be redundant. Buttons keepdisabled.Impact
registerRouteActionHandleris only called in the fallback. A handler that existed only to keep the navigation in sync with the RouterLink is no longer needed.[disabled]no longer match;[aria-disabled='true']does.@fastkit/vuialready selects both. The changeset says this.Verification
packages/vue-action/src/__tests__/:utils.spec.ts: the cases from vue-action: stringtobreaks the hash, the query, and absolute URLs #315 resolved with Vue Router, plusisExternalLocation.actionable.client.spec.ts:href;replacestill works;navigate;tois rendered as a plain link;to, a protocoltoandhrefhave nohrefand do not navigate;disabled.main. Thereplace, fallback and button tests pass on both, as regression guards.pnpm typecheck; lint, build and tests forvue-action; typecheck and tests forvui.🤖 Generated with Claude Code