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

package/internals/IconButton.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 defineProps<{
   title: string
+  icon?: string
 }>()
 </script>
 
 <template>
   <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
     <span class="sr-only">{{ title }}</span>
-    <slot />
+    <slot>
+      <div :class="icon" />
+    </slot>
   </button>
 </template>

package/internals/InfoDialog.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 const hasInfo = computed(() => typeof configs.info === 'string')
 </script>

package/internals/Modal.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function onClick() {

package/internals/NavControls.vue

@@ -10,8 +10,7 @@ import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
 import IconButton from './IconButton.vue'
 
-// @ts-expect-error virtual module
-import CustomNavControls from '/@slidev/custom-nav-controls'
+import CustomNavControls from '#slidev/custom-nav-controls'
 
 const props = defineProps({
   persist: {
@@ -34,7 +33,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10')
+  : 'rounded-md bg-main shadow dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)

package/internals/NoteDisplay.vue

@@ -27,7 +27,7 @@ defineEmits(['click'])
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic"
+    class="prose overflow-auto outline-none opacity-50 italic select-none"
     :class="props.class"
     @click="$emit('click')"
   >

package/internals/NoteEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { nextTick, ref, watch, watchEffect } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
+  no: {
+    type: Number,
+  },
   class: {
     default: '',
   },
@@ -18,6 +20,9 @@ const props = defineProps({
   placeholder: {
     default: 'No notes for this slide',
   },
+  autoHeight: {
+    default: false,
+  },
 })
 
 const emit = defineEmits([
@@ -25,7 +30,7 @@ const emit = defineEmits([
 ])
 const editing = useVModel(props, 'editing', emit, { passive: true })
 
-const { info, update } = useDynamicSlideInfo(currentSlideId)
+const { info, update } = useDynamicSlideInfo(props.no)
 
 const note = ref('')
 let timer: any
@@ -33,10 +38,10 @@ let timer: any
 const { ignoreUpdates } = ignorableWatch(
   note,
   (v) => {
-    const id = currentSlideId.value
+    const id = props.no
     clearTimeout(timer)
     timer = setTimeout(() => {
-      update({ raw: null!, note: v }, id)
+      update({ note: v }, id)
     }, 500)
   },
 )
@@ -44,6 +49,8 @@ const { ignoreUpdates } = ignorableWatch(
 watch(
   info,
   (v) => {
+    if (editing.value)
+      return
     clearTimeout(timer)
     ignoreUpdates(() => {
       note.value = v?.note || ''
@@ -62,13 +69,34 @@ watchEffect(() => {
 onClickOutside(input, () => {
   editing.value = false
 })
+
+function calculateHeight() {
+  if (!props.autoHeight || !input.value || !editing.value)
+    return
+  if (input.value.scrollHeight > input.value.clientHeight)
+    input.value.style.height = `${input.value.scrollHeight}px`
+}
+
+const inputHeight = ref<number | null>()
+watchEffect(() => {
+  calculateHeight()
+})
+watch(
+  note,
+  () => {
+    nextTick(() => {
+      calculateHeight()
+    })
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
   <NoteDisplay
     v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
@@ -77,9 +105,9 @@ onClickOutside(input, () => {
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
-    :style="props.style"
+    :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
     :class="props.class"
     :placeholder="placeholder"
     @keydown.esc=" editing = false"

package/internals/NoteStatic.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { currentRoute } from '../logic/nav'
+import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
+  no?: number
   class?: string
 }>()
 
-const note = computed(() => currentRoute.value?.meta?.slide?.note)
-const noteHtml = computed(() => currentRoute.value?.meta?.slide?.noteHTML)
+const { info } = useSlideInfo(props.no)
 </script>
 
 <template>
   <NoteDisplay
     :class="props.class"
-    :note="note"
-    :note-html="noteHtml"
+    :note="info?.note"
+    :note-html="info?.noteHTML"
   />
 </template>

package/internals/PrintContainer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 import { route as currentRoute, rawRoutes } from '../logic/nav'
@@ -31,7 +32,7 @@ const className = computed(() => ({
   'select-none': !configs.selectable,
 }))
 
-provide(injectionSlideScale, scale)
+provideLocal(injectionSlideScale, scale)
 </script>
 
 <template>

package/internals/PrintSlideClick.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { computed, provide, reactive, shallowRef } from 'vue'
+import { computed, reactive, shallowRef } from 'vue'
 import type { ClicksContext } from '@slidev/types'
+import { provideLocal } from '@vueuse/core'
 import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../modules/context'
 import SlideWrapper from './SlideWrapper'
 
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
 
 const props = defineProps<{
   clicksContext: ClicksContext
@@ -33,7 +31,7 @@ const id = computed(() =>
   `${props.route.path.toString().padStart(3, '0')}-${(props.nav.clicks.value + 1).toString().padStart(2, '0')}`,
 )
 
-provide(injectionSlidevContext, reactive({
+provideLocal(injectionSlidevContext, reactive({
   nav: props.nav,
   configs,
   themeConfigs: computed(() => configs.themeConfig),

package/internals/RecordingDialog.vue

@@ -108,19 +108,18 @@ async function start() {
     }
   }
 
-  input[type="text"] {
-    @apply border border-gray-400 rounded px-2 py-1;
+  input[type='text'] {
+    @apply border border-main rounded px-2 py-1;
   }
 
   button {
     @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700)
+    @apply hover:(bg-orange-500 border-orange-700);
   }
 
   button.cancel {
-    @apply bg-gray-400 text-white px-4 py-1 rounded border-b-2 border-gray-500;
-    @apply bg-opacity-50 border-opacity-50;
-    @apply hover:(bg-opacity-75 border-opacity-75)
+    @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);
   }
 }
 </style>

package/internals/SlideContainer.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, provide, ref, watchEffect } from 'vue'
+import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { isPrintMode } from '../logic/nav'
+import { clicksDirection, isPrintMode } from '../logic/nav'
 
 const props = defineProps({
   width: {
@@ -47,13 +47,16 @@ const scale = computed(() => {
 })
 
 const style = computed(() => ({
-  height: `${slideHeight}px`,
-  width: `${slideWidth}px`,
-  transform: `translate(-50%, -50%) scale(${scale.value})`,
+  'height': `${slideHeight}px`,
+  'width': `${slideWidth}px`,
+  'transform': `translate(-50%, -50%) scale(${scale.value})`,
+  '--slidev-slide-scale': scale.value,
 }))
 
 const className = computed(() => ({
   'select-none': !configs.selectable,
+  'slidev-nav-go-forward': clicksDirection.value > 0,
+  'slidev-nav-go-backward': clicksDirection.value < 0,
 }))
 
 if (props.isMain) {
@@ -64,12 +67,12 @@ if (props.isMain) {
   `))
 }
 
-provide(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="className">
-    <div id="slide-content" :style="style">
+  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
+    <div id="slide-content" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

package/internals/SlideWrapper.ts

@@ -1,6 +1,8 @@
-import { defineComponent, h, provide, ref, toRef } from 'vue'
+import { computed, defineComponent, h, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { RouteRecordRaw } from 'vue-router'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
 
 export default defineComponent({
@@ -20,23 +22,37 @@ export default defineComponent({
     },
     is: {
       type: Object,
-      default: undefined,
+      required: true,
     },
     route: {
-      type: Object,
-      default: undefined,
+      type: Object as PropType<RouteRecordRaw>,
+      required: true,
     },
   },
   setup(props) {
-    provide(injectionRoute, props.route as any)
-    provide(injectionCurrentPage, ref(+props.route?.path))
-    provide(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provide(injectionActive, toRef(props, 'active'))
-    provide(injectionClicksContext, toRef(props, 'clicksContext'))
+    provideLocal(injectionRoute, props.route)
+    provideLocal(injectionCurrentPage, ref(+props.route.path))
+    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+    provideLocal(injectionActive, toRef(props, 'active'))
+    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+    const style = computed(() => {
+      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+      return zoom === 1
+        ? undefined
+        : {
+            width: `${100 / zoom}%`,
+            height: `${100 / zoom}%`,
+            transformOrigin: 'top left',
+            transform: `scale(${zoom})`,
+          }
+    })
+
+    return {
+      style,
+    }
   },
   render() {
-    if (this.$props.is)
-      return h(this.$props.is)
-    return this.$slots?.default?.()
+    return h(this.$props.is, { style: this.style })
   },
 })

package/internals/SlidesOverview.vue

@@ -14,7 +14,7 @@ import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
-const emit = defineEmits([])
+const emit = defineEmits(['update:modelValue'])
 const value = useVModel(props, 'modelValue', emit)
 
 function close() {
@@ -112,7 +112,7 @@ watchEffect(() => {
   >
     <div
       v-show="value"
-      class="bg-main !bg-opacity-75 p-16 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
+      class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"
     >
       <div
@@ -125,8 +125,8 @@ watchEffect(() => {
           class="relative"
         >
           <div
-            class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary transition"
-            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-$slidev-theme-primary' : 'border-gray-400'"
+            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
             :style="themeVars"
             @click="go(+route.path)"
           >
@@ -163,7 +163,18 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <IconButton v-if="value" title="Close" class="fixed text-2xl top-4 right-4 text-gray-400" @click="close">
-    <carbon:close />
-  </IconButton>
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
+    <RouterLink
+      v-if="__DEV__"
+      target="_blank"
+      to="/overview"
+      tab-index="-1"
+      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+    >
+      List overview
+    </RouterLink>
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+  </div>
 </template>

package/internals/SlidesShow.vue

@@ -6,14 +6,11 @@ import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from './SlideWrapper'
-
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
 defineProps<{
   renderContext: 'slide' | 'presenter'
 }>()
@@ -77,10 +74,12 @@ function onAfterLeave() {
 
 <style scoped>
 #slideshow {
-  @apply h-full;
+  height: 100%;
 }
 
 #slideshow > div {
-  @apply h-full w-full absolute;
+  position: absolute;
+  height: 100%;
+  width: 100%;
 }
 </style>

package/layouts/two-cols-header.vue

@@ -51,9 +51,15 @@ const props = defineProps({
   grid-template-rows: repeat(2, 1fr);
 }
 
-.col-header { grid-area: 1 / 1 / 2 / 3; }
-.col-left { grid-area: 2 / 1 / 3 / 2; }
-.col-right { grid-area: 2 / 2 / 3 / 3; }
+.col-header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+.col-left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+.col-right {
+  grid-area: 2 / 2 / 3 / 3;
+}
 .col-bottom {
   align-self: end;
   grid-area: 3 / 1 / 3 / 3;

package/logic/drawings.ts

@@ -4,6 +4,7 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
+import { isInputting } from '../state'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav.ts

@@ -22,6 +22,7 @@ nextTick(() => {
 })
 
 export const navDirection = ref(0)
+export const clicksDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
 
@@ -84,6 +85,7 @@ watch(currentRoute, (next, prev) => {
 })
 
 export async function next() {
+  clicksDirection.value = 1
   if (clicksTotal.value <= queryClicks.value)
     await nextSlide()
   else
@@ -91,6 +93,7 @@ export async function next() {
 }
 
 export async function prev() {
+  clicksDirection.value = -1
   if (queryClicks.value <= 0)
     await prevSlide()
   else
@@ -102,11 +105,13 @@ export function getPath(no: number | string) {
 }
 
 export async function nextSlide() {
+  clicksDirection.value = 1
   if (currentPage.value < rawRoutes.length)
     await go(currentPage.value + 1)
 }
 
 export async function prevSlide(lastClicks = true) {
+  clicksDirection.value = -1
   const next = Math.max(1, currentPage.value - 1)
   await go(next)
   if (lastClicks && clicksTotal.value)
@@ -177,7 +182,7 @@ export async function downloadPDF() {
 export async function openInEditor(url?: string) {
   if (url == null) {
     const slide = currentRoute.value?.meta?.slide
-    if (!slide?.filepath)
+    if (!slide)
       return false
     url = `${slide.filepath}:${slide.start}`
   }

package/logic/note.ts

@@ -2,17 +2,17 @@ import type { MaybeRef } from '@vueuse/core'
 import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
+import type { SlideInfo, SlidePatch } from '@slidev/types'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
+  info: Ref<SlideInfo | undefined>
+  update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
-      info: ref() as Ref<SlideInfoExtended | undefined>,
+      info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
@@ -21,7 +21,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   execute()
 
-  const update = async (data: Partial<SlideInfo>) => {
+  const update = async (data: SlidePatch) => {
     return await fetch(
       url,
       {
@@ -41,7 +41,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         info.value = payload.data
     })
     import.meta.hot?.on('slidev-update-note', (payload) => {
-      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -64,7 +64,7 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: async (data: Partial<SlideInfo>, newId?: number) => {
+    update: async (data: SlidePatch, newId?: number) => {
       const info = get(newId ?? unref(id))
       const newData = await info.update(data)
       if (newData)

package/main.ts

@@ -1,17 +1,21 @@
+/// <reference types="@slidev/types/client" />
+
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 import { router } from './routes'
-import createDirectives from './modules/directives'
-import createSlidevContext from './modules/context'
+import { createVClickDirectives } from './modules/v-click'
+import { createVMarkDirective } from './modules/v-mark'
+import { createSlidevContext } from './modules/context'
 
-import '/@slidev/styles'
+import '#slidev/styles'
 
 const app = createApp(App)
 app.use(router)
 app.use(createHead())
-app.use(createDirectives())
+app.use(createVClickDirectives())
+app.use(createVMarkDirective())
 app.use(createSlidevContext())
 
 setupMain({ app, router })