vitepress-theme-element-plus 0.0.7 → 0.0.8

package/client/components/SidebarItem.vue

@@ -1,302 +1,303 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress'
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
-import { useSidebarControl } from '../hooks/useSidebarControl'
-import Link from './Link.vue'
-import VersionTag from './VersionTag.vue'
-
-const props = defineProps<{
-  item: DefaultTheme.SidebarItem & {
-    hide?: boolean
-    icon?: string
-    promotion?: string
-  }
-  depth: number
-}>()
-const {
-  collapsed,
-  collapsible,
-  isLink,
-  isActiveLink,
-  hasActiveLink,
-  hasChildren,
-  toggle,
-} = useSidebarControl(computed(() => props.item))
-
-const sectionTag = computed(() => (hasChildren.value ? 'section' : 'div'))
-
-const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
-
-const textTag = computed(() => {
-  return !hasChildren.value
-    ? 'p'
-    : props.depth + 2 === 7
-      ? 'p'
-      : `h${props.depth + 2}`
-})
-
-const itemRole = computed(() => (isLink.value ? undefined : 'button'))
-
-const classes = computed(() => [
-  [`level-${props.depth}`],
-  { collapsible: collapsible.value },
-  { collapsed: collapsed.value },
-  { 'is-link': isLink.value },
-  { 'is-active': isActiveLink.value },
-  { 'has-active': hasActiveLink.value },
-])
-
-function onItemInteraction(e: MouseEvent | Event) {
-  if ('key' in e && e.key !== 'Enter') {
-    return
-  }
-  !props.item.link && toggle()
-}
-function onCaretClick() {
-  props.item.link && toggle()
-}
-
-function onLinkAreaClick(e: MouseEvent) {
-  const elA = (e.target as HTMLElement).querySelector('a')
-  elA && elA.click()
-}
-</script>
-
-<template>
-  <component :is="sectionTag" class="VPSidebarItem" :class="classes">
-    <div
-      v-if="item.text && !item.hide"
-      class="item"
-      :role="itemRole"
-      :tabindex="item.items && 0"
-      v-on="
-        item.items
-          ? { click: onItemInteraction, keydown: onItemInteraction }
-          : { click: onLinkAreaClick }
-      "
-    >
-      <div class="indicator" />
-      <Icon
-        v-if="item.icon && item.items"
-        :icon="item.icon"
-        style="margin-right: 5px;"
-        ssr
-      />
-      <Link
-        v-if="item.link"
-        :tag="linkTag"
-        class="link"
-        :href="item.link"
-        :rel="item.rel"
-        :target="item.target"
-      >
-        <Icon
-          v-if="item.icon && item.link"
-          :icon="item.icon"
-          class="text text-icon"
-          ssr
-        />
-        <component :is="textTag" class="text" v-html="item.text" />
-        <VersionTag v-if="item.promotion" class="version-tag" :version="item.promotion" />
-      </Link>
-      <component
-        :is="textTag"
-        v-else
-        class="text"
-        v-html="item.text"
-      />
-
-      <div
-        v-if="item.collapsed !== undefined && item.items && item.items.length"
-        class="caret"
-        role="button"
-        aria-label="toggle section"
-        tabindex="0"
-        @click="onCaretClick"
-        @keydown.enter="onCaretClick"
-      >
-        <span class="vpi-chevron-right caret-icon" />
-      </div>
-    </div>
-
-    <div v-if="item?.items && item?.items.length" class="items">
-      <template v-if="depth < 5">
-        <SidebarItem
-          v-for="i in item.items"
-          :key="i.text"
-          :item="i"
-          :depth="depth + 1"
-        />
-      </template>
-    </div>
-  </component>
-</template>
-
-<style scoped lang="scss">
-.VPSidebarItem.collapsed.level-0 {
-  padding-bottom: 10px;
-}
-
-.item {
-  position: relative;
-  display: flex;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border-radius: 8px;
-  transition: background-color 0.25s;
-  cursor: pointer;
-}
-
-.VPSidebarItem.collapsible > .item {
-  cursor: pointer;
-}
-
-.indicator {
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: -17px;
-  width: 2px;
-  border-radius: 2px;
-  transition: background-color 0.25s;
-}
-
-.VPSidebarItem.level-2.is-active > .item > .indicator,
-.VPSidebarItem.level-3.is-active > .item > .indicator,
-.VPSidebarItem.level-4.is-active > .item > .indicator,
-.VPSidebarItem.level-5.is-active > .item > .indicator {
-  background-color: var(--vp-c-brand-1);
-}
-
-.link {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  line-height: 20px;
-  font-size: 13px;
-}
-
-.text {
-  flex-grow: 1;
-  line-height: 24px;
-  transition: color 0.25s;
-}
-.text-icon {
-  flex-grow: 0;
-  padding: 0;
-  margin-right: 4px;
-}
-.version-tag {
-  margin-left: 8px;
-}
-.VPSidebarItem.level-0 > .item {
-  color: var(--vp-c-text-1);
-  margin-bottom: 8px;
-  line-height: 24px;
-}
-.VPSidebarItem.level-0 > .item h2 {
-  color: var(--vp-c-text-1);
-  font-size: 1rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-  line-height: 24px;
-}
-
-.VPSidebarItem.level-1,
-.VPSidebarItem.level-2,
-.VPSidebarItem.level-3,
-.VPSidebarItem.level-4,
-.VPSidebarItem.level-5 {
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-}
-
-.VPSidebarItem.level-0.is-link > .item > .link:hover,
-.VPSidebarItem.level-1.is-link > .item > .link:hover,
-.VPSidebarItem.level-2.is-link > .item > .link:hover,
-.VPSidebarItem.level-3.is-link > .item > .link:hover,
-.VPSidebarItem.level-4.is-link > .item > .link:hover,
-.VPSidebarItem.level-5.is-link > .item > .link:hover {
-  color: var(--vp-c-brand-1);
-}
-
-.VPSidebarItem.level-0.has-active > .item,
-.VPSidebarItem.level-1.has-active > .item,
-.VPSidebarItem.level-2.has-active > .item,
-.VPSidebarItem.level-3.has-active > .item,
-.VPSidebarItem.level-4.has-active > .item,
-.VPSidebarItem.level-5.has-active > .item,
-.VPSidebarItem.level-0.has-active > .item > .link,
-.VPSidebarItem.level-1.has-active > .item > .link,
-.VPSidebarItem.level-2.has-active > .item > .link,
-.VPSidebarItem.level-3.has-active > .item > .link,
-.VPSidebarItem.level-4.has-active > .item > .link,
-.VPSidebarItem.level-5.has-active > .item > .link {
-  color: var(--vp-c-text-1);
-}
-
-.VPSidebarItem.level-0.is-active > .item .link,
-.VPSidebarItem.level-1.is-active > .item .link,
-.VPSidebarItem.level-2.is-active > .item .link,
-.VPSidebarItem.level-3.is-active > .item .link,
-.VPSidebarItem.level-4.is-active > .item .link,
-.VPSidebarItem.level-5.is-active > .item .link {
-  color: var(--vp-c-brand-1);
-  font-weight: 600;
-}
-
-.VPSidebarItem.level-0.is-active > .item,
-.VPSidebarItem.level-1.is-active > .item,
-.VPSidebarItem.level-2.is-active > .item,
-.VPSidebarItem.level-3.is-active > .item,
-.VPSidebarItem.level-4.is-active > .item,
-.VPSidebarItem.level-5.is-active > .item {
-  background-color: var(--el-color-primary-light-9);
-}
-
-.caret {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: -7px;
-  width: 32px;
-  height: 32px;
-  color: var(--vp-c-text-3);
-  cursor: pointer;
-  transition: color 0.25s;
-  flex-shrink: 0;
-}
-
-.item:hover .caret {
-  color: var(--vp-c-text-2);
-}
-
-.item:hover .caret:hover {
-  color: var(--vp-c-text-1);
-}
-
-.caret-icon {
-  font-size: 18px;
-  transform: rotate(90deg);
-  transition: transform 0.25s;
-}
-
-.VPSidebarItem.collapsed .caret-icon {
-  transform: rotate(0);
-}
-
-.VPSidebarItem.level-1 .items,
-.VPSidebarItem.level-2 .items,
-.VPSidebarItem.level-3 .items,
-.VPSidebarItem.level-4 .items,
-.VPSidebarItem.level-5 .items {
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
-}
-
-.VPSidebarItem.collapsed .items {
-  display: none;
-}
-</style>
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress'
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { useSidebarControl } from '../hooks/useSidebarControl'
+import Link from './Link.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.SidebarItem & {
+    hide?: boolean
+    icon?: string
+    promotion?: string
+  }
+  depth: number
+}>()
+const {
+  collapsed,
+  collapsible,
+  isLink,
+  isActiveLink,
+  hasActiveLink,
+  hasChildren,
+  toggle,
+} = useSidebarControl(computed(() => props.item))
+
+const sectionTag = computed(() => (hasChildren.value ? 'section' : 'div'))
+
+const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
+
+const textTag = computed(() => {
+  return !hasChildren.value
+    ? 'p'
+    : props.depth + 2 === 7
+      ? 'p'
+      : `h${props.depth + 2}`
+})
+
+const itemRole = computed(() => (isLink.value ? undefined : 'button'))
+
+const classes = computed(() => [
+  [`level-${props.depth}`],
+  { collapsible: collapsible.value },
+  { collapsed: collapsed.value },
+  { 'is-link': isLink.value },
+  { 'is-active': isActiveLink.value },
+  { 'has-active': hasActiveLink.value },
+])
+
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter') {
+    return
+  }
+  !props.item.link && toggle()
+}
+function onCaretClick() {
+  props.item.link && toggle()
+}
+
+function onLinkAreaClick(e: MouseEvent) {
+  const elA = (e.target as HTMLElement).querySelector('a')
+  elA && elA.click()
+}
+</script>
+
+<template>
+  <component :is="sectionTag" class="VPSidebarItem" :class="classes">
+    <div
+      v-if="item.text && !item.hide"
+      class="item"
+      :role="itemRole"
+      :tabindex="item.items && 0"
+      v-on="
+        item.items
+          ? { click: onItemInteraction, keydown: onItemInteraction }
+          : { click: onLinkAreaClick }
+      "
+    >
+      <div class="indicator" />
+      <Icon
+        v-if="item.icon && item.items"
+        :icon="item.icon"
+        style="margin-right: 5px;"
+        ssr
+      />
+      <Link
+        v-if="item.link"
+        :tag="linkTag"
+        class="link"
+        :href="item.link"
+        :rel="item.rel"
+        :target="item.target"
+      >
+        <Icon
+          v-if="item.icon && item.link"
+          :icon="item.icon"
+          class="text text-icon"
+          ssr
+        />
+        <component :is="textTag" class="text" v-html="item.text" />
+        <span v-if="item.promotion" class="version-tag vp-tag">
+          {{ item.promotion }}
+        </span>
+      </Link>
+      <component
+        :is="textTag"
+        v-else
+        class="text"
+        v-html="item.text"
+      />
+
+      <div
+        v-if="item.collapsed !== undefined && item.items && item.items.length"
+        class="caret"
+        role="button"
+        aria-label="toggle section"
+        tabindex="0"
+        @click="onCaretClick"
+        @keydown.enter="onCaretClick"
+      >
+        <span class="vpi-chevron-right caret-icon" />
+      </div>
+    </div>
+
+    <div v-if="item?.items && item?.items.length" class="items">
+      <template v-if="depth < 5">
+        <SidebarItem
+          v-for="i in item.items"
+          :key="i.text"
+          :item="i"
+          :depth="depth + 1"
+        />
+      </template>
+    </div>
+  </component>
+</template>
+
+<style scoped lang="scss">
+.VPSidebarItem.collapsed.level-0 {
+  padding-bottom: 10px;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  transition: background-color 0.25s;
+  cursor: pointer;
+}
+
+.VPSidebarItem.collapsible > .item {
+  cursor: pointer;
+}
+
+.indicator {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: -17px;
+  width: 2px;
+  border-radius: 2px;
+  transition: background-color 0.25s;
+}
+
+.VPSidebarItem.level-2.is-active > .item > .indicator,
+.VPSidebarItem.level-3.is-active > .item > .indicator,
+.VPSidebarItem.level-4.is-active > .item > .indicator,
+.VPSidebarItem.level-5.is-active > .item > .indicator {
+  background-color: var(--vp-c-brand);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  line-height: 20px;
+  font-size: 13px;
+}
+
+.text {
+  flex-grow: 1;
+  line-height: 24px;
+  transition: color 0.25s;
+}
+.text-icon {
+  flex-grow: 0;
+  padding: 0;
+  margin-right: 4px;
+}
+.version-tag {
+  margin-left: 8px;
+}
+.VPSidebarItem.level-0 > .item {
+  color: var(--vp-c-text-1);
+  margin-bottom: 8px;
+  line-height: 24px;
+}
+.VPSidebarItem.level-0 > .item h2 {
+  color: var(--vp-c-text-1);
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  line-height: 24px;
+}
+
+.VPSidebarItem.level-1,
+.VPSidebarItem.level-2,
+.VPSidebarItem.level-3,
+.VPSidebarItem.level-4,
+.VPSidebarItem.level-5 {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.VPSidebarItem.level-0.is-link > .item > .link:hover,
+.VPSidebarItem.level-1.is-link > .item > .link:hover,
+.VPSidebarItem.level-2.is-link > .item > .link:hover,
+.VPSidebarItem.level-3.is-link > .item > .link:hover,
+.VPSidebarItem.level-4.is-link > .item > .link:hover,
+.VPSidebarItem.level-5.is-link > .item > .link:hover {
+  color: var(--vp-c-brand);
+}
+
+.VPSidebarItem.level-0.has-active > .item,
+.VPSidebarItem.level-1.has-active > .item,
+.VPSidebarItem.level-2.has-active > .item,
+.VPSidebarItem.level-3.has-active > .item,
+.VPSidebarItem.level-4.has-active > .item,
+.VPSidebarItem.level-5.has-active > .item,
+.VPSidebarItem.level-0.has-active > .item > .link,
+.VPSidebarItem.level-1.has-active > .item > .link,
+.VPSidebarItem.level-2.has-active > .item > .link,
+.VPSidebarItem.level-3.has-active > .item > .link,
+.VPSidebarItem.level-4.has-active > .item > .link,
+.VPSidebarItem.level-5.has-active > .item > .link {
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem.level-0.is-active > .item .link,
+.VPSidebarItem.level-1.is-active > .item .link,
+.VPSidebarItem.level-2.is-active > .item .link,
+.VPSidebarItem.level-3.is-active > .item .link,
+.VPSidebarItem.level-4.is-active > .item .link,
+.VPSidebarItem.level-5.is-active > .item .link {
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.VPSidebarItem.level-0.is-active > .item,
+.VPSidebarItem.level-1.is-active > .item,
+.VPSidebarItem.level-2.is-active > .item,
+.VPSidebarItem.level-3.is-active > .item,
+.VPSidebarItem.level-4.is-active > .item,
+.VPSidebarItem.level-5.is-active > .item {
+  background-color: var(--bg-brand-color);
+}
+
+.caret {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -7px;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  transition: color 0.25s;
+  flex-shrink: 0;
+}
+
+.item:hover .caret {
+  color: var(--vp-c-text-2);
+}
+
+.item:hover .caret:hover {
+  color: var(--vp-c-text-1);
+}
+
+.caret-icon {
+  font-size: 18px;
+  transform: rotate(90deg);
+  transition: transform 0.25s;
+}
+
+.VPSidebarItem.collapsed .caret-icon {
+  transform: rotate(0);
+}
+
+.VPSidebarItem.level-1 .items,
+.VPSidebarItem.level-2 .items,
+.VPSidebarItem.level-3 .items,
+.VPSidebarItem.level-4 .items,
+.VPSidebarItem.level-5 .items {
+  border-left: 1px solid var(--vp-c-divider);
+  padding-left: 16px;
+}
+
+.VPSidebarItem.collapsed .items {
+  display: none;
+}
+</style>