Refactor: rename alert to dialog

src/client/app/common/views/components/dialog.vue

@@ -0,0 +1,213 @@
+<template>
+<div class="felqjxyj" :class="{ splash }">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main">
+		<div class="icon" v-if="type" :class="type"><fa :icon="icon"/></div>
+		<header v-if="title" v-html="title"></header>
+		<div class="body" v-if="text" v-html="text"></div>
+		<ui-select v-if="select" v-model="selectedValue">
+			<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
+		</ui-select>
+		<ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash">
+			<ui-button @click="ok" primary autofocus>OK</ui-button>
+			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
+		</ui-horizon-group>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: 'info'
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		},
+		select: {
+			required: false
+		},
+		showCancelButton: {
+			type: Boolean,
+			default: false
+		},
+		splash: {
+			type: Boolean,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			selectedValue: null
+		};
+	},
+
+	computed: {
+		icon(): any {
+			switch (this.type) {
+				case 'success': return 'check';
+				case 'error': return faTimesCircle;
+				case 'warning': return 'exclamation-triangle';
+				case 'info': return 'info-circle';
+				case 'question': return faQuestionCircle;
+			}
+		}
+	},
+
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				scale: [1.2, 1],
+				duration: 300,
+				easing: [0, 0.5, 0.5, 1]
+			});
+
+			if (this.splash) {
+				setTimeout(() => {
+					this.close();
+				}, 1000);
+			}
+		});
+	},
+
+	methods: {
+		ok() {
+			const result = this.select ? this.selectedValue : true;
+			this.$emit('ok', result);
+			this.close();
+		},
+
+		cancel() {
+			this.$emit('cancel');
+			this.close();
+		},
+
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [0, 0.5, 0.5, 1],
+				complete: () => this.destroyDom()
+			});
+		},
+
+		onBgClick() {
+			this.cancel();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.felqjxyj
+	display flex
+	align-items center
+	justify-content center
+	position fixed
+	z-index 30000
+	top 0
+	left 0
+	width 100%
+	height 100%
+
+	&.splash
+		&, *
+			pointer-events none !important
+
+		> .main
+			min-width 0
+			width initial
+
+	> .bg
+		display block
+		position fixed
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		margin auto
+		padding 32px
+		min-width 320px
+		max-width 480px
+		width calc(100% - 32px)
+		text-align center
+		background var(--face)
+		border-radius 8px
+		color var(--faceText)
+		opacity 0
+
+		> .icon
+			font-size 32px
+
+			&.success
+				color #37ec92
+
+			&.error
+				color #ec4137
+
+			&.warning
+				color #ecb637
+
+			> *
+				display block
+				margin 0 auto
+
+			& + header
+				margin-top 16px
+
+		> header
+			margin 0 0 8px 0
+			font-weight bold
+			font-size 20px
+
+			& + .body
+				margin-top 8px
+
+		> .body
+			margin 16px 0
+
+		> .buttons
+			margin-top 16px
+
+</style>