feat: Replace Vue.extend with defineComponent in editor-ui (no-changelog) (#6033)
* refactor: replace Vue.extend with defineComponent in editor-ui * fix: change $externalHooks extractions from mixins * fix: refactor externalHooks mixin
This commit is contained in:
@@ -37,7 +37,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
|
||||
import {
|
||||
DEFAULT_STICKY_HEIGHT,
|
||||
@@ -48,7 +48,7 @@ import {
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUIStore } from '@/stores/ui';
|
||||
|
||||
export default Vue.extend({
|
||||
export default defineComponent({
|
||||
name: 'node-creation',
|
||||
components: {
|
||||
NodeCreator: () => import('@/components/Node/NodeCreator/NodeCreator.vue'),
|
||||
|
||||
@@ -96,7 +96,6 @@ import {
|
||||
nextTick,
|
||||
} from 'vue';
|
||||
import { camelCase } from 'lodash-es';
|
||||
import { externalHooks } from '@/mixins/externalHooks';
|
||||
import { INodeTypeDescription } from 'n8n-workflow';
|
||||
import ItemIterator from './ItemIterator.vue';
|
||||
import SearchBar from './SearchBar.vue';
|
||||
@@ -114,6 +113,7 @@ import { sublimeSearch, matchesNodeType, matchesSelectType } from '@/utils';
|
||||
import { useWorkflowsStore } from '@/stores/workflows';
|
||||
import { useRootStore } from '@/stores/n8nRootStore';
|
||||
import { useNodeCreatorStore } from '@/stores/nodeCreator';
|
||||
import { useExternalHooks } from '@/composables';
|
||||
|
||||
export interface Props {
|
||||
showSubcategoryIcon?: boolean;
|
||||
@@ -148,7 +148,7 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const { $externalHooks } = new externalHooks();
|
||||
const externalHooks = useExternalHooks();
|
||||
|
||||
const { defaultLocale } = useRootStore();
|
||||
const { workflowId } = useWorkflowsStore();
|
||||
@@ -549,7 +549,7 @@ onUnmounted(() => {
|
||||
});
|
||||
|
||||
watch(filteredNodeTypes, (returnItems) => {
|
||||
$externalHooks().run('nodeCreateList.filteredNodeTypesComputed', {
|
||||
externalHooks.run('nodeCreateList.filteredNodeTypesComputed', {
|
||||
nodeFilter: nodeCreatorStore.itemsFilter,
|
||||
result: returnItems,
|
||||
selectedType: nodeCreatorStore.selectedView,
|
||||
@@ -569,7 +569,7 @@ watch(
|
||||
// Reset the index whenver the filter-value changes
|
||||
state.activeIndex = 0;
|
||||
state.activeSubcategoryIndex = 0;
|
||||
$externalHooks().run('nodeCreateList.nodeFilterChanged', {
|
||||
externalHooks.run('nodeCreateList.nodeFilterChanged', {
|
||||
oldValue,
|
||||
newValue,
|
||||
selectedType: nodeCreatorStore.selectedView,
|
||||
|
||||
@@ -105,12 +105,12 @@ import {
|
||||
import CategorizedItems from './CategorizedItems.vue';
|
||||
import { useNodeCreatorStore } from '@/stores/nodeCreator';
|
||||
import { getCategoriesWithNodes, getCategorizedList } from '@/utils';
|
||||
import { externalHooks } from '@/mixins/externalHooks';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes';
|
||||
import { BaseTextKey } from '@/plugins/i18n';
|
||||
import NoResults from './NoResults.vue';
|
||||
import { useRootStore } from '@/stores/n8nRootStore';
|
||||
import useMainPanelView from './useMainPanelView';
|
||||
import { useExternalHooks } from '@/composables';
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
@@ -124,7 +124,8 @@ const state = reactive({
|
||||
activeNodeActions: null as INodeTypeDescription | null,
|
||||
});
|
||||
const { baseUrl } = useRootStore();
|
||||
const { $externalHooks } = new externalHooks();
|
||||
const externalHooks = useExternalHooks();
|
||||
|
||||
const {
|
||||
mergedAppNodes,
|
||||
getActionData,
|
||||
@@ -324,7 +325,7 @@ function addHttpNode(isAction: boolean) {
|
||||
setAddedNodeActionParameters(updateData, telemetry, false);
|
||||
|
||||
const app_identifier = state.activeNodeActions?.name;
|
||||
$externalHooks().run('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
|
||||
externalHooks.run('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
|
||||
telemetry?.trackNodesPanel('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
|
||||
}
|
||||
}
|
||||
@@ -362,7 +363,7 @@ function trackActionsView() {
|
||||
trigger_action_count,
|
||||
};
|
||||
|
||||
$externalHooks().run('nodeCreateList.onViewActions', trackingPayload);
|
||||
externalHooks.run('nodeCreateList.onViewActions', trackingPayload);
|
||||
telemetry?.trackNodesPanel('nodeCreateList.onViewActions', trackingPayload);
|
||||
}
|
||||
|
||||
|
||||
@@ -25,8 +25,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
|
||||
import { externalHooks } from '@/mixins/externalHooks';
|
||||
import { EventBus } from '@/event-bus';
|
||||
import { useExternalHooks } from '@/composables';
|
||||
|
||||
export interface Props {
|
||||
placeholder: string;
|
||||
@@ -43,7 +43,7 @@ const emit = defineEmits<{
|
||||
(event: 'input', value: string): void;
|
||||
}>();
|
||||
|
||||
const { $externalHooks } = new externalHooks();
|
||||
const externalHooks = useExternalHooks();
|
||||
|
||||
const state = reactive({
|
||||
inputRef: null as HTMLInputElement | null,
|
||||
@@ -63,7 +63,7 @@ function clear() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
$externalHooks().run('nodeCreator_searchBar.mount', { inputRef: state.inputRef });
|
||||
externalHooks.run('nodeCreator_searchBar.mount', { inputRef: state.inputRef });
|
||||
setTimeout(focus, 0);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user