@slidev/client 0.40.0 → 0.40.2

package/internals/DrawingControls.vue

@@ -32,25 +32,25 @@ function setBrushColor(color: typeof brush.color) {
     :initial-x="10"
     :initial-y="10"
   >
-    <button class="icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
+    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
       <carbon:pen />
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
+    <button class="slidev-icon-btn" :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="icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
+    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
       <carbon:arrow-up-right />
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
+    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
       <carbon:radio-button />
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
+    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
     </button>
     <!-- TODO: not sure why it's not working! -->
-    <!-- <button class="icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+    <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
     </button> -->
 
@@ -59,7 +59,7 @@ function setBrushColor(color: typeof brush.color) {
     <button
       v-for="color of brushColors"
       :key="color"
-      class="icon-btn"
+      class="slidev-icon-btn"
       :class="brush.color === color ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
@@ -72,24 +72,24 @@ function setBrushColor(color: typeof brush.color) {
 
     <VerticalDivider />
 
-    <button class="icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
+    <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
       <carbon:undo />
     </button>
-    <button class="icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
+    <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
       <carbon:redo />
     </button>
-    <button class="icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
+    <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
       <carbon:delete />
     </button>
 
     <VerticalDivider />
-    <button class="icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
+    <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
       <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
       <carbon:pin v-show="!drawingPinned" />
     </button>
     <button
       v-if="drawingEnabled"
-      class="icon-btn"
+      class="slidev-icon-btn"
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >

package/internals/Editor.vue

@@ -137,10 +137,10 @@ throttledWatch(
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
-        <button class="icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
+        <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
           <carbon:account />
         </button>
-        <button class="icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
+        <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
           <carbon:align-box-bottom-right />
         </button>
       </div>
@@ -148,10 +148,10 @@ throttledWatch(
         {{ tab === 'content' ? 'Slide' : 'Notes' }}
       </span>
       <div class="flex-auto" />
-      <button class="icon-btn" @click="openInEditor()">
+      <button class="slidev-icon-btn" @click="openInEditor()">
         <carbon:launch />
       </button>
-      <button class="icon-btn" @click="close">
+      <button class="slidev-icon-btn" @click="close">
         <carbon:close />
       </button>
     </div>

package/internals/NavControls.vue

@@ -51,26 +51,26 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >
-      <button v-if="!isEmbedded" class="icon-btn" @click="toggleFullscreen">
+      <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
         <carbon:minimize v-if="isFullscreen" />
         <carbon:maximize v-else />
       </button>
 
-      <button class="icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
+      <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
         <carbon:arrow-left />
       </button>
 
-      <button class="icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
+      <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
         <carbon:arrow-right />
       </button>
 
-      <button v-if="!isEmbedded" class="icon-btn" title="Slides overview" @click="toggleOverview()">
+      <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
         <carbon:apps />
       </button>
 
       <button
         v-if="!isColorSchemaConfigured"
-        class="icon-btn"
+        class="slidev-icon-btn"
         title="Toggle dark mode"
         @click="toggleDark()"
       >
@@ -88,7 +88,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
         <button
           v-if="isPresenter"
-          class="icon-btn"
+          class="slidev-icon-btn"
           title="Show presenter cursor"
           @click="showPresenterCursor = !showPresenterCursor"
         >
@@ -98,7 +98,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
-        <button class="icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
+        <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
             v-if="drawingEnabled"
@@ -110,26 +110,26 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
 
       <template v-if="!isEmbedded">
-        <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
+        <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
+        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 
-        <button v-if="__DEV__ && !isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
+        <button v-if="__DEV__ && !isPresenter" class="slidev-icon-btn <md:hidden" @click="showEditor = !showEditor">
           <carbon:text-annotation-toggle />
         </button>
       </template>
       <template v-if="!__DEV__">
-        <button v-if="configs.download" class="icon-btn" @click="downloadPDF">
+        <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
           <carbon:download />
         </button>
       </template>
 
       <button
         v-if="!isPresenter && configs.info && !isEmbedded"
-        class="icon-btn"
+        class="slidev-icon-btn"
         @click="showInfoDialog = !showInfoDialog"
       >
         <carbon:information />
@@ -138,7 +138,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
-            <button class="icon-btn">
+            <button class="slidev-icon-btn">
               <carbon:settings-adjust />
             </button>
           </template>

package/internals/NotesView.vue

@@ -56,14 +56,14 @@ 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="icon-btn" @click="toggleFullscreen">
+        <button class="slidev-icon-btn" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
         </button>
-        <button class="icon-btn" @click="increaseFontSize">
+        <button class="slidev-icon-btn" @click="increaseFontSize">
           <carbon:zoom-in />
         </button>
-        <button class="icon-btn" @click="decreaseFontSize">
+        <button class="slidev-icon-btn" @click="decreaseFontSize">
           <carbon:zoom-out />
         </button>
         <div class="flex-auto" />

package/internals/RecordingControls.vue

@@ -35,7 +35,7 @@ onMounted(() => {
 <template>
   <button
     v-if="currentCamera !== 'none'"
-    class="icon-btn <md:hidden"
+    class="slidev-icon-btn <md:hidden"
     :class="{ 'text-green-500': Boolean(showAvatar && streamCamera) }"
     title="Show camera view"
     @click="toggleAvatar"
@@ -44,7 +44,7 @@ onMounted(() => {
   </button>
 
   <button
-    class="icon-btn"
+    class="slidev-icon-btn"
     :class="{ 'text-red-500': recording }"
     title="Recording"
     @click="toggleRecording"
@@ -54,7 +54,7 @@ onMounted(() => {
   </button>
   <MenuButton :disabled="recording">
     <template #button>
-      <button class="icon-btn h-full !text-sm !px-0">
+      <button class="slidev-icon-btn h-full !text-sm !px-0">
         <carbon:chevron-up class="opacity-50" />
       </button>
     </template>

package/internals/SlidesOverview.vue

@@ -101,7 +101,7 @@ watchEffect(() => {
       </div>
     </div>
   </div>
-  <button v-if="value" class="fixed text-2xl top-4 right-4 icon-btn text-gray-400" @click="close">
+  <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
     <carbon:close />
   </button>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -40,8 +40,8 @@
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.40.0",
-    "@slidev/types": "0.40.0"
+    "@slidev/parser": "0.40.2",
+    "@slidev/types": "0.40.2"
   },
   "devDependencies": {
     "vite": "^4.1.1"

package/setup/root.ts

@@ -54,7 +54,7 @@ export default function setupRoot() {
     const routePath = router.currentRoute.value.path
     if (!routePath.match(/^\/(\d+|presenter)\/?/))
       return
-    if (+state.page !== +currentPage.value || clicks.value !== state.clicks) {
+    if (+state.page !== +currentPage.value || +clicks.value !== +state.clicks) {
       router.replace({
         path: getPath(state.page),
         query: {

package/state/syncState.ts

@@ -16,6 +16,8 @@ export function createSyncState<State extends object>(serverState: State, defaul
   }
 
   function patch<K extends keyof State>(key: K, value: State[K]) {
+    if (state[key] === value)
+      return
     clearTimeout(patchingTimeout)
     patching = true
     state[key] = value
@@ -46,7 +48,7 @@ export function createSyncState<State extends object>(serverState: State, defaul
       })
     }
 
-    function onDrawingStateChanged() {
+    function onStateChanged() {
       if (!persist && stateChannel && !updating)
         stateChannel.postMessage(toRaw(state))
       else if (persist && !updating)
@@ -55,7 +57,7 @@ export function createSyncState<State extends object>(serverState: State, defaul
         onPatchCallbacks.forEach((fn: (state: State) => void) => fn(state))
     }
 
-    watch(state, onDrawingStateChanged, { deep: true })
+    watch(state, onStateChanged, { deep: true })
     if (!__USE_SERVER__ && persist) {
       const serialzedState = window.localStorage.getItem(channelKey)
       if (serialzedState)

package/styles/index.css

@@ -15,22 +15,22 @@ html {
   background: transparent;
 }
 
-.icon-btn {
+.slidev-icon-btn {
   @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);
   @apply md:p-2;
 }
 
-.icon-btn.shallow {
+.slidev-icon-btn.shallow {
   @apply opacity-30
 }
 
-.icon-btn.active {
+.slidev-icon-btn.active {
   @apply opacity-100
 }
 
-.icon-btn.disabled {
+.slidev-icon-btn.disabled {
   @apply opacity-25 pointer-events-none;
 }