mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

implement slots

Browse source
This commit is contained in:
Mutasem 2022-08-08 14:06:12 +02:00
parent 4a1da92013
commit 5b54fdcc7e
3 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/design-system/src/components/N8nTree/Tree.stories.ts
View file

@ -13,7 +13,11 @@ export const Default: StoryFn = (args, {argTypes}) => ({
components: {
N8nTree,
},
template: `<n8n-tree v-bind="$props"></n8n-tree>`,
template: `<n8n-tree v-bind="$props">
<template v-slot:label="{ label }">
<span>{{ label }}</span>
</template>
</n8n-tree>`,
});
Default.args = {

14
packages/design-system/src/components/N8nTree/TreeNode.vue
View file

@ -2,14 +2,17 @@
<div class="n8n-tree-node">
<div v-for="(label, i) in Object.keys(input)" :key="i" :class="{[$style.indent]: depth > 0}">
<div :class="$style.simple" v-if="isSimple(input[label])">
<span>{{ label }} :&nbsp;</span>
<slot name="label" v-bind:label="label" />
<span>&nbsp:&nbsp;</span>
<span :class="$style.value">{{ input[label] }}</span>
</div>
<div v-else>
<span>{{ label }}</span>
<div>
<n8n-tree-node :path="getPath(label)" :depth="depth + 1" :input="input[label]" />
</div>
<slot name="label" v-bind:label="label" v-bind:path="path" />
<n8n-tree-node :path="getPath(label)" :depth="depth + 1" :input="input[label]">
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</n8n-tree-node>
</div>
</div>
</div>
@ -24,7 +27,6 @@ export default Vue.extend({
},
props: {
input: {
type: Object,
},
path: {
type: String,

15
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -56,7 +56,20 @@
@mouseleave="onMouseLeaveCell"
>
<span v-if="isSimple(data)">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</span>
<n8n-tree path="$json" :input="data" />
<n8n-tree path="$json" :input="data">
<template v-slot:label="{ label, path }">
<Draggable type="mapping" :data="path" :disabled="!mappingEnabled" @dragstart="onDragStart" @dragend="(path) => onDragEnd(path)">
<template v-slot:preview="{ canDrop }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill: $style.defaultPill]">
{{ $locale.baseText('dataMapping.mapSpecificColumnToField', { interpolate: { name: shorten(path || '', 16, 2) } }) }}
</div>
</template>
<template>
<span>{{ label }}</span>
</template>
</Draggable>
</template>
</n8n-tree>
</td>
</tr>
</tbody>