vuepress-plugin-md-power 1.0.0-rc.136 → 1.0.0-rc.137

package/lib/client/components/VPCollapse.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { INJECT_COLLAPSE_KEY } from '../options.js'
+
+const props = defineProps<{
+  accordion?: boolean
+  index?: number
+}>()
+
+const currentIndex = ref<number | undefined>(props.index)
+
+provide(INJECT_COLLAPSE_KEY, {
+  accordion: props.accordion ?? false,
+  index: currentIndex,
+})
+</script>
+
+<template>
+  <div class="vp-collapse">
+    <slot />
+  </div>
+</template>
+
+<style>
+.vp-collapse {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 16px 0;
+}
+</style>

package/lib/client/components/VPCollapseItem.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { inject, ref, watch } from 'vue'
+import { INJECT_COLLAPSE_KEY } from '../options.js'
+import VPFadeInExpandTransition from './VPFadeInExpandTransition.vue'
+
+const props = defineProps<{
+  expand?: boolean
+  index: number
+}>()
+
+const collapse = inject<{
+  accordion: boolean
+  index: Ref<number | undefined>
+}>(INJECT_COLLAPSE_KEY)
+
+if (__VUEPRESS_DEV__ && !collapse) {
+  throw new Error('<VPCollapseItem /> must be used inside <VPCollapse />')
+}
+
+const expand = ref(
+  collapse?.accordion && typeof collapse.index.value !== 'undefined'
+    ? props.index === collapse.index.value
+    : props.expand,
+)
+
+if (collapse?.accordion) {
+  watch(collapse?.index, () => {
+    expand.value = collapse?.index.value === props.index
+  })
+}
+
+function toggle() {
+  if (collapse?.accordion) {
+    if (collapse.index.value === props.index && expand.value) {
+      expand.value = false
+    }
+    else {
+      collapse!.index.value = props.index!
+      expand.value = true
+    }
+  }
+  else {
+    expand.value = !expand.value
+  }
+}
+</script>
+
+<template>
+  <div class="vp-collapse-item" :class="{ expand }">
+    <div class="vp-collapse-header" @click="toggle">
+      <span class="vpi-chevron-right" />
+      <p class="vp-collapse-title">
+        <slot name="title" />
+      </p>
+    </div>
+    <VPFadeInExpandTransition>
+      <div v-show="expand" class="vp-collapse-content">
+        <div class="vp-collapse-content-inner">
+          <slot />
+        </div>
+      </div>
+    </VPFadeInExpandTransition>
+  </div>
+</template>
+
+<style>
+.vp-collapse-item {
+  display: flex;
+  flex-direction: column;
+  padding-top: 16px;
+  border-top: solid 1px var(--vp-c-divider);
+}
+
+.vp-collapse-item:first-child {
+  border-top: none;
+}
+
+.vp-collapse-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vp-collapse-header .vpi-chevron-right {
+  align-self: baseline;
+  width: 20px;
+  height: 20px;
+  transition: transform var(--vp-t-color);
+  transform: rotate(0deg);
+}
+
+.vp-collapse-item.expand .vpi-chevron-right {
+  transform: rotate(90deg);
+}
+
+.vp-collapse-header .vp-collapse-title {
+  flex: 1 2;
+  margin: 0;
+  line-height: 1;
+}
+
+.vp-collapse-content-inner {
+  padding-top: 12px;
+  padding-left: 24px;
+}
+
+.vp-collapse-content-inner > *:first-child {
+  margin-top: 0;
+}
+
+.vp-collapse-content-inner > *:last-child {
+  margin-bottom: 0;
+}
+</style>

package/lib/client/components/VPFadeInExpandTransition.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { Transition, TransitionGroup } from 'vue'
+
+const props = defineProps<{
+  group?: boolean
+  appear?: boolean
+  mode?: 'in-out' | 'out-in' | 'default'
+  onLeave?: () => void
+  onAfterLeave?: () => void
+  onAfterEnter?: () => void
+  width?: boolean
+}>()
+
+function handleBeforeLeave(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = `${el.offsetWidth}px`
+  }
+  else {
+    el.style.maxHeight = `${el.offsetHeight}px`
+  }
+  void el.offsetWidth
+}
+
+function handleLeave(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = '0'
+  }
+  else {
+    el.style.maxHeight = '0'
+  }
+  void el.offsetWidth
+  props.onLeave?.()
+}
+
+function handleAfterLeave(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = ''
+  }
+  else {
+    el.style.maxHeight = ''
+  }
+  props.onAfterLeave?.()
+}
+
+function handleEnter(el: HTMLElement): void {
+  el.style.transition = 'none'
+  if (props.width) {
+    const memorizedWidth = el.offsetWidth
+    el.style.maxWidth = '0'
+    void el.offsetWidth
+    el.style.transition = ''
+    el.style.maxWidth = `${memorizedWidth}px`
+  }
+  else {
+    const memorizedHeight = el.offsetHeight
+    el.style.maxHeight = '0'
+    void el.offsetWidth
+    el.style.transition = ''
+    el.style.maxHeight = `${memorizedHeight}px`
+  }
+  void el.offsetWidth
+}
+
+function handleAfterEnter(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = ''
+  }
+  else {
+    el.style.maxHeight = ''
+  }
+  props.onAfterEnter?.()
+}
+</script>
+
+<template>
+  <component
+    :is="group ? TransitionGroup : Transition"
+    :name="width ? 'fade-in-width-expand' : 'fade-in-height-expand'"
+    :mode
+    :appear
+    @enter="handleEnter"
+    @after-enter="handleAfterEnter"
+    @before-leave="handleBeforeLeave"
+    @leave="handleLeave"
+    @after-leave="handleAfterLeave"
+  >
+    <slot />
+  </component>
+</template>
+
+<style>
+.fade-in-height-expand-leave-from,
+.fade-in-height-expand-enter-to,
+.fade-in-width-expand-leave-from,
+.fade-in-width-expand-enter-to {
+  opacity: 1;
+}
+
+.fade-in-height-expand-leave-to,
+.fade-in-height-expand-enter-from {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  opacity: 0;
+}
+
+.fade-in-height-expand-leave-active {
+  overflow: hidden;
+  transition:
+    max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    opacity cubic-bezier(0, 0, 0.2, 1) 0.3s,
+    margin-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    margin-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+}
+
+.fade-in-height-expand-enter-active {
+  overflow: hidden;
+  transition:
+    max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    opacity cubic-bezier(0.4, 0, 1, 1) 0.3s,
+    margin-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    margin-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+}
+
+.fade-in-width-expand-leave-to,
+.fade-in-width-expand-enter-from {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  opacity: 0 !important;
+}
+
+.fade-in-width-expand-leave-active {
+  overflow: hidden;
+  transition:
+    max-width cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
+    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
+    margin-right cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
+    margin-left cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s;
+}
+
+.fade-in-width-expand-enter-active {
+  overflow: hidden;
+  transition:
+    max-width cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
+    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
+    margin-right cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
+    margin-left cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+}
+</style>

package/lib/client/components/VPTimeline.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { computed, provide } from 'vue'
+import { INJECT_TIMELINE_KEY } from '../options.js'
+
+const props = defineProps<{
+  horizontal?: boolean
+  card?: boolean
+  placement?: 'left' | 'right' | 'between'
+  line?: 'solid' | 'dashed' | 'dotted'
+}>()
+
+provide(INJECT_TIMELINE_KEY, computed(() => ({
+  line: props.line || 'solid',
+  card: props.card ?? false,
+  horizontal: props.horizontal ?? false,
+  placement: props.placement || 'left',
+})))
+</script>
+
+<template>
+  <div class="vp-timeline" :class="{ horizontal }">
+    <div class="vp-timeline-box">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-timeline {
+  position: relative;
+  margin: 32px 0;
+}
+
+.vp-timeline.horizontal {
+  padding-bottom: 7px;
+  overflow-x: auto;
+}
+
+.vp-timeline-box {
+  display: flex;
+  gap: 24px 36px;
+}
+
+.vp-timeline:not(.horizontal) .vp-timeline-box {
+  flex-direction: column;
+}
+
+.vp-timeline.horizontal .vp-timeline-box {
+  flex-direction: row;
+  width: max-content;
+}
+</style>

package/lib/client/components/VPTimelineItem.vue

@@ -0,0 +1,330 @@
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import { computed, inject } from 'vue'
+import { INJECT_TIMELINE_KEY } from '../options.js'
+
+const props = defineProps<{
+  time?: string
+  type?: 'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important' | (string & {})
+  card?: boolean
+  line?: 'solid' | 'dashed' | 'dotted'
+  icon?: string
+  color?: string
+  placement?: 'left' | 'right'
+}>()
+
+const is639 = useMediaQuery('(max-width: 639px)')
+
+const defaultOptions = inject<ComputedRef<{
+  line?: 'solid' | 'dashed' | 'dotted'
+  card?: boolean
+  horizontal?: boolean
+  placement?: 'left' | 'right' | 'between'
+}>>(INJECT_TIMELINE_KEY)
+
+const timeline = computed(() => {
+  const between = defaultOptions?.value.placement === 'between' && !is639.value
+  const placement = defaultOptions?.value.placement === 'between' ? 'left' : defaultOptions?.value.placement
+  return {
+    time: props.time,
+    type: props.type || 'info',
+    line: props.line || defaultOptions?.value.line || 'solid',
+    icon: props.icon,
+    color: props.color,
+    horizontal: defaultOptions?.value.horizontal ?? false,
+    between: between ? props.placement || 'left' : false,
+    placement: between ? '' : (placement || 'left'),
+    card: props.card ?? defaultOptions?.value.card ?? false,
+  }
+})
+</script>
+
+<template>
+  <div
+    class="vp-timeline-item" :class="{
+      card: timeline.card,
+      horizontal: timeline.horizontal,
+      [timeline.type]: true,
+      [`line-${timeline.line}`]: true,
+      [`placement-${timeline.placement}`]: !timeline.horizontal && timeline.placement,
+      between: timeline.between,
+      [`between-${timeline.between}`]: timeline.between,
+    }"
+    :style="timeline.color ? {
+      '--vp-timeline-c-line': timeline.color,
+      '--vp-timeline-c-point': timeline.color,
+    } : null"
+  >
+    <div class="vp-timeline-line" :class="{ 'has-icon': timeline.icon }">
+      <span class="vp-timeline-point">
+        <slot name="icon">
+          <VPIcon v-if="timeline.icon" :name="timeline.icon" />
+        </slot>
+      </span>
+    </div>
+    <div class="vp-timeline-container">
+      <div class="vp-timeline-content">
+        <p class="vp-timeline-title">
+          <slot name="title" />
+        </p>
+        <slot />
+      </div>
+      <p v-if="timeline.time" class="vp-timeline-time">
+        {{ timeline.time }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+:root,
+.vp-timeline-item.info {
+  --vp-timeline-c-line: var(--vp-c-border);
+  --vp-timeline-c-point: var(--vp-c-border);
+  --vp-timeline-c-title: var(--vp-c-text-1);
+  --vp-timeline-c-text: var(--vp-c-text-1);
+  --vp-timeline-c-time: var(--vp-c-text-3);
+  --vp-timeline-c-icon: var(--vp-c-bg);
+  --vp-timeline-bg-card: var(--vp-c-bg-soft);
+}
+
+.vp-timeline-item.tip {
+  --vp-timeline-c-line: var(--vp-c-tip-1);
+  --vp-timeline-c-point: var(--vp-c-tip-1);
+  --vp-timeline-bg-card: var(--vp-c-tip-soft);
+}
+
+.vp-timeline-item.success {
+  --vp-timeline-c-line: var(--vp-c-success-3);
+  --vp-timeline-c-point: var(--vp-c-success-3);
+  --vp-timeline-bg-card: var(--vp-c-success-soft);
+}
+
+.vp-timeline-item.warning {
+  --vp-timeline-c-line: var(--vp-c-warning-3);
+  --vp-timeline-c-point: var(--vp-c-warning-3);
+  --vp-timeline-bg-card: var(--vp-c-warning-soft);
+}
+
+.vp-timeline-item.danger {
+  --vp-timeline-c-line: var(--vp-c-danger-3);
+  --vp-timeline-c-point: var(--vp-c-danger-3);
+  --vp-timeline-bg-card: var(--vp-c-danger-soft);
+}
+
+.vp-timeline-item.caution {
+  --vp-timeline-c-line: var(--vp-c-caution-3);
+  --vp-timeline-c-point: var(--vp-c-caution-3);
+  --vp-timeline-bg-card: var(--vp-c-caution-soft);
+}
+
+.vp-timeline-item.important {
+  --vp-timeline-c-line: var(--vp-c-important-3);
+  --vp-timeline-c-point: var(--vp-c-important-3);
+  --vp-timeline-bg-card: var(--vp-c-important-soft);
+}
+
+.vp-timeline-item {
+  position: relative;
+  display: flex;
+}
+
+.vp-timeline-item:not(.horizontal).between {
+  width: calc(50% - 18px);
+}
+
+.vp-timeline-item.horizontal {
+  padding-top: 36px;
+}
+
+.vp-timeline-item > .vp-timeline-line {
+  position: absolute;
+}
+
+.vp-timeline-item:not(.horizontal).placement-left {
+  justify-content: flex-start;
+  padding-left: 36px;
+}
+
+.vp-timeline-item:not(.horizontal).placement-right,
+.vp-timeline-item:not(.horizontal).between {
+  justify-content: flex-end;
+  padding-right: 36px;
+  text-align: right;
+}
+
+.vp-timeline-item:not(.horizontal) > .vp-timeline-line {
+  top: 0;
+  bottom: 0;
+  width: 0;
+}
+
+.vp-timeline-item.horizontal > .vp-timeline-line {
+  top: 12px;
+  right: 0;
+  left: 0;
+  height: 0;
+}
+
+.vp-timeline-item:not(.horizontal).card > .vp-timeline-line {
+  top: 14px;
+}
+
+.vp-timeline-item:not(.horizontal).placement-left > .vp-timeline-line {
+  left: 12px;
+}
+
+.vp-timeline-item:not(.horizontal).placement-right > .vp-timeline-line,
+.vp-timeline-item:not(.horizontal).between > .vp-timeline-line {
+  right: 12px;
+}
+
+.vp-timeline-item > .vp-timeline-line::before {
+  position: absolute;
+  display: block;
+  content: "";
+  border: none;
+}
+
+.vp-timeline-item:not(.horizontal) > .vp-timeline-line::before {
+  top: 10px;
+  bottom: -48px;
+  border-left: 2px solid var(--vp-timeline-c-line);
+}
+
+.vp-timeline-item.horizontal > .vp-timeline-line::before {
+  right: -46px;
+  left: 8px;
+  border-top: 2px solid var(--vp-timeline-c-line);
+}
+
+.vp-timeline-item:not(.horizontal):last-of-type > .vp-timeline-line::before {
+  bottom: 0 !important;
+}
+
+.vp-timeline-item.horizontal:last-of-type > .vp-timeline-line::before {
+  right: 0 !important;
+}
+
+.vp-timeline-item:not(.horizontal).line-dashed > .vp-timeline-line::before {
+  border-left-style: dashed;
+}
+
+.vp-timeline-item:not(.horizontal).line-dotted > .vp-timeline-line::before {
+  border-left-style: dotted;
+}
+
+.vp-timeline-item.horizontal.line-dashed > .vp-timeline-line::before {
+  border-top-style: dashed;
+}
+
+.vp-timeline-item.horizontal.line-dotted > .vp-timeline-line::before {
+  border-top-style: dotted;
+}
+
+.vp-timeline-item > .vp-timeline-line .vp-timeline-point {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: var(--vp-timeline-c-point);
+  border-radius: 50%;
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-timeline-item:not(.horizontal) > .vp-timeline-line .vp-timeline-point {
+  top: 4px;
+  left: -7px;
+}
+
+.vp-timeline-item.horizontal > .vp-timeline-line .vp-timeline-point {
+  top: -7px;
+  left: 0;
+}
+
+.vp-timeline-item > .vp-timeline-line.has-icon .vp-timeline-point {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.vp-timeline-item:not(.horizontal) > .vp-timeline-line.has-icon .vp-timeline-point {
+  top: -1px;
+  left: -11px;
+}
+
+.vp-timeline-item.horizontal > .vp-timeline-line.has-icon .vp-timeline-point {
+  top: -11px;
+  left: 0;
+}
+
+.vp-timeline-item > .vp-timeline-line.has-icon .vp-timeline-point .vp-icon {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  color: var(--vp-timeline-c-icon);
+}
+
+.vp-timeline-item .vp-timeline-container {
+  width: max-content;
+  max-width: 100%;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--vp-timeline-c-text);
+  transition: color var(--vp-t-color);
+}
+
+.vp-timeline-item.horizontal .vp-timeline-container {
+  max-width: 240px;
+}
+
+.vp-timeline-item:not(.horizontal).between-right .vp-timeline-container {
+  text-align: left;
+  transform: translateX(calc(100% + 48px));
+}
+
+.vp-timeline-item.card .vp-timeline-content {
+  padding: 16px;
+  background-color: var(--vp-timeline-bg-card);
+  border-radius: 6px;
+}
+
+.vp-timeline-item .vp-timeline-content :where(p, ul, ol) {
+  margin: 8px 0;
+  line-height: 22px;
+}
+
+.vp-doc .vp-timeline-item .vp-timeline-content div[class*="language-"] {
+  margin: 16px 0;
+}
+
+.vp-timeline-item .vp-timeline-content li + li {
+  margin-top: 4px;
+}
+
+.vp-timeline-item .vp-timeline-content .vp-timeline-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 900;
+  color: var(--vp-timeline-c-title);
+  transition: color var(--vp-t-color);
+}
+
+.vp-timeline-item .vp-timeline-content > .vp-timeline-title + * {
+  margin-top: 0 !important;
+}
+
+.vp-timeline-item .vp-timeline-content > :last-child {
+  margin-bottom: 0 !important;
+}
+
+.vp-timeline-item .vp-timeline-time {
+  margin: 4px 0 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-timeline-c-time);
+  transition: color var(--vp-t-color);
+}
+</style>

package/lib/client/options.d.ts

@@ -7,5 +7,7 @@ declare const installed: {
     mpegtsjs: boolean;
 };
 declare const ART_PLAYER_SUPPORTED_VIDEO_TYPES: string[];
+declare const INJECT_TIMELINE_KEY: unique symbol;
+declare const INJECT_COLLAPSE_KEY: unique symbol;
 
-export { ART_PLAYER_SUPPORTED_VIDEO_TYPES, installed, pluginOptions };
+export { ART_PLAYER_SUPPORTED_VIDEO_TYPES, INJECT_COLLAPSE_KEY, INJECT_TIMELINE_KEY, installed, pluginOptions };

package/lib/client/options.js

@@ -15,8 +15,16 @@ if (installed.hlsjs) {
 if (installed.mpegtsjs) {
   ART_PLAYER_SUPPORTED_VIDEO_TYPES.push("ts", "flv");
 }
+var INJECT_TIMELINE_KEY = Symbol(
+  __VUEPRESS_DEV__ ? "timeline" : ""
+);
+var INJECT_COLLAPSE_KEY = Symbol(
+  __VUEPRESS_DEV__ ? "collapse" : ""
+);
 export {
   ART_PLAYER_SUPPORTED_VIDEO_TYPES,
+  INJECT_COLLAPSE_KEY,
+  INJECT_TIMELINE_KEY,
   installed,
   pluginOptions
 };

package/lib/node/index.d.ts

@@ -218,6 +218,39 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     plot?: boolean | PlotOptions;
+    /**
+     * 是否启用 timeline 语法
+     *
+     * ```md
+     * ::: timeline
+     * - title
+     *   time="Q1" icon="ri:clockwise-line" line="dashed" type="warning" color="red"
+     *
+     *   xxx
+     * :::
+     * ```
+     *
+     * @default false
+     */
+    timeline?: boolean;
+    /**
+     * 是否启用 collapse 折叠面板 语法
+     *
+     * ```md
+     * ::: collapse accordion
+     * - + title
+     *
+     *   content
+     *
+     * - - title
+     *
+     *   content
+     * :::
+     * ```
+     *
+     * @default false
+     */
+    collapse?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *

package/lib/node/index.js

@@ -1158,14 +1158,14 @@ import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
 
 // src/node/container/createContainer.ts
 import container from "markdown-it-container";
-function createContainerPlugin(md, type2, options = {}) {
-  const render = (tokens, index) => {
+function createContainerPlugin(md, type2, { before, after } = {}) {
+  const render = (tokens, index, options, env) => {
     const token = tokens[index];
     const info = token.info.trim().slice(type2.length).trim() || "";
     if (token.nesting === 1) {
-      return options.before?.(info, tokens, index) || `<div class="custom-container ${type2}">`;
+      return before?.(info, tokens, index, options, env) || `<div class="custom-container ${type2}">`;
     } else {
-      return options.after?.(info, tokens, index) || "</div>";
+      return after?.(info, tokens, index, options, env) || "</div>";
     }
   };
   md.use(container, type2, { render });
@@ -1209,6 +1209,91 @@ function cardPlugin(md) {
   });
 }
 
+// src/node/container/collapse.ts
+function collapsePlugin(md) {
+  createContainerPlugin(md, "collapse", {
+    before: (info, tokens, index) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const idx = parseCollapse(tokens, index, attrs2);
+      const { accordion } = attrs2;
+      return `<VPCollapse${accordion ? " accordion" : ""}${idx !== void 0 ? ` :index="${idx}"` : ""}>`;
+    },
+    after: () => `</VPCollapse>`
+  });
+  md.renderer.rules.collapse_item_open = (tokens, idx) => {
+    const token = tokens[idx];
+    const { expand, index } = token.meta;
+    return `<VPCollapseItem${expand ? " expand" : ""}${` :index="${index}"`}>`;
+  };
+  md.renderer.rules.collapse_item_close = () => "</VPCollapseItem>";
+  md.renderer.rules.collapse_item_title_open = () => "<template #title>";
+  md.renderer.rules.collapse_item_title_close = () => "</template>";
+}
+function parseCollapse(tokens, index, attrs2) {
+  const listStack = [];
+  let idx = -1;
+  let defaultIndex;
+  let hashExpand = false;
+  for (let i = index + 1; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token.type === "container_collapse_close") {
+      break;
+    }
+    if (token.type === "bullet_list_open") {
+      listStack.push(0);
+      if (listStack.length === 1)
+        token.hidden = true;
+    } else if (token.type === "bullet_list_close") {
+      listStack.pop();
+      if (listStack.length === 0)
+        token.hidden = true;
+    } else if (token.type === "list_item_open") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "collapse_item_open";
+        tokens[i + 1].type = "collapse_item_title_open";
+        tokens[i + 3].type = "collapse_item_title_close";
+        idx++;
+        const inlineToken = tokens[i + 2];
+        const firstToken = inlineToken.children[0];
+        let flag = "";
+        let expand;
+        if (firstToken.type === "text") {
+          firstToken.content = firstToken.content.trim().replace(/^:[+\-]\s*/, (match) => {
+            flag = match.trim();
+            return "";
+          });
+        }
+        if (attrs2.accordion) {
+          if (!hashExpand && flag === ":+") {
+            expand = hashExpand = true;
+            defaultIndex = idx;
+          }
+        } else if (flag === ":+") {
+          expand = true;
+        } else if (flag === ":-") {
+          expand = false;
+        } else {
+          expand = !!attrs2.expand;
+        }
+        token.meta = {
+          index: idx,
+          expand
+        };
+      }
+    } else if (token.type === "list_item_close") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "collapse_item_close";
+      }
+    }
+  }
+  if (attrs2.accordion && attrs2.expand && !hashExpand) {
+    defaultIndex = 0;
+  }
+  return defaultIndex;
+}
+
 // src/node/container/demoWrapper.ts
 function demoWrapperPlugin(md) {
   createContainerPlugin(md, "demo-wrapper", {
@@ -1823,6 +1908,99 @@ ${titles.map(
   });
 };
 
+// src/node/container/timeline.ts
+import { isEmptyObject } from "@pengzhanbo/utils";
+var RE_KEY = /(\w+)=\s*/;
+var RE_SEARCH_KEY = /\s+\w+=\s*|$/;
+var RE_CLEAN_VALUE = /(?<quote>["'])(.*?)(\k<quote>)/;
+function timelinePlugin(md) {
+  createContainerPlugin(md, "timeline", {
+    before(info, tokens, index) {
+      parseTimeline(tokens, index);
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { horizontal, card, placement, line } = attrs2;
+      return `<VPTimeline${horizontal ? " horizontal" : ""}${card ? " card" : ' :card="undefined"'}${placement ? ` placement="${placement}"` : ""}${line ? ` line="${line}"` : ""}>`;
+    },
+    after: () => "</VPTimeline>"
+  });
+  md.renderer.rules.timeline_item_open = (tokens, idx) => {
+    const token = tokens[idx];
+    const { time, type: type2, icon, color, line, card, placement } = token.meta;
+    return `<VPTimelineItem${time ? ` time="${time}"` : ""}${type2 ? ` type="${type2}"` : ""}${color ? ` color="${color}"` : ""}${line ? ` line="${line}"` : ""}${icon ? ` icon="${icon}"` : ""}${card === "true" ? " card" : card === "false" ? "" : ' :card="undefined"'}${placement ? ` placement="${placement}"` : ""}>${icon ? `<template #icon><VPIcon name="${icon}"/></template>` : ""}`;
+  };
+  md.renderer.rules.timeline_item_close = () => "</VPTimelineItem>";
+  md.renderer.rules.timeline_item_title_open = () => "<template #title>";
+  md.renderer.rules.timeline_item_title_close = () => "</template>";
+}
+function parseTimeline(tokens, index) {
+  const listStack = [];
+  for (let i = index + 1; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token.type === "container_timeline_close") {
+      break;
+    }
+    if (token.type === "bullet_list_open") {
+      listStack.push(0);
+      if (listStack.length === 1)
+        token.hidden = true;
+    } else if (token.type === "bullet_list_close") {
+      listStack.pop();
+      if (listStack.length === 0)
+        token.hidden = true;
+    } else if (token.type === "list_item_open") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "timeline_item_open";
+        tokens[i + 1].type = "timeline_item_title_open";
+        tokens[i + 3].type = "timeline_item_title_close";
+        const inlineToken = tokens[i + 2];
+        const softbreakIndex = inlineToken.children.findLastIndex(
+          (token2) => token2.type === "softbreak"
+        );
+        if (softbreakIndex !== -1) {
+          const lastToken = inlineToken.children[inlineToken.children.length - 1];
+          token.meta = extractTimelineAttributes(lastToken.content.trim());
+          if (!isEmptyObject(token.meta)) {
+            inlineToken.children = inlineToken.children.slice(0, softbreakIndex);
+          }
+        } else {
+          token.meta = {};
+        }
+      }
+    } else if (token.type === "list_item_close") {
+      const currentLevel = listStack.length;
+      if (currentLevel === 1) {
+        token.type = "timeline_item_close";
+      }
+    }
+  }
+}
+function extractTimelineAttributes(rawText) {
+  const attrKeys = ["time", "type", "icon", "line", "color", "card", "placement"];
+  const attrs2 = {};
+  let buffer = rawText.trim();
+  while (buffer.length) {
+    const keyMatch = buffer.match(RE_KEY);
+    if (!keyMatch) {
+      break;
+    }
+    const matchedKey = keyMatch[1].toLowerCase();
+    if (!attrKeys.includes(matchedKey)) {
+      break;
+    }
+    const keyStart = keyMatch.index;
+    const keyEnd = keyStart + keyMatch[0].length;
+    buffer = buffer.slice(keyEnd);
+    let valueEnd = buffer.search(RE_SEARCH_KEY);
+    if (valueEnd === -1)
+      valueEnd = buffer.length;
+    const value = buffer.slice(0, valueEnd).trim();
+    attrs2[matchedKey] = value.replace(RE_CLEAN_VALUE, "$2");
+    buffer = buffer.slice(valueEnd);
+  }
+  return attrs2;
+}
+
 // src/node/container/index.ts
 async function containerPlugin(app, md, options) {
   alignPlugin(md);
@@ -1839,6 +2017,10 @@ async function containerPlugin(app, md, options) {
   if (options.fileTree) {
     fileTreePlugin(md, isPlainObject2(options.fileTree) ? options.fileTree : {});
   }
+  if (options.timeline)
+    timelinePlugin(md);
+  if (options.collapse)
+    collapsePlugin(md);
 }
 
 // src/node/demo/demo.ts
@@ -3428,6 +3610,18 @@ async function prepareConfigFile(app, options) {
     imports.add(`import Abbreviation from '${CLIENT_FOLDER}components/Abbreviation.vue'`);
     enhances.add(`app.component('Abbreviation', Abbreviation)`);
   }
+  if (options.timeline) {
+    imports.add(`import VPTimeline from '${CLIENT_FOLDER}components/VPTimeline.vue'`);
+    imports.add(`import VPTimelineItem from '${CLIENT_FOLDER}components/VPTimelineItem.vue'`);
+    enhances.add(`app.component('VPTimeline', VPTimeline)`);
+    enhances.add(`app.component('VPTimelineItem', VPTimelineItem)`);
+  }
+  if (options.collapse) {
+    imports.add(`import VPCollapse from '${CLIENT_FOLDER}components/VPCollapse.vue'`);
+    imports.add(`import VPCollapseItem from '${CLIENT_FOLDER}components/VPCollapseItem.vue'`);
+    enhances.add(`app.component('VPCollapse', VPCollapse)`);
+    enhances.add(`app.component('VPCollapseItem', VPCollapseItem)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'

package/lib/shared/index.d.ts

@@ -217,6 +217,39 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     plot?: boolean | PlotOptions;
+    /**
+     * 是否启用 timeline 语法
+     *
+     * ```md
+     * ::: timeline
+     * - title
+     *   time="Q1" icon="ri:clockwise-line" line="dashed" type="warning" color="red"
+     *
+     *   xxx
+     * :::
+     * ```
+     *
+     * @default false
+     */
+    timeline?: boolean;
+    /**
+     * 是否启用 collapse 折叠面板 语法
+     *
+     * ```md
+     * ::: collapse accordion
+     * - + title
+     *
+     *   content
+     *
+     * - - title
+     *
+     *   content
+     * :::
+     * ```
+     *
+     * @default false
+     */
+    collapse?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.136",
+  "version": "1.0.0-rc.137",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -38,8 +38,8 @@
     "less": "^4.2.2",
     "markdown-it": "^14.1.0",
     "mpegts.js": "^1.7.3",
-    "sass": "^1.85.1",
-    "sass-embedded": "^1.85.1",
+    "sass": "^1.86.0",
+    "sass-embedded": "^1.86.0",
     "stylus": "^0.64.0",
     "vuepress": "2.0.0-rc.20"
   },
@@ -68,6 +68,7 @@
     "@mdit/plugin-sup": "^0.16.0",
     "@mdit/plugin-tab": "^0.16.0",
     "@mdit/plugin-tasklist": "^0.16.0",
+    "@pengzhanbo/utils": "^1.2.0",
     "@vuepress/helper": "2.0.0-rc.82",
     "@vueuse/core": "^13.0.0",
     "chokidar": "3.6.0",
@@ -75,9 +76,9 @@
     "local-pkg": "^1.1.1",
     "lru-cache": "^11.0.2",
     "markdown-it-container": "^4.0.0",
-    "nanoid": "^5.1.3",
+    "nanoid": "^5.1.5",
     "shiki": "^3.2.1",
-    "tm-grammars": "^1.23.3",
+    "tm-grammars": "^1.23.5",
     "tm-themes": "^1.10.1",
     "vue": "^3.5.13"
   },