Release/0.9.15

README.md

@@ -14,19 +14,30 @@ $s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrain
 $s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
 ```
 
-## Custom components, directives setup
-Import "Components" enum from library, and pass the list of needed components to SoramitsuElements options
+## Usage library in project
+### 1.Install all of library components:
+```
+import Vue from 'vue
+import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 
-Note: Without customization all library components and directives are registering global
+const options = {
+  store // if u want to merge ui lib modules
+}
 
+Vue.use(SoramitsuElements, options)
+```
+### 2.Install only necessary components (to reduce vendors bundle size)
 ```
-import Vue from 'vue'
-import SoramitsuElements, { Components, Directives } from '@soramitsu/soramitsu-js-ui'
+import Vue from 'vue
+import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/src/plugins/elementUI'
+import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/src/plugins/soramitsuUIStore'
+import SButton from '@soramitsu/soramitsu-js-ui/src/components/Button/SButton'
+import SButton from '@soramitsu/soramitsu-js-ui/src/components/Input/SInput'
 
-Vue.use(SoramitsuElements, {
-  components: [Components.Button, Components.Input],
-  directives: [Directives.Float]
-})
+Vue.use(ElementUIPlugin) // required
+Vue.use(SoramitsuUIStorePlugin, store) // optional
+Vue.use(SButton)
+Vue.use(SInput)
 ```
 
 ### Compiles and hot-reloads storybook with components for development

config/storybook/preview.js

@@ -1,8 +1,13 @@
+import Vue from 'vue'
 import { addParameters, addDecorator } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { DocsPage } from '@storybook/addon-docs/blocks'
 
+import '../../src/styles/index.scss'
 import mainStore from '../../src/store'
+import { ElementUIPlugin } from '../../src/plugins'
+
+Vue.use(ElementUIPlugin)
 
 addParameters({
   options: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -27,8 +27,10 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "element-resize-detector": "^1.2.1",
     "element-ui": "^2.13.2",
     "lodash": "^4.17.15",
+    "throttle-debounce": "^1.0.1",
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -59,7 +61,6 @@
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "1.0.0-beta.31",
-    "element-resize-detector": "^1.2.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -80,7 +81,6 @@
     "rollup-plugin-vue": "^5.1.4",
     "sass-loader": "^8.0.2",
     "storybook-vue-router": "^1.0.7",
-    "throttle-debounce": "^1.0.1",
     "ts-jest": "^26.0.0",
     "typescript": "~3.8.3",
     "vue-cli-plugin-storybook": "~1.2.2",
@@ -94,13 +94,15 @@
   },
   "files": [
     "lib/*",
+    "src/*",
     "*.json",
     "*.js"
   ],
   "resolutions": {
     "react": "16.13.0",
     "react-dom": "16.13.0"
   },
+  "sideEffects": false,
   "gitHooks": {
     "pre-commit": "lint-staged"
   },

src/components/Breadcrumb/SBreadcrumb/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SBreadcrumb from './SBreadcrumb.vue'
+
+const SBreadcrumb = _SBreadcrumb as SFCWithInstall<typeof _SBreadcrumb>
+
+SBreadcrumb.install = function (vue: VueConstructor) {
+  vue.component(Components.SBreadcrumb, SBreadcrumb)
+}
+
+export { SBreadcrumb }
+export default SBreadcrumb

src/components/Breadcrumb/SBreadcrumbItem/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SBreadcrumbItem from './SBreadcrumbItem.vue'
+
+const SBreadcrumbItem = _SBreadcrumbItem as SFCWithInstall<typeof _SBreadcrumbItem>
+
+SBreadcrumbItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SBreadcrumbItem, SBreadcrumbItem)
+}
+
+export { SBreadcrumbItem }
+export default SBreadcrumbItem

src/components/Breadcrumb/index.ts

@@ -1,4 +1,2 @@
-import SBreadcrumb from './SBreadcrumb.vue'
-import SBreadcrumbItem from './SBreadcrumbItem.vue'
-
-export { SBreadcrumb, SBreadcrumbItem }
+export { SBreadcrumb } from './SBreadcrumb'
+export { SBreadcrumbItem } from './SBreadcrumbItem'

src/components/Button/SButton.vue → src/components/Button/SButton/SButton.vue

@@ -26,12 +26,12 @@ import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { PopoverPlacement } from 'element-ui/types/popover'
 
-import { DesignSystemInject } from '../DesignSystem'
-import SizeMixin from '../../mixins/SizeMixin'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { SIcon } from '../Icon'
-import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import SizeMixin from '../../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { SIcon } from '../../Icon/SIcon'
+import { STooltip, TooltipPlacement } from '../../Tooltip'
+import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from '../consts'
 
 @Component({
   components: { SIcon, STooltip }

src/components/Button/SButton/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SButton from './SButton.vue'
+
+const SButton = _SButton as SFCWithInstall<typeof _SButton>
+
+SButton.install = function (vue: VueConstructor) {
+  vue.component(Components.SButton, SButton)
+}
+
+export { SButton }
+export default SButton

src/components/Button/SButtonGroup/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SButtonGroup from './SButtonGroup.vue'
+
+const SButtonGroup = _SButtonGroup as SFCWithInstall<typeof _SButtonGroup>
+
+SButtonGroup.install = function (vue: VueConstructor) {
+  vue.component(Components.SButtonGroup, SButtonGroup)
+}
+
+export { SButtonGroup }
+export default SButtonGroup

src/components/Button/index.ts

@@ -1,11 +1,3 @@
-import SButton from './SButton.vue'
-import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'
-
-export {
-  SButton,
-  SButtonGroup,
-  ButtonTypes,
-  ButtonNativeTypes,
-  ButtonIconPosition
-}
+export { SButton } from './SButton'
+export { SButtonGroup } from './SButtonGroup'
+export { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts'

src/components/Card/SCard.vue → src/components/Card/SCard/SCard.vue

@@ -14,12 +14,12 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
-import { DesignSystemInject } from '../DesignSystem'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import SizeMixin from '../../mixins/SizeMixin'
-import StatusMixin from '../../mixins/StatusMixin'
-import { CardShadow } from './consts'
-import { BorderRadius } from '@/types'
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import SizeMixin from '../../../mixins/SizeMixin'
+import StatusMixin from '../../../mixins/StatusMixin'
+import { CardShadow } from '../consts'
+import { BorderRadius } from '../../../types'
 
 @Component
 export default class SCard extends Mixins(BorderRadiusMixin, SizeMixin, StatusMixin, DesignSystemInject) {

src/components/Card/SCard/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCard from './SCard.vue'
+
+const SCard = _SCard as SFCWithInstall<typeof _SCard>
+
+SCard.install = function (vue: VueConstructor) {
+  vue.component(Components.SCard, SCard)
+}
+
+export { SCard }
+export default SCard

src/components/Card/index.ts

@@ -1,4 +1,2 @@
-import SCard from './SCard.vue'
-import { CardShadow } from './consts'
-
-export { SCard, CardShadow }
+export { SCard } from './SCard'
+export { CardShadow } from './consts'

src/components/Checkbox/index.ts

@@ -1,3 +1,13 @@
-import SCheckbox from './SCheckbox.vue'
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../types/components'
+
+import _SCheckbox from './SCheckbox.vue'
+
+const SCheckbox = _SCheckbox as SFCWithInstall<typeof _SCheckbox>
+
+SCheckbox.install = function (vue: VueConstructor) {
+  vue.component(Components.SCheckbox, SCheckbox)
+}
 
 export { SCheckbox }
+export default SCheckbox

src/components/Collapse/SCollapse.vue → src/components/Collapse/SCollapse/SCollapse.vue

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 
-import { BorderTypes } from './consts'
+import { BorderTypes } from '../consts'
 
 @Component
 export default class SCollapse extends Vue {

src/components/Collapse/SCollapse/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCollapse from './SCollapse.vue'
+
+const SCollapse = _SCollapse as SFCWithInstall<typeof _SCollapse>
+
+SCollapse.install = function (vue: VueConstructor) {
+  vue.component(Components.SCollapse, SCollapse)
+}
+
+export { SCollapse }
+export default SCollapse

src/components/Collapse/SCollapseItem.vue → src/components/Collapse/SCollapseItem/SCollapseItem.vue

@@ -13,7 +13,7 @@
 <script lang="ts">
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
-import { BorderTypes } from './consts'
+import { BorderTypes } from '../consts'
 
 @Component
 export default class SCollapseItem extends Vue {

src/components/Collapse/SCollapseItem/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SCollapseItem from './SCollapseItem.vue'
+
+const SCollapseItem = _SCollapseItem as SFCWithInstall<typeof _SCollapseItem>
+
+SCollapseItem.install = function (vue: VueConstructor) {
+  vue.component(Components.SCollapseItem, SCollapseItem)
+}
+
+export { SCollapseItem }
+export default SCollapseItem

src/components/Collapse/index.ts

@@ -1,5 +1,3 @@
-import SCollapse from './SCollapse.vue'
-import SCollapseItem from './SCollapseItem.vue'
-import { BorderTypes } from './consts'
-
-export { SCollapse, SCollapseItem, BorderTypes }
+export { SCollapse } from './SCollapse'
+export { SCollapseItem } from './SCollapseItem'
+export { BorderTypes } from './consts'

src/components/DatePicker/SDatePicker.vue → src/components/DatePicker/SDatePicker/SDatePicker.vue

@@ -42,10 +42,10 @@ import { ElFormItem } from 'element-ui/types/form-item'
 
 // TODO: ask do we need size prop for the component?
 // Prev comment => TODO: ask design team
-import { SIcon } from '../Icon'
-import SizeMixin from '../../mixins/SizeMixin'
-import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
-import { PickerTypes, PickerAlignment, InputTypes } from './consts'
+import { SIcon } from '../../Icon/SIcon'
+import SizeMixin from '../../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../../mixins/BorderRadiusMixin'
+import { PickerTypes, PickerAlignment, InputTypes } from '../consts'
 
 @Component({
   components: { SIcon }

src/components/DatePicker/SDatePicker/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDatePicker from './SDatePicker.vue'
+
+const SDatePicker = _SDatePicker as SFCWithInstall<typeof _SDatePicker>
+
+SDatePicker.install = function (vue: VueConstructor) {
+  vue.component(Components.SDatePicker, SDatePicker)
+}
+
+export { SDatePicker }
+export default SDatePicker

src/components/DatePicker/index.ts

@@ -1,9 +1,2 @@
-import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes } from './consts'
-
-export {
-  SDatePicker,
-  PickerTypes,
-  PickerAlignment,
-  InputTypes
-}
+export { SDatePicker } from './SDatePicker'
+export { PickerTypes, PickerAlignment, InputTypes } from './consts'

src/components/DesignSystem/SDesignSystemProvider.vue → src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue

@@ -6,8 +6,8 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
-import { DesignSystemProvideKey } from './consts'
-import { DesignSystemTypes } from '../../utils/DesignSystem'
+import { DesignSystemProvideKey } from '../consts'
+import { DesignSystemTypes } from '../../../utils/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {

src/components/DesignSystem/SDesignSystemProvider/index.ts

@@ -0,0 +1,13 @@
+import { VueConstructor } from 'vue'
+import { Components, SFCWithInstall } from '../../../types/components'
+
+import _SDesignSystemProvider from './SDesignSystemProvider.vue'
+
+const SDesignSystemProvider = _SDesignSystemProvider as SFCWithInstall<typeof _SDesignSystemProvider>
+
+SDesignSystemProvider.install = function (vue: VueConstructor) {
+  vue.component(Components.SDesignSystemProvider, SDesignSystemProvider)
+}
+
+export { SDesignSystemProvider }
+export default SDesignSystemProvider

src/components/DesignSystem/index.ts

@@ -1,9 +1,4 @@
-import SDesignSystemProvider from './SDesignSystemProvider.vue'
-import DesignSystemInject from './DesignSystemInject'
-import { DesignSystemProvideKey } from './consts'
 
-export {
-  SDesignSystemProvider,
-  DesignSystemProvideKey,
-  DesignSystemInject
-}
+export { default as DesignSystemInject } from './DesignSystemInject'
+export { SDesignSystemProvider } from './SDesignSystemProvider'
+export { DesignSystemProvideKey } from './consts'