Dialog mixin

src/index.ts

@@ -54,6 +54,7 @@ import { Directives } from './types/directives'
 import { modules, Modules } from './store'
 import { setTheme } from './utils'
 import { Loading, Message, MessageBox, Notification } from './plugins/elementUI'
+import { SDialogMixin } from './mixins'
 
 const components = [
   { component: SApp, name: Components.SApp },
@@ -177,6 +178,7 @@ export {
   STabs,
   STable,
   STableColumn,
-  STooltip
+  STooltip,
+  SDialogMixin
 }
 export default SoramitsuElements

src/mixins/SDialogMixin.ts

@@ -0,0 +1,23 @@
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+@Component
+export default class SDialogMixin extends Vue {
+  /**
+   * Dialog visibility
+   *
+   * `false` by default
+   */
+  @Prop({ type: Boolean, default: false, required: true }) readonly visible!: boolean
+
+  isVisible = this.visible
+
+  @Watch('visible')
+  public handleVisibleChange (value: boolean): void {
+    this.isVisible = value
+  }
+
+  @Watch('isVisible')
+  public handleIsVisibleChange (value: boolean): void {
+    this.$emit('update:visible', value)
+  }
+}

src/mixins/index.ts

@@ -0,0 +1,9 @@
+import SDialogMixin from './SDialogMixin'
+import BorderRadiusMixin from './BorderRadiusMixin'
+import SizeMixin from './SizeMixin'
+
+export {
+  SDialogMixin,
+  BorderRadiusMixin,
+  SizeMixin
+}