fix(v-click-hide): the route for v-click-hide (#276)

slidevjs · Aug 11, 2021 · b499243 · b499243
1 parent 7508ae3
commit b499243
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/cypress/fixtures/basic/slides.md b/cypress/fixtures/basic/slides.md
@@ -102,3 +102,14 @@ Left
   <div v-click.hide="4">D</div>
   <v-click hide><div>E</div></v-click>
 </div>
+
+---
+
+# Page 10
+
+<div class="cy-content-hide">
+  <div v-click-hide>A</div>
+  <div v-click-hide>B</div>
+  <div v-click>C</div>
+  <div v-click-hide>D</div>
+</div>
diff --git a/cypress/integration/examples/basic.spec.ts b/cypress/integration/examples/basic.spec.ts
@@ -124,5 +124,41 @@ context('Basic', () => {
     cy
       .url()
       .should('eq', 'http://localhost:3030/10')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy
+      .url()
+      .should('eq', 'http://localhost:3030/10?clicks=1')
+
+    cy.get('.cy-content-hide .slidev-vclick-target:not(.slidev-vclick-hidden)')
+      .should('have.text', 'BD')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy.get('.cy-content-hide .slidev-vclick-target:not(.slidev-vclick-hidden)')
+      .should('have.text', 'D')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy.get('.cy-content-hide .slidev-vclick-target:not(.slidev-vclick-hidden)')
+      .should('have.text', 'CD')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy
+      .url()
+      .should('eq', 'http://localhost:3030/10?clicks=4')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy
+      .url()
+      .should('eq', 'http://localhost:3030/11')
   })
 })
diff --git a/packages/client/modules/directives.ts b/packages/client/modules/directives.ts
@@ -162,15 +162,24 @@ export default function createDirectives() {
           if ((isPrintMode.value && !isPrintWithClicks.value) || dirInject(dir, injectionClicksDisabled)?.value)
             return
 
+          const elements = dirInject(dir, injectionClicksElements)
           const clicks = dirInject(dir, injectionClicks)
 
+          const prev = elements?.value?.length || 0
+
+          if (elements && !elements?.value?.includes(el))
+            elements.value.push(el)
+
           el?.classList.toggle(CLASS_VCLICK_TARGET, true)
 
           if (clicks) {
             watch(
               clicks,
               () => {
-                const hide = (clicks?.value || 0) > dir.value
+                const c = clicks?.value ?? 0
+                const hide = dir.value != null
+                  ? c >= dir.value
+                  : c > prev
                 el.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
                 el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, hide)
               },