tinywisp / twtree Goto Github PK

Hi, im wondering if twtree works with Vue 3?

Hi,
I'm using bootstrap and bootstrap rtl in my application. I share some screenshots for better understanding of the behaviour when I change to RTL.

Standard view:

is this the only css you are using in the application?
https://github.com/TinyWisp/twtree/blob/master/docs/css/app.be5292d3.css

looking in the code seems you are using the styles like the next to set left space for each node in the tree.

• "--fullIndent:calc(30px);"
• "--fullIndent:calc(30px + 30px);"
• "--fullIndent:calc(30px + 30px + 30px);"

Meanwhile I'm trying to look for a fix from my side to do not apply RTL in the tree, any help is welcome.

Thanks for your time.

When using the create() method, the new node doesn't seem to cycle through the fnCustomClasses() property function to apply any custom style depending on the new node values.

Might be interesting to add a refreshCustomClasses() method to call right after creating a new node, method that could be used to update any change around the displayed values?

Using the create() method with the order argument seems to require some specific value :

tree.create(child1, node, 999)
tree.create(child2, node, 1)
// this one works fine, child2 will appear before child1

tree.create(child1, node, 999)
tree.create(child2, node, 2)
// this one doesn't work the same way, child2 will appear after child1

This brings problems if the tree is pre-filled with a :tree option, as there doesn't seem to be any order properties for a node object.

Best strategy: make the order argument usable from any range of values

你好，使用过程发现几处问题：
一：自定义外观的例子中：有些没申明v-slot:；
二：v-slot:title 设置最长宽度超过即用省略号表示：无法达到超过左侧剩余宽度就用省略号的效果
三：v-slot:extra 这个是不是可以考虑增加一个选项，一直显示，而不是鼠标滑过

Any chance to add the type (item.type) to the <li> class ?

:class="{
              'twtree-node':                true, 
              'twtree-node-selected':       item.selected,

(...)

              'twtree-node-drag-over-self': item.__.dragOverArea === 'self' && item.__.isDroppable,
              item.type
            }"

This way we could easily change the style of a specific type element (like the font color, which isn't part of the style properties)

您好，请问为什么对树形进行视图操作以后绑定的数据没有改变？
树形组件绑定的数据为 :tree="tree" ，视图改变了但是this.tree没有改变。
谢谢。

Tree not updating when nodes added dynamically

Whether to support mobile touch screen dragging

When running demo and dropping node into another, I get this error:

TypeError: Cannot read property 'title' of null
at eval (twtree.umd.min.js?5f7a:1)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
    at Proxy.a (twtree.umd.min.js?5f7a:1)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

Steps to reproduce:

• open demo: https://tinywisp.github.io/twtree/#/example/basic
• open console
• try dragging and dropping node

How to setup not expand all categories on start.

If i have large dataset i don't want to show everything only on click.