mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-21 20:00:02 +00:00
feat: Replace this.$refs.refName as Vue with InstanceType<T> (no-changelog) (#6050)
* refactor: use InstanceType<T> for all this.$refs types * refactor: update refs type in N8nSelect * fix: remove inputRef non-null assertion Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> * fix: remove non-null assertion --------- Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
Alex Grozav
@@ -13,6 +13,8 @@ const classToTypeMap = {
|
||||
'el-picker-panel__link-btn': 'secondary',
|
||||
};
|
||||
|
||||
type ButtonRef = InstanceType<typeof N8nButton>;
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
N8nButton,
|
||||
@@ -32,7 +34,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
Object.entries(classToTypeMap).forEach(([className, mappedType]) => {
|
||||
if (this.$refs.button && (this.$refs.button as Vue).$el.classList.contains(className)) {
|
||||
if ((this.$refs.button as ButtonRef)?.$el.classList.contains(className)) {
|
||||
type = mappedType;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -27,6 +27,8 @@
|
||||
import { Input as ElInput } from 'element-ui';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
type InputRef = InstanceType<typeof ElInput>;
|
||||
|
||||
export default defineComponent({
|
||||
name: 'n8n-input',
|
||||
components: {
|
||||
@@ -92,7 +94,7 @@ export default defineComponent({
|
||||
},
|
||||
methods: {
|
||||
focus() {
|
||||
const innerInput = this.$refs.innerInput as Vue | undefined;
|
||||
const innerInput = this.$refs.innerInput as InputRef | undefined;
|
||||
|
||||
if (!innerInput) return;
|
||||
|
||||
@@ -105,7 +107,7 @@ export default defineComponent({
|
||||
inputElement.focus();
|
||||
},
|
||||
blur() {
|
||||
const innerInput = this.$refs.innerInput as Vue | undefined;
|
||||
const innerInput = this.$refs.innerInput as InputRef | undefined;
|
||||
|
||||
if (!innerInput) return;
|
||||
|
||||
@@ -118,7 +120,7 @@ export default defineComponent({
|
||||
inputElement.blur();
|
||||
},
|
||||
select() {
|
||||
const innerInput = this.$refs.innerInput as Vue | undefined;
|
||||
const innerInput = this.$refs.innerInput as InputRef | undefined;
|
||||
|
||||
if (!innerInput) return;
|
||||
|
||||
|
||||
@@ -35,6 +35,8 @@
|
||||
import { Select as ElSelect } from 'element-ui';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
type InnerSelectRef = InstanceType<typeof ElSelect>;
|
||||
|
||||
export interface IProps {
|
||||
size?: string;
|
||||
limitPopperWidth?: string;
|
||||
@@ -117,23 +119,23 @@ export default defineComponent({
|
||||
},
|
||||
methods: {
|
||||
focus() {
|
||||
const select = this.$refs.innerSelect as (Vue & HTMLElement) | undefined;
|
||||
if (select) {
|
||||
select.focus();
|
||||
const selectRef = this.$refs.innerSelect as InnerSelectRef | undefined;
|
||||
if (selectRef) {
|
||||
selectRef.focus();
|
||||
}
|
||||
},
|
||||
blur() {
|
||||
const select = this.$refs.innerSelect as (Vue & HTMLElement) | undefined;
|
||||
if (select) {
|
||||
select.blur();
|
||||
const selectRef = this.$refs.innerSelect as InnerSelectRef | undefined;
|
||||
if (selectRef) {
|
||||
selectRef.blur();
|
||||
}
|
||||
},
|
||||
focusOnInput() {
|
||||
const select = this.$refs.innerSelect as (Vue & HTMLElement) | undefined;
|
||||
if (select) {
|
||||
const input = select.$refs.input as (Vue & HTMLElement) | undefined;
|
||||
if (input) {
|
||||
input.focus();
|
||||
const selectRef = this.$refs.innerSelect as InnerSelectRef | undefined;
|
||||
if (selectRef) {
|
||||
const inputRef = selectRef.$refs.input as HTMLInputElement | undefined;
|
||||
if (inputRef) {
|
||||
inputRef.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
49
packages/design-system/src/components/index.ts
Normal file
49
packages/design-system/src/components/index.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
export { default as N8nActionBox } from './N8nActionBox';
|
||||
export { default as N8nActionDropdown } from './N8nActionDropdown';
|
||||
export { default as N8nActionToggle } from './N8nActionToggle';
|
||||
export { default as N8nAlert } from './N8nAlert';
|
||||
export { default as N8nAvatar } from './N8nAvatar';
|
||||
export { default as N8nBadge } from './N8nBadge';
|
||||
export { default as N8nBlockUi } from './N8nBlockUi';
|
||||
export { default as N8nButton } from './N8nButton';
|
||||
export { N8nElButton } from './N8nButton/overrides';
|
||||
export { default as N8nCallout } from './N8nCallout';
|
||||
export { default as N8nCard } from './N8nCard';
|
||||
export { default as N8nDatatable } from './N8nDatatable';
|
||||
export { default as N8nFormBox } from './N8nFormBox';
|
||||
export { default as N8nFormInputs } from './N8nFormInputs';
|
||||
export { default as N8nFormInput } from './N8nFormInput';
|
||||
export { default as N8nHeading } from './N8nHeading';
|
||||
export { default as N8nIcon } from './N8nIcon';
|
||||
export { default as N8nIconButton } from './N8nIconButton';
|
||||
export { default as N8nInfoAccordion } from './N8nInfoAccordion';
|
||||
export { default as N8nInfoTip } from './N8nInfoTip';
|
||||
export { default as N8nInput } from './N8nInput';
|
||||
export { default as N8nInputLabel } from './N8nInputLabel';
|
||||
export { default as N8nInputNumber } from './N8nInputNumber';
|
||||
export { default as N8nLink } from './N8nLink';
|
||||
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 N8nNodeIcon } from './N8nNodeIcon';
|
||||
export { default as N8nNotice } from './N8nNotice';
|
||||
export { default as N8nOption } from './N8nOption';
|
||||
export { default as N8nPopover } from './N8nPopover';
|
||||
export { default as N8nPulse } from './N8nPulse';
|
||||
export { default as N8nRadioButtons } from './N8nRadioButtons';
|
||||
export { default as N8nSelect } from './N8nSelect';
|
||||
export { default as N8nSpinner } from './N8nSpinner';
|
||||
export { default as N8nSticky } from './N8nSticky';
|
||||
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';
|
||||
export { default as N8nUserInfo } from './N8nUserInfo';
|
||||
export { default as N8nUserSelect } from './N8nUserSelect';
|
||||
export { default as N8nUsersList } from './N8nUsersList';
|
||||
export { default as N8nResizeWrapper } from './N8nResizeWrapper';
|
||||
export { default as N8nRecycleScroller } from './N8nRecycleScroller';
|
||||
@@ -1,6 +1,7 @@
|
||||
import * as locale from './locale';
|
||||
import designSystemComponents from './plugins/n8nComponents';
|
||||
|
||||
export * from './components';
|
||||
export * from './plugin';
|
||||
export * from './types';
|
||||
export * from './utils';
|
||||
export { locale, designSystemComponents };
|
||||
export { locale };
|
||||
|
||||
107
packages/design-system/src/plugin.ts
Normal file
107
packages/design-system/src/plugin.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import type { PluginObject } from 'vue';
|
||||
import {
|
||||
N8nActionBox,
|
||||
N8nActionDropdown,
|
||||
N8nActionToggle,
|
||||
N8nAlert,
|
||||
N8nAvatar,
|
||||
N8nBadge,
|
||||
N8nBlockUi,
|
||||
N8nButton,
|
||||
N8nElButton,
|
||||
N8nCallout,
|
||||
N8nCard,
|
||||
N8nDatatable,
|
||||
N8nFormBox,
|
||||
N8nFormInputs,
|
||||
N8nFormInput,
|
||||
N8nHeading,
|
||||
N8nIcon,
|
||||
N8nIconButton,
|
||||
N8nInfoAccordion,
|
||||
N8nInfoTip,
|
||||
N8nInput,
|
||||
N8nInputLabel,
|
||||
N8nInputNumber,
|
||||
N8nLink,
|
||||
N8nLoading,
|
||||
N8nMarkdown,
|
||||
N8nMenu,
|
||||
N8nMenuItem,
|
||||
N8nNodeCreatorNode,
|
||||
N8nNodeIcon,
|
||||
N8nNotice,
|
||||
N8nOption,
|
||||
N8nPopover,
|
||||
N8nPulse,
|
||||
N8nRadioButtons,
|
||||
N8nSelect,
|
||||
N8nSpinner,
|
||||
N8nSticky,
|
||||
N8nTabs,
|
||||
N8nTag,
|
||||
N8nTags,
|
||||
N8nText,
|
||||
N8nTooltip,
|
||||
N8nTree,
|
||||
N8nUserInfo,
|
||||
N8nUserSelect,
|
||||
N8nUsersList,
|
||||
N8nResizeWrapper,
|
||||
N8nRecycleScroller,
|
||||
} from './components';
|
||||
|
||||
export const N8nPlugin: PluginObject<{}> = {
|
||||
install: (app) => {
|
||||
app.component('n8n-info-accordion', N8nInfoAccordion);
|
||||
app.component('n8n-action-box', N8nActionBox);
|
||||
app.component('n8n-action-dropdown', N8nActionDropdown);
|
||||
app.component('n8n-action-toggle', N8nActionToggle);
|
||||
app.component('n8n-alert', N8nAlert);
|
||||
app.component('n8n-avatar', N8nAvatar);
|
||||
app.component('n8n-badge', N8nBadge);
|
||||
app.component('n8n-block-ui', N8nBlockUi);
|
||||
app.component('n8n-button', N8nButton);
|
||||
app.component('el-button', N8nElButton);
|
||||
app.component('n8n-callout', N8nCallout);
|
||||
app.component('n8n-card', N8nCard);
|
||||
app.component('n8n-datatable', N8nDatatable);
|
||||
app.component('n8n-form-box', N8nFormBox);
|
||||
app.component('n8n-form-inputs', N8nFormInputs);
|
||||
app.component('n8n-form-input', N8nFormInput);
|
||||
app.component('n8n-icon', N8nIcon);
|
||||
app.component('n8n-icon-button', N8nIconButton);
|
||||
app.component('n8n-info-tip', N8nInfoTip);
|
||||
app.component('n8n-input', N8nInput);
|
||||
app.component('n8n-input-label', N8nInputLabel);
|
||||
app.component('n8n-input-number', N8nInputNumber);
|
||||
app.component('n8n-loading', N8nLoading);
|
||||
app.component('n8n-heading', N8nHeading);
|
||||
app.component('n8n-link', N8nLink);
|
||||
app.component('n8n-markdown', N8nMarkdown);
|
||||
app.component('n8n-menu', N8nMenu);
|
||||
app.component('n8n-menu-item', N8nMenuItem);
|
||||
app.component('n8n-node-creator-node', N8nNodeCreatorNode);
|
||||
app.component('n8n-node-icon', N8nNodeIcon);
|
||||
app.component('n8n-notice', N8nNotice);
|
||||
app.component('n8n-option', N8nOption);
|
||||
app.component('n8n-popover', N8nPopover);
|
||||
app.component('n8n-pulse', N8nPulse);
|
||||
app.component('n8n-select', N8nSelect);
|
||||
app.component('n8n-spinner', N8nSpinner);
|
||||
app.component('n8n-sticky', N8nSticky);
|
||||
app.component('n8n-radio-buttons', N8nRadioButtons);
|
||||
app.component('n8n-tags', N8nTags);
|
||||
app.component('n8n-tabs', N8nTabs);
|
||||
app.component('n8n-tag', N8nTag);
|
||||
app.component('n8n-text', N8nText);
|
||||
app.component('n8n-tooltip', N8nTooltip);
|
||||
app.component('n8n-user-info', N8nUserInfo);
|
||||
app.component('n8n-tree', N8nTree);
|
||||
app.component('n8n-users-list', N8nUsersList);
|
||||
app.component('n8n-user-select', N8nUserSelect);
|
||||
app.component('n8n-resize-wrapper', N8nResizeWrapper);
|
||||
app.component('n8n-recycle-scroller', N8nRecycleScroller);
|
||||
},
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
import type { PluginObject } from 'vue';
|
||||
import N8nActionBox from '../components/N8nActionBox';
|
||||
import N8nActionDropdown from '../components/N8nActionDropdown';
|
||||
import N8nActionToggle from '../components/N8nActionToggle';
|
||||
import N8nAlert from '../components/N8nAlert';
|
||||
import N8nAvatar from '../components/N8nAvatar';
|
||||
import N8nBadge from '../components/N8nBadge';
|
||||
import N8nBlockUi from '../components/N8nBlockUi';
|
||||
import N8nButton from '../components/N8nButton';
|
||||
import { N8nElButton } from '../components/N8nButton/overrides';
|
||||
import N8nCallout from '../components/N8nCallout';
|
||||
import N8nCard from '../components/N8nCard';
|
||||
import N8nDatatable from '../components/N8nDatatable';
|
||||
import N8nFormBox from '../components/N8nFormBox';
|
||||
import N8nFormInputs from '../components/N8nFormInputs';
|
||||
import N8nFormInput from '../components/N8nFormInput';
|
||||
import N8nHeading from '../components/N8nHeading';
|
||||
import N8nIcon from '../components/N8nIcon';
|
||||
import N8nIconButton from '../components/N8nIconButton';
|
||||
import N8nInfoAccordion from '../components/N8nInfoAccordion';
|
||||
import N8nInfoTip from '../components/N8nInfoTip';
|
||||
import { default as N8nInput } from '../components/N8nInput';
|
||||
import N8nInputLabel from '../components/N8nInputLabel';
|
||||
import N8nInputNumber from '../components/N8nInputNumber';
|
||||
import N8nLink from '../components/N8nLink';
|
||||
import N8nLoading from '../components/N8nLoading';
|
||||
import N8nMarkdown from '../components/N8nMarkdown';
|
||||
import N8nMenu from '../components/N8nMenu';
|
||||
import N8nMenuItem from '../components/N8nMenuItem';
|
||||
import N8nNodeCreatorNode from '../components/N8nNodeCreatorNode';
|
||||
import N8nNodeIcon from '../components/N8nNodeIcon';
|
||||
import N8nNotice from '../components/N8nNotice';
|
||||
import N8nOption from '../components/N8nOption';
|
||||
import N8nPopover from '../components/N8nPopover';
|
||||
import N8nPulse from '../components/N8nPulse';
|
||||
import N8nRadioButtons from '../components/N8nRadioButtons';
|
||||
import N8nSelect from '../components/N8nSelect';
|
||||
import N8nSpinner from '../components/N8nSpinner';
|
||||
import N8nSticky from '../components/N8nSticky';
|
||||
import N8nTabs from '../components/N8nTabs';
|
||||
import N8nTag from '../components/N8nTag';
|
||||
import N8nTags from '../components/N8nTags';
|
||||
import N8nText from '../components/N8nText';
|
||||
import N8nTooltip from '../components/N8nTooltip';
|
||||
import N8nTree from '../components/N8nTree';
|
||||
import N8nUserInfo from '../components/N8nUserInfo';
|
||||
import N8nUserSelect from '../components/N8nUserSelect';
|
||||
import N8nUsersList from '../components/N8nUsersList';
|
||||
import N8nResizeWrapper from '../components/N8nResizeWrapper';
|
||||
import N8nRecycleScroller from '../components/N8nRecycleScroller';
|
||||
|
||||
const n8nComponentsPlugin: PluginObject<{}> = {
|
||||
install: (app) => {
|
||||
app.component('n8n-info-accordion', N8nInfoAccordion);
|
||||
app.component('n8n-action-box', N8nActionBox);
|
||||
app.component('n8n-action-dropdown', N8nActionDropdown);
|
||||
app.component('n8n-action-toggle', N8nActionToggle);
|
||||
app.component('n8n-alert', N8nAlert);
|
||||
app.component('n8n-avatar', N8nAvatar);
|
||||
app.component('n8n-badge', N8nBadge);
|
||||
app.component('n8n-block-ui', N8nBlockUi);
|
||||
app.component('n8n-button', N8nButton);
|
||||
app.component('el-button', N8nElButton);
|
||||
app.component('n8n-callout', N8nCallout);
|
||||
app.component('n8n-card', N8nCard);
|
||||
app.component('n8n-datatable', N8nDatatable);
|
||||
app.component('n8n-form-box', N8nFormBox);
|
||||
app.component('n8n-form-inputs', N8nFormInputs);
|
||||
app.component('n8n-form-input', N8nFormInput);
|
||||
app.component('n8n-icon', N8nIcon);
|
||||
app.component('n8n-icon-button', N8nIconButton);
|
||||
app.component('n8n-info-tip', N8nInfoTip);
|
||||
app.component('n8n-input', N8nInput);
|
||||
app.component('n8n-input-label', N8nInputLabel);
|
||||
app.component('n8n-input-number', N8nInputNumber);
|
||||
app.component('n8n-loading', N8nLoading);
|
||||
app.component('n8n-heading', N8nHeading);
|
||||
app.component('n8n-link', N8nLink);
|
||||
app.component('n8n-markdown', N8nMarkdown);
|
||||
app.component('n8n-menu', N8nMenu);
|
||||
app.component('n8n-menu-item', N8nMenuItem);
|
||||
app.component('n8n-node-creator-node', N8nNodeCreatorNode);
|
||||
app.component('n8n-node-icon', N8nNodeIcon);
|
||||
app.component('n8n-notice', N8nNotice);
|
||||
app.component('n8n-option', N8nOption);
|
||||
app.component('n8n-popover', N8nPopover);
|
||||
app.component('n8n-pulse', N8nPulse);
|
||||
app.component('n8n-select', N8nSelect);
|
||||
app.component('n8n-spinner', N8nSpinner);
|
||||
app.component('n8n-sticky', N8nSticky);
|
||||
app.component('n8n-radio-buttons', N8nRadioButtons);
|
||||
app.component('n8n-tags', N8nTags);
|
||||
app.component('n8n-tabs', N8nTabs);
|
||||
app.component('n8n-tag', N8nTag);
|
||||
app.component('n8n-text', N8nText);
|
||||
app.component('n8n-tooltip', N8nTooltip);
|
||||
app.component('n8n-user-info', N8nUserInfo);
|
||||
app.component('n8n-tree', N8nTree);
|
||||
app.component('n8n-users-list', N8nUsersList);
|
||||
app.component('n8n-user-select', N8nUserSelect);
|
||||
app.component('n8n-resize-wrapper', N8nResizeWrapper);
|
||||
app.component('n8n-recycle-scroller', N8nRecycleScroller);
|
||||
},
|
||||
};
|
||||
|
||||
export default n8nComponentsPlugin;
|
||||
Reference in New Issue
Block a user