Initial commit to release

2025-12-18 10:31:15 +00:00 · 2019-06-23 12:35:23 +02:00
commit 9cb9804eee
257 changed files with 42436 additions and 0 deletions
--- a/packages/editor-ui/src/components/DisplayWithChange.vue
+++ b/packages/editor-ui/src/components/DisplayWithChange.vue
@@ -0,0 +1,121 @@
+<template >
+	<span class="static-text-wrapper">
+		<span v-show="!editActive" title="Click to change">
+			<span class="static-text" @mousedown="startEdit">{{currentValue}}</span>
+		</span>
+		<span v-show="editActive">
+			<input class="edit-field" ref="inputField" type="text" v-model="newValue" @keydown.enter.stop.prevent="setValue" @keydown.escape.stop.prevent="cancelEdit" @keydown.stop="noOp" @blur="cancelEdit" />
+			<font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" title="Cancel Edit" />
+			<font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" title="Set Value" />
+		</span>
+	</span>
+</template>
+
+<script lang="ts">
+
+import { genericHelpers } from '@/components/mixins/genericHelpers';
+import { INodeUi } from '@/Interface';
+
+import mixins from 'vue-typed-mixins';
+
+export default mixins(genericHelpers).extend({
+	name: 'DisplayWithChange',
+	props: {
+		keyName: String,
+	},
+	computed: {
+		node (): INodeUi {
+			return this.$store.getters.activeNode;
+		},
+		currentValue (): string {
+			const parameterNameParts = this.keyName.split('.');
+
+			const getDescendantProp = (obj: object, path: string): string => {
+				// @ts-ignore
+				return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+			};
+
+			return getDescendantProp(this.node, this.keyName);
+		},
+	},
+	watch: {
+		currentValue (val) {
+			// Deactivate when the data to edit changes
+			// (like when a different node gets selected)
+			this.editActive = false;
+		},
+	},
+	data: () => {
+		return {
+			editActive: false,
+			newValue: '',
+		};
+	},
+	methods: {
+		noOp () {},
+		startEdit () {
+			if (this.isReadOnly === true) {
+				return;
+			}
+			this.editActive = true;
+			this.newValue = this.currentValue;
+
+			setTimeout(() => {
+				(this.$refs.inputField as HTMLInputElement).focus();
+			});
+		},
+		cancelEdit () {
+			this.editActive = false;
+		},
+		setValue () {
+			const sendData = {
+				value: this.newValue,
+				name: this.keyName,
+			};
+
+			this.$emit('valueChanged', sendData);
+			this.editActive = false;
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+
+.static-text-wrapper {
+	line-height: 1.4em;
+	font-weight: 600;
+
+	.static-text {
+		position: relative;
+		top: 1px;
+
+		&:hover {
+			border-bottom: 1px dashed #555;
+			cursor: text;
+		}
+	}
+
+	input {
+		font-weight: 600;
+
+		&.edit-field {
+			background: none;
+			border: none;
+			font-size: 1em;
+			color: #555;
+			border-bottom: 1px dashed #555;
+			width: calc(100% - 130px);
+		}
+		&.edit-field:focus {
+			outline-offset: unset;
+			outline: none;
+		}
+	}
+
+	.icons {
+		margin-left: 0.6em;
+	}
+}
+
+</style>