Improve dialog and json input components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
@@ -49,6 +49,7 @@
     "@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",
@@ -70,6 +71,7 @@
     "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",

src/components/Dialog/SDialog.vue

@@ -1,10 +1,11 @@
 <template>
   <el-dialog
+    ref="dialog"
     :visible.sync="model"
     :title="title"
     :width="width"
     :fullscreen="fullscreen"
-    :top="top"
+    :top="computedTop"
     :show-close="showClose"
     :modal="modal"
     :modal-append-to-body="modalAppendToBody"
@@ -27,7 +28,8 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import elementResizeDetectorMaker from 'element-resize-detector'
 
 @Component
 export default class SDialog extends Vue {
@@ -55,12 +57,13 @@ export default class SDialog extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly fullscreen!: boolean
   /**
-   * Margin top of the dialog component. Default value is `"30vh"`.
+   * Margin top of the dialog component. Default value is `"auto"`.
+   * It means that top margin will be automatically calculated based on dialog height/browser window size.
    *
-   * 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.
+   * Also, the value of the top property can be **CSS top** property.
+   * For instance, `"10%"`, `"200px"`, `"15vh"` etc.
    */
-  @Prop({ default: '30vh', type: String }) readonly top!: string
+  @Prop({ default: 'auto', type: String }) readonly top!: string
   /**
    * Background dimming state of the dialog component.
    *
@@ -128,7 +131,12 @@ export default class SDialog extends Vue {
    */
   @Prop({ type: Function }) readonly beforeClose!: (done: boolean) => {}
 
+  @Ref('dialog') dialog!: any
+
+  readonly erd = elementResizeDetectorMaker()
+
   model = this.visible
+  computedTop = this.top
 
   @Watch('visible')
   private handlePropChange (value: boolean): void {
@@ -140,6 +148,45 @@ export default class SDialog extends Vue {
     this.$emit('update:visible', value)
   }
 
+  mounted (): void {
+    this.$nextTick(() => {
+      const wrapper = (this.dialog || {}).$el as HTMLElement
+      if (!wrapper) {
+        return
+      }
+      this.erd.listenTo(wrapper, this.computeTop)
+      this.erd.listenTo(wrapper.children[0], this.computeTop)
+    })
+  }
+
+  destroyed (): void {
+    this.$nextTick(() => {
+      const wrapper = (this.dialog || {}).$el as HTMLElement
+      if (!wrapper) {
+        return
+      }
+      this.erd.uninstall(wrapper)
+      this.erd.uninstall(wrapper.children[0])
+    })
+  }
+
+  computeTop (): void {
+    if (this.top !== 'auto') {
+      this.computedTop = this.top
+      return
+    }
+    const wrapper = (this.dialog || {}).$el as HTMLElement
+    if (!wrapper || !wrapper.clientHeight) {
+      this.computedTop = this.top
+      return
+    }
+    const dialog = wrapper.children[0] as HTMLElement
+    const top = wrapper.clientHeight - dialog.clientHeight > 0
+      ? Math.floor((wrapper.clientHeight - dialog.clientHeight) / 2)
+      : 0
+    this.computedTop = `${top}px`
+  }
+
   handleOpen (): void {
     this.$emit('open')
   }

src/components/Input/SJsonInput.vue

@@ -4,19 +4,19 @@
     :class="computedClasses"
   >
     <v-jsoneditor
+      ref="jsoneditor"
       v-model="model"
       :options="options"
       :plus="false"
       :height="height"
       @error="handleError"
-    >
-    </v-jsoneditor>
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-import isEmpty from 'lodash/isEmpty'
+import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import isEmpty from 'lodash/fp/isEmpty'
 
 @Component
 export default class SJsonInput extends Vue {
@@ -32,14 +32,24 @@ export default class SJsonInput extends Vue {
    */
   @Prop({ type: String, default: '' }) readonly height!: string
   /**
-   * Disabled state
+   * Disabled state.
+   *
+   * `false` by default
    */
   @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
+  /**
+   * Readonly state.
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false }) readonly readonly!: boolean
   /**
    * Autocomplete dictionary. For now it doesn't work for some reasons
    */
   @Prop({ type: Array }) readonly dictionary!: Array<string>
 
+  @Ref('jsoneditor') jsoneditor!: any
+
   model = this.value
   options = {
     // https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options
@@ -59,11 +69,21 @@ export default class SJsonInput extends Vue {
     if (this.disabled) {
       cssClasses.push('disabled')
     }
+    if (this.readonly) {
+      cssClasses.push('readonly')
+    }
     return cssClasses
   }
 
   handleError (error: string): void {
-    this.$emit('error', error)
+    if (!this.readonly) {
+      this.$emit('error', error)
+      return
+    }
+    if (!this.jsoneditor) {
+      return
+    }
+    this.jsoneditor.editor.set(this.value)
   }
 
   @Watch('value', { deep: true })
@@ -73,7 +93,14 @@ export default class SJsonInput extends Vue {
 
   @Watch('model', { deep: true })
   private handleValueChange (value: object): void {
-    this.$emit('change', value)
+    if (!this.readonly) {
+      this.$emit('input', value)
+      this.$emit('change', value)
+    }
+    if (!this.jsoneditor) {
+      return
+    }
+    this.jsoneditor.editor.set(this.value)
   }
 }
 </script>
@@ -103,6 +130,14 @@ $color-ide-boolean: #0000FF;
       }
     }
   }
+  &.readonly .jsoneditor {
+    .ace_gutter .ace_gutter-cell.ace_error {
+      background-image: none;
+    }
+    .ace_tooltip {
+      display: none !important;
+    }
+  }
   // TODO: think about hover and focus
 }
 

src/stories/SDialog.stories.ts

@@ -67,7 +67,7 @@ export const configurable = () => ({
       default: text('Width', '50%')
     },
     top: {
-      default: text('Top', '30vh')
+      default: text('Top', 'auto')
     }
   },
   methods: {

src/stories/SJsonInput.stories.ts

@@ -28,6 +28,7 @@ export const configurable = () => ({
                  v-model="json"
                  :height="height"
                  :disabled="disabled"
+                 :readonly="readonly"
                >
                </s-json-input>
              </s-row>`,
@@ -40,6 +41,9 @@ export const configurable = () => ({
     },
     disabled: {
       default: boolean('Disabled', false)
+    },
+    readonly: {
+      default: boolean('Readonly', false)
     }
   }
 })