feat: add icons to docs

vuepress · Jan 9, 2025 · 56333c9 · 56333c9
1 parent f1e0fe8
commit 56333c9
Show file tree

Hide file tree

Showing 143 changed files with 1,225 additions and 99 deletions.
diff --git a/docs/.vuepress/components/VPAutoLink.vue b/docs/.vuepress/components/VPAutoLink.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { AutoLinkConfig } from 'vuepress/client'
+import { AutoLink } from 'vuepress/client'
+
+export interface AutoLinkConfigWithIcon extends AutoLinkConfig {
+  icon?: string
+}
+
+defineProps<{
+  /**
+   * The auto link config
+   */
+  config: AutoLinkConfigWithIcon
+}>()
+
+defineSlots<{
+  default?: (config: AutoLinkConfigWithIcon) => VNode | VNode[]
+  before?: (config: AutoLinkConfigWithIcon) => VNode | VNode[] | null
+  after?: (config: AutoLinkConfigWithIcon) => VNode | VNode[] | null
+}>()
+</script>
+
+<template>
+  <AutoLink :config="config">
+    <template v-if="$slots.default" #default>
+      <slot v-bind="config" />
+    </template>
+    <template #before>
+      <slot name="before" v-bind="config">
+        <VPIcon v-if="config.icon" class="auto-link-icon" :icon="config.icon" />
+      </slot>
+    </template>
+    <template #after>
+      <slot name="after" v-bind="config" />
+    </template>
+  </AutoLink>
+</template>
+
+<style>
+.auto-link-icon {
+  margin-inline-end: 0.25em;
+}
+</style>
diff --git a/docs/.vuepress/components/VPNavbarDropdown.vue b/docs/.vuepress/components/VPNavbarDropdown.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import VPAutoLink from '@theme/VPAutoLink.vue'
+import VPDropdownTransition from '@theme/VPDropdownTransition.vue'
+import type { AutoLinkOptions, NavGroup } from '@vuepress/theme-default/client'
+import { useToggle } from '@vueuse/core'
+import { computed, toRefs, watch } from 'vue'
+import { useRoute } from 'vuepress/client'
+
+const props = defineProps<{
+  /** dropdown config */
+  config: NavGroup<AutoLinkOptions | NavGroup<AutoLinkOptions>>
+}>()
+
+const { config } = toRefs(props)
+const route = useRoute()
+
+const [open, toggleOpen] = useToggle(false)
+
+const dropdownAriaLabel = computed(
+  () => config.value.ariaLabel || config.value.text,
+)
+
+const isLastItemOfArray = (arrayItem: unknown, array: unknown[]): boolean =>
+  array[array.length - 1] === arrayItem
+
+/**
+ * Open the dropdown when user tab and click from keyboard.
+ *
+ * Use event.detail to detect tab and click from keyboard.
+ * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+ */
+const handleDropdown = (e: UIEvent): void => {
+  if (e.detail === 0) toggleOpen()
+  else toggleOpen(false)
+}
+
+watch(
+  () => route.path,
+  () => {
+    toggleOpen(false)
+  },
+)
+</script>
+
+<template>
+  <div class="vp-navbar-dropdown-wrapper" :class="{ open }">
+    <button
+      class="vp-navbar-dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="handleDropdown"
+    >
+      <VPIcon v-if="config.icon" :icon="config.icon" />
+      <span class="title">{{ config.text }}</span>
+      <span class="arrow down" />
+    </button>
+
+    <button
+      class="vp-navbar-dropdown-title-mobile"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="() => toggleOpen()"
+    >
+      <VPIcon v-if="config.icon" :icon="config.icon" />
+      <span class="title">{{ config.text }}</span>
+      <span class="arrow" :class="open ? 'down' : 'right'" />
+    </button>
+
+    <VPDropdownTransition>
+      <ul v-show="open" class="vp-navbar-dropdown">
+        <li
+          v-for="child in config.children"
+          :key="child.text"
+          class="vp-navbar-dropdown-item"
+        >
+          <template v-if="'children' in child">
+            <h4 class="vp-navbar-dropdown-subtitle">
+              <VPAutoLink
+                v-if="child.link"
+                :config="child"
+                @focusout="
+                  () => {
+                    if (
+                      isLastItemOfArray(child, config.children) &&
+                      child.children.length === 0
+                    ) {
+                      open = false
+                    }
+                  }
+                "
+              />
+
+              <span v-else
+                ><VPIcon v-if="config.icon" :icon="config.icon" />{{
+                  child.text
+                }}</span
+              >
+            </h4>
+
+            <ul class="vp-navbar-dropdown-subitem-wrapper">
+              <li
+                v-for="grandchild in child.children"
+                :key="grandchild.link"
+                class="vp-navbar-dropdown-subitem"
+              >
+                <VPAutoLink
+                  :config="grandchild"
+                  @focusout="
+                    () => {
+                      if (
+                        isLastItemOfArray(grandchild, child.children) &&
+                        isLastItemOfArray(child, config.children)
+                      ) {
+                        toggleOpen(false)
+                      }
+                    }
+                  "
+                />
+              </li>
+            </ul>
+          </template>
+
+          <template v-else>
+            <VPAutoLink
+              :config="child"
+              @focusout="
+                () => {
+                  if (isLastItemOfArray(child, config.children)) {
+                    toggleOpen(false)
+                  }
+                }
+              "
+            />
+          </template>
+        </li>
+      </ul>
+    </VPDropdownTransition>
+  </div>
+</template>
+
+<style lang="scss">
+@use '@vuepress/theme-default/styles/mixins';
+@use '@vuepress/theme-default/styles/variables' as *;
+
+.vp-navbar-dropdown-wrapper {
+  cursor: pointer;
+
+  &:not(.mobile) {
+    height: 1.8rem;
+
+    &:hover,
+    &.open {
+      .vp-navbar-dropdown {
+        // override the inline style.
+        display: block !important;
+      }
+    }
+  }
+}
+
+.vp-navbar-dropdown {
+  .vp-navbar-dropdown-wrapper.mobile & {
+    @include mixins.dropdown-wrapper;
+
+    padding-top: 0.5rem;
+  }
+
+  .vp-navbar-dropdown-wrapper:not(.mobile) & {
+    position: absolute;
+    top: 100%;
+    right: 0;
+
+    display: none;
+
+    overflow-y: auto;
+
+    box-sizing: border-box;
+
+    // Avoid height shake by clicking
+    height: auto !important;
+    max-height: calc(100vh - 2.7rem);
+    margin: 0;
+    padding: 0.6rem 0;
+    border: 1px solid var(--vp-c-gutter);
+    border-radius: 0.5rem;
+
+    background-color: var(--vp-c-bg-elv);
+
+    text-align: left;
+    white-space: nowrap;
+  }
+}
+
+.vp-navbar-dropdown-title {
+  display: block;
+
+  padding: inherit;
+  border: none;
+
+  background: transparent;
+  color: var(--vp-c-text);
+
+  font-weight: 500;
+  font-size: 0.9rem;
+  font-family: inherit;
+  line-height: 1.4rem;
+
+  cursor: inherit;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    display: none;
+  }
+
+  &:hover {
+    border-color: transparent;
+  }
+
+  .vp-icon {
+    margin-inline-end: 0.25em;
+  }
+}
+
+.vp-navbar-dropdown-title-mobile {
+  display: none;
+
+  padding: inherit;
+  border: none;
+
+  background: transparent;
+  color: var(--vp-c-text);
+
+  font-weight: 600;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.4rem;
+
+  cursor: inherit;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    display: block;
+  }
+
+  &:hover {
+    color: var(--vp-c-accent);
+  }
+
+  .vp-icon {
+    margin-inline-end: 0.25em;
+  }
+}
+
+.vp-navbar-dropdown-item {
+  color: inherit;
+  line-height: 1.7rem;
+
+  a {
+    position: relative;
+
+    display: block;
+
+    margin-bottom: 0;
+    padding: 0 1.5rem 0 1.25rem;
+    border-bottom: none;
+
+    font-weight: 400;
+    line-height: 1.7rem;
+
+    &:hover {
+      color: var(--vp-c-accent);
+    }
+
+    &.route-link-active {
+      color: var(--vp-c-accent);
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        top: calc(50% - 2px);
+        left: 9px;
+
+        width: 0;
+        height: 0;
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+        border-left: 5px solid var(--vp-c-accent);
+      }
+    }
+  }
+
+  .vp-navbar-dropdown-wrapper.mobile & > a {
+    font-size: 15px;
+    line-height: 2rem;
+  }
+}
+
+.vp-navbar-dropdown-subtitle {
+  margin: 0.45rem 0 0;
+  padding: 1rem 0 0.45rem;
+  border-top: 1px solid var(--vp-c-gutter);
+  font-size: 0.9rem;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-top: 0;
+
+    font-size: 15px;
+    line-height: 2rem;
+  }
+
+  .vp-navbar-dropdown-item:first-child & {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  > span {
+    padding: 0 1.5rem 0 1.25rem;
+  }
+
+  > a {
+    font-weight: inherit;
+
+    &.route-link-active {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.vp-navbar-dropdown-subitem-wrapper {
+  padding: 0;
+  list-style: none;
+}
+
+.vp-navbar-dropdown-subitem {
+  font-size: 0.9em;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    padding-left: 1rem;
+    font-size: 14px;
+  }
+}
+</style>