vuepress-plugin-md-power 1.0.0-rc.135 → 1.0.0-rc.137

package/lib/client/components/CodeRepl.vue

@@ -134,7 +134,7 @@ function runCode() {
 }
 
 .code-repl-title h4 {
-  flex: 1;
+  flex: 1 2;
   padding: 0 12px;
   margin: 0;
   font-size: 14px;
@@ -175,7 +175,7 @@ function runCode() {
 }
 
 .output-head .title {
-  flex: 1;
+  flex: 1 2;
   margin-left: 10px;
   font-size: 14px;
   font-weight: 500;

package/lib/client/components/VPCollapse.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { INJECT_COLLAPSE_KEY } from '../options.js'
+
+const props = defineProps<{
+  accordion?: boolean
+  index?: number
+}>()
+
+const currentIndex = ref<number | undefined>(props.index)
+
+provide(INJECT_COLLAPSE_KEY, {
+  accordion: props.accordion ?? false,
+  index: currentIndex,
+})
+</script>
+
+<template>
+  <div class="vp-collapse">
+    <slot />
+  </div>
+</template>
+
+<style>
+.vp-collapse {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 16px 0;
+}
+</style>

package/lib/client/components/VPCollapseItem.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { inject, ref, watch } from 'vue'
+import { INJECT_COLLAPSE_KEY } from '../options.js'
+import VPFadeInExpandTransition from './VPFadeInExpandTransition.vue'
+
+const props = defineProps<{
+  expand?: boolean
+  index: number
+}>()
+
+const collapse = inject<{
+  accordion: boolean
+  index: Ref<number | undefined>
+}>(INJECT_COLLAPSE_KEY)
+
+if (__VUEPRESS_DEV__ && !collapse) {
+  throw new Error('<VPCollapseItem /> must be used inside <VPCollapse />')
+}
+
+const expand = ref(
+  collapse?.accordion && typeof collapse.index.value !== 'undefined'
+    ? props.index === collapse.index.value
+    : props.expand,
+)
+
+if (collapse?.accordion) {
+  watch(collapse?.index, () => {
+    expand.value = collapse?.index.value === props.index
+  })
+}
+
+function toggle() {
+  if (collapse?.accordion) {
+    if (collapse.index.value === props.index && expand.value) {
+      expand.value = false
+    }
+    else {
+      collapse!.index.value = props.index!
+      expand.value = true
+    }
+  }
+  else {
+    expand.value = !expand.value
+  }
+}
+</script>
+
+<template>
+  <div class="vp-collapse-item" :class="{ expand }">
+    <div class="vp-collapse-header" @click="toggle">
+      <span class="vpi-chevron-right" />
+      <p class="vp-collapse-title">
+        <slot name="title" />
+      </p>
+    </div>
+    <VPFadeInExpandTransition>
+      <div v-show="expand" class="vp-collapse-content">
+        <div class="vp-collapse-content-inner">
+          <slot />
+        </div>
+      </div>
+    </VPFadeInExpandTransition>
+  </div>
+</template>
+
+<style>
+.vp-collapse-item {
+  display: flex;
+  flex-direction: column;
+  padding-top: 16px;
+  border-top: solid 1px var(--vp-c-divider);
+}
+
+.vp-collapse-item:first-child {
+  border-top: none;
+}
+
+.vp-collapse-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vp-collapse-header .vpi-chevron-right {
+  align-self: baseline;
+  width: 20px;
+  height: 20px;
+  transition: transform var(--vp-t-color);
+  transform: rotate(0deg);
+}
+
+.vp-collapse-item.expand .vpi-chevron-right {
+  transform: rotate(90deg);
+}
+
+.vp-collapse-header .vp-collapse-title {
+  flex: 1 2;
+  margin: 0;
+  line-height: 1;
+}
+
+.vp-collapse-content-inner {
+  padding-top: 12px;
+  padding-left: 24px;
+}
+
+.vp-collapse-content-inner > *:first-child {
+  margin-top: 0;
+}
+
+.vp-collapse-content-inner > *:last-child {
+  margin-bottom: 0;
+}
+</style>

package/lib/client/components/VPFadeInExpandTransition.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { Transition, TransitionGroup } from 'vue'
+
+const props = defineProps<{
+  group?: boolean
+  appear?: boolean
+  mode?: 'in-out' | 'out-in' | 'default'
+  onLeave?: () => void
+  onAfterLeave?: () => void
+  onAfterEnter?: () => void
+  width?: boolean
+}>()
+
+function handleBeforeLeave(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = `${el.offsetWidth}px`
+  }
+  else {
+    el.style.maxHeight = `${el.offsetHeight}px`
+  }
+  void el.offsetWidth
+}
+
+function handleLeave(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = '0'
+  }
+  else {
+    el.style.maxHeight = '0'
+  }
+  void el.offsetWidth
+  props.onLeave?.()
+}
+
+function handleAfterLeave(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = ''
+  }
+  else {
+    el.style.maxHeight = ''
+  }
+  props.onAfterLeave?.()
+}
+
+function handleEnter(el: HTMLElement): void {
+  el.style.transition = 'none'
+  if (props.width) {
+    const memorizedWidth = el.offsetWidth
+    el.style.maxWidth = '0'
+    void el.offsetWidth
+    el.style.transition = ''
+    el.style.maxWidth = `${memorizedWidth}px`
+  }
+  else {
+    const memorizedHeight = el.offsetHeight
+    el.style.maxHeight = '0'
+    void el.offsetWidth
+    el.style.transition = ''
+    el.style.maxHeight = `${memorizedHeight}px`
+  }
+  void el.offsetWidth
+}
+
+function handleAfterEnter(el: HTMLElement): void {
+  if (props.width) {
+    el.style.maxWidth = ''
+  }
+  else {
+    el.style.maxHeight = ''
+  }
+  props.onAfterEnter?.()
+}
+</script>
+
+<template>
+  <component
+    :is="group ? TransitionGroup : Transition"
+    :name="width ? 'fade-in-width-expand' : 'fade-in-height-expand'"
+    :mode
+    :appear
+    @enter="handleEnter"
+    @after-enter="handleAfterEnter"
+    @before-leave="handleBeforeLeave"
+    @leave="handleLeave"
+    @after-leave="handleAfterLeave"
+  >
+    <slot />
+  </component>
+</template>
+
+<style>
+.fade-in-height-expand-leave-from,
+.fade-in-height-expand-enter-to,
+.fade-in-width-expand-leave-from,
+.fade-in-width-expand-enter-to {
+  opacity: 1;
+}
+
+.fade-in-height-expand-leave-to,
+.fade-in-height-expand-enter-from {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  opacity: 0;
+}
+
+.fade-in-height-expand-leave-active {
+  overflow: hidden;
+  transition:
+    max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    opacity cubic-bezier(0, 0, 0.2, 1) 0.3s,
+    margin-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    margin-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+}
+
+.fade-in-height-expand-enter-active {
+  overflow: hidden;
+  transition:
+    max-height cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    opacity cubic-bezier(0.4, 0, 1, 1) 0.3s,
+    margin-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    margin-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-top cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
+    padding-bottom cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+}
+
+.fade-in-width-expand-leave-to,
+.fade-in-width-expand-enter-from {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  opacity: 0 !important;
+}
+
+.fade-in-width-expand-leave-active {
+  overflow: hidden;
+  transition:
+    max-width cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
+    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
+    margin-right cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
+    margin-left cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s;
+}
+
+.fade-in-width-expand-enter-active {
+  overflow: hidden;
+  transition:
+    max-width cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
+    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s 0.1s,
+    margin-right cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
+    margin-left cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+}
+</style>

package/lib/client/components/VPTimeline.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { computed, provide } from 'vue'
+import { INJECT_TIMELINE_KEY } from '../options.js'
+
+const props = defineProps<{
+  horizontal?: boolean
+  card?: boolean
+  placement?: 'left' | 'right' | 'between'
+  line?: 'solid' | 'dashed' | 'dotted'
+}>()
+
+provide(INJECT_TIMELINE_KEY, computed(() => ({
+  line: props.line || 'solid',
+  card: props.card ?? false,
+  horizontal: props.horizontal ?? false,
+  placement: props.placement || 'left',
+})))
+</script>
+
+<template>
+  <div class="vp-timeline" :class="{ horizontal }">
+    <div class="vp-timeline-box">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-timeline {
+  position: relative;
+  margin: 32px 0;
+}
+
+.vp-timeline.horizontal {
+  padding-bottom: 7px;
+  overflow-x: auto;
+}
+
+.vp-timeline-box {
+  display: flex;
+  gap: 24px 36px;
+}
+
+.vp-timeline:not(.horizontal) .vp-timeline-box {
+  flex-direction: column;
+}
+
+.vp-timeline.horizontal .vp-timeline-box {
+  flex-direction: row;
+  width: max-content;
+}
+</style>

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 };