j3-tech / vue-tree-navigation Goto Github PK
View Code? Open in Web Editor NEWVue.js tree navigation with vue-router support
Home Page: https://vue-tree-navigation.j3-tech.com
License: MIT License
Vue.js tree navigation with vue-router support
Home Page: https://vue-tree-navigation.j3-tech.com
License: MIT License
Is there a way to integrate router functionality? Instead of using plain old a
tags?
Otherwise a very promising library.
List is actually only a part of level now, after semantic fixes. The component should be renamed to be more descriptive.
Hello,
thank you for the great plugin.
I have one feature request and that is to allow for a link to become disabled and cloned into the child tree.
What I mean by this is a situation, when the vue-tree-navigation is used as a navigation on mobile devices. How do you open a child tree of a link, which is actually a link itself? On desktop that's not a problem but on mobiles, as soon as you click on the link to open the child tree, a page belonging to the link will load.
I don't think that's desirable. What I suggest is a prop or a setting, which will mark that "parent" link to be disabled (and becomes a toggler) and cloned in to the child tree. So when you actually click on it, the child tree will open and the "parent" link will sit on top acting as a normal link.
Thanks
How can I specify that paths are absolute and not relative vue-router paths when programmatically generating the items?
I am not sure about this but a little experiment would be useful because when someone needs the navigation based on routes only (no elements), routes config structure must be projected to items
structure and they are very similar. The optional auto mode could solve the issue with two (almost) same arrays and save maintenance time spent on projects using the tree nav.
This seems like a continuation of issue #5:
Suppose I have a structure like this:
When visiting Leaf Item no. 1 directly by entering its URL in the browser, Parent Group is automatically expanded as I would expect.
When visiting Leaf Item no. 2 directly, nothing is expanded. I would expect both Parent Group and Child Group to be expanded.
When I set autoOpenLevel to 1, Child Group gets expanded correctly. If I had other groups next to parent group, they would get expanded as well which is not what I want.
I am using manually defined items.
hi,
first of all, it's an amazing component, clean router integration.
ok, I would like to close other branchs when I open a point on the same level. could this be done actually?
regards
I try to use the tree-navigation-component.
I include it via the script tag at the end of the body in the html
`<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-tree-navigation.js"></script>
In vue-app.uebung.js, when I say
console.log(VueTreeNavigation.template)
it gives me undefined.
When I include the component somewhere, it give me the error Component is missing template or render functioin.
When I add the line
VueTreeNavigation.template = "<div>Hello, my name is Florian</div>
then the error disappears.
I am using Vue3. What do I do wrong?
and thus release its code which can serve as an example itself since vue-tree-navigation is used there to generate the menu.
Only li
elements should be children of ul
Because it would be much better to style all level 4 items with .level-4
selector instead of ul > ul > ul > ul > ul
or something like this :)
It is possible to use a native browser installation ?
Via simple browser include ?
with router and without router
Clicking on the green arrow to expand or collapse tree children closes the menu on the mobile phone.
Is this intentional? I would prefer if the menu would not close on mobile after expanding the tree, because then you have to open it again to access the expanded children.
I would very much like to use your tree navigation as it is the best I have found for vue.js after several hours of searching.
Now you need to click on the ">" icon. This is not very suitable for mobile devices where the icon is small.
The group should open and the user should be redirected to the location at the same time. This should be a default behaviour. I'm not sure if this should be the only option available or whether people should have a possibility to change the behaviour.
Items with children are styled as bold by default.
I would like to remove it because it is not needed and assign a class to all items having children instead. The class should be documented so people can style these items easily.
It will be great if we can add option to activate item that match with certain URL that not define in list of item
'name' props
the default:
export default {
data() {
return {
items: [
{ name: 'Products',
children: [
{
name: 'Shoes',
path: 'shoes' ,
}
]
},
],
};
},
};
what if we want 'Shoes' item active if current URL is eg('shoes/detail/1358993' or '/shoes/popular'), maybe with settings like this:
export default {
data() {
return {
items: [
{ name: 'Products',
children: [
{
name: 'Shoes',
path: 'shoes' ,
otherPaths:[
'shoes/detail/[\\d]{1,20}', //using regex
'shoes/popular',
],
}
]
},
],
};
},
};
Hi, I wonder is there a simple way to add icon styling into these items links. I use vue-awesome but didn't know how to combine them, any suggestion to make the links look prettier, thanks.
Using /# should be enough
Hi
I am developing a desktop application based on Electron-vue and I am trying to use VueTreeNavigation on my app, however cannot solve this problem.
I see this warning message on Console of Electron application window.
[Vue warn]: Failed to mount component: template or render function not defined.
I have searched a lot on the internet to find a solution, but no success. And I even copied the source itself to my project and tried to run with it and again no success.
I saw some people saying that Vue project/modules for pure(?)/web are not suitable with Electron applications.
Can anyone give me a solution with this problem? or At least tell me a reason why it does not work?
Thank you
When returning more than one document in a 'Tree' collection, the link does not link to the view. When returning one document from the collection, the link to the view works as expected. Interestingly, after I click on the link within the tree, and then reload the page I am taken to the correct view.
First of, this one is excellent tree-nav , you have kept it to minimal and added only the absolute functionality needed. I was making one for myself as i didn't find any good ones, but yours is excellent.
One use case, that I am after is, lets say, there is a route
under a group which is not expanded. Now upon typing this link on the browser's url, will the corresponding group containing the route
get expanded ?
I just looked at documentation, did not played with it, if its a easy question for you can you tell me the current behavior?
I followed the installation instructions and used the sample content provided. Is there something I am missing? I have not had this issue with any other components.
There are no build errors but the console reads:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
This is what I have in my package.json for versions.
"dependencies": {
"axios": "^0.18.0",
"gsap": "^2.0.1",
"lodash": "^4.17.10",
"vee-validate": "^2.1.0-beta.1",
"vue": "^2.5.16",
"vue-content-loading": "^1.5.0",
"vue-router": "^3.0.1",
"vuetify": "v1.0.19",
"vuex": "^3.0.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-add-filehash": "^6.9.8",
"babel-plugin-transform-imports": "^1.5.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-plugin-vue": "^4.5.0",
"file-loader": "^1.1.11",
"mdi": "^2.2.43",
"n": "^2.1.11",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.2",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"vue-tree-navigation": "^3.0.0",
"vuex-undo-redo": "^1.0.5",
"webpack": "^4.11.1",
"webpack-cli": "^3.0.3",
"webpack-dev-server": "^3.1.4"
}
When I serve an application at a different path than root e.g. http://example.com/somePath
, matching levels won't render as open even tough they are matching to the correct hash path.
When I change the webpack-dev-server
test to start with the following parameter:
--public-path somePath
Which will serve the app not on the root (/
) but on the somePath
route
And I remove the defaultOpenLevel
prop from the App.vue
file so that it becomes:
<template>
<div id="app">
<vue-tree-navigation :items="items"/>
And open the following URL: http://localhost:8080/somePath#/products/shoes
, whereby port 8080
matches to the webpack-dev-server
port that's currently used, it's clear that I am currently on the products/shoes
route but the navigation menu does not expand.
The image below shows the expected behavior for the tree navigation.
When I go to the core.js
file and change some of the functionality in the renderLevelAsOpen
function to the following:
From:
const currentUrl = getRelativeUrl(
window.location.href,
window.location.origin
);
if (
parentItem.meta.target !== '' &&
startsWithUrl(currentUrl, parentItem.meta.target) === true
) {
return true;
}
To:
const currentUrl = sanitizeRoute(window.location.hash.replace('#/', '/'));
if (
parentItem.meta.target !== '' &&
startsWithUrl(currentUrl, parentItem.meta.target) === true
) {
return true;
}
I get the same implementation like you designed it, but it's also working for different paths (e.g. /
and /somePath
).
Personally I don't understand the need for the getRelativeUrl
function because the 'window.location' object already contains the key for the hash part of the URL.
Add support for absolute URLs
It would be good not force anyone to use the ">" icon:
.navigation-toggle {
position: relative;
top: -3px;
padding: 6px;
cursor: pointer;
.navigation-toggle-icon {
display: inline-block;
padding: 3px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
&.closed {
.navigation-toggle-icon {
transform: rotate(-45deg);
}
}
}
This should be documented so people can override it easily + other possibilities of injecting custom icons to menu should be explored.
hi, thanks for this great work - I like it a lot even though it has some challenges because its lacking a closer integration with VueRouter. Background : I construct my VueRouter and vue-tree-navigation items dynamically from a simple JSON object. Doing so reveals the following issues
route
as routing context, VueRouter uses path
- please align this to also use path
Thanks
Open the group when it's parent address is visited. Now the group is opened only when of its children (in list) is visited.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.