Переход на quasar

client/components/share/StdDialog.vue

@@ -0,0 +1,104 @@
+<template>
+    <q-dialog v-model="dialog" @hide="onHide">
+        <slot></slot>
+
+        <div v-show="alertType" class="column bg-white">
+            <div class="header row">
+                <div class="caption col row items-center q-ml-md">
+                    <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <div v-html="caption"></div>
+                </div>
+                <div class="close-icon column justify-center items-center">
+                    <q-btn flat round dense v-close-popup>
+                        <q-icon name="la la-times" size="18px"></q-icon>
+                    </q-btn>
+                </div>
+            </div>
+
+            <div class="col q-mx-md">
+                <div v-html="message"></div>
+            </div>
+
+            <div class="buttons row justify-end q-pa-md">
+                <q-btn class="q-px-md" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
+            </div>
+        </div>
+    </q-dialog>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+//import * as utils from '../../share/utils';
+
+export default @Component({
+})
+class StdDialog extends Vue {
+    caption = '';
+    message = '';
+    dialog = false;
+    alertType = false;
+
+    created() {
+    }
+
+    init(message, caption) {
+        this.caption = caption;
+        this.message = message;
+
+        this.ok = false;        
+        this.alertType = false;
+    }
+
+    onHide() {
+        if (this.hideTrigger) {
+            this.hideTrigger();
+            this.hideTrigger = null;
+        }
+    }
+
+    okClick() {
+        this.ok = true;
+    }
+
+    alert(message, caption) {
+        return new Promise((resolve) => {
+            this.init(message, caption);
+
+            this.hideTrigger = () => {
+                if (this.ok) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            };
+
+            this.alertType = true;
+            this.dialog = true;
+        });
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.header {
+    height: 50px;
+}
+
+.caption {
+    font-size: 110%;
+    overflow: hidden;
+}
+
+.close-icon {
+    width: 50px;
+}
+
+.buttons {
+    height: 60px;
+}
+
+</style>