feat: v-clicks

Author: antfu

slides.md

@@ -10,6 +10,10 @@ Pattens and tips for writing good composable logic in Vue
 Anthony Fu
 </div>
 
+<div class="abs-bl m-14 text-sm opacity-50">
+Apr. 28th, 2021.
+</div>
+
 ---
 layout: cover
 ---
@@ -22,7 +26,7 @@ Creator of VueUse, i18n Ally and Type Challenges.<br>
 A fanatical full-time open sourceror.<br>
 </div>
 
-<div class="my-10 grid grid-cols-[40px,1fr] w-min gap-y-4 all-child:block all-child:my-auto">
+<div v-click class="my-10 grid grid-cols-[40px,1fr] w-min gap-y-4 all-child:block all-child:my-auto">
   <ri-github-line class="opacity-50"/>
   <div><a href="https://github.com/antfu" target="_blank">antfu</a></div>
   <ri-twitter-line class="opacity-50"/>
@@ -103,6 +107,8 @@ foo = 1
 bar = 1 // ts-error
 ```
 
+<div v-click>
+
 ### Pros
 
 - More explicit, with type checking
@@ -112,6 +118,8 @@ bar = 1 // ts-error
 
 - `.value`
 
+</div>
+
 </div><div>
 
 # Reactive
@@ -126,6 +134,8 @@ foo.prop = 1
 bar.prop = 1
 ```
 
+<div v-click>
+
 ### Pros
 
 - Auto unwrapping (a.k.a `.value` free)
@@ -136,6 +146,7 @@ bar.prop = 1
 - Destructure loses reactivity
 - Need to use callback for `watch`
 
+</div>
 </div></div>
 
 ------
@@ -146,6 +157,8 @@ Get rid of `.value` for most of the time.
 
 <div class="grid grid-cols-2 gap-x-4">
 
+<v-clicks :every='2'>
+
 - `watch` accepts ref as the watch target, and returns the unwrapped value in the callback
 
 ```ts
@@ -179,6 +192,8 @@ data.foo // 'bar'
 
 </div>
 
+</v-clicks>
+
 </div>
 
 ------
@@ -252,6 +267,8 @@ layout: center
 
 # Think as "Connections"
 
+The `setup()` only runs **once** on component initialization, to construct the relations between your state and logic.
+
 - Input -> Output
 - Spreadsheet formuala
 
@@ -275,7 +292,7 @@ layout: center
 
 ### Usage
 
-<v-click>
+<v-clicks :every='3'>
 
 <div class="my-auto leading-6 text-base opacity-75">
 Plain function
@@ -289,7 +306,10 @@ function add(a: number, b: number) {
 ```
 
 ```ts
-add(1, 2) // 3
+let a = 1
+let b = 2
+
+let c = add(a, b) // 3
 ```
 
 <div class="my-auto leading-6 text-base opacity-75">
@@ -331,7 +351,7 @@ const c = add(a, 5)
 c.value // 6
 ```
 
-</v-click>
+</v-clicks>
 
 </div>
 
@@ -376,7 +396,7 @@ name.value = 'Hi' // Hi - World
 
 </div></div>
 
-<div class="abs-b mx-14 my-12">
+<div v-click class="abs-b mx-14 my-12">
 <VueUse name="useTitle"/>
 </div>
 
@@ -390,9 +410,27 @@ A custom type helper
 type MaybeRef<T> = Ref<T> | T
 ```
 
-<br>
+<v-click>
+
+In VueUse, we use this helper heavily to support optional reactive arguments
+
+```ts
+export function useTimeAgo(
+  time: MaybeRef<Date | number | string>,
+  options: TimeAgoOptions = {},
+) {
+  return computed(() => someFormating(unref(time)))
+}
+```
+
+```ts
+useTimeAgo(1618478282830) // 5 mins ago
 
-In VueUse, we use this helper heavily to support 
+const time = ref('2021-04-28')
+const timeString = useTimeAgo(time) // Today
+```
+
+</v-click>
 
 ------
 

src/components/VClick.ts

@@ -1,24 +1,8 @@
-import { defineComponent, resolveDirective, VNode, withDirectives } from 'vue'
+import { createVNode, defineComponent } from 'vue'
+import VClicks from './VClicks'
 
 export default defineComponent({
   render() {
-    const click = resolveDirective('click')!
-
-    function applyDirective(node: VNode) {
-      // @ts-expect-error
-      if (node.dirs?.find(i => i.dir.name && ['v-click', 'v-after'].includes(i.dir.name)))
-        return node
-      return withDirectives(node, [[click]])
-    }
-
-    const defaults = this.$slots.default?.()
-
-    if (!defaults)
-      return
-
-    if (Array.isArray(defaults))
-      return defaults.map(i => applyDirective(i))
-
-    return applyDirective(defaults)
+    return createVNode(VClicks, { every: 99999 }, { default: this.$slots.default })
   },
 })

src/components/VClicks.ts

@@ -0,0 +1,30 @@
+import { defineComponent, Directive, resolveDirective, VNode, withDirectives } from 'vue'
+
+export default defineComponent({
+  props: {
+    every: {
+      default: 1,
+    },
+  },
+  render() {
+    const click = resolveDirective('click')!
+    const after = resolveDirective('after')!
+
+    function applyDirective(node: VNode, directive: Directive) {
+      // @ts-expect-error
+      if (node.dirs?.find(i => i.dir.name && ['v-click', 'v-after'].includes(i.dir.name)))
+        return node
+      return withDirectives(node, [[directive]])
+    }
+
+    const defaults = this.$slots.default?.()
+
+    if (!defaults)
+      return
+
+    if (Array.isArray(defaults))
+      return defaults.map((i, idx) => applyDirective(i, idx % this.every === 0 ? click : after))
+
+    return applyDirective(defaults, click)
+  },
+})

src/layouts/default.vue

@@ -67,5 +67,9 @@
   td, th {
     @apply p-2 py-3;
   }
+
+  b, strong {
+    @apply font-600;
+  }
 }
 </style>

src/modules/directives.ts

@@ -23,7 +23,7 @@ export const install: UserModule = ({ app }) => {
         clickCurrent,
         () => {
           const show = clickCurrent.value > prev
-          el.classList.toggle('hidden', !show)
+          el.classList.toggle('!opacity-0', !show)
         },
         { immediate: true },
       )
@@ -43,8 +43,8 @@ export const install: UserModule = ({ app }) => {
       watch(
         clickCurrent,
         () => {
-          const show = clickCurrent.value > prev
-          el.classList.toggle('hidden', !show)
+          const show = clickCurrent.value >= prev
+          el.classList.toggle('!opacity-0', !show)
         },
         { immediate: true },
       )

windi.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
       'slides.md',
     ],
   },
-  safelist: 'hidden',
+  safelist: '!opacity-0',
   darkMode: 'class',
   preflight: {
     includeAll: true,