how do you programmatically set the total number of clicks for a page?

[gureckis]

currently you can set the number of clicks in the front matter. however, if I'm handling clicks inside a component how do I set the number of clicks? currently unless I add the total clicks to the front matter, then my slide advances after 1 click even if the component itself it designed to handle a variable number of clicks. I tried looking inside the injected $clicks variable but don't see an easy way to set the total (there is only a getter for total?). thanks for pointers!

[kermanx]

The clicks option in slide's frontmatter is a possible way.

[gureckis]

yes thanks, but what if the number of clicks depends on some runtime logic internal to the component? i was trying to find how you'd set it via code. especially relevant when you are doing something like v-if='$clicks<3 inside your component. the inside of the component expects at least three clicks but you'd have to make sure to allocate enough in the front matter of your slide. that means the logic of the component is less self contained.

[kermanx]

Here is a way:

import { useSlideContext } from '@slidev/client'

const { $clicksContext: clicks } = useSlideContext()
const id = makeId()

onMounted(() => {
  clicks.register(id, { max: 123456 })
})

onUnmounted(() => {
  clicks.unregister(id)
})

[gureckis]

ok, awesome yeah this is what I was wondering about! what is makeId()

[kermanx]

You can import it from '@slidev/client/utils'. In fact, it just generates a random string

[gureckis]

Thanks to @kermanx I got this working with one minor clarification. Putting full notes here in case it is useful to someone in the future.

So I have some custom component call MyComponent.vue in components/. The script setup for this looks like

<script setup>
const props = defineProps({
  people: {
    default: 'nothing',
  },
})

import { onMounted, onUnmounted } from 'vue'
import { useSlideContext } from '@slidev/client'
import { makeId } from '@slidev/client/logic/utils.ts'

const { $clicksContext: clicks } = useSlideContext()
const id = makeId()


onMounted(() => {
  clicks.register(id, {
    max: props.people.length - 1,
  })
})

onUnmounted(() => {
  clicks.unregister(id)
})
</script>

Then in my template I'm like stepping through my people prop which is an array

<template>
  <div>
    <template v-for="(person, index) in people">
      <div v-if="index == clicks.current">
         // do something with person here which will be visible only on clicks.current
      </div>
    </template>
  </div>
</template>

The only not that stumped me was that I needed to refer to the clicks by clicks.current in my template.

[kermanx]

The only not that stumped me was that I needed to refer to the clicks by clicks.current in my template.

This is because after using useSlideContext in the file, Slidev will not inject const {...} = useSlideContext() automatically to avoid confliction

[gureckis]

Thanks so much for the advice!