refactor(editor): Migrate EventDestinationSettingsModal.ee.vue to composition API (no-changelog) (#11584)

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

@@ -1,17 +1,15 @@
-<script lang="ts">
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
 import { get, set, unset } from 'lodash-es';
-import { mapStores } from 'pinia';
-import { useLogStreamingStore } from '@/stores/logStreaming.store';
-import { useNDVStore } from '@/stores/ndv.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import ParameterInputList from '@/components/ParameterInputList.vue';
-import type { IMenuItem, INodeUi, IUpdateInformation, ModalKey } from '@/Interface';
 import type {
 	IDataObject,
 	NodeParameterValue,
 	MessageEventBusDestinationOptions,
 	INodeParameters,
 	NodeParameterValueType,
+	MessageEventBusDestinationSentryOptions,
+	MessageEventBusDestinationSyslogOptions,
+	MessageEventBusDestinationWebhookOptions,
 } from 'n8n-workflow';
 import {
 	deepCopy,
@@ -22,81 +20,76 @@ import {
 	defaultMessageEventBusDestinationSyslogOptions,
 	defaultMessageEventBusDestinationSentryOptions,
 } from 'n8n-workflow';
-import type { PropType } from 'vue';
+import type { EventBus } from 'n8n-design-system';
-import { defineComponent } from 'vue';
+import { createEventBus } from 'n8n-design-system/utils';
+
+import { useLogStreamingStore } from '@/stores/logStreaming.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import ParameterInputList from '@/components/ParameterInputList.vue';
+import type { IMenuItem, IUpdateInformation, ModalKey } from '@/Interface';
 import { LOG_STREAM_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
 import Modal from '@/components/Modal.vue';
+import { useI18n } from '@/composables/useI18n';
 import { useMessage } from '@/composables/useMessage';
 import { useUIStore } from '@/stores/ui.store';
 import { hasPermission } from '@/utils/rbac/permissions';
 import { destinationToFakeINodeUi } from '@/components/SettingsLogStreaming/Helpers.ee';
+import type { BaseTextKey } from '@/plugins/i18n';
+import InlineNameEdit from '@/components/InlineNameEdit.vue';
+import SaveButton from '@/components/SaveButton.vue';
+import EventSelection from '@/components/SettingsLogStreaming/EventSelection.ee.vue';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useRootStore } from '@/stores/root.store';
+
 import {
 	webhookModalDescription,
 	sentryModalDescription,
 	syslogModalDescription,
 } from './descriptions.ee';
-import type { BaseTextKey } from '@/plugins/i18n';
-import InlineNameEdit from '@/components/InlineNameEdit.vue';
-import SaveButton from '@/components/SaveButton.vue';
-import EventSelection from '@/components/SettingsLogStreaming/EventSelection.ee.vue';
-import type { EventBus } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system/utils';
-import { useTelemetry } from '@/composables/useTelemetry';
-import { useRootStore } from '@/stores/root.store';
 
-export default defineComponent({
+defineOptions({ name: 'EventDestinationSettingsModal' });
-	name: 'EventDestinationSettingsModal',
+
-	components: {
+const props = withDefaults(
-		Modal,
+	defineProps<{
-		ParameterInputList,
+		modalName: ModalKey;
-		InlineNameEdit,
+		destination?: MessageEventBusDestinationOptions;
-		SaveButton,
+		isNew?: boolean;
-		EventSelection,
+		eventBus?: EventBus;
+	}>(),
+	{
+		destination: () => deepCopy(defaultMessageEventBusDestinationOptions),
+		isNew: false,
 	},
-	props: {
+);
-		modalName: {
+const { modalName, destination, isNew, eventBus } = props;
-			type: String as PropType<ModalKey>,
+
-			required: true,
+const i18n = useI18n();
-		},
+const { confirm } = useMessage();
-		destination: {
+const telemetry = useTelemetry();
-			type: Object,
+const logStreamingStore = useLogStreamingStore();
-			default: () => deepCopy(defaultMessageEventBusDestinationOptions),
+const ndvStore = useNDVStore();
-		},
+const workflowsStore = useWorkflowsStore();
-		isNew: Boolean,
+const uiStore = useUIStore();
-		eventBus: {
+
-			type: Object as PropType<EventBus>,
+const unchanged = ref(!isNew);
-		},
+const activeTab = ref('settings');
-	},
+const hasOnceBeenSaved = ref(!isNew);
-	setup() {
+const isSaving = ref(false);
-		return {
+const isDeleting = ref(false);
-			...useMessage(),
+const loading = ref(false);
-		};
+const typeSelectValue = ref('');
-	},
+const typeSelectPlaceholder = ref('Destination Type');
-	data() {
+const nodeParameters = ref(deepCopy(defaultMessageEventBusDestinationOptions) as INodeParameters);
-		return {
+const webhookDescription = ref(webhookModalDescription);
-			unchanged: !this.isNew,
+const sentryDescription = ref(sentryModalDescription);
-			activeTab: 'settings',
+const syslogDescription = ref(syslogModalDescription);
-			hasOnceBeenSaved: !this.isNew,
+const modalBus = ref(createEventBus());
-			isSaving: false,
+const headerLabel = ref(destination.label!);
-			isDeleting: false,
+const testMessageSent = ref(false);
-			loading: false,
+const testMessageResult = ref(false);
-			showRemoveConfirm: false,
+
-			typeSelectValue: '',
+const typeSelectOptions = computed(() => {
-			typeSelectPlaceholder: 'Destination Type',
-			nodeParameters: deepCopy(defaultMessageEventBusDestinationOptions) as INodeParameters,
-			webhookDescription: webhookModalDescription,
-			sentryDescription: sentryModalDescription,
-			syslogDescription: syslogModalDescription,
-			modalBus: createEventBus(),
-			headerLabel: this.destination.label,
-			testMessageSent: false,
-			testMessageResult: false,
-			LOG_STREAM_MODAL_KEY,
-		};
-	},
-	computed: {
-		...mapStores(useUIStore, useLogStreamingStore, useNDVStore, useWorkflowsStore),
-		typeSelectOptions(): Array<{ value: string; label: BaseTextKey }> {
 	const options: Array<{ value: string; label: BaseTextKey }> = [];
 	for (const t of messageEventBusDestinationTypeNames) {
 		if (t === MessageEventBusDestinationTypeNames.abstract) {
@@ -108,252 +101,256 @@ export default defineComponent({
 		});
 	}
 	return options;
-		},
+});
-		isTypeAbstract(): boolean {
+
-			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.abstract;
+const isTypeAbstract = computed(
-		},
+	() => nodeParameters.value.__type === MessageEventBusDestinationTypeNames.abstract,
-		isTypeWebhook(): boolean {
+);
-			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.webhook;
+
-		},
+const isTypeWebhook = computed(
-		isTypeSyslog(): boolean {
+	() => nodeParameters.value.__type === MessageEventBusDestinationTypeNames.webhook,
-			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.syslog;
+);
-		},
+
-		isTypeSentry(): boolean {
+const isTypeSyslog = computed(
-			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.sentry;
+	() => nodeParameters.value.__type === MessageEventBusDestinationTypeNames.syslog,
-		},
+);
-		node(): INodeUi {
+
-			return destinationToFakeINodeUi(this.nodeParameters);
+const isTypeSentry = computed(
-		},
+	() => nodeParameters.value.__type === MessageEventBusDestinationTypeNames.sentry,
-		typeLabelName(): BaseTextKey {
+);
-			return `settings.log-streaming.${this.nodeParameters.__type}` as BaseTextKey;
+
-		},
+const node = computed(() => destinationToFakeINodeUi(nodeParameters.value));
-		sidebarItems(): IMenuItem[] {
+
+const typeLabelName = computed(
+	() => `settings.log-streaming.${nodeParameters.value.__type}` as BaseTextKey,
+);
+
+const sidebarItems = computed(() => {
 	const items: IMenuItem[] = [
 		{
 			id: 'settings',
-					label: this.$locale.baseText('settings.log-streaming.tab.settings'),
+			label: i18n.baseText('settings.log-streaming.tab.settings'),
 			position: 'top',
 		},
 	];
-			if (!this.isTypeAbstract) {
+	if (!isTypeAbstract.value) {
 		items.push({
 			id: 'events',
-					label: this.$locale.baseText('settings.log-streaming.tab.events'),
+			label: i18n.baseText('settings.log-streaming.tab.events'),
 			position: 'top',
 		});
 	}
 	return items;
-		},
+});
-		canManageLogStreaming(): boolean {
+
-			return hasPermission(['rbac'], { rbac: { scope: 'logStreaming:manage' } });
+const canManageLogStreaming = computed(() =>
-		},
+	hasPermission(['rbac'], { rbac: { scope: 'logStreaming:manage' } }),
-	},
+);
-	mounted() {
+
-		this.setupNode(
+onMounted(() => {
-			Object.assign(deepCopy(defaultMessageEventBusDestinationOptions), this.destination),
+	setupNode(Object.assign(deepCopy(defaultMessageEventBusDestinationOptions), destination));
-		);
+	workflowsStore.$onAction(({ name, args }) => {
-		this.workflowsStore.$onAction(
-			({
-				name, // name of the action
-				args, // array of parameters passed to the action
-			}) => {
 		if (name === 'updateNodeProperties') {
 			for (const arg of args) {
-						if (arg.name === this.destination.id) {
+				if (arg.name === destination.id) {
 					if ('credentials' in arg.properties) {
-								this.unchanged = false;
+						unchanged.value = false;
-								this.nodeParameters.credentials = arg.properties
+						nodeParameters.value.credentials = arg.properties.credentials as NodeParameterValueType;
-									.credentials as NodeParameterValueType;
 					}
 				}
 			}
 		}
-			},
+	});
-		);
+});
-	},
+
-	methods: {
+function onInput() {
-		onInput() {
+	unchanged.value = false;
-			this.unchanged = false;
+	testMessageSent.value = false;
-			this.testMessageSent = false;
+}
-		},
+
-		onTabSelect(tab: string) {
+function onTabSelect(tab: string) {
-			this.activeTab = tab;
+	activeTab.value = tab;
-		},
+}
-		onLabelChange(value: string) {
+
-			this.onInput();
+function onLabelChange(value: string) {
-			this.headerLabel = value;
+	onInput();
-			this.nodeParameters.label = value;
+	headerLabel.value = value;
-		},
+	nodeParameters.value.label = value;
-		setupNode(options: MessageEventBusDestinationOptions) {
+}
-			this.workflowsStore.removeNode(this.node);
+
-			this.ndvStore.activeNodeName = options.id ?? 'thisshouldnothappen';
+function setupNode(options: MessageEventBusDestinationOptions) {
-			this.workflowsStore.addNode(destinationToFakeINodeUi(options));
+	workflowsStore.removeNode(node.value);
-			this.nodeParameters = options as INodeParameters;
+	ndvStore.activeNodeName = options.id ?? 'thisshouldnothappen';
-			this.logStreamingStore.items[this.destination.id].destination = options;
+	workflowsStore.addNode(destinationToFakeINodeUi(options));
-		},
+	nodeParameters.value = options as INodeParameters;
-		onTypeSelectInput(destinationType: MessageEventBusDestinationTypeNames) {
+	logStreamingStore.items[destination.id!].destination = options;
-			this.typeSelectValue = destinationType;
+}
-		},
+
-		async onContinueAddClicked() {
+function onTypeSelectInput(destinationType: MessageEventBusDestinationTypeNames) {
+	typeSelectValue.value = destinationType;
+}
+
+async function onContinueAddClicked() {
 	let newDestination;
-			switch (this.typeSelectValue) {
+	switch (typeSelectValue.value) {
 		case MessageEventBusDestinationTypeNames.syslog:
 			newDestination = Object.assign(deepCopy(defaultMessageEventBusDestinationSyslogOptions), {
-						id: this.destination.id,
+				id: destination.id,
 			});
 			break;
 		case MessageEventBusDestinationTypeNames.sentry:
 			newDestination = Object.assign(deepCopy(defaultMessageEventBusDestinationSentryOptions), {
-						id: this.destination.id,
+				id: destination.id,
 			});
 			break;
 		case MessageEventBusDestinationTypeNames.webhook:
-					newDestination = Object.assign(
+			newDestination = Object.assign(deepCopy(defaultMessageEventBusDestinationWebhookOptions), {
-						deepCopy(defaultMessageEventBusDestinationWebhookOptions),
+				id: destination.id,
-						{ id: this.destination.id },
+			});
-					);
 			break;
 	}
 
 	if (newDestination) {
-				this.headerLabel = newDestination?.label ?? this.headerLabel;
+		headerLabel.value = newDestination?.label ?? headerLabel.value;
-				this.setupNode(newDestination);
+		setupNode(newDestination);
 	}
-		},
+}
-		valueChanged(parameterData: IUpdateInformation) {
+
-			this.unchanged = false;
+function valueChanged(parameterData: IUpdateInformation) {
-			this.testMessageSent = false;
+	unchanged.value = false;
+	testMessageSent.value = false;
 	const newValue: NodeParameterValue = parameterData.value as string | number;
 	const parameterPath = parameterData.name?.startsWith('parameters.')
 		? parameterData.name.split('.').slice(1).join('.')
 		: parameterData.name || '';
 
-			const nodeParameters = deepCopy(this.nodeParameters);
+	const nodeParametersCopy = deepCopy(nodeParameters.value);
 
-			// Check if the path is supposed to change an array and if so get
+	if (parameterData.value === undefined && parameterPath.match(/(.*)\[(\d+)\]$/)) {
-			// the needed data like path and index
+		const path = parameterPath.match(
-			const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
+			/(.*)\[(\d+)\]$/,
-
+		)?.[1] as keyof MessageEventBusDestinationOptions;
-			// Apply the new value
+		const index = parseInt(parameterPath.match(/(.*)\[(\d+)\]$/)?.[2] ?? '0', 10);
-			if (parameterData.value === undefined && parameterPathArray !== null) {
+		const data = get(nodeParametersCopy, path);
-				// Delete array item
-				const path = parameterPathArray[1] as keyof MessageEventBusDestinationOptions;
-				const index = parameterPathArray[2];
-				const data = get(nodeParameters, path);
 
 		if (Array.isArray(data)) {
-					data.splice(parseInt(index, 10), 1);
+			data.splice(index, 1);
-					nodeParameters[path] = data as never;
+			nodeParametersCopy[path] = data as never;
 		}
 	} else {
 		if (newValue === undefined) {
-					unset(nodeParameters, parameterPath);
+			unset(nodeParametersCopy, parameterPath);
 		} else {
-					set(nodeParameters, parameterPath, newValue);
+			set(nodeParametersCopy, parameterPath, newValue);
 		}
 	}
 
-			this.nodeParameters = deepCopy(nodeParameters);
+	nodeParameters.value = deepCopy(nodeParametersCopy);
-			this.workflowsStore.updateNodeProperties({
+	workflowsStore.updateNodeProperties({
-				name: this.node.name,
+		name: node.value.name,
-				properties: { parameters: this.nodeParameters as unknown as IDataObject, position: [0, 0] },
+		properties: { parameters: nodeParameters.value as unknown as IDataObject, position: [0, 0] },
 	});
-			if (this.hasOnceBeenSaved) {
+	if (hasOnceBeenSaved.value) {
-				this.logStreamingStore.updateDestination(this.nodeParameters);
+		logStreamingStore.updateDestination(nodeParameters.value);
 	}
-		},
+}
-		async sendTestEvent() {
+
-			this.testMessageResult = await this.logStreamingStore.sendTestMessage(this.nodeParameters);
+async function sendTestEvent() {
-			this.testMessageSent = true;
+	testMessageResult.value = await logStreamingStore.sendTestMessage(nodeParameters.value);
-		},
+	testMessageSent.value = true;
-		async removeThis() {
+}
-			const deleteConfirmed = await this.confirm(
+
-				this.$locale.baseText('settings.log-streaming.destinationDelete.message', {
+async function removeThis() {
-					interpolate: { destinationName: this.destination.label },
+	const deleteConfirmed = await confirm(
+		i18n.baseText('settings.log-streaming.destinationDelete.message', {
+			interpolate: { destinationName: destination.label! },
 		}),
-				this.$locale.baseText('settings.log-streaming.destinationDelete.headline'),
+		i18n.baseText('settings.log-streaming.destinationDelete.headline'),
 		{
 			type: 'warning',
-					confirmButtonText: this.$locale.baseText(
+			confirmButtonText: i18n.baseText(
 				'settings.log-streaming.destinationDelete.confirmButtonText',
 			),
-					cancelButtonText: this.$locale.baseText(
+			cancelButtonText: i18n.baseText('settings.log-streaming.destinationDelete.cancelButtonText'),
-						'settings.log-streaming.destinationDelete.cancelButtonText',
-					),
 		},
 	);
 
 	if (deleteConfirmed !== MODAL_CONFIRM) {
 		return;
 	} else {
-				this.callEventBus('remove', this.destination.id);
+		callEventBus('remove', destination.id);
-				this.uiStore.closeModal(LOG_STREAM_MODAL_KEY);
+		uiStore.closeModal(LOG_STREAM_MODAL_KEY);
-				this.uiStore.stateIsDirty = false;
+		uiStore.stateIsDirty = false;
 	}
-		},
+}
-		onModalClose() {
+
-			if (!this.hasOnceBeenSaved) {
+function onModalClose() {
-				this.workflowsStore.removeNode(this.node);
+	if (!hasOnceBeenSaved.value) {
-				if (this.nodeParameters.id && typeof this.nodeParameters.id !== 'object') {
+		workflowsStore.removeNode(node.value);
-					this.logStreamingStore.removeDestination(this.nodeParameters.id.toString());
+		if (nodeParameters.value.id && typeof nodeParameters.value.id !== 'object') {
+			logStreamingStore.removeDestination(nodeParameters.value.id.toString());
 		}
 	}
-			this.ndvStore.activeNodeName = null;
+	ndvStore.activeNodeName = null;
-			this.callEventBus('closing', this.destination.id);
+	callEventBus('closing', destination.id);
-			this.uiStore.stateIsDirty = false;
+	uiStore.stateIsDirty = false;
-		},
+}
-		async saveDestination() {
+
-			if (this.unchanged || !this.destination.id) {
+async function saveDestination() {
+	if (unchanged.value || !destination.id) {
 		return;
 	}
-			const saveResult = await this.logStreamingStore.saveDestination(this.nodeParameters);
+	const saveResult = await logStreamingStore.saveDestination(nodeParameters.value);
 	if (saveResult) {
-				this.hasOnceBeenSaved = true;
+		hasOnceBeenSaved.value = true;
-				this.testMessageSent = false;
+		testMessageSent.value = false;
-				this.unchanged = true;
+		unchanged.value = true;
-				this.callEventBus('destinationWasSaved', this.destination.id);
+		callEventBus('destinationWasSaved', destination.id);
-				this.uiStore.stateIsDirty = false;
+		uiStore.stateIsDirty = false;
 
 		const destinationType = (
-					this.nodeParameters.__type && typeof this.nodeParameters.__type !== 'object'
+			nodeParameters.value.__type && typeof nodeParameters.value.__type !== 'object'
-						? `${this.nodeParameters.__type}`
+				? `${nodeParameters.value.__type}`
 				: 'unknown'
 		)
 			.replace('$$MessageEventBusDestination', '')
 			.toLowerCase();
 
 		const isComplete = () => {
-					if (this.isTypeWebhook) {
+			if (isTypeWebhook.value) {
-						return this.destination.host !== '';
+				const webhookDestination = destination as MessageEventBusDestinationWebhookOptions;
-					} else if (this.isTypeSentry) {
+				return webhookDestination.url !== '';
-						return this.destination.dsn !== '';
+			} else if (isTypeSentry.value) {
-					} else if (this.isTypeSyslog) {
+				const sentryDestination = destination as MessageEventBusDestinationSentryOptions;
+				return sentryDestination.dsn !== '';
+			} else if (isTypeSyslog.value) {
+				const syslogDestination = destination as MessageEventBusDestinationSyslogOptions;
 				return (
-							this.destination.host !== '' &&
+					syslogDestination.host !== '' &&
-							this.destination.port !== undefined &&
+					syslogDestination.port !== undefined &&
-							this.destination.protocol !== '' &&
+					// @ts-expect-error TODO: fix this typing
-							this.destination.facility !== undefined &&
+					syslogDestination.protocol !== '' &&
-							this.destination.app_name !== ''
+					syslogDestination.facility !== undefined &&
+					syslogDestination.app_name !== ''
 				);
 			}
 			return false;
 		};
 
-				useTelemetry().track('User updated log streaming destination', {
+		telemetry.track('User updated log streaming destination', {
 			instance_id: useRootStore().instanceId,
 			destination_type: destinationType,
 			is_complete: isComplete(),
-					is_active: this.destination.enabled,
+			is_active: destination.enabled,
 		});
 	}
-		},
+}
-		callEventBus(event: string, data: unknown) {
+
-			if (this.eventBus) {
+function callEventBus(event: string, data: unknown) {
-				this.eventBus.emit(event, data);
+	if (eventBus) {
+		eventBus.emit(event, data);
 	}
-		},
+}
-	},
-});
 </script>
 
 <template>
@@ -381,7 +378,7 @@ export default defineComponent({
 					<div :class="$style.destinationInfo">
 						<InlineNameEdit
 							:model-value="headerLabel"
-							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
+							:subtitle="!isTypeAbstract ? i18n.baseText(typeLabelName) : 'Select type'"
 							:readonly="isTypeAbstract"
 							type="Credential"
 							data-test-id="subtitle-showing-type"
@@ -406,7 +403,7 @@ export default defineComponent({
 						<template v-if="canManageLogStreaming">
 							<n8n-icon-button
 								v-if="nodeParameters && hasOnceBeenSaved"
-								:title="$locale.baseText('settings.log-streaming.delete')"
+								:title="i18n.baseText('settings.log-streaming.delete')"
 								icon="trash"
 								type="tertiary"
 								:disabled="isSaving"
@@ -417,7 +414,7 @@ export default defineComponent({
 							<SaveButton
 								:saved="unchanged && hasOnceBeenSaved"
 								:disabled="isTypeAbstract || unchanged"
-								:saving-label="$locale.baseText('settings.log-streaming.saving')"
+								:saving-label="i18n.baseText('settings.log-streaming.saving')"
 								data-test-id="destination-save-button"
 								@click="saveDestination"
 							/>
@@ -432,8 +429,8 @@ export default defineComponent({
 				<template v-if="isTypeAbstract">
 					<n8n-input-label
 						:class="$style.typeSelector"
-						:label="$locale.baseText('settings.log-streaming.selecttype')"
+						:label="i18n.baseText('settings.log-streaming.selecttype')"
-						:tooltip-text="$locale.baseText('settings.log-streaming.selecttypehint')"
+						:tooltip-text="i18n.baseText('settings.log-streaming.selecttypehint')"
 						:bold="false"
 						size="medium"
 						:underline="false"
@@ -450,7 +447,7 @@ export default defineComponent({
 								v-for="option in typeSelectOptions || []"
 								:key="option.value"
 								:value="option.value"
-								:label="$locale.baseText(option.label)"
+								:label="i18n.baseText(option.label)"
 							/>
 						</n8n-select>
 						<div class="mt-m text-right">
@@ -460,7 +457,7 @@ export default defineComponent({
 								:disabled="!typeSelectValue"
 								@click="onContinueAddClicked"
 							>
-								{{ $locale.baseText(`settings.log-streaming.continue`) }}
+								{{ i18n.baseText(`settings.log-streaming.continue`) }}
 							</n8n-button>
 						</div>
 					</n8n-input-label>
@@ -505,7 +502,7 @@ export default defineComponent({
 						<div class="">
 							<n8n-input-label
 								class="mb-m mt-m"
-								:label="$locale.baseText('settings.log-streaming.tab.events.title')"
+								:label="i18n.baseText('settings.log-streaming.tab.events.title')"
 								:bold="true"
 								size="medium"
 								:underline="false"