slides October 2024

Author: paulmelero

04-frameworks/03-vue/slides/layouts/image-right-rounded.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  image: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+})
+const style = computed(() => ({
+  backgroundImage: `url(${props.image})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+}))
+</script>
+
+<template>
+  <div class="grid grid-cols-2 w-full h-full">
+    <div class="slidev-layout default image-right" :class="props.class">
+      <slot />
+    </div>
+    <div class="grid items-center justify-center h-full">
+      <div class="w-46 h-46 rounded-full" :style="style" />
+    </div>
+  </div>
+</template>

04-frameworks/03-vue/slides/package.json

@@ -8,7 +8,7 @@
     "export": "slidev export"
   },
   "dependencies": {
-    "@slidev/cli": "^0.46.1",
+    "@slidev/cli": "0.50.0-beta.4",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest"
   },