vuepress-plugin-md-power 1.0.0-rc.145 → 1.0.0-rc.147

package/lib/client/components/FileTreeNode.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   diff?: 'add' | 'remove'
   expanded?: boolean
   focus?: boolean
+  filepath?: string
 }>()
 
 const activeFileTreeNode = inject<Ref<string>>('active-file-tree-node', ref(''))
@@ -23,7 +24,7 @@ function nodeClick() {
   if (props.filename === '…' || props.filename === '...')
     return
 
-  onNodeClick(props.filename, props.type)
+  onNodeClick(props.filepath || props.filename, props.type)
 }
 
 function toggle(ev: MouseEvent) {
@@ -47,7 +48,7 @@ function toggle(ev: MouseEvent) {
         [type]: true,
         focus,
         expanded: type === 'folder' ? active : false,
-        active: type === 'file' ? activeFileTreeNode === filename : false,
+        active: type === 'file' ? activeFileTreeNode === filepath : false,
         diff,
         add: diff === 'add',
         remove: diff === 'remove',

package/lib/client/components/VPCodeTree.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { onMounted, provide, ref, useTemplateRef, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  height?: string
+  entryFile?: string
+}>(), { height: '320px' })
+
+const activeNode = ref(props.entryFile || '')
+const isEmpty = ref(true)
+const codePanel = useTemplateRef<HTMLDivElement>('codePanel')
+
+provide('active-file-tree-node', activeNode)
+provide('on-file-tree-node-click', (filepath: string, type: 'file' | 'folder') => {
+  if (type === 'file') {
+    activeNode.value = filepath
+  }
+})
+
+onMounted(() => {
+  watch(
+    () => activeNode.value,
+    () => {
+      if (codePanel.value) {
+        const items = Array.from(codePanel.value.querySelectorAll('.code-block-title'))
+        let hasActive = false
+        items.forEach((item) => {
+          if (item.getAttribute('data-title') === activeNode.value) {
+            item.classList.add('active')
+            hasActive = true
+          }
+          else {
+            item.classList.remove('active')
+          }
+        })
+        isEmpty.value = !hasActive
+      }
+    },
+    { immediate: true },
+  )
+})
+</script>
+
+<template>
+  <div class="vp-code-tree">
+    <div class="code-tree-panel" :style="{ 'max-height': props.height }">
+      <div v-if="title" class="code-tree-title" :title="title">
+        <span>{{ title }}</span>
+      </div>
+      <div class="vp-file-tree">
+        <slot name="file-tree" />
+      </div>
+    </div>
+    <div ref="codePanel" class="code-panel" :style="{ height: props.height }">
+      <slot />
+      <div v-if="isEmpty" class="code-tree-empty">
+        <span class="vpi-code-tree-empty" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-code-tree {
+  width: 100%;
+  margin: 16px 0;
+  overflow: hidden;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+@media (min-width: 768px) {
+  .vp-code-tree {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.vp-code-tree .code-tree-panel {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 1px var(--vp-c-divider);
+}
+
+@media (min-width: 768px) {
+  .vp-code-tree .code-tree-panel {
+    border-right: solid 1px var(--vp-c-divider);
+    border-bottom: none;
+  }
+}
+
+.vp-code-tree .code-tree-panel .code-tree-title {
+  height: 40px;
+  padding: 0 16px;
+  overflow: hidden;
+  font-weight: 500;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-bottom: solid 1px var(--vp-c-divider);
+}
+
+.vp-code-tree .code-tree-panel .vp-file-tree {
+  flex: 1 2;
+  margin: 0;
+  overflow: auto;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.vp-code-tree .code-tree-panel .vp-file-tree .vp-file-tree-info.file {
+  cursor: pointer;
+}
+
+.vp-code-tree .code-panel {
+  grid-column: span 2 / span 2;
+}
+
+.vp-code-tree .code-panel [class*="language-"] {
+  flex: 1 2;
+  margin: 16px 0 0;
+  overflow: auto;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@media (min-width: 768px) {
+  .vp-code-tree .code-tree-panel .vp-file-tree,
+  .vp-code-tree .code-panel [class*="language-"] {
+    overscroll-behavior: contain;
+  }
+}
+
+.vp-code-tree .code-panel .code-block-title {
+  display: none;
+  height: 100%;
+}
+
+.vp-code-tree .code-panel .code-block-title.active {
+  display: flex;
+  flex-direction: column;
+}
+
+.vp-code-tree .code-panel .code-block-title .code-block-title-bar {
+  margin-top: 0;
+  border-radius: 0;
+}
+
+.vp-code-tree .code-panel div[class*="language-"].has-collapsed-lines.collapsed {
+  height: auto;
+  overflow: auto;
+}
+
+.vp-code-tree .code-panel div[class*="language-"].has-collapsed-lines .collapsed-lines {
+  display: none;
+}
+
+.vp-code-tree .code-panel .code-tree-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.vp-code-tree .code-panel .code-tree-empty .vpi-code-tree-empty {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m198.24 62.63l15.68-17.25a8 8 0 0 0-11.84-10.76L186.4 51.86A95.95 95.95 0 0 0 57.76 193.37l-15.68 17.25a8 8 0 1 0 11.84 10.76l15.68-17.24A95.95 95.95 0 0 0 198.24 62.63M48 128a80 80 0 0 1 127.6-64.25l-107 117.73A79.63 79.63 0 0 1 48 128m80 80a79.55 79.55 0 0 1-47.6-15.75l107-117.73A79.95 79.95 0 0 1 128 208'/%3E%3C/svg%3E");
+
+  width: 128px;
+  height: 128px;
+  color: var(--vp-c-default-soft);
+}
+</style>

package/lib/client/composables/audio.d.ts

@@ -1,40 +1,40 @@
-import * as vue from 'vue';
-import { MaybeRef } from 'vue';
+import { MaybeRef, Ref } from "vue";
 
+//#region src/client/composables/audio.d.ts
 interface BufferedRange {
-    start: number;
-    end: number;
+  start: number;
+  end: number;
 }
 interface AudioPlayerOptions {
-    type?: MaybeRef<string>;
-    autoplay?: boolean;
-    mutex?: boolean;
-    onload?: HTMLAudioElement['onload'];
-    onerror?: HTMLAudioElement['onerror'];
-    onpause?: HTMLAudioElement['onpause'];
-    onplay?: HTMLAudioElement['onplay'];
-    onplaying?: HTMLAudioElement['onplaying'];
-    onseeked?: HTMLAudioElement['onseeked'];
-    onvolume?: (volume: number) => void;
-    onend?: HTMLAudioElement['onended'];
-    onprogress?: (current: number, total: number) => void;
-    oncanplay?: HTMLAudioElement['oncanplay'];
-    oncanplaythrough?: HTMLAudioElement['oncanplaythrough'];
-    ontimeupdate?: (currentTime: number) => void;
-    onwaiting?: HTMLAudioElement['onwaiting'];
+  type?: MaybeRef<string>;
+  autoplay?: boolean;
+  mutex?: boolean;
+  onload?: HTMLAudioElement["onload"];
+  onerror?: HTMLAudioElement["onerror"];
+  onpause?: HTMLAudioElement["onpause"];
+  onplay?: HTMLAudioElement["onplay"];
+  onplaying?: HTMLAudioElement["onplaying"];
+  onseeked?: HTMLAudioElement["onseeked"];
+  onvolume?: (volume: number) => void;
+  onend?: HTMLAudioElement["onended"];
+  onprogress?: (current: number, total: number) => void;
+  oncanplay?: HTMLAudioElement["oncanplay"];
+  oncanplaythrough?: HTMLAudioElement["oncanplaythrough"];
+  ontimeupdate?: (currentTime: number) => void;
+  onwaiting?: HTMLAudioElement["onwaiting"];
 }
-declare function useAudioPlayer(source: MaybeRef<string>, options?: AudioPlayerOptions): {
-    isSupported: vue.Ref<boolean, boolean>;
-    paused: vue.Ref<boolean, boolean>;
-    loaded: vue.Ref<boolean, boolean>;
-    currentTime: vue.Ref<number, number>;
-    duration: vue.Ref<number, number>;
-    player: null;
-    destroy: () => void;
-    play: () => void;
-    pause: () => void | undefined;
-    seek(time: number): void;
-    setVolume(volume: number): void;
-};
-
-export { type AudioPlayerOptions, type BufferedRange, useAudioPlayer };
+interface UseAudioPlayerResult {
+  player: HTMLAudioElement | null;
+  isSupported: Ref<boolean>;
+  loaded: Ref<boolean>;
+  paused: Ref<boolean>;
+  currentTime: Ref<number>;
+  duration: Ref<number>;
+  play: () => void;
+  pause: () => void;
+  seek: (time: number) => void;
+  setVolume: (volume: number) => void;
+  destroy: () => void;
+}
+declare function useAudioPlayer(source: MaybeRef<string>, options?: AudioPlayerOptions): UseAudioPlayerResult; //#endregion
+export { AudioPlayerOptions, BufferedRange, useAudioPlayer };

package/lib/client/composables/audio.js

@@ -1,185 +1,173 @@
-// src/client/composables/audio.ts
 import { onMounted, onUnmounted, ref, toValue, watch } from "vue";
-var mimeTypes = {
-  "audio/flac": ["flac", "fla"],
-  "audio/mpeg": ["mp3", "mpga"],
-  "audio/mp4": ["mp4", "m4a"],
-  "audio/ogg": ["ogg", "oga"],
-  "audio/aac": ["aac", "adts"],
-  "audio/x-ms-wma": ["wma"],
-  "audio/x-aiff": ["aiff", "aif", "aifc"],
-  "audio/webm": ["webm"]
+
+//#region src/client/composables/audio.ts
+const mimeTypes = {
+	"audio/flac": ["flac", "fla"],
+	"audio/mpeg": ["mp3", "mpga"],
+	"audio/mp4": ["mp4", "m4a"],
+	"audio/ogg": ["ogg", "oga"],
+	"audio/aac": ["aac", "adts"],
+	"audio/x-ms-wma": ["wma"],
+	"audio/x-aiff": [
+		"aiff",
+		"aif",
+		"aifc"
+	],
+	"audio/webm": ["webm"]
 };
-var playerList = [];
+const playerList = [];
 function useAudioPlayer(source, options = {}) {
-  let player = null;
-  let unknownSupport = false;
-  const isSupported = ref(false);
-  const loaded = ref(false);
-  const paused = ref(true);
-  const currentTime = ref(0);
-  const duration = ref(0);
-  const volume = ref(1);
-  function initialize() {
-    player = document.createElement("audio");
-    player.className = "audio-player";
-    player.style.display = "none";
-    player.preload = options.autoplay ? "auto" : "none";
-    player.autoplay = options.autoplay ?? false;
-    document.body.appendChild(player);
-    playerList.push(player);
-    player.onloadedmetadata = () => {
-      duration.value = player.duration;
-      currentTime.value = player.currentTime;
-      volume.value = player.volume;
-      loaded.value = true;
-    };
-    player.oncanplay = (...args) => {
-      loaded.value = true;
-      if (unknownSupport)
-        isSupported.value = true;
-      options.oncanplay?.bind(player)(...args);
-    };
-    player.onplay = (...args) => {
-      paused.value = false;
-      options.onplay?.bind(player)(...args);
-    };
-    player.onpause = (...args) => {
-      paused.value = true;
-      options.onpause?.bind(player)(...args);
-    };
-    player.ontimeupdate = () => {
-      if (isValidDuration(player.duration)) {
-        const lastBufferTime = getLastBufferedTime();
-        if (lastBufferTime <= player.duration) {
-          options.ontimeupdate?.bind(player)(lastBufferTime);
-          currentTime.value = lastBufferTime;
-          options.onprogress?.bind(player)(lastBufferTime, player.duration);
-        }
-      }
-    };
-    player.onvolumechange = () => {
-      volume.value = player.volume;
-      options.onvolume?.bind(player)(player.volume);
-    };
-    player.onended = (...args) => {
-      paused.value = true;
-      options.onend?.bind(player)(...args);
-    };
-    player.onplaying = options.onplaying;
-    player.onload = options.onload;
-    player.onerror = options.onerror;
-    player.onseeked = options.onseeked;
-    player.oncanplaythrough = options.oncanplaythrough;
-    player.onwaiting = options.onwaiting;
-    isSupported.value = isSupportType();
-    player.src = toValue(source);
-    player.load();
-  }
-  function isSupportType() {
-    if (!player)
-      return false;
-    let type = toValue(options.type);
-    if (!type) {
-      const ext = toValue(source).split(".").pop() || "";
-      type = Object.keys(mimeTypes).filter((type2) => mimeTypes[type2].includes(ext))[0];
-    }
-    if (!type) {
-      unknownSupport = true;
-      return false;
-    }
-    const isSupported2 = player.canPlayType(type) !== "";
-    if (!isSupported2) {
-      console.warn(`The specified type "${type}" is not supported by the browser.`);
-    }
-    return isSupported2;
-  }
-  function getBufferedRanges() {
-    if (!player)
-      return [];
-    const ranges = [];
-    const seekable = player.buffered || [];
-    const offset = 0;
-    for (let i = 0, length = seekable.length; i < length; i++) {
-      let start = seekable.start(i);
-      let end = seekable.end(i);
-      if (!isValidDuration(start))
-        start = 0;
-      if (!isValidDuration(end)) {
-        end = 0;
-        continue;
-      }
-      ranges.push({
-        start: start + offset,
-        end: end + offset
-      });
-    }
-    return ranges;
-  }
-  function getLastBufferedTime() {
-    const bufferedRanges = getBufferedRanges();
-    if (!bufferedRanges.length)
-      return 0;
-    const buff = bufferedRanges.find(
-      (buff2) => buff2.start < player.currentTime && buff2.end > player.currentTime
-    );
-    if (buff)
-      return buff.end;
-    const last = bufferedRanges[bufferedRanges.length - 1];
-    return last.end;
-  }
-  function isValidDuration(duration2) {
-    if (duration2 && !Number.isNaN(duration2) && duration2 !== Number.POSITIVE_INFINITY && duration2 !== Number.NEGATIVE_INFINITY) {
-      return true;
-    }
-    return false;
-  }
-  function destroy() {
-    player?.pause();
-    player?.remove();
-    playerList.splice(playerList.indexOf(player), 1);
-    player = null;
-  }
-  onMounted(() => {
-    initialize();
-    watch([source, options.type], () => {
-      destroy();
-      loaded.value = false;
-      paused.value = true;
-      currentTime.value = 0;
-      duration.value = 0;
-      initialize();
-    });
-  });
-  onUnmounted(() => destroy());
-  return {
-    isSupported,
-    paused,
-    loaded,
-    currentTime,
-    duration,
-    player,
-    destroy,
-    play: () => {
-      if (options.mutex ?? true) {
-        for (const p of playerList) {
-          if (p !== player)
-            p.pause();
-        }
-      }
-      player?.play();
-    },
-    pause: () => player?.pause(),
-    seek(time) {
-      if (player)
-        player.currentTime = time;
-    },
-    setVolume(volume2) {
-      if (player)
-        player.volume = Math.min(1, Math.max(0, volume2));
-    }
-  };
+	let player = null;
+	let unknownSupport = false;
+	const isSupported = ref(false);
+	const loaded = ref(false);
+	const paused = ref(true);
+	const currentTime = ref(0);
+	const duration = ref(0);
+	const volume = ref(1);
+	function initialize() {
+		player = document.createElement("audio");
+		player.className = "audio-player";
+		player.style.display = "none";
+		player.preload = options.autoplay ? "auto" : "none";
+		player.autoplay = options.autoplay ?? false;
+		document.body.appendChild(player);
+		playerList.push(player);
+		player.onloadedmetadata = () => {
+			duration.value = player.duration;
+			currentTime.value = player.currentTime;
+			volume.value = player.volume;
+			loaded.value = true;
+		};
+		player.oncanplay = (...args) => {
+			loaded.value = true;
+			if (unknownSupport) isSupported.value = true;
+			options.oncanplay?.bind(player)(...args);
+		};
+		player.onplay = (...args) => {
+			paused.value = false;
+			options.onplay?.bind(player)(...args);
+		};
+		player.onpause = (...args) => {
+			paused.value = true;
+			options.onpause?.bind(player)(...args);
+		};
+		player.ontimeupdate = () => {
+			if (isValidDuration(player.duration)) {
+				const lastBufferTime = getLastBufferedTime();
+				if (lastBufferTime <= player.duration) {
+					options.ontimeupdate?.bind(player)(lastBufferTime);
+					currentTime.value = lastBufferTime;
+					options.onprogress?.bind(player)(lastBufferTime, player.duration);
+				}
+			}
+		};
+		player.onvolumechange = () => {
+			volume.value = player.volume;
+			options.onvolume?.bind(player)(player.volume);
+		};
+		player.onended = (...args) => {
+			paused.value = true;
+			options.onend?.bind(player)(...args);
+		};
+		player.onplaying = options.onplaying;
+		player.onload = options.onload;
+		player.onerror = options.onerror;
+		player.onseeked = options.onseeked;
+		player.oncanplaythrough = options.oncanplaythrough;
+		player.onwaiting = options.onwaiting;
+		isSupported.value = isSupportType();
+		player.src = toValue(source);
+		player.load();
+	}
+	function isSupportType() {
+		if (!player) return false;
+		let type = toValue(options.type);
+		if (!type) {
+			const ext = toValue(source).split(".").pop() || "";
+			type = Object.keys(mimeTypes).filter((type$1) => mimeTypes[type$1].includes(ext))[0];
+		}
+		if (!type) {
+			unknownSupport = true;
+			return false;
+		}
+		const isSupported$1 = player.canPlayType(type) !== "";
+		if (!isSupported$1) console.warn(`The specified type "${type}" is not supported by the browser.`);
+		return isSupported$1;
+	}
+	function getBufferedRanges() {
+		if (!player) return [];
+		const ranges = [];
+		const seekable = player.buffered || [];
+		const offset = 0;
+		for (let i = 0, length = seekable.length; i < length; i++) {
+			let start = seekable.start(i);
+			let end = seekable.end(i);
+			if (!isValidDuration(start)) start = 0;
+			if (!isValidDuration(end)) {
+				end = 0;
+				continue;
+			}
+			ranges.push({
+				start: start + offset,
+				end: end + offset
+			});
+		}
+		return ranges;
+	}
+	function getLastBufferedTime() {
+		const bufferedRanges = getBufferedRanges();
+		if (!bufferedRanges.length) return 0;
+		const buff = bufferedRanges.find((buff$1) => buff$1.start < player.currentTime && buff$1.end > player.currentTime);
+		if (buff) return buff.end;
+		const last = bufferedRanges[bufferedRanges.length - 1];
+		return last.end;
+	}
+	function isValidDuration(duration$1) {
+		if (duration$1 && !Number.isNaN(duration$1) && duration$1 !== Number.POSITIVE_INFINITY && duration$1 !== Number.NEGATIVE_INFINITY) return true;
+		return false;
+	}
+	function destroy() {
+		player?.pause();
+		player?.remove();
+		playerList.splice(playerList.indexOf(player), 1);
+		player = null;
+	}
+	onMounted(() => {
+		initialize();
+		watch([source, options.type], () => {
+			destroy();
+			loaded.value = false;
+			paused.value = true;
+			currentTime.value = 0;
+			duration.value = 0;
+			initialize();
+		});
+	});
+	onUnmounted(() => destroy());
+	return {
+		isSupported,
+		paused,
+		loaded,
+		currentTime,
+		duration,
+		player,
+		destroy,
+		play: () => {
+			if (options.mutex ?? true) {
+				for (const p of playerList) if (p !== player) p.pause();
+			}
+			player?.play();
+		},
+		pause: () => player?.pause(),
+		seek(time) {
+			if (player) player.currentTime = time;
+		},
+		setVolume(volume$1) {
+			if (player) player.volume = Math.min(1, Math.max(0, volume$1));
+		}
+	};
 }
-export {
-  useAudioPlayer
-};
+
+//#endregion
+export { useAudioPlayer };