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

package/lib/client/components/Abbreviation.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
+import { onClickOutside, useMediaQuery, useToggle } from '@vueuse/core'
 import { nextTick, ref, useTemplateRef, watch } from 'vue'
 
-const show = ref(false)
+import '@vuepress/helper/transition/fade-in.css'
+
+const [show, toggle] = useToggle(false)
+
+const el = useTemplateRef<HTMLSpanElement>('el')
 const tooltip = useTemplateRef<HTMLSpanElement>('tooltip')
 const styles = ref<CSSProperties>()
 
+const isMobile = useMediaQuery('(max-width: 768px)')
+const showTooltip = () => toggle(true)
+const hiddenTooltip = () => toggle(false)
+
+onClickOutside(el, () => {
+  if (isMobile.value)
+    hiddenTooltip()
+}, {
+  ignore: [tooltip],
+})
+
 watch(show, () => nextTick(() => {
   if (__VUEPRESS_SSR__)
     return
@@ -32,11 +48,24 @@ watch(show, () => nextTick(() => {
 </script>
 
 <template>
-  <span class="vp-abbr" @mouseenter="show = true" @mouseleave="show = false">
+  <span
+    ref="el"
+    class="vp-abbr"
+    role="tooltip"
+    tabindex="0"
+    v-bind="isMobile ? {
+      onClick: showTooltip,
+    } : {
+      onMouseenter: showTooltip,
+      onMouseleave: hiddenTooltip,
+      onFocus: showTooltip,
+      onBlur: hiddenTooltip,
+    }"
+  >
     <slot />
     <ClientOnly>
-      <Transition name="fade">
-        <span v-show="show" ref="tooltip" class="vp-abbr-tooltip ignore-header" :style="styles">
+      <Transition name="fade-in">
+        <span v-show="show" ref="tooltip" class="vp-abbr-tooltip ignore-header" :style="styles" aria-hidden="true">
           <slot name="tooltip" />
         </span>
       </Transition>

package/lib/client/components/Annotation.vue

@@ -2,6 +2,8 @@
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
+import '@vuepress/helper/transition/fade-in.css'
+
 const props = defineProps<{
   label: string
   total: number
@@ -44,10 +46,15 @@ useEventListener('scroll', updatePosition, { passive: true })
 </script>
 
 <template>
-  <span class="vp-annotation ignore-header" :class="{ active, [label]: true }" :aria-label="label">
-    <span ref="button" class="vpi-annotation" @click="active = !active" />
+  <span class="vp-annotation ignore-header" :class="{ active, [label]: true }">
+    <span
+      ref="button"
+      :aria-label="label"
+      class="vpi-annotation"
+      @click="active = !active"
+    />
     <ClientOnly>
-      <Transition name="fade">
+      <Transition name="fade-in">
         <div
           v-show="active" ref="popover"
           class="annotations-popover" :class="{ list: list.length > 1 }"
@@ -73,8 +80,8 @@ useEventListener('scroll', updatePosition, { passive: true })
   position: relative;
   top: -2px;
   z-index: 2;
-  width: 1.2em;
-  height: 1.2em;
+  width: 1.5em;
+  height: 1.5em;
   color: currentcolor;
   cursor: pointer;
   opacity: 0.5;

package/lib/client/components/CodeEditor.vue

@@ -81,6 +81,7 @@ onUnmounted(() => {
 <template>
   <div ref="editorEl" class="code-repl-editor">
     <slot />
+    <!-- eslint-disable-next-line vue-a11y/form-control-has-label -->
     <textarea ref="textAreaEl" v-model="input" class="code-repl-input" />
   </div>
 </template>

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,120 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { FadeInExpandTransition } from '@vuepress/helper/client'
+import { inject, ref, watch } from 'vue'
+import { INJECT_COLLAPSE_KEY } from '../options.js'
+
+import '@vuepress/helper/transition/fade-in-height-expand.css'
+
+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>
+    <FadeInExpandTransition>
+      <div v-show="expand" class="vp-collapse-content">
+        <div class="vp-collapse-content-inner">
+          <slot />
+        </div>
+      </div>
+    </FadeInExpandTransition>
+  </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/VPDemoBasic.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
+import { FadeInExpandTransition } from '@vuepress/helper/client'
+import { useResizeObserver } from '@vueuse/core'
+import { useTemplateRef, watch } from 'vue'
+import { ClientOnly, onContentUpdated } from 'vuepress/client'
 import { useExpand } from '../composables/demo.js'
 
+import '@vuepress/helper/transition/fade-in-height-expand.css'
 import '../styles/demo.css'
 
 const props = defineProps<{
@@ -11,12 +16,51 @@ const props = defineProps<{
 }>()
 
 const [showCode, toggleCode] = useExpand(props.expanded)
+
+const draw = useTemplateRef<HTMLIFrameElement>('draw')
+const vueDraw = useTemplateRef<HTMLIFrameElement>('draw-vue')
+
+function resizeAndPositionVueDraw() {
+  if (!draw.value || !vueDraw.value)
+    return
+  const rect = draw.value.getBoundingClientRect()
+  const { scrollLeft, scrollTop } = document.documentElement
+  vueDraw.value.style.width = `${draw.value.offsetWidth - 48}px`
+  vueDraw.value.style.top = `${rect.top + scrollTop}px`
+  vueDraw.value.style.left = `${rect.x + scrollLeft}px`
+}
+
+if (props.type === 'vue' && !__VUEPRESS_SSR__) {
+  watch([draw, vueDraw], () => {
+    resizeAndPositionVueDraw()
+    if (draw.value && vueDraw.value) {
+      requestAnimationFrame(() => {
+        draw.value!.style.height = `${vueDraw.value!.offsetHeight}px`
+      })
+    }
+  }, { immediate: true })
+  useResizeObserver(draw, resizeAndPositionVueDraw)
+  useResizeObserver(() => document.body, resizeAndPositionVueDraw)
+  onContentUpdated(resizeAndPositionVueDraw)
+
+  useResizeObserver(vueDraw, () => {
+    if (draw.value && vueDraw.value)
+      draw.value.style.height = `${vueDraw.value.offsetHeight}px`
+  })
+}
 </script>
 
 <template>
-  <div class="vp-demo-wrapper">
-    <div class="demo-draw">
-      <slot />
+  <div class="vp-demo-wrapper" :class="{ type }">
+    <div ref="draw" class="demo-draw">
+      <slot v-if="type !== 'vue'" />
+      <ClientOnly v-else>
+        <Teleport to="body">
+          <div ref="draw-vue" class="demo-draw-vue">
+            <slot />
+          </div>
+        </Teleport>
+      </ClientOnly>
     </div>
     <div v-if="title || desc" class="demo-info">
       <p v-if="title" class="title">
@@ -27,10 +71,14 @@ const [showCode, toggleCode] = useExpand(props.expanded)
       </p>
     </div>
     <div class="demo-ctrl">
-      <span class="vpi-demo-code" @click="toggleCode" />
-    </div>
-    <div v-show="showCode" class="demo-code">
-      <slot name="code" />
+      <button type="button" aria-label="Toggle Code" @click="toggleCode">
+        <span class="vpi-demo-code" />
+      </button>
     </div>
+    <FadeInExpandTransition>
+      <div v-show="showCode" class="demo-code">
+        <slot name="code" />
+      </div>
+    </FadeInExpandTransition>
   </div>
 </template>

package/lib/client/components/VPDemoNormal.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { DemoConfig } from '../composables/demo.js'
+import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { useTemplateRef } from 'vue'
 import { useExpand, useFence, useNormalDemo, useResources } from '../composables/demo.js'
 
+import '@vuepress/helper/transition/fade-in.css'
+import '@vuepress/helper/transition/fade-in-height-expand.css'
 import '../styles/demo.css'
 
 const props = defineProps<{
@@ -37,6 +40,7 @@ const data = useFence(
       <iframe
         :id="`VPDemoNormalDraw${id}`"
         ref="draw"
+        :title="title || 'Demo'"
         class="draw-iframe"
         allow="accelerometer *; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *; gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *; web-share *; serial *; xr-spatial-tracking *"
         allowfullscreen="true"
@@ -90,7 +94,7 @@ const data = useFence(
       </div>
       <div v-if="resources.length" class="demo-resources">
         <span ref="resourcesEl" class="vpi-demo-resources" title="Resources" aria-label="Resources" @click="toggleResources" />
-        <Transition name="fade">
+        <Transition name="fade-in">
           <div v-show="showResources" class="demo-resources-container">
             <div v-for="{ name, items } in resources" :key="name" class="demo-resources-list">
               <p>{{ name }}</p>
@@ -103,10 +107,14 @@ const data = useFence(
           </div>
         </Transition>
       </div>
-      <span class="vpi-demo-code" @click="toggleCode" />
-    </div>
-    <div v-show="showCode" ref="fence" class="demo-code">
-      <slot />
+      <button type="button" aria-label="Toggle Code" @click="toggleCode">
+        <span class="vpi-demo-code" />
+      </button>
     </div>
+    <FadeInExpandTransition>
+      <div v-show="showCode" ref="fence" class="demo-code">
+        <slot />
+      </div>
+    </FadeInExpandTransition>
   </div>
 </template>

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>