-
Notifications
You must be signed in to change notification settings - Fork 921
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
588 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| # AutoLink | ||
|
|
||
| <div id="route-link"> | ||
| <AutoLink v-for="item in routeLinksConfig" :config="item" /> | ||
| </div> | ||
|
|
||
| <div id="anchor-link"> | ||
| <AutoLink v-for="item in anchorLinksConfig" :config="item" /> | ||
| </div> | ||
|
|
||
| <div id="aria-label"> | ||
| <AutoLink :config="{ text: 'text', link: '/', ariaLabel: 'label' }" /> | ||
| </div> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { AutoLink } from 'vuepress/client' | ||
|
|
||
| const routeLinks = [ | ||
| '/', | ||
| '/README.md', | ||
| '/index.html', | ||
| '/non-existent', | ||
| '/non-existent.md', | ||
| '/non-existent.html', | ||
| '/routes/non-ascii-paths/中文目录名/中文文件名', | ||
| '/routes/non-ascii-paths/中文目录名/中文文件名.md', | ||
| '/routes/non-ascii-paths/中文目录名/中文文件名.html', | ||
| '/README.md#hash', | ||
| '/README.md?query', | ||
| '/README.md?query#hash', | ||
| '/#hash', | ||
| '/?query', | ||
| '/?query#hash', | ||
| '#hash', | ||
| '?query', | ||
| '?query#hash', | ||
| 'route-link', | ||
| 'route-link.md', | ||
| 'route-link.html', | ||
| 'not-existent', | ||
| 'not-existent.md', | ||
| 'not-existent.html', | ||
| '../', | ||
| '../README.md', | ||
| '../404.md', | ||
| '../404.html', | ||
| ] | ||
|
|
||
| const routeLinksConfig = routeLinks.map((link) => ({ link, text: 'text' })) | ||
|
|
||
| const anchorLinks = [ | ||
| '//example.com', | ||
| 'http://example.com', | ||
| 'https://example.com', | ||
| 'mailto:example@example.com', | ||
| 'tel:+1234567890', | ||
| ] | ||
|
|
||
| const anchorLinksConfig = anchorLinks.map((link) => ({ link, text: 'text' })) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| it('AutoLink', () => { | ||
| cy.visit('/components/auto-link.html') | ||
|
|
||
| cy.get(`.e2e-theme-content #route-link a`).each((el) => { | ||
| cy.wrap(el) | ||
| .should('have.attr', 'class') | ||
| .and('match', /route-link/) | ||
| }) | ||
|
|
||
| cy.get(`.e2e-theme-content #anchor-link a`).each((el) => { | ||
| cy.wrap(el) | ||
| .should('have.attr', 'class') | ||
| .and('match', /anchor-link/) | ||
| }) | ||
|
|
||
| cy.get(`.e2e-theme-content #aria-label a`).each((el) => { | ||
| cy.wrap(el).should('have.attr', 'aria-label').and('eq', 'label') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| import { isLinkWithProtocol } from '@vuepress/shared' | ||
| import type { PropType, SlotsType, VNode } from 'vue' | ||
| import { computed, defineComponent, h, toRef } from 'vue' | ||
| import { useRoute } from 'vue-router' | ||
| import { useSiteData } from '../composables/index.js' | ||
| import { RouteLink } from './RouteLink.js' | ||
|
|
||
| export interface AutoLinkProps { | ||
| /** | ||
| * Text of item | ||
| * | ||
| * 项目文字 | ||
| */ | ||
| text: string | ||
|
|
||
| /** | ||
| * Aria label of item | ||
| * | ||
| * 项目无障碍标签 | ||
| */ | ||
| ariaLabel?: string | ||
|
|
||
| /** | ||
| * Link of item | ||
| * | ||
| * 当前页面链接 | ||
| */ | ||
| link: string | ||
|
|
||
| /** | ||
| * Rel of `<a>` tag | ||
| * | ||
| * `<a>` 标签的 `rel` 属性 | ||
| */ | ||
| rel?: string | ||
|
|
||
| /** | ||
| * Target of `<a>` tag | ||
| * | ||
| * `<a>` 标签的 `target` 属性 | ||
| */ | ||
| target?: string | ||
|
|
||
| /** | ||
| * Regexp mode to be active | ||
| * | ||
| * 匹配激活的正则表达式 | ||
| */ | ||
| activeMatch?: string | ||
| } | ||
|
|
||
| export const AutoLink = defineComponent({ | ||
| name: 'AutoLink', | ||
|
|
||
| props: { | ||
| /** | ||
| * @description Autolink config | ||
| */ | ||
| config: { | ||
| type: Object as PropType<AutoLinkProps>, | ||
| required: true, | ||
| }, | ||
|
|
||
| /** | ||
| * @description Whether it's active only when exact match | ||
| */ | ||
| exact: Boolean, | ||
| }, | ||
|
|
||
| slots: Object as SlotsType<{ | ||
| default?: () => VNode[] | VNode | ||
| before?: () => VNode[] | VNode | null | ||
| after?: () => VNode[] | VNode | null | ||
| }>, | ||
|
|
||
| setup(props, { slots }) { | ||
| const route = useRoute() | ||
| const siteData = useSiteData() | ||
|
|
||
| const config = toRef(props, 'config') | ||
|
|
||
| // If the link has non-http protocol | ||
| const withProtocol = computed(() => isLinkWithProtocol(config.value.link)) | ||
|
|
||
| // Resolve the `target` attr | ||
| const linkTarget = computed( | ||
| () => config.value.target || (withProtocol.value ? '_blank' : undefined), | ||
| ) | ||
|
|
||
| // If the `target` attr is "_blank" | ||
| const isBlankTarget = computed(() => linkTarget.value === '_blank') | ||
|
|
||
| // Whether the link is internal | ||
| const isInternal = computed( | ||
| () => !withProtocol.value && !isBlankTarget.value, | ||
| ) | ||
|
|
||
| // Resolve the `rel` attr | ||
| const linkRel = computed( | ||
| () => | ||
| config.value.rel || | ||
| (isBlankTarget.value ? 'noopener noreferrer' : null), | ||
| ) | ||
|
|
||
| // Resolve the `aria-label` attr | ||
| const linkAriaLabel = computed( | ||
| () => config.value.ariaLabel || config.value.text, | ||
| ) | ||
|
|
||
| // Should be active when current route is a subpath of this link | ||
| const shouldBeActiveInSubpath = computed(() => { | ||
| // Should not be active in `exact` mode | ||
| if (props.exact) return false | ||
|
|
||
| const localeKeys = Object.keys(siteData.value.locales) | ||
|
|
||
| return localeKeys.length | ||
| ? // Check all the locales | ||
| localeKeys.every((key) => key !== config.value.link) | ||
| : // Check root | ||
| config.value.link !== '/' | ||
| }) | ||
|
|
||
| // If this link is active | ||
| const isActive = computed( | ||
| () => | ||
| isInternal.value && | ||
| (config.value.activeMatch | ||
| ? new RegExp(config.value.activeMatch, 'u').test(route.path) | ||
| : // If this link is active in subpath | ||
| shouldBeActiveInSubpath.value | ||
| ? route.path.startsWith(config.value.link) | ||
| : route.path === config.value.link), | ||
| ) | ||
|
|
||
| return (): VNode => { | ||
| const { text, link } = config.value | ||
| const { before, after, default: defaultSlot } = slots | ||
|
|
||
| const content = defaultSlot?.() || [ | ||
| before ? before() : null, | ||
| text, | ||
| after?.(), | ||
| ] | ||
|
|
||
| return isInternal.value | ||
| ? h( | ||
| RouteLink, | ||
| { | ||
| 'class': 'auto-link', | ||
| 'to': link, | ||
| 'active': isActive.value, | ||
| 'aria-label': linkAriaLabel.value, | ||
| }, | ||
| () => content, | ||
| ) | ||
| : h( | ||
| 'a', | ||
| { | ||
| 'class': 'auto-link anchor-link', | ||
| 'href': link, | ||
| 'rel': linkRel.value, | ||
| 'target': linkTarget.value, | ||
| 'aria-label': linkAriaLabel.value, | ||
| }, | ||
| content, | ||
| ) | ||
| } | ||
| }, | ||
| }) |
Oops, something went wrong.