vitepress-plugin-collapse 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,168 @@
+# vitepress-plugin-collapse
+
+Render collapsible sections in your VitePress site.
+
+在 VitePress 中渲染可折叠的内容区块。
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-collapse
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-collapse
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-collapse
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import collapse from 'vitepress-plugin-collapse'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [collapse()],
+})
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-collapse
+# pnpm
+pnpm add -D vitepress-plugin-collapse
+# yarn
+yarn add -D vitepress-plugin-collapse
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { collapseMarkdownPlugin } from 'vitepress-plugin-collapse'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(collapseMarkdownPlugin)
+    },
+  },
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import { enhanceAppWithCollapse } from 'vitepress-plugin-collapse/client'
+import 'vitepress-plugin-collapse/style.css'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceAppWithCollapse(ctx)
+  },
+} satisfies Theme
+```
+
+## Syntax
+
+Use `::: collapse` container with a list to create collapsible sections. Each
+list item becomes a collapse panel: the first line is the title, and the
+following indented content is the panel body.
+
+使用 `::: collapse` 容器配合列表来创建可折叠区块。每个列表项成为一个折叠面板：
+第一行为标题，后续缩进内容为面板正文。
+
+### Basic
+
+```md
+::: collapse
+- Title 1
+  Content of item 1.
+
+- Title 2
+  Content of item 2.
+:::
+```
+
+### Accordion
+
+Add `accordion` to enable accordion mode — only one item can be expanded at a
+time. Use `expand` to expand the first item by default when no explicit `:+`
+flag is set.
+
+添加 `accordion` 启用手风琴模式 —— 同时只能展开一项。使用 `expand` 可在没有
+显式 `:+` 标记时默认展开第一项。
+
+```md
+::: collapse accordion expand
+- Question 1
+  Answer 1.
+
+- Question 2
+  Answer 2.
+:::
+```
+
+### Card Style
+
+Add `card` to render the container with a bordered, rounded card style.
+
+添加 `card` 以带边框、圆角的卡片样式渲染容器。
+
+```md
+::: collapse accordion card
+- Question 1
+  Answer 1.
+
+- Question 2
+  Answer 2.
+:::
+```
+
+### Per-item Expand Flag
+
+Prefix a title with `:+` to expand an item, or `:-` to collapse it. In
+accordion mode, only the first `:+` flag takes effect.
+
+在标题前添加 `:+` 展开该项，或 `:-` 收起该项。手风琴模式下只有第一个 `:+`
+标记生效。
+
+```md
+::: collapse
+- :+ Expanded by default
+  Content.
+
+- :- Collapsed by default
+  Content.
+
+- No flag, follows container `expand` attribute
+  Content.
+:::
+```
+
+### Container Attributes
+
+| Attribute   | Type      | Description                                                               |
+| ----------- | --------- | ------------------------------------------------------------------------- |
+| `accordion` | `boolean` | Enable accordion mode (only one item expanded at a time) / 启用手风琴模式 |
+| `card`      | `boolean` | Render with card style (bordered and rounded) / 使用卡片样式              |
+| `expand`    | `boolean` | Default expanded state / 默认展开状态                                     |
+
+### Item Flags
+
+| Flag | Description                                                                                         |
+| ---- | --------------------------------------------------------------------------------------------------- |
+| `:+` | Expand this item (only the first one wins in accordion mode) / 展开该项（手风琴模式下仅第一个生效） |
+| `:-` | Collapse this item / 收起该项                                                                       |

package/dist/client/browser/index.d.ts

@@ -0,0 +1,71 @@
+import { EnhanceAppContext } from "vitepress/client";
+
+//#region src/client/VPCollapse.vue.d.ts
+type __VLS_Props$1 = {
+  accordion?: boolean;
+  card?: boolean;
+  index?: number;
+};
+declare var __VLS_1$1: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_1$1) => any;
+};
+declare const __VLS_base$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/VPCollapseItem.vue.d.ts
+type __VLS_Props = {
+  expand?: boolean;
+  index: number;
+};
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+  title?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$1: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/index.d.ts
+/**
+ * Register `VPCollapse` and `VPCollapseItem` globally when using this plugin
+ * with VitePress directly (without `vitepress-tuck`).
+ *
+ * 当不使用 `vitepress-tuck` 而直接在 VitePress 中使用本插件时，
+ * 用于全局注册 `VPCollapse` 和 `VPCollapseItem` 组件。
+ *
+ * @param param0 - The VitePress enhance app context / VitePress 增强应用上下文
+ * @param param0.app - The Vue app instance to register components on / 要注册组件的 Vue 应用实例
+ * @example
+ * ```ts
+ * // .vitepress/theme/index.ts
+ * import type { Theme } from 'vitepress'
+ * import DefaultTheme from 'vitepress/theme'
+ * import { enhanceAppWithCollapse } from 'vitepress-plugin-collapse/client'
+ *
+ * export default {
+ *   extends: DefaultTheme,
+ *   enhanceApp(ctx) {
+ *     enhanceAppWithCollapse(ctx)
+ *   },
+ * } satisfies Theme
+ * ```
+ */
+declare function enhanceAppWithCollapse({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPCollapse, _default$1 as VPCollapseItem, enhanceAppWithCollapse };

package/dist/client/browser/index.js

@@ -0,0 +1,150 @@
+import "../style.css";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, provide, ref, renderSlot, unref, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { FadeInExpandTransition } from "vitepress-plugin-toolkit/client";
+//#region src/client/constants.ts
+/**
+* Injection key for the collapse container context, shared between
+* `<VPCollapse>` and its child `<VPCollapseItem>` components.
+*
+* 折叠面板容器上下文的注入键，在 `<VPCollapse>` 与其子级 `<VPCollapseItem>`
+* 组件之间共享。
+*
+* - `accordion`: whether accordion mode is enabled / 是否启用手风琴模式
+* - `index`: the currently expanded item index (writable ref), used to
+*   coordinate mutual exclusion in accordion mode / 当前展开项的索引（可写
+*   ref），用于在手风琴模式下协调互斥展开
+*/
+const COLLAPSE_KEY = Symbol(import.meta.env.DEV ? "collapse" : "");
+//#endregion
+//#region src/client/VPCollapse.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "VPCollapse",
+	props: {
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		card: { type: Boolean },
+		index: {}
+	},
+	setup(__props) {
+		/**
+		* Root component of the collapse container.
+		*
+		* 折叠面板容器的根组件。
+		*
+		* Renders a list of `<VPCollapseItem>` children and provides the collapse
+		* context via `provide`. In accordion mode, `index` tracks the currently
+		* expanded item so children can coordinate mutual exclusion.
+		*
+		* 渲染一组 `<VPCollapseItem>` 子组件，并通过 `provide` 提供折叠面板上下文。
+		* 手风琴模式下，`index` 用于跟踪当前展开项，使子组件能够协调互斥展开。
+		*
+		* @prop accordion - Enable accordion mode / 是否启用手风琴模式
+		* @prop card - Render with card style / 是否使用卡片样式
+		* @prop index - Default expanded item index (accordion mode) / 默认展开项索引（手风琴模式）
+		*/
+		const currentIndex = ref(__props.index);
+		provide(COLLAPSE_KEY, {
+			accordion: __props.accordion,
+			index: currentIndex
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["vp-collapse", { card: __props.card }]) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+//#region src/client/VPCollapseItem.vue
+const _hoisted_1 = ["aria-expanded", "onKeydown"];
+const _hoisted_2 = { class: "vp-collapse-title" };
+const _hoisted_3 = { class: "vp-collapse-content" };
+const _hoisted_4 = { class: "vp-collapse-content-inner" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "VPCollapseItem",
+	props: {
+		expand: { type: Boolean },
+		index: {}
+	},
+	setup(__props) {
+		/**
+		* Single collapse item, must be used inside `<VPCollapse>`.
+		*
+		* 单个折叠面板项，必须在 `<VPCollapse>` 内部使用。
+		*
+		* - Renders a clickable header (with the `title` slot) and a collapsible
+		*   content area (default slot).
+		* - In accordion mode, the item reads the shared `index` from the collapse
+		*   context and toggles it; expanding one item collapses all others.
+		* - Outside accordion mode, each item toggles its own `expanded` state
+		*   independently.
+		*
+		* - 渲染可点击的头部（使用 `title` 插槽）和可折叠的内容区域（默认插槽）。
+		* - 手风琴模式下，该项从折叠面板上下文读取共享的 `index` 并进行切换；
+		*   展开一项会自动收起其他项。
+		* - 非手风琴模式下，每项独立切换自身的 `expanded` 状态。
+		*
+		* @prop expand - Whether this item is expanded (ignored in accordion mode) / 是否展开该项（手风琴模式下忽略）
+		* @prop index - Zero-based index within the parent collapse / 在父级折叠面板中的索引（从 0 开始）
+		*/
+		const collapse = inject(COLLAPSE_KEY);
+		if (import.meta.env.DEV && !collapse) throw new Error("<VPCollapseItem /> must be used inside <VPCollapse />");
+		const expanded = ref(collapse?.accordion && typeof collapse.index.value !== "undefined" ? __props.index === collapse.index.value : __props.expand);
+		if (collapse?.accordion) watch(collapse?.index, () => {
+			expanded.value = collapse?.index.value === __props.index;
+		});
+		function toggle() {
+			if (collapse?.accordion) if (collapse.index.value === __props.index && expanded.value) expanded.value = false;
+			else {
+				collapse.index.value = __props.index;
+				expanded.value = true;
+			}
+			else expanded.value = !expanded.value;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["vp-collapse-item", { expanded: expanded.value }]) }, [createElementVNode("div", {
+				class: "vp-collapse-header",
+				tabindex: "0",
+				role: "button",
+				"aria-expanded": expanded.value ? "true" : "false",
+				onClick: toggle,
+				onKeydown: [withKeys(withModifiers(toggle, ["prevent"]), ["enter"]), withKeys(withModifiers(toggle, ["prevent"]), ["space"])]
+			}, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "vpi-chevron-right" }, null, -1)), createElementVNode("p", _hoisted_2, [renderSlot(_ctx.$slots, "title")])], 40, _hoisted_1), createVNode(unref(FadeInExpandTransition), null, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])], 512), [[vShow, expanded.value]])]),
+				_: 3
+			})], 2);
+		};
+	}
+});
+//#endregion
+//#region src/client/index.ts
+/**
+* Register `VPCollapse` and `VPCollapseItem` globally when using this plugin
+* with VitePress directly (without `vitepress-tuck`).
+*
+* 当不使用 `vitepress-tuck` 而直接在 VitePress 中使用本插件时，
+* 用于全局注册 `VPCollapse` 和 `VPCollapseItem` 组件。
+*
+* @param param0 - The VitePress enhance app context / VitePress 增强应用上下文
+* @param param0.app - The Vue app instance to register components on / 要注册组件的 Vue 应用实例
+* @example
+* ```ts
+* // .vitepress/theme/index.ts
+* import type { Theme } from 'vitepress'
+* import DefaultTheme from 'vitepress/theme'
+* import { enhanceAppWithCollapse } from 'vitepress-plugin-collapse/client'
+*
+* export default {
+*   extends: DefaultTheme,
+*   enhanceApp(ctx) {
+*     enhanceAppWithCollapse(ctx)
+*   },
+* } satisfies Theme
+* ```
+*/
+function enhanceAppWithCollapse({ app }) {
+	app.component("VPCollapse", _sfc_main);
+	app.component("VPCollapseItem", _sfc_main$1);
+}
+//#endregion
+export { _sfc_main as VPCollapse, _sfc_main$1 as VPCollapseItem, enhanceAppWithCollapse };

package/dist/client/ssr/index.d.ts

@@ -0,0 +1,71 @@
+import { EnhanceAppContext } from "vitepress/client";
+
+//#region src/client/VPCollapse.vue.d.ts
+type __VLS_Props$1 = {
+  accordion?: boolean;
+  card?: boolean;
+  index?: number;
+};
+declare var __VLS_1$1: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_1$1) => any;
+};
+declare const __VLS_base$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
+declare const _default: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/VPCollapseItem.vue.d.ts
+type __VLS_Props = {
+  expand?: boolean;
+  index: number;
+};
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+  title?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$1: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/client/index.d.ts
+/**
+ * Register `VPCollapse` and `VPCollapseItem` globally when using this plugin
+ * with VitePress directly (without `vitepress-tuck`).
+ *
+ * 当不使用 `vitepress-tuck` 而直接在 VitePress 中使用本插件时，
+ * 用于全局注册 `VPCollapse` 和 `VPCollapseItem` 组件。
+ *
+ * @param param0 - The VitePress enhance app context / VitePress 增强应用上下文
+ * @param param0.app - The Vue app instance to register components on / 要注册组件的 Vue 应用实例
+ * @example
+ * ```ts
+ * // .vitepress/theme/index.ts
+ * import type { Theme } from 'vitepress'
+ * import DefaultTheme from 'vitepress/theme'
+ * import { enhanceAppWithCollapse } from 'vitepress-plugin-collapse/client'
+ *
+ * export default {
+ *   extends: DefaultTheme,
+ *   enhanceApp(ctx) {
+ *     enhanceAppWithCollapse(ctx)
+ *   },
+ * } satisfies Theme
+ * ```
+ */
+declare function enhanceAppWithCollapse({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPCollapse, _default$1 as VPCollapseItem, enhanceAppWithCollapse };

package/dist/client/ssr/index.js

@@ -0,0 +1,157 @@
+import { createVNode, defineComponent, inject, mergeProps, provide, ref, renderSlot, unref, useSSRContext, vShow, watch, withCtx, withDirectives } from "vue";
+import { ssrRenderAttr, ssrRenderAttrs, ssrRenderComponent, ssrRenderSlot, ssrRenderStyle } from "vue/server-renderer";
+import { FadeInExpandTransition } from "vitepress-plugin-toolkit/client";
+//#region src/client/constants.ts
+/**
+* Injection key for the collapse container context, shared between
+* `<VPCollapse>` and its child `<VPCollapseItem>` components.
+*
+* 折叠面板容器上下文的注入键，在 `<VPCollapse>` 与其子级 `<VPCollapseItem>`
+* 组件之间共享。
+*
+* - `accordion`: whether accordion mode is enabled / 是否启用手风琴模式
+* - `index`: the currently expanded item index (writable ref), used to
+*   coordinate mutual exclusion in accordion mode / 当前展开项的索引（可写
+*   ref），用于在手风琴模式下协调互斥展开
+*/
+const COLLAPSE_KEY = Symbol(import.meta.env.DEV ? "collapse" : "");
+//#endregion
+//#region src/client/VPCollapse.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "VPCollapse",
+	__ssrInlineRender: true,
+	props: {
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		card: { type: Boolean },
+		index: {}
+	},
+	setup(__props) {
+		/**
+		* Root component of the collapse container.
+		*
+		* 折叠面板容器的根组件。
+		*
+		* Renders a list of `<VPCollapseItem>` children and provides the collapse
+		* context via `provide`. In accordion mode, `index` tracks the currently
+		* expanded item so children can coordinate mutual exclusion.
+		*
+		* 渲染一组 `<VPCollapseItem>` 子组件，并通过 `provide` 提供折叠面板上下文。
+		* 手风琴模式下，`index` 用于跟踪当前展开项，使子组件能够协调互斥展开。
+		*
+		* @prop accordion - Enable accordion mode / 是否启用手风琴模式
+		* @prop card - Render with card style / 是否使用卡片样式
+		* @prop index - Default expanded item index (accordion mode) / 默认展开项索引（手风琴模式）
+		*/
+		const currentIndex = ref(__props.index);
+		provide(COLLAPSE_KEY, {
+			accordion: __props.accordion,
+			index: currentIndex
+		});
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: ["vp-collapse", { card: __props.card }] }, _attrs))}>`);
+			ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
+			_push(`</div>`);
+		};
+	}
+});
+const _sfc_setup$1 = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPCollapse.vue");
+	return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/VPCollapseItem.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "VPCollapseItem",
+	__ssrInlineRender: true,
+	props: {
+		expand: { type: Boolean },
+		index: {}
+	},
+	setup(__props) {
+		/**
+		* Single collapse item, must be used inside `<VPCollapse>`.
+		*
+		* 单个折叠面板项，必须在 `<VPCollapse>` 内部使用。
+		*
+		* - Renders a clickable header (with the `title` slot) and a collapsible
+		*   content area (default slot).
+		* - In accordion mode, the item reads the shared `index` from the collapse
+		*   context and toggles it; expanding one item collapses all others.
+		* - Outside accordion mode, each item toggles its own `expanded` state
+		*   independently.
+		*
+		* - 渲染可点击的头部（使用 `title` 插槽）和可折叠的内容区域（默认插槽）。
+		* - 手风琴模式下，该项从折叠面板上下文读取共享的 `index` 并进行切换；
+		*   展开一项会自动收起其他项。
+		* - 非手风琴模式下，每项独立切换自身的 `expanded` 状态。
+		*
+		* @prop expand - Whether this item is expanded (ignored in accordion mode) / 是否展开该项（手风琴模式下忽略）
+		* @prop index - Zero-based index within the parent collapse / 在父级折叠面板中的索引（从 0 开始）
+		*/
+		const collapse = inject(COLLAPSE_KEY);
+		if (import.meta.env.DEV && !collapse) throw new Error("<VPCollapseItem /> must be used inside <VPCollapse />");
+		const expanded = ref(collapse?.accordion && typeof collapse.index.value !== "undefined" ? __props.index === collapse.index.value : __props.expand);
+		if (collapse?.accordion) watch(collapse?.index, () => {
+			expanded.value = collapse?.index.value === __props.index;
+		});
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: ["vp-collapse-item", { expanded: expanded.value }] }, _attrs))}><div class="vp-collapse-header" tabindex="0" role="button"${ssrRenderAttr("aria-expanded", expanded.value ? "true" : "false")}><span class="vpi-chevron-right"></span><p class="vp-collapse-title">`);
+			ssrRenderSlot(_ctx.$slots, "title", {}, null, _push, _parent);
+			_push(`</p></div>`);
+			_push(ssrRenderComponent(unref(FadeInExpandTransition), null, {
+				default: withCtx((_, _push, _parent, _scopeId) => {
+					if (_push) {
+						_push(`<div class="vp-collapse-content" style="${ssrRenderStyle(expanded.value ? null : { display: "none" })}"${_scopeId}><div class="vp-collapse-content-inner"${_scopeId}>`);
+						ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId);
+						_push(`</div></div>`);
+					} else return [withDirectives(createVNode("div", { class: "vp-collapse-content" }, [createVNode("div", { class: "vp-collapse-content-inner" }, [renderSlot(_ctx.$slots, "default")])], 512), [[vShow, expanded.value]])];
+				}),
+				_: 3
+			}, _parent));
+			_push(`</div>`);
+		};
+	}
+});
+const _sfc_setup = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPCollapseItem.vue");
+	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/index.ts
+/**
+* Register `VPCollapse` and `VPCollapseItem` globally when using this plugin
+* with VitePress directly (without `vitepress-tuck`).
+*
+* 当不使用 `vitepress-tuck` 而直接在 VitePress 中使用本插件时，
+* 用于全局注册 `VPCollapse` 和 `VPCollapseItem` 组件。
+*
+* @param param0 - The VitePress enhance app context / VitePress 增强应用上下文
+* @param param0.app - The Vue app instance to register components on / 要注册组件的 Vue 应用实例
+* @example
+* ```ts
+* // .vitepress/theme/index.ts
+* import type { Theme } from 'vitepress'
+* import DefaultTheme from 'vitepress/theme'
+* import { enhanceAppWithCollapse } from 'vitepress-plugin-collapse/client'
+*
+* export default {
+*   extends: DefaultTheme,
+*   enhanceApp(ctx) {
+*     enhanceAppWithCollapse(ctx)
+*   },
+* } satisfies Theme
+* ```
+*/
+function enhanceAppWithCollapse({ app }) {
+	app.component("VPCollapse", _sfc_main);
+	app.component("VPCollapseItem", _sfc_main$1);
+}
+//#endregion
+export { _sfc_main as VPCollapse, _sfc_main$1 as VPCollapseItem, enhanceAppWithCollapse };

package/dist/client/style.css

@@ -0,0 +1,97 @@
+@import url("vitepress-plugin-toolkit/styles/transition/fade-in-height-expand.css");
+
+.vp-collapse {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-block: 16px;
+  margin-inline: 0;
+}
+
+.vp-collapse.card {
+  padding-block-end: 16px;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+}
+
+.vp-collapse-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-block-start: 16px;
+  border-top: solid 1px var(--vp-c-divider);
+}
+
+.vp-collapse-item:first-child,
+.vp-collapse.card .vp-collapse-item {
+  border-top: none;
+}
+
+.vp-collapse:not(.card) .vp-collapse-item:first-child {
+  padding-block-start: 0;
+}
+
+.vp-collapse.card .vp-collapse-item::after {
+  position: absolute;
+  right: 16px;
+  bottom: -16px;
+  left: 16px;
+  display: block;
+  height: 1px;
+  content: "";
+  background-color: var(--vp-c-divider);
+}
+
+.vp-collapse.card .vp-collapse-item:last-child::after {
+  display: none;
+}
+
+.vp-collapse-header {
+  display: flex;
+  gap: 6px;
+  align-items: first baseline;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vp-collapse-header .vpi-chevron-right {
+  position: relative;
+  top: 4px;
+  width: 20px;
+  height: 20px;
+  color: var(--vp-c-text-3);
+  transition: transform 0.25s ease-in-out;
+  transform: rotate(0deg);
+}
+
+.vp-collapse.card .vp-collapse-header {
+  gap: 0;
+  padding-inline: 4px 16px;
+}
+
+.vp-collapse-item.expanded .vpi-chevron-right {
+  transform: rotate(90deg);
+}
+
+.vp-collapse-header .vp-collapse-title {
+  flex: 1 2;
+  margin: 0;
+}
+
+.vp-collapse-content-inner {
+  padding-block-start: 12px;
+  padding-inline-start: 24px;
+}
+
+.vp-collapse.card .vp-collapse-content-inner {
+  padding-inline-end: 16px;
+}
+
+.vp-collapse-content-inner > *:first-child {
+  margin-top: 0;
+}
+
+.vp-collapse-content-inner > *:last-child {
+  margin-bottom: 0;
+}

package/dist/node/index.d.ts

@@ -0,0 +1,56 @@
+import { PluginSimple } from "markdown-it";
+
+//#region src/node/plugin.d.ts
+/**
+ * Collapse plugin factory.
+ *
+ * 折叠面板插件工厂函数。
+ *
+ * Registers the `::: collapse` markdown-it container and declares the
+ * `VPCollapse` and `VPCollapseItem` Vue components for auto-import. When used
+ * with `defineConfig` from `vitepress-tuck`, the components are auto-imported
+ * on demand — no manual `enhanceApp` registration is required.
+ *
+ * 注册 `::: collapse` markdown-it 容器，并声明 `VPCollapse` 和 `VPCollapseItem`
+ * Vue 组件以供自动导入。与 `vitepress-tuck` 的 `defineConfig` 配合使用时，
+ * 组件会按需自动导入，无需手动在 `enhanceApp` 中注册。
+ *
+ * @example
+ * ```ts
+ * // .vitepress/config.ts
+ * import { defineConfig } from 'vitepress-tuck'
+ * import collapse from 'vitepress-plugin-collapse'
+ *
+ * export default defineConfig({
+ *   plugins: [collapse()],
+ * })
+ * ```
+ */
+declare const collapse: (options?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+//#region src/node/markdown.d.ts
+/**
+ * Collapse plugin - Enable collapse container in markdown-it.
+ *
+ * 折叠面板插件 - 在 markdown-it 中启用折叠面板容器。
+ *
+ * Registers the `::: collapse` container and custom renderer rules for
+ * `collapse_item_*` tokens. The container is converted into a `<VPCollapse>`
+ * Vue component, and each list item is converted into a `<VPCollapseItem>`.
+ *
+ * 注册 `::: collapse` 容器以及 `collapse_item_*` 令牌的自定义渲染规则。
+ * 容器会被转换为 `<VPCollapse>` Vue 组件，每个列表项会被转换为 `<VPCollapseItem>`。
+ *
+ * @param md - Markdown instance / Markdown 实例
+ * @example
+ * ```ts
+ * import MarkdownIt from 'markdown-it'
+ * import { collapseMarkdownPlugin } from 'vitepress-plugin-collapse'
+ *
+ * const md = new MarkdownIt()
+ * md.use(collapseMarkdownPlugin)
+ * ```
+ */
+declare const collapseMarkdownPlugin: PluginSimple;
+//#endregion
+export { collapse, collapse as default, collapseMarkdownPlugin };

package/dist/node/index.js

@@ -0,0 +1,174 @@
+import { definePlugin } from "vitepress-tuck";
+import { createContainerPlugin, resolveAttrs, stringifyAttrs } from "vitepress-plugin-toolkit";
+//#region src/node/markdown.ts
+/**
+* Collapse plugin - Enable collapse container in markdown-it.
+*
+* 折叠面板插件 - 在 markdown-it 中启用折叠面板容器。
+*
+* Registers the `::: collapse` container and custom renderer rules for
+* `collapse_item_*` tokens. The container is converted into a `<VPCollapse>`
+* Vue component, and each list item is converted into a `<VPCollapseItem>`.
+*
+* 注册 `::: collapse` 容器以及 `collapse_item_*` 令牌的自定义渲染规则。
+* 容器会被转换为 `<VPCollapse>` Vue 组件，每个列表项会被转换为 `<VPCollapseItem>`。
+*
+* @param md - Markdown instance / Markdown 实例
+* @example
+* ```ts
+* import MarkdownIt from 'markdown-it'
+* import { collapseMarkdownPlugin } from 'vitepress-plugin-collapse'
+*
+* const md = new MarkdownIt()
+* md.use(collapseMarkdownPlugin)
+* ```
+*/
+const collapseMarkdownPlugin = (md) => {
+	createContainerPlugin(md, "collapse", {
+		before: (info, tokens, index) => {
+			const attrs = resolveAttrs(info);
+			const idx = parseCollapse(tokens, index, attrs);
+			const { accordion, card } = attrs;
+			return `<VPCollapse${stringifyAttrs({
+				accordion,
+				card,
+				index: idx
+			})}>`;
+		},
+		after: () => `</VPCollapse>`
+	});
+	md.renderer.rules.collapse_item_open = (tokens, idx) => {
+		const { expand, index } = tokens[idx].meta;
+		return `<VPCollapseItem${stringifyAttrs({
+			expand,
+			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>";
+};
+/**
+* Parse collapse tokens and transform list items into collapse items.
+*
+* 解析折叠面板令牌，并将列表项转换为折叠面板项。
+*
+* Walks the token stream starting after the `container_collapse_open` token,
+* hides the wrapping list tokens, and rewrites root-level list item tokens
+* into `collapse_item_*` tokens. Each title's leading `:+` or `:-` flag is
+* stripped and used to determine the item's expand state:
+*  - `:+` expands the item (in accordion mode, only the first one wins).
+*  - `:-` collapses the item.
+*  - No flag falls back to the container's `expand` attribute.
+*
+* 从 `container_collapse_open` 令牌之后开始遍历令牌流，隐藏外层列表令牌，
+* 并将根级列表项令牌重写为 `collapse_item_*` 令牌。每个标题前缀的 `:+` 或 `:-`
+* 标记会被移除，用于决定该项的展开状态：
+*  - `:+` 展开该项（手风琴模式下仅第一个生效）。
+*  - `:-` 收起该项。
+*  - 无标记时回退到容器的 `expand` 属性。
+*
+* @param tokens - Token array / 令牌数组
+* @param index - Start index (the `container_collapse_open` token) / 起始索引（`container_collapse_open` 令牌）
+* @param attrs - Collapse metadata parsed from container info / 从容器信息解析得到的折叠面板元数据
+* @returns Default expanded index for accordion mode, or undefined / 手风琴模式下默认展开项的索引，无则返回 undefined
+*/
+function parseCollapse(tokens, index, attrs) {
+	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" || token.type === "ordered_list_open") {
+			listStack.push(0);
+			if (listStack.length === 1) token.hidden = true;
+		} else if (token.type === "bullet_list_close" || token.type === "ordered_list_close") {
+			listStack.pop();
+			if (listStack.length === 0) token.hidden = true;
+		} else if (token.type === "list_item_open") {
+			if (listStack.length === 1) {
+				token.type = "collapse_item_open";
+				tokens[i + 1].type = "collapse_item_title_open";
+				tokens[i + 3].type = "collapse_item_title_close";
+				idx++;
+				const firstToken = tokens[i + 2].children?.[0];
+				let flag = "";
+				let expand;
+				if (firstToken?.type === "text") firstToken.content = firstToken.content.trim().replace(/^:[+\-]\s*/, (match) => {
+					flag = match.trim();
+					return "";
+				});
+				if (attrs.accordion) {
+					if (!hashExpand && flag === ":+") {
+						expand = hashExpand = true;
+						defaultIndex = idx;
+					}
+				} else if (flag === ":+") expand = true;
+				else if (flag === ":-") expand = false;
+				else expand = !!attrs.expand;
+				token.meta = {
+					index: idx,
+					expand
+				};
+			}
+		} else if (token.type === "list_item_close") {
+			if (listStack.length === 1) token.type = "collapse_item_close";
+		}
+	}
+	if (attrs.accordion && attrs.expand && !hashExpand) defaultIndex = 0;
+	return defaultIndex;
+}
+//#endregion
+//#region src/node/plugin.ts
+/**
+* Collapse plugin factory.
+*
+* 折叠面板插件工厂函数。
+*
+* Registers the `::: collapse` markdown-it container and declares the
+* `VPCollapse` and `VPCollapseItem` Vue components for auto-import. When used
+* with `defineConfig` from `vitepress-tuck`, the components are auto-imported
+* on demand — no manual `enhanceApp` registration is required.
+*
+* 注册 `::: collapse` markdown-it 容器，并声明 `VPCollapse` 和 `VPCollapseItem`
+* Vue 组件以供自动导入。与 `vitepress-tuck` 的 `defineConfig` 配合使用时，
+* 组件会按需自动导入，无需手动在 `enhanceApp` 中注册。
+*
+* @example
+* ```ts
+* // .vitepress/config.ts
+* import { defineConfig } from 'vitepress-tuck'
+* import collapse from 'vitepress-plugin-collapse'
+*
+* export default defineConfig({
+*   plugins: [collapse()],
+* })
+* ```
+*/
+const collapse = definePlugin(() => ({
+	name: "vitepress-plugin-collapse",
+	componentResolver: ["VPCollapse", "VPCollapseItem"],
+	markdown: { config: (md) => {
+		md.use(collapseMarkdownPlugin);
+	} }
+}));
+//#endregion
+//#region src/node/index.ts
+/**
+* Node entry for vitepress-plugin-collapse.
+*
+* vitepress-plugin-collapse 的 Node 端入口。
+*
+* Re-exports the markdown-it plugin, the `collapse` plugin factory (as the
+* default export) for use with `vitepress-tuck`'s `defineConfig`.
+*
+* 再导出 markdown-it 插件及 `collapse` 插件工厂函数（作为默认导出），
+* 供 `vitepress-tuck` 的 `defineConfig` 使用。
+*
+* @module
+*/
+var node_default = collapse;
+//#endregion
+export { collapse, collapseMarkdownPlugin, node_default as default };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "vitepress-plugin-collapse",
+  "type": "module",
+  "version": "0.7.0",
+  "description": "Render collapsible sections in your VitePress site.",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "homepage": "https://tuck.pengzhanbo.cn/plugins/collapse",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pengzhanbo/vitepress-tuck.git",
+    "directory": "packages/plugin-collapse"
+  },
+  "bugs": {
+    "url": "https://github.com/pengzhanbo/vitepress-tuck/issues"
+  },
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "collapse"
+  ],
+  "exports": {
+    ".": "./dist/node/index.js",
+    "./client": {
+      "browser": "./dist/client/browser/index.js",
+      "default": "./dist/client/ssr/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "vitepress-plugin-toolkit": "0.7.0",
+    "vitepress-tuck": "0.7.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}