@slidev/client 0.47.5 → 0.48.0-beta.1

package/internals/DrawingControls.vue

@@ -13,7 +13,7 @@ import {
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 function undo() {
   drauu.undo()
@@ -40,81 +40,69 @@ function setBrushColor(color: typeof brush.color) {
     :initial-x="10"
     :initial-y="10"
   >
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <HiddenText text="Draw with stylus" />
+    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
       <carbon:pen />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
-      <HiddenText text="Draw a line" />
+    </IconButton>
+    <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
         <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <HiddenText text="Draw an arrow" />
+    </IconButton>
+    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
       <carbon:arrow-up-right />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <HiddenText text="Draw an ellipse" />
+    </IconButton>
+    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
       <carbon:radio-button />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <HiddenText text="Draw a rectangle" />
+    </IconButton>
+    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
-    </button>
+    </IconButton>
     <!-- TODO: not sure why it's not working! -->
-    <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <HiddenText text="Erase" />
+    <!-- <IconButton title="Erase" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </button> -->
+    </IconButton> -->
 
     <VerticalDivider />
 
-    <button
+    <IconButton
       v-for="color of brushColors"
       :key="color"
-      class="slidev-icon-btn"
+      title="Set brush color"
       :class="brush.color === color ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
-      <HiddenText text="Set brush color" />
       <div
         class="w-6 h-6 transition-all transform border border-gray-400/50"
         :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
-    </button>
+    </IconButton>
 
     <VerticalDivider />
 
-    <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
-      <HiddenText text="Undo" />
+    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
       <carbon:undo />
-    </button>
-    <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
-      <HiddenText text="Redo" />
+    </IconButton>
+    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
       <carbon:redo />
-    </button>
-    <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <HiddenText text="Delete" />
+    </IconButton>
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
       <carbon:delete />
-    </button>
+    </IconButton>
 
     <VerticalDivider />
-    <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <HiddenText :text="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" />
+    <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
       <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
       <carbon:pin v-show="!drawingPinned" />
-    </button>
-    <button
+    </IconButton>
+    <IconButton
       v-if="drawingEnabled"
-      class="slidev-icon-btn"
+      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
-      <HiddenText :text="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'" />
       <carbon:error v-show="drawingPinned" />
       <carbon:close-outline v-show="!drawingPinned" />
-    </button>
+    </IconButton>
   </Draggable>
 </template>

package/internals/Editor.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { throttledWatch, useEventListener } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
-import { activeElement, editorWidth, isInputting, showEditor } from '../state'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{
-  resize: boolean
+  resize?: boolean
 }>()
 
 const tab = ref<'content' | 'note'>('content')
@@ -56,8 +56,8 @@ useEventListener('keydown', (e) => {
   }
 })
 
-onMounted(() => {
-  useCodeMirror(
+onMounted(async () => {
+  const contentEditor = await useCodeMirror(
     contentInput,
     computed({
       get() { return content.value },
@@ -77,7 +77,7 @@ onMounted(() => {
     },
   )
 
-  useCodeMirror(
+  const noteEditor = await useCodeMirror(
     noteInput,
     computed({
       get() { return note.value },
@@ -94,14 +94,26 @@ onMounted(() => {
       fencedCodeBlockDefaultMode: 'javascript',
     },
   )
+
+  watch([tab, vertical], () => {
+    nextTick(() => {
+      if (tab.value === 'content')
+        contentEditor.refresh()
+      else
+        noteEditor.refresh()
+    })
+  })
 })
 
 const handlerDown = ref(false)
 function onHandlerDown() {
   handlerDown.value = true
 }
-function updateWidth(v: number) {
-  editorWidth.value = Math.min(Math.max(200, v), window.innerWidth - 200)
+function updateSize(v?: number) {
+  if (vertical.value)
+    editorHeight.value = Math.min(Math.max(300, v ?? editorHeight.value), window.innerHeight - 200)
+  else
+    editorWidth.value = Math.min(Math.max(318, v ?? editorWidth.value), window.innerWidth - 200)
 }
 function switchTab(newTab: typeof tab.value) {
   tab.value = newTab
@@ -111,14 +123,17 @@ function switchTab(newTab: typeof tab.value) {
 
 if (props.resize) {
   useEventListener('pointermove', (e) => {
-    if (handlerDown.value)
-      updateWidth(window.innerWidth - e.pageX)
+    if (handlerDown.value) {
+      updateSize(vertical.value
+        ? window.innerHeight - e.pageY
+        : window.innerWidth - e.pageX)
+    }
   }, { passive: true })
   useEventListener('pointerup', () => {
     handlerDown.value = false
   })
   useEventListener('resize', () => {
-    updateWidth(editorWidth.value)
+    updateSize()
   })
 }
 
@@ -134,46 +149,61 @@ throttledWatch(
 
 <template>
   <div
-    v-if="resize"
-    class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
-    :class="{ '!opacity-30': handlerDown }"
-    :style="{ right: `${editorWidth - 5}px`, cursor: 'col-resize' }"
-    @pointerdown="onHandlerDown"
+    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
+    :class="vertical ? 'left-0 right-0 w-full h-10px' : 'top-0 bottom-0 w-10px h-full'" :style="{
+      opacity: handlerDown ? '0.3' : undefined,
+      bottom: vertical ? `${editorHeight - 5}px` : undefined,
+      right: !vertical ? `${editorWidth - 5}px` : undefined,
+      cursor: vertical ? 'row-resize' : 'col-resize',
+    }" @pointerdown="onHandlerDown"
   />
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
     :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
-    :style="resize ? { width: `${editorWidth}px` } : {}"
+    :style="resize ? {
+      height: vertical ? `${editorHeight}px` : undefined,
+      width: !vertical ? `${editorWidth}px` : undefined,
+    } : {}"
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
-        <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
-          <HiddenText text="Switch to content tab" />
+        <IconButton
+          title="Switch to content tab" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''"
+          @click="switchTab('content')"
+        >
           <carbon:account />
-        </button>
-        <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
-          <HiddenText text="Switch to notes tab" />
+        </IconButton>
+        <IconButton
+          title="Switch to notes tab" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''"
+          @click="switchTab('note')"
+        >
           <carbon:align-box-bottom-right />
-        </button>
+        </IconButton>
       </div>
       <span class="text-2xl pt-1">
         {{ tab === 'content' ? 'Slide' : 'Notes' }}
       </span>
       <div class="flex-auto" />
-      <button class="slidev-icon-btn" @click="openInEditor()">
-        <HiddenText text="Open in editor" />
+      <template v-if="resize">
+        <IconButton v-if="vertical" title="Dock to right" @click="vertical = false">
+          <carbon:open-panel-right />
+        </IconButton>
+        <IconButton v-else title="Dock to bottom" @click="vertical = true">
+          <carbon:open-panel-bottom />
+        </IconButton>
+      </template>
+      <IconButton title="Open in editor" @click="openInEditor()">
         <carbon:launch />
-      </button>
-      <button class="slidev-icon-btn" @click="close">
-        <HiddenText text="Close" />
+      </IconButton>
+      <IconButton title="Close" @click="close">
         <carbon:close />
-      </button>
+      </IconButton>
     </div>
-    <div class="h-full overflow-auto">
-      <div v-show="tab === 'content'" class="h-full overflow-auto">
+    <div class="overflow-hidden">
+      <div v-show="tab === 'content'" class="w-full h-full">
         <textarea ref="contentInput" placeholder="Create slide content..." />
       </div>
-      <div v-show="tab === 'note'" class="h-full overflow-auto">
+      <div v-show="tab === 'note'" class="w-full h-full">
         <textarea ref="noteInput" placeholder="Write some notes..." />
       </div>
     </div>
@@ -182,6 +212,6 @@ throttledWatch(
 
 <style lang="postcss">
 .CodeMirror {
-  @apply px-3 py-2 h-full overflow-auto bg-transparent font-mono text-sm z-0;
+  @apply px-3 py-2 h-full overflow-hidden bg-transparent font-mono text-sm z-0;
 }
 </style>

package/internals/IconButton.vue

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

package/internals/NavControls.vue

@@ -8,7 +8,7 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 // @ts-expect-error virtual module
 import CustomNavControls from '/@slidev/custom-nav-controls'
@@ -52,47 +52,27 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >
-      <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
-        <template v-if="isFullscreen">
-          <HiddenText text="Close fullscreen" />
-          <carbon:minimize />
-        </template>
-        <template v-else>
-          <HiddenText text="Enter fullscreen" />
-          <carbon:maximize />
-        </template>
-      </button>
-
-      <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
-        <HiddenText text="Go to previous slide" />
+      <IconButton v-if="!isEmbedded" :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
+        <carbon:minimize v-if="isFullscreen" />
+        <carbon:maximize v-else />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prev">
         <carbon:arrow-left />
-      </button>
-
-      <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
-        <HiddenText text="Go to next slide" />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="next">
         <carbon:arrow-right />
-      </button>
-
-      <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
-        <HiddenText text="Show slide overview" />
+      </IconButton>
+      <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
         <carbon:apps />
-      </button>
-
-      <button
+      </IconButton>
+      <IconButton
         v-if="!isColorSchemaConfigured"
-        class="slidev-icon-btn"
-        title="Toggle dark mode"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
         @click="toggleDark()"
       >
-        <template v-if="isDark">
-          <HiddenText text="Switch to light theme" />
-          <carbon-moon />
-        </template>
-        <template v-else>
-          <HiddenText text="Switch to dark mode theme" />
-          <carbon-sun />
-        </template>
-      </button>
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
 
       <VerticalDivider />
 
@@ -102,33 +82,25 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <VerticalDivider />
         </template>
 
-        <button
+        <IconButton
           v-if="isPresenter"
-          class="slidev-icon-btn"
-          title="Show presenter cursor"
+          :title="showPresenterCursor ? 'Hide presenter cursor' : 'Show presenter cursor'"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <template v-if="showPresenterCursor">
-            <HiddenText text="Hide presenter cursor" />
-            <ph-cursor-fill />
-          </template>
-          <template v-else>
-            <HiddenText text="Show presenter cursor" />
-            <ph-cursor-duotone />
-          </template>
-        </button>
+          <ph-cursor-fill v-if="showPresenterCursor" />
+          <ph-cursor-duotone v-else />
+        </IconButton>
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
-        <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
-          <HiddenText v-if="drawingEnabled" :text="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" />
+        <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
             :style="{ background: brush.color }"
           />
-        </button>
+        </IconButton>
         <VerticalDivider />
       </template>
 
@@ -140,43 +112,40 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <carbon:user-speaker />
         </RouterLink>
 
-        <button
+        <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
-          class="slidev-icon-btn <md:hidden"
+          :title="showEditor ? 'Hide editor' : 'Show editor'"
+          class="<md:hidden"
           @click="showEditor = !showEditor"
         >
-          <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
-        </button>
+        </IconButton>
 
-        <button v-if="isPresenter" class="slidev-icon-btn" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
-        </button>
+        </IconButton>
       </template>
       <template v-if="!__DEV__">
-        <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
-          <HiddenText text="Download as PDF" />
+        <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
           <carbon:download />
-        </button>
+        </IconButton>
       </template>
 
-      <button
+      <IconButton
         v-if="!isPresenter && configs.info && !isEmbedded"
-        class="slidev-icon-btn"
+        title="Show info"
         @click="showInfoDialog = !showInfoDialog"
       >
-        <HiddenText text="Show info" />
         <carbon:information />
-      </button>
+      </IconButton>
 
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
-            <button class="slidev-icon-btn">
-              <HiddenText text="Adjust settings" />
+            <IconButton title="Adjust settings">
               <carbon:settings-adjust />
-            </button>
+            </IconButton>
           </template>
           <template #menu>
             <Settings />

package/internals/NotesView.vue

@@ -8,7 +8,7 @@ import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
 import NoteDisplay from './NoteDisplay.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -55,19 +55,16 @@ function decreaseFontSize() {
     </div>
     <div class="flex-none border-t border-gray-400 border-opacity-20">
       <div class="flex gap-1 items-center px-6 py-3">
-        <button class="slidev-icon-btn" @click="toggleFullscreen">
-          <HiddenText :text="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" />
+        <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
-        </button>
-        <button class="slidev-icon-btn" @click="increaseFontSize">
-          <HiddenText text="Increase font size" />
+        </IconButton>
+        <IconButton title="Increase font size" @click="increaseFontSize">
           <carbon:zoom-in />
-        </button>
-        <button class="slidev-icon-btn" @click="decreaseFontSize">
-          <HiddenText text="Decrease font size" />
+        </IconButton>
+        <IconButton title="Decrease font size" @click="decreaseFontSize">
           <carbon:zoom-out />
-        </button>
+        </IconButton>
         <div class="flex-auto" />
         <div class="p2 text-center">
           {{ pageNo }} / {{ total }}

package/internals/Play.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isScreenVertical, showEditor, slideScale, windowSize } from '../state'
+import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
 import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -42,7 +42,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid 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]'" :style="themeVars">
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
@@ -58,7 +58,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <div
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
           :class="[
-            persistNav ? 'opacity-100 right-0' : 'opacity-0 p-2',
+            persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
             isDrawing ? 'pointer-events-none' : '',
           ]"
         >