@slidev/client 0.38.3 → 0.38.5

package/builtin/LightOrDark.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { isDark } from '../logic/dark'
+</script>
+
+<template>
+  <slot v-if="isDark" name="dark" />
+  <slot v-else name="light" />
+</template>

package/builtin/Toc.vue

@@ -9,7 +9,7 @@ Usage:
 -->
 <script setup lang='ts'>
 import { computed, inject } from 'vue'
-import type { TocItem } from '../logic/nav'
+import type { TocItem } from '@slidev/types'
 import { injectionSlidevContext } from '../constants'
 
 const props = withDefaults(

package/builtin/TocList.vue

@@ -9,9 +9,9 @@ Usage:
 <script setup lang="ts">
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
+import type { TocItem } from '@slidev/types'
 // @ts-expect-error virtual module
 import Titles from '/@slidev/titles.md'
-import type { TocItem } from '../logic/nav'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -47,3 +47,9 @@ const classes = computed(() => {
     </li>
   </ol>
 </template>
+
+<style>
+.slidev-toc-item p {
+  margin: 0;
+}
+</style>

package/composables/useNav.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
-import type { TocItem } from '../logic/nav'
+import type { TocItem } from '@slidev/types'
 import { addToTree, filterTree, getPath, getTreeWithActiveStatuses } from '../logic/nav'
 import { rawRoutes } from '../routes'
 

package/internals/NavControls.vue

@@ -97,7 +97,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         </button>
       </template>
 
-      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded">
+      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
         <button class="icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
@@ -113,7 +113,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="showPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
+        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 

package/internals/PrintContainer.vue

@@ -3,7 +3,7 @@ import { parseRangeString } from '@slidev/parser/core'
 import { computed, provide } from 'vue'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { rawRoutes, route } from '../logic/nav'
+import { route as currentRoute, rawRoutes } from '../logic/nav'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{
@@ -23,8 +23,8 @@ const scale = computed(() => {
 
 // Remove the "end" slide
 let routes = rawRoutes.slice(0, -1)
-if (route.value.query.range) {
-  const r = parseRangeString(routes.length, route.value.query.range)
+if (currentRoute.value.query.range) {
+  const r = parseRangeString(routes.length, currentRoute.value.query.range as string)
   routes = r.map(i => routes[i - 1])
 }
 

package/internals/SlidesOverview.vue

@@ -71,8 +71,8 @@ watchEffect(() => {
         class="relative"
       >
         <div
-          class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary"
-          :class="{ 'border-$slidev-theme-primary': focus(idx + 1) }"
+          class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary"
+          :class="{ 'border-$slidev-theme-primary': focus(idx + 1), 'border-gray-400': !focus(idx + 1) }"
           :style="themeVars"
           @click="go(+route.path)"
         >

package/logic/drawings.ts

@@ -52,7 +52,7 @@ export const drawingMode = computed({
 
 export const drauuOptions: DrauuOptions = reactive({
   brush,
-  acceptsInputTypes: computed(() => drawingEnabled.value ? undefined : ['pen' as const]),
+  acceptsInputTypes: computed(() => (drawingEnabled.value && (!configs.drawings.presenterOnly || isPresenter.value)) ? undefined : ['pen' as const]),
   coordinateTransform: false,
 })
 export const drauu = markRaw(createDrauu(drauuOptions))

package/logic/nav.ts

@@ -1,23 +1,13 @@
 import type { Ref } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { computed, nextTick, ref } from 'vue'
+import type { TocItem } from '@slidev/types'
 import { SwipeDirection, isString, timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { useRouteQuery } from './route'
 import { isDrawing } from './drawings'
 
-export interface TocItem {
-  active?: boolean
-  activeParent?: boolean
-  children: TocItem[]
-  hasActiveParent?: boolean
-  level: number
-  path: string
-  hideInToc?: boolean
-  title?: string
-}
-
 export { rawRoutes, router }
 
 // force update collected elements when the route is fully resolved

package/modules/mermaid.ts

@@ -23,7 +23,6 @@ export function renderMermaid(encoded: string, options: any) {
   })
   const code = decode(encoded)
   const id = nanoid()
-  // @ts-expect-error type mistake
   const svg = mermaid.render(id, code) as string
   cache.set(key, svg)
   return svg

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.38.3",
+  "version": "0.38.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,34 +16,34 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
-    "@unocss/reset": "^0.47.6",
-    "@vueuse/core": "^9.7.0",
-    "@vueuse/head": "^1.0.22",
-    "@vueuse/math": "^9.7.0",
+    "@unocss/reset": "^0.48.4",
+    "@vueuse/core": "^9.11.1",
+    "@vueuse/head": "^1.0.23",
+    "@vueuse/math": "^9.11.1",
     "@vueuse/motion": "^2.0.0-beta.26",
     "codemirror": "^5.65.5",
-    "defu": "^6.1.1",
+    "defu": "^6.1.2",
     "drauu": "^0.3.2",
     "file-saver": "^2.0.5",
-    "js-base64": "^3.7.3",
+    "js-base64": "^3.7.4",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.4",
     "mermaid": "^9.3.0",
     "monaco-editor": "^0.33.0",
     "nanoid": "^4.0.0",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.47.6",
+    "unocss": "^0.48.4",
     "vite-plugin-windicss": "^1.8.10",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.38.3",
-    "@slidev/types": "0.38.3"
+    "@slidev/parser": "0.38.5",
+    "@slidev/types": "0.38.5"
   },
   "devDependencies": {
-    "vite": "^4.0.2"
+    "vite": "^4.0.4"
   }
 }

package/routes.ts

@@ -20,8 +20,11 @@ export const routes: RouteRecordRaw[] = [
   { name: 'print', path: '/print', component: Print },
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
-  { path: '/presenter/print', component: () => import('./internals/PresenterPrint.vue') },
-  {
+]
+
+if (__SLIDEV_FEATURE_PRESENTER__) {
+  routes.push({ path: '/presenter/print', component: () => import('./internals/PresenterPrint.vue') })
+  routes.push({
     name: 'presenter',
     path: '/presenter/:no',
     component: () => import('./internals/Presenter.vue'),
@@ -38,12 +41,12 @@ export const routes: RouteRecordRaw[] = [
         return { path: `/${to.params.no}` }
       return { path: '' }
     },
-  },
-  {
+  })
+  routes.push({
     path: '/presenter',
     redirect: { path: '/presenter/1' },
-  },
-]
+  })
+}
 
 export const router = createRouter({
   history: __SLIDEV_HASH_ROUTE__ ? createWebHashHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),

package/setup/root.ts

@@ -1,6 +1,6 @@
 /* __imports__ */
 import { watch } from 'vue'
-import { useHead } from '@vueuse/head'
+import { useHead, useHtmlAttrs } from '@vueuse/head'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
@@ -16,6 +16,7 @@ export default function setupRoot() {
 
   const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
   useHead({ title })
+  useHtmlAttrs(configs.htmlAttrs)
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 

package/state/syncState.ts

@@ -7,7 +7,7 @@ export function createSyncState<State extends object>(serverState: State, defaul
   let patchingTimeout: NodeJS.Timeout
   let updatingTimeout: NodeJS.Timeout
 
-  const state = __DEV__
+  const state = __USE_SERVER__
     ? reactive<State>(serverState) as State
     : reactive<State>(defaultState) as State
 
@@ -35,11 +35,11 @@ export function createSyncState<State extends object>(serverState: State, defaul
 
   function init(channelKey: string) {
     let stateChannel: BroadcastChannel
-    if (!__DEV__ && !persist) {
+    if (!__USE_SERVER__ && !persist) {
       stateChannel = new BroadcastChannel(channelKey)
       stateChannel.addEventListener('message', (event: MessageEvent<Partial<State>>) => onUpdate(event.data))
     }
-    else if (!__DEV__ && persist) {
+    else if (!__USE_SERVER__ && persist) {
       window.addEventListener('storage', (event) => {
         if (event && event.key === channelKey && event.newValue)
           onUpdate(JSON.parse(event.newValue) as Partial<State>)
@@ -56,7 +56,7 @@ export function createSyncState<State extends object>(serverState: State, defaul
     }
 
     watch(state, onDrawingStateChanged, { deep: true })
-    if (!__DEV__ && persist) {
+    if (!__USE_SERVER__ && persist) {
       const serialzedState = window.localStorage.getItem(channelKey)
       if (serialzedState)
         onUpdate(JSON.parse(serialzedState) as Partial<State>)

package/styles/layouts-base.css

@@ -6,7 +6,7 @@
   }
 
   h1 {
-    @apply text-4xl mb-4 -ml-[0.05em];
+    @apply text-4xl mb-4;
   }
 
   h2 {
@@ -26,7 +26,7 @@
   }
 
   h6 {
-    @apply text-sm pt-1 uppercase tracking-widest font-500 -ml-[0.05em];
+    @apply text-sm pt-1 uppercase tracking-widest font-500;
   }
 
   h6:not(.opacity-100) {
@@ -46,7 +46,7 @@
   }
 
   li {
-    @apply ml-1.1em pl-0.2em leading-1.8em;
+    @apply leading-1.8em;
   }
 
   blockquote {
@@ -86,3 +86,34 @@
     @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-xs font-mono;
   }
 }
+
+.slidev-layout,
+[dir=ltr],
+.slidev-layout [dir=ltr] {
+  h1 {
+    @apply -ml-[0.05em] mr-0;
+  }
+
+  h6 {
+    @apply -ml-[0.05em] mr-0;
+  }
+
+  li {
+    @apply ml-1.1em pl-0.2em mr-0 pr-0;
+  }
+}
+
+[dir=rtl],
+.slidev-layout [dir=rtl] {
+  h1 {
+    @apply -mr-[0.05em] ml-0; 
+  }
+
+  h6 {
+    @apply -mr-[0.05em] ml-0;
+  }
+
+  li {
+    @apply mr-1.1em pr-0.2em ml-0 pl-0;
+  }
+}