🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

treeflex

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

treeflex - npm Package Compare versions

Comparing version

1.0.2
to
2.0.0

CHANGELOG.md

2

package.json
{
"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"],

2

src/site/js/drawTreeFromObject.js

@@ -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) {

141

src/site/js/examples.js

@@ -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;
dist/css/treeflex.css

Sorry, the diff of this file is not supported yet

docs/index.html

Sorry, the diff of this file is not supported yet

src/core/scss/treeflex.scss

Sorry, the diff of this file is not supported yet

src/site/index.html

Sorry, the diff of this file is not supported yet