Skip to content

Commit ac8619f

Browse files
szsascharichardo2016kiakingbrc-dd
authoredOct 31, 2022
feat(theme): add built-in global component Badge (#1239)
Co-authored-by: richardo2016 <richardo2016@gmail.com> Co-authored-by: Kia Ishii <kia.king.08@gmail.com> Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
·
v2.0.0-alpha.4v1.0.0-alpha.27
1 parent f36cd0d commit ac8619f

File tree

8 files changed

+192
-6
lines changed

8 files changed

+192
-6
lines changed
 

‎docs/.vitepress/config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ function sidebarGuide() {
108108
{ text: 'Layout', link: '/guide/theme-layout' },
109109
{ text: 'Home Page', link: '/guide/theme-home-page' },
110110
{ text: 'Team Page', link: '/guide/theme-team-page' },
111+
{ text: 'Badge', link: '/guide/theme-badge' },
111112
{ text: 'Footer', link: '/guide/theme-footer' },
112113
{ text: 'Search', link: '/guide/theme-search' },
113114
{ text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }

‎docs/guide/theme-badge.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Badge
2+
3+
The badge lets you add status to your headers. For example, it could be useful to specify the section's type, or supported version.
4+
5+
## Usage
6+
7+
You may use the `Badge` component which is globally available.
8+
9+
```html
10+
### Title <Badge type="info" text="default" />
11+
### Title <Badge type="tip" text="^1.9.0" />
12+
### Title <Badge type="warning" text="beta" />
13+
### Title <Badge type="danger" text="caution" />
14+
```
15+
16+
Code above renders like:
17+
18+
### Title <Badge type="info" text="default" vertical="middle" />
19+
### Title <Badge type="tip" text="^1.9.0" vertical="middle" />
20+
### Title <Badge type="warning" text="beta" vertical="middle" />
21+
### Title <Badge type="danger" text="caution" vertical="middle" />
22+
23+
## Custom Children
24+
25+
`<Badge>` accept `children`, which will be displayed in the badge.
26+
27+
```html
28+
### Title <Badge type="info">custom element</Badge>
29+
```
30+
31+
### Title <Badge type="info">custom element</Badge>
32+
33+
## Customize Type Color
34+
35+
you can customize `background-color` of typed `<Badge />` by override css vars. The following is he default values.
36+
37+
```css
38+
:root {
39+
--vp-badge-info-border: var(--vp-c-divider-light);
40+
--vp-badge-info-text: var(--vp-c-text-2);
41+
--vp-badge-info-bg: var(--vp-c-white-soft);
42+
43+
--vp-badge-tip-border: var(--vp-c-green-dimm-1);
44+
--vp-badge-tip-text: var(--vp-c-green-darker);
45+
--vp-badge-tip-bg: var(--vp-c-green-dimm-3);
46+
47+
--vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
48+
--vp-badge-warning-text: var(--vp-c-yellow-darker);
49+
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
50+
51+
--vp-badge-danger-border: var(--vp-c-red-dimm-1);
52+
--vp-badge-danger-text: var(--vp-c-red-darker);
53+
--vp-badge-danger-bg: var(--vp-c-red-dimm-3);
54+
}
55+
56+
.dark {
57+
--vp-badge-info-border: var(--vp-c-divider-light);
58+
--vp-badge-info-bg: var(--vp-c-black-mute);
59+
60+
--vp-badge-tip-border: var(--vp-c-green-dimm-2);
61+
--vp-badge-tip-text: var(--vp-c-green-light);
62+
63+
--vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
64+
--vp-badge-warning-text: var(--vp-c-yellow-light);
65+
66+
--vp-badge-danger-border: var(--vp-c-red-dimm-2);
67+
--vp-badge-danger-text: var(--vp-c-red-light);
68+
}
69+
```
70+
71+
## `<Badge>`
72+
73+
`<Badge>` component accepts following props:
74+
75+
```ts
76+
interface Props {
77+
// When `<slot>` is passed, this value gets ignored.
78+
text?: string
79+
80+
// Defaults to `tip`.
81+
type?: 'info' | 'tip' | 'warning' | 'danger'
82+
}
83+
```

‎docs/guide/theme-introduction.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ VitePress comes with its default theme providing many features out of the box. L
1010
- [Layout](./theme-layout)
1111
- [Home Page](./theme-home-page)
1212
- [Team Page](./theme-team-page)
13+
- [Badge](./theme-badge)
1314
- [Footer](./theme-footer)
1415
- [Search](./theme-search)
1516
- [Carbon Ads](./theme-carbon-ads)
@@ -109,9 +110,12 @@ import DefaultTheme from 'vitepress/theme'
109110

110111
export default {
111112
...DefaultTheme,
112-
enhanceApp({ app }) {
113-
// register global components
114-
app.component('MyGlobalComponent', /* ... */)
113+
enhanceApp(ctx) {
114+
// extend default theme custom behaviour.
115+
DefaultTheme.enhanceApp(ctx)
116+
117+
// register your custom global components
118+
ctx.app.component('MyGlobalComponent' /* ... */)
115119
}
116120
}
117121
```

‎docs/guide/using-vue.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,9 @@ import DefaultTheme from 'vitepress/theme'
113113

114114
export default {
115115
...DefaultTheme,
116-
enhanceApp({ app }) {
117-
app.component('VueClickAwayExample', VueClickAwayExample)
116+
enhanceApp(ctx) {
117+
DefaultTheme.enhanceApp(ctx)
118+
ctx.app.component('VueClickAwayExample', VueClickAwayExample)
118119
}
119120
}
120121
```

‎src/client/theme-default/components/VPBadge.vue

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
text?: string
4+
type?: 'info' | 'tip' | 'warning' | 'danger'
5+
}>()
6+
</script>
7+
8+
<template>
9+
<span class="VPBadge" :class="type ?? 'tip'">
10+
<slot>{{ text }}</slot>
11+
</span>
12+
</template>
13+
14+
<style scoped>
15+
.VPBadge {
16+
display: inline-block;
17+
margin-left: 2px;
18+
border: 1px solid transparent;
19+
border-radius: 10px;
20+
padding: 0 8px;
21+
line-height: 18px;
22+
font-size: 13px;
23+
font-weight: 600;
24+
transform: translateY(-2px);
25+
}
26+
27+
h2 .VPBadge {
28+
border-radius: 11px;
29+
line-height: 20px;
30+
}
31+
32+
.VPBadge.info {
33+
border-color: var(--vp-badge-info-border);
34+
color: var(--vp-badge-info-text);
35+
background-color: var(--vp-badge-info-bg);
36+
}
37+
38+
.VPBadge.tip {
39+
border-color: var(--vp-badge-tip-border);
40+
color: var(--vp-badge-tip-text);
41+
background-color: var(--vp-badge-tip-bg);
42+
}
43+
44+
.VPBadge.warning {
45+
border-color: var(--vp-badge-warning-border);
46+
color: var(--vp-badge-warning-text);
47+
background-color: var(--vp-badge-warning-bg);
48+
}
49+
50+
.VPBadge.danger {
51+
border-color: var(--vp-badge-danger-border);
52+
color: var(--vp-badge-danger-text);
53+
background-color: var(--vp-badge-danger-bg);
54+
}
55+
</style>

‎src/client/theme-default/index.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './styles/components/vp-doc.css'
88
import './styles/components/vp-sponsor.css'
99

1010
import { Theme } from 'vitepress'
11+
import VPBadge from './components/VPBadge.vue'
1112
import Layout from './Layout.vue'
1213
import NotFound from './NotFound.vue'
1314

@@ -22,7 +23,10 @@ export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
2223

2324
const theme: Theme = {
2425
Layout,
25-
NotFound
26+
NotFound,
27+
enhanceApp: ({ app }) => {
28+
app.component('Badge', VPBadge)
29+
}
2630
}
2731

2832
export default theme

‎src/client/theme-default/styles/vars.css

+36
Original file line numberDiff line numberDiff line change
@@ -370,3 +370,39 @@
370370
--vp-home-hero-image-background-image: none;
371371
--vp-home-hero-image-filter: none;
372372
}
373+
374+
/**
375+
* Component: Badge
376+
* -------------------------------------------------------------------------- */
377+
378+
:root {
379+
--vp-badge-info-border: var(--vp-c-divider-light);
380+
--vp-badge-info-text: var(--vp-c-text-2);
381+
--vp-badge-info-bg: var(--vp-c-white-soft);
382+
383+
--vp-badge-tip-border: var(--vp-c-green-dimm-1);
384+
--vp-badge-tip-text: var(--vp-c-green-darker);
385+
--vp-badge-tip-bg: var(--vp-c-green-dimm-3);
386+
387+
--vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
388+
--vp-badge-warning-text: var(--vp-c-yellow-darker);
389+
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
390+
391+
--vp-badge-danger-border: var(--vp-c-red-dimm-1);
392+
--vp-badge-danger-text: var(--vp-c-red-darker);
393+
--vp-badge-danger-bg: var(--vp-c-red-dimm-3);
394+
}
395+
396+
.dark {
397+
--vp-badge-info-border: var(--vp-c-divider-light);
398+
--vp-badge-info-bg: var(--vp-c-black-mute);
399+
400+
--vp-badge-tip-border: var(--vp-c-green-dimm-2);
401+
--vp-badge-tip-text: var(--vp-c-green-light);
402+
403+
--vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
404+
--vp-badge-warning-text: var(--vp-c-yellow-light);
405+
406+
--vp-badge-danger-border: var(--vp-c-red-dimm-2);
407+
--vp-badge-danger-text: var(--vp-c-red-light);
408+
}

‎theme.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// so that users can do `import DefaultTheme from 'vitepress/theme'`
22
import type { DefineComponent } from 'vue'
3+
import { EnhanceAppContext } from './dist/client/index.js'
34

45
// TODO: add props for these
56
export const VPHomeHero: DefineComponent
@@ -14,6 +15,7 @@ export const VPTeamMembers: DefineComponent
1415
declare const theme: {
1516
Layout: DefineComponent
1617
NotFound: DefineComponent
18+
enhanceApp: (ctx: EnhanceAppContext) => void
1719
}
1820

1921
export default theme

0 commit comments

Comments
 (0)
Please sign in to comment.