feat: add disabled attribute handling to link

packages/vue3/src/link.ts

@@ -36,6 +36,7 @@ export interface InertiaLinkProps {
   async?: boolean
   prefetch?: boolean | LinkPrefetchOption | LinkPrefetchOption[]
   cacheFor?: CacheForOption | CacheForOption[]
+  disabled?: boolean
 }
 
 type InertiaLink = DefineComponent<InertiaLinkProps>
@@ -132,6 +133,10 @@ const Link: InertiaLink = defineComponent({
       type: Function as PropType<(cancelToken: import('axios').CancelTokenSource) => void>,
       default: () => {},
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, { slots, attrs }) {
     const inFlightCount = ref(0)
@@ -185,7 +190,7 @@ const Link: InertiaLink = defineComponent({
 
     const elProps = {
       a: { href },
-      button: { type: 'button' },
+      button: { type: 'button', disabled: props.disabled },
     }
 
     const baseParams = {
@@ -219,14 +224,18 @@ const Link: InertiaLink = defineComponent({
     }
 
     const prefetch = () => {
-      router.prefetch(href, baseParams, { cacheFor: cacheForValue })
+      if (!props.disabled) {
+        router.prefetch(href, baseParams, { cacheFor: cacheForValue })
+      }
     }
 
     const regularEvents = {
       onClick: (event) => {
         if (shouldIntercept(event)) {
           event.preventDefault()
-          router.visit(href, visitParams)
+          if (!props.disabled) {
+            router.visit(href, visitParams)
+          }
         }
       },
     }
@@ -252,7 +261,9 @@ const Link: InertiaLink = defineComponent({
       },
       onMouseup: (event) => {
         event.preventDefault()
-        router.visit(href, visitParams)
+        if (!props.disabled) {
+          router.visit(href, visitParams)
+        }
       },
       onClick: (event) => {
         if (shouldIntercept(event)) {

packages/vue3/test-app/Pages/Links/Disabled.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <div>
+    <span class="text">This is the links page that demonstrates disabled attribute</span>
+
+    <Link href="/#" class="disabled-default" disabled>Disabled Default</Link>
+    <Link href="/#" class="disabled" :disabled="true">Disabled</Link>
+    <Link href="/links/disabled" class="enabled" :disabled="false">Enabled</Link>
+    <Link href="/links/disabled" class="enabled-default">Enabled Default</Link>
+
+    <Link as='button' href="/#" class="disabled-default" disabled>Disabled Default Button</Link>
+    <Link as='button' href="/#" class="disabled" :disabled="true">Disabled Button</Link>
+    <Link as='button' href="/links/disabled" class="enabled" :disabled="false">Enabled Button</Link>
+    <Link as='button' href="/links/disabled" class="enabled-default">Enabled Default Button</Link>
+  </div>
+</template>

tests/app/server.js

@@ -73,6 +73,8 @@ app.get('/links/headers/version', (req, res) =>
 )
 app.get('/links/data-loading', (req, res) => inertia.render(req, res, { component: 'Links/DataLoading' }))
 
+app.get('/links/disabled', (req, res) => inertia.render(req, res, { component: 'Links/Disabled' }))
+
 app.get('/visits/partial-reloads', (req, res) =>
   inertia.render(req, res, {
     component: 'Visits/PartialReloads',

tests/links.spec.ts

@@ -754,3 +754,69 @@ test.describe('data-loading attribute', () => {
     await expect(link2).not.toHaveAttribute('data-loading')
   })
 })
+
+test.describe('disabled attribute', () => {
+  test('disables the link when the disabled attribute is set to true', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('link', { name: 'Disabled', exact: true })
+    await expect(link).not.toHaveAttribute('disabled')
+    await link.click()
+    await expect(page).toHaveURL('/links/disabled')
+  })
+
+  test('disables the link when the disabled attribute exists', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('link', { name: 'Disabled Default', exact: true })
+    await expect(link).not.toHaveAttribute('disabled')
+    await link.click()
+    await expect(page).toHaveURL('/links/disabled')
+  })
+
+  test('does not disable the link when the disabled attribute is set to false', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('link', { name: 'Enabled', exact: true })
+    await expect(link).not.toHaveAttribute('disabled')
+    await link.click()
+    await expect(page).toHaveURL('/links/disabled')
+  })
+
+  test('does not disable the link when the disabled attribute not exists', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('link', { name: 'Enabled Default', exact: true })
+    await expect(link).not.toHaveAttribute('disabled')
+    await link.click()
+    await expect(page).toHaveURL('/links/disabled')
+  })
+
+  test('disables the link (as=button) when the disabled attribute is set to true', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('button', { name: 'Disabled Button', exact: true })
+    await expect(link).toBeDisabled()
+    await expect(link).toHaveAttribute('disabled')
+  })
+
+  test('disables the link (as=button) when the disabled attribute is set', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('button', { name: 'Disabled Default Button', exact: true })
+    await expect(link).toBeDisabled()
+    await expect(link).toHaveAttribute('disabled')
+  })
+
+  test('does not disable the link (as=button) when the disabled attribute is set to false', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('button', { name: 'Enabled Button', exact: true })
+    await expect(link).not.toBeDisabled()
+    await expect(link).not.toHaveAttribute('disabled')
+    await link.click()
+    await expect(page).toHaveURL('/links/disabled')
+  })
+
+  test('does not disable the link (as=button) when the disabled attribute is not set', async ({ page }) => {
+    await page.goto('/links/disabled')
+    const link = await page.getByRole('button', { name: 'Enabled Default Button', exact: true })
+    await expect(link).not.toBeDisabled()
+    await expect(link).not.toHaveAttribute('disabled')
+    await link.click()
+    await expect(page).toHaveURL('/links/disabled')
+  })
+})