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

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

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import { useI18n } from '@/composables/useI18n';
+import { computed } from 'vue';
+
+const props = withDefaults(
+	defineProps<{
+		saved: boolean;
+		isSaving?: boolean;
+		disabled?: boolean;
+		type?: string;
+		withShortcut?: boolean;
+		shortcutTooltip?: string;
+		savingLabel?: string;
+	}>(),
+	{
+		isSaving: false,
+		type: 'primary',
+		withShortcut: false,
+		disabled: false,
+	},
+);
+
+const i18n = useI18n();
+
+const saveButtonLabel = computed(() => {
+	return props.isSaving
+		? (props.savingLabel ?? i18n.baseText('saveButton.saving'))
+		: i18n.baseText('saveButton.save');
+});
+
+const shortcutTooltipLabel = computed(() => {
+	return props.shortcutTooltip ?? i18n.baseText('saveButton.save');
+});
+</script>
+
+<template>
+	<span :class="$style.container" data-test-id="save-button">
+		<span v-if="saved" :class="$style.saved">{{ i18n.baseText('saveButton.saved') }}</span>
+		<template v-else>
+			<KeyboardShortcutTooltip
+				v-if="withShortcut"
+				:label="shortcutTooltipLabel"
+				:shortcut="{ keys: ['s'], metaKey: true }"
+				placement="bottom"
+			>
+				<n8n-button
+					:label="saveButtonLabel"
+					:loading="isSaving"
+					:disabled="disabled"
+					:class="$style.button"
+					:type="type"
+				/>
+			</KeyboardShortcutTooltip>
+			<n8n-button
+				v-else
+				:label="saveButtonLabel"
+				:loading="isSaving"
+				:disabled="disabled"
+				:class="$style.button"
+				:type="type"
+			/>
+		</template>
+	</span>
+</template>
+
+<style lang="scss" module>
+.container {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	height: 30px;
+}
+
+.button {
+	height: 30px;
+}
+
+.saved {
+	color: $custom-font-very-light;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 12px;
+	text-align: center;
+	padding: var(--spacing-2xs) var(--spacing-2xs);
+	min-width: 53px;
+}
+</style>