diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts deleted file mode 100644 index 57c4356ef1..0000000000 --- a/packages/design-system/src/components/index.ts +++ /dev/null @@ -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, -}; diff --git a/packages/design-system/src/main.js b/packages/design-system/src/main.js index 232c6de8d5..0dac0d33d3 100644 --- a/packages/design-system/src/main.js +++ b/packages/design-system/src/main.js @@ -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 +}; diff --git a/packages/design-system/src/plugins/elementUIComponents.ts b/packages/design-system/src/plugins/elementUIComponents.ts new file mode 100644 index 0000000000..e7c8fc25d4 --- /dev/null +++ b/packages/design-system/src/plugins/elementUIComponents.ts @@ -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); + }, +}; diff --git a/packages/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts new file mode 100644 index 0000000000..a68d8db403 --- /dev/null +++ b/packages/design-system/src/plugins/n8nComponents.ts @@ -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); + }, +}; diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue index 1871288aed..adbae07c12 100644 --- a/packages/editor-ui/src/components/DeleteUserModal.vue +++ b/packages/editor-ui/src/components/DeleteUserModal.vue @@ -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: { diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts index 4f6a4cfd78..2336df9664 100644 --- a/packages/editor-ui/src/plugins/components.ts +++ b/packages/editor-ui/src/plugins/components.ts @@ -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; diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue index de9cb1629c..caf88a7e43 100644 --- a/packages/editor-ui/src/views/SettingsUsersView.vue +++ b/packages/editor-ui/src/views/SettingsUsersView.vue @@ -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() {