@slidev/client 0.48.0-beta.17 → 0.48.0-beta.19

package/App.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { watchEffect } from 'vue'
+import { themeVars } from './env'
 import setupRoot from './setup/root'
 
 setupRoot()
+
+watchEffect(() => {
+  for (const [key, value] of Object.entries(themeVars.value))
+    document.body.style.setProperty(key, value.toString())
+})
 </script>
 
 <template>

package/builtin/KaTexBlockWrapper.vue

@@ -55,7 +55,7 @@ onUnmounted(() => {
 })
 
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks || clicks.disabled || !props.ranges?.length)
     return
 
   const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)

package/builtin/Mermaid.vue

@@ -48,6 +48,7 @@ watchEffect(async (onCleanup) => {
   }
   catch (e) {
     error.value = `${e}`
+    console.warn(e)
   }
 })
 
@@ -76,6 +77,6 @@ watchEffect(() => {
 </script>
 
 <template>
-  <pre v-if="error" border="1 red rounded" class="pa-3">{{ error }}</pre>
+  <pre v-if="error" border="1 red rounded" class="pa-3 text-wrap">{{ error }}</pre>
   <ShadowRoot v-else class="mermaid" :inner-html="html" @shadow="el = $event" />
 </template>

package/internals/{OverviewClicksSlider.vue → ClicksSlider.vue}

@@ -30,10 +30,14 @@ function onMousedown() {
   <div
     class="flex gap-0.5 items-center select-none"
     :title="`Clicks in this slide: ${total}`"
+    :class="total ? '' : 'op50'"
   >
     <div class="flex gap-1 items-center min-w-16">
       <carbon:cursor-1 text-sm op50 />
-      <span v-if="current <= total && current >= 0" text-primary>{{ current }}/</span>
+      <template v-if="current <= total && current >= 0">
+        <span text-primary>{{ current }}</span>
+        <span op50>/</span>
+      </template>
       <span op50>{{ total }}</span>
     </div>
     <div
@@ -47,16 +51,16 @@ function onMousedown() {
           i === 0 ? 'rounded-l border-l' : '',
           i === total ? 'rounded-r border-r' : '',
         ]"
-        :style="{ width: `${1 / total * 100}%` }"
+        :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
       >
-        <div absolute inset-0 z--1 :class=" i <= current ? 'bg-primary op20' : ''" />
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
         <div
           :class="[
             +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
             i === 0 ? 'rounded-l' : '',
             i === total ? 'rounded-r' : 'border-r-2',
           ]"
-          w-full h-full text-xs flex items-center justify-center
+          w-full h-full text-xs flex items-center justify-center z-1
         >
           {{ i }}
         </div>

package/internals/NoteEditable.vue

@@ -91,10 +91,12 @@ function calculateEditorHeight() {
 }
 
 watch(
-  note,
-  () => nextTick(() => {
-    calculateEditorHeight()
-  }),
+  [note, editing],
+  () => {
+    nextTick(() => {
+      calculateEditorHeight()
+    })
+  },
   { flush: 'post', immediate: true },
 )
 </script>

package/internals/QuickOverview.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { themeVars } from '../env'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
@@ -128,7 +127,6 @@ watchEffect(() => {
           <div
             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)"
           >
             <SlideContainer

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.17",
+  "version": "0.48.0-beta.19",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -35,11 +35,10 @@
     "@typescript/ata": "^0.9.4",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
-    "@vueuse/core": "^10.8.0",
-    "@vueuse/math": "^10.8.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "codemirror": "^5.65.16",
-    "defu": "^6.1.4",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
@@ -49,17 +48,16 @@
     "lz-string": "^1.5.0",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.46.0",
-    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.8",
     "shiki": "^1.1.7",
     "shiki-magic-move": "^0.1.0",
+    "typescript": "^5.3.3",
     "unocss": "^0.58.5",
     "vue": "^3.4.20",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.17",
-    "@slidev/types": "0.48.0-beta.17"
+    "@slidev/types": "0.48.0-beta.19",
+    "@slidev/parser": "0.48.0-beta.19"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/overview.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext } from 'packages/types'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { openInEditor, rawRoutes } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -13,7 +13,7 @@ import SlideWrapper from '../internals/SlideWrapper'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
-import OverviewClicksSlider from '../internals/OverviewClicksSlider.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import { CLICKS_MAX } from '../constants'
 
 const cardWidth = 450
@@ -164,7 +164,6 @@ onMounted(() => {
         <div class="flex flex-col gap-2 my5">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            :style="themeVars"
             @dblclick="openSlideInNewTab(route.path)"
           >
             <SlideContainer
@@ -184,7 +183,7 @@ onMounted(() => {
               <DrawingPreview :page="+route.path" />
             </SlideContainer>
           </div>
-          <OverviewClicksSlider
+          <ClicksSlider
             v-if="getSlideClicks(route)"
             mt-2
             :clicks-context="getClicksContext(route)"

package/pages/play.vue

@@ -4,7 +4,7 @@ import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize
 import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -42,7 +42,10 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" :style="themeVars">
+  <div
+    id="page-root" ref="root" class="grid"
+    :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
+  >
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

package/pages/presenter/print.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../../env'
+import { configs } from '../../env'
 import { rawRoutes, total } from '../../logic/nav'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
@@ -34,7 +34,7 @@ const slidesWithNote = computed(() => rawRoutes
 </script>
 
 <template>
-  <div id="page-root" :style="themeVars">
+  <div id="page-root">
     <div class="m-4">
       <div class="mb-10">
         <h1 class="text-4xl font-bold mt-2">

package/pages/presenter.vue

@@ -4,13 +4,13 @@ import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { clicksContext, currentPage, currentRoute, currentSlideId, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
-import { useFixedClicks } from '../composables/useClicks'
+import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -21,6 +21,7 @@ import Goto from '../internals/Goto.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -93,20 +94,25 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col">
         <SlideContainer
           key="main"
-          class="h-full w-full"
+          class="h-full w-full p-2 lg:p-4 flex-auto"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
+        <ClicksSlider
+          :key="currentRoute?.path"
+          :clicks-context="usePrimaryClicks(currentRoute)"
+          class="w-full pb2 px4 flex-none"
+        />
         <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
           Current
         </div>
       </div>
-      <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div class="relative grid-section next flex flex-col p-2 lg:p-4">
         <SlideContainer
           v-if="nextFrame && nextFrameClicksCtx"
           key="next"
@@ -182,7 +188,7 @@ onMounted(() => {
     </div>
     <div class="progress-bar">
       <div
-        class="progress h-2px bg-primary transition-all"
+        class="progress h-3px bg-primary transition-all"
         :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
       />
     </div>
@@ -257,7 +263,7 @@ onMounted(() => {
 }
 
 .progress-bar {
-  --uno: fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 top-0;
 }
 
 .grid-section {

package/pages/print.vue

@@ -2,7 +2,6 @@
 import { watchEffect } from 'vue'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
-import { themeVars } from '../env'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
 
@@ -16,7 +15,7 @@ watchEffect(() => {
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
+  <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

package/setup/codemirror.ts

@@ -1,7 +1,7 @@
 import type { Ref, WritableComputedRef } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
-import * as _CodeMirror from 'codemirror'
+import CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
@@ -10,8 +10,6 @@ import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/lib/codemirror.css'
 
-const CodeMirror = _CodeMirror.default ?? ('fromTextArea' in _CodeMirror ? _CodeMirror : globalThis.CodeMirror)
-
 export async function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,