feat(client): add experimental component AutoFitText

packages/client/builtin/AutoFitText.vue

@@ -0,0 +1,87 @@
+<!--
+[Expiremental]
+
+Think this component as the TextBox you that will see
+in PowerPoint or Keynote. It will automaitcally resize
+the font size based on it's content to fit them in.
+
+Usage:
+
+<AutoFitText modelValue="text"/>
+
+or
+
+<AutoFitText :max="80" :min="100" v-model="text"/>
+-->
+
+<script setup lang="ts">
+import { useElementSize, useVModel } from '@vueuse/core'
+import { computed, defineEmit, defineProps, ref, watch } from 'vue'
+
+const emit = defineEmit()
+const props = defineProps({
+  modelValue: {
+    default: '',
+  },
+  max: {
+    default: 100,
+  },
+  min: {
+    default: 30,
+  },
+})
+
+const container = ref<HTMLDivElement>()
+const inner = ref<HTMLDivElement>()
+const size = ref(100)
+// @ts-ignore
+const fontSize = computed(() => `${size.value}px`)
+const value = useVModel(props, 'modelValue', emit)
+
+const containerSize = useElementSize(container)
+const innerSize = useElementSize(inner)
+
+const wrapLen = ref(0)
+const wrap = ref('nowrap')
+
+watch([container, value, containerSize.width, innerSize.width], async() => {
+  if (!container.value || innerSize.width.value <= 0)
+    return
+  const ratio = containerSize.width.value / innerSize.width.value
+  if (isNaN(ratio) || ratio <= 0)
+    return
+  let newSize = size.value * (containerSize.width.value / innerSize.width.value)
+  if (newSize < props.min) {
+    wrapLen.value = value.value.length
+    wrap.value = ''
+  }
+  else {
+    if (value.value.length < wrapLen.value)
+      wrap.value = 'nowrap'
+  }
+  newSize = Math.max(props.min, Math.min(props.max, newSize))
+  size.value = newSize
+})
+</script>
+
+<template>
+  <div ref="container" class="slidev-auto-fit-text">
+    <div ref="inner" class="slidev-auto-fit-text-inner">
+      <slot>
+        {{ value }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slidev-auto-fit-text {
+  overflow: auto;
+  font-size: v-bind(fontSize);
+  white-space: v-bind(wrap);
+}
+
+.slidev-auto-fit-text-inner {
+  display: inline-block;
+}
+</style>

packages/client/builtin/CodeHighlightController.vue

@@ -1,3 +1,11 @@
+<!--
+Usage:
+
+```ts {1,3-5|2,4}
+const your_code = 'here'
+```
+-->
+
 <script setup lang="ts">
 import { range, remove } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'

packages/client/builtin/Monaco.vue

@@ -1,3 +1,11 @@
+<!--
+Usage:
+
+```ts {monaco}
+const your_code = 'here'
+```
+-->
+
 <template>
   <div ref="el" class="vue-monaco text-base" :style="{ height }"></div>
 </template>

packages/client/builtin/Transform.vue

@@ -1,3 +1,13 @@
+<!--
+Apply scaling or transforming to elements.
+
+Usage:
+
+<Transform :scale="0.5">
+  <YourElements />
+</Transform>
+-->
+
 <script setup lang="ts">
 import { computed, defineProps } from 'vue'