mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): mapping expressions from input table (#3864)

Browse Source 
* implement tree render

* update styles

* implement slots

* fix recursive tree rendering

* make not recursive

* Revert "make not recursive"

f064fc14f4aa78573a8b978887076f5dfdb80d83

* enable dragging

* fix dragging name

* fix col bug

* update values and styles

* update style

* update colors

* update design

* add hover state

* add dragging behavior

* format file

* update pill text

* add depth field

* typo

* add avg height

* update event name

* update expr at distance

* add right margin always

* add space

* handle long values

* update types

* update messages

* update keys styling

* update spacing size

* fix hover bug

* update switch spacing

* fix wrap issue

* update spacing issues

* remove br

* update hoverable

* reduce event

* replace tree

* update prop name

* update tree story

* update tree

* refactor run data

* add unit tests

* add test for nodeclass

* remove number check

* bring back hook

* address review comments

* update margin

* update tests

* address max's feedback

* update tslint issues

* if empty, remove min width

* update spacing back
This commit is contained in:
Mutasem Aldmour
2022-08-24 14:47:42 +02:00
committed by GitHub
parent 7d74ddab29
commit ce076dca48
19 changed files with 736 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
packages/design-system/src/components/N8nTree/__tests__/Tree.spec.ts Normal file
View File

@@ -0,0 +1,74 @@
import { render } from '@testing-library/vue';
import N8nTree from '../Tree.vue';
describe('components', () => {
describe('N8nTree', () => {
it('should render simple tree', () => {
const wrapper = render(N8nTree, {
props: {
value: {
"hello": "world",
},
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should render tree', () => {
const wrapper = render(N8nTree, {
props: {
value: {
"hello": {
"test": "world",
},
"options": [
"yes",
"no",
],
},
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should render tree with slots', () => {
const wrapper = render(N8nTree, {
props: {
value: {
"hello": {
"test": "world",
},
"options": [
"yes",
"no",
],
},
},
slots: {
label: "<span>label</span>",
value: "<span>value</span>",
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should render each tree with node class', () => {
const wrapper = render(N8nTree, {
props: {
value: {
"hello": {
"test": "world",
},
"options": [
"yes",
"no",
],
},
nodeClass: "nodeClass",
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});
});

87
packages/design-system/src/components/N8nTree/__tests__/__snapshots__/Tree.spec.ts.snap Normal file
View File

@@ -0,0 +1,87 @@
// Vitest Snapshot v1
exports[`components > N8nTree > should render each tree with node class 1`] = `
"<div class=\\"n8n-tree\\">
<div class=\\"nodeClass\\">
<div><span>hello</span>
<div class=\\"n8n-tree\\">
<div class=\\"nodeClass _indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>test</span><span>:</span><span>world</span></div>
</div>
</div>
</div>
</div>
<div class=\\"nodeClass\\">
<div><span>options</span>
<div class=\\"n8n-tree\\">
<div class=\\"nodeClass _indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>0</span><span>:</span><span>yes</span></div>
</div>
<div class=\\"nodeClass _indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>1</span><span>:</span><span>no</span></div>
</div>
</div>
</div>
</div>
</div>"
`;
exports[`components > N8nTree > should render simple tree 1`] = `
"<div class=\\"n8n-tree\\">
<div class=\\"\\">
<div class=\\"_simple_1y4uu_5\\"><span>hello</span><span>:</span><span>world</span></div>
</div>
</div>"
`;
exports[`components > N8nTree > should render tree 1`] = `
"<div class=\\"n8n-tree\\">
<div class=\\"\\">
<div><span>hello</span>
<div class=\\"n8n-tree\\">
<div class=\\"_indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>test</span><span>:</span><span>world</span></div>
</div>
</div>
</div>
</div>
<div class=\\"\\">
<div><span>options</span>
<div class=\\"n8n-tree\\">
<div class=\\"_indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>0</span><span>:</span><span>yes</span></div>
</div>
<div class=\\"_indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>1</span><span>:</span><span>no</span></div>
</div>
</div>
</div>
</div>
</div>"
`;
exports[`components > N8nTree > should render tree with slots 1`] = `
"<div class=\\"n8n-tree\\">
<div class=\\"\\">
<div><span>label</span>
<div class=\\"n8n-tree\\">
<div class=\\"_indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>label</span><span>:</span><span>value</span></div>
</div>
</div>
</div>
</div>
<div class=\\"\\">
<div><span>label</span>
<div class=\\"n8n-tree\\">
<div class=\\"_indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>label</span><span>:</span><span>value</span></div>
</div>
<div class=\\"_indent_1y4uu_1\\">
<div class=\\"_simple_1y4uu_5\\"><span>label</span><span>:</span><span>value</span></div>
</div>
</div>
</div>
</div>
</div>"
`;