Is it possible to use this on a per-component basis?

[pixilz]

I would love to use this but have some restrictions that make installing it globally a bit of a chore. I was wondering if there was an easy way to make it so that it could be added on a per-component basis? (Using the directives option)

[justintaddei]

This is currently not possible, but could be done quite easily with a refactor :)

Options API:

import { createLocalWaveDirective } from 'v-wave'

export default {
  directives: {
    ...createLocalWaveDirective({/* global options */})
  }
}

Composition API:

<script setup>
const {wave: vWave} = createLocalWaveDirective({/* global options */})
</script>

Another approach could be to return both wave and vWave from createLocalWaveDirective() which would look like:

Options API:

import { createLocalWaveDirective } from 'v-wave'

const { wave } = createLocalWaveDirective({/* global options */})

export default {
  directives: {
    wave
  }
}

Composition API:

<script setup>
const { vWave } = createLocalWaveDirective({/* global options */})
</script>

I personally like the second option better because it avoids needing to rename the returned value.

Does this serve your purpose?

[justintaddei]

Actually, it would need to be on the default to avoid a breaking change for cjs users.

import VWave from 'v-wave'

const { wave } = VWave.createLocalWaveDirective({/* global options */})

export default {
  directives: {
    wave
  }
}

[pixilz]

That would fully serve my purposes yes!

[pixilz]

Let me know if there is anything I can do to help. I am not super familiar with creating vue plugins globally so some of the necessary steps are a bit difficult to figure out.

[justintaddei]

Thank you. I'm working on some strange issues with vue not registering the directive with the proper name when used locally. Once I get that sorted out I'll push a new beta release for you to test out before pushing to stable.

[justintaddei]

Please install the 1.5.0-beta.0 release with npm i v-wave@beta and let me know if you experience any issues.

If you're using the Composition API, use as follows:

<script>
import VWave from 'v-wave'
const { vWave, vWaveTrigger } = VWave.createLocalWaveDirective({/* global options */})
</script>
<template>
   <button v-wave>Click me!</button>
</template>

If you're using the Options API:

<script>
import VWave from 'v-wave'
const { wave, waveTrigger } = VWave.createLocalWaveDirective({/* global options */})

export default {
  directives: {
      wave,
      waveTrigger
  }
}
</script>
<template>
  <button v-wave>Click me!</button>
</template>

[pixilz]

I did get it working, though, since I'm using vue2 I did have to override the second parameter.

import VWave from 'v-wave';

const { wave, waveTrigger } = VWave.createLocalWaveDirective({
  initialOpacity: 0.4,
  finalOpacity: 0.2,
  duration: 0.3
}, 'vue2');

Now I just need to figure out a way to trigger a centered ripple on enter key press (which I can probably figure out fairly easily). Thank you so much for your work, help, and time!

[justintaddei]

Fantastic! Sorry, I should've mentioned the existence of the second param. I looked into detecting the version automatically for the local directive but, unfortunately, it doesn't seem to be possible.

[justintaddei]

I'll ping this issue when the release is finalized.

[justintaddei]

@pixilz, @shadjiu this feature is able with stable release v1.5.0

Please run npm install v-wave@latest to update.

Docs can be found here: https://github.com/justintaddei/v-wave#registering-the-directive-locally

[shadjiu]

@justintaddei thanks a lot