feat(link): enhance slot functionality in link components to pass isHref prop for better context handling

Author: honghuangdc

headless/src/components/link/link.vue

@@ -84,9 +84,9 @@ const handleClick = (event: Event) => {
 
 <template>
   <Primitive v-if="isHref" v-bind="forwardedProps" @click="handleClick">
-    <slot />
+    <slot :is-href="true" />
   </Primitive>
   <component :is="LinkComponent" v-else v-bind="forwardedProps" @click="handleClick">
-    <slot />
+    <slot :is-href="false" />
   </component>
 </template>

headless/src/components/navigation-menu/navigation-menu-link.vue

@@ -47,13 +47,14 @@ const onClick = async (event: MouseEvent) => {
 
 <template>
   <Link
+    v-slot="{ isHref }"
     v-bind="forwardedProps"
     :ref="setItemElement"
     :class="cls"
     :data-active="active ? '' : undefined"
     :aria-current="active ? 'page' : undefined"
     @click="onClick"
   >
-    <slot />
+    <slot :is-href="isHref" />
   </Link>
 </template>

src/components/link/link.vue

@@ -25,7 +25,7 @@ const cls = computed(() => cn(variants, props.class));
 </script>
 
 <template>
-  <Link v-bind="props" :class="cls">
-    <slot />
+  <Link v-slot="{ isHref }" v-bind="props" :class="cls">
+    <slot :is-href="isHref" />
   </Link>
 </template>

src/components/menu/menu-option.vue

@@ -66,12 +66,12 @@ const ui = computed(() => ({ ...themeContext?.ui?.value }));
     :text-value="item.textValue"
     @select="emit('select', item, $event)"
   >
-    <Link v-bind="item.linkProps" :disabled="item.disabled">
+    <Link v-slot="{ isHref }" v-bind="item.linkProps" :disabled="item.disabled">
       <SMenuItemSlot :icon="item.icon" :label="item.label">
         <template v-for="slotKey in commonSlotKeys" :key="slotKey" #[slotKey]>
           <slot :name="slotKey" :item="item" />
         </template>
-        <template #link-icon>
+        <template v-if="isHref" #link-icon>
           <slot name="item-link-icon" :item="item">
             <Icon icon="lucide:arrow-up-right" :class="ui.itemLinkIcon" />
           </slot>

src/components/navigation-menu/navigation-menu-option.vue

@@ -47,6 +47,7 @@ const { ui } = useNavigationMenuExtraThemeContext('NavigationMenuOption');
   <NavigationMenuItem v-bind="itemProps" :value="item.value">
     <NavigationMenuLink
       v-if="!item.children?.length"
+      v-slot="{ isHref }"
       v-bind="item.linkProps"
       :disabled="item.disabled"
       @select="emit('select', $event)"
@@ -56,7 +57,7 @@ const { ui } = useNavigationMenuExtraThemeContext('NavigationMenuOption');
         <template v-for="slotKey in commonSlotKeys" :key="slotKey" #[slotKey]>
           <slot :name="slotKey" :item="item" />
         </template>
-        <template #link-icon>
+        <template v-if="isHref" #link-icon>
           <slot name="item-link-icon" :item="item">
             <Icon icon="lucide:arrow-up-right" :class="ui.linkIcon" />
           </slot>

src/components/tree-menu/tree-menu-item.vue

@@ -26,7 +26,7 @@ const attrs = useAttrs();
 
 const listeners = useForwardListeners(emit);
 
-const { size, collapsed, showLinkIcon } = useTreeMenuContext('TreeMenuItem');
+const { size, collapsed } = useTreeMenuContext('TreeMenuItem');
 
 const { ui } = useTreeMenuThemeContext('TreeMenuItem');
 
@@ -102,6 +102,7 @@ const onDropdownMenuSelect = (item: TreeMenuBaseOptionData) => {
   >
     <component
       :is="as"
+      v-slot="slotProps"
       v-bind="contentProps"
       :class="ui.itemContent"
       :data-link="isLink ? '' : undefined"
@@ -116,7 +117,7 @@ const onDropdownMenuSelect = (item: TreeMenuBaseOptionData) => {
         </Badge>
         <span v-else :class="ui.itemLabel">{{ label }}</span>
       </slot>
-      <Icon v-if="isLink && showLinkIcon" icon="lucide:arrow-up-right" :class="ui.itemLinkIcon" />
+      <Icon v-if="isLink && slotProps?.isHref" icon="lucide:arrow-up-right" :class="ui.itemLinkIcon" />
       <Tag v-if="tag" v-bind="tagProps" :size="size" :content="tag" :class="ui.itemTag" />
       <DropdownMenu
         v-if="actions?.length"

src/components/tree-menu/tree-menu.vue

@@ -3,7 +3,6 @@ import { computed, watch } from 'vue';
 import type { CSSProperties } from 'vue';
 import { TreeRoot } from '@soybeanjs/headless';
 import { useControllableState, useForwardListeners, useOmitProps } from '@soybeanjs/headless/composables';
-import { transformPropsToContext } from '@soybeanjs/headless/shared';
 import { vAutoAnimate } from '@formkit/auto-animate';
 import { mergeSlotVariants, themeSizeMap, themeSizeRatio } from '@/theme';
 import { treeMenuVariants } from '@/variants/tree-menu';
@@ -82,8 +81,7 @@ const size = computed(() => props.size ?? 'md');
 
 provideTreeMenuContext({
   collapsed,
-  size,
-  ...transformPropsToContext(props, ['showLinkIcon'])
+  size
 });
 
 provideTreeMenuThemeContext({

src/components/tree-menu/types.ts

@@ -2,7 +2,6 @@ import type { ComputedRef, ShallowRef } from 'vue';
 import type {
   ClassValue,
   LinkProps,
-  PropsToContext,
   TreeItemEmits,
   TreeItemProps,
   TreeRootEmits,
@@ -91,14 +90,13 @@ export interface TreeMenuProps<T extends TreeMenuOptionData = TreeMenuOptionData
   badgeProps?: Omit<BadgeProps, 'content'>;
   tagProps?: Omit<TagProps, 'content'>;
   actionMenuProps?: Omit<DropdownMenuProps, 'items'>;
-  showLinkIcon?: boolean;
 }
 
 export type TreeMenuEmits = TreeRootEmits<false> & {
   'update:collapsed': [value: boolean];
 };
 
-export interface TreeMenuContextParams extends PropsToContext<TreeMenuProps, 'showLinkIcon'> {
+export interface TreeMenuContextParams {
   collapsed: ShallowRef<boolean | undefined>;
   size?: ComputedRef<ThemeSize>;
 }