feat: enhance v-clicks component

Author: antfu

docs/guide/animations.md

@@ -65,7 +65,7 @@ clicks: 10
 
 ### Ordering
 
-By passing the click index to your directives, you can customize the order of the revealing
+Passing the click index to your directives, you can customize the order of the revealing
 
 ```md
 <!-- "1" go first -->
@@ -81,6 +81,13 @@ By passing the click index to your directives, you can customize the order of th
 <div v-click="1">3</div>
 ```
 
+```md
+<!-- visible after 3 clicks -->
+<v-click at="3">
+  <div>Hi</div>
+</v-click>
+```
+
 ## Transitions
 
-The built-in support for slides and elements transitions is NOT provided in the current version. We are planned add it in the next major version. Before that, you can still use your custom styles and libraries to do that.
+The built-in support for slides and elements transitions is NOT provided in the current version. We are have planned to add it in the next major version. Before that, you can still use your custom styles and libraries to do that.

packages/client/builtin/VClick.ts

@@ -2,7 +2,12 @@ import { createVNode, defineComponent } from 'vue'
 import VClicks from './VClicks'
 
 export default defineComponent({
+  props: {
+    at: {
+      type: [Number, String],
+    },
+  },
   render() {
-    return createVNode(VClicks, { every: 99999 }, { default: this.$slots.default })
+    return createVNode(VClicks, { every: 99999, at: this.at }, { default: this.$slots.default })
   },
 })

packages/client/builtin/VClicks.ts

@@ -1,18 +1,23 @@
 import { toArray } from '@antfu/utils'
-import { defineComponent, Directive, h, isVNode, resolveDirective, VNode, withDirectives } from 'vue'
+import { defineComponent, Directive, h, isVNode, resolveDirective, VNode, VNodeArrayChildren, withDirectives } from 'vue'
 
 export default defineComponent({
   props: {
     every: {
       type: Number,
       default: 1,
     },
+    at: {
+      type: [Number, String],
+    },
   },
   render() {
     const click = resolveDirective('click')!
     const after = resolveDirective('after')!
 
-    function applyDirective(node: VNode, directive: Directive) {
+    const applyDirective = (node: VNode, directive: Directive, delta: number) => {
+      if (this.at != null)
+        return withDirectives(node, [[directive, +this.at + delta]])
       return withDirectives(node, [[directive]])
     }
 
@@ -23,12 +28,24 @@ export default defineComponent({
 
     defaults = toArray(defaults)
 
+    const mapChildren = (children: VNodeArrayChildren) => {
+      return children.map((i, idx) =>
+        isVNode(i)
+          ? applyDirective(
+            h(i),
+            idx % this.every === 0 ? click : after,
+            Math.floor(idx / this.every),
+          )
+          : i,
+      )
+    }
+
     // handle ul list
     if (defaults.length === 1 && defaults[0].type === 'ul' && Array.isArray(defaults[0].children)) {
-      defaults[0].children = defaults[0].children.map((i, idx) => isVNode(i) ? applyDirective(h(i), idx % this.every === 0 ? click : after) : i)
+      defaults[0].children = mapChildren(defaults[0].children)
       return defaults
     }
 
-    return defaults.map((i, idx) => applyDirective(h(i), idx % this.every === 0 ? click : after))
+    return mapChildren(defaults)
   },
 })

packages/client/internals/Editor.vue

@@ -62,7 +62,6 @@ onMounted(() => {
     {
       mode: 'markdown',
       lineWrapping: true,
-      // @ts-expect-error
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
     },
@@ -80,7 +79,6 @@ onMounted(() => {
     {
       mode: 'markdown',
       lineWrapping: true,
-      // @ts-expect-error
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
     },