slidev-clicks
adds some utility functions for handling clicks in Slidev that makes it easier to process and handle click events.
First, install slidev-clicks
using your favorite package manager:
npm install slidev-clicks
Then, create a vite.config.js
file in the root of your Slidev project and add the Vite plugin for slidev-clicks
into the "plugins" array:
import { defineConfig } from 'vite'
import slidevClicks from 'slidev-clicks/vite-plugin'
export default defineConfig({
plugins: [
slidevClicks()
]
})
slidev-clicks
needs a corresponding Vite plugin because it injects a globalPromise
patch in order to support stopping asynchronous clicks when a subsequent click event is activated. See the "Internals" section for more information.
Then, in your Vue components, you can import the utilities from slidev-clicks
:
<script setup lang='ts'>
import { noopStep, refClickStep, useSlidevClicks } from 'slidev-clicks'
import { ref } from 'vue'
const showNumFreeMeetings = ref(false)
const showNumPaidMeetings = ref(false)
const showSuccessRate = ref(false)
const showAverageMeetingLength = ref(false)
const showRevenue = ref(false)
useSlidevClicks([
noopStep(),
refClickStep(showNumFreeMeetings),
refClickStep(showNumPaidMeetings),
refClickStep(showSuccessRate),
refClickStep(showAverageMeetingLength),
refClickStep(showRevenue)
])
</script>
<template>
<div class="flex flex-col">
<slide-title title="Since our launch..." />
<div
class="flex-1 flex flex-col gap-10 pt-10 px-24 items-stretch justify-between items-center justify-center justify-items-center"
>
<div class="flex flex-row justify-between">
<div v-show='showNumFreeMeetings'>
Free Meetings
</div>
<div v-show='showNumPaidMeetings'>
Paid Meetings
</div>
<div v-show="showSuccessRate">
Success Rate
</div>
</div>
<div class="flex flex-row">
<div class="flex-1"></div>
<div v-show='showAverageMeetingLength'>
Average Meeting Length
</div>
<div class="flex-1"></div>
<div v-show='showRevenue'>
Revenue
</div>
<div class="flex-1"></div>
</div>
</div>
</div>
</template>
A Vue composable function (should be called either in a setup
function or at the top level of <script setup>
) that takes an array of SlidevClickStep
s where the step index represents the active state/actions that correspond with that click (e.g. the step at index 1 represents the state/actions after 1 click).
These steps are always executed in order, so if you load the slide page on click 2, useSlidevClicks
will execute step 0 to step 2 in order.
interface SlidevClickStep {
setActive(): void
setInactive(): void
onEnter?(): Promisable<void>
onLeave?(): Promisable<void>
}
A synchronous function that will get called whenever the active click becomes greater or equal to the step index.
A synchronous function that will get called whenever the active click is less than the step index.
An function that gets called when the click equals the current step index moving forward (i.e. when the user clicks the slide).
An function that gets called when the click equals the current step index moving backwards (i.e. when the user moves one slide back).
TODO: Write an explanation about the Promise
patch.