vuepress-plugin-md-power 1.0.0-rc.102 → 1.0.0-rc.103

package/lib/client/components/CodeRepl.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { defineAsyncComponent, shallowRef } from 'vue'
 import { useCodeRepl } from '../composables/codeRepl.js'
-import IconClose from './IconClose.vue'
-import IconConsole from './IconConsole.vue'
-import IconRun from './IconRun.vue'
-import Loading from './Loading.vue'
+import IconClose from './icons/IconClose.vue'
+import IconConsole from './icons/IconConsole.vue'
+import IconRun from './icons/IconRun.vue'
+import Loading from './icons/Loading.vue'
 
 defineProps<{
   editable?: boolean

package/lib/client/components/CodeTabs.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { onMounted, ref, shallowRef, watch } from 'vue'
+
+interface TabProps extends Record<string, unknown> {
+  id: string
+}
+const props = withDefaults(defineProps<{
+  id: string
+  tabId?: string
+  active?: number
+  data: TabProps[]
+}>(), { active: 0, tabId: '' })
+
+const CODE_TAB_STORE_NAME = 'VUEPRESS_CODE_TAB_STORE'
+const codeTabStore = useStorage<Record<string, string>>(CODE_TAB_STORE_NAME, {})
+
+// Index of current active item
+const activeIndex = ref(props.active)
+
+// Refs of the tab buttons
+const tabRefs = shallowRef<HTMLUListElement[]>([])
+
+// Update store
+function updateStore(): void {
+  if (props.tabId)
+    codeTabStore.value[props.tabId] = props.data[activeIndex.value].id
+}
+
+// Activate next tab
+function activateNext(index = activeIndex.value): void {
+  activeIndex.value = index < tabRefs.value.length - 1 ? index + 1 : 0
+  tabRefs.value[activeIndex.value].focus()
+}
+
+// Activate previous tab
+function activatePrev(index = activeIndex.value): void {
+  activeIndex.value = index > 0 ? index - 1 : tabRefs.value.length - 1
+  tabRefs.value[activeIndex.value].focus()
+}
+
+// Handle keyboard event
+function keyboardHandler(event: KeyboardEvent, index: number): void {
+  if (event.key === ' ' || event.key === 'Enter') {
+    event.preventDefault()
+    activeIndex.value = index
+  }
+  else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    activateNext()
+  }
+  else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    activatePrev()
+  }
+
+  if (props.tabId)
+    codeTabStore.value[props.tabId] = props.data[activeIndex.value].id
+}
+
+function getInitialIndex(): number {
+  if (props.tabId) {
+    const valueIndex = props.data.findIndex(
+      ({ id }) => codeTabStore.value[props.tabId] === id,
+    )
+
+    if (valueIndex !== -1)
+      return valueIndex
+  }
+
+  return props.active
+}
+
+onMounted(() => {
+  activeIndex.value = getInitialIndex()
+
+  watch(
+    () => codeTabStore.value[props.tabId],
+    (newValue, oldValue) => {
+      if (props.tabId && newValue !== oldValue) {
+        const index = props.data.findIndex(({ id }) => id === newValue)
+
+        if (index !== -1)
+          activeIndex.value = index
+      }
+    },
+  )
+})
+function onTabNavClick(index: number): void {
+  activeIndex.value = index
+  updateStore()
+}
+</script>
+
+<template>
+  <div v-if="data.length" class="vp-code-tabs">
+    <div class="vp-code-tabs-nav" role="tablist">
+      <button
+        v-for="(item, index) in data"
+        :key="index"
+        :ref="(el) => el && (tabRefs[index] = el as HTMLUListElement)"
+        class="vp-code-tab-nav" :class="{ active: index === activeIndex }"
+        type="button" role="tab"
+        :aria-controls="`codetab-${id}-${index}`"
+        :aria-selected="index === activeIndex"
+        @click="() => onTabNavClick(index)"
+        @keydown="(e) => keyboardHandler(e, index)"
+      >
+        <slot :name="`title${index}`" :value="item.id" :is-active="index === activeIndex" />
+      </button>
+    </div>
+    <div
+      v-for="(item, index) in data"
+      :id="`codetab-${id}-${index}`" :key="index"
+      class="vp-code-tab" :class="{ active: index === activeIndex }"
+      role="tabpanel" :aria-expanded="index === activeIndex"
+    >
+      <div class="vp-code-tab-title">
+        <slot :name="`title${index}`" :value="item.id" :is-active="index === activeIndex" />
+      </div>
+      <slot :name="`tab${index}`" :value="item.id" :is-active="index === activeIndex" />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-code-tabs-nav {
+  padding: 0 12px;
+  margin: 16px 0 0;
+  overflow: auto hidden;
+  white-space: nowrap;
+  list-style: none;
+  background-color: var(--vp-code-tab-bg);
+  border-radius: 6px 6px 0 0;
+  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
+  transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
+}
+
+@media print {
+  .vp-code-tabs-nav {
+    display: none;
+  }
+}
+
+@media (max-width: 639px) {
+  .vp-code-tabs-nav {
+    margin: 16px -24px 0;
+    border-radius: 0;
+  }
+
+  .vp-doc li .vp-code-tabs-nav {
+    border-top-left-radius: 6px;
+  }
+}
+
+.vp-code-tab-nav {
+  position: relative;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 48px;
+  color: var(--vp-code-tab-text-color);
+  white-space: nowrap;
+  border-bottom: 1px solid transparent;
+  transition: color var(--vp-t-color);
+}
+
+.vp-code-tab-nav:hover {
+  color: var(--vp-code-tab-hover-text-color);
+}
+
+.vp-code-tab-nav::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  display: block;
+  width: auto;
+  height: 2px;
+  content: "";
+  background: transparent;
+  border-radius: 2px;
+  transition: background var(--vp-t-color);
+}
+
+.vp-code-tab-nav:focus-visible {
+  outline: none;
+}
+
+.vp-code-tab-nav.active {
+  color: var(--vp-code-tab-active-text-color);
+  background: transparent;
+}
+
+.vp-code-tab-nav.active::after {
+  background: var(--vp-code-tab-active-bar-color);
+}
+
+.vp-code-tab-nav .vp-icon {
+  width: 18px;
+  height: 18px;
+  margin-left: 0;
+}
+
+.vp-code-tab-nav span {
+  vertical-align: middle;
+}
+
+@media (max-width: 419px) {
+  .hint-container .vp-code-tabs-nav {
+    margin: 0.85rem -0.75rem 0 -1rem;
+  }
+}
+
+.vp-code-tab {
+  display: none;
+}
+
+@media print {
+  .vp-code-tab {
+    display: block;
+  }
+}
+
+.vp-code-tab.active {
+  display: block;
+}
+
+.vp-doc .vp-code-tab div[class*="language-"] {
+  margin-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.vp-code-tab-title {
+  display: none;
+}
+
+@media print {
+  .vp-code-tab-title {
+    display: block;
+  }
+}
+</style>

package/lib/client/components/FileTreeItem.vue

@@ -12,7 +12,7 @@ const el = ref<HTMLElement>()
 
 function toggle(e: HTMLElementEventMap['click']) {
   const target = e.target as HTMLElement
-  if (target.matches('.comment'))
+  if (target.matches('.comment') || e.currentTarget === target)
     return
   active.value = !active.value
 }

package/lib/client/components/Replit.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ReplitTokenMeta } from '../../shared/index.js'
 import { computed, getCurrentInstance, ref } from 'vue'
-import Loading from './Loading.vue'
+import Loading from './icons/Loading.vue'
 
 const props = defineProps<ReplitTokenMeta>()
 

package/lib/client/components/Tabs.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { onMounted, ref, shallowRef, watch } from 'vue'
+
+interface TabProps extends Record<string, unknown> {
+  id: string
+}
+const props = withDefaults(defineProps<{
+  id: string
+  tabId?: string
+  active?: number
+  data: TabProps[]
+}>(), { active: 0, tabId: '' })
+
+const TAB_STORE_NAME = 'VUEPRESS_TAB_STORE'
+
+const tabStore = useStorage<Record<string, string>>(TAB_STORE_NAME, {})
+
+// Index of current active item
+const activeIndex = ref(props.active)
+
+// Refs of the tab buttons
+const tabRefs = shallowRef<HTMLUListElement[]>([])
+
+// Update store
+function updateStore(): void {
+  if (props.tabId)
+    tabStore.value[props.tabId] = props.data[activeIndex.value].id
+}
+
+// Activate next tab
+function activateNext(index = activeIndex.value): void {
+  activeIndex.value = index < tabRefs.value.length - 1 ? index + 1 : 0
+  tabRefs.value[activeIndex.value].focus()
+}
+
+// Activate previous tab
+function activatePrev(index = activeIndex.value): void {
+  activeIndex.value = index > 0 ? index - 1 : tabRefs.value.length - 1
+  tabRefs.value[activeIndex.value].focus()
+}
+
+// Handle keyboard event
+function keyboardHandler(event: KeyboardEvent, index: number): void {
+  if (event.key === ' ' || event.key === 'Enter') {
+    event.preventDefault()
+    activeIndex.value = index
+  }
+  else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    activateNext()
+  }
+  else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    activatePrev()
+  }
+
+  updateStore()
+}
+
+function getInitialIndex(): number {
+  if (props.tabId) {
+    const valueIndex = props.data.findIndex(
+      ({ id }) => tabStore.value[props.tabId] === id,
+    )
+
+    if (valueIndex !== -1)
+      return valueIndex
+  }
+
+  return props.active
+}
+
+onMounted(() => {
+  activeIndex.value = getInitialIndex()
+
+  watch(
+    () => tabStore.value[props.tabId],
+    (newValue, oldValue) => {
+      if (props.tabId && newValue !== oldValue) {
+        const index = props.data.findIndex(({ id }) => id === newValue)
+
+        if (index !== -1)
+          activeIndex.value = index
+      }
+    },
+  )
+})
+
+function onTabNavClick(index: number): void {
+  activeIndex.value = index
+  updateStore()
+}
+</script>
+
+<template>
+  <div v-if="data.length" class="vp-tabs">
+    <div class="vp-tabs-nav" role="tablist">
+      <button
+        v-for="(item, index) in data"
+        :key="index"
+        :ref="(el) => el && (tabRefs[index] = el as HTMLUListElement)"
+        class="vp-tab-nav" :class="{ active: index === activeIndex }"
+        type="button" role="tab"
+        :aria-controls="`tab-${id}-${index}`"
+        :aria-selected="index === activeIndex"
+        @click="() => onTabNavClick(index)"
+        @keydown="(e) => keyboardHandler(e, index)"
+      >
+        <slot :name="`title${index}`" :value="item.id" :is-active="index === activeIndex" />
+      </button>
+    </div>
+    <div
+      v-for="(item, index) in data"
+      :id="`tab-${id}-${index}`" :key="index"
+      class="vp-tab" :class="{ active: index === activeIndex }"
+      role="tabpanel" :aria-expanded="index === activeIndex"
+    >
+      <div class="vp-tab-title">
+        <slot :name="`title${index}`" :value="item.id" :is-active="index === activeIndex" />
+      </div>
+      <slot :name="`tab${index}`" :value="item.id" :is-active="index === activeIndex" />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-tabs {
+  margin: 16px 0;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  transition: border var(--vp-t-color);
+}
+
+@media (max-width: 419px) {
+  .vp-tabs {
+    margin: 16px -24px;
+    border: none;
+    border-bottom: 1px solid var(--vp-c-divider);
+    border-radius: 0;
+  }
+}
+
+.vp-doc .vp-tabs-nav {
+  padding: 0 12px;
+  overflow-x: auto;
+  white-space: nowrap;
+  background-color: var(--vp-code-tab-bg);
+  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
+  transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
+}
+
+@media print {
+  .vp-doc .vp-tabs-nav {
+    display: none;
+  }
+}
+
+.vp-doc .vp-tab-nav {
+  position: relative;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 48px;
+  color: var(--vp-code-tab-text-color);
+  white-space: nowrap;
+  border-bottom: 1px solid transparent;
+  transition: color var(--vp-t-color);
+}
+
+.vp-doc .vp-tab-nav:hover {
+  color: var(--vp-code-tab-text-hover-color);
+}
+
+.vp-doc .vp-tab-nav::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  display: block;
+  width: auto;
+  height: 2px;
+  content: "";
+  background: transparent;
+  border-radius: 2px;
+  transition: background var(--vp-t-color);
+}
+
+.vp-doc .vp-tab-nav.active {
+  color: var(--vp-code-tab-active-text-color);
+  background: transparent;
+}
+
+.vp-doc .vp-tab-nav.active::after {
+  background: var(--vp-code-tab-active-bar-color);
+}
+
+.vp-doc .vp-tab {
+  display: none;
+  padding: 16px;
+}
+
+.vp-doc .vp-tab :nth-child(2) {
+  margin-top: 0;
+}
+
+.vp-doc .vp-tab :last-child {
+  margin-bottom: 0;
+}
+
+.vp-doc .vp-tab.active {
+  display: block;
+}
+
+.vp-doc .vp-tab-title {
+  display: none;
+  padding: 4px;
+  font-weight: 500;
+  color: var(--vp-code-tab-text-color);
+  border-top: 1px solid var(--vp-c-divider);
+  transition: color var(--vp-t-color);
+}
+
+.vp-doc .vp-tab:nth-child(n+2) .vp-tab-title {
+  border-top: none;
+}
+
+@media print {
+  .vp-doc .vp-tab-title {
+    display: block;
+  }
+}
+
+.vp-doc .hint-container .vp-tabs {
+  margin: 8px 0;
+}
+
+@media (max-width: 419px) {
+  .vp-doc .hint-container .vp-tabs {
+    margin: 8px -16px;
+  }
+}
+
+.vp-doc .hint-container .vp-tab-nav {
+  line-height: 40px;
+}
+
+.vp-doc .hint-container.info .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-info-code-bg);
+}
+
+.vp-doc .hint-container.note .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-note-code-bg);
+}
+
+.vp-doc .hint-container.tip .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-tip-code-bg);
+}
+
+.vp-doc .hint-container.warning .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-warning-code-bg);
+}
+
+.vp-doc .hint-container.danger .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-danger-code-bg);
+}
+
+.vp-doc .hint-container.caution .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-caution-code-bg);
+}
+
+.vp-doc .hint-container.important .vp-tabs .vp-tabs-nav {
+  background: var(--vp-custom-block-important-code-bg);
+}
+</style>

package/lib/node/index.d.ts

@@ -48,12 +48,19 @@ interface CodeSandboxTokenMeta extends SizeOptions {
     console?: boolean;
 }
 
+interface CodeTabsOptions {
+    icon?: boolean | {
+        named?: false | string[];
+        extensions?: false | string[];
+    };
+}
+
+type FileTreeIconMode = 'simple' | 'colored';
+interface FileTreeOptions {
+    icon?: FileTreeIconMode;
+}
+
 interface IconsOptions {
-    /**
-     * The prefix of the icon className
-     * @default 'vp-mdi'
-     */
-    prefix?: string;
     /**
      * The size of the icon
      * @default '1em'
@@ -140,6 +147,10 @@ interface ReplEditorData {
 }
 
 interface MarkdownPowerPluginOptions {
+    /**
+     * 配置代码块分组
+     */
+    codeTabs?: CodeTabsOptions;
     /**
      * 是否启用 PDF 嵌入语法
      *
@@ -219,7 +230,7 @@ interface MarkdownPowerPluginOptions {
      *
      * @default false
      */
-    fileTree?: boolean;
+    fileTree?: boolean | FileTreeOptions;
     /**
      * 是否启用 caniuse 嵌入语法
      *
@@ -284,4 +295,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 
-export { type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodepenTokenMeta, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };
+export { type BilibiliTokenMeta, type CanIUseMode, type CanIUseOptions, type CanIUseTokenMeta, type CodeSandboxTokenMeta, type CodeTabsOptions, type CodepenTokenMeta, type FileTreeIconMode, type FileTreeOptions, type IconsOptions, type JSFiddleTokenMeta, type MarkdownPowerPluginOptions, type PDFEmbedType, type PDFOptions, type PDFTokenMeta, type PlotOptions, type ReplEditorData, type ReplOptions, type ReplitTokenMeta, type SizeOptions, type ThemeOptions, type VideoOptions, type YoutubeTokenMeta, markdownPowerPlugin, resolveImageSize };