Possibility to choose the toggle event

[The-BlackWidow]

Hi !
I was wondering if you could maybe add the possibility to set toggle to true on mouseover ?

Thank you.

[Edujugon]

Hi @The-BlackWidow ,

I've just created a new branch adding this feature. Since I'm still not 100% sure that this a good practice to modify the event listeners after the component's DOM is compiled I haven't merged to master yet..

Anyway, you can try it out, it's working fine :)

Type in console:

npm install https://github.com/PygmySlowLoris/vue-fab.git#feature/dynamic-events --save

Then you just have to add a new available prop called main-event-toggle and set it with the whatever event you want. mouseover

<fab
   ...
   main-event-toggle="mouseover"
></fab>

Let me know if that worked for you.

[Edujugon]

I'm keeping this ticket opened to see if there are more people that would like this feature in a future release.. If so, we'll merge it :)

👍 Thumbs up?

[The-BlackWidow]

I found a workaround but I will gladly test this branch to give you feedback =) !

[Edujugon]

Cool!
Awaiting for your feedback :)

[DrowningElysium]

@Edujugon

Module build failed: Error: Couldn't find preset "latest" relative to directory "C:\\Code\\reaweb\\node_modules\\vue-fab"
    at C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Code\reaweb\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Code\reaweb\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\Code\reaweb\node_modules\babel-loader\lib\index.js:50:20)
    at C:\Code\reaweb\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\Code\reaweb\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)

 @ ./node_modules/vue-fab/src/FAB.vue 9:21-395
 @ ./node_modules/vue-fab/src/index.js
 @ ./resources/assets/js/main.js
 @ multi ./resources/assets/js/main.js ./resources/assets/sass/app.scss

This is the error I get when compiling with Laravel mix. I am not able to find what is creating this error.

Edit: alright found the issue babel/babel#6558.

Now some feedback on how the current functionality works:

• When I hover it takes to long to open the options.
• When I hover away from the element it doesn't close.

@The-BlackWidow could you share your way around this?

[Edujugon]

Hi @DrowningElysium ,

Are you trying the above mentioned branch? or the latest release?

Try to run this in the terminal:
npm install --save-dev babel-preset-latest

And then in your .babelrc (root directory) add this:

{
    "presets": [
        ["latest", { "modules": false }]
    ]
}

let me know if that worked..

[DrowningElysium]

I used the branch mentioned above, but as I am using Laravel mix which should do all these things for me. I am not sure how to manage this.

[Edujugon]

I will try to update the package to work with babel-preset-env instead of the "latest" one.. But since I can't provide a ETA, just try to do the following steps:

Run in you terminal:
npm install --save-dev babel-preset-latest

Create a .babelrc file in your project directory. and add this:

{
    "presets": [
        ["latest", { "modules": false }]
    ]
}

Then try again.

[bilogic]

One better behaviour could be to open it on mouse over, but require a click to close it