feat(client): support slot props in AutoLink

Author: meteorlxy

e2e/docs/components/auto-link.md

@@ -19,6 +19,23 @@
   <AutoLink download="example-test.png" :config="{ text: 'text3', link: 'https://example.com/test.png' }" />
 </div>
 
+<div id="slots">
+  <AutoLink :config="{ text: 'text1', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    slot-text
+  </AutoLink>
+  <AutoLink :config="{ text: 'text2', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    <template v-slot="{ ariaLabel }">{{ ariaLabel }}</template>
+  </AutoLink>
+  <AutoLink :config="{ text: 'text3', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    <template #before>before</template>
+    <template #after>after</template>
+  </AutoLink>
+  <AutoLink :config="{ text: 'text4', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    <template #before="{ ariaLabel }">before {{ ariaLabel }}</template>
+    <template #after="{ ariaLabel }">after {{ ariaLabel }}</template>
+  </AutoLink>
+</div>
+
 <script setup lang="ts">
 import { AutoLink } from 'vuepress/client'
 

e2e/tests/components/auto-link.spec.ts

@@ -65,3 +65,12 @@ test('should append attrs correctly', async ({ page }) => {
   await expect(locator.nth(2)).toHaveAttribute('rel', 'noopener noreferrer')
   await expect(locator.nth(2)).toHaveAttribute('download', 'example-test.png')
 })
+
+test('should render slots correctly', async ({ page }) => {
+  const locator = page.locator('.e2e-theme-content #slots a')
+
+  await expect(locator.nth(0)).toHaveText('slot-text')
+  await expect(locator.nth(1)).toHaveText('label')
+  await expect(locator.nth(2)).toHaveText('beforetext3after')
+  await expect(locator.nth(3)).toHaveText('before labeltext4after label')
+})

packages/client/src/components/AutoLink.ts

@@ -59,9 +59,9 @@ export const AutoLink = defineComponent({
   },
 
   slots: Object as SlotsType<{
-    default?: () => VNode[] | VNode
-    before?: () => VNode[] | VNode | null
-    after?: () => VNode[] | VNode | null
+    default?: (config: AutoLinkConfig) => VNode[] | VNode
+    before?: (config: AutoLinkConfig) => VNode[] | VNode | null
+    after?: (config: AutoLinkConfig) => VNode[] | VNode | null
   }>,
 
   setup(props, { slots }) {
@@ -134,10 +134,10 @@ export const AutoLink = defineComponent({
     return () => {
       const { before, after, default: defaultSlot } = slots
 
-      const content = defaultSlot?.() || [
-        before?.(),
+      const content = defaultSlot?.(config.value) || [
+        before?.(config.value),
         config.value.text,
-        after?.(),
+        after?.(config.value),
       ]
 
       return isInternal.value