@@ -5,123 +5,104 @@ import { useRoute } from 'vue-router'
55import { useSiteData } from '../composables/index.js'
66import { RouteLink } from './RouteLink.js'
77
8- export interface AutoLinkConfig {
8+ export interface AutoLinkProps {
99 /**
10- * Text of item
11- *
12- * 项目文字
10+ * Pattern to determine if the link should be active, which has higher priority than `exact`
1311 */
14- text : string
12+ activeMatch ? : string | RegExp
1513
1614 /**
17- * Aria label of item
18- *
19- * 项目无障碍标签
15+ * The `aria-label` attribute
2016 */
2117 ariaLabel ?: string
2218
2319 /**
24- * Link of item
25- *
26- * 当前页面链接
20+ * Whether the link should be active only if the url is an exact match
21+ */
22+ exact ?: boolean
23+
24+ /**
25+ * URL of the auto link
2726 */
2827 link : string
2928
3029 /**
31- * Rel of `<a>` tag
32- *
33- * `<a>` 标签的 `rel` 属性
30+ * The `rel` attribute
3431 */
3532 rel ?: string
3633
3734 /**
38- * Target of `<a>` tag
39- *
40- * `<a>` 标签的 `target` 属性
35+ * The `target` attribute
4136 */
4237 target ?: string
4338
4439 /**
45- * Regexp mode to be active
46- *
47- * 匹配激活的正则表达式
40+ * Text of the auto link
4841 */
49- activeMatch ? : string
42+ text : string
5043}
5144
45+ /**
46+ * Component to render a link automatically according to the link type
47+ *
48+ * - If the link is internal, it will be rendered as a `<RouteLink>`
49+ * - If the link is external, it will be rendered as a normal `<a>` tag
50+ */
5251export const AutoLink = defineComponent ( {
5352 name : 'AutoLink' ,
5453
5554 props : {
5655 /**
57- * Text of item
58- *
59- * 项目文字
56+ * Pattern to determine if the link should be active, which has higher priority than `exact`
6057 */
61- text : {
62- type : String ,
63- required : true ,
58+ activeMatch : {
59+ type : [ String , RegExp ] ,
60+ default : '' ,
6461 } ,
6562
6663 /**
67- * Link of item
68- *
69- * 当前页面链接
64+ * The `aria-label` attribute
7065 */
71- link : {
66+ ariaLabel : {
7267 type : String ,
73- required : true ,
68+ default : '' ,
7469 } ,
7570
7671 /**
77- * Aria label of item
78- *
79- * 项目无障碍标签
72+ * Whether the link should be active only if the url is an exact match
8073 */
81- ariaLabel : {
74+ exact : Boolean ,
75+
76+ /**
77+ * URL of the auto link
78+ */
79+ link : {
8280 type : String ,
83- default : '' ,
81+ required : true ,
8482 } ,
8583
8684 /**
87- * Rel of `<a>` tag
88- *
89- * `<a>` 标签的 `rel` 属性
85+ * The `rel` attribute
9086 */
9187 rel : {
9288 type : String ,
9389 default : '' ,
9490 } ,
9591
9692 /**
97- * Target of `<a>` tag
98- *
99- * `<a>` 标签的 `target` 属性
93+ * The `target` attribute
10094 */
10195 target : {
10296 type : String ,
10397 default : '' ,
10498 } ,
10599
106100 /**
107- * Whether it's active only when exact match
108- *
109- * 是否当恰好匹配时激活
110- */
111- exact : Boolean ,
112-
113- /**
114- * Regexp mode to be active
115- *
116- * @description has higher priority than exact
117- *
118- * 匹配激活的正则表达式
119- *
120- * @description 比 exact 的优先级更高
101+ * Text of the auto link
121102 */
122- activeMatch : {
123- type : [ String , RegExp ] ,
124- default : '' ,
103+ text : {
104+ type : String ,
105+ required : true ,
125106 } ,
126107 } ,
127108
@@ -177,28 +158,26 @@ export const AutoLink = defineComponent({
177158 const isActive = computed ( ( ) => {
178159 if ( ! isInternal . value ) return false
179160
180- if ( props . activeMatch )
161+ if ( props . activeMatch ) {
181162 return (
182163 props . activeMatch instanceof RegExp
183164 ? props . activeMatch
184165 : new RegExp ( props . activeMatch , 'u' )
185166 ) . test ( route . path )
167+ }
186168
187169 // If this link is active in subpath
188- if ( shouldBeActiveInSubpath . value )
170+ if ( shouldBeActiveInSubpath . value ) {
189171 return route . path . startsWith ( props . link )
172+ }
190173
191174 return route . path === props . link
192175 } )
193176
194- return ( ) : VNode => {
177+ return ( ) => {
195178 const { before, after, default : defaultSlot } = slots
196179
197- const content = defaultSlot ?.( ) || [
198- before ? before ( ) : null ,
199- props . text ,
200- after ?.( ) ,
201- ]
180+ const content = defaultSlot ?.( ) || [ before ?.( ) , props . text , after ?.( ) ]
202181
203182 return isInternal . value
204183 ? h (
@@ -216,9 +195,9 @@ export const AutoLink = defineComponent({
216195 {
217196 'class' : 'auto-link external-link' ,
218197 'href' : props . link ,
198+ 'aria-label' : linkAriaLabel . value ,
219199 'rel' : linkRel . value ,
220200 'target' : linkTarget . value ,
221- 'aria-label' : linkAriaLabel . value ,
222201 } ,
223202 content ,
224203 )
0 commit comments