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

package/{internals/Presenter.vue → pages/presenter.vue}

@@ -2,7 +2,7 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicksContext, currentPage, currentRoute, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
+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 { sharedState } from '../state/shared'
@@ -11,16 +11,16 @@ import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
 import { useFixedClicks } from '../composables/useClicks'
-import SlideContainer from './SlideContainer.vue'
-import NavControls from './NavControls.vue'
-import SlidesOverview from './SlidesOverview.vue'
-import NoteEditor from './NoteEditor.vue'
-import NoteStatic from './NoteStatic.vue'
-import Goto from './Goto.vue'
-import SlidesShow from './SlidesShow.vue'
-import SlideWrapper from './SlideWrapper'
-import DrawingControls from './DrawingControls.vue'
-import IconButton from './IconButton.vue'
+import SlideWrapper from '../internals/SlideWrapper'
+import SlideContainer from '../internals/SlideContainer.vue'
+import NavControls from '../internals/NavControls.vue'
+import SlidesOverview from '../internals/SlidesOverview.vue'
+import NoteEditor from '../internals/NoteEditor.vue'
+import NoteStatic from '../internals/NoteStatic.vue'
+import Goto from '../internals/Goto.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
+import DrawingControls from '../internals/DrawingControls.vue'
+import IconButton from '../internals/IconButton.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -54,7 +54,7 @@ watch([currentRoute, queryClicks], () => {
 
 const Editor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('./Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/Editor.vue').then(v => Editor.value = v.default)
 
 // sync presenter cursor
 onMounted(() => {
@@ -140,12 +140,16 @@ onMounted(() => {
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditor
           v-if="__DEV__"
+          :key="`edit-${currentSlideId}`"
+          :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :editing="notesEditing"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
           v-else
+          :key="`static-${currentSlideId}`"
+          :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
@@ -181,26 +185,26 @@ onMounted(() => {
   <SlidesOverview v-model="showOverview" />
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover {
-  & > :first-child {
-    @apply opacity-0;
-  }
-  & > :last-child {
-    @apply opacity-100;
-  }
+.timer-btn:hover > :first-child {
+  opacity: 0;
+}
+.timer-btn:hover > :last-child {
+  opacity: 1;
 }
 
 .section-title {
-  @apply px-4 py-2 text-xl;
+  --uno: px-4 py-2 text-xl;
 }
 
 .grid-container {
-  @apply h-full w-full bg-gray-400 bg-opacity-15;
+  --uno: bg-active;
+  height: 100%;
+  width: 100%;
   display: grid;
   gap: 1px 1px;
 }
@@ -209,20 +213,20 @@ onMounted(() => {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "main main"
-    "note next"
-    "bottom bottom";
+    'top top'
+    'main main'
+    'note next'
+    'bottom bottom';
 }
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "note main"
-    "note next"
-    "bottom bottom";
+    'top top'
+    'note main'
+    'note next'
+    'bottom bottom';
 }
 
 @media (max-aspect-ratio: 3/5) {
@@ -230,11 +234,11 @@ onMounted(() => {
     grid-template-columns: 1fr;
     grid-template-rows: min-content 1fr 1fr 1fr min-content;
     grid-template-areas:
-      "top"
-      "main"
-      "note"
-      "next"
-      "bottom";
+      'top'
+      'main'
+      'note'
+      'next'
+      'bottom';
   }
 }
 
@@ -243,38 +247,40 @@ onMounted(() => {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
     grid-template-areas:
-      "top top top"
-      "main main next"
-      "main main note"
-      "bottom bottom bottom";
+      'top top top'
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
   }
 }
 
 .progress-bar {
-  @apply fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 bottom-0;
 }
 
 .grid-section {
-  @apply bg-main;
-
-  &.top {
-    grid-area: top;
-  }
-  &.main {
-    grid-area: main;
-  }
-  &.next {
-    grid-area: next;
-  }
-  &.note {
-    grid-area: note;
-  }
-  &.bottom {
-    grid-area: bottom;
-  }
+  --uno: bg-main;
 }
 
+.grid-section.top {
+  grid-area: top;
+}
+.grid-section.main {
+  grid-area: main;
+}
+.grid-section.next {
+  grid-area: next;
+}
+.grid-section.note {
+  grid-area: note;
+}
+.grid-section.bottom {
+  grid-area: bottom;
+}
 .context {
-  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --uno: px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
 }
 </style>

package/{internals/Print.vue → pages/print.vue}

@@ -3,8 +3,8 @@ import { watchEffect } from 'vue'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
 import { themeVars } from '../env'
-import PrintContainer from './PrintContainer.vue'
-import PrintStyle from './PrintStyle.vue'
+import PrintContainer from '../internals/PrintContainer.vue'
+import PrintStyle from '../internals/PrintStyle.vue'
 
 watchEffect(() => {
   if (isPrintMode)

package/routes.ts

@@ -1,65 +1,73 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import type { TransitionGroupProps } from 'vue'
-import type { ClicksContext } from '@slidev/types'
-import Play from './internals/Play.vue'
-import Print from './internals/Print.vue'
 
-// @ts-expect-error missing types
-import _rawRoutes, { redirects } from '/@slidev/routes'
+import { rawRoutes, redirects } from '#slidev/routes'
+import configs from '#slidev/configs'
 
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-
-export const rawRoutes = _rawRoutes as RouteRecordRaw[]
+export { rawRoutes }
 
 export const routes: RouteRecordRaw[] = [
   {
     name: 'play',
     path: '/',
-    component: Play,
+    component: () => import('./pages/play.vue'),
     children: [
       ...rawRoutes,
       ...redirects,
     ],
   },
-  { name: 'print', path: '/print', component: Print },
+  {
+    name: 'print',
+    path: '/print',
+    component: () => import('./pages/print.vue'),
+  },
+
+  // Redirects
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
 ]
 
 if (__SLIDEV_FEATURE_PRESENTER__) {
   function passwordGuard(to: RouteLocationNormalized) {
-    if (!_configs.remote || _configs.remote === to.query.password)
+    if (!configs.remote || configs.remote === to.query.password)
       return true
-    if (_configs.remote && to.query.password === undefined) {
+    if (configs.remote && to.query.password === undefined) {
       // eslint-disable-next-line no-alert
       const password = prompt('Enter password')
-      if (_configs.remote === password)
+      if (configs.remote === password)
         return true
     }
     if (to.params.no)
       return { path: `/${to.params.no}` }
     return { path: '' }
   }
-  routes.push({ path: '/presenter/print', component: () => import('./internals/PresenterPrint.vue') })
+
+  routes.push({
+    path: '/presenter/print',
+    component: () => import('./pages/presenter/print.vue'),
+  })
   if (__SLIDEV_HAS_SERVER__) {
     routes.push({
       name: 'entry',
       path: '/entry',
-      component: () => import('./internals/EntrySelect.vue'),
+      component: () => import('./pages/entry.vue'),
+    })
+    routes.push({
+      name: 'overview',
+      path: '/overview',
+      component: () => import('./pages/overview.vue'),
     })
     routes.push({
       name: 'notes',
       path: '/notes',
-      component: () => import('./internals/NotesView.vue'),
+      component: () => import('./pages/notes.vue'),
       beforeEnter: passwordGuard,
     })
   }
   routes.push({
     name: 'presenter',
     path: '/presenter/:no',
-    component: () => import('./internals/Presenter.vue'),
+    component: () => import('./pages/presenter.vue'),
     beforeEnter: passwordGuard,
   })
   routes.push({
@@ -74,35 +82,3 @@ export const router = createRouter({
     : createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
-
-declare module 'vue-router' {
-  interface RouteMeta {
-    // inherited from frontmatter
-    layout: string
-    name?: string
-    class?: string
-    clicks?: number
-    transition?: string | TransitionGroupProps | undefined
-    preload?: boolean
-
-    // slide info
-    slide?: {
-      start: number
-      end: number
-      note?: string
-      noteHTML?: string
-      id: number
-      no: number
-      filepath: string
-      title?: string
-      level?: number
-      raw: string
-      content: string
-      frontmatter: Record<string, any>
-    }
-
-    // private fields
-    __clicksContext: null | ClicksContext
-    __preloaded?: boolean
-  }
-}

package/setup/codemirror.ts

@@ -1,4 +1,5 @@
 import type { Ref, WritableComputedRef } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
 import * as _CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
@@ -47,5 +48,11 @@ export async function useCodeMirror(
     { immediate: true },
   )
 
+  onClickOutside(cm.getWrapperElement(), () => {
+    const el = cm.getInputField()
+    if (document.activeElement === el)
+      el.blur()
+  })
+
   return cm
 }

package/shim-vue.d.ts

@@ -0,0 +1,35 @@
+declare module 'vue' {
+  import type { UnwrapNestedRefs } from 'vue'
+  import type { SlidevContext } from './modules/context'
+
+  interface ComponentCustomProperties {
+    $slidev: UnwrapNestedRefs<SlidevContext>
+  }
+}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    // inherited from frontmatter
+    layout: string
+    name?: string
+    class?: string
+    clicks?: number
+    transition?: string | TransitionGroupProps | undefined
+    preload?: boolean
+
+    // slide info
+    slide?: Omit<SlideInfo, 'source'> & {
+      noteHTML: string
+      filepath: string
+      start: number
+      id: number
+      no: number
+    }
+
+    // private fields
+    __clicksContext: null | ClicksContext
+    __preloaded?: boolean
+  }
+}
+
+export {}

package/shim.d.ts

@@ -1,9 +1,3 @@
-declare interface Window {
-  // extend the window
-}
-
-declare module '*.vue';
-
 // with unplugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { ComponentOptions } from 'vue'
@@ -12,12 +6,6 @@ declare module '*.md' {
   export default component
 }
 
-declare module '/@slidev/configs' {
-  import { SlidevConfig } from '@slidev/types'
-
-  export default SlidevConfig
-}
-
 declare module 'mermaid/dist/mermaid.esm.mjs' {
   import Mermaid from 'mermaid/dist/mermaid.d.ts'
 

package/state/index.ts

@@ -20,19 +20,19 @@ export const activeElement = useActiveElement()
 export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
-export const currentCamera = useLocalStorage<string>('slidev-camera', 'default')
-export const currentMic = useLocalStorage<string>('slidev-mic', 'default')
+export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
+export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 
-export const showOverview = useLocalStorage('slidev-show-overview', false)
-export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true)
-export const showEditor = useLocalStorage('slidev-show-editor', false)
-export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false)
-export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318)
-export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300)
+export const showOverview = useLocalStorage('slidev-show-overview', false, { listenToStorageChanges: false })
+export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
+export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
+export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
+export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
 
-export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1)
-export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1)
+export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
+export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
 
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1

package/styles/code.css

@@ -59,7 +59,9 @@ html:not(.dark) .shiki span {
 .slidev-code-line-numbers .slidev-code code .line::before {
   content: counter(step);
   counter-increment: step;
-  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
+  display: inline-block;
+  text-align: right;
+  --uno: w-4 mr-6 text-gray-400 dark:text-gray-600;
 }
 
 /* Inline Code */
@@ -67,7 +69,7 @@ html:not(.dark) .shiki span {
   font-size: 0.9em;
   background: var(--slidev-code-background);
   border-radius: var(--slidev-code-radius);
-  @apply font-light py-0.5 px-1.5;
+  --uno: font-light py-0.5 px-1.5;
 }
 
 .slidev-layout :not(pre) > code:before {
@@ -82,4 +84,6 @@ html:not(.dark) .shiki span {
 }
 
 /* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }
+.CodeMirror pre.CodeMirror-placeholder {
+  opacity: 0.4;
+}

package/styles/index.css

@@ -23,15 +23,16 @@ html {
 }
 
 .slidev-icon-btn.shallow {
-  @apply opacity-30
+  opacity: 0.3;
 }
 
 .slidev-icon-btn.active {
-  @apply opacity-100
+  opacity: 1;
 }
 
 .slidev-icon-btn.disabled {
-  @apply opacity-25 pointer-events-none;
+  opacity: 0.25;
+  pointer-events: none;
 }
 
 .slidev-vclick-target {
@@ -39,11 +40,13 @@ html {
 }
 
 .slidev-vclick-hidden {
-  @apply !opacity-0 !pointer-events-none;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
 }
 
 .slidev-vclick-fade {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 .slidev-icon {
@@ -53,5 +56,14 @@ html {
 }
 
 .slidev-page {
-  @apply absolute top-0 left-0 right-0 w-full relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+/* Transform the position back for Rough Notation (v-mark) */
+.rough-annotation {
+  transform: scale(calc(1 / var(--slidev-slide-scale)));
 }

package/styles/katex.css

@@ -2,4 +2,4 @@
 }
 .slidev-katex-wrapper .mord.dishonored {
   opacity: 0.3;
-}
+}

package/styles/layouts-base.css

@@ -1,7 +1,8 @@
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;
 
-  pre, code {
+  pre,
+  code {
     @apply select-text;
   }
 
@@ -54,7 +55,9 @@
   }
 
   blockquote {
-    @apply text-sm px-2 py-1 bg-$prism-background text-$prism-foreground border-$slidev-theme-primary border-l rounded;
+    background: var(--slidev-code-background);
+    color: var(--slidev-code-foreground);
+    @apply text-sm px-2 py-1 border-primary border-l rounded;
   }
 
   blockquote > * {
@@ -66,7 +69,7 @@
   }
 
   tr {
-    @apply border-b border-gray-400 border-opacity-20;
+    @apply border-b border-main;
   }
 
   th {
@@ -74,26 +77,28 @@
   }
 
   a {
-    @apply border-current border-b border-dashed hover:text-$slidev-theme-primary hover:border-solid;
+    @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
   }
 
-  td, th {
+  td,
+  th {
     @apply p-2 py-3;
   }
 
-  b, strong {
+  b,
+  strong {
     @apply font-600;
   }
 
   kbd {
-    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
+    @apply border border-main border-b-2 rounded;
     @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-xs font-mono;
   }
 }
 
 .slidev-layout,
-[dir=ltr],
-.slidev-layout [dir=ltr] {
+[dir='ltr'],
+.slidev-layout [dir='ltr'] {
   h1 {
     @apply -ml-[0.05em] mr-0;
   }
@@ -107,10 +112,10 @@
   }
 }
 
-[dir=rtl],
-.slidev-layout [dir=rtl] {
+[dir='rtl'],
+.slidev-layout [dir='rtl'] {
   h1 {
-    @apply -mr-[0.05em] ml-0; 
+    @apply -mr-[0.05em] ml-0;
   }
 
   h6 {

package/styles/vars.css

@@ -7,6 +7,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
+  --slidev-theme-primary: #3ab9d5;
 
   --slidev-transition-duration: 0.5s;
   --slidev-slide-container-background: black;

package/uno.config.ts

@@ -8,6 +8,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 
 export default defineConfig({
   safelist: [
@@ -15,15 +16,26 @@ export default defineConfig({
     'prose',
   ],
   shortcuts: {
-    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+    'bg-main': 'bg-white dark:bg-[#121212]',
     'bg-active': 'bg-gray-400/10',
-    'border-main': 'border-gray-400/20',
+    'border-main': 'border-gray/20',
+    'text-main': 'text-[#181818] dark:text-[#ddd]',
+    'text-primary': 'color-$slidev-theme-primary',
+    'bg-primary': 'bg-$slidev-theme-primary',
+    'border-primary': 'border-$slidev-theme-primary',
     'abs-tl': 'absolute top-0 left-0',
     'abs-tr': 'absolute top-0 right-0',
     'abs-b': 'absolute bottom-0 left-0 right-0',
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
   },
+  // Slidev Specific Variants, probably extrat to a preset later
+  variants: [
+    // `forward:` and `backward:` variant to selectively apply styles based on the direction of the slide
+    // For example, `forward:text-red` will only apply to the slides that are navigated forward
+    variantMatcher('forward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+    variantMatcher('backward', input => ({ prefix: `.slidev-nav-go-backward ${input.prefix}` })),
+  ],
   presets: [
     presetUno(),
     presetAttributify(),