refactor(editor): Replace mixed style of defineProps with the new style (no-changelog) (#9787)

packages/@n8n/chat/src/components/Message.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { PropType } from 'vue';
 import { computed, toRefs } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 import hljs from 'highlight.js/lib/core';
@@ -9,12 +8,9 @@ import type MarkdownIt from 'markdown-it';
 import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
 import { useOptions } from '@n8n/chat/composables';
 
-const props = defineProps({
+const props = defineProps<{
-	message: {
+	message: ChatMessage;
-		type: Object as PropType<ChatMessage>,
+}>();
-		required: true,
-	},
-});
 
 const { message } = toRefs(props);
 const { options } = useOptions();

packages/@n8n/chat/src/components/MessageTyping.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { computed } from 'vue';
 import { Message } from './index';
 import type { ChatMessage } from '@n8n/chat/types';
 
-const props = defineProps({
+const props = withDefaults(
-	animation: {
+	defineProps<{
-		type: String as PropType<'bouncing' | 'scaling'>,
+		animation?: 'bouncing' | 'scaling';
-		default: 'bouncing',
+	}>(),
+	{
+		animation: 'bouncing',
 	},
-});
+);
 
 const message: ChatMessage = {
 	id: 'typing',

packages/@n8n/chat/src/components/MessagesList.vue

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import Message from '@n8n/chat/components/Message.vue';
 import type { ChatMessage } from '@n8n/chat/types';
 import MessageTyping from '@n8n/chat/components/MessageTyping.vue';
 import { useChat } from '@n8n/chat/composables';
 
-defineProps({
+defineProps<{
-	messages: {
+	messages: ChatMessage[];
-		type: Array as PropType<ChatMessage[]>,
+}>();
-		required: true,
-	},
-});
 
 const chatStore = useChat();
 

packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue

@@ -23,20 +23,16 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-const props = defineProps({
+const props = withDefaults(
-	radius: {
+	defineProps<{
-		type: Number,
+		radius: number;
-		required: true,
+		progress: number;
+		strokeWidth?: number;
+	}>(),
+	{
+		strokeWidth: 4,
 	},
-	progress: {
+);
-		type: Number,
-		required: true,
-	},
-	strokeWidth: {
-		type: Number,
-		default: 4,
-	},
-});
 
 // for SVG viewbox and stroke array
 const diameter = computed(() => 2 * (props.radius + props.strokeWidth));

packages/design-system/src/components/N8nUserStack/UserStack.vue

@@ -1,31 +1,22 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import type { IUser, UserStackGroups } from 'n8n-design-system/types';
 import N8nAvatar from '../N8nAvatar';
 import N8nUserInfo from '../N8nUserInfo';
-import type { PropType } from 'vue';
-import { computed } from 'vue';
 
-const props = defineProps({
+const props = withDefaults(
-	users: {
+	defineProps<{
-		type: Object as PropType<UserStackGroups>,
+		users: UserStackGroups;
-		required: true,
+		currentUserEmail?: string;
+		maxAvatars?: number;
+		dropdownTrigger?: 'hover' | 'click';
+	}>(),
+	{
+		currentUserEmail: '',
+		maxAvatars: 2,
+		dropdownTrigger: 'hover',
 	},
-	currentUserEmail: {
+);
-		type: String,
-		required: false,
-		default: '',
-	},
-	maxAvatars: {
-		type: Number,
-		default: 2,
-		validator: (value: number) => value > 0,
-	},
-	dropdownTrigger: {
-		type: String,
-		default: 'hover',
-		validator: (value: string) => ['hover', 'click'].includes(value),
-	},
-});
 
 const nonEmptyGroups = computed(() => {
 	const users: UserStackGroups = {};

packages/design-system/src/components/ResizeObserver/ResizeObserver.vue

@@ -3,21 +3,16 @@ import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 
 export type BreakpointDefinition = { bp: string; width: number };
 
-const props = defineProps({
+const props = withDefaults(
-	enabled: {
+	defineProps<{
-		type: Boolean,
+		enabled?: boolean;
-		default: true,
+		breakpoints?: BreakpointDefinition[];
+	}>(),
+	{
+		enabled: true,
+		breakpoints: () => [],
 	},
-	breakpoints: {
+);
-		type: Array as () => BreakpointDefinition[],
-		validator: (breakpoints: BreakpointDefinition[]) => {
-			if (breakpoints.length === 0) return true;
-
-			return breakpoints.every((bp) => typeof bp.width === 'number' && typeof bp.bp === 'string');
-		},
-		default: () => [],
-	},
-});
 
 const observer = ref<ResizeObserver | null>(null);
 const breakpoint = ref('');

packages/design-system/src/styleguide/ColorCircles.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-import type { PropType } from 'vue';
 import { getHex, resolveHSLCalc } from './ColorCircles.utils';
 
-const props = defineProps({
+const props = defineProps<{ colors: string[] }>();
-	colors: {
-		type: Array as PropType<string[]>,
-		required: true,
-	},
-});
 
 const getColors = () => {
 	const style = getComputedStyle(document.body);

packages/design-system/src/styleguide/Sizes.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { ref, onMounted, onUnmounted } from 'vue';
 
 type Size = {
@@ -8,16 +7,15 @@ type Size = {
 };
 
 // Define props with their types
-const props = defineProps({
+const props = withDefaults(
-	variables: {
+	defineProps<{
-		type: Array as PropType<string[]>,
+		variables: string[];
-		required: true,
+		attr?: string;
+	}>(),
+	{
+		attr: '',
 	},
-	attr: {
+);
-		type: String,
-		default: '',
-	},
-});
 
 const getSizes = () => {
 	const style = getComputedStyle(document.body);

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { computed, ref } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
@@ -11,12 +10,14 @@ import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
 import JsEditor from '@/components/JsEditor/JsEditor.vue';
 import { useI18n } from '@/composables/useI18n';
 
-const props = defineProps({
+const props = withDefaults(
-	modalBus: {
+	defineProps<{
-		type: Object as PropType<EventBus>,
+		modalBus?: EventBus;
-		default: () => createEventBus(),
+	}>(),
+	{
+		modalBus: () => createEventBus(),
 	},
-});
+);
 
 const i18n = useI18n();
 const rootStore = useRootStore();

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

@@ -7,20 +7,11 @@ import CredentialsDropdown from './CredentialsDropdown.vue';
 import { useI18n } from '@/composables/useI18n';
 import { CREDENTIAL_EDIT_MODAL_KEY } from '@/constants';
 
-const props = defineProps({
+const props = defineProps<{
-	appName: {
+	appName: string;
-		type: String,
+	credentialType: string;
-		required: true,
+	selectedCredentialId: string | null;
-	},
+}>();
-	credentialType: {
-		type: String,
-		required: true,
-	},
-	selectedCredentialId: {
-		type: String,
-		required: false,
-	},
-});
 
 const $emit = defineEmits({
 	credentialSelected: (_credentialId: string) => true,

packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 
 export type CredentialOption = {
@@ -8,16 +7,10 @@ export type CredentialOption = {
 	typeDisplayName: string | undefined;
 };
 
-const props = defineProps({
+const props = defineProps<{
-	credentialOptions: {
+	credentialOptions: CredentialOption[];
-		type: Array as PropType<CredentialOption[]>,
+	selectedCredentialId: string | null;
-		required: true,
+}>();
-	},
-	selectedCredentialId: {
-		type: String,
-		required: false,
-	},
-});
 
 const $emit = defineEmits({
 	credentialSelected: (_credentialId: string) => true,

packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { ExternalSecretsProvider } from '@/Interface';
 import ExternalSecretsProviderImage from '@/components/ExternalSecretsProviderImage.ee.vue';
 import ExternalSecretsProviderConnectionSwitch from '@/components/ExternalSecretsProviderConnectionSwitch.ee.vue';
@@ -13,12 +12,9 @@ import { DateTime } from 'luxon';
 import { computed, nextTick, onMounted, toRef } from 'vue';
 import { isDateObject } from '@/utils/typeGuards';
 
-const props = defineProps({
+const props = defineProps<{
-	provider: {
+	provider: ExternalSecretsProvider;
-		type: Object as PropType<ExternalSecretsProvider>,
+}>();
-		required: true,
-	},
-});
 
 const externalSecretsStore = useExternalSecretsStore();
 const i18n = useI18n();

packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { ExternalSecretsProvider } from '@/Interface';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useToast } from '@/composables/useToast';
@@ -12,24 +11,19 @@ const emit = defineEmits<{
 	(e: 'change', value: boolean): void;
 }>();
 
-const props = defineProps({
+const props = withDefaults(
-	provider: {
+	defineProps<{
-		type: Object as PropType<ExternalSecretsProvider>,
+		provider: ExternalSecretsProvider;
-		required: true,
+		eventBus?: EventBus;
+		disabled?: boolean;
+		beforeUpdate?: (value: boolean) => Promise<boolean>;
+	}>(),
+	{
+		eventBus: undefined,
+		disabled: false,
+		beforeUpdate: undefined,
 	},
-	eventBus: {
+);
-		type: Object as PropType<EventBus>,
-		default: undefined,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	beforeUpdate: {
-		type: Function,
-		default: undefined,
-	},
-});
 
 const loadingService = useLoadingService();
 const externalSecretsStore = useExternalSecretsStore();

packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { ExternalSecretsProvider } from '@/Interface';
 import { computed } from 'vue';
 
@@ -8,12 +7,9 @@ import doppler from '../assets/images/doppler.webp';
 import vault from '../assets/images/hashicorp.webp';
 import awsSecretsManager from '../assets/images/aws-secrets-manager.svg';
 
-const props = defineProps({
+const props = defineProps<{
-	provider: {
+	provider: ExternalSecretsProvider;
-		type: Object as PropType<ExternalSecretsProvider>,
+}>();
-		required: true,
-	},
-});
 
 const image = computed(
 	() =>

packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue

@@ -2,7 +2,6 @@
 import Modal from './Modal.vue';
 import { EXTERNAL_SECRETS_PROVIDER_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
-import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import { useExternalSecretsProvider } from '@/composables/useExternalSecretsProvider';
 import { useI18n } from '@/composables/useI18n';
@@ -21,12 +20,9 @@ import ExternalSecretsProviderImage from '@/components/ExternalSecretsProviderIm
 import ExternalSecretsProviderConnectionSwitch from '@/components/ExternalSecretsProviderConnectionSwitch.ee.vue';
 import { createEventBus } from 'n8n-design-system/utils';
 
-const props = defineProps({
+const props = defineProps<{
-	data: {
+	data: { eventBus: EventBus; name: string };
-		type: Object as PropType<{ eventBus: EventBus; name: string }>,
+}>();
-		default: () => ({}),
-	},
-});
 
 const defaultProviderData: Record<string, Partial<ExternalSecretsProviderData>> = {
 	infisical: {

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

@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 import { useI18n } from '@/composables/useI18n';
-import type { PropType } from 'vue';
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', feedback: 'positive' | 'negative'): void;
 }>();
 
-defineProps({
+defineProps<{
-	modelValue: {
+	modelValue?: 'positive' | 'negative';
-		type: String as PropType<'positive' | 'negative' | undefined>,
+}>();
-		default: undefined,
-	},
-});
 
 const i18n = useI18n();
 

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

@@ -3,12 +3,9 @@ import { GENERATE_CURL_MODAL_KEY, IMPORT_CURL_MODAL_KEY } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
 import { useAIStore } from '@/stores/ai.store';
 
-defineProps({
+defineProps<{
-	isReadOnly: {
+	isReadOnly: boolean;
-		type: Boolean,
+}>();
-		default: false,
-	},
-});
 
 const uiStore = useUIStore();
 const aiStore = useAIStore();

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

@@ -9,11 +9,9 @@ import { createEventBus } from 'n8n-design-system/utils';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 
-const props = defineProps({
+const props = defineProps<{
-	isActive: {
+	isActive?: boolean;
-		type: Boolean,
+}>();
-	},
-});
 
 const rootStore = useRootStore();
 const i18n = useI18n();

packages/editor-ui/src/components/SourceControlPullModal.ee.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import Modal from './Modal.vue';
 import { SOURCE_CONTROL_PULL_MODAL_KEY } from '@/constants';
-import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import type { SourceControlAggregatedFile } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -9,16 +8,12 @@ import { useLoadingService } from '@/composables/useLoadingService';
 import { useToast } from '@/composables/useToast';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
-import { useRoute, useRouter } from 'vue-router';
 import { computed, nextTick, ref } from 'vue';
 import { sourceControlEventBus } from '@/event-bus/source-control';
 
-const props = defineProps({
+const props = defineProps<{
-	data: {
+	data: { eventBus: EventBus; status: SourceControlAggregatedFile[] };
-		type: Object as PropType<{ eventBus: EventBus; status: SourceControlAggregatedFile[] }>,
+}>();
-		default: () => ({}),
-	},
-});
 
 const incompleteFileTypes = ['variables', 'credential'];
 
@@ -27,8 +22,6 @@ const uiStore = useUIStore();
 const toast = useToast();
 const i18n = useI18n();
 const sourceControlStore = useSourceControlStore();
-const router = useRouter();
-const route = useRoute();
 
 const files = ref<SourceControlAggregatedFile[]>(props.data.status || []);
 
@@ -40,10 +33,6 @@ const modifiedWorkflowFiles = computed(() => {
 	return workflowFiles.value.filter((file) => file.status === 'modified');
 });
 
-const deletedWorkflowFiles = computed(() => {
-	return workflowFiles.value.filter((file) => file.status === 'deleted');
-});
-
 function close() {
 	uiStore.closeModal(SOURCE_CONTROL_PULL_MODAL_KEY);
 }

packages/editor-ui/src/components/SourceControlPushModal.ee.vue

@@ -2,7 +2,6 @@
 import Modal from './Modal.vue';
 import { CREDENTIAL_EDIT_MODAL_KEY, SOURCE_CONTROL_PUSH_MODAL_KEY } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
-import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import type { SourceControlAggregatedFile } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -13,12 +12,9 @@ import { useUIStore } from '@/stores/ui.store';
 import { useRoute } from 'vue-router';
 import dateformat from 'dateformat';
 
-const props = defineProps({
+const props = defineProps<{
-	data: {
+	data: { eventBus: EventBus; status: SourceControlAggregatedFile[] };
-		type: Object as PropType<{ eventBus: EventBus; status: SourceControlAggregatedFile[] }>,
+}>();
-		default: () => ({}),
-	},
-});
 
 const defaultStagedFileTypes = ['tags', 'variables', 'credential'];
 

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

@@ -1,16 +1,11 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { GenericValue } from 'n8n-workflow';
 import { computed } from 'vue';
 
-const props = defineProps({
+const props = defineProps<{
-	content: {
+	content: GenericValue;
-		type: [Object, String, Number] as PropType<GenericValue>,
+	search?: string;
-	},
+}>();
-	search: {
-		type: String,
-	},
-});
 
 const splitTextBySearch = (
 	text = '',

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ComponentPublicInstance, PropType } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import type { Rule, RuleGroup } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -19,16 +19,15 @@ const usersStore = useUsersStore();
 
 const emit = defineEmits(['save', 'cancel', 'edit', 'delete']);
 
-const props = defineProps({
+const props = withDefaults(
-	data: {
+	defineProps<{
-		type: Object as PropType<IResource>,
+		data: IResource;
-		default: () => ({}),
+		editing: boolean;
+	}>(),
+	{
+		editing: false,
 	},
-	editing: {
+);
-		type: Boolean,
-		default: false,
-	},
-});
 
 const permissions = computed(() => getVariablesPermissions(usersStore.currentUser));
 const modelValue = ref<IResource>({ ...props.data });

packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue

@@ -16,20 +16,18 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const props = defineProps({
+const props = withDefaults(
-	icon: {
+	defineProps<{
-		type: String,
+		icon?: string;
-		default: 'tasks',
+		iconColor?: string;
+		initialExpanded?: boolean;
+	}>(),
+	{
+		icon: 'tasks',
+		iconColor: 'black',
+		initialExpanded: true,
 	},
-	iconColor: {
+);
-		type: String,
-		default: 'black',
-	},
-	initialExpanded: {
-		type: Boolean,
-		default: true,
-	},
-});
 
 const expanded = ref<boolean>(props.initialExpanded);
 

packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { watch, computed, ref, onMounted } from 'vue';
 import ExecutionsFilter from '@/components/executions/ExecutionsFilter.vue';
 import GlobalExecutionsListItem from '@/components/executions/global/GlobalExecutionsListItem.vue';
@@ -13,24 +12,18 @@ import type { ExecutionSummary } from 'n8n-workflow';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 
-const props = defineProps({
+const props = withDefaults(
-	executions: {
+	defineProps<{
-		type: Array as PropType<ExecutionSummary[]>,
+		executions: ExecutionSummary[];
-		default: () => [],
+		filters: ExecutionFilterType;
+		total: number;
+		estimated: boolean;
+	}>(),
+	{
+		total: 0,
+		estimated: false,
 	},
-	filters: {
+);
-		type: Object as PropType<ExecutionFilterType>,
-		default: () => ({}),
-	},
-	total: {
-		type: Number,
-		default: 0,
-	},
-	estimated: {
-		type: Boolean,
-		default: false,
-	},
-});
 
 const emit = defineEmits(['closeModal', 'execution:stop', 'update:autoRefresh', 'update:filters']);
 

packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { ref, computed, useCssModule } from 'vue';
 import type { ExecutionSummary } from 'n8n-workflow';
 import { useI18n } from '@/composables/useI18n';
@@ -12,20 +11,16 @@ import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
 
 const emit = defineEmits(['stop', 'select', 'retrySaved', 'retryOriginal', 'delete']);
 
-const props = defineProps({
+const props = withDefaults(
-	execution: {
+	defineProps<{
-		type: Object as PropType<ExecutionSummary>,
+		execution: ExecutionSummary;
-		required: true,
+		selected?: boolean;
+		workflowName?: string;
+	}>(),
+	{
+		selected: false,
 	},
-	selected: {
+);
-		type: Boolean,
-		default: false,
-	},
-	workflowName: {
-		type: String,
-		default: undefined,
-	},
-});
 
 const style = useCssModule();
 const i18n = useI18n();

packages/editor-ui/src/views/MfaView.vue

@@ -85,9 +85,9 @@ import { toRefs } from '@vueuse/core';
 // #region Props
 // ---------------------------------------------------------------------------
 
-const props = defineProps({
+const props = defineProps<{
-	reportError: Boolean,
+	reportError: Boolean;
-});
+}>();
 
 // #endregion
 

packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { computed } from 'vue';
 import N8nHeading from 'n8n-design-system/components/N8nHeading';
 import NodeIcon from '@/components/NodeIcon.vue';
@@ -17,21 +16,16 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import type { TemplateCredentialKey } from '@/utils/templates/templateTransforms';
 
 // Props
-const props = defineProps({
+const props = withDefaults(
-	order: {
+	defineProps<{
-		type: Number,
+		order: number;
-		required: true,
+		credentials: CredentialUsages;
+		selectedCredentialId: string | null;
+	}>(),
+	{
+		selectedCredentialId: null,
 	},
-	credentials: {
+);
-		type: Object as PropType<CredentialUsages>,
-		required: true,
-	},
-	selectedCredentialId: {
-		type: String,
-		required: false,
-		default: null,
-	},
-});
 
 const emit = defineEmits<{
 	(