soramitsu · Nikita-Polyakov · Jun 30, 2021 · Jun 30, 2021 · Jun 30, 2021
diff --git a/README.md b/README.md
@@ -5,6 +5,30 @@
 yarn install
 ```
 
+## Font variables setup
+Required!: Add scss font variables to your project
+
+```
+$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
+$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
+$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
+
+Note: Without customization all library components and directives are registering global
+
+```
+import Vue from 'vue'
+import SoramitsuElements, { Components, Directives } from '@soramitsu/soramitsu-js-ui'
+
+Vue.use(SoramitsuElements, {
+  components: [Components.Button, Components.Input],
+  directives: [Directives.Float]
+})
+```
+
 ### Compiles and hot-reloads storybook with components for development
 ```
 yarn storybook:serve

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -32,6 +32,7 @@
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^9.1.2",
     "vuex": "^3.1.3",
     "vuex-class": "^0.3.2"
@@ -83,7 +84,6 @@
     "ts-jest": "^26.0.0",
     "typescript": "~3.8.3",
     "vue-cli-plugin-storybook": "~1.2.2",
-    "vue-i18n": "^8.11.2",
     "vue-router": "^3.3.4",
     "vue-template-compiler": "^2.6.11"
   },

diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue
@@ -30,8 +30,13 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
 import isEmpty from 'lodash/fp/isEmpty'
+import VJsoneditor from 'v-jsoneditor'
 
-@Component
+@Component({
+  components: {
+    VJsoneditor
+  }
+})
 export default class SJsonInput extends Vue {
   /**
    * Value of JSON input. Could be used with `v-model`

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,7 +1,9 @@
-import '../plugins'
-import '../styles'
+import Vue from 'vue'
+
 import '../styles/index.scss'
 
+import { ElementUIPlugin } from '../plugins'
+
 import { SApp } from './Layout/App'
 import { SAside } from './Layout/Aside'
 import { SBreadcrumb, SBreadcrumbItem } from './Breadcrumb'
@@ -34,6 +36,8 @@ import { STab, STabs } from './Tab'
 import { STable, SHierarchicalTable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
 
+Vue.use(ElementUIPlugin)
+
 export {
   SApp,
   SAside,

diff --git a/src/index.ts b/src/index.ts
@@ -50,6 +50,7 @@ import {
   STableColumn,
   STooltip
 } from './components'
+
 import { Float, Integer } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
@@ -60,61 +61,59 @@ import { Themes } from './utils/Theme'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 import { SDialogMixin } from './mixins'
 
-const components = [
-  { component: SApp, name: Components.SApp },
-  { component: SAside, name: Components.SAside },
-  { component: SBreadcrumb, name: Components.SBreadcrumb },
-  { component: SBreadcrumbItem, name: Components.SBreadcrumbItem },
-  { component: SButton, name: Components.SButton },
-  { component: SButtonGroup, name: Components.SButtonGroup },
-  { component: SCard, name: Components.SCard },
-  { component: SCheckbox, name: Components.SCheckbox },
-  { component: SCol, name: Components.SCol },
-  { component: SCollapse, name: Components.SCollapse },
-  { component: SCollapseItem, name: Components.SCollapseItem },
-  { component: SContainer, name: Components.SContainer },
-  { component: SDatePicker, name: Components.SDatePicker },
-  { component: SDesignSystemProvider, name: Components.SDesignSystemProvider },
-  { component: SDialog, name: Components.SDialog },
-  { component: SDivider, name: Components.SDivider },
-  { component: SDropdown, name: Components.SDropdown },
-  { component: SDropdownItem, name: Components.SDropdownItem },
-  { component: SFooter, name: Components.SFooter },
-  { component: SForm, name: Components.SForm },
-  { component: SFormItem, name: Components.SFormItem },
-  { component: SHeader, name: Components.SHeader },
-  { component: SIcon, name: Components.SIcon },
-  { component: SInput, name: Components.SInput },
-  { component: SFloatInput, name: Components.SFloatInput },
-  { component: SJsonInput, name: Components.SJsonInput },
-  { component: SMain, name: Components.SMain },
-  { component: SMenu, name: Components.SMenu },
-  { component: SMenuItem, name: Components.SMenuItem },
-  { component: SMenuItemGroup, name: Components.SMenuItemGroup },
-  { component: SOption, name: Components.SOption },
-  { component: SOptionGroup, name: Components.SOptionGroup },
-  { component: SPagination, name: Components.SPagination },
-  { component: SRadio, name: Components.SRadio },
-  { component: SRadioGroup, name: Components.SRadioGroup },
-  { component: SRow, name: Components.SRow },
-  { component: SScrollSectionItem, name: Components.SScrollSectionItem },
-  { component: SScrollSections, name: Components.SScrollSections },
-  { component: SSelect, name: Components.SSelect },
-  { component: SSlider, name: Components.SSlider },
-  { component: SSubmenu, name: Components.SSubmenu },
-  { component: SSwitch, name: Components.SSwitch },
-  { component: STab, name: Components.STab },
-  { component: STabs, name: Components.STabs },
-  { component: STable, name: Components.STable },
-  { component: SHierarchicalTable, name: Components.SHierarchicalTable },
-  { component: STableColumn, name: Components.STableColumn },
-  { component: STooltip, name: Components.STooltip }
-]
+const libraryComponentsMap = {
+  [Components.SApp]: SApp,
+  [Components.SAside]: SAside,
+  [Components.SBreadcrumb]: SBreadcrumb,
+  [Components.SBreadcrumbItem]: SBreadcrumbItem,
+  [Components.SButton]: SButton,
+  [Components.SButtonGroup]: SButtonGroup,
+  [Components.SCard]: SCard,
+  [Components.SCheckbox]: SCheckbox,
+  [Components.SCol]: SCol,
+  [Components.SCollapse]: SCollapse,
+  [Components.SCollapseItem]: SCollapseItem,
+  [Components.SContainer]: SContainer,
+  [Components.SDatePicker]: SDatePicker,
+  [Components.SDesignSystemProvider]: SDesignSystemProvider,
+  [Components.SDialog]: SDialog,
+  [Components.SDivider]: SDivider,
+  [Components.SDropdown]: SDropdown,
+  [Components.SDropdownItem]: SDropdownItem,
+  [Components.SFooter]: SFooter,
+  [Components.SForm]: SForm,
+  [Components.SFormItem]: SFormItem,
+  [Components.SHeader]: SHeader,
+  [Components.SIcon]: SIcon,
+  [Components.SFloatInput]: SFloatInput,
+  [Components.SJsonInput]: SJsonInput,
+  [Components.SMain]: SMain,
+  [Components.SMenu]: SMenu,
+  [Components.SMenuItem]: SMenuItem,
+  [Components.SMenuItemGroup]: SMenuItemGroup,
+  [Components.SOption]: SOption,
+  [Components.SOptionGroup]: SOptionGroup,
+  [Components.SPagination]: SPagination,
+  [Components.SRadio]: SRadio,
+  [Components.SRadioGroup]: SRadioGroup,
+  [Components.SRow]: SRow,
+  [Components.SScrollSectionItem]: SScrollSectionItem,
+  [Components.SScrollSections]: SScrollSections,
+  [Components.SSlider]: SSlider,
+  [Components.SSubmenu]: SSubmenu,
+  [Components.SSwitch]: SSwitch,
+  [Components.STab]: STab,
+  [Components.STabs]: STabs,
+  [Components.STable]: STable,
+  [Components.SHierarchicalTable]: SHierarchicalTable,
+  [Components.STableColumn]: STableColumn,
+  [Components.STooltip]: STooltip
+}
 
-const directives = [
-  { directive: Float, name: Directives.Float },
-  { directive: Integer, name: Directives.Integer }
-]
+const libraryDirectivesMap = {
+  [Directives.Float]: Float,
+  [Directives.Integer]: Integer
+}
 
 const SoramitsuElements = {
   install (vue: typeof Vue, options?: any): void {
@@ -124,8 +123,12 @@ const SoramitsuElements = {
         options.store.registerModule(molude, modules[molude])
       })
     }
-    components.forEach(el => vue.component(el.name, el.component))
-    directives.forEach(item => vue.directive(item.name, item.directive))
+
+    const components: Array<string> = options && options.components ? options.components : Object.values(Components)
+    const directives: Array<string> = options && options.directives ? options.directives : Object.values(Directives)
+
+    components.forEach(item => vue.component(item, libraryComponentsMap[item]))
+    directives.forEach(item => vue.component(item, libraryDirectivesMap[item]))
   }
 }
 
@@ -138,6 +141,8 @@ export {
   Themes,
   setDesignSystem,
   DesignSystemTypes,
+  Components,
+  Directives,
   Loading,
   Message,
   MessageBox,

diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts
@@ -1,21 +1,27 @@
 import Vue from 'vue'
+
 import Element, {
   Loading,
   Message,
-  MessageBox as MsgBox,
+  MessageBox,
   Notification
 } from 'element-ui'
 
 import i18n from '../lang'
 
-Vue.use(Loading.directive)
-Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
-const MessageBox = MsgBox
-Vue.prototype.$loading = Loading.service
-Vue.prototype.$prompt = MessageBox.prompt
-Vue.prototype.$alert = MessageBox.alert
-Vue.prototype.$message = Message
-Vue.prototype.$notify = Notification
+const ElementUIPlugin = {
+  install: (vue: typeof Vue) => {
+    vue.use(Loading.directive)
+    vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
+    vue.prototype.$loading = Loading.service
+    vue.prototype.$prompt = MessageBox.prompt
+    vue.prototype.$alert = MessageBox.alert
+    vue.prototype.$message = Message
+    vue.prototype.$notify = Notification
+  }
+}
+
+export default ElementUIPlugin
 
 export {
   Loading,

diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -1,2 +1 @@
-import './elementUI'
-import './jsonUI'
+export { default as ElementUIPlugin } from './elementUI'
diff --git a/src/plugins/jsonUI.ts b/src/plugins/jsonUI.ts
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
@@ -28,7 +28,7 @@
       border-bottom-color: transparent;
     }
     .el-icon-arrow-right {
-      font-family: $s-font-family-icons;
+      font-family: var(--s-font-family-icons);
       @extend .s-icon-chevron-down-rounded-16;
       font-size: var(--s-icon-font-size-mini);
       padding: 8px;

diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -1,6 +1,6 @@
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
 }
 
 html {
@@ -32,7 +32,7 @@ h1, h2, h3, h4, h5, h6,
 .d1, .d2,
 .ch1, .ch2, .ch3,
 .p1, .p2, .p3, .p4 {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   font-feature-settings: var(--s-font-feature-settings-heading);
 }
 

diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
@@ -18,7 +18,7 @@
 $date-picker-padding: 8px;
 
 .s-date-picker {
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   width: 100%;
   position: relative;
   &.s-big .el-input__inner {

diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
@@ -1,18 +1,18 @@
 @font-face {
   font-family: "soramitsu-icons";
-  src: url("~@/assets/fonts/soramitsu-icons-1.0.0.ttf") format("truetype");
+  src: url(#{$s-font-family-icons-path}) format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 @font-face {
   font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-VariableFont_wght.ttf") format("truetype-variations");
+  src: url(#{$s-font-family-default-path}) format("truetype-variations");
   font-weight: 1 999;
 }
 @font-face {
   font-family: "JetBrainsMono";
-  src: url("~@/assets/fonts/JetBrainsMono-Regular.woff");
+  src: url(#{$s-font-family-mono-path});
   font-weight: normal;
   font-style: normal;
 }
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
@@ -1,5 +1,5 @@
 [class^="s-icon-"], [class*=" s-icon-"] {
-  font-family: 'soramitsu-icons' !important;
+  font-family: var(--s-font-family-icons);
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -9,7 +9,6 @@
   -moz-osx-font-smoothing: grayscale;
   color: var(--s-color-base-content-primary);
 }
-$icons-font: 'soramitsu-icons' !important;
 /*_____________________________________________Icons variables_____________________________________________*/
 $s-icon-arrow-bottom-16: "\eb11";
 $s-icon-arrow-bottom-left-16: "\eb12";

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import "./variables";
 @import "./neumorphism/index.scss";
 @import "./element-variables";
+@import "./fonts";
 @import "./common";
 @import "./button";
 @import "./breadcrumbs";

diff --git a/src/styles/index.ts b/src/styles/index.ts
diff --git a/src/styles/input.scss b/src/styles/input.scss
@@ -23,7 +23,7 @@ $input-padding-left: $s-basic-spacing * 2 - $input-border-width;
   border-color: var(--s-color-base-background);
   border-style: solid;
   border-width: $input-border-width;
-  font-family: $s-font-family-default;
+  font-family: var(--s-font-family-default);
   height: $s-size-big;
   padding: $input-padding-top $input-padding-left;
   position: relative;