-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Consider to switch to maintained version of vue tabs #4
Comments
Tried to solve it with the first approach, but instead of a random id I keep track of the ids used and add a suffix with the count (idValue-count). The logic is that always an id attribute is passed to the tab component, so it does not use the name attribute as the id. I still use the name value if the id is not passed but adding a suffix to make it unique. This behaviour is not enabled by default but it can be enabled by passing an option when registering the plugin plugins: [
[ 'tabs', { dedupeIds: true } ]
] Just released a patch version, can you try it and confirm if it solves the problem. vue-tabs-component being abandoned is a problem and should be replaced, I will start working on it in the next days. |
Cool, thanks! I will try it out in the next days. Actually I didn't see that you can pass Another though: Even if the ids are fixed it would be nice to still have some sync available. So if you have lot of code snippets with tabs you probably don't want to switch in every code snippet the tab. Here is a demo: https://jhildenbiddle.github.io/docsify-tabs/#/?id=sync We could use the title to sync the tabs. But I guess this require also code changes in the vue-tabs-component. To be clear, I suggest to provide this functionality with disabled IMHO using useUrlFragment is really bad UX. If you want to go back (browser back) you need to go back all your tabs history. |
I've installed the latest version (0.2.2) and using this config
But it doesn't work. This ids are still not not unique (like before). I've tried to debug it. I've added this line
to this file: vuepress-plugin-tabs.cjs.js But I didn't see any output, neither in the terminal nor in the browser. I've truncated the file and then the tabs didn't work. Using the
|
Just tried the upgrade on a new installation and seems to be working. Do you use any other plugin that I should try with? To develop the plugin I use the yarn link functionality, running yarn dev on the project so vuepress-plugin-tabs.cjs.js is automatically build. In the vuepress installation for the updates to take effect I have to restart the vuepress dev server and also save the markdown file to cause a rebuild of the assets. I am not sure if it is the link functionality or the build process of vuepress that causes the updates not to be applied immediately. |
Okay, just tested on another project, it's working fine there: https://hungry-yonath-bfd0a1.netlify.com/#first-header In my real project I just have another plugin I will try to turn it off tomorrow. |
Currently the component for tabs is abandon: https://github.com/spatie/vue-tabs-component
And it's broken if you use 2 tabs with the same name. You're doing it right and passing a name attribute which doesn't need to be unique. But the tab component is converting it into a id.
So it's not proper HTML, but more important if you rely on the built-in deeplink mechanism it doesn't work anymore, since it picks just the first occurrence of the id.
So solve this there are two solutions:
hash
attribute tojavascript:;
because '#' doesn't work (all tabs are enabled otherwise at the same time)The text was updated successfully, but these errors were encountered: