Merge pull request #729 from justintaddei/justintaddei/issue544

feat: option to stop propagation of waves to parent elements

.github/workflows/commitlint.yml

@@ -7,23 +7,24 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - uses: pnpm/action-setup@v2
         with:
           version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-          registry-url: 'https://registry.npmjs.org'
           cache: "pnpm"
       - name: Install commitlint
         run: |
-          npm install conventional-changelog-conventionalcommits
-          npm install commitlint@latest
+          pnpm add conventional-changelog-conventionalcommits
+          pnpm add commitlint@latest
 
       - name: Validate current commit (last commit) with commitlint
         if: github.event_name == 'push'
-        run: npx commitlint --last --verbose
+        run: pnpm exec commitlint --last --verbose
 
       - name: Validate PR commits with commitlint
         if: github.event_name == 'pull_request'
-        run: npx commitlint --from ${{ github.event.pull_request.head.sha }}~${{ github.event.pull_request.commits }} --to ${{ github.event.pull_request.head.sha }} --verbose
+        run: pnpm exec commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose

README.md

@@ -74,6 +74,7 @@ After installing and registering the plugin, this is all you need to get started
     - [trigger](#trigger)
     - [disabled](#disabled)
     - [respectDisabledAttribute](#respectdisabledattribute)
+    - [stopPropagation](#stoppropagation)
     - [tagName](#tagname)
   - [Using triggers](#using-triggers)
 - [Advanced](#advanced)
@@ -251,6 +252,7 @@ export default {
 | [trigger](#trigger)                                   |     `"auto"`     | `string \| boolean \| "auto"` |
 | [disabled](#disabled)                                 |     `false`      | `boolean`                     |
 | [respectDisabledAttribute](#respectdisabledattribute) |      `true`      | `boolean`                     |
+| [stopPropagation](#stoppropagation)                   |     `false`      | `boolean`                     |
 | [tagName](#tagname)                                   |     `"div"`      | `string`                      |
 
 ### Details
@@ -543,6 +545,13 @@ export default {
 <button v-wave="{respectDisabledAttribute: false}" disabled>Click me!</button>
 ```
 
+#### stopPropagation
+
+- **type:** `boolean`
+- _default:_ `false`
+
+> Prevents the `pointerdown` event from propagating to parent elements.
+
 #### tagName
 
 - **type:** `string`

src/__snapshots__/options.test.ts.snap

@@ -12,6 +12,7 @@ exports[`has documented default options 1`] = `
   "finalOpacity": 0.1,
   "initialOpacity": 0.2,
   "respectDisabledAttribute": true,
+  "stopPropagation": false,
   "tagName": "div",
   "trigger": "auto",
 }

src/index.ts

@@ -48,6 +48,8 @@ const createDirective = (
 
         const options = { ...globalOptions, ...optionMap.get(el) }
 
+        if (options.stopPropagation) event.stopPropagation()
+
         if (options.trigger === false) return wave(event, el, options)
 
         if (triggerIsID(options.trigger)) return

src/options.ts

@@ -101,6 +101,14 @@ interface IVWaveDirectiveOptions {
    * true
    */
   respectDisabledAttribute: boolean
+
+  /**
+   * Prevents the pointerdown event from propagating to parent elements
+   *
+   * @default
+   * false
+   */
+  stopPropagation: boolean
 }
 
 interface IVWavePluginOptions extends IVWaveDirectiveOptions {
@@ -136,6 +144,7 @@ const DEFAULT_PLUGIN_OPTIONS: IVWavePluginOptions = {
   tagName: 'div',
   disabled: false,
   respectDisabledAttribute: true,
+  stopPropagation: false,
 }
 
 export { DEFAULT_PLUGIN_OPTIONS, type IVWavePluginOptions, type IVWaveDirectiveOptions }