Recent Changes

[grantcarthew]

Hey @hal0gen

As you will see I have pushed and merged the changes to remove the mixin.
Couple of points:

• There is a bug in the Magellan js that causes issues if you destroy it. See Foundation Magellan JavaScript Issue #16 for more details. I haven't opened an issue with Zurb Foundation-Sites yet. Needs a little further testing before doing that.
• I used the JavaScript instantiation code new Foundation rather than call $element.foundation() on most of the components. See below points for exceptions.
• Every component has an options being set in code mostly so anyone using the template can understand how to change them.
• I used element Ids for all components except the Tooltip. It makes more sense to use the has-tip class.
• The Tooltip code has a bug so I am not using the new Foundation.Tooltip call. Read the comments on the Tooltip component
• There is also a bug in the Reveal component that caused the Click me for a modal element to no longer open the modal. I decided to add a openReveal() method on the Vue component. Read the comments in the file.
• The Dropdown component is using two references to initialize the dropdowns. I don't know if this is a good idea or not.
• Checkout the Slider component. The event registration code is neat in my opinion.

Considering that this project is a template that needs customization by the user, I believe the changes made here are valid. That said if you think there is a better way to initialize something then I will not be offended if you change them.

[grantcarthew]

I just upgraded all the dependency packages also.

9030a87

[hal0gen]

Hi there, good work, still a lot to be worked out (but there's still to be worked out on Zurb Foundation as well, apparently...). Some thoughts:

• I like the idea of having methods. Ideally, Foundation components could become pure Vue components (or directives, in some cases). As for the dropdown, I think 2 references are correct, since there are 2 dropdowns (it's ugly though, I agree).
• Having components with props and methods could be a step towards standardizing Foundation. Every component could use the most appropriate Javascript code (new Foundation vs $(document).foundation() but we could have a uniform API for dealing with every piece of UI
• With respect to the options, they could just be props on the component. So far this was started as a proof of principle. Being able to export drop-in components would make it much more useful, although the framework initialization would still remain complicated.

What do you think about that?

[grantcarthew]

Exposing methods on the component sound like a great idea. Not for this template though.

Options as properties on the component also sounds like a great idea. That said, it would mean keeping minor property updates in sync with the Foundation framework.

I suspect the JS instantiation and destroy code is rarely used outside of this project and the work I did yesterday. Hence the bugs I am finding. All of this will need changing once the new Module system is published.

With regards to the discrete components, could the foundation js be packaged as a prerequisite to using the components.

Eg. To use the foundation vue components you first need to install the vue-foundation-js module.

[hal0gen]

Maybe a Vue plugin? The guide does not talk about component libraries but this is exactly how Element works. The Element guide says you still need to import the css manually, so we might have the same problem. Anyway, I think a plugin simply packaging FoundationJS together with a library of components could be useful enough.

[IamManchanda]

Hey @grantcarthew @hal0gen ....

Still a lot to be worked out (but there's still to be worked out on Zurb Foundation as well, apparently...)

Can you guys break into points what needs to be work out within the foundation framework itself.
Please let me know and i will try my level best to help you guys connecting the thought and threads from you to Yeti's !

---

BTW Foundation is currently working on being accesible to every framework
and Move to webpack is one such move ahead foundation/foundation-sites#9965

[grantcarthew]

Hi @IamManchanda.
@hal0gen was talking about #16 which is now fixed in a PR on the foundation-sites repo: foundation/foundation-sites#10050

There are other issues though:

• Tooltip: [Tooltips] Instantiating tooltips recommended way doesn't seem to work (Meteor) foundation/foundation-sites#7554
• The reveal has a bug. Read the comments inline. This may be an issue with Vuejs or Foundation, not sure. When I had the reveal using the data-open attribute in html on the <a> element, it worked once then failed. Again I think this has something to do with the distroy being used in the Vuejs hooks.

They are the only other issues I have found.

[grantcarthew]

Hey @hal0gen,
I recently read an article (below ref) about extending components in Vuejs.
I was wondering if this could work for Foundation init etc.

Reference:
Vue.js Docs
Extending VueJS Components

This is probably worth visiting post Foundation 6.4