search

dabeng / vue-orgchart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
MIT License
289 stars 89 forks source link

schedule #1

Open verilog15 opened 5 years ago

verilog15 commented 5 years ago

Good luck with your new project! Can you provide a schedule for the project? I was waiting a long time to use org chart with Vue. Thank you!

dabeng commented 5 years ago

Hi @verilog15 , I just released 1.0 version of vue-organization-chart on npmjs.com. I think it will be a good start point though current component only can render the orgchart without too much options which jquery orgchart plugin has exposed. Additionally, feel free to play around with Demo on CodeSandbox and tell me your interesting ideas 😊

verilog15 commented 5 years ago

Hi @dabeng, That is so great! You don't have an idea how much I waited for a good Vue library which deals with orgchars. I was using your JQuery project with my Vue wrapper. I will be more than glad to replace it with your Vue project. Which JQuery options I can use for now? The main options which I would like to use are:

  1. pan & zoom - Also please provide an exposed function so I can insert into a button.
  2. direction.
  3. nodeContent.
  4. createNode - Also please provide an exposed function so I can open a modal when pressing a specific node.
  5. An exposed function of the image downloader so I can insert into a button.
  6. An exposed function of the JSON downloader so I can insert into a button.

All those features are available on the JQuery project. Is it possible to create those options on this project? Also is there a table with all available options which I can use? (like the one you have in the JQuery project).

Thank you again for all your hard work!

dabeng commented 5 years ago

Hi @verilog15 . I'm glad that vue-organization-chart could be introduced into your new Vue project 😊 . I added zoom option just now and will expose more option according to the APIs of jquery orgchart in the feature.

verilog15 commented 5 years ago

Hi @dabeng, I started using your project :) How can I use those features I mentioned above? Only zoom works for me, for now (I used "datasource").

verilog15 commented 5 years ago

@dabeng Any good news for us? :)

chaoYrAx commented 5 years ago

Look forward to your good news，happy new year

dabeng commented 5 years ago

Happy spring festival 😊

dabeng commented 5 years ago

Hi @verilog15 @chaoYrAx. I have to say sorry. For various reasons, I only spared two days to update vue-orgchart during my Chinese New Year holiday. For now, there is the following available attributes and slot and you can find some new Demos on codesandbox.io.

Attributes

NameTypeRequiredDefaultDescription
datasourcejsonyesdatasource usded to build out structure of orgchart. It could be a json object.
panbooleannofalseUsers could pan the orgchart by mouse drag&drop if they enable this attribute.
zoombooleannofalseUsers could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute.
zoomin-limitnumberno7Users are allowed to set a zoom-in limit.
zoomout-limitnumberno0.5Users are allowed to set a zoom-out limit.

Scoped Slots

<template slot-scope="{ nodeData }">
  <!-- feel free to customize the internal structure of node -->
</template>
nickcoats commented 5 years ago

Hi @dabeng - thanks for this great library!

Any idea if you'll be able to add the direction and createNode attributes?