diff --git a/packages/entities/entities-plugins/docs/plugin-form.md b/packages/entities/entities-plugins/docs/plugin-form.md index 84ab8b7a8a..736649a453 100644 --- a/packages/entities/entities-plugins/docs/plugin-form.md +++ b/packages/entities/entities-plugins/docs/plugin-form.md @@ -155,8 +155,20 @@ Will hide the form buttons if you only want to render the form and want to contr Support instance names for plugins. This can be removed when KHCP-5872-custom-names-for-plugins is removed. Enabled by default for KM. +#### `actionsTeleportTarget` + +- type: `String` +- required: `false` +- default: `''` + +Allow teleporting the action buttons to the specified target element. + ### Events +#### cancel + +A `@cancel` event is emitted when the Cancel button is clicked and no `config.cancelRoute` has been provided. + #### error An `@error` event is emitted when form validation fails. The event payload is the response error. diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue index 72fee05c5d..66f1ab9748 100644 --- a/packages/entities/entities-plugins/src/components/PluginForm.vue +++ b/packages/entities/entities-plugins/src/components/PluginForm.vue @@ -51,52 +51,55 @@ /> !!(props.credential && props.c const record = ref | null>(null) const configResponse = ref>({}) const formLoading = ref(false) +const actionsDivRef = ref(null) const formFieldsOriginal = reactive({ enabled: true, protocols: [], @@ -940,6 +952,8 @@ watch([entityMap, initialized], (newData, oldData) => { const handleClickCancel = (): void => { if (props.config.cancelRoute) { router.push(props.config.cancelRoute) + } else { + emit('cancel') } } @@ -1086,6 +1100,14 @@ const schemaUrl = computed((): string => { return url }) +// track when the actions div is mounted for Teleport +const mounted = ref(false) +watch(actionsDivRef, (newVal) => { + if (newVal) { + mounted.value = true + } +}) + const schemaLoading = ref(false) const fetchSchemaError = ref('') onBeforeMount(async () => {