refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

packages/frontend/editor-ui/src/components/InlineNameEdit.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { nextTick, ref, withDefaults } from 'vue';
+import { useToast } from '@/composables/useToast';
+import { onClickOutside } from '@vueuse/core';
+
+interface Props {
+	modelValue: string;
+	subtitle?: string;
+	type: string;
+	readonly?: boolean;
+	placeholder?: string;
+	maxlength?: number;
+	required?: boolean;
+	autosize?: boolean | { minRows: number; maxRows: number };
+	inputType?: string;
+	maxHeight?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+	placeholder: '',
+	maxlength: 64,
+	required: true,
+	autosize: false,
+	inputType: 'text',
+	maxHeight: '22px',
+	subtitle: '',
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [value: string];
+}>();
+
+const isNameEdit = ref(false);
+const nameInput = ref<HTMLInputElement | null>(null);
+const { showToast } = useToast();
+
+const onNameEdit = (value: string) => {
+	emit('update:modelValue', value);
+};
+
+const enableNameEdit = () => {
+	isNameEdit.value = true;
+	void nextTick(() => nameInput.value?.focus());
+};
+
+const disableNameEdit = () => {
+	if (!props.modelValue && props.required) {
+		emit('update:modelValue', `Untitled ${props.type}`);
+		showToast({
+			title: 'Error',
+			message: `${props.type} name cannot be empty`,
+			type: 'warning',
+		});
+	}
+	isNameEdit.value = false;
+};
+
+onClickOutside(nameInput, disableNameEdit);
+</script>
+
+<template>
+	<div :class="$style.container">
+		<span v-if="readonly" :class="$style.headline">
+			{{ modelValue }}
+		</span>
+		<div
+			v-else
+			:class="{
+				[$style.headline]: true,
+				[$style['headline-editable']]: true,
+				[$style.editing]: isNameEdit,
+			}"
+			@keydown.stop
+			@click="enableNameEdit"
+		>
+			<div v-if="!isNameEdit">
+				<span>
+					<n8n-text v-if="!modelValue" size="small" color="text-base">{{ placeholder }}</n8n-text>
+					<slot v-else>{{ modelValue }}</slot>
+				</span>
+				<i><font-awesome-icon icon="pen" /></i>
+			</div>
+			<div v-else :class="{ [$style.nameInput]: props.inputType !== 'textarea' }">
+				<n8n-input
+					ref="nameInput"
+					:model-value="modelValue"
+					size="large"
+					:type="inputType"
+					:maxlength
+					:placeholder
+					:autosize
+					@update:model-value="onNameEdit"
+					@change="disableNameEdit"
+				/>
+			</div>
+		</div>
+		<div v-if="!isNameEdit && subtitle" :class="$style.subtitle">
+			{{ subtitle }}
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+.container {
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	flex-direction: column;
+	min-height: 36px;
+}
+
+.headline {
+	font-size: var(--font-size-m);
+	line-height: 1.4;
+	margin-bottom: var(--spacing-5xs);
+	display: inline-block;
+	padding: 0 var(--spacing-4xs);
+	border-radius: var(--border-radius-base);
+	position: relative;
+	min-height: 22px;
+	max-height: v-bind(maxHeight);
+	font-weight: 400;
+
+	&.editing {
+		width: 100%;
+	}
+	i {
+		display: var(--headline-icon-display, none);
+		font-size: 0.75em;
+		margin-left: 8px;
+		color: var(--color-text-base);
+	}
+
+	:global(textarea) {
+		resize: none;
+	}
+}
+
+.headline-editable {
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--color-background-base);
+		--headline-icon-display: inline-flex;
+	}
+}
+
+.nameInput {
+	z-index: 1;
+	position: absolute;
+	margin-top: 1px;
+	top: 50%;
+	left: 0;
+	width: 400px;
+	transform: translateY(-50%);
+}
+
+.subtitle {
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-light);
+	margin-left: 4px;
+	font-weight: 400;
+}
+</style>