build: add precompiled CLI distribution

dist-cli/theme/layouts/center.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-center">
+    <slot />
+  </div>
+</template>

dist-cli/theme/layouts/cover.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-cover">
+    <slot />
+  </div>
+</template>

dist-cli/theme/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-default">
+    <slot />
+  </div>
+</template>

dist-cli/theme/layouts/image-auto.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { resolveImageSource } from '../utils/resolve-image'
+
+type ImagePlacement = 'auto' | 'left' | 'right' | 'top' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+  imagePlacement?: ImagePlacement
+}>(), {
+  imageFit: 'contain',
+  imagePosition: 'center',
+  imagePlacement: 'auto',
+})
+
+const imagePane = ref<HTMLElement>()
+const detectedPlacement = ref<Exclude<ImagePlacement, 'auto'>>('right')
+let observedImage: HTMLImageElement | undefined
+let observer: MutationObserver | undefined
+
+const placement = computed(() => props.imagePlacement === 'auto'
+  ? detectedPlacement.value
+  : props.imagePlacement)
+
+function detectPlacement() {
+  const image = imagePane.value?.querySelector<HTMLImageElement>('img')
+  if (!image)
+    return
+
+  if (observedImage !== image) {
+    observedImage?.removeEventListener('load', detectPlacement)
+    observedImage = image
+    observedImage.addEventListener('load', detectPlacement)
+  }
+
+  if (image.naturalWidth > 0 && image.naturalHeight > 0)
+    detectedPlacement.value = image.naturalWidth / image.naturalHeight >= 1.6 ? 'bottom' : 'right'
+}
+
+onMounted(async () => {
+  await nextTick()
+  detectPlacement()
+  if (imagePane.value) {
+    observer = new MutationObserver(detectPlacement)
+    observer.observe(imagePane.value, { childList: true, subtree: true })
+  }
+})
+
+onBeforeUnmount(() => {
+  observedImage?.removeEventListener('load', detectPlacement)
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <div
+    class="slidev-layout easy-layout-image-split easy-layout-image-auto"
+    :class="`easy-image-${placement}`"
+  >
+    <div class="easy-image-content"><slot /></div>
+    <div ref="imagePane" class="easy-image-pane">
+      <slot name="image">
+        <img
+          v-if="image"
+          :src="resolveImageSource(image)"
+          alt=""
+          :style="{ objectFit: imageFit, objectPosition: imagePosition }"
+        >
+      </slot>
+    </div>
+  </div>
+</template>

dist-cli/theme/layouts/image-full.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { resolveImageSource } from '../utils/resolve-image'
+
+withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+}>(), {
+  imageFit: 'cover',
+  imagePosition: 'center',
+})
+</script>
+
+<template>
+  <div class="slidev-layout easy-layout-image-full">
+    <slot name="image">
+      <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
+    </slot>
+    <div class="easy-image-overlay"><slot /></div>
+  </div>
+</template>

dist-cli/theme/layouts/image-left.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { resolveImageSource } from '../utils/resolve-image'
+
+withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+}>(), {
+  imageFit: 'contain',
+  imagePosition: 'center',
+})
+</script>
+
+<template>
+  <div class="slidev-layout easy-layout-image-split easy-image-left">
+    <div class="easy-image-content"><slot /></div>
+    <div class="easy-image-pane">
+      <slot name="image">
+        <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
+      </slot>
+    </div>
+  </div>
+</template>

dist-cli/theme/layouts/image-right.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { resolveImageSource } from '../utils/resolve-image'
+
+withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+}>(), {
+  imageFit: 'contain',
+  imagePosition: 'center',
+})
+</script>
+
+<template>
+  <div class="slidev-layout easy-layout-image-split easy-image-right">
+    <div class="easy-image-content"><slot /></div>
+    <div class="easy-image-pane">
+      <slot name="image">
+        <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
+      </slot>
+    </div>
+  </div>
+</template>

dist-cli/theme/layouts/quote.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-quote">
+    <slot />
+  </div>
+</template>

dist-cli/theme/layouts/section.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-section">
+    <slot />
+  </div>
+</template>

dist-cli/theme/layouts/two-cols.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="slidev-layout easy-layout-two-cols">
+    <slot />
+    <div class="easy-two-cols-grid">
+      <div><slot name="left" /></div>
+      <div><slot name="right" /></div>
+    </div>
+  </div>
+</template>