Trying out Vitepress

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+dist
 
 # local env files
 .env.local

docs/.vitepress/config.js

@@ -0,0 +1,55 @@
+const { description } = require("../../package");
+
+module.exports = {
+  // base: "/vue-popper/",
+  title: "Vue Popper",
+  description: description,
+  /**
+   * Theme configuration, here is the default theme configuration for VuePress.
+   *
+   * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
+   */
+  themeConfig: {
+    repo: "",
+    editLinks: false,
+    docsDir: "",
+    editLinkText: "",
+    lastUpdated: false,
+    nav: [
+      {
+        text: "Guide",
+        link: "/guide/what-is-vue-popper",
+      },
+      {
+        text: "Github",
+        link: "https://github.com/valgeirb/vue-popper",
+      },
+    ],
+    sidebar: {
+      "/guide/": getSidebar(),
+      "/": getSidebar(),
+    },
+  },
+};
+
+function getSidebar() {
+  return [
+    {
+      text: "Introduction",
+      children: [
+        { text: "What is Vue Popper?", link: "/guide/what-is-vue-popper" },
+        { text: "Getting Started", link: "/guide/getting-started" },
+      ],
+    },
+    {
+      text: "Advanced",
+      children: [
+        { text: "API", link: "/guide/api" },
+        {
+          text: "Theming",
+          link: "/guide/theming",
+        },
+      ],
+    },
+  ];
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,15 @@
+import DefaultTheme from "vitepress/theme";
+import PopperDemo from "../../components/PopperDemo.vue";
+import CodeBlock from "../../components/CodeBlock.vue";
+import CodeGroup from "../../components/CodeGroup.ts";
+import clickOutside from "../../../src/directives/click-outside";
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.component("PopperDemo", PopperDemo);
+    app.component("CodeBlock", CodeBlock);
+    app.component("CodeGroup", CodeGroup);
+    app.directive("click-outside", clickOutside);
+  },
+};

docs/components/CodeBlock.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="code-group-item"
+    :class="{ 'code-group-item__active': active }"
+    :aria-selected="active"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from "vue";
+  export default defineComponent({
+    name: "CodeGroupItem",
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      active: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+  });
+</script>

docs/components/CodeGroup.ts

@@ -0,0 +1,131 @@
+import { defineComponent, h, ref } from 'vue'
+import type { Component, VNode } from 'vue'
+import "./code-group.css";
+
+export default defineComponent({
+  name: 'CodeGroup',
+
+  setup(_, { slots }) {
+    // index of current active item
+    const activeIndex = ref(-1)
+
+    // refs of the tab buttons
+    const tabRefs = ref<HTMLButtonElement[]>([])
+
+    // activate next tab
+    const activateNext = (i = activeIndex.value): void => {
+      if (i < tabRefs.value.length - 1) {
+        activeIndex.value = i + 1
+      } else {
+        activeIndex.value = 0
+      }
+      tabRefs.value[activeIndex.value].focus()
+    }
+
+    // activate previous tab
+    const activatePrev = (i = activeIndex.value): void => {
+      if (i > 0) {
+        activeIndex.value = i - 1
+      } else {
+        activeIndex.value = tabRefs.value.length - 1
+      }
+      tabRefs.value[activeIndex.value].focus()
+    }
+
+    // handle keyboard event
+    const keyboardHandler = (event: KeyboardEvent, i: number): void => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault()
+        activeIndex.value = i
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        activateNext(i)
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        activatePrev(i)
+      }
+    }
+
+    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> }
+        })
+
+      // clear tabRefs for HMR
+      tabRefs.value = []
+
+      // 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',
+                  {
+                    ref: (element) => {
+                      if (element) {
+                        tabRefs.value[i] = element as HTMLButtonElement
+                      }
+                    },
+                    class: {
+                      'code-group__nav-tab': true,
+                      'code-group__nav-tab-active': isActive,
+                    },
+                    ariaPressed: isActive,
+                    ariaExpanded: isActive,
+                    onClick: () => (activeIndex.value = i),
+                    onKeydown: (e) => keyboardHandler(e, i),
+                  },
+                  vnode.props.title
+                )
+              )
+            })
+          )
+        ),
+        items,
+      ])
+    }
+  },
+})

docs/components/PopperDemo.vue

@@ -0,0 +1,18 @@
+<template>
+  <Popper placement="bottom" arrow>
+    <button style="width: 100px">Click this</button>
+    <template #content>
+      <div>This is the content</div>
+    </template>
+  </Popper>
+</template>
+
+<script>
+  import Popper from "../../dist/popper.esm";
+  export default {
+    props: ["placement", "arrow"],
+    components: {
+      Popper,
+    },
+  };
+</script>

docs/components/code-group.css

@@ -0,0 +1,53 @@
+/** * code-group */
+.code-group__nav {
+  margin-top: 0.85rem;
+  margin-bottom: calc(-1.7rem - 6px);
+  padding-bottom: calc(1.7rem - 6px);
+  padding-left: 10px;
+  padding-top: 10px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background-color: black;
+}
+.code-group__ul {
+  margin: auto 0;
+  padding-left: 0;
+  display: inline-flex;
+  list-style: none;
+}
+.code-group__nav-tab {
+  border: 0;
+  padding: 5px;
+  cursor: pointer;
+  background-color: transparent;
+  font-size: 0.85em;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 600;
+}
+.code-group__nav-tab:focus {
+  outline: none;
+}
+.code-group__nav-tab:focus-visible {
+  outline: 1px solid rgba(255, 255, 255, 0.9);
+}
+.code-group__nav-tab-active {
+  border-bottom: var(--c-brand) 1px solid;
+}
+@media (max-width: 419px) {
+  .code-group__nav {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+    border-radius: 0;
+  }
+}
+/** * code-group-item */
+.code-group-item {
+  display: none;
+}
+.code-group-item__active {
+  display: block;
+}
+.code-group-item > pre {
+  background-color: orange;
+}

docs/guide/api.md

@@ -0,0 +1,37 @@
+# API
+
+## Events
+
+### foo
+
+- Type: `string`
+- Default: `/`
+
+### bar
+
+- Type: `string`
+- Default: `/`
+
+## Props
+
+### foo
+
+- Type: `string`
+- Default: `/`
+
+### bar
+
+- Type: `string`
+- Default: `/`
+
+## Slots
+
+### foo
+
+- Type: `string`
+- Default: `/`
+
+### bar
+
+- Type: `string`
+- Default: `/`