mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 04:34:06 -08:00
refactor(core): Migrate Modal.vue
to composition API (no-changelog) (#10792)
This commit is contained in:
parent
2be601af9e
commit
64aa1813b2
|
@ -138,7 +138,7 @@ onMounted(() => {
|
||||||
:center="true"
|
:center="true"
|
||||||
width="460px"
|
width="460px"
|
||||||
:event-bus="modalBus"
|
:event-bus="modalBus"
|
||||||
@enter="onSubmit"
|
@enter="onSubmitClick"
|
||||||
>
|
>
|
||||||
<template #content>
|
<template #content>
|
||||||
<n8n-form-inputs
|
<n8n-form-inputs
|
||||||
|
|
|
@ -1,184 +1,131 @@
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElDialog } from 'element-plus';
|
import { ElDialog } from 'element-plus';
|
||||||
import { defineComponent } from 'vue';
|
import { computed, onMounted, onBeforeUnmount } from 'vue';
|
||||||
import type { PropType } from 'vue';
|
|
||||||
import { mapStores } from 'pinia';
|
|
||||||
import type { EventBus } from 'n8n-design-system';
|
import type { EventBus } from 'n8n-design-system';
|
||||||
import { useUIStore } from '@/stores/ui.store';
|
import { useUIStore } from '@/stores/ui.store';
|
||||||
import type { ModalKey } from '@/Interface';
|
import type { ModalKey } from '@/Interface';
|
||||||
import { APP_MODALS_ELEMENT_ID } from '@/constants';
|
import { APP_MODALS_ELEMENT_ID } from '@/constants';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = withDefaults(
|
||||||
name: 'Modal',
|
defineProps<{
|
||||||
props: {
|
name: ModalKey;
|
||||||
...ElDialog.props,
|
title?: string;
|
||||||
name: {
|
subtitle?: string;
|
||||||
type: String as PropType<ModalKey>,
|
eventBus?: EventBus;
|
||||||
required: true,
|
showClose?: boolean;
|
||||||
},
|
loading?: boolean;
|
||||||
title: {
|
classic?: boolean;
|
||||||
type: String,
|
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
|
||||||
default: '',
|
beforeClose?: () => boolean | Promise<boolean | void> | void;
|
||||||
},
|
customClass?: string;
|
||||||
subtitle: {
|
center?: boolean;
|
||||||
type: String,
|
width?: string;
|
||||||
default: '',
|
minWidth?: string;
|
||||||
},
|
maxWidth?: string;
|
||||||
eventBus: {
|
height?: string;
|
||||||
type: Object as PropType<EventBus>,
|
minHeight?: string;
|
||||||
default: null,
|
maxHeight?: string;
|
||||||
},
|
scrollable?: boolean;
|
||||||
showClose: {
|
centerTitle?: boolean;
|
||||||
type: Boolean,
|
closeOnClickModal?: boolean;
|
||||||
default: true,
|
closeOnPressEscape?: boolean;
|
||||||
},
|
appendToBody?: boolean;
|
||||||
loading: {
|
}>(),
|
||||||
type: Boolean,
|
{
|
||||||
},
|
title: '',
|
||||||
classic: {
|
subtitle: '',
|
||||||
type: Boolean,
|
showClose: true,
|
||||||
},
|
loading: false,
|
||||||
beforeClose: {
|
classic: false,
|
||||||
type: Function,
|
customClass: '',
|
||||||
default: null,
|
center: true,
|
||||||
},
|
width: '50%',
|
||||||
customClass: {
|
scrollable: false,
|
||||||
type: String,
|
centerTitle: false,
|
||||||
default: '',
|
closeOnClickModal: true,
|
||||||
},
|
closeOnPressEscape: true,
|
||||||
center: {
|
appendToBody: false,
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '50%',
|
|
||||||
},
|
|
||||||
minWidth: {
|
|
||||||
type: [String, null] as PropType<string | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
maxWidth: {
|
|
||||||
type: [String, null] as PropType<string | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: [String, null] as PropType<string | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
minHeight: {
|
|
||||||
type: [String, null] as PropType<string | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
maxHeight: {
|
|
||||||
type: [String, null] as PropType<string | null>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
scrollable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
centerTitle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
closeOnClickModal: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
closeOnPressEscape: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
appendToBody: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
emits: { enter: null },
|
);
|
||||||
computed: {
|
|
||||||
...mapStores(useUIStore),
|
|
||||||
styles() {
|
|
||||||
const styles: { [prop: string]: string } = {};
|
|
||||||
if (this.height) {
|
|
||||||
styles['--dialog-height'] = this.height;
|
|
||||||
}
|
|
||||||
if (this.minHeight) {
|
|
||||||
styles['--dialog-min-height'] = this.minHeight;
|
|
||||||
}
|
|
||||||
if (this.maxHeight) {
|
|
||||||
styles['--dialog-max-height'] = this.maxHeight;
|
|
||||||
}
|
|
||||||
if (this.maxWidth) {
|
|
||||||
styles['--dialog-max-width'] = this.maxWidth;
|
|
||||||
}
|
|
||||||
if (this.minWidth) {
|
|
||||||
styles['--dialog-min-width'] = this.minWidth;
|
|
||||||
}
|
|
||||||
return styles;
|
|
||||||
},
|
|
||||||
appModalsId() {
|
|
||||||
return `#${APP_MODALS_ELEMENT_ID}`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
window.addEventListener('keydown', this.onWindowKeydown);
|
|
||||||
|
|
||||||
this.eventBus?.on('close', this.closeDialog);
|
const emit = defineEmits<{ enter: [] }>();
|
||||||
|
|
||||||
const activeElement = document.activeElement as HTMLElement;
|
const styles = computed(() => {
|
||||||
if (activeElement) {
|
const styles: { [prop: string]: string } = {};
|
||||||
activeElement.blur();
|
if (props.height) {
|
||||||
}
|
styles['--dialog-height'] = props.height;
|
||||||
},
|
}
|
||||||
beforeUnmount() {
|
if (props.minHeight) {
|
||||||
this.eventBus?.off('close', this.closeDialog);
|
styles['--dialog-min-height'] = props.minHeight;
|
||||||
window.removeEventListener('keydown', this.onWindowKeydown);
|
}
|
||||||
},
|
if (props.maxHeight) {
|
||||||
methods: {
|
styles['--dialog-max-height'] = props.maxHeight;
|
||||||
onWindowKeydown(event: KeyboardEvent) {
|
}
|
||||||
if (!this.uiStore.isModalActiveById[this.name]) {
|
if (props.maxWidth) {
|
||||||
return;
|
styles['--dialog-max-width'] = props.maxWidth;
|
||||||
}
|
}
|
||||||
|
if (props.minWidth) {
|
||||||
if (event && event.keyCode === 13) {
|
styles['--dialog-min-width'] = props.minWidth;
|
||||||
this.handleEnter();
|
}
|
||||||
}
|
return styles;
|
||||||
},
|
|
||||||
handleEnter() {
|
|
||||||
if (this.uiStore.isModalActiveById[this.name]) {
|
|
||||||
this.$emit('enter');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async onCloseDialog() {
|
|
||||||
await this.closeDialog();
|
|
||||||
},
|
|
||||||
async closeDialog(returnData?: unknown) {
|
|
||||||
if (this.beforeClose) {
|
|
||||||
const shouldClose = await this.beforeClose();
|
|
||||||
if (shouldClose === false) {
|
|
||||||
// must be strictly false to stop modal from closing
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.uiStore.closeModal(this.name);
|
|
||||||
this.eventBus?.emit('closed', returnData);
|
|
||||||
},
|
|
||||||
getCustomClass() {
|
|
||||||
let classes = this.customClass || '';
|
|
||||||
|
|
||||||
if (this.classic) {
|
|
||||||
classes = `${classes} classic`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return classes;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const appModalsId = `#${APP_MODALS_ELEMENT_ID}`;
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('keydown', onWindowKeydown);
|
||||||
|
props.eventBus?.on('close', closeDialog);
|
||||||
|
const activeElement = document.activeElement as HTMLElement;
|
||||||
|
if (activeElement) {
|
||||||
|
activeElement.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
props.eventBus?.off('close', closeDialog);
|
||||||
|
window.removeEventListener('keydown', onWindowKeydown);
|
||||||
|
});
|
||||||
|
|
||||||
|
const uiStore = useUIStore();
|
||||||
|
|
||||||
|
function handleEnter() {
|
||||||
|
if (!uiStore.isModalActiveById[props.name]) return;
|
||||||
|
emit('enter');
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowKeydown(event: KeyboardEvent) {
|
||||||
|
if (event?.keyCode === 13) handleEnter();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function closeDialog(returnData?: unknown) {
|
||||||
|
if (props.beforeClose) {
|
||||||
|
const shouldClose = await props.beforeClose();
|
||||||
|
if (shouldClose === false) {
|
||||||
|
// must be strictly false to stop modal from closing
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uiStore.closeModal(props.name);
|
||||||
|
props.eventBus?.emit('closed', returnData);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onCloseDialog() {
|
||||||
|
await closeDialog();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCustomClass() {
|
||||||
|
let classes = props.customClass || '';
|
||||||
|
|
||||||
|
if (props.classic) {
|
||||||
|
classes = `${classes} classic`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return classes;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<ElDialog
|
||||||
:model-value="uiStore.modalsById[name].open"
|
:model-value="uiStore.modalsById[name].open"
|
||||||
:before-close="onCloseDialog"
|
:before-close="onCloseDialog"
|
||||||
:class="{
|
:class="{
|
||||||
|
@ -196,7 +143,7 @@ export default defineComponent({
|
||||||
:append-to-body="appendToBody"
|
:append-to-body="appendToBody"
|
||||||
:data-test-id="`${name}-modal`"
|
:data-test-id="`${name}-modal`"
|
||||||
:modal-class="center ? $style.center : ''"
|
:modal-class="center ? $style.center : ''"
|
||||||
z-index="2000"
|
:z-index="2000"
|
||||||
>
|
>
|
||||||
<template v-if="$slots.header" #header>
|
<template v-if="$slots.header" #header>
|
||||||
<slot v-if="!loading" name="header" />
|
<slot v-if="!loading" name="header" />
|
||||||
|
@ -225,7 +172,7 @@ export default defineComponent({
|
||||||
<div v-if="!loading && $slots.footer" :class="$style.footer">
|
<div v-if="!loading && $slots.footer" :class="$style.footer">
|
||||||
<slot name="footer" :close="closeDialog" />
|
<slot name="footer" :close="closeDialog" />
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</ElDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { useLogStreamingStore } from '@/stores/logStreaming.store';
|
||||||
import { useNDVStore } from '@/stores/ndv.store';
|
import { useNDVStore } from '@/stores/ndv.store';
|
||||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||||
import ParameterInputList from '@/components/ParameterInputList.vue';
|
import ParameterInputList from '@/components/ParameterInputList.vue';
|
||||||
import type { IMenuItem, INodeUi, IUpdateInformation } from '@/Interface';
|
import type { IMenuItem, INodeUi, IUpdateInformation, ModalKey } from '@/Interface';
|
||||||
import type {
|
import type {
|
||||||
IDataObject,
|
IDataObject,
|
||||||
NodeParameterValue,
|
NodeParameterValue,
|
||||||
|
@ -54,7 +54,10 @@ export default defineComponent({
|
||||||
EventSelection,
|
EventSelection,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
modalName: String,
|
modalName: {
|
||||||
|
type: String as PropType<ModalKey>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
destination: {
|
destination: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => deepCopy(defaultMessageEventBusDestinationOptions),
|
default: () => deepCopy(defaultMessageEventBusDestinationOptions),
|
||||||
|
|
Loading…
Reference in a new issue