@slidev/client 0.43.12 → 0.43.14

package/composables/useViewTransition.ts

@@ -10,8 +10,17 @@ export function useViewTransition() {
 
   const supportViewTransition = typeof document !== 'undefined' && 'startViewTransition' in document
 
-  router.beforeResolve((from, to) => {
-    if (!(from.meta.transition === 'view-transition' || to.meta.transition === 'view-transition')) {
+  router.beforeResolve((to, from) => {
+    const fromNo = from.meta.slide?.no
+    const toNo = to.meta.slide?.no
+    if (
+      !(
+        fromNo !== undefined && toNo !== undefined && (
+          (from.meta.transition === 'view-transition' && fromNo < toNo)
+          || (to.meta.transition === 'view-transition' && toNo < fromNo)
+        )
+      )
+    ) {
       isViewTransition.value = false
       return
     }

package/internals/NoteEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ignorableWatch, onClickOutside } from '@vueuse/core'
-import { nextTick, ref, watch } 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'
@@ -9,6 +9,9 @@ const props = defineProps({
   class: {
     default: '',
   },
+  editing: {
+    default: false,
+  },
   style: {
     default: () => ({}),
   },
@@ -17,6 +20,11 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits([
+  'update:editing',
+])
+const editing = useVModel(props, 'editing', emit, { passive: true })
+
 const { info, update } = useDynamicSlideInfo(currentSlideId)
 
 const note = ref('')
@@ -45,17 +53,11 @@ watch(
 )
 
 const input = ref<HTMLTextAreaElement>()
-const editing = ref(false)
-
-async function switchNoteEdit(e: MouseEvent) {
-  if ((e?.target as HTMLElement)?.tagName === 'A')
-    return
 
-  editing.value = true
-  input.value?.focus()
-  await nextTick()
-  input.value?.focus()
-}
+watchEffect(() => {
+  if (editing.value)
+    input.value?.focus()
+})
 
 onClickOutside(input, () => {
   editing.value = false
@@ -64,13 +66,12 @@ onClickOutside(input, () => {
 
 <template>
   <NoteDisplay
-    v-if="!editing && note"
+    v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="props.class"
+    :class="[props.class, note ? '' : 'opacity-50']"
     :style="props.style"
-    :note="note"
+    :note="note || placeholder"
     :note-html="info?.noteHTML"
-    @click="switchNoteEdit"
   />
   <textarea
     v-else

package/internals/Presenter.vue

@@ -30,6 +30,8 @@ useHead({
   title: `Presenter - ${slideTitle}`,
 })
 
+const notesEditing = ref(false)
+
 const { timer, resetTimer } = useTimer()
 
 const nextTabElements = ref([])
@@ -139,10 +141,11 @@ onMounted(() => {
       <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
         <Editor />
       </div>
-      <div v-else class="grid-section note grid grid-rows-[1fr_min-content]">
+      <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditor
           v-if="__DEV__"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+          :editing="notesEditing"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
@@ -159,6 +162,13 @@ onMounted(() => {
             <HiddenText text="Decrease font size" />
             <carbon:zoom-out />
           </button>
+          <button
+            v-if="__DEV__"
+            class="slidev-icon-btn" @click="notesEditing = !notesEditing"
+          >
+            <HiddenText text="Edit Notes" />
+            <carbon:edit />
+          </button>
         </div>
       </div>
       <div class="grid-section bottom">
@@ -212,7 +222,7 @@ onMounted(() => {
 }
 
 .grid-container.layout2 {
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 3fr 2fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
     "top top"

package/internals/PrintSlide.vue

@@ -8,6 +8,7 @@ import PrintSlideClick from './PrintSlideClick.vue'
 const props = defineProps<{ route: RouteRecordRaw }>()
 
 const clicksElements = ref(props.route.meta?.__clicksElements || [])
+const clicks = computed(() => props.route.meta?.clicks ?? clicksElements.value.length)
 
 const route = computed(() => props.route)
 const nav = useNav(route)
@@ -16,6 +17,6 @@ const nav = useNav(route)
 <template>
   <PrintSlideClick v-model:clicks-elements="clicksElements" :clicks="0" :nav="nav" :route="route" />
   <template v-if="!isClicksDisabled">
-    <PrintSlideClick v-for="i of (clicksElements.length)" :key="i" :clicks="i" :nav="nav" :route="route" />
+    <PrintSlideClick v-for="i of clicks" :key="i" :clicks="i" :nav="nav" :route="route" />
   </template>
 </template>

package/layouts/two-cols-header.vue

@@ -11,6 +11,9 @@ This shows on the left
 ::right::
 # Right
 This shows on the right
+::bottom::
+# Bottom
+This shows at bottom, below left and right
 ```
 -->
 
@@ -36,6 +39,9 @@ const props = defineProps({
     <div class="col-right" :class="props.class">
       <slot name="right" />
     </div>
+    <div class="col-bottom" :class="props.class">
+      <slot name="bottom" />
+    </div>
   </div>
 </template>
 
@@ -46,7 +52,8 @@ 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,
+.col-bottom { grid-column: -1/1; }
+.col-left,
+.col-right { grid-column: span 2; }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.12",
+  "version": "0.43.14",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.6",
-    "@unocss/reset": "^0.57.1",
+    "@unocss/reset": "^0.57.2",
     "@vueuse/core": "^10.5.0",
     "@vueuse/head": "^2.0.0",
     "@vueuse/math": "^10.5.0",
@@ -33,20 +33,20 @@
     "js-base64": "^3.7.5",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
-    "mermaid": "^10.6.0",
+    "mermaid": "^10.6.1",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.2",
+    "nanoid": "^5.0.3",
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
-    "unocss": "^0.57.1",
+    "unocss": "^0.57.2",
     "vite-plugin-windicss": "^1.9.1",
-    "vue": "^3.3.7",
+    "vue": "^3.3.8",
     "vue-router": "^4.2.5",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.12",
-    "@slidev/types": "0.43.12"
+    "@slidev/parser": "0.43.14",
+    "@slidev/types": "0.43.14"
   },
   "devDependencies": {
     "vite": "^4.5.0"

package/routes.ts

@@ -82,6 +82,7 @@ declare module 'vue-router' {
     class?: string
     clicks?: number
     transition?: string | TransitionGroupProps | undefined
+    preload?: boolean
 
     // slide info
     slide?: {

package/setup/root.ts

@@ -8,6 +8,7 @@ import { initDrawingState } from '../state/drawings'
 import { clicks, currentPage, getPath, isNotesViewer, isPresenter } from '../logic/nav'
 import { router } from '../routes'
 import { TRUST_ORIGINS } from '../constants'
+import { skipTransition } from '../composables/hmr'
 
 export default function setupRoot() {
   // @ts-expect-error injected in runtime
@@ -58,6 +59,7 @@ export default function setupRoot() {
     if (!routePath.match(/^\/(\d+|presenter)\/?/))
       return
     if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentPage.value || +clicks.value !== +state.clicks)) {
+      skipTransition.value = false
       router.replace({
         path: getPath(state.page),
         query: {