vue-macros · sxzz · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitepress'
-import { nav, sidebar } from './data'
+import { markdownConfig, nav, sidebar } from './configs'
 
 export default defineConfig({
   lang: 'en-US',
@@ -37,10 +37,7 @@ gtag('config', 'G-29NKGSL23C');`,
   description: 'Explore and extend more macros and syntax sugar to Vue.',
   lastUpdated: true,
   cleanUrls: 'with-subfolders',
-  markdown: {
-    theme: 'material-palenight',
-    lineNumbers: true,
-  },
+  markdown: markdownConfig,
 
   vue: {
     reactivityTransform: true,

diff --git a/docs/.vitepress/configs/index.ts b/docs/.vitepress/configs/index.ts
@@ -0,0 +1,2 @@
+export * from './navs'
+export * from './markdown'
diff --git a/docs/.vitepress/configs/markdown.ts b/docs/.vitepress/configs/markdown.ts
@@ -0,0 +1,19 @@
+import { useCodeGroup, useCodeGroupItem } from '../theme/components/markdown'
+import type { MarkdownOptions } from 'vitepress'
+
+/**
+ * vitepress markdown config
+ * @see https://vitepress.vuejs.org/config/app-configs.html#markdown
+ */
+export const markdownConfig: MarkdownOptions = {
+  lineNumbers: true,
+  theme: 'material-palenight',
+  config: (md) => {
+    md.use(useCodeGroup.container, useCodeGroup.type, {
+      render: useCodeGroup.render,
+    })
+    md.use(useCodeGroupItem.container, useCodeGroupItem.type, {
+      render: useCodeGroupItem.render,
+    })
+  },
+}
diff --git a/docs/.vitepress/data.ts → docs/.vitepress/configs/navs.ts b/docs/.vitepress/data.ts → docs/.vitepress/configs/navs.ts
diff --git a/docs/.vitepress/theme/components/CodeGroup.ts b/docs/.vitepress/theme/components/CodeGroup.ts
@@ -0,0 +1,79 @@
+import { defineComponent, h, ref } from 'vue'
+import type { Component, ComponentOptions, VNode } from 'vue'
+
+export const CodeGroup: ComponentOptions = defineComponent({
+  name: 'CodeGroup',
+
+  setup(_, { slots }) {
+    // index of current active item
+    const activeIndex = ref(-1)
+
+    return () => {
+      // NOTICE: here we put the `slots.default()` inside the render function to make
+      // the slots reactive, otherwise the slot content won't be changed once the
+      // `setup()` function of current component is called
+
+      // get children code-group-item
+      const items = (slots.default?.() || [])
+        .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem')
+        .map((vnode) => {
+          if (vnode.props === null) vnode.props = {}
+
+          return vnode as VNode & { props: Exclude<VNode['props'], null> }
+        })
+
+      // do not render anything if there is no code-group-item
+      if (items.length === 0) return null
+
+      if (activeIndex.value < 0 || activeIndex.value > items.length - 1) {
+        // if `activeIndex` is invalid
+
+        // find the index of the code-group-item with `active` props
+        activeIndex.value = items.findIndex(
+          (vnode) => vnode.props.active === '' || vnode.props.active === true
+        )
+
+        // if there is no `active` props on code-group-item, set the first item active
+        if (activeIndex.value === -1) activeIndex.value = 0
+      } else {
+        // set the active item
+        items.forEach((vnode, i) => {
+          vnode.props.active = i === activeIndex.value
+        })
+      }
+
+      return h('div', { class: 'code-group' }, [
+        h(
+          'div',
+          { class: 'code-group__nav' },
+          h(
+            'ul',
+            { class: 'code-group__ul' },
+            items.map((vnode, i) => {
+              const isActive = i === activeIndex.value
+
+              return h(
+                'li',
+                { class: 'code-group__li' },
+                h(
+                  'button',
+                  {
+                    class: {
+                      'code-group__nav-tab': true,
+                      'code-group__nav-tab-active': isActive,
+                    },
+                    ariaPressed: isActive,
+                    ariaExpanded: isActive,
+                    onClick: () => (activeIndex.value = i),
+                  },
+                  vnode.props.title
+                )
+              )
+            })
+          )
+        ),
+        items,
+      ])
+    }
+  },
+})
diff --git a/docs/.vitepress/theme/components/CodeGroup.vue b/docs/.vitepress/theme/components/CodeGroup.vue
@@ -0,0 +1,72 @@
+<script lang="tsx">
+import { defineComponent, ref } from 'vue'
+import type { Component } from 'vue'
+export default defineComponent({
+  name: 'CodeGroup',
+  setup(_, { slots }) {
+    const currentIndex = ref(0)
+    return () => {
+      // use jsx instead of template because we need to change slots
+      // so jsx could handle but template not
+      const items = (slots.default?.() ?? [])
+        .filter((vnode) => (vnode.type as Component).name === 'CodeGroupItem')
+        .map((vnode) => {
+          vnode.props = vnode.props ?? {}
+          return vnode
+        })
+
+      items.forEach((item, index) => {
+        item.props!.active = index === currentIndex.value
+      })
+
+      return (
+        <div rounded="2" overflow="hidden" my="4" w="full">
+          <div
+            w="full"
+            flex="~"
+            justify="start"
+            items="center"
+            gap="10px"
+            h="12"
+            dark:bg="#27272A"
+            bg="#F5F5F5"
+            px="3"
+            py="4"
+            box="border"
+          >
+            {items.map((item, index) => (
+              <div
+                key={index}
+                cursor="pointer"
+                text="sm black"
+                px="2"
+                py="5px"
+                tracking="tight"
+                transition="colors"
+                rounded="6px"
+                box="border"
+                class={[
+                  'dark:color-white hover:bg-#E5E5E5 dark:hover:bg-#3A3A3D',
+                  {
+                    active: index === currentIndex.value,
+                  },
+                ]}
+                onClick={() => (currentIndex.value = index)}
+              >
+                {item.props?.title}
+              </div>
+            ))}
+          </div>
+          <div>{items}</div>
+        </div>
+      )
+    }
+  },
+})
+</script>
+
+<style scoped>
+.active {
+  --at-apply: dark:bg-#3f3f46 bg-#e6e6e6;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/CodeGroupItem.vue b/docs/.vitepress/theme/components/CodeGroupItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'CodeGroupItem',
+  inheritAttrs: false,
+})
+
+defineProps<{
+  title: string
+  active: boolean
+}>()
+</script>
+<template>
+  <div v-if="active" class="content"><slot /></div>
+</template>
+<style scoped>
+.content :deep(div[class*='language-']) {
+  border-radius: 0;
+  border-top: none;
+  margin: 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/markdown/index.ts b/docs/.vitepress/theme/components/markdown/index.ts
@@ -0,0 +1,13 @@
+import { useMarkdownContainer } from './plugins/container'
+
+export const useCodeGroup = useMarkdownContainer({
+  type: 'code-group',
+  before: () => '<CodeGroup>\n',
+  after: () => '</CodeGroup>\n',
+})
+
+export const useCodeGroupItem = useMarkdownContainer({
+  type: 'code-group-item',
+  before: (info: string) => `<CodeGroupItem title="${info}">\n`,
+  after: () => '</CodeGroupItem>\n',
+})
diff --git a/docs/.vitepress/theme/components/markdown/plugins/container.ts b/docs/.vitepress/theme/components/markdown/plugins/container.ts
@@ -0,0 +1,59 @@
+import container from 'markdown-it-container'
+
+type RenderPlaceFunction = (info: string) => string
+
+interface ContainerPluginOptions {
+  /**
+   * The type of the container
+   *
+   * It would be used as the `name` of the container
+   *
+   * @see https://github.com/markdown-it/markdown-it-container#api
+   */
+  type: string
+
+  /**
+   * A function to render the starting tag of the container.
+   *
+   * This option will not take effect if you don't specify the `after` option.
+   */
+  before: RenderPlaceFunction
+
+  /**
+   * A function to render the ending tag of the container.
+   *
+   * This option will not take effect if you don't specify the `before` option.
+   */
+  after: RenderPlaceFunction
+}
+
+/** Powered by vuepress-next */
+export const useMarkdownContainer = ({
+  type,
+  after,
+  before,
+}: ContainerPluginOptions) => {
+  const infoStack: string[] = []
+  const render = (tokens: any, index: number): string => {
+    const token = tokens[index]
+    if (token.nesting === 1) {
+      // resolve info (title)
+      const info = token.info.trim().slice(type.length).trim()
+      infoStack.push(info)
+      return before(info)
+    } else {
+      // `after` tag
+
+      // pop the info from stack
+      const info = infoStack.pop() || ''
+
+      // render
+      return after(info)
+    }
+  }
+  return {
+    container,
+    type,
+    render,
+  }
+}
diff --git a/docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts b/docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts
@@ -0,0 +1,5 @@
+declare module 'markdown-it-container' {
+  import type { PluginWithParams } from 'markdown-it'
+  const container: PluginWithParams
+  export = container
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,7 +1,10 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import 'uno.css'
 import HomePage from '../components/HomePage.vue'
+import CodeGroup from './components/CodeGroup.vue'
+import CodeGroupItemVue from './components/CodeGroupItem.vue'
+import type { EnhanceAppContext } from 'vitepress'
+import 'uno.css'
 import './style.css'
 
 export default {
@@ -11,4 +14,8 @@ export default {
       'home-features-after': () => h(HomePage),
     })
   },
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.component('CodeGroup', CodeGroup)
+    app.component('CodeGroupItem', CodeGroupItemVue)
+  },
 }
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -4,16 +4,34 @@
 
 ### Installation
 
+:::: code-group
+
+::: code-group-item npm
+
 ```bash
 npm i -D unplugin-vue-macros
+```
 
-# or yarn
+:::
+
+::: code-group-item yarn
+
+```bash
 yarn add -D unplugin-vue-macros
+```
+
+:::
+
+::: code-group-item pnpm
 
-# or pnpm
+```bash
 pnpm add -D unplugin-vue-macros
 ```
 
+:::
+
+::::
+
 #### Vite (first-class support)
 
 ```ts

diff --git a/docs/package.json b/docs/package.json
@@ -8,8 +8,11 @@
     "serve": "vitepress serve"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "markdown-it-container": "^3.0.0",
     "unocss": "^0.45.29",
-    "vitepress": "1.0.0-alpha.20",
+    "unplugin-vue-define-options": "npm:unplugin-vue-define-options",
+    "vitepress": "^1.0.0-alpha.20",
     "vue": "^3.2.40"
   }
 }
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -13,7 +13,11 @@
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["vite/client", "vitepress"],
+    "types": [
+      "vite/client",
+      "vitepress",
+      "unplugin-vue-define-options/macros-global"
+    ],
     "paths": {
       "~/*": ["src/*"]
     }

diff --git a/docs/unocss.config.ts b/docs/unocss.config.ts
@@ -1,5 +1,6 @@
-import { presetAttributify, presetUno } from 'unocss'
+import { presetAttributify, presetUno, transformerDirectives } from 'unocss'
 
 export default {
   presets: [presetAttributify(), presetUno()],
+  transformers: [transformerDirectives()],
 }
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import Unocss from 'unocss/vite'
+import DefineOptions from 'unplugin-vue-define-options/vite'
+import Jsx from '@vitejs/plugin-vue-jsx'
 
 export default defineConfig({
-  plugins: [Unocss()],
+  plugins: [Unocss(), DefineOptions(), Jsx()],
 })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './navs'
		export * from './markdown'