[6.x] Add as prop to ContextItem component (#13389)

Co-authored-by: Jason Varga <[email protected]>

Author: duncanmcclean

resources/js/components/ui/Context/Item.vue

@@ -1,10 +1,13 @@
 <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({
+    /** 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 */
@@ -19,6 +22,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: [
@@ -51,7 +59,7 @@ const iconClasses = cva({
     <ContextMenuItem
         :class="classes"
         data-ui-context-item
-        :as="href ? 'a' : 'div'"
+        :as="tag"
         :href
         :target
     >