@slidev/client 0.50.0-beta.1 → 0.50.0-beta.11

package/builtin/KaTexBlockWrapper.vue

@@ -21,7 +21,7 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { parseRangeString } from '@slidev/parser'
+import { parseRangeString } from '@slidev/parser/utils'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'

package/builtin/Monaco.vue

@@ -197,6 +197,7 @@ onMounted(async () => {
   })
 
   nextTick(() => monaco.editor.remeasureFonts())
+  setTimeout(() => monaco.editor.remeasureFonts(), 1000)
 })
 </script>
 

package/builtin/TocList.vue

@@ -11,6 +11,7 @@ import type { TocItem } from '@slidev/types'
 import TitleRenderer from '#slidev/title-renderer'
 import { toArray } from '@antfu/utils'
 import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<{
   listClass?: string | string[]
 }>(), { level: 1 })
 
+const { isPresenter } = useNav()
+
 const classes = computed(() => {
   return [
     ...toArray(props.listClass || []),
@@ -47,7 +50,7 @@ const styles = computed(() => {
       :key="item.path" class="slidev-toc-item"
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
-      <Link :to="item.path">
+      <Link :to="isPresenter ? `/presenter${item.path}` : item.path">
         <TitleRenderer :no="item.no" />
       </Link>
       <TocList

package/builtin/Tweet.vue

@@ -55,7 +55,7 @@ onMounted(() => {
     <div ref="tweet" class="tweet slidev-tweet">
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
-          <carbon:logo-twitter />
+          <div class="i-carbon:logo-twitter" />
           <span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
         </div>
       </div>

package/composables/useClicks.ts

@@ -1,7 +1,7 @@
 import type { ClicksContext, NormalizedRangeClickValue, NormalizedSingleClickValue, RawAtValue, RawSingleAtValue, SlideRoute } from '@slidev/types'
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import { clamp, sum } from '@antfu/utils'
-import { computed, onMounted, onUnmounted, ref, shallowReactive } from 'vue'
+import { computed, isReadonly, onMounted, onUnmounted, ref, shallowReactive, toValue } from 'vue'
 
 export function normalizeSingleAtValue(at: RawSingleAtValue): NormalizedSingleClickValue {
   if (at === false || at === 'false')
@@ -59,7 +59,8 @@ export function createClicksContextBase(
         // Convert maxMap to reactive
         maxMap = shallowReactive(maxMap)
         // Make sure the query is not greater than the total
-        context.current = current.value
+        if (!isReadonly(current))
+          context.current = current.value
       })
       onUnmounted(() => {
         isMounted.value = false
@@ -160,11 +161,11 @@ export function createClicksContextBase(
 
 export function createFixedClicks(
   route?: SlideRoute | undefined,
-  currentInit = 0,
+  currentInit: MaybeRefOrGetter<number> = 0,
 ): ClicksContext {
   const clicksStart = route?.meta.slide?.frontmatter.clicksStart ?? 0
   return createClicksContextBase(
-    ref(Math.max(currentInit, clicksStart)),
+    computed(() => Math.max(toValue(currentInit), clicksStart)),
     clicksStart,
     route?.meta?.clicks,
   )

package/composables/useDragElements.ts

@@ -7,6 +7,7 @@ import { injectionCurrentPage, injectionFrontmatter, injectionRenderContext, inj
 import { makeId } from '../logic/utils'
 import { activeDragElement } from '../state'
 import { directiveInject } from '../utils'
+import { useNav } from './useNav'
 import { useSlideBounds } from './useSlideBounds'
 import { useDynamicSlideInfo } from './useSlideInfo'
 
@@ -69,25 +70,25 @@ export function useDragElementsUpdater(no: number) {
 
       section = type === 'prop'
       // eslint-disable-next-line regexp/no-super-linear-backtracking
-        ? section.replace(/<(v-?drag-?\w*)(.*?)(\/)?>/gi, (full, tag, attrs, selfClose, index) => {
-          if (index === idx) {
-            replaced = true
-            const posMatch = attrs.match(/pos=".*?"/)
-            if (!posMatch)
-              return `<${tag}${ensureSuffix(' ', attrs)}pos="${posStr}"${selfClose}>`
-            const start = posMatch.index
-            const end = start + posMatch[0].length
-            return `<${tag}${attrs.slice(0, start)}pos="${posStr}"${attrs.slice(end)}${selfClose}>`
-          }
-          return full
-        })
+        ? section.replace(/<(v-?drag-?\w*)(.*?)(\/)?>/gi, (full, tag, attrs, selfClose = '', index) => {
+            if (index === idx) {
+              replaced = true
+              const posMatch = attrs.match(/pos=".*?"/)
+              if (!posMatch)
+                return `<${tag}${ensureSuffix(' ', attrs)}pos="${posStr}"${selfClose}>`
+              const start = posMatch.index
+              const end = start + posMatch[0].length
+              return `<${tag}${attrs.slice(0, start)}pos="${posStr}"${attrs.slice(end)}${selfClose}>`
+            }
+            return full
+          })
         : section.replace(/(?<![</\w])v-drag(?:=".*?")?/gi, (full, index) => {
-          if (index === idx) {
-            replaced = true
-            return `v-drag="${posStr}"`
-          }
-          return full
-        })
+            if (index === idx) {
+              replaced = true
+              return `v-drag="${posStr}"`
+            }
+            return full
+          })
 
       if (!replaced)
         throw new Error(`[Slidev] VDrag Element ${id} is not found in the markdown source`)
@@ -127,7 +128,8 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   const scale = inject(injectionSlideScale) ?? ref(1)
   const zoom = inject(injectionSlideZoom) ?? ref(1)
   const { left: slideLeft, top: slideTop, stop: stopWatchBounds } = useSlideBounds(inject(injectionSlideElement) ?? ref())
-  const enabled = ['slide', 'presenter'].includes(renderContext.value)
+  const { isPrintMode } = useNav()
+  const enabled = ['slide', 'presenter'].includes(renderContext.value) && !isPrintMode.value
 
   let dataSource: DragElementDataSource = directive ? 'directive' : 'prop'
   let dragId: string = makeId()
@@ -180,16 +182,16 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
   const configuredHeight = ref(pos[3] ?? 0)
   const height = autoHeight
     ? computed({
-      get: () => (autoHeight ? actualHeight.value : configuredHeight.value) || 0,
-      set: v => !autoHeight && (configuredHeight.value = v),
-    })
+        get: () => (autoHeight ? actualHeight.value : configuredHeight.value) || 0,
+        set: v => !autoHeight && (configuredHeight.value = v),
+      })
     : configuredHeight
   const configuredY0 = autoHeight ? ref(pos[1]) : ref(pos[1] + pos[3] / 2)
   const y0 = autoHeight
     ? computed({
-      get: () => configuredY0.value + height.value / 2,
-      set: v => configuredY0.value = v - height.value / 2,
-    })
+        get: () => configuredY0.value + height.value / 2,
+        set: v => configuredY0.value = v - height.value / 2,
+      })
     : configuredY0
 
   const containerStyle = computed(() => {
@@ -266,10 +268,14 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
       state.stopDragging()
     },
     startDragging(): void {
+      if (!enabled)
+        return
       updateBounds()
       activeDragElement.value = state
     },
     stopDragging(): void {
+      if (!enabled)
+        return
       if (activeDragElement.value === state)
         activeDragElement.value = null
     },

package/composables/useNav.ts

@@ -3,10 +3,10 @@ import type { ComputedRef, Ref, TransitionGroupProps, WritableComputedRef } from
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { slides } from '#slidev/slides'
 import { clamp } from '@antfu/utils'
+import { parseRangeString } from '@slidev/parser/utils'
 import { createSharedComposable } from '@vueuse/core'
-import { logicOr } from '@vueuse/math'
 import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { CLICKS_MAX } from '../constants'
 import { configs } from '../env'
 import { skipTransition } from '../logic/hmr'
@@ -71,7 +71,7 @@ export interface SlidevContextNavState {
   router: Router
   currentRoute: ComputedRef<RouteLocationNormalized>
   isPrintMode: ComputedRef<boolean>
-  isPrintWithClicks: ComputedRef<boolean>
+  isPrintWithClicks: Ref<boolean>
   isEmbedded: ComputedRef<boolean>
   isPlaying: ComputedRef<boolean>
   isPresenter: ComputedRef<boolean>
@@ -83,6 +83,7 @@ export interface SlidevContextNavState {
   clicksContext: ComputedRef<ClicksContext>
   queryClicksRaw: Ref<string>
   queryClicks: WritableComputedRef<number>
+  printRange: Ref<number[]>
   getPrimaryClicks: (route: SlideRoute) => ClicksContext
 }
 
@@ -113,7 +114,7 @@ export function useNavBase(
   const hasNext = computed(() => currentSlideNo.value < slides.value.length || clicks.value < clicksTotal.value)
   const hasPrev = computed(() => currentSlideNo.value > 1 || clicks.value > 0)
 
-  const currentTransition = computed(() => getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
+  const currentTransition = computed(() => isPrint.value ? undefined : getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
 
   watch(currentSlideRoute, (next, prev) => {
     navDirection.value = next.no - prev.no
@@ -191,7 +192,7 @@ export function useNavBase(
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
     if (force || pageChanged || clicksChanged) {
       await router?.push({
-        path: getSlidePath(no, isPresenter.value),
+        path: getSlidePath(no, isPresenter.value, router.currentRoute.value.name === 'export'),
         query: {
           ...router.currentRoute.value.query,
           clicks: clicks === 0 ? undefined : clicks.toString(),
@@ -272,24 +273,24 @@ export function useFixedNav(
 
 const useNavState = createSharedComposable((): SlidevContextNavState => {
   const router = useRouter()
+  const currentRoute = useRoute()
 
-  const currentRoute = computed(() => router.currentRoute.value)
   const query = computed(() => {
     // eslint-disable-next-line ts/no-unused-expressions
     router.currentRoute.value.query
     return new URLSearchParams(location.search)
   })
-  const isPrintMode = computed(() => query.value.has('print'))
-  const isPrintWithClicks = computed(() => query.value.get('print') === 'clicks')
+  const isPrintMode = computed(() => query.value.has('print') || currentRoute.name === 'export')
+  const isPrintWithClicks = ref(query.value.get('print') === 'clicks')
   const isEmbedded = computed(() => query.value.has('embedded'))
-  const isPlaying = computed(() => currentRoute.value.name === 'play')
-  const isPresenter = computed(() => currentRoute.value.name === 'presenter')
-  const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
+  const isPlaying = computed(() => currentRoute.name === 'play')
+  const isPresenter = computed(() => currentRoute.name === 'presenter')
+  const isNotesViewer = computed(() => currentRoute.name === 'notes')
   const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || query.value.get('password') === configs.remote))
-  const hasPrimarySlide = logicOr(isPlaying, isPresenter)
-
-  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
+  const hasPrimarySlide = computed(() => !!currentRoute.params.no)
+  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.params.no as string)?.no ?? 1 : 1)
   const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])
+  const printRange = ref(parseRangeString(slides.value.length, currentRoute.query.range as string | undefined))
 
   const queryClicksRaw = useRouteQuery<string>('clicks', '0')
 
@@ -342,7 +343,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
 
   return {
     router,
-    currentRoute,
+    currentRoute: computed(() => currentRoute),
     isPrintMode,
     isPrintWithClicks,
     isEmbedded,
@@ -356,6 +357,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     clicksContext,
     queryClicksRaw,
     queryClicks,
+    printRange,
     getPrimaryClicks,
   }
 })

package/composables/usePrintStyles.ts

@@ -0,0 +1,28 @@
+import { useStyleTag } from '@vueuse/core'
+import { computed } from 'vue'
+import { slideHeight, slideWidth } from '../env'
+import { useNav } from './useNav'
+
+export function usePrintStyles() {
+  const { isPrintMode } = useNav()
+
+  useStyleTag(computed(() => isPrintMode.value
+    ? `
+@page {
+  size: ${slideWidth.value}px ${slideHeight.value}px;
+  margin: 0px;
+}
+
+* {
+  transition: none !important;
+  transition-duration: 0s !important;
+}`
+    : ''))
+}
+
+// Monaco uses `<style media="screen" class="monaco-colors">` to apply colors, which will be ignored in print mode.
+export function patchMonacoColors() {
+  document.querySelectorAll<HTMLStyleElement>('style.monaco-colors').forEach((el) => {
+    el.media = ''
+  })
+}

package/composables/useTimer.ts

@@ -0,0 +1,20 @@
+import { useInterval } from '@vueuse/core'
+import { computed } from 'vue'
+
+export function useTimer() {
+  const { counter, isActive, reset, pause, resume } = useInterval(1000, { controls: true })
+
+  const timer = computed(() => {
+    const passed = counter.value
+    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
+    const min = Math.floor(passed / 60).toString().padStart(2, '0')
+    return `${min}:${sec}`
+  })
+
+  return {
+    timer,
+    isTimerAvctive: isActive,
+    resetTimer: reset,
+    toggleTimer: () => (isActive.value ? pause() : resume()),
+  }
+}

package/composables/useViewTransition.ts

@@ -17,7 +17,7 @@ export function useViewTransition() {
     const toMeta = getSlide(to.params.no as string)?.meta
     const fromNo = fromMeta?.slide?.no
     const toNo = toMeta?.slide?.no
-    const transitionType = fromNo != null && toNo != null
+    const transitionType = fromNo != null && toNo != null && fromNo !== toNo
       && ((fromNo < toNo ? fromMeta?.transition : toMeta?.transition) ?? configs.transition)
     if (transitionType !== 'view-transition') {
       isViewTransition.value = false
@@ -41,7 +41,6 @@ export function useViewTransition() {
 
     // Wait for `TransitionGroup` to become normal `div`
     setTimeout(() => {
-      // @ts-expect-error missing types
       document.startViewTransition(() => {
         changeRoute()
         return promise

package/constants.ts

@@ -45,6 +45,7 @@ export const FRONTMATTER_FIELDS = [
   'transition',
   'zoom',
   'dragPos',
+  'lang',
 ]
 
 export const HEADMATTER_FIELDS = [
@@ -55,6 +56,7 @@ export const HEADMATTER_FIELDS = [
   'author',
   'keywords',
   'presenter',
+  'browserExporter',
   'download',
   'exportFilename',
   'export',

package/internals/ClicksSlider.vue

@@ -42,7 +42,7 @@ function onMousedown() {
     :class="length && props.clicksContext.isMounted ? '' : 'op50'"
   >
     <div class="flex gap-0.2 items-center min-w-16 font-mono mr1">
-      <carbon:cursor-1 text-sm op50 />
+      <div class="i-carbon:cursor-1 text-sm op50" />
       <template v-if="current >= 0 && current !== CLICKS_MAX && active">
         <div flex-auto />
         <span text-primary>{{ current }}</span>

package/internals/CodeRunner.vue

@@ -119,7 +119,7 @@ else if (autorun)
   </div>
   <div v-if="code.trim()" class="absolute right-1 top-1 max-h-full flex gap-1">
     <IconButton class="w-8 h-8 max-h-full flex justify-center items-center" title="Run code" @click="triggerRun">
-      <carbon:play />
+      <div class="i-carbon:play" />
     </IconButton>
   </div>
 </template>

package/internals/ContextMenu.vue

@@ -69,12 +69,13 @@ const top = computed(() => {
       <div v-if="item === 'separator'" :key="index" class="w-full my1 border-t border-main" />
       <div
         v-else-if="item.small"
-        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded"
+        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded flex"
         :class="item.disabled ? `op40` : `hover:bg-active`"
         :title="(item.label as string)"
         @click="item.action"
       >
-        <component :is="item.icon" />
+        <div v-if="typeof item.icon === 'string'" :class="item.icon" class="text-1.2em ma" />
+        <component :is="item.icon" v-else />
       </div>
       <div
         v-else
@@ -82,8 +83,9 @@ const top = computed(() => {
         :class="item.disabled ? `op40` : `hover:bg-active`"
         @click="item.action"
       >
-        <div class="mx-auto">
-          <component :is="item.icon" />
+        <div class="mx-auto flex">
+          <div v-if="typeof item.icon === 'string'" :class="item.icon" class="text-1.2em ma" />
+          <component :is="item.icon" v-else />
         </div>
         <div v-if="typeof item.label === 'string'">
           {{ item.label }}

package/internals/DrawingControls.vue

@@ -49,7 +49,7 @@ function setBrushColor(color: typeof brush.color) {
     :initial-y="10"
   >
     <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <carbon:pen />
+      <div class="i-carbon:pen" />
     </IconButton>
     <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
@@ -57,16 +57,16 @@ function setBrushColor(color: typeof brush.color) {
       </svg>
     </IconButton>
     <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <carbon:arrow-up-right />
+      <div class="i-carbon:arrow-up-right" />
     </IconButton>
     <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <carbon:radio-button />
+      <div class="i-carbon:radio-button" />
     </IconButton>
     <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <carbon:checkbox />
+      <div class="i-carbon:checkbox" />
     </IconButton>
     <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <carbon:erase />
+      <div class="i-carbon:erase" />
     </IconButton>
 
     <VerticalDivider />
@@ -107,19 +107,19 @@ function setBrushColor(color: typeof brush.color) {
     <VerticalDivider />
 
     <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
-      <carbon:undo />
+      <div class="i-carbon:undo" />
     </IconButton>
     <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
-      <carbon:redo />
+      <div class="i-carbon:redo" />
     </IconButton>
     <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
-      <carbon:trash-can />
+      <div class="i-carbon:trash-can" />
     </IconButton>
 
     <VerticalDivider />
     <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
-      <carbon:pin v-show="!drawingPinned" />
+      <div v-show="drawingPinned" class="i-carbon:pin-filled transform -rotate-45" />
+      <div v-show="!drawingPinned" class="i-carbon:pin" />
     </IconButton>
     <IconButton
       v-if="drawingEnabled"
@@ -127,8 +127,8 @@ function setBrushColor(color: typeof brush.color) {
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
-      <carbon:error v-show="drawingPinned" />
-      <carbon:close-outline v-show="!drawingPinned" />
+      <div v-show="drawingPinned" class="i-carbon:error" />
+      <div v-show="!drawingPinned" class="i-carbon:close-outline" />
     </IconButton>
   </Draggable>
 </template>

package/internals/ExportPdfTip.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { skipExportPdfTip } from '../state'
+import Modal from './Modal.vue'
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'print'])
+const value = useVModel(props, 'modelValue', emit)
+
+function print() {
+  value.value = false
+  emit('print')
+}
+</script>
+
+<template>
+  <Modal v-model="value" class="px-6 py-4 flex flex-col gap-2">
+    <div class="flex gap-2 text-xl">
+      <div class="i-carbon:information my-auto" /> Tips
+    </div>
+    <div>
+      Slidev will open your browser's built-in print dialog to export the slides as PDF. <br>
+      In the print dialog, please:
+      <ul class="list-disc my-4 pl-4">
+        <li>
+          Choose "Save as PDF" as the Destination.
+          <span class="op-70 text-xs"> (Not "Microsoft Print to PDF") </span>
+        </li>
+        <li> Choose "Default" as the Margin. </li>
+        <li> Toggle on "Print backgrounds". </li>
+      </ul>
+      <div class="mb-2 op-70 text-sm">
+        If you're encountering problems, please try
+        <a href="https://sli.dev/builtin/cli#export"> the CLI </a>
+        or
+        <a href="https://github.com/slidevjs/slidev/issues/new"> open an issue</a>.
+      </div>
+      <div class="form-check op-70">
+        <input
+          v-model="skipExportPdfTip"
+          name="record-camera"
+          type="checkbox"
+        >
+        <label for="record-camera" @click="skipExportPdfTip = !skipExportPdfTip">Don't show this dialog next time.</label>
+      </div>
+    </div>
+    <div class="flex my-1">
+      <button class="cancel" @click="value = false">
+        Cancel
+      </button>
+      <div class="flex-auto" />
+      <button @click="print">
+        Start
+      </button>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+button {
+  @apply bg-blue-400 text-white px-4 py-1 rounded border-b-2 border-blue-600;
+  @apply hover:(bg-blue-500 border-blue-700);
+}
+
+button.cancel {
+  @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
+  @apply hover:(bg-opacity-75 border-opacity-75);
+}
+
+a {
+  @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
+}
+
+.form-check {
+  @apply leading-5;
+
+  * {
+    @apply my-auto align-middle;
+  }
+
+  label {
+    @apply ml-1 text-sm select-none;
+  }
+}
+</style>

package/internals/FormCheckbox.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  disabled?: boolean
+}>()
+
+const value = defineModel<boolean>('modelValue', {
+  type: Boolean,
+})
+</script>
+
+<template>
+  <div border="~ main rounded" flex="~ gap-2 items-center" relative h-5 w-5 p0.5 hover:bg-active p1>
+    <div i-ri-check-line :class="value ? '' : 'op0'" />
+    <input v-model="value" type="checkbox" absolute inset-0 z-10 opacity-0.1 :disabled="disabled">
+  </div>
+</template>

package/internals/FormItem.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+import { defineEmits, defineProps } from 'vue'
+
+defineProps<{
+  title: string
+  nested?: boolean | number
+  div?: boolean
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'reset'): void
+}>()
+
+function reset() {
+  emit('reset')
+}
+</script>
+
+<template>
+  <component :is="div ? 'div' : 'label'" flex="~ row gap-2 items-center" select-none>
+    <div w-30 h-10 flex="~ gap-1 items-center">
+      <div
+        v-if="nested" i-ri-corner-down-right-line op40
+        :style="typeof nested === 'number' ? { marginLeft: `${nested * 0.5 + 0.5}rem` } : { marginLeft: '0.25rem' }"
+      />
+      <div v-if="!description" op75 @dblclick="reset">
+        {{ title }}
+      </div>
+      <Tooltip v-else distance="10">
+        <div op75 text-right @dblclick="reset">
+          {{ title }}
+        </div>
+        <template #popper>
+          <div text-sm min-w-90 v-html="description" />
+        </template>
+      </Tooltip>
+    </div>
+    <slot />
+  </component>
+</template>

package/internals/IconButton.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   title: string
   icon?: string
   as?: string
+  to?: string
 }>()
+
+const type = computed(() => props.as || (props.to ? 'router-link' : 'button'))
 </script>
 
 <template>
-  <component :is="as || 'button'" class="slidev-icon-btn" :title="title">
+  <component :is="type" class="slidev-icon-btn" :title="title" :to="to">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />