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

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/client/shim.d.ts

@@ -1,5 +1,12 @@
 import type { ReplEditorData } from '../shared/repl.js'
 
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}
+
 declare module '@internal/md-power/replEditorData' {
 
   const res: ReplEditorData

package/lib/client/styles/chat.css

@@ -0,0 +1,129 @@
+:root {
+  --vp-chat-c-bg: var(--vp-c-bg-soft);
+  --vp-chat-c-bg-header: var(--vp-c-bg-soft);
+  --vp-chat-c-bg-content: var(--vp-c-bg-soft);
+  --vp-chat-c-bg-user: var(--vp-c-bg);
+  --vp-chat-c-bg-self: var(--vp-c-brand-soft);
+  --vp-chat-c-title: var(--vp-c-text-1);
+  --vp-chat-c-text: var(--vp-c-text-1);
+  --vp-chat-c-date: var(--vp-c-text-3);
+  --vp-chat-c-username: var(--vp-c-text-2);
+}
+
+.vp-chat {
+  width: 100%;
+  margin: 16px 0;
+  overflow: hidden;
+  background-color: var(--vp-chat-c-bg);
+  border-radius: 6px;
+  transition: background-color var(--vp-t-color);
+}
+
+@media (min-width: 640px) {
+  .vp-chat {
+    width: 320px;
+    margin: 16px auto;
+  }
+}
+
+@media (min-width: 768px) {
+  .vp-chat {
+    width: 360px;
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-chat {
+    width: 480px;
+  }
+}
+
+.vp-chat .vp-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 44px;
+  background-color: var(--vp-chat-c-bg-header);
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-chat .vp-chat-title {
+  flex: 1 2;
+  font-weight: 600;
+  color: var(--vp-chat-c-title);
+  text-align: center;
+  transition: color var(--vp-t-color);
+}
+
+.vp-chat .vp-chat-content {
+  padding: 0 16px 24px;
+  background-color: var(--vp-chat-c-bg-content);
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-chat .vp-chat-date {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 16px 0;
+  font-size: 12px;
+  color: var(--vp-chat-c-date);
+  transition: color var(--vp-t-color);
+}
+
+.vp-chat .vp-chat-message {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.vp-chat .vp-chat-message.self {
+  justify-content: flex-end;
+}
+
+.vp-chat .vp-chat-message:last-child {
+  margin-bottom: 0;
+}
+
+.vp-chat .vp-chat-message-body {
+  flex-shrink: 2;
+  padding-right: 32px;
+}
+
+.vp-chat .vp-chat-message.self .vp-chat-message-body {
+  padding-right: 0;
+  padding-left: 32px;
+}
+
+.vp-chat .vp-chat-username {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-chat-c-username);
+}
+
+.vp-chat .vp-chat-message-body .message-content {
+  max-width: 100%;
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--vp-chat-c-text);
+  background-color: var(--vp-chat-c-bg-user);
+  border-radius: 6px;
+  box-shadow: var(--vp-shadow-1);
+}
+
+.vp-chat .vp-chat-message.self .vp-chat-message-body .message-content {
+  background-color: var(--vp-chat-c-bg-self);
+}
+
+.vp-chat .vp-chat-message-body .message-content :where(p, ul, ol) {
+  margin: 8px 0;
+}
+
+.vp-chat .vp-chat-message-body .message-content :first-child {
+  margin-top: 0;
+}
+
+.vp-chat .vp-chat-message-body .message-content :last-child {
+  margin-bottom: 0;
+}

package/lib/client/styles/demo.css

@@ -147,6 +147,17 @@
   list-style: none;
 }
 
+.demo-draw-vue {
+  position: absolute;
+  top: -99999px;
+  left: -99999px;
+  z-index: 1;
+  padding: 24px;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  will-change: top, left, width, height;
+}
+
 .vpi-demo-code {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.18 4.276a.75.75 0 0 1 .531.918l-3.973 14.83a.75.75 0 0 1-1.45-.389l3.974-14.83a.75.75 0 0 1 .919-.53m2.262 3.053a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.662 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 0 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.818s-.072-.424-.402-.817c-.344-.409-.875-.89-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 1 0-1.004-1.115L4.761 8.836c-.737.662-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 0 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.818s.072-.424.402-.817c.344-.409.875-.89 1.663-1.598z'/%3E%3C/svg%3E");
 }

package/lib/node/index.d.ts

@@ -218,6 +218,56 @@ 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;
+    /**
+     * 是否启用 chat 容器 语法
+     *
+     * ```md
+     * ::: chat
+     * {:date}
+     *
+     * {user}
+     * message
+     *
+     * {.}
+     * message
+     * :::
+     * ```
+     * @default false
+     */
+    chat?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *