@slidev/client 0.34.0 → 0.34.3

package/builtin/{CodeHighlightController.vue → CodeBlockWrapper.vue}

@@ -14,7 +14,9 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 <script setup lang="ts">
 import { range, remove } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'
+import { useClipboard } from '@vueuse/core'
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { configs } from '../env'
 import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
 
 const props = defineProps({
@@ -25,13 +27,17 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
+  maxHeight: {
+    type: String,
+    default: undefined,
+  },
 })
 
 const clicks = inject(injectionClicks)
 const elements = inject(injectionClicksElements)
 const disabled = inject(injectionClicksDisabled)
 
-function makeid(length = 5) {
+function makeId(length = 5) {
   const result = []
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
   const charactersLength = characters.length
@@ -52,7 +58,7 @@ onMounted(() => {
   })
   const rangeStr = computed(() => props.ranges[index.value] || '')
   if (props.ranges.length >= 2 && !disabled?.value) {
-    const id = makeid()
+    const id = makeId()
     const ids = range(props.ranges.length - 1).map(i => id + i)
     if (elements?.value) {
       elements.value.push(...ids)
@@ -74,13 +80,40 @@ onMounted(() => {
         line.classList.toggle('highlighted', highlighted)
         line.classList.toggle('dishonored', !highlighted)
       })
+      if (props.maxHeight) {
+        const firstHighlightedEl = target.querySelector('.line.highlighted')
+        if (firstHighlightedEl)
+          firstHighlightedEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
     }
   })
 })
+
+const { copied, copy } = useClipboard()
+
+function copyCode() {
+  const code = el.value?.querySelector('.slidev-code')?.textContent
+  if (code)
+    copy(code)
+}
 </script>
 
 <template>
-  <div ref="el">
+  <div
+    ref="el" class="slidev-code-wrapper relative group"
+    :style="{
+      'max-height': props.maxHeight,
+      'overflow-y': props.maxHeight ? 'scroll' : undefined,
+    }"
+  >
     <slot />
+    <button
+      v-if="configs.codeCopy"
+      class="slidev-code-copy absolute top-0 right-0 transition opacity-0 group-hover:opacity-20 hover:!opacity-100"
+      :title="copied ? 'Copied' : 'Copy'" @click="copyCode()"
+    >
+      <ph-check-circle v-if="copied" class="p-2 w-8 h-8" />
+      <ph-clipboard v-else class="p-2 w-8 h-8" />
+    </button>
   </div>
 </template>

package/internals/NavControls.vue

@@ -92,8 +92,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           title="Show presenter cursor"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <ph:cursor-fill v-if="showPresenterCursor" />
-          <ph:cursor-duotone v-else class="opacity-50" />
+          <ph-cursor-fill v-if="showPresenterCursor" />
+          <ph-cursor-duotone v-else class="opacity-50" />
         </button>
       </template>
 

package/internals/PresenterMouse.vue

@@ -7,7 +7,7 @@ import { sharedState } from '../state/shared'
     v-if="sharedState.cursor"
     class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none text-xl"
   >
-    <ph:cursor-fill
+    <ph-cursor-fill
       class="absolute"
       :style="{ left: `${sharedState.cursor.x}%`, top: `${sharedState.cursor.y}%` }"
     />

package/logic/nav.ts

@@ -115,6 +115,14 @@ export async function prevSlide(lastClicks = true) {
     router.replace({ query: { ...route.value.query, clicks: clicksTotal.value } })
 }
 
+export function goFirst() {
+  return go(1)
+}
+
+export function goLast() {
+  return go(total.value)
+}
+
 export function go(page: number | string, clicks?: number) {
   return router.push({ path: getPath(page), query: { ...route.value.query, clicks } })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.34.0",
+  "version": "0.34.3",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.5.2",
-    "@slidev/parser": "0.34.0",
-    "@slidev/types": "0.34.0",
+    "@slidev/parser": "0.34.3",
+    "@slidev/types": "0.34.3",
     "@unocss/reset": "^0.42.0",
     "@vueuse/core": "^8.7.5",
     "@vueuse/head": "^0.7.6",

package/setup/shortcuts.ts

@@ -1,7 +1,7 @@
 /* __imports__ */
 
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF, go, next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { downloadPDF, go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
 import { toggleDark } from '../logic/dark'
 import { showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'
@@ -15,6 +15,8 @@ export default function setupShortcuts() {
     nextSlide,
     prevSlide,
     go,
+    goFirst,
+    goLast,
     downloadPDF,
     toggleDark,
     toggleOverview,

package/styles/code.css

@@ -6,13 +6,23 @@ html:not(.dark) .shiki-dark {
   display: none;
 }
 
+::-webkit-scrollbar {
+  width: 0px;
+}
+
+.slidev-code-wrapper {
+  margin: var(--slidev-code-margin) !important;
+  &:-webkit-scrollbar {
+    width: 0px;
+  }
+}
+
 .slidev-code {
   font-family: var(--slidev-code-font-family) !important;
   padding: var(--slidev-code-padding) !important;
   font-size: var(--slidev-code-font-size) !important;
   line-height: var(--slidev-code-line-height) !important;
   border-radius: var(--slidev-code-radius) !important;
-  margin: var(--slidev-code-margin) !important;
   overflow: auto;
 }
 
@@ -38,7 +48,7 @@ html:not(.dark) .shiki-dark {
 .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
+  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
 }
 
 /* revert windicss preflight for katex */

package/styles/index.css

@@ -19,12 +19,7 @@ html {
   @apply inline-block cursor-pointer select-none !outline-none;
   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
-}
-
-@screen md {
-  .icon-btn {
-    @apply p-2;
-  }
+  @apply md:p-2;
 }
 
 .icon-btn.shallow {