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

package/lib/client/components/FileTreeNode.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { inject, ref } from 'vue'
 
-import '@vuepress/helper/transition/fade-in-height-expand.css'
-
 const props = defineProps<{
   type: 'file' | 'folder'
   filename: string
+  level: number
+  diff?: 'add' | 'remove'
   expanded?: boolean
   focus?: boolean
 }>()
@@ -49,18 +48,20 @@ function toggle(ev: MouseEvent) {
         focus,
         expanded: type === 'folder' ? active : false,
         active: type === 'file' ? activeFileTreeNode === filename : false,
+        diff,
+        add: diff === 'add',
+        remove: diff === 'remove',
       }"
+      :style="{ '--file-tree-level': -level }"
       @click="toggle"
     >
       <slot name="icon" />
       <span class="name" :class="[type]">{{ filename }}</span>
       <span v-if="$slots.comment" class="comment"><slot name="comment" /></span>
     </p>
-    <FadeInExpandTransition>
-      <div v-if="type === 'folder'" v-show="active" class="group">
-        <slot />
-      </div>
-    </FadeInExpandTransition>
+    <div v-if="type === 'folder'" v-show="active" class="group">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -100,24 +101,40 @@ function toggle(ev: MouseEvent) {
 
 .vp-file-tree .vp-file-tree-info::after {
   position: absolute;
-  top: 1px;
-  right: 0;
-  bottom: 1px;
-  left: -16px;
+  top: 0;
+  right: -16px;
+  bottom: 0;
+  left: calc(var(--file-tree-level) * 28px - 32px);
   z-index: 0;
   display: block;
   pointer-events: none;
   content: "";
   background-color: transparent;
-  border-radius: 6px;
   transition: background-color var(--vp-t-color);
 }
 
 .vp-file-tree .vp-file-tree-info.active::after,
-.vp-file-tree .vp-file-tree-info:hover::after {
+.vp-file-tree .vp-file-tree-info:not(.diff):hover::after {
   background-color: var(--vp-c-default-soft);
 }
 
+.vp-file-tree .vp-file-tree-info.diff::after {
+  padding-left: 4px;
+  font-size: 1.25em;
+}
+
+.vp-file-tree .vp-file-tree-info.diff.add::after {
+  color: var(--vp-c-success-1);
+  content: "+";
+  background-color: var(--vp-c-success-soft);
+}
+
+.vp-file-tree .vp-file-tree-info.diff.remove::after {
+  color: var(--vp-c-danger-1);
+  content: "-";
+  background-color: var(--vp-c-danger-soft);
+}
+
 .vp-file-tree .vp-file-tree-info.folder {
   cursor: pointer;
 }

package/lib/client/components/VPField.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+defineProps<{
+  name: string
+  type?: string
+  required?: boolean
+  optional?: boolean
+  defaultValue?: string
+}>()
+</script>
+
+<template>
+  <div class="vp-field">
+    <p class="field-meta">
+      <span class="name">{{ name }}</span>
+      <span v-if="required || optional" :class="{ required, optional }">{{ required ? 'Required' : optional ? 'Optional' : '' }}</span>
+      <span v-if="type" class="type"><code>{{ type }}</code></span>
+    </p>
+    <p v-if="defaultValue" class="default-value">
+      <code>{{ defaultValue }}</code>
+    </p>
+    <div v-if="$slots.default" class="description">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-field {
+  width: 100%;
+  margin: 16px 0;
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-field + .vp-field {
+  padding-top: 8px;
+  border-top: solid 1px var(--vp-c-divider);
+}
+
+.vp-field .field-meta {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin: 8px 0;
+}
+
+.vp-field .field-meta .name {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.vp-field .field-meta .required,
+.vp-field .field-meta .optional {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-style: italic;
+  line-height: 1;
+  border-radius: 8px;
+}
+
+.vp-field .field-meta .required {
+  color: var(--vp-c-success-2);
+  border: solid 1px var(--vp-c-success-2);
+}
+
+.vp-field .field-meta .optional {
+  color: var(--vp-c-text-3);
+  border: solid 1px var(--vp-c-divider);
+}
+
+.vp-field .field-meta .type {
+  flex: 1 2;
+  text-align: right;
+}
+
+.vp-field .default-value {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.vp-field .description :where(p, ul, ol) {
+  margin: 8px 0;
+  line-height: 24px;
+  color: var(--vp-c-text-2);
+}
+
+.vp-field-group {
+  padding: 0 20px;
+  margin: 16px 0;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 6px;
+}
+</style>

package/lib/node/index.d.ts

@@ -268,6 +268,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     chat?: boolean;
+    /**
+     * 是否启用 field / field-group 容器
+     *
+     * @default false
+     */
+    field?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *

package/lib/node/index.js

@@ -1448,6 +1448,23 @@ function demoWrapperPlugin(md) {
   });
 }
 
+// src/node/container/field.ts
+import { isUndefined as isUndefined2 } from "@pengzhanbo/utils";
+function fieldPlugin(md) {
+  createContainerPlugin(md, "field", {
+    before: (info) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { name, type, required, optional, default: defaultValue } = attrs2;
+      const props = stringifyAttrs({ name, required, optional });
+      return `<VPField${props}${!isUndefined2(type) ? ` type="${type}"` : ""}${!isUndefined2(defaultValue) ? ` default-value="${defaultValue}"` : ""}>`;
+    },
+    after: () => "</VPField>"
+  });
+  createContainerPlugin(md, "field-group", {
+    before: () => '<div class="vp-field-group">'
+  });
+}
+
 // src/node/container/fileTree.ts
 import { removeEndingSlash } from "vuepress/shared";
 function parseFileTreeRawContent(content) {
@@ -1477,6 +1494,14 @@ function parseFileTreeNodeInfo(info) {
   let focus = false;
   let expanded = true;
   let type = "file";
+  let diff;
+  if (info.startsWith("++")) {
+    info = info.slice(2).trim();
+    diff = "add";
+  } else if (info.startsWith("--")) {
+    info = info.slice(2).trim();
+    diff = "remove";
+  }
   info = info.replace(RE_FOCUS, (_, matched) => {
     filename = matched;
     focus = true;
@@ -1493,7 +1518,7 @@ function parseFileTreeNodeInfo(info) {
     expanded = false;
     filename = removeEndingSlash(filename);
   }
-  return { filename, comment, focus, expanded, type };
+  return { filename, comment, focus, expanded, type, diff };
 }
 function fileTreePlugin(md, options = {}) {
   const getIcon = (filename, type, mode) => {
@@ -1504,7 +1529,7 @@ function fileTreePlugin(md, options = {}) {
   };
   const renderFileTree = (nodes, meta) => nodes.map((node) => {
     const { info, level, children } = node;
-    const { filename, comment, focus, expanded, type } = parseFileTreeNodeInfo(info);
+    const { filename, comment, focus, expanded, type, diff } = parseFileTreeNodeInfo(info);
     const isOmit = filename === "\u2026" || filename === "...";
     if (children.length === 0 && type === "folder") {
       children.push({ info: "\u2026", level: level + 1, children: [] });
@@ -1516,7 +1541,9 @@ function fileTreePlugin(md, options = {}) {
       expanded: nodeType === "folder" ? expanded : false,
       focus,
       type: nodeType,
-      filename
+      diff,
+      filename,
+      level
     };
     return `<FileTreeNode${stringifyAttrs(props)}>
 ${renderedIcon}${renderedComment}${children.length > 0 ? renderFileTree(children, meta) : ""}
@@ -2095,6 +2122,8 @@ async function containerPlugin(app, md, options) {
     collapsePlugin(md);
   if (options.chat)
     chatPlugin(md);
+  if (options.field)
+    fieldPlugin(md);
 }
 
 // src/node/demo/demo.ts
@@ -3716,6 +3745,10 @@ async function prepareConfigFile(app, options) {
   if (options.chat) {
     imports.add(`import '${CLIENT_FOLDER}styles/chat.css'`);
   }
+  if (options.field) {
+    imports.add(`import VPField from '${CLIENT_FOLDER}components/VPField.vue'`);
+    enhances.add(`app.component('VPField', VPField)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'

package/lib/shared/index.d.ts

@@ -267,6 +267,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     chat?: boolean;
+    /**
+     * 是否启用 field / field-group 容器
+     *
+     * @default false
+     */
+    field?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.144",
+  "version": "1.0.0-rc.145",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -61,13 +61,13 @@
     }
   },
   "dependencies": {
-    "@mdit/plugin-attrs": "^0.16.7",
-    "@mdit/plugin-footnote": "^0.16.8",
-    "@mdit/plugin-mark": "^0.16.0",
-    "@mdit/plugin-sub": "^0.16.0",
-    "@mdit/plugin-sup": "^0.16.0",
-    "@mdit/plugin-tab": "^0.16.0",
-    "@mdit/plugin-tasklist": "^0.16.0",
+    "@mdit/plugin-attrs": "^0.17.0",
+    "@mdit/plugin-footnote": "^0.17.0",
+    "@mdit/plugin-mark": "^0.17.0",
+    "@mdit/plugin-sub": "^0.17.0",
+    "@mdit/plugin-sup": "^0.17.0",
+    "@mdit/plugin-tab": "^0.17.0",
+    "@mdit/plugin-tasklist": "^0.17.0",
     "@pengzhanbo/utils": "^2.1.0",
     "@vuepress/helper": "2.0.0-rc.98",
     "@vueuse/core": "^13.1.0",