n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-10-06 17:47:46 +03:00
Code Issues Projects Releases Wiki Activity

✨ Added Vue plugins that register design system and element UI components (#3875)

Browse Source 
* ✨ Implemented Vue plugins that register design system and element UI components

* 💄 Replacing `any` with object type in Vue plugins
This commit is contained in:
Milorad FIlipović 2022-08-12 13:22:08 +02:00 committed by GitHub
parent 52015a6f03
commit d4b4e234a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 168 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
packages/design-system/src/components/index.ts
View File

@ -1,157 +0,0 @@
import Drawer from 'element-ui/lib/drawer';
import Dialog from 'element-ui/lib/dialog';
import Dropdown from 'element-ui/lib/dropdown';
import DropdownMenu from 'element-ui/lib/dropdown-menu';
import DropdownItem from 'element-ui/lib/dropdown-item';
import Submenu from 'element-ui/lib/submenu';
import Radio from 'element-ui/lib/radio';
import RadioGroup from 'element-ui/lib/radio-group';
import RadioButton from 'element-ui/lib/radio-button';
import Checkbox from 'element-ui/lib/checkbox';
import Switch from 'element-ui/lib/switch';
import Select from 'element-ui/lib/select';
import Option from 'element-ui/lib/option';
import OptionGroup from 'element-ui/lib/option-group';
import Pagination from 'element-ui/lib/pagination';
import ButtonGroup from 'element-ui/lib/button-group';
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
import DatePicker from 'element-ui/lib/date-picker';
import Tabs from 'element-ui/lib/tabs';
import TabPane from 'element-ui/lib/tab-pane';
import Tag from 'element-ui/lib/tag';
import Row from 'element-ui/lib/row';
import Col from 'element-ui/lib/col';
import Badge from 'element-ui/lib/badge';
import Card from 'element-ui/lib/card';
import ColorPicker from 'element-ui/lib/color-picker';
import Container from 'element-ui/lib/container';
import Loading from 'element-ui/lib/loading';
import MessageBox from 'element-ui/lib/message-box';
import Message from 'element-ui/lib/message';
import Notification from 'element-ui/lib/notification';
import Popover from 'element-ui/lib/popover';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import N8nInfoAccordion from './N8nInfoAccordion';
import N8nActionBox from './N8nActionBox';
import N8nActionToggle from './N8nActionToggle';
import N8nAvatar from './N8nAvatar';
import N8nBadge from './N8nBadge';
import N8nButton from './N8nButton';
import { N8nElButton } from './N8nButton/overrides';
import N8nCallout from './N8nCallout';
import N8nCard from './N8nCard';
import N8nFormBox from './N8nFormBox';
import N8nFormInput from './N8nFormInput';
import N8nFormInputs from './N8nFormInputs';
import N8nHeading from './N8nHeading';
import N8nIcon from './N8nIcon';
import N8nIconButton from './N8nIconButton';
import N8nInput from './N8nInput';
import N8nInfoTip from './N8nInfoTip';
import N8nInputNumber from './N8nInputNumber';
import N8nInputLabel from './N8nInputLabel';
import N8nLoading from './N8nLoading';
import N8nMarkdown from './N8nMarkdown';
import N8nMenu from './N8nMenu';
import N8nMenuItem from './N8nMenuItem';
import N8nNodeIcon from './N8nNodeIcon';
import N8nNotice from './N8nNotice';
import N8nLink from './N8nLink';
import N8nOption from './N8nOption';
import N8nPulse from './N8nPulse';
import N8nRadioButtons from './N8nRadioButtons';
import N8nSelect from './N8nSelect';
import N8nSpinner from './N8nSpinner';
import N8nSticky from './N8nSticky';
import N8nSquareButton from './N8nSquareButton';
import N8nTags from './N8nTags';
import N8nTabs from './N8nTabs';
import N8nTag from './N8nTag';
import N8nText from './N8nText';
import N8nTooltip from './N8nTooltip';
import N8nUsersList from './N8nUsersList';
import N8nUserSelect from './N8nUserSelect';
import locale from '../locale';
export {
N8nInfoAccordion,
N8nActionBox,
N8nActionToggle,
N8nAvatar,
N8nBadge,
N8nButton,
N8nElButton,
N8nCallout,
N8nCard,
N8nHeading,
N8nFormBox,
N8nFormInput,
N8nFormInputs,
N8nIcon,
N8nIconButton,
N8nInfoTip,
N8nInput,
N8nInputLabel,
N8nInputNumber,
N8nLink,
N8nLoading,
N8nMarkdown,
N8nMenu,
N8nMenuItem,
N8nNotice,
N8nNodeIcon,
N8nOption,
N8nPulse,
N8nRadioButtons,
N8nSelect,
N8nSpinner,
N8nSticky,
N8nSquareButton,
N8nTabs,
N8nTags,
N8nTag,
N8nText,
N8nTooltip,
N8nUsersList,
N8nUserSelect,
Dialog,
Drawer,
Dropdown,
DropdownMenu,
DropdownItem,
Submenu,
Radio,
RadioGroup,
RadioButton,
Checkbox,
Switch,
Select,
Option,
OptionGroup,
Pagination,
ButtonGroup,
Table,
TableColumn,
DatePicker,
Tabs,
TabPane,
Tag,
Row,
Col,
Badge,
Card,
ColorPicker,
Container,
Loading,
MessageBox,
Message,
Notification,
CollapseTransition,
Popover,
locale,
};

27
packages/design-system/src/main.js
View File

@ -1,15 +1,18 @@
import * as components from './components';
import * as locale from './locale';
import designSystemComponents from './plugins/n8nComponents';
import elementUIComponents from './plugins/elementUIComponents';
// @TODO Define proper plugin that loads all components
// tslint:disable-next-line:forin
for (const key in components) {
const component = components[key];
import Loading from 'element-ui/lib/loading';
import MessageBox from 'element-ui/lib/message-box';
import Message from 'element-ui/lib/message';
import Notification from 'element-ui/lib/notification';
component.install = (app) => {
app.component(component.name, component);
};
}
export { locale };
export * from './components';
export {
Loading,
MessageBox,
Message,
Notification,
locale,
designSystemComponents,
elementUIComponents
};

67
packages/design-system/src/plugins/elementUIComponents.ts Normal file
View File

@ -0,0 +1,67 @@
import Vue from 'vue';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Drawer from 'element-ui/lib/drawer';
import Dialog from 'element-ui/lib/dialog';
import Dropdown from 'element-ui/lib/dropdown';
import DropdownMenu from 'element-ui/lib/dropdown-menu';
import DropdownItem from 'element-ui/lib/dropdown-item';
import Submenu from 'element-ui/lib/submenu';
import Radio from 'element-ui/lib/radio';
import RadioGroup from 'element-ui/lib/radio-group';
import RadioButton from 'element-ui/lib/radio-button';
import Checkbox from 'element-ui/lib/checkbox';
import Switch from 'element-ui/lib/switch';
import Select from 'element-ui/lib/select';
import Option from 'element-ui/lib/option';
import OptionGroup from 'element-ui/lib/option-group';
import Pagination from 'element-ui/lib/pagination';
import ButtonGroup from 'element-ui/lib/button-group';
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
import DatePicker from 'element-ui/lib/date-picker';
import Tabs from 'element-ui/lib/tabs';
import TabPane from 'element-ui/lib/tab-pane';
import Tag from 'element-ui/lib/tag';
import Row from 'element-ui/lib/row';
import Col from 'element-ui/lib/col';
import Badge from 'element-ui/lib/badge';
import Card from 'element-ui/lib/card';
import ColorPicker from 'element-ui/lib/color-picker';
import Container from 'element-ui/lib/container';
import Popover from 'element-ui/lib/popover';
export default {
install: (app: typeof Vue, options?: {}) => {
app.component('ElCollapseTransition', CollapseTransition);
app.component('ElDialog', Dialog);
app.component('ElDrawer', Drawer);
app.component('ElDropdown', Dropdown);
app.component('ElDropdownMenu', DropdownMenu);
app.component('ElDropdownItem', DropdownItem);
app.component('ElSubmenu', Submenu);
app.component('ElRadio', Radio);
app.component('ElRadioGroup', RadioGroup);
app.component('ElRadioButton', RadioButton);
app.component('ElCheckbox', Checkbox);
app.component('ElSwitch', Switch);
app.component('ElSelect', Select);
app.component('n8n-option', Option);
app.component('ElOptionGroup', OptionGroup);
app.component('ElButtonGroup', ButtonGroup);
app.component('ElTable', Table);
app.component('ElTableColumn', TableColumn);
app.component('ElDatePicker', DatePicker);
app.component('ElTabs', Tabs);
app.component('ElTabPane', TabPane);
app.component('ElTag', Tag);
app.component('ElRow', Row);
app.component('ElCol', Col);
app.component('ElBadge', Badge);
app.component('ElCard', Card);
app.component('ElColorPicker', ColorPicker);
app.component('ElContainer', Container);
app.component('ElPagination', Pagination);
app.component('ElPopover', Popover);
},
};

82
packages/design-system/src/plugins/n8nComponents.ts Normal file
View File

@ -0,0 +1,82 @@
import Vue from 'vue';
import N8nInfoAccordion from '../components/N8nInfoAccordion';
import N8nActionBox from '../components/N8nActionBox';
import N8nActionToggle from '../components/N8nActionToggle';
import N8nAvatar from '../components/N8nAvatar';
import N8nButton from '../components/N8nButton';
import { N8nElButton } from '../components/N8nButton/overrides';
import N8nCallout from '../components/N8nCallout';
import N8nCard from '../components/N8nCard';
import N8nFormBox from '../components/N8nFormBox';
import N8nFormInputs from '../components/N8nFormInputs';
import N8nIcon from '../components/N8nIcon';
import N8nIconButton from '../components/N8nIconButton';
import N8nInfoTip from '../components/N8nInfoTip';
import N8nInput from '../components/N8nInput';
import N8nInputLabel from '../components/N8nInputLabel';
import N8nInputNumber from '../components/N8nInputNumber';
import N8nLoading from '../components/N8nLoading';
import N8nHeading from '../components/N8nHeading';
import N8nLink from '../components/N8nLink';
import N8nMarkdown from '../components/N8nMarkdown';
import N8nMenu from '../components/N8nMenu';
import N8nMenuItem from '../components/N8nMenuItem';
import N8nNodeIcon from '../components/N8nNodeIcon';
import N8nNotice from '../components/N8nNotice';
import N8nOption from '../components/N8nOption';
import N8nPulse from '../components/N8nPulse';
import N8nSelect from '../components/N8nSelect';
import N8nSpinner from '../components/N8nSpinner';
import N8nSticky from '../components/N8nSticky';
import N8nRadioButtons from '../components/N8nRadioButtons';
import N8nSquareButton from '../components/N8nInput';
import N8nTags from '../components/N8nTags';
import N8nTabs from '../components/N8nTabs';
import N8nTag from '../components/N8nTag';
import N8nText from '../components/N8nText';
import N8nTooltip from '../components/N8nTooltip';
import N8nUsersList from '../components/N8nUsersList';
import N8nUserSelect from '../components/N8nUserSelect';
export default {
install: (app: typeof Vue, options?: {}) => {
app.component('n8n-info-accordion', N8nInfoAccordion);
app.component('n8n-action-box', N8nActionBox);
app.component('n8n-action-toggle', N8nActionToggle);
app.component('n8n-avatar', N8nAvatar);
app.component('n8n-button', N8nButton);
app.component('el-button', N8nElButton);
app.component('n8n-callout', N8nCallout);
app.component('n8n-card', N8nCard);
app.component('n8n-form-box', N8nFormBox);
app.component('n8n-form-inputs', N8nFormInputs);
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-icon', N8nNodeIcon);
app.component('n8n-notice', N8nNotice);
app.component('n8n-option', N8nOption);
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-square-button', N8nSquareButton);
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-users-list', N8nUsersList);
app.component('n8n-user-select', N8nUserSelect);
},
};

2
packages/editor-ui/src/components/DeleteUserModal.vue
View File

@ -54,12 +54,10 @@ import Modal from "./Modal.vue";
import Vue from "vue";
import { IUser } from "../Interface";
import { mapGetters } from "vuex";
import { N8nUserSelect } from 'n8n-design-system';
export default mixins(showMessage).extend({
components: {
Modal,
N8nUserSelect,
},
name: "DeleteUserModal",
props: {

145
packages/editor-ui/src/plugins/components.ts
View File

@ -8,156 +8,19 @@ import "regenerator-runtime/runtime";
import VueAgile from 'vue-agile';
import {
// element ui components
Dialog,
Drawer,
Dropdown,
DropdownMenu,
DropdownItem,
Submenu,
Radio,
RadioGroup,
RadioButton,
Checkbox,
Switch,
Select,
Option,
OptionGroup,
ButtonGroup,
Table,
TableColumn,
DatePicker,
Tabs,
TabPane,
Tag,
Row,
Col,
Badge,
Card,
ColorPicker,
Container,
Loading,
MessageBox,
Message,
Notification,
CollapseTransition,
Pagination,
Popover,
N8nInfoAccordion,
N8nActionBox,
N8nAvatar,
N8nActionToggle,
N8nButton,
N8nElButton,
N8nCallout,
N8nCard,
N8nIcon,
N8nIconButton,
N8nInfoTip,
N8nInput,
N8nInputLabel,
N8nInputNumber,
N8nLink,
N8nLoading,
N8nHeading,
N8nMarkdown,
N8nMenu,
N8nMenuItem,
N8nNodeIcon,
N8nNotice,
N8nOption,
N8nRadioButtons,
N8nSelect,
N8nSpinner,
N8nSticky,
N8nTabs,
N8nFormInputs,
N8nFormBox,
N8nPulse,
N8nSquareButton,
N8nTags,
N8nTag,
N8nText,
N8nTooltip,
designSystemComponents,
elementUIComponents,
} from 'n8n-design-system';
import { ElMessageBoxOptions } from "element-ui/types/message-box";
Vue.use(Fragment.Plugin);
// n8n design system
Vue.component('n8n-info-accordion', N8nInfoAccordion);
Vue.component('n8n-action-box', N8nActionBox);
Vue.component('n8n-action-toggle', N8nActionToggle);
Vue.component('n8n-avatar', N8nAvatar);
Vue.component('n8n-button', N8nButton);
Vue.component('el-button', N8nElButton);
Vue.component('n8n-callout', N8nCallout);
Vue.component('n8n-card', N8nCard);
Vue.component('n8n-form-box', N8nFormBox);
Vue.component('n8n-form-inputs', N8nFormInputs);
Vue.component('n8n-icon', N8nIcon);
Vue.component('n8n-icon-button', N8nIconButton);
Vue.component('n8n-info-tip', N8nInfoTip);
Vue.component('n8n-input', N8nInput);
Vue.component('n8n-input-label', N8nInputLabel);
Vue.component('n8n-input-number', N8nInputNumber);
Vue.component('n8n-loading', N8nLoading);
Vue.component('n8n-heading', N8nHeading);
Vue.component('n8n-link', N8nLink);
Vue.component('n8n-markdown', N8nMarkdown);
Vue.component('n8n-menu', N8nMenu);
Vue.component('n8n-menu-item', N8nMenuItem);
Vue.component('n8n-node-icon', N8nNodeIcon);
Vue.component('n8n-notice', N8nNotice);
Vue.component('n8n-option', N8nOption);
Vue.component('n8n-pulse', N8nPulse);
Vue.component('n8n-select', N8nSelect);
Vue.component('n8n-spinner', N8nSpinner);
Vue.component('n8n-sticky', N8nSticky);
Vue.component('n8n-radio-buttons', N8nRadioButtons);
Vue.component('n8n-square-button', N8nSquareButton);
Vue.component('n8n-tags', N8nTags);
Vue.component('n8n-tabs', N8nTabs);
Vue.component('n8n-tag', N8nTag);
Vue.component('n8n-text', N8nText);
Vue.component('n8n-tooltip', N8nTooltip);
// element io
Vue.use(Dialog);
Vue.use(Drawer);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Submenu);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Row);
Vue.use(Col);
Vue.use(Badge);
Vue.use(Card);
Vue.use(ColorPicker);
Vue.use(Container);
Vue.use(Pagination);
Vue.use(Popover);
Vue.use(elementUIComponents);
Vue.use(designSystemComponents);
Vue.use(VueAgile);
Vue.component(CollapseTransition.name, CollapseTransition);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;

2
packages/editor-ui/src/views/SettingsUsersView.vue
View File

@ -38,7 +38,6 @@ import { mapGetters } from 'vuex';
import SettingsView from './SettingsView.vue';
import PageAlert from '../components/PageAlert.vue';
import { N8nUsersList } from 'n8n-design-system';
import { IUser } from '@/Interface';
import mixins from 'vue-typed-mixins';
import { showMessage } from '@/components/mixins/showMessage';
@ -47,7 +46,6 @@ export default mixins(showMessage).extend({
name: 'SettingsUsersView',
components: {
SettingsView,
'n8n-users-list': N8nUsersList,
PageAlert,
},
async mounted() {