feat: add RenderWhen component (#616)

slidevjs · Jun 1, 2022 · 2a62962 · 2a62962
1 parent fb8054f
commit 2a62962
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 3 deletions.
diff --git a/packages/client/builtin/RenderWhen.vue b/packages/client/builtin/RenderWhen.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { RenderContext } from '@slidev/types'
+
+import { injectionSlideContext } from '../constants'
+
+type Context = 'main' | RenderContext
+
+const props = defineProps<{
+  context: Context | Context[]
+}>()
+const { context } = props
+
+const currentContext = inject(injectionSlideContext)
+
+const shouldRender = computed(() => context instanceof Array ? context.some(contextMatch) : contextMatch(context))
+
+function contextMatch(context: Context) {
+  if (context === currentContext)
+    return true
+  if (context === 'main' && (currentContext === 'slide' || currentContext === 'presenter'))
+    return true
+  return false
+}
+</script>
+
+<template>
+  <slot v-if="shouldRender" />
+</template>
diff --git a/packages/client/constants.ts b/packages/client/constants.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
+import type { RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
@@ -9,6 +10,7 @@ export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-cli
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<SlidevContext> = Symbol('slidev-slidev-context')
 export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
+export const injectionSlideContext: InjectionKey<RenderContext> = Symbol('slidev-slide-context')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

diff --git a/packages/client/internals/Play.vue b/packages/client/internals/Play.vue
@@ -49,7 +49,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       @pointerdown="onClick"
     >
       <template #>
-        <SlidesShow />
+        <SlidesShow context="slidesshow" />
       </template>
       <template #controls>
         <div

diff --git a/packages/client/internals/Presenter.vue b/packages/client/internals/Presenter.vue
@@ -103,7 +103,7 @@ onMounted(() => {
           class="h-full w-full"
         >
           <template #>
-            <SlidesShow />
+            <SlidesShow context="presenter" />
           </template>
         </SlideContainer>
       </div>
@@ -120,6 +120,7 @@ onMounted(() => {
             :clicks-disabled="false"
             :class="getSlideClass(nextSlide.route)"
             :route="nextSlide.route"
+            context="previewNext"
           />
         </SlideContainer>
       </div>

diff --git a/packages/client/internals/SlideWrapper.ts b/packages/client/internals/SlideWrapper.ts
@@ -1,6 +1,6 @@
 import { useVModel } from '@vueuse/core'
 import { defineComponent, h, provide } from 'vue'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute } from '../constants'
+import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
 
 export default defineComponent({
   props: {
@@ -20,6 +20,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    context: {
+      type: String,
+      default: 'main',
+    },
     is: {
       type: Object,
       default: undefined,
@@ -38,6 +42,7 @@ export default defineComponent({
     clicksElements.value.length = 0
 
     provide(injectionRoute, props.route)
+    provide(injectionSlideContext, props.context)
     provide(injectionClicks, clicks)
     provide(injectionClicksDisabled, clicksDisabled)
     provide(injectionClicksElements, clicksElements)

diff --git a/packages/client/internals/SlidesOverview.vue b/packages/client/internals/SlidesOverview.vue
@@ -85,6 +85,7 @@ watchEffect(() => {
               :clicks-disabled="true"
               :class="getSlideClass(route)"
               :route="route"
+              context="overview"
             />
             <DrawingPreview :page="+route.path" />
           </SlideContainer>

diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
@@ -9,6 +9,8 @@ import GlobalTop from '/@slidev/global-components/top'
 import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
+defineProps<{ context: 'slide' | 'presenter' }>()
+
 // preload next route
 watch(currentRoute, () => {
   if (currentRoute.value?.meta && currentRoute.value.meta.preload !== false)
@@ -37,6 +39,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
       :clicks-disabled="false"
       :class="getSlideClass(route)"
       :route="route"
+      :context="context"
     />
   </template>
 

diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
@@ -55,3 +55,5 @@ export interface SlidevMarkdown {
   entries?: string[]
   themeMeta?: SlidevThemeMeta
 }
+
+export type RenderContext = 'slide' | 'overview' | 'presenter' | 'previewNext'