feat(plugin-md-power): add deprecated prop support for field container, close #627 (#630)

docs/notes/theme/guide/markdown/field.md

@@ -69,6 +69,10 @@ export default defineUserConfig({
 是否可选
 :::
 
+::: field name="deprecated" type="boolean" optional
+是否弃用
+:::
+
 ::: field name="default" type="string" optional
 默认值， 如果为空字符串，应该使用 `default="''"`
 :::
@@ -111,8 +115,14 @@ export default defineUserConfig({
 :::
 
 ::: field name="callback" type="(...args: any[]) => void" optional default="() => {}"
+<Badge type="tip" text="v1.0.0 新增"  />
 回调函数
 :::
+
+::: field name="other" type="string" deprecated
+<Badge type="danger" text="v0.9.0 弃用"  />
+已弃用属性
+:::
 ::::
 ```
 
@@ -128,6 +138,12 @@ export default defineUserConfig({
 :::
 
 ::: field name="callback" type="(...args: any[]) => void" optional default="() => {}"
+<Badge type="tip" text="v1.0.0 新增"  />
 回调函数
 :::
+
+::: field name="other" type="string" deprecated
+<Badge type="danger" text="v0.9.0 弃用"  />
+已弃用属性
+:::
 ::::

plugins/plugin-md-power/__test__/__snapshots__/field.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`fieldPlugin > ::: field 1`] = `
+"<VPField name="foo" required type="string"><p>description</p>
+</VPField><VPField name="bar" optional type="string"><p>description</p>
+</VPField><VPField name="bar" deprecated type="string" default-value="baz"><p>description</p>
+</VPField><VPField name="foo" default-value="undefined"><p>description</p>
+</VPField>"
+`;
+
+exports[`fieldPlugin > ::: field-group 1`] = `
+"<div class="vp-field-group"><VPField name="foo" required type="string"><p>description</p>
+</VPField><VPField name="bar" optional type="string"><p>description</p>
+</VPField></div>"
+`;

plugins/plugin-md-power/__test__/field.spec.ts

@@ -0,0 +1,43 @@
+import MarkdownIt from 'markdown-it'
+import { describe, expect, it } from 'vitest'
+import { fieldPlugin } from '../src/node/container/field.js'
+
+describe('fieldPlugin', () => {
+  const md = new MarkdownIt().use(fieldPlugin)
+
+  it('::: field', () => {
+    const code = `\
+::: field name="foo" type="string" required
+description
+:::
+
+::: field name="bar" type="string" optional
+description
+:::
+
+::: field name="bar" type="string" deprecated default="baz"
+description
+:::
+
+::: field name="foo" default="undefined"
+description
+:::
+`
+    expect(md.render(code)).toMatchSnapshot()
+  })
+
+  it('::: field-group', () => {
+    const code = `\
+:::: field-group
+::: field name="foo" type="string" required
+description
+:::
+
+::: field name="bar" type="string" optional
+description
+:::
+::::
+`
+    expect(md.render(code)).toMatchSnapshot()
+  })
+})

plugins/plugin-md-power/src/client/components/VPField.vue

@@ -4,15 +4,17 @@ defineProps<{
   type?: string
   required?: boolean
   optional?: boolean
+  deprecated?: boolean
   defaultValue?: string
 }>()
 </script>
 
 <template>
-  <div class="vp-field">
+  <div class="vp-field" :class="{ required, optional, deprecated }">
     <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="deprecated" class="deprecated">Deprecated</span>
       <span v-if="type" class="type"><code>{{ type }}</code></span>
     </p>
     <p v-if="defaultValue" class="default-value">
@@ -48,8 +50,13 @@ defineProps<{
   font-weight: 500;
 }
 
+.vp-field.deprecated .field-meta .name {
+  text-decoration: line-through;
+}
+
 .vp-field .field-meta .required,
-.vp-field .field-meta .optional {
+.vp-field .field-meta .optional,
+.vp-field .field-meta .deprecated {
   display: inline-block;
   padding: 2px 8px;
   font-size: 12px;
@@ -68,6 +75,11 @@ defineProps<{
   border: solid 1px var(--vp-c-divider);
 }
 
+.vp-field .field-meta .deprecated {
+  color: var(--vp-c-danger-2);
+  border: solid 1px var(--vp-c-danger-2);
+}
+
 .vp-field .field-meta .type {
   flex: 1 2;
   text-align: right;
@@ -76,7 +88,8 @@ defineProps<{
 .vp-field .default-value {
   margin: 0;
   font-size: 14px;
-  line-height: 1;
+  line-height: 1.7;
+  transform: translateY(-4px);
 }
 
 .vp-field .description :where(p, ul, ol) {

plugins/plugin-md-power/src/node/container/field.ts

@@ -9,6 +9,7 @@ interface FieldAttrs {
   type?: string
   required?: boolean
   optional?: boolean
+  deprecated?: boolean
   default?: string
 }
 
@@ -16,8 +17,8 @@ export function fieldPlugin(md: Markdown): void {
   createContainerPlugin(md, 'field', {
     before: (info) => {
       const { attrs } = resolveAttrs<FieldAttrs>(info)
-      const { name, type, required, optional, default: defaultValue } = attrs
-      const props = stringifyAttrs({ name, required, optional })
+      const { name, type, required, optional, deprecated, default: defaultValue } = attrs
+      const props = stringifyAttrs({ name, required, optional, deprecated })
       return `<VPField${props}${
         !isUndefined(type) ? ` type="${type}"` : ''
       }${

theme/src/node/detector/fields.ts

@@ -1,4 +1,4 @@
-import type { MarkdownEnhancePluginOptions } from 'vuepress-plugin-md-enhance'
+import type { MarkdownChartPluginOptions } from '@vuepress/plugin-markdown-chart'
 import type { MarkdownPowerPluginOptions } from 'vuepress-plugin-md-power'
 import type { MarkdownOptions, ThemeBuiltinPlugins } from '../../shared/index.js'
 
@@ -24,7 +24,7 @@ export const PLUGINS_SUPPORTED_FIELDS: (keyof ThemeBuiltinPlugins)[] = [
   'replaceAssets',
 ]
 
-export const MARKDOWN_CHART_FIELDS: (keyof MarkdownEnhancePluginOptions)[] = [
+export const MARKDOWN_CHART_FIELDS: (keyof MarkdownChartPluginOptions)[] = [
   'chartjs',
   'echarts',
   'mermaid',
@@ -35,6 +35,7 @@ export const MARKDOWN_CHART_FIELDS: (keyof MarkdownEnhancePluginOptions)[] = [
 
 export const MARKDOWN_POWER_FIELDS: (keyof MarkdownPowerPluginOptions)[] = [
   'abbr',
+  'acfun',
   'annotation',
   'artPlayer',
   'audioReader',