Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
treeflex - npm Package Compare versions
Comparing version 1.0.2 to 2.0.0
| { | ||
| "name": "treeflex", | ||
| "version": "1.0.2", | ||
| "version": "2.0.0", | ||
| "description": "Treeflex is a flexbox based CSS library for drawing hierarchy trees with HTML lists.", | ||
@@ -5,0 +5,0 @@ "keywords": ["css", "flexbox", "scss", "hierarchy tree", "tree", "css tree"], |
@@ -19,3 +19,3 @@ const emptyNode = node => { | ||
| arr.forEach(item => { | ||
| const li = createEl('li', createEl('span', item.text), [], true); | ||
| const li = createEl('li', createEl('span', item.text, ['tf-nc']), [], true); | ||
| parent.appendChild(li); | ||
@@ -22,0 +22,0 @@ if (item.children && item.children.length) { |
@@ -9,6 +9,6 @@ import draw from './drawTreeFromObject'; | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li><span>2</span></li> | ||
| <li><span>3</span></li> | ||
| <li><span class="tf-nc">2</span></li> | ||
| <li><span class="tf-nc">3</span></li> | ||
| </ul> | ||
@@ -37,23 +37,23 @@ </li> | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li> | ||
| <span>2</span> | ||
| <span class="tf-nc">2</span> | ||
| <ul> | ||
| <li><span>4</span></li> | ||
| <li><span class="tf-nc">4</span></li> | ||
| <li> | ||
| <span>5</span> | ||
| <span class="tf-nc">5</span> | ||
| <ul> | ||
| <li><span>9</span></li> | ||
| <li><span>10</span></li> | ||
| <li><span class="tf-nc">9</span></li> | ||
| <li><span class="tf-nc">10</span></li> | ||
| </ul> | ||
| </li> | ||
| <li><span>6</span></li> | ||
| <li><span class="tf-nc">6</span></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <span>3</span> | ||
| <span class="tf-nc">3</span> | ||
| <ul> | ||
| <li><span>7</span></li> | ||
| <li><span>8</span></li> | ||
| <li><span class="tf-nc">7</span></li> | ||
| <li><span class="tf-nc">8</span></li> | ||
| </ul> | ||
@@ -71,23 +71,23 @@ </li> | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li> | ||
| <span>2</span> | ||
| <span class="tf-nc">2</span> | ||
| <ul> | ||
| <li><span>4</span></li> | ||
| <li><span class="tf-nc">4</span></li> | ||
| <li> | ||
| <span>5</span> | ||
| <span class="tf-nc">5</span> | ||
| <ul> | ||
| <li><span>9</span></li> | ||
| <li><span>10</span></li> | ||
| <li><span class="tf-nc">9</span></li> | ||
| <li><span class="tf-nc">10</span></li> | ||
| </ul> | ||
| </li> | ||
| <li><span>6</span></li> | ||
| <li><span class="tf-nc">6</span></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <span>3</span> | ||
| <span class="tf-nc">3</span> | ||
| <ul> | ||
| <li><span>7</span></li> | ||
| <li><span>8</span></li> | ||
| <li><span class="tf-nc">7</span></li> | ||
| <li><span class="tf-nc">8</span></li> | ||
| </ul> | ||
@@ -106,6 +106,6 @@ </li> | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li><span>2</span></li> | ||
| <li><span>3</span></li> | ||
| <li><span class="tf-nc">2</span></li> | ||
| <li><span class="tf-nc">3</span></li> | ||
| </ul> | ||
@@ -120,6 +120,6 @@ </li> | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li><span>2</span></li> | ||
| <li><span>3</span></li> | ||
| <li><span class="tf-nc">2</span></li> | ||
| <li><span class="tf-nc">3</span></li> | ||
| </ul> | ||
@@ -134,6 +134,6 @@ </li> | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li><span>2</span></li> | ||
| <li><span>3</span></li> | ||
| <li><span class="tf-nc">2</span></li> | ||
| <li><span class="tf-nc">3</span></li> | ||
| </ul> | ||
@@ -149,23 +149,23 @@ </li> | ||
| <li> | ||
| <span>1</span> | ||
| <span class="tf-nc">1</span> | ||
| <ul> | ||
| <li class="tf-dashed-children"> | ||
| <span>2</span> | ||
| <span class="tf-nc">2</span> | ||
| <ul> | ||
| <li><span>4</span></li> | ||
| <li><span class="tf-nc">4</span></li> | ||
| <li> | ||
| <span>5</span> | ||
| <span class="tf-nc">5</span> | ||
| <ul> | ||
| <li><span>9</span></li> | ||
| <li><span>10</span></li> | ||
| <li><span class="tf-nc">9</span></li> | ||
| <li><span class="tf-nc">10</span></li> | ||
| </ul> | ||
| </li> | ||
| <li><span>6</span></li> | ||
| <li><span class="tf-nc">6</span></li> | ||
| </ul> | ||
| </li> | ||
| <li class="tf-dotted-children"> | ||
| <span>3</span> | ||
| <span class="tf-nc">3</span> | ||
| <ul> | ||
| <li><span>7</span></li> | ||
| <li><span>8</span></li> | ||
| <li><span class="tf-nc">7</span></li> | ||
| <li><span class="tf-nc">8</span></li> | ||
| </ul> | ||
@@ -183,3 +183,3 @@ </li> | ||
| .tf-custom li span:first-child { | ||
| .tf-custom .tf-nc { | ||
| height: 1em; width: 1em; | ||
@@ -194,4 +194,4 @@ background-color: dodgerblue; | ||
| .tf-custom li span:first-child:before, | ||
| .tf-custom li span:first-child:after { | ||
| .tf-custom .tf-nc:before, | ||
| .tf-custom .tf-nc:after { | ||
| border-left-color: dodgerblue; | ||
@@ -209,16 +209,16 @@ border-left-width: 2px; | ||
| <li> | ||
| <span></span> | ||
| <span class="tf-nc"></span> | ||
| <ul> | ||
| <li> | ||
| <span></span> | ||
| <span class="tf-nc"></span> | ||
| <ul> | ||
| <li><span></span></li> | ||
| <li><span></span></li> | ||
| <li><span class="tf-nc"></span></li> | ||
| <li><span class="tf-nc"></span></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <span></span> | ||
| <span class="tf-nc"></span> | ||
| <ul> | ||
| <li><span></span></li> | ||
| <li><span></span></li> | ||
| <li><span class="tf-nc"></span></li> | ||
| <li><span class="tf-nc"></span></li> | ||
| </ul> | ||
@@ -230,4 +230,41 @@ </li> | ||
| </div>` | ||
| }, { | ||
| className: 'example-ancestor', | ||
| useCode: true, | ||
| code: `<style> | ||
| /* make the nodes round and change their background-color */ | ||
| .tf-ancestor-tree { position: relative; } | ||
| .tf-ancestor-tree > ul { transform: rotateX(180deg); } | ||
| .tf-ancestor-tree li ul { margin-bottom: 1em; } | ||
| .node-text { | ||
| display: inline-block; | ||
| transform: rotateX(180deg); | ||
| } | ||
| </style> | ||
| <div class="tf-tree tf-ancestor-tree"> | ||
| <ul> | ||
| <li> | ||
| <span class="tf-nc"><span class="node-text">1</span></span> | ||
| <ul> | ||
| <li> | ||
| <span class="tf-nc"><span class="node-text">2</span></span> | ||
| <ul> | ||
| <li><span class="tf-nc"><span class="node-text">4</span></span></li> | ||
| <li><span class="tf-nc"><span class="node-text">5</span></span></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <span class="tf-nc"><span class="node-text">3</span></span> | ||
| <ul> | ||
| <li><span class="tf-nc"><span class="node-text">6</span></span></li> | ||
| <li><span class="tf-nc"><span class="node-text">7</span></span></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </div>` | ||
| }]; | ||
| export default examples; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.75%
44350
- Number of package files
- increased by5.88%
18
- Lines of code
- increased by11.29%
355
No dependency changes