feat: support forward: and backward: variant in UnoCSS for direct…

…ion-based styling
slidevjs · Feb 24, 2024 · cf80a07 · cf80a07
1 parent 0d6864b
commit cf80a07
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
@@ -3,7 +3,7 @@ import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { isPrintMode } from '../logic/nav'
+import { isPrintMode, navDirection } from '../logic/nav'
 
 const props = defineProps({
   width: {
@@ -55,6 +55,8 @@ const style = computed(() => ({
 
 const className = computed(() => ({
   'select-none': !configs.selectable,
+  'slidev-nav-go-forward': navDirection.value > 0,
+  'slidev-nav-go-backward': navDirection.value < 0,
 }))
 
 if (props.isMain) {
@@ -69,8 +71,8 @@ provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="className">
-    <div id="slide-content" :style="style">
+  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
+    <div id="slide-content" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
@@ -77,10 +77,12 @@ function onAfterLeave() {
 
 <style scoped>
 #slideshow {
-  @apply h-full;
+  height: 100%;
 }
 
 #slideshow > div {
-  @apply h-full w-full absolute;
+  display: absolute;
+  height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
@@ -8,6 +8,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 
 export default defineConfig({
   safelist: [
@@ -28,6 +29,13 @@ export default defineConfig({
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
   },
+  // Slidev Specific Variants, probably extrat to a preset later
+  variants: [
+    // `forward:` and `backward:` variant to selectively apply styles based on the direction of the slide
+    // For example, `forward:text-red` will only apply to the slides that are navigated forward
+    variantMatcher('forward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+    variantMatcher('backward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+  ],
   presets: [
     presetUno(),
     presetAttributify(),