Initial commit to release

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

@@ -0,0 +1,171 @@
+<template>
+	<div @keydown.stop class="duplicate-parameter">
+
+		<div class="parameter-name">
+			{{parameter.displayName}}:
+		</div>
+
+		<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
+			<div class="delete-item clickable" v-if="!isReadOnly" title="Delete Item" @click="deleteItem(index)">
+				<font-awesome-icon icon="trash" />
+			</div>
+			<div v-if="parameter.type === 'collection'">
+				<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" @valueChanged="valueChanged" />
+			</div>
+			<div v-else>
+				<parameter-input class="duplicate-parameter-input-item" :parameter="parameter" :value="value" :displayOptions="true" :path="getPath(index)" @valueChanged="valueChanged" />
+			</div>
+		</div>
+
+		<div class="add-item-wrapper">
+			<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
+				Currently no items exist
+			</div>
+			<el-button v-if="!isReadOnly" size="small" class="add-item" @click="addItem()">{{ addButtonText }}</el-button>
+		</div>
+
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import {
+	IUpdateInformation,
+} from '@/Interface';
+
+import CollectionParameter from '@/components/CollectionParameter.vue';
+import ParameterInput from '@/components/ParameterInput.vue';
+
+import { get } from 'lodash';
+
+import { genericHelpers } from '@/components/mixins/genericHelpers';
+
+import mixins from 'vue-typed-mixins';
+
+export default mixins(genericHelpers)
+	.extend({
+		name: 'MultipleParameter',
+		components: {
+			CollectionParameter,
+			ParameterInput,
+		},
+		props: [
+			'nodeValues', // NodeParameters
+			'parameter', // NodeProperties
+			'path', // string
+			'values', // NodeParameters[]
+		],
+		computed: {
+			addButtonText (): string {
+				return (this.parameter.typeOptions && this.parameter.typeOptions.multipleValueButtonText) ? this.parameter.typeOptions.multipleValueButtonText : 'Add item';
+			},
+			hideDelete (): boolean {
+				return this.parameter.options.length === 1;
+			},
+		},
+		methods: {
+			addItem () {
+				const name = this.getPath();
+				let currentValue = get(this.nodeValues, name);
+
+				if (currentValue === undefined) {
+					currentValue = [];
+				}
+
+				currentValue.push(JSON.parse(JSON.stringify(this.parameter.default)));
+
+				const parameterData = {
+					name,
+					value: currentValue,
+				};
+
+				this.$emit('valueChanged', parameterData);
+			},
+			deleteItem (index: number) {
+				const parameterData = {
+					name: this.getPath(index),
+					value: null,
+				};
+
+				this.$emit('valueChanged', parameterData);
+			},
+			getPath (index?: number): string {
+				return this.path + (index !== undefined ? `[${index}]` : '');
+			},
+			valueChanged (parameterData: IUpdateInformation) {
+				this.$emit('valueChanged', parameterData);
+			},
+		},
+	});
+</script>
+
+<style scoped lang="scss">
+
+.duplicate-parameter-item ~.add-item-wrapper {
+	margin: 1.5em 0 0em 0em;
+}
+
+.add-item-wrapper {
+	margin: 0.5em 0 0em 2em;
+}
+
+.add-item {
+	width: 100%;
+}
+
+.delete-item {
+	display: none;
+	position: absolute;
+	left: 0.1em;
+	top: .3em;
+	z-index: 999;
+	color: #f56c6c;
+
+	:hover {
+		color: #ff0000;
+	}
+}
+
+.duplicate-parameter {
+	margin-top: 0.5em;
+	.parameter-name {
+		border-bottom: 1px solid #999;
+	}
+}
+
+/deep/ .duplicate-parameter-item {
+	position: relative;
+	margin-top: 0.5em;
+	padding-top: 0.5em;
+
+	.multi > .delete-item{
+		top: 0.1em;
+	}
+}
+
+/deep/ .duplicate-parameter-input-item {
+	margin: 0.5em 0 0.25em 1em;
+}
+
+/deep/ .duplicate-parameter-item + .duplicate-parameter-item {
+	.collection-parameter-wrapper {
+		border-top: 1px dashed #999;
+		padding-top: 0.5em;
+	}
+}
+
+.no-items-exist {
+	margin: 0 0 1em 0;
+}
+</style>
+
+<style>
+.duplicate-parameter-item:hover > .delete-item {
+	display: inline;
+}
+
+.duplicate-parameter-item .multi > .delete-item{
+	top: 0.1em;
+}
+</style>