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

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

@@ -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/FileTreeItem.vue

@@ -10,7 +10,10 @@ const props = defineProps<{
 const active = ref(!!props.expanded)
 const el = ref<HTMLElement>()
 
-function toggle() {
+function toggle(e: HTMLElementEventMap['click']) {
+  const target = e.target as HTMLElement
+  if (target.matches('.comment'))
+    return
   active.value = !active.value
 }
 
@@ -18,14 +21,20 @@ onMounted(() => {
   if (!el.value || props.type !== 'folder')
     return
 
-  el.value.querySelector('.tree-node.folder')?.addEventListener('click', toggle)
+  el.value.querySelector('.tree-node.folder')?.addEventListener(
+    'click',
+    toggle as EventListener,
+  )
 })
 
 onUnmounted(() => {
   if (!el.value || props.type !== 'folder')
     return
 
-  el.value.querySelector('.tree-node.folder')?.removeEventListener('click', toggle)
+  el.value.querySelector('.tree-node.folder')?.removeEventListener(
+    'click',
+    toggle as EventListener,
+  )
 })
 </script>
 
@@ -51,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 {
@@ -60,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 {
@@ -97,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 {
@@ -114,41 +123,46 @@ onUnmounted(() => {
   width: 10px;
   height: 10px;
   color: var(--vp-c-text-3);
+  cursor: pointer;
   content: "";
   background-color: currentcolor;
   -webkit-mask: var(--icon) no-repeat;
   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 {
+  position: relative;
+  padding: 0 4px;
+  margin: 0 -4px;
   font-weight: bold;
-  color: var(--vp-c-brand-1);
-  transition: color var(--t-color);
+  color: var(--vp-c-bg);
+  background-color: var(--vp-c-brand-2);
+  border-radius: 4px;
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
+}
+
+.file-tree-item .tree-node .name.focus:hover {
+  color: var(--vp-c-bg);
+  background-color: var(--vp-c-brand-1);
 }
 
 .file-tree-item .tree-node .comment {
   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*="vp-fti-"] {
-  display: inline-block;
-  width: 0.9em;
-  height: 0.9em;
-  color: var(--vp-c-text-2);
-  background-color: currentcolor;
-  -webkit-mask: var(--icon) no-repeat;
-  mask: var(--icon) no-repeat;
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
+.file-tree-item .tree-node [class*="vpi-"] {
+  width: 1.2em;
+  height: 1.2em;
+  margin: 0;
 }
 
-.file-tree-item .tree-node.folder [class*="vp-fti-"] {
+.file-tree-item .tree-node.folder [class*="vpi-"] {
   cursor: pointer;
 }
 
@@ -156,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/Loading.vue

@@ -30,7 +30,7 @@ defineProps<{
   font-size: 36px;
   color: currentcolor;
   background-color: inherit;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .md-power-loading.absolute {

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 type { ReplitTokenMeta } from '../../shared/index.js'
 import { computed, getCurrentInstance, ref } from 'vue'
 import Loading from './Loading.vue'
-import type { ReplitTokenMeta } from '../../shared/index.js'
 
 const props = defineProps<ReplitTokenMeta>()