Release/0.6.7

config/storybook/preview.js

@@ -2,6 +2,8 @@ import { addParameters, addDecorator } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { DocsPage } from '@storybook/addon-docs/blocks'
 
+import mainStore from '../../src/store'
+
 addParameters({
   options: {
     showRoots: true
@@ -22,5 +24,6 @@ addDecorator(withA11y)
 addDecorator(() => ({
   template: `<div class="s-flex" style="padding: 20px;">
                <story/>
-             </div>`
+             </div>`,
+  store: mainStore
 }))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.6.4",
+  "version": "0.6.7",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
@@ -25,7 +25,9 @@
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.1"
+    "vue-property-decorator": "^8.4.1",
+    "vuex": "^3.1.3",
+    "vuex-class": "^0.3.2"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^6.0.0",

src/components/Icon/SIcon.vue

@@ -42,7 +42,7 @@ export default class SIcon extends Vue {
   get computedStyles () {
     const styles = {} as any
     if (this.size) {
-      styles.fontSize = typeof this.size === 'number' ? `${this.size}px` : this.size
+      styles.fontSize = !isNaN(+this.size) ? `${this.size}px` : this.size
     }
     return styles
   }

src/components/Tooltip/STooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <el-tooltip
     ref="tooltip"
-    :effect="theme"
+    :effect="computedTheme"
     :content="content"
     :placement="placement"
     v-model="model"
@@ -23,21 +23,24 @@
 
 <script lang="ts">
 import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
 import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+import { Theme } from '../../utils/Theme'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
 export default class STooltip extends Mixins(BorderRadiusMixin) {
   /**
-   * Theme of the tooltip. Supported values: `"dark"` or `"light"`.
+   * Theme of the tooltip. Supported values: `"dark"`, `"light"`, or `"auto"`.
+   * `"auto"` means that it will be managed with theming controller by `setTheme` function
    *
-   * `"dark"` by default
+   * `"auto"` is set by default
    */
-  @Prop({ default: TooltipTheme.DARK, type: String }) readonly theme!: TooltipEffect
+  @Prop({ default: TooltipTheme.AUTO, type: String }) readonly theme!: string
   /**
    * Content of the tooltip. You can set content from `content` slot as well
    */
@@ -108,6 +111,8 @@ export default class STooltip extends Mixins(BorderRadiusMixin) {
 
   @Ref('tooltip') tooltip!: any
 
+  @Getter libraryTheme!: Theme
+
   get computedPopperClass (): string {
     const cssClasses: Array<string> = []
     if (this.popperClass) {
@@ -138,5 +143,16 @@ export default class STooltip extends Mixins(BorderRadiusMixin) {
     }
     tooltip.debounceClose = debounce(30, tooltip.handleClosePopper)
   }
+
+  get computedTheme (): string {
+    if (this.theme === TooltipTheme.AUTO) {
+      if (this.libraryTheme) {
+        return this.libraryTheme
+      } else {
+        throw new Error('Please provide a storage for the ui-library')
+      }
+    }
+    return this.theme
+  }
 }
 </script>

src/components/Tooltip/consts.ts

@@ -1,6 +1,7 @@
 export enum TooltipTheme {
   DARK = 'dark',
-  LIGHT = 'light'
+  LIGHT = 'light',
+  AUTO = 'auto'
 }
 
 export enum TooltipPlacement {

src/index.ts

@@ -50,6 +50,8 @@ import {
 import { Float, Integer } from './directives'
 import { Components } from './types/components'
 import { Directives } from './types/directives'
+import { modules, Modules } from './store'
+import { setTheme } from './utils'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
 
 const components = [
@@ -106,7 +108,13 @@ const directives = [
 ]
 
 const SoramitsuElements = {
-  install (vue: typeof Vue): void {
+  install (vue: typeof Vue, options?: any): void {
+    // TODO: maybe we'll need error message about storage here
+    if (options && options.store) {
+      Object.values(Modules).forEach(molude => {
+        options.store.registerModule(molude, modules[molude])
+      })
+    }
     components.forEach(el => vue.component(el.name, el.component))
     directives.forEach(item => vue.directive(item.name, item.directive))
   }
@@ -117,6 +125,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export {
+  setTheme,
   Loading,
   Message,
   MessageBox,

src/store/Theme.ts

@@ -0,0 +1,50 @@
+import map from 'lodash/fp/map'
+import flatMap from 'lodash/fp/flatMap'
+import fromPairs from 'lodash/fp/fromPairs'
+import flow from 'lodash/fp/flow'
+import concat from 'lodash/fp/concat'
+
+import { Theme, Themes } from '../utils/Theme'
+
+const types = flow(
+  flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
+  concat([
+    'CHANGE_THEME'
+  ]),
+  map(x => [x, x]),
+  fromPairs
+)([])
+
+function initialState () {
+  return {
+    theme: Themes.LIGHT
+  }
+}
+
+const state = initialState()
+
+const getters = {
+  libraryTheme (state) {
+    return state.theme
+  }
+}
+
+const mutations = {
+  [types.CHANGE_THEME] (state, theme: Theme) {
+    state.theme = theme
+  }
+}
+
+const actions = {
+  changeTheme ({ commit }, { theme }) {
+    commit(types.CHANGE_THEME, theme)
+  }
+}
+
+export default {
+  types,
+  state,
+  getters,
+  mutations,
+  actions
+}

src/store/index.ts

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import Theme from './Theme'
+
+const modules = {
+  Theme
+}
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules,
+  strict: process.env.NODE_ENV !== 'production'
+})
+
+export {
+  modules
+}
+
+export enum Modules {
+  Theme = 'Theme'
+}
+
+export default store

src/stories/Dropdown/SDropdown.stories.ts

@@ -17,7 +17,7 @@ export const configurable = () => ({
   template: `<s-dropdown
                type="button"
                :size="size"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :buttonType="buttonType"
                :placement="placement"
                :hide-on-click="hideOnClick"

src/stories/Intro/Customization.stories.ts

@@ -83,7 +83,7 @@ export const configurable = () => ({
                   <s-input
                     type="number"
                     :placeholder="button.label + ' (px)'"
-                    :borderRadius="button.label"
+                    :border-radius="button.label"
                     style="margin-right: 10px; margin-right: 10px;"
                     @change="(value) => handleBorderRadiusChange(button.label, value)"
                   />

src/stories/Menu/SMenu.stories.ts

@@ -13,7 +13,7 @@ export const basicMenu = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="1"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -62,7 +62,7 @@ export const sideBar = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="2"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -121,7 +121,7 @@ export const topBar = () => ({
   template: `<s-menu
                default-active="4"
                mode="horizontal"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                @select="handleSelect">
                <s-menu-item index="1">Navigator One</s-menu-item>
                <s-submenu index="2">

src/stories/SButton.stories.ts

@@ -20,7 +20,7 @@ export const configurable = () => ({
                :icon="type === 'action' ? 'back' : ''"
                :type="type"
                :size="size"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
@@ -117,7 +117,7 @@ export const withDifferentBorderRadius = () => ({
                <s-button
                  v-for="item in items"
                  :key="item.borderRadius"
-                 :borderRadius="item.borderRadius"
+                 :border-radius="item.borderRadius"
                >
                  {{ item.label }}
                </s-button>

src/stories/SCard.stories.ts

@@ -13,11 +13,11 @@ export default {
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card style="width: 80%;" :shadow="shadow" :borderRadius="borderRadius" :clickable="clickable" @click="handleClick">
+               <s-card style="width: 80%;" :shadow="shadow" :border-radius="borderRadius" :clickable="clickable" @click="handleClick">
                  <template slot="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
-                     <s-dropdown type="ellipsis" :borderRadius="borderRadius">
+                     <s-dropdown type="ellipsis" :border-radius="borderRadius">
                        Menu
                        <template #menu>
                          <s-dropdown-item>First</s-dropdown-item>

src/stories/SCheckbox.stories.ts

@@ -17,7 +17,7 @@ export const configurable = () => ({
                  v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  :size="size"
                  :label="label"
                  @change="(value) => changeValue = value"
@@ -100,12 +100,12 @@ export const differentBorderRadius = () => ({
   template: `<s-row :gutter="20" style="flex: 1;">
                <template v-for="item in items">
                  <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
-                   <s-checkbox :borderRadius="item.borderRadius" :value="false">
+                   <s-checkbox :border-radius="item.borderRadius" :value="false">
                      {{ item.label }}
                    </s-checkbox>
                  </s-col>
                  <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
-                   <s-checkbox border :borderRadius="item.borderRadius" :value="true">
+                   <s-checkbox border :border-radius="item.borderRadius" :value="true">
                      {{ item.label }}
                    </s-checkbox>
                  </s-col>

src/stories/SDatePicker.stories.ts

@@ -22,8 +22,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :clearable="clearable"
                  :align="align"
-                 :borderRadius="borderRadius"
-                 :popperClass="borderRadius"
+                 :border-radius="borderRadius"
+                 :popper-class="borderRadius"
                  :input-type="inputType"
                  placeholder="Select date"
                  start-placeholder="From"

src/stories/SDialog.stories.ts

@@ -23,7 +23,7 @@ export const configurable = () => ({
                  :width="width"
                  :fullscreen="fullscreen"
                  :top="top"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  :show-close="showClose"
                  :close-on-click-modal="closeOnClickModal"
                  :close-on-esc="closeOnEsc"

src/stories/SInput.stories.ts

@@ -18,7 +18,7 @@ export const configurable = () => ({
                :type="type"
                :placeholder="placeholder"
                :disabled="disabled"
-               :borderRadius="borderRadius"
+               :border-radius="borderRadius"
                :show-password="showPassword"
                :readonly="readonly"
                :show-text-limit="showTextLimit"

src/stories/SPagination.stories.ts

@@ -18,8 +18,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :small="small"
                  :background="background"
-                 :borderRadius="borderRadius"
-                 :popperClass="borderRadius"
+                 :border-radius="borderRadius"
+                 :popper-class="borderRadius"
                  :prev-text="prevText"
                  :next-text="nextText"
                  @size-change="handleSizeChange"

src/stories/STooltip.stories.ts

@@ -19,7 +19,7 @@ export const configurable = () => ({
                  v-model="model"
                  :content="content"
                  :disabled="disabled"
-                 :borderRadius="borderRadius"
+                 :border-radius="borderRadius"
                  :offset="offset"
                  :openDelay="openDelay"
                  @change="handleChange"
@@ -32,7 +32,7 @@ export const configurable = () => ({
   }),
   props: {
     theme: {
-      default: select('Theme', Object.values(TooltipTheme), TooltipTheme.DARK)
+      default: select('Theme', Object.values(TooltipTheme), TooltipTheme.AUTO)
     },
     content: {
       default: text('Content', 'Custom tooltip')