@slidev/client 0.34.1 → 0.34.2

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({
@@ -31,7 +33,7 @@ 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 +54,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)
@@ -77,10 +79,26 @@ onMounted(() => {
     }
   })
 })
+
+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">
     <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.34.1",
+  "version": "0.34.2",
   "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.1",
-    "@slidev/types": "0.34.1",
+    "@slidev/parser": "0.34.2",
+    "@slidev/types": "0.34.2",
     "@unocss/reset": "^0.42.0",
     "@vueuse/core": "^8.7.5",
     "@vueuse/head": "^0.7.6",

package/styles/code.css

@@ -6,13 +6,16 @@ html:not(.dark) .shiki-dark {
   display: none;
 }
 
+.slidev-code-wrapper {
+  margin: var(--slidev-code-margin) !important;
+}
+
 .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 +41,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 {