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

package/README.md

@@ -95,10 +95,10 @@ pnpm add @iconify/json
 #### 语法
 
 ```md
-:[collect:icon]:
-:[collect:icon size]:
-:[collect:icon /color]:
-:[collect:icon size/color]:
+::collect:icon::
+::collect:icon =size::
+::collect:icon /color::
+::collect:icon =size /color::
 ```
 
 你可以从 [icon-sets.iconify](https://icon-sets.iconify.design/) 获取 图标集。
@@ -106,25 +106,25 @@ pnpm add @iconify/json
 显示 `logos` 图标集合下的 `vue` 图标
 
 ```md
-:[logos:vue]:
+::logos:vue::
 ```
 
-图标默认大小为 `1em` ，你可以通过 `size` 设置图标大小
+图标默认大小为 `1em` ，你可以通过 `=size` 设置图标大小
 
 ```md
-:[logos:vue 1.2em]:
+::logos:vue =1.2em::
 ```
 
 图标默认颜色为 `currentColor` 你可以通过 `/color` 设置图标颜色
 
 ```md
-:[logos:vue /blue]:
+::logos:vue /blue::
 ```
 
-也可以通过 `size/color` 设置图标大小和颜色
+也可以通过 `=size /color` 设置图标大小和颜色
 
 ```md
-:[logos:vue 1.2em/blue]:
+::logos:vue =1.2em /blue::
 ```
 
 ### bilibili

package/lib/client/components/CanIUse.vue

@@ -14,12 +14,12 @@ interface MessageData {
 
 const props = withDefaults(defineProps<{
   feature: string
-  past?: string
-  future?: string
+  past?: number
+  future?: number
   meta?: string
 }>(), {
-  past: '2',
-  future: '1',
+  past: 2,
+  future: 1,
   meta: '',
 })
 

package/lib/client/components/FileTreeNode.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { inject, ref } from 'vue'
+
+const props = defineProps<{
+  type: 'file' | 'folder'
+  filename: string
+  level: number
+  diff?: 'add' | 'remove'
+  expanded?: boolean
+  focus?: boolean
+}>()
+
+const activeFileTreeNode = inject<Ref<string>>('active-file-tree-node', ref(''))
+
+const onNodeClick = inject<
+  (filename: string, type: 'file' | 'folder') => void
+>('on-file-tree-node-click', () => {})
+
+const active = ref(props.expanded)
+
+function nodeClick() {
+  if (props.filename === '…' || props.filename === '...')
+    return
+
+  onNodeClick(props.filename, props.type)
+}
+
+function toggle(ev: MouseEvent) {
+  if (props.type === 'folder') {
+    const el = ev.target as HTMLElement
+    if (!el.matches('.comment, .comment *')) {
+      active.value = !active.value
+      nodeClick()
+    }
+  }
+  else {
+    nodeClick()
+  }
+}
+</script>
+
+<template>
+  <div class="vp-file-tree-node">
+    <p
+      class="vp-file-tree-info" :class="{
+        [type]: true,
+        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>
+    <div v-if="type === 'folder'" v-show="active" class="group">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-file-tree {
+  max-width: 100%;
+  padding: 16px;
+  overflow: auto hidden;
+  font-size: 14px;
+  background-color: var(--vp-c-bg-safe);
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  transition: border var(--vp-t-color), background-color var(--vp-t-color);
+}
+
+.vp-file-tree .vp-file-tree-title {
+  padding: 8px 16px;
+  margin: -16px -16px 8px;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
+}
+
+.vp-file-tree .vp-file-tree-info {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  height: 28px;
+  padding: 2px 0;
+  margin: 0 0 0 16px;
+  line-height: 24px;
+  text-wrap: nowrap;
+}
+
+.vp-file-tree .vp-file-tree-info::after {
+  position: absolute;
+  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;
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-file-tree .vp-file-tree-info.active::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;
+}
+
+.vp-file-tree .vp-file-tree-info.folder::before {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.55.55 0 0 1 0-.771a.53.53 0 0 1 .759 0l4.61 4.684a1.65 1.65 0 0 1 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0a.55.55 0 0 1 0-.771'/%3E%3C/svg%3E");
+
+  position: absolute;
+  top: 8px;
+  left: -16px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  content: "";
+  background-color: currentcolor;
+  -webkit-mask: var(--icon) no-repeat;
+  mask: var(--icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  transition: color var(--vp-t-color), transform var(--vp-t-color);
+  transform: rotate(0);
+}
+
+.vp-file-tree .vp-file-tree-info.folder.expanded::before {
+  transform: rotate(90deg);
+}
+
+.vp-file-tree .vp-file-tree-info .name {
+  position: relative;
+  font-family: var(--vp-font-family-mono);
+}
+
+.vp-file-tree .vp-file-tree-info.folder .name {
+  color: var(--vp-c-text-1);
+  transition: color var(--vp-t-color);
+}
+
+.vp-file-tree .vp-file-tree-info.focus .name {
+  padding: 0 4px;
+  margin: 0 -4px;
+  font-weight: bold;
+  color: var(--vp-c-bg);
+  background-color: var(--vp-c-brand-2);
+  border-radius: 4px;
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
+}
+
+.vp-file-tree .vp-file-tree-info.active .name {
+  color: var(--vp-c-brand-1);
+}
+
+.vp-file-tree .vp-file-tree-info:not(.focus).folder .name:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.vp-file-tree .vp-file-tree-info .comment {
+  display: inline-block;
+  flex: 1 2;
+  height: 28px;
+  padding-right: 16px;
+  padding-left: 20px;
+  margin: -2px 0;
+  line-height: 28px;
+  color: var(--vp-c-text-3);
+  cursor: auto;
+  transition: color var(--vp-t-color);
+}
+
+.vp-file-tree .vp-file-tree-node .group {
+  position: relative;
+  margin-left: 28px;
+}
+
+.vp-file-tree .vp-file-tree-node .group::before {
+  position: absolute;
+  top: 0;
+  left: -4px;
+  width: 1px;
+  height: 100%;
+  content: "";
+  background-color: var(--vp-c-divider);
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-file-tree [class*="vpi-"] {
+  width: 1.2em;
+  height: 1.2em;
+  margin: 0;
+}
+</style>

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/client/composables/demo.js

@@ -15,9 +15,9 @@ function useResources(el, config) {
     if (!conf)
       return [];
     return [
-      { name: "JavaScript", items: conf.jsLib.map((url) => ({ name: normalizeName(url), url })) },
-      { name: "CSS", items: conf.cssLib.map((url) => ({ name: normalizeName(url), url })) }
-    ].filter((i) => i.items.length);
+      { name: "JavaScript", items: conf.jsLib?.map((url) => ({ name: normalizeName(url), url })) },
+      { name: "CSS", items: conf.cssLib?.map((url) => ({ name: normalizeName(url), url })) }
+    ].filter((i) => i.items?.length);
   });
   function normalizeName(url) {
     return url.slice(url.lastIndexOf("/") + 1);

package/lib/node/index.d.ts

@@ -205,7 +205,7 @@ interface MarkdownPowerPluginOptions {
     /**
      * 是否启用 iconify 图标嵌入语法
      *
-     * `:[collect:icon_name]:`
+     * `::collect:icon_name::`
      *
      * @default false
      */
@@ -268,6 +268,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     chat?: boolean;
+    /**
+     * 是否启用 field / field-group 容器
+     *
+     * @default false
+     */
+    field?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *