Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2.x] Allow custom component on Link "as" prop in React, Vue2 and Vue3 #1940

Open
wants to merge 5 commits into
base: v1
Choose a base branch
from
Open

[2.x] Allow custom component on Link "as" prop in React, Vue2 and Vue3 #1940

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d74724
Allow custom component on Link "as" prop in React and Vue3
guizoxxv Aug 11, 2024
3295dc0
Allow custom component on Link "as" prop in Vue2
guizoxxv Aug 11, 2024
4e55bb2
Keep href in anchor on Vue3
guizoxxv Sep 18, 2024
bfc25e4
Keep href in anchor on React
guizoxxv Sep 18, 2024
78429ec
Revert "Allow custom component on Link "as" prop in Vue2"
guizoxxv Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/react/src/Link.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import {
router,
shouldIntercept,
} from '@inertiajs/core'
import { createElement, forwardRef, useCallback } from 'react'
import React, { ElementType, createElement, forwardRef, useCallback } from 'react'

const noop = () => undefined

interface BaseInertiaLinkProps {
as?: string
as?: string | ElementType
data?: Record<string, FormDataConvertible>
href: string
method?: Method
Expand Down Expand Up @@ -115,13 +115,13 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
],
)

as = as.toLowerCase()
const isAnchor = as === 'a' || as === 'A'
method = method.toLowerCase() as Method
const [_href, _data] = mergeDataIntoQueryString(method, href || '', data, queryStringArrayFormat)
href = _href
data = _data

if (as === 'a' && method !== 'get') {
if (isAnchor && method !== 'get') {
console.warn(
`Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
)
Expand All @@ -131,7 +131,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
as,
{
...props,
...(as === 'a' ? { href } : {}),
...(isAnchor ? { href } : {}),
ref,
onClick: visit,
},
Expand Down
14 changes: 7 additions & 7 deletions packages/vue2/src/link.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import {
router,
shouldIntercept,
} from '@inertiajs/core'
import { FunctionalComponentOptions, PropType } from 'vue'
import { Component, FunctionalComponentOptions, PropType } from 'vue'

export interface InertiaLinkProps {
as?: string
as?: string | Component
data?: Record<string, FormDataConvertible>
href: string
method?: Method
Expand All @@ -37,7 +37,7 @@ const Link: InertiaLink = {
functional: true,
props: {
as: {
type: String,
type: [String, Object] as PropType<string | Component>,
default: 'a',
},
data: {
Expand Down Expand Up @@ -93,7 +93,7 @@ const Link: InertiaLink = {
...(data.on || {}),
}

const as = props.as.toLowerCase()
const isAnchor = props.as === 'a' || props.as === 'A'
const method = props.method.toLowerCase() as Method
const [href, propsData] = mergeDataIntoQueryString(
method,
Expand All @@ -102,7 +102,7 @@ const Link: InertiaLink = {
props.queryStringArrayFormat,
)

if (as === 'a' && method !== 'get') {
if (isAnchor && method !== 'get') {
console.warn(
`Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
)
Expand All @@ -114,7 +114,7 @@ const Link: InertiaLink = {
...data,
attrs: {
...data.attrs,
...(as === 'a' ? { href } : {}),
...(isAnchor ? { href } : {}),
},
on: {
...data.on,
Expand Down Expand Up @@ -159,4 +159,4 @@ const Link: InertiaLink = {
)
},
}
export default Link
export default Link
12 changes: 6 additions & 6 deletions packages/vue3/src/link.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { mergeDataIntoQueryString, Method, PageProps, Progress, router, shouldIntercept } from '@inertiajs/core'
import { defineComponent, DefineComponent, h, PropType } from 'vue'
import { Component, defineComponent, DefineComponent, h, PropType } from 'vue'

export interface InertiaLinkProps {
as?: string
as?: string | Component
data?: object
href: string
method?: Method
Expand All @@ -29,7 +29,7 @@ const Link: InertiaLink = defineComponent({
name: 'Link',
props: {
as: {
type: String,
type: [String, Object] as PropType<string | Component>,
default: 'a',
},
data: {
Expand Down Expand Up @@ -75,11 +75,11 @@ const Link: InertiaLink = defineComponent({
},
setup(props, { slots, attrs }) {
return () => {
const as = props.as.toLowerCase()
const isAnchor = props.as === 'a' || props.as === 'A'
const method = props.method.toLowerCase() as Method
const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, props.queryStringArrayFormat)

if (as === 'a' && method !== 'get') {
if (isAnchor && method !== 'get') {
console.warn(
`Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
)
Expand All @@ -89,7 +89,7 @@ const Link: InertiaLink = defineComponent({
props.as,
{
...attrs,
...(as === 'a' ? { href } : {}),
...(isAnchor ? { href } : {}),
onClick: (event) => {
if (shouldIntercept(event)) {
event.preventDefault()
Expand Down
Loading