feat: migrated several components

packages/design-system/.storybook/main.js

@@ -28,8 +28,18 @@ module.exports = {
 		'../src/components/N8nMarkdown/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nMenu/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nMenuItem/*.stories.@(js|jsx|ts|tsx)',
-		'../src/components/N8nText/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nNodeCreatorNode/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nNodeIcon/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nNotice/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nOption/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nPulse/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nPopover/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nRadioButtons/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nSelect/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nSpinner/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nSticky/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nTags/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nText/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nTooltip/*.stories.@(js|jsx|ts|tsx)',
 	],
 	addons: [

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts

@@ -7,13 +7,14 @@ export default {
 };
 
 const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nNodeCreatorNode,
 	},
 	template: `
 		<n8n-node-creator-node v-bind="args">
-			<template v-slot:icon>
+			<template #icon>
 				<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg" />
 			</template>
 		</n8n-node-creator-node>
@@ -29,6 +30,7 @@ WithTitle.args = {
 };
 
 const PanelTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nNodeCreatorNode,
@@ -40,10 +42,10 @@ const PanelTemplate: StoryFn = (args, { argTypes }) => ({
 	},
 	template: `
 		<n8n-node-creator-node v-bind="args" :isPanelActive="isPanelActive" @click.capture="isPanelActive = true">
-			<template v-slot:icon>
+			<template #icon>
 				<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg" />
 			</template>
-			<template v-slot:panel>
+			<template #panel>
 				<p style="width: 100%; height: 300px; background: white">Lorem ipsum dolor sit amet</p>
 				<button @click="isPanelActive = false">Close</button>
 			</template>

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue

@@ -5,7 +5,6 @@
 			[$style.hasAction]: !showActionArrow,
 		}"
 		v-bind="$attrs"
-		v-bind="$attrs"
 	>
 		<div :class="$style.nodeIcon">
 			<slot name="icon" />

packages/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts

@@ -7,6 +7,7 @@ export default {
 };
 
 const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nNodeIcon,

packages/design-system/src/components/N8nNotice/Notice.stories.ts

@@ -13,6 +13,7 @@ export default {
 };
 
 const SlotTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nNotice,
@@ -22,6 +23,7 @@ const SlotTemplate: StoryFn = (args, { argTypes }) => ({
 });
 
 const PropTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nNotice,

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -9,7 +9,13 @@
 		}"
 		aria-checked="true"
 	>
-		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value" />
+		<input
+			type="radio"
+			tabindex="-1"
+			autocomplete="off"
+			:class="$style.input"
+			:modelValue="value"
+		/>
 		<div
 			:class="{
 				[$style.button]: true,

packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts

@@ -18,7 +18,7 @@ export default {
 };
 
 const methods = {
-	onInput: action('input'),
+	onInput: action('update:modelValue'),
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
@@ -27,7 +27,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	components: {
 		N8nRadioButtons,
 	},
-	template: `<n8n-radio-buttons v-model="val" v-bind="args" @input="onInput">
+	template: `<n8n-radio-buttons v-model="val" v-bind="args" @update:modelValue="onInput">
 		</n8n-radio-buttons>`,
 	methods,
 	data() {

packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue

@@ -7,7 +7,7 @@
 			v-for="option in options"
 			:key="option.value"
 			v-bind="option"
-			:active="value === option.value"
+			:active="modelValue === option.value"
 			:size="size"
 			:disabled="disabled || option.disabled"
 			@click="() => onClick(option)"
@@ -30,7 +30,7 @@ export interface RadioOption {
 export default defineComponent({
 	name: 'n8n-radio-buttons',
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 		},
 		options: {
@@ -52,7 +52,7 @@ export default defineComponent({
 			if (this.disabled || option.disabled) {
 				return;
 			}
-			this.$emit('input', option.value);
+			this.$emit('update:modelValue', option.value);
 		},
 	},
 });

packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js

@@ -42,7 +42,7 @@ const Template = (args, { argTypes }) => ({
 	},
 	template: `<div style="width: fit-content; height: fit-content">
 			<n8n-resize-wrapper
-				v-bind="$props"
+				v-bind="args"
 				@resize="onResize"
 				@resizeend="onResizeEnd"
 				@resizestart="onResizeStart"

packages/design-system/src/components/N8nSelect/Select.stories.ts

@@ -79,6 +79,7 @@ const selects = ['large', 'medium', 'small', 'mini']
 	.join('');
 
 const ManyTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nSelect,
@@ -109,6 +110,7 @@ const selectsWithIcon = ['xlarge', 'large', 'medium', 'small', 'mini']
 	.join('');
 
 const ManyTemplateWithIcon: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nSelect,
@@ -132,6 +134,7 @@ WithIcon.args = {
 };
 
 const LimitedWidthTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nSelect,

packages/design-system/src/components/N8nSelect/Select.vue

@@ -17,15 +17,13 @@
 			:popper-class="popperClass"
 			ref="innerSelect"
 		>
-			<template #prefix>
+			<template #prefix v-if="$slots.prefix">
 				<slot name="prefix" />
 			</template>
-			<template #suffix>
+			<template #suffix v-if="$slots.suffix">
 				<slot name="suffix" />
 			</template>
-			<template #default>
 			<slot></slot>
-			</template>
 		</el-select>
 	</div>
 </template>

packages/design-system/src/components/N8nSticky/Sticky.stories.ts

@@ -40,7 +40,7 @@ export default {
 };
 
 const methods = {
-	onInput: action('input'),
+	onInput: action('update:modelValue'),
 	onResize: action('resize'),
 	onResizeEnd: action('resizeend'),
 	onResizeStart: action('resizestart'),

packages/design-system/src/components/N8nSticky/Sticky.vue

@@ -16,7 +16,6 @@
 			@resize="onResize"
 			@resizestart="onResizeStart"
 		>
-			<template>
 			<div
 				v-show="!editMode"
 				class="ph-no-capture"
@@ -42,11 +41,11 @@
 				:class="{ 'full-height': !shouldShowFooter }"
 			>
 				<n8n-input
-						:value="content"
+					:modelValue="content"
 					type="textarea"
 					:rows="5"
 					@blur="onInputBlur"
-						@input="onInput"
+					@update:modelValue="onInput"
 					ref="input"
 				/>
 			</div>
@@ -55,7 +54,6 @@
 					<span v-html="t('sticky.markdownHint')"></span>
 				</n8n-text>
 			</div>
-			</template>
 		</n8n-resize-wrapper>
 	</div>
 </template>

packages/design-system/src/components/index.ts

@@ -26,19 +26,19 @@ export { default as N8nLoading } from './N8nLoading';
 export { default as N8nMarkdown } from './N8nMarkdown';
 export { default as N8nMenu } from './N8nMenu';
 export { default as N8nMenuItem } from './N8nMenuItem';
-// export { default as N8nNodeCreatorNode } from './N8nNodeCreatorNode';
+export { default as N8nNodeCreatorNode } from './N8nNodeCreatorNode';
-// export { default as N8nNodeIcon } from './N8nNodeIcon';
+export { default as N8nNodeIcon } from './N8nNodeIcon';
-// export { default as N8nNotice } from './N8nNotice';
+export { default as N8nNotice } from './N8nNotice';
-// export { default as N8nOption } from './N8nOption';
+export { default as N8nOption } from './N8nOption';
 export { default as N8nPopover } from './N8nPopover';
-// export { default as N8nPulse } from './N8nPulse';
+export { default as N8nPulse } from './N8nPulse';
-// export { default as N8nRadioButtons } from './N8nRadioButtons';
+export { default as N8nRadioButtons } from './N8nRadioButtons';
-// export { default as N8nSelect } from './N8nSelect';
+export { default as N8nSelect } from './N8nSelect';
-// export { default as N8nSpinner } from './N8nSpinner';
+export { default as N8nSpinner } from './N8nSpinner';
-// export { default as N8nSticky } from './N8nSticky';
+export { default as N8nSticky } from './N8nSticky';
+export { default as N8nTags } from './N8nTags';
 // export { default as N8nTabs } from './N8nTabs';
 // export { default as N8nTag } from './N8nTag';
-// export { default as N8nTags } from './N8nTags';
 export { default as N8nText } from './N8nText';
 export { default as N8nTooltip } from './N8nTooltip';
 // export { default as N8nTree } from './N8nTree';

packages/design-system/src/plugin.ts

@@ -26,22 +26,22 @@ import {
 	N8nInputNumber,
 	N8nLink,
 	N8nLoading,
-	// N8nMarkdown,
+	N8nMarkdown,
-	// N8nMenu,
+	N8nMenu,
-	// N8nMenuItem,
+	N8nMenuItem,
-	// N8nNodeCreatorNode,
+	N8nNodeCreatorNode,
-	// N8nNodeIcon,
+	N8nNodeIcon,
-	// N8nNotice,
+	N8nNotice,
-	// N8nOption,
+	N8nOption,
 	N8nPopover,
-	// N8nPulse,
+	N8nPulse,
-	// N8nRadioButtons,
+	N8nRadioButtons,
-	// N8nSelect,
+	N8nSelect,
-	// N8nSpinner,
+	N8nSpinner,
-	// N8nSticky,
+	N8nSticky,
+	N8nTags,
 	// N8nTabs,
 	// N8nTag,
-	// N8nTags,
 	N8nText,
 	N8nTooltip,
 	// N8nTree,
@@ -81,20 +81,20 @@ export const N8nPlugin: Plugin<{}> = {
 		app.component('n8n-input-number', N8nInputNumber);
 		app.component('n8n-link', N8nLink);
 		app.component('n8n-loading', N8nLoading);
-		// app.component('n8n-markdown', N8nMarkdown);
+		app.component('n8n-markdown', N8nMarkdown);
-		// app.component('n8n-menu', N8nMenu);
+		app.component('n8n-menu', N8nMenu);
-		// app.component('n8n-menu-item', N8nMenuItem);
+		app.component('n8n-menu-item', N8nMenuItem);
-		// app.component('n8n-node-creator-node', N8nNodeCreatorNode);
+		app.component('n8n-node-creator-node', N8nNodeCreatorNode);
-		// app.component('n8n-node-icon', N8nNodeIcon);
+		app.component('n8n-node-icon', N8nNodeIcon);
-		// app.component('n8n-notice', N8nNotice);
+		app.component('n8n-notice', N8nNotice);
-		// app.component('n8n-option', N8nOption);
+		app.component('n8n-option', N8nOption);
 		app.component('n8n-popover', N8nPopover);
-		// app.component('n8n-pulse', N8nPulse);
+		app.component('n8n-pulse', N8nPulse);
-		// app.component('n8n-select', N8nSelect);
+		app.component('n8n-radio-buttons', N8nRadioButtons);
-		// app.component('n8n-spinner', N8nSpinner);
+		app.component('n8n-select', N8nSelect);
-		// app.component('n8n-sticky', N8nSticky);
+		app.component('n8n-spinner', N8nSpinner);
-		// app.component('n8n-radio-buttons', N8nRadioButtons);
+		app.component('n8n-sticky', N8nSticky);
-		// app.component('n8n-tags', N8nTags);
+		app.component('n8n-tags', N8nTags);
 		// app.component('n8n-tabs', N8nTabs);
 		// app.component('n8n-tag', N8nTag);
 		app.component('n8n-text', N8nText);

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

@@ -4,7 +4,7 @@
 			<n8n-select
 				:size="inputSize"
 				filterable
-				:value="displayValue"
+				:modelValue="displayValue"
 				:placeholder="
 					parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
 				"

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

@@ -24,7 +24,7 @@
 					:placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
 					size="xlarge"
 					ref="select"
-					:value="selected"
+					:modelValue="selected"
 					@change="onSelect"
 					data-test-id="new-credential-type-select"
 				>

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

@@ -27,8 +27,8 @@
 					v-if="parentNodes.length"
 					:popper-append-to-body="true"
 					size="small"
-					:value="currentNodeName"
+					:modelValue="currentNodeName"
-					@input="onSelect"
+					@update:modelValue="onSelect"
 					:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
 					:placeholder="$locale.baseText('ndv.input.parentNodes')"
 					filterable

packages/editor-ui/src/components/MainHeader/TabBar.vue

@@ -7,7 +7,7 @@
 			[$style.menuCollapsed]: mainSidebarCollapsed,
 		}"
 	>
-		<n8n-radio-buttons :value="activeTab" :options="items" @input="onSelect" />
+		<n8n-radio-buttons :modelValue="activeTab" :options="items" @update:modelValue="onSelect" />
 	</div>
 </template>
 

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

@@ -29,7 +29,7 @@
 					data-test-id="node-credentials-select"
 				>
 					<n8n-select
-						:value="getSelectedId(credentialTypeDescription.name)"
+						:modelValue="getSelectedId(credentialTypeDescription.name)"
 						@change="
 							(value) =>
 								onCredentialSelected(

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

@@ -252,7 +252,7 @@
 				ref="inputField"
 				:size="inputSize"
 				filterable
-				:value="displayValue"
+				:modelValue="displayValue"
 				:placeholder="
 					parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
 				"
@@ -292,7 +292,7 @@
 				:size="inputSize"
 				filterable
 				multiple
-				:value="displayValue"
+				:modelValue="displayValue"
 				:loading="remoteParameterOptionsLoading"
 				:disabled="isReadOnly || remoteParameterOptionsLoading"
 				:title="displayTitle"

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

@@ -27,13 +27,13 @@
 			<n8n-radio-buttons
 				v-if="shouldShowExpressionSelector"
 				size="small"
-				:value="selectedView"
+				:modelValue="selectedView"
 				:disabled="isReadOnly"
-				@input="onViewSelected"
 				:options="[
 					{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
 					{ label: $locale.baseText('parameterInput.expression'), value: 'expression' },
 				]"
+				@update:modelValue="onViewSelected"
 			/>
 		</div>
 	</div>

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

@@ -45,7 +45,7 @@
 			>
 				<div v-if="hasMultipleModes" :class="$style.modeSelector">
 					<n8n-select
-						:value="selectedMode"
+						:modelValue="selectedMode"
 						filterable
 						:size="inputSize"
 						:disabled="isReadOnly"

packages/editor-ui/src/components/ResourceMapper/MappingModeSelect.vue

@@ -111,7 +111,7 @@ defineExpose({
 		>
 			<template>
 				<div class="mt-5xs">
-					<n8n-select :value="selected" :size="props.inputSize" @change="onModeChanged">
+					<n8n-select :modelValue="selected" :size="props.inputSize" @change="onModeChanged">
 						<n8n-option
 							v-for="option in mappingModeOptions"
 							:key="option.value"

packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue

@@ -131,7 +131,7 @@ defineExpose({
 		>
 			<n8n-select
 				:multiple="resourceMapperTypeOptions?.multiKeyMatch === true"
-				:value="state.selected"
+				:modelValue="state.selected"
 				:size="props.inputSize"
 				:disabled="loading"
 				@change="onSelectionChange"

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

@@ -53,10 +53,10 @@
 						((jsonData && jsonData.length > 0) || (binaryData && binaryData.length > 0)) &&
 						!editMode.enabled
 					"
-					:value="displayMode"
+					:modelValue="displayMode"
 					:options="buttons"
-					@input="onDisplayModeChange"
 					data-test-id="ndv-run-data-display-mode"
+					@update:modelValue="onDisplayModeChange"
 				/>
 				<n8n-icon-button
 					v-if="canPinData && !isReadOnly"
@@ -129,8 +129,8 @@
 		>
 			<n8n-select
 				size="small"
-				:value="runIndex"
+				:modelValue="runIndex"
-				@input="onRunIndexChange"
+				@update:modelValue="onRunIndexChange"
 				@click.stop
 				popper-append-to-body
 			>
@@ -451,7 +451,12 @@
 			</el-pagination>
 
 			<div :class="$style.pageSizeSelector">
-				<n8n-select size="mini" :value="pageSize" @input="onPageSizeChange" popper-append-to-body>
+				<n8n-select
+					size="mini"
+					:modelValue="pageSize"
+					@update:modelValue="onPageSizeChange"
+					popper-append-to-body
+				>
 					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
 					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
 					</n8n-option>

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue

@@ -83,7 +83,7 @@
 						:underline="false"
 					>
 						<n8n-select
-							:value="typeSelectValue"
+							:modelValue="typeSelectValue"
 							:placeholder="typeSelectPlaceholder"
 							@change="onTypeSelectInput"
 							data-test-id="select-destination-type"

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

@@ -2,7 +2,7 @@
 	<div :class="{ 'tags-container': true, focused }" @keydown.stop v-click-outside="onClickOutside">
 		<n8n-select
 			:popperAppendToBody="false"
-			:value="appliedTags"
+			:modelValue="appliedTags"
 			:loading="tagsStore.isLoading"
 			:placeholder="placeholder"
 			:filter-method="filterOptions"

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

@@ -55,7 +55,7 @@
 						<template #actions="{ user }">
 							<n8n-select
 								:class="$style.roleSelect"
-								value="editor"
+								modelValue="editor"
 								size="small"
 								@change="onRoleAction(user, $event)"
 							>

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

@@ -23,13 +23,13 @@
 					class="mb-3xs"
 				/>
 				<n8n-select
-					:value="filters.type"
+					:modelValue="filters.type"
 					size="medium"
 					multiple
 					filterable
 					ref="typeInput"
 					:class="$style['type-input']"
-					@input="setKeyValue('type', $event)"
+					@update:modelValue="setKeyValue('type', $event)"
 				>
 					<n8n-option
 						v-for="credentialType in allCredentialTypes"

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

@@ -307,11 +307,11 @@ const refreshBranches = async () => {
 					<label>{{ locale.baseText('settings.versionControl.branches') }}</label>
 					<div :class="$style.branchSelection">
 						<n8n-select
-							:value="versionControlStore.preferences.branchName"
+							:modelValue="versionControlStore.preferences.branchName"
 							class="mb-s"
 							size="medium"
 							filterable
-							@input="onSelect"
+							@update:modelValue="onSelect"
 							data-test-id="version-control-branch-select"
 						>
 							<n8n-option

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

@@ -77,7 +77,11 @@
 					color="text-base"
 					class="mb-3xs"
 				/>
-				<n8n-select :value="filters.status" @input="setKeyValue('status', $event)" size="medium">
+				<n8n-select
+					:modelValue="filters.status"
+					@update:modelValue="setKeyValue('status', $event)"
+					size="medium"
+				>
 					<n8n-option
 						v-for="option in statusFilterOptions"
 						:key="option.label"