Release 0.2.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Dialog/SDialog.vue

@@ -0,0 +1,172 @@
+<template>
+  <el-dialog
+    :visible.sync="model"
+    :title="title"
+    :width="width"
+    :fullscreen="fullscreen"
+    :top="top"
+    :show-close="showClose"
+    :modal="modal"
+    :modal-append-to-body="modalAppendToBody"
+    :append-to-body="appendToBody"
+    :lock-scroll="lockScroll"
+    :custom-class="customClass"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnEsc"
+    :before-close="beforeClose"
+    :center="center"
+    @open="handleOpen"
+    @close="handleClose"
+    @opened="handleAfterOpened"
+    @closed="handleAfterClosed"
+  >
+    <slot slot="title" name="title"></slot>
+    <slot></slot>
+    <slot slot="footer" name="footer"></slot>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+@Component
+export default class SDialog extends Vue {
+  /**
+   * Visibility of the dialog component.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly visible!: boolean
+  /**
+   * Title of the dialog component
+   */
+  @Prop({ default: '', type: String }) readonly title!: string
+  /**
+   * Width of the dialog component. Default value is `"50%"`.
+   *
+   * In this context, the value of the width property must match the valid value of the
+   * **CSS width** property. For instance, `"auto"`, `"200px"`, `"50%"` etc.
+   */
+  @Prop({ default: '50%', type: String }) readonly width!: string
+  /**
+   * Fullscreen mode of the dialog component.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly fullscreen!: boolean
+  /**
+   * Margin top of the dialog component. Default value is `"30vh"`.
+   *
+   * In this context, the value of the width property must match the valid value of the
+   * **CSS width** property. For instance, `"auto"`, `"200px"`, `"15vh"` etc.
+   */
+  @Prop({ default: '30vh', type: String }) readonly top!: string
+  /**
+   * Background dimming state of the dialog component.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly modal!: boolean
+  /**
+   * Will the modal be appended to body element.
+   * If false, the modal will be appended to Dialog's parent element.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly modalAppendToBody!: boolean
+  /**
+   * Will the dialog component be appended to body.
+   * A nested dialog should have this attribute set to `true`.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly appendToBody!: boolean
+  /**
+   * Disabled state of the scroll for the body while the dialog component is shown.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly lockScroll!: boolean
+  /**
+   * Custom CSS class for the dialog component
+   */
+  @Prop({ default: '', type: String }) readonly customClass!: string
+  /**
+   * Will close button be shown.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly showClose!: boolean
+  /**
+   * Can the dialog component be closed by clicking on the background mask.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly closeOnClickModal!: boolean
+  /**
+   * Can the dialog component be closed by clicking on the Escape button.
+   *
+   * `true` by default
+   */
+  @Prop({ default: true, type: Boolean }) readonly closeOnEsc!: boolean
+  /**
+   * Will dialog header and footer be centered.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly center!: boolean
+  /**
+   * Will dialog elements be destroyed after closing the dialog.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly destroyOnClose!: boolean
+  /**
+   * Function that will be called before closing.
+   *
+   * `(done: boolean) => {}`
+   */
+  @Prop({ type: Function }) readonly beforeClose!: (done: boolean) => {}
+
+  model = this.visible
+
+  @Watch('visible')
+  private handlePropChange (value: boolean): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: boolean): void {
+    this.$emit('update:visible', value)
+  }
+
+  handleOpen (): void {
+    this.$emit('open')
+  }
+
+  handleClose (): void {
+    this.$emit('close')
+  }
+
+  handleAfterOpened (): void {
+    this.$emit('after-opened')
+  }
+
+  handleAfterClosed (): void {
+    this.$emit('after-closed')
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-dialog {
+  border-radius: 8px;
+  .el-dialog__title {
+    font-weight: bold;
+    font-size: 16px;
+    color: $color-basic-black;
+  }
+}
+</style>

src/components/Dialog/index.ts

@@ -0,0 +1,3 @@
+import SDialog from './SDialog.vue'
+
+export { SDialog }

src/components/Input/SInput.vue

@@ -122,12 +122,12 @@ export default class SInput extends Vue {
   focused = false
   model = this.value
 
-  @Watch('value', { deep: true })
+  @Watch('value')
   private handlePropChange (value: string | number): void {
     this.model = value
   }
 
-  @Watch('model', { deep: true })
+  @Watch('model')
   private handleValueChange (value: string | number): void {
     this.$emit('change', value)
   }

src/components/Input/SJsonInput.vue

@@ -80,7 +80,7 @@ export default class SJsonInput extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
+// @import "../../styles/icons.scss";
 
 $color-ide-variable: #0451A5;
 $color-ide-string: #A31515;
@@ -165,9 +165,9 @@ $color-ide-boolean: #0000FF;
     &-active-line {
       background-color: $color-neutral-border;
     }
-    .ace_gutter-cell.ace_error {
-      @extend .s-icon-error; // TODO: fix the path for icon
-    }
+    // .ace_gutter-cell.ace_error {
+    //   @extend .s-icon-error; // TODO: fix the path for icon
+    // }
   }
   .ace_editor .ace_content,
   .ace_gutter .ace_gutter-cell {

src/components/index.ts

@@ -9,6 +9,7 @@ import { SCheckbox } from './Checkbox'
 import { SCol } from './Layout/Col'
 import { SCollapse, SCollapseItem } from './Collapse'
 import { SContainer } from './Layout/Container'
+import { SDialog } from './Dialog'
 import { SDropdown, SDropdownItem } from './Dropdown'
 import { SFooter } from './Layout/Footer'
 import { SForm, SFormItem } from './Form'
@@ -31,6 +32,7 @@ export {
   SCollapse,
   SCollapseItem,
   SContainer,
+  SDialog,
   SDropdown,
   SDropdownItem,
   SFooter,

src/index.ts

@@ -11,6 +11,7 @@ import {
   SCollapse,
   SCollapseItem,
   SContainer,
+  SDialog,
   SDropdown,
   SDropdownItem,
   SFooter,
@@ -42,6 +43,7 @@ const elements = [
   { component: SCollapse, name: Components.SCollapse },
   { component: SCollapseItem, name: Components.SCollapseItem },
   { component: SContainer, name: Components.SContainer },
+  { component: SDialog, name: Components.SDialog },
   { component: SDropdown, name: Components.SDropdown },
   { component: SDropdownItem, name: Components.SDropdownItem },
   { component: SFooter, name: Components.SFooter },
@@ -71,7 +73,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(SoramitsuElements, {})
 }
 
-export {
+/* export {
   SApp,
   SAside,
   SButton,
@@ -82,6 +84,7 @@ export {
   SCollapse,
   SCollapseItem,
   SContainer,
+  SDialog,
   SDropdown,
   SDropdownItem,
   SFooter,
@@ -99,5 +102,5 @@ export {
   SScrollSections,
   SSubmenu,
   STooltip
-}
+} */
 export default SoramitsuElements

src/stories/SDialog.stories.ts

@@ -0,0 +1,79 @@
+import { text, withKnobs, boolean } from '@storybook/addon-knobs'
+
+import { SDialog, SRow, SButton } from '../components'
+
+export default {
+  component: SDialog,
+  title: 'Design System/Dialog',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SDialog, SRow, SButton },
+  template: `<s-row
+               class="flex"
+               style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
+             >
+               <s-button size="medium" @click="visible = true">Open Dialog</s-button>
+               <s-dialog
+                 :visible.sync="visible"
+                 :modal="modal"
+                 :title="title"
+                 :width="width"
+                 :fullscreen="fullscreen"
+                 :top="top"
+                 :show-close="showClose"
+                 :close-on-click-modal="closeOnClickModal"
+                 :close-on-esc="closeOnEsc"
+                 :center="center"
+                 @open="handleOpen"
+                 @close="handleClose"
+                 @after-opened="handleAfterOpened"
+                 @after-closed="handleAfterClosed"
+               >
+                 <span>Default content</span>
+                 <template #footer>
+                   <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
+                   <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
+                 </template>
+               </s-dialog>
+             </s-row>`,
+  data: () => ({
+    visible: false
+  }),
+  props: {
+    modal: {
+      default: boolean('Modal', true)
+    },
+    title: {
+      default: text('Title', 'Default title')
+    },
+    fullscreen: {
+      default: boolean('fullscreen', false)
+    },
+    showClose: {
+      default: boolean('Show close', true)
+    },
+    closeOnClickModal: {
+      default: boolean('Close on click modal', true)
+    },
+    closeOnEsc: {
+      default: boolean('Close on Esc', true)
+    },
+    center: {
+      default: boolean('Center', false)
+    },
+    width: {
+      default: text('Width', '50%')
+    },
+    top: {
+      default: text('Top', '30vh')
+    }
+  },
+  methods: {
+    handleOpen: () => console.log('open'),
+    handleClose: () => console.log('close'),
+    handleAfterOpened: () => console.log('opened'),
+    handleAfterClosed: () => console.log('closed')
+  }
+})

src/types/components.ts

@@ -9,6 +9,7 @@ export enum Components {
   SCollapse = 'SCollapse',
   SCollapseItem = 'SCollapseItem',
   SContainer = 'SContainer',
+  SDialog = 'SDialog',
   SDropdown = 'SDropdown',
   SDropdownItem = 'SDropdownItem',
   SFooter = 'SFooter',