feat(theme-default): add built-in component VPBadge, registerd as g…

…lobal component `Badge`.

docs/.vitepress/config.ts

@@ -100,6 +100,7 @@ function sidebarGuide() {
         { text: 'Layout', link: '/guide/theme-layout' },
         { text: 'Home Page', link: '/guide/theme-home-page' },
         { text: 'Team Page', link: '/guide/theme-team-page' },
+        { text: 'Badge', link: '/guide/theme-badge' },
         { text: 'Footer', link: '/guide/theme-footer' },
         { text: 'Search', link: '/guide/theme-search' },
         { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }

docs/guide/theme-badge.md

@@ -0,0 +1,75 @@
+# Badge
+
+The badge is like the one with same name in [vuepress](https://vuepress.vuejs.org/guide/using-vue.html#built-in-components), but for vitepress.
+
+## Usage
+
+You can use this component in a header to add some status for an API
+
+```js
+### Title <Badge text="info" type="info" />
+### Title <Badge text="tip" type="tip" />
+### Title <Badge text="warning" type="warning" />
+### Title <Badge text="error" type="error" />
+```
+
+Code above renders like:
+
+### Title <Badge text="info" type="info" />
+### Title <Badge text="tip" type="tip" />
+### Title <Badge text="warning" type="warning" />
+### Title <Badge text="error" type="error" />
+
+## Custom Children
+
+`<Badge>` accept `children`, which will be displayed in the badge.
+
+Give Code like this:
+
+```js
+<script setup>
+import { Badge } from 'vitepress/theme'
+</script>
+
+### Title <Badge type="info"><span>custom element</span></Badge>
+```
+
+You will see
+
+### Title <Badge type="info"><span>custom element</span></Badge>
+
+## `<Badge>`
+
+`<Badge />` accept props:
+
+- `text`: string
+- `type`: string, optional value: `"tip" | "info" | "warning"| "error"`, defaults to `"tip"`.
+- `vertical`: string, optional value: `"top"| "middle"`, defaults to `"top"`.
+
+**P.S** `props.text` would not be used if children given,  Actually, the `props.text` is passed as default slot children.
+
+## Customize Type Color
+
+The background color of `<Badge />` is determined by css vars.
+
+```jsx
+/* background-color by var(--vp-c-badge-type-warning); */
+<Badge type="warning" />
+
+/* background-color by var(--vp-c-badge-type-tip); */
+<Badge type="tip" />
+
+/* background-color by var(--vp-c-badge-type-error); */
+<Badge type="error" />
+
+/* background-color by var(--vp-c-badge-type-info); */
+<Badge type="info" />
+```
+
+you can customize `background-color` of typed `<Badge />` by override css vars.
+
+```css
+:root {
+    --vp-c-badge-type-error: red;
+}
+```

src/client/app/index.ts

@@ -6,7 +6,7 @@ import {
   onMounted,
   watch
 } from 'vue'
-import Theme from '/@theme/index'
+import Theme, { VPBadge } from '/@theme/index'
 import { inBrowser, pathToFile } from './utils'
 import { Router, RouterSymbol, createRouter } from './router'
 import { siteDataRef, useData } from './data'
@@ -55,6 +55,7 @@ export function createApp() {
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
+  app.component('Badge', VPBadge)
 
   // expose $frontmatter
   Object.defineProperty(app.config.globalProperties, '$frontmatter', {

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        text?: string,
+        type?: 'warning' | 'tip' | 'error' | 'info'
+        vertical?: 'top' | 'middle'
+    }>(), {
+        text: '',
+        type: 'tip',
+        vertical: 'top',
+    }
+);
+</script>
+
+<template>
+    <span
+        class='VPBadge'
+        :class="[ `VPBadge-type-${props.type}` ]"
+        :style="{ 'vertical-align': props.vertical }"
+    >
+        <slot>{{ props.text }}</slot>
+    </span>
+</template>
+
+<style scoped>
+.VPBadge {
+    display: inline-block;
+    font-size: 14px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 3px;
+    padding: 0 6px;
+    color: #fff;
+}
+
+.VPBadge.VPBadge-type-warning {
+    background-color: var(--vp-c-badge-type-warning);
+}
+
+.VPBadge.VPBadge-type-tip {
+    background-color: var(--vp-c-badge-type-tip);
+}
+
+.VPBadge.VPBadge-type-error {
+    background-color: var(--vp-c-badge-type-error);
+}
+
+.VPBadge.VPBadge-type-info {
+    background-color: var(--vp-c-badge-type-info);
+}
+</style>

src/client/theme-default/index.ts

@@ -19,6 +19,7 @@ export { default as VPTeamPage } from './components/VPTeamPage.vue'
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
+export { default as VPBadge } from './components/VPBadge.vue'
 
 const theme: Theme = {
   Layout,

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

@@ -358,3 +358,14 @@
   --vp-home-hero-image-background-image: none;
   --vp-home-hero-image-filter: none;
 }
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-badge-type-warning: #e7c000;
+  --vp-c-badge-type-tip: #42b983;
+  --vp-c-badge-type-error: #da5961;
+  --vp-c-badge-type-info: #0170fe;
+}