themekit-js 1.1.0

package/dist/client/theme-default/components/VPNavScreen.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
+import { ref } from 'vue'
+import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
+import VPNavScreenMenu from './VPNavScreenMenu.vue'
+import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
+import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
+
+defineProps<{
+  open: boolean
+}>()
+
+const screen = ref<HTMLElement | null>(null)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+</script>
+
+<template>
+  <transition
+    name="fade"
+    @enter="isLocked = true"
+    @after-leave="isLocked = false"
+  >
+    <div v-if="open" class="VPNavScreen" ref="screen" id="VPNavScreen">
+      <div class="container">
+        <slot name="nav-screen-content-before" />
+        <VPNavScreenMenu class="menu" />
+        <VPNavScreenTranslations class="translations" />
+        <VPNavScreenAppearance class="appearance" />
+        <VPNavScreenSocialLinks class="social-links" />
+        <slot name="nav-screen-content-after" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.VPNavScreen {
+  position: fixed;
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  padding: 0 32px;
+  width: 100%;
+  background-color: var(--vp-nav-screen-bg-color);
+  overflow-y: auto;
+  transition: background-color 0.5s;
+  pointer-events: auto;
+}
+
+.VPNavScreen.fade-enter-active,
+.VPNavScreen.fade-leave-active {
+  transition: opacity 0.25s;
+}
+
+.VPNavScreen.fade-enter-active .container,
+.VPNavScreen.fade-leave-active .container {
+  transition: transform 0.25s ease;
+}
+
+.VPNavScreen.fade-enter-from,
+.VPNavScreen.fade-leave-to {
+  opacity: 0;
+}
+
+.VPNavScreen.fade-enter-from .container,
+.VPNavScreen.fade-leave-to .container {
+  transform: translateY(-8px);
+}
+
+@media (min-width: 768px) {
+  .VPNavScreen {
+    display: none;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  padding: 24px 0 96px;
+  max-width: 288px;
+}
+
+.menu + .translations,
+.menu + .appearance,
+.translations + .appearance {
+  margin-top: 24px;
+}
+
+.menu + .social-links {
+  margin-top: 16px;
+}
+
+.appearance + .social-links {
+  margin-top: 16px;
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenAppearance.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSwitchAppearance from './VPSwitchAppearance.vue'
+
+const { site, theme } = useData()
+</script>
+
+<template>
+  <div v-if="site.appearance && site.appearance !== 'force-dark'" class="VPNavScreenAppearance">
+    <p class="text">
+      {{ theme.darkModeSwitchLabel || 'Appearance' }}
+    </p>
+    <VPSwitchAppearance />
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenAppearance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  padding: 12px 14px 12px 16px;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.text {
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenMenu.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
+import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <nav v-if="theme.nav" class="VPNavScreenMenu">
+    <template v-for="item in theme.nav" :key="item.text">
+      <VPNavScreenMenuLink
+        v-if="'link' in item"
+        :item="item"
+      />
+      <VPNavScreenMenuGroup
+        v-else
+        :text="item.text || ''"
+        :items="item.items"
+      />
+    </template>
+  </nav>
+</template>

package/dist/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
+
+const props = defineProps<{
+  text: string
+  items: any[]
+}>()
+
+const isOpen = ref(false)
+
+const groupId = computed(() =>
+  `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
+)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div class="VPNavScreenMenuGroup" :class="{ open: isOpen }">
+    <button
+      class="button"
+      :aria-controls="groupId"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <span class="button-text" v-html="text"></span>
+      <span class="vpi-plus button-icon" />
+    </button>
+
+    <div :id="groupId" class="items">
+      <template v-for="item in items" :key="item.text">
+        <div v-if="'link' in item" :key="item.text" class="item">
+          <VPNavScreenMenuGroupLink :item="item" />
+        </div>
+
+        <div v-else class="group">
+          <VPNavScreenMenuGroupSection
+            :text="item.text"
+            :items="item.items"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroup {
+  border-bottom: 1px solid var(--vp-c-divider);
+  height: 48px;
+  overflow: hidden;
+  transition: border-color 0.5s;
+}
+
+.VPNavScreenMenuGroup .items {
+  visibility: hidden;
+}
+
+.VPNavScreenMenuGroup.open .items {
+  visibility: visible;
+}
+
+.VPNavScreenMenuGroup.open {
+  padding-bottom: 10px;
+  height: auto;
+}
+
+.VPNavScreenMenuGroup.open .button {
+  padding-bottom: 6px;
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavScreenMenuGroup.open .button-icon {
+  /*rtl:ignore*/
+  transform: rotate(45deg);
+}
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 4px 11px 0;
+  width: 100%;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.button:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.button-icon {
+  transition: transform 0.25s;
+}
+
+.group:first-child {
+  padding-top: 0px;
+}
+
+.group + .group,
+.group + .item {
+  padding-top: 4px;
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenMenuGroupLink.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { inject } from 'vue'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const closeScreen = inject('close-screen') as () => void
+</script>
+
+<template>
+  <VPLink
+    class="VPNavScreenMenuGroupLink"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    @click="closeScreen"
+  >
+    {{ item.text }}
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroupLink {
+  display: block;
+  margin-left: 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPNavScreenMenuGroupLink:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenMenuGroupSection.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+
+defineProps<{
+  text?: string
+  items: DefaultTheme.NavItemWithLink[]
+}>()
+</script>
+
+<template>
+  <div class="VPNavScreenMenuGroupSection">
+    <p v-if="text" class="title">{{ text }}</p>
+    <VPNavScreenMenuGroupLink
+      v-for="item in items"
+      :key="item.text"
+      :item="item"
+    />
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenMenuGroupSection {
+  display: block;
+}
+
+.title {
+  line-height: 32px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenMenuLink.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { inject } from 'vue'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const closeScreen = inject('close-screen') as () => void
+</script>
+
+<template>
+  <VPLink
+    class="VPNavScreenMenuLink"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    @click="closeScreen"
+    v-html="item.text"
+  />
+</template>
+
+<style scoped>
+.VPNavScreenMenuLink {
+  display: block;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding: 12px 0 11px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: border-color 0.25s, color 0.25s;
+}
+
+.VPNavScreenMenuLink:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/dist/client/theme-default/components/VPNavScreenSocialLinks.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="VPNavScreenSocialLinks"
+    :links="theme.socialLinks"
+  />
+</template>

package/dist/client/theme-default/components/VPNavScreenTranslations.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLangs } from '../composables/langs'
+import VPLink from './VPLink.vue'
+
+const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+const isOpen = ref(false)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div
+    v-if="localeLinks.length && currentLang.label"
+    class="VPNavScreenTranslations"
+    :class="{ open: isOpen }"
+  >
+    <button class="title" @click="toggle">
+      <span class="vpi-languages icon lang" />
+      {{ currentLang.label }}
+      <span class="vpi-chevron-down icon chevron" />
+    </button>
+
+    <ul class="list">
+      <li v-for="locale in localeLinks" :key="locale.link" class="item">
+        <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenTranslations {
+  height: 24px;
+  overflow: hidden;
+}
+
+.VPNavScreenTranslations.open {
+  height: auto;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.icon {
+  font-size: 16px;
+}
+
+.icon.lang {
+  margin-right: 8px;
+}
+
+.icon.chevron {
+  margin-left: 4px;
+}
+
+.list {
+  padding: 4px 0 0 24px;
+}
+
+.link {
+  line-height: 32px;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+</style>

package/dist/client/theme-default/components/VPPage.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="VPPage">
+    <slot name="page-top" />
+    <Content />
+    <slot name="page-bottom" />
+  </div>
+</template>

package/dist/client/theme-default/components/VPSidebar.vue

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
+import { ref, watch } from 'vue'
+import { useSidebar } from '../composables/sidebar'
+import VPSidebarItem from './VPSidebarItem.vue'
+
+const { sidebarGroups, hasSidebar } = useSidebar()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+// a11y: focus Nav element when menu has opened
+const navEl = ref<HTMLElement | null>(null)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+
+watch(
+  [props, navEl],
+  () => {
+    if (props.open) {
+      isLocked.value = true
+      navEl.value?.focus()
+    } else isLocked.value = false
+  },
+  { immediate: true, flush: 'post' }
+)
+</script>
+
+<template>
+  <aside
+    v-if="hasSidebar"
+    class="VPSidebar"
+    :class="{ open }"
+    ref="navEl"
+    @click.stop
+  >
+    <div class="curtain" />
+
+    <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
+      <span class="visually-hidden" id="sidebar-aria-label">
+        Sidebar Navigation
+      </span>
+
+      <slot name="sidebar-nav-before" />
+
+      <div v-for="item in sidebarGroups" :key="item.text" class="group">
+        <VPSidebarItem :item="item" :depth="0" />
+      </div>
+
+      <slot name="sidebar-nav-after" />
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.VPSidebar {
+  position: fixed;
+  top: var(--vp-layout-top-height, 0px);
+  bottom: 0;
+  left: 0;
+  z-index: var(--vp-z-index-sidebar);
+  padding: 32px 32px 96px;
+  width: calc(100vw - 64px);
+  max-width: 320px;
+  background-color: var(--vp-sidebar-bg-color);
+  opacity: 0;
+  box-shadow: var(--vp-c-shadow-3);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition: opacity 0.5s, transform 0.25s ease;
+  overscroll-behavior: contain;
+}
+
+.VPSidebar.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+  transition: opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.dark .VPSidebar {
+  box-shadow: var(--vp-shadow-1);
+}
+
+@media (min-width: 960px) {
+  .VPSidebar {
+    padding-top: var(--vp-nav-height);
+    width: var(--vp-sidebar-width);
+    max-width: 100%;
+    background-color: var(--vp-sidebar-bg-color);
+    opacity: 1;
+    visibility: visible;
+    box-shadow: none;
+    transform: translateX(0);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPSidebar {
+    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+
+@media (min-width: 960px) {
+  .curtain {
+    position: sticky;
+    top: -64px;
+    left: 0;
+    z-index: 1;
+    margin-top: calc(var(--vp-nav-height) * -1);
+    margin-right: -32px;
+    margin-left: -32px;
+    height: var(--vp-nav-height);
+    background-color: var(--vp-sidebar-bg-color);
+  }
+}
+
+.nav {
+  outline: 0;
+}
+
+.group + .group {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 10px;
+}
+
+@media (min-width: 960px) {
+  .group {
+    padding-top: 10px;
+    width: calc(var(--vp-sidebar-width) - 64px);
+  }
+}
+</style>