From 4419b660cf5e2943be1bfc0d266779fd42a7ffd4 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Dec 2025 14:03:36 +0000
Subject: [PATCH 1/2] Add `as` prop to `Context/Item` component

---
 resources/js/components/ui/Context/Item.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Context/Item.vue b/resources/js/components/ui/Context/Item.vue
index 66ba698e92d..9349acb2a1e 100644
--- a/resources/js/components/ui/Context/Item.vue
+++ b/resources/js/components/ui/Context/Item.vue
@@ -1,10 +1,12 @@
 <script setup>
 import { ContextMenuItem } from 'reka-ui';
-import { useSlots } from 'vue';
+import {computed, useSlots} from 'vue';
 import Icon from '../Icon/Icon.vue';
 import { cva } from 'cva';
+import {Link} from "@inertiajs/vue3";
 
 const props = defineProps({
+	as: { type: String, default: null },
     href: { type: String, default: null },
     target: { type: String, default: '_self' },
     icon: { type: String, default: null },
@@ -14,6 +16,11 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
+const tag = computed(() => {
+	if (props.as) return props.as;
+	if (! props.href) return 'div';
+	return props.target === '_blank' ? 'a' : Link;
+});
 
 const classes = cva({
     base: [
@@ -46,7 +53,7 @@ const iconClasses = cva({
     <ContextMenuItem
         :class="classes"
         data-ui-context-item
-        :as="href ? 'a' : 'div'"
+        :as="tag"
         :href
         :target
     >

From 253b5bb2e4b10ae7df56a8d4a1d60d34773621bc Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 19 Dec 2025 11:18:35 -0500
Subject: [PATCH 2/2] nitpick (switch tabs to spaces)

---
 resources/js/components/ui/Context/Item.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/ui/Context/Item.vue b/resources/js/components/ui/Context/Item.vue
index 2e3344f7e1d..11429a04156 100644
--- a/resources/js/components/ui/Context/Item.vue
+++ b/resources/js/components/ui/Context/Item.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { ContextMenuItem } from 'reka-ui';
-import {computed, useSlots} from 'vue';
+import { computed, useSlots } from 'vue';
 import Icon from '../Icon/Icon.vue';
 import { cva } from 'cva';
-import {Link} from "@inertiajs/vue3";
+import { Link } from "@inertiajs/vue3";
 
 const props = defineProps({
-	as: { type: String, default: null },
+    /** The element or component this component should render as */
+    as: { type: String, default: null },
     /** The URL to link to */
     href: { type: String, default: null },
     /** When `href` is provided, this prop controls the link's `target` attribute */
@@ -22,9 +23,9 @@ const props = defineProps({
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 const tag = computed(() => {
-	if (props.as) return props.as;
-	if (! props.href) return 'div';
-	return props.target === '_blank' ? 'a' : Link;
+    if (props.as) return props.as;
+    if (! props.href) return 'div';
+    return props.target === '_blank' ? 'a' : Link;
 });
 
 const classes = cva({