Initial commit to release

packages/editor-ui/src/components/NodeCreateItem.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="node-item clickable" :class="{active: active}" @click="nodeTypeSelected(nodeType)">
+		<NodeIcon class="node-icon" :nodeType="nodeType"/>
+		<div class="name">
+			{{nodeType.displayName}}
+		</div>
+		<div class="description">
+			{{nodeType.description}}
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+
+import Vue from 'vue';
+import { INodeTypeDescription } from 'n8n-workflow';
+
+import NodeIcon from '@/components/NodeIcon.vue';
+
+export default Vue.extend({
+	name: 'NodeCreateItem',
+	components: {
+		NodeIcon,
+	},
+	props: [
+		'active',
+		'filter',
+		'nodeType',
+	],
+	data () {
+		return {
+		};
+	},
+	methods: {
+		nodeTypeSelected (nodeType: INodeTypeDescription) {
+			this.$emit('nodeTypeSelected', nodeType.name);
+		},
+	},
+});
+</script>
+
+<style scoped lang="scss">
+
+.node-item {
+	position: relative;
+	border-bottom: 1px solid #eee;
+	background-color: #fff;
+	padding: 6px;
+	border-left: 3px solid #fff;
+
+	&:hover {
+		border-left: 3px solid #ccc;
+	}
+}
+
+.active {
+	border-left: 3px solid $--color-primary;
+}
+
+.node-icon {
+	display: inline-block;
+	position: absolute;
+	left: 12px;
+	top: calc(50% - 15px);
+}
+
+.name {
+	font-weight: bold;
+	font-size: 0.9em;
+	padding-left: 50px;
+}
+
+.description {
+	margin-top: 3px;
+	line-height: 1.7em;
+	font-size: 0.8em;
+	padding-left: 50px;
+}
+</style>