feat: allow Text as VClick's top-level child (#1214) (#1285)

Author: kermanx

packages/client/builtin/VClick.ts

@@ -4,7 +4,8 @@
  * Learn more: https://sli.dev/guide/animations.html#click-animations
  */
 
-import { createVNode, defineComponent } from 'vue'
+import type { PropType, VNode } from 'vue'
+import { Text, defineComponent, h } from 'vue'
 import VClicks from './VClicks'
 
 export default defineComponent({
@@ -21,17 +22,28 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    wrapText: {
+      type: Function as PropType<(text: VNode) => VNode>,
+      default: (text: VNode) => h('span', text),
+    },
   },
   render() {
-    return createVNode(
+    return h(
       VClicks,
       {
         every: 99999,
         at: this.at,
         hide: this.hide,
         fade: this.fade,
       },
-      { default: this.$slots.default },
+      {
+        default: () =>
+          this.$slots.default?.().map(v =>
+            v.type === Text
+              ? this.wrapText(v)
+              : v,
+          ),
+      },
     )
   },
 })