-
Notifications
You must be signed in to change notification settings - Fork 12
/
DialogStatus.vue
93 lines (75 loc) · 3.29 KB
/
DialogStatus.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!--
-
- Hedera Mirror Node Explorer
-
- Copyright (C) 2021 - 2024 Hedera Hashgraph, LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
-->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- TEMPLATE -->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<template>
<div class="is-flex is-align-items-baseline" >
<div v-if="dialogSuccessVisible" class="icon is-medium has-text-success ml-0">
<i class="fas fa-check"/>
</div>
<div v-else-if="dialogErrorVisible" class="icon is-medium has-text-danger">
<span style="font-size: 18px; font-weight: 900">X</span>
</div>
<div v-else />
<div class="block h-is-tertiary-text mt-2">
<slot name="mainMessage"/>
</div>
</div>
<div class="h-is-property-text my-4">
<slot name="extraMessage"/>
</div>
</template>
<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- SCRIPT -->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<script lang="ts">
import {computed, defineComponent, PropType} from "vue";
import {DialogController, DialogMode} from "@/components/dialog/DialogController";
export default defineComponent({
name: "DialogStatus",
components: {},
props: {
controller: {
type: Object as PropType<DialogController>,
required: true
},
isSuccess: Boolean as PropType<boolean|undefined>,
},
setup(props) {
const dialogSuccessVisible = computed(
() => props.isSuccess !== undefined
? props.isSuccess
: props.controller.mode.value === DialogMode.Success)
const dialogErrorVisible = computed(
() => props.isSuccess !== undefined
? !props.isSuccess
: props.controller.mode.value === DialogMode.Error)
return {
dialogSuccessVisible,
dialogErrorVisible
}
}
});
</script>
<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- STYLE -->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<style/>