feat: click to next

Author: antfu

src/App.vue

@@ -1,32 +1,40 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 import { computed } from 'vue'
+import { useNavigateControls } from './logic'
 import { scale, targetHeight, targetWidth } from './logic/scale'
 
 useHead({
   title: 'Vite Slides',
   meta: [],
 })
 
+const controls = useNavigateControls()
 const style = computed(() => ({
   height: `${targetHeight}px`,
   width: `${targetWidth}px`,
   transform: `translate(-50%, -50%) scale(${scale.value})`,
 }))
+
+function onClick(e: MouseEvent) {
+  const classList = (e.target as HTMLElement)?.classList
+  if (classList?.contains('page-root'))
+    controls.next()
+}
 </script>
 
 <template>
-  <div class="page">
+  <div class="page-root" @click="onClick">
     <div class="slide-container" :style="style">
       <RouterView />
     </div>
   </div>
   <SlideControls />
 </template>
 
-<style>
-.page {
-  @apply w-screen h-screen relative overflow-hidden bg-black;
+<style lang="postcss">
+.page-root {
+  @apply w-screen h-screen relative overflow-hidden bg-black select-none;
 }
 
 .slide-container {

src/layouts/default.vue

@@ -8,6 +8,14 @@
 .master {
   @apply px-14 py-10 text-[1.1rem];
 
+  h1, h2, h3, h4, p, div {
+    @apply select-none;
+  }
+
+  pre, code {
+    @apply select-text;
+  }
+
   h1 {
     @apply text-4xl mb-4 -ml-[0.05em];
   }

src/layouts/end.vue

@@ -4,8 +4,8 @@
   </main>
 </template>
 
-<style>
+<style lang="postcss">
 .master.end {
-  @apply text-white text-opacity-85 text-xl tracking-widest bg-black h-full text-center grid place-content-center;
+  @apply text-white text-opacity-85 text-xl tracking-widest bg-black h-full text-center grid place-content-center select-none;
 }
 </style>