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

package/lib/client/components/CanIUse.vue

@@ -68,15 +68,11 @@ function parseData(data: string | MessageData): MessageData {
     :data-past="past"
     :data-future="future"
   >
-    <iframe
-      :src="source"
-      :style="{ height }"
-      :title="`Can I use ${feature}`"
-    />
+    <iframe :src="source" :style="{ height }" :title="`Can I use ${feature}`" />
   </div>
 </template>
 
-<style scoped>
+<style>
 .ciu_embed {
   margin: 16px -24px;
 }

package/lib/client/components/CodeEditor.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { HighlighterCore } from 'shiki/core'
 import editorData from '@internal/md-power/replEditorData'
-import { getHighlighterCore } from 'shiki/core'
+import { createHighlighterCore } from 'shiki/core'
 import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
-import type { HighlighterCore } from 'shiki/core'
 import { resolveCodeInfo } from '../composables/codeRepl.js'
 
 let highlighter: HighlighterCore | null = null
@@ -17,7 +17,7 @@ const textAreaEl = shallowRef<HTMLTextAreaElement>()
 const input = ref('')
 
 async function init() {
-  highlighter = await getHighlighterCore({
+  highlighter = await createHighlighterCore({
     themes: 'light' in theme && 'dark' in theme ? [theme.light, theme.dark] : [theme],
     langs: Object.keys(grammars).map(key => grammars[key]),
     loadWasm: () => import('shiki/wasm'),

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
@@ -101,7 +101,7 @@ function runCode() {
   padding-top: 6px;
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .code-repl-title {
@@ -111,7 +111,7 @@ function runCode() {
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background, border;
 }
 
@@ -142,7 +142,7 @@ function runCode() {
   line-height: 48px;
   color: var(--vp-code-tab-active-text-color);
   white-space: nowrap;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .icon-run {
@@ -156,7 +156,7 @@ function runCode() {
   cursor: pointer;
   border: solid 1px var(--vp-c-text-3);
   border-radius: 100%;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, border;
 }
 
@@ -171,7 +171,7 @@ function runCode() {
   justify-content: space-between;
   padding: 4px 10px 4px 20px;
   border-top: solid 2px var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .output-head .title {
@@ -184,7 +184,7 @@ function runCode() {
 .output-head .output-version {
   font-size: 12px;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-head .icon-close {
@@ -193,7 +193,7 @@ function runCode() {
   margin-left: 20px;
   color: var(--vp-c-text-3);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-head .icon-close:hover {
@@ -227,7 +227,7 @@ function runCode() {
 .output-content .stderr pre,
 .output-content.rust .stderr pre.error {
   color: var(--vp-c-danger-1, #b8272c);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-content.rust .stderr pre {
@@ -237,6 +237,6 @@ function runCode() {
 .output-content .stderr + .stdout {
   margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 </style>

package/lib/client/components/CodeSandbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { CodeSandboxTokenMeta } from '../../shared/index.js'
+import { computed } from 'vue'
 
 const props = defineProps<CodeSandboxTokenMeta>()
 
@@ -11,19 +11,17 @@ const SANDBOX = 'allow-forms allow-modals allow-popups allow-presentation allow-
 
 const source = computed(() => {
   const params = new URLSearchParams()
-  if (props.filepath) {
+  if (props.filepath)
     params.set(props.type === 'embed' ? 'module' : 'file', encodeURIComponent(props.filepath))
-  }
 
   if (props.type === 'embed') {
     params.set('view', props.layout ? props.layout.replace(/,/g, '+') : 'Editor+Preview')
 
-    if (props.console) {
+    if (props.console)
       params.set('expanddevtools', '1')
-    }
-    if (props.navbar === false) {
+
+    if (props.navbar === false)
       params.set('hidenavigation', '1')
-    }
   }
   else {
     params.set('from-embed', '')

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
 }
@@ -60,7 +60,7 @@ onUnmounted(() => {
   background-color: var(--vp-c-bg-safe);
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
-  transition: border var(--t-color), background-color var(--t-color);
+  transition: border var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .vp-file-tree .vp-file-tree-title {
@@ -69,7 +69,7 @@ onUnmounted(() => {
   font-weight: bold;
   color: var(--vp-c-text-1);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .vp-file-tree ul {
@@ -106,7 +106,7 @@ onUnmounted(() => {
 .file-tree-item .tree-node.folder > .name {
   color: var(--vp-c-text-1);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node.folder > .name:hover {
@@ -130,7 +130,7 @@ onUnmounted(() => {
   mask: var(--icon) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node .name.focus {
@@ -141,7 +141,7 @@ onUnmounted(() => {
   color: var(--vp-c-bg);
   background-color: var(--vp-c-brand-2);
   border-radius: 4px;
-  transition: color var(--t-color), background-color var(--t-color);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node .name.focus:hover {
@@ -153,7 +153,7 @@ onUnmounted(() => {
   margin-left: 20px;
   overflow: hidden;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node [class*="vpi-"] {
@@ -170,7 +170,7 @@ onUnmounted(() => {
   padding-left: 8px !important;
   margin: 0 0 0 6px !important;
   border-left: solid 1px var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .file-tree-item:not(.expanded) > ul {

package/lib/client/components/PDFViewer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { PDFTokenMeta } from '../../shared/index.js'
 import { onMounted, toRefs } from 'vue'
 import { usePDF } from '../composables/pdf.js'
 import { useSize } from '../composables/size.js'
-import type { PDFTokenMeta } from '../../shared/index.js'
 
 const props = defineProps<PDFTokenMeta>()
 

package/lib/client/components/Plot.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { PlotOptions } from '../../shared/index.js'
 import { onClickOutside, useMediaQuery } from '@vueuse/core'
 import { computed, ref, shallowRef } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
 import { pluginOptions } from '../options.js'
-import type { PlotOptions } from '../../shared/index.js'
 
 const props = defineProps<Omit<PlotOptions, 'tag'>>()
 
@@ -81,7 +81,7 @@ function onClick() {
   transition: color ease 0.25s, background-color ease 0.25s;
 }
 
-.dark .vp-plot {
+[data-theme="dark"] .vp-plot {
   background-color: var(--vp-c-bg-plot-dark, #fff);
 }
 
@@ -90,8 +90,8 @@ function onClick() {
   color: var(--vp-c-plot-light, #fff);
 }
 
-.dark .vp-plot.hover:hover,
-.dark .vp-plot.active {
+[data-theme="dark"] .vp-plot.hover:hover,
+[data-theme="dark"] .vp-plot.active {
   color: var(--vp-c-plot-dark, #000);
 }
 </style>

package/lib/client/components/Replit.vue

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