classic-ui/modules/account/components/NoteAccount/NoteAccount.vue
2022-10-13 15:50:29 +02:00

68 lines
1.5 KiB
Vue

<template>
<div ref="note" class="note-account" :class="{ 'is-active': isActive }">
<h2 class="title">
<!-- <b-icon icon="astronaut" size="is-large" /> -->
{{ $t('account.title') }}
</h2>
<b-notification class="main-notification" type="is-info">
{{ $t('account.description') }}
</b-notification>
<Setup v-if="!isSetupAccount" />
<Control v-else />
</div>
</template>
<script>
import { noteComputed, noteMethods } from '../../injectors'
import { Setup } from '../Setup'
import { Control } from '../Control'
export default {
components: {
Setup,
Control
},
data() {
return {
isActive: false
}
},
computed: {
...noteComputed
},
watch: {
isInitialized(isInitialized) {
if (isInitialized) {
this.checkExistAccount()
}
},
isHighlightedNoteAccount: {
handler(value) {
if (value) {
this.scrollOnHiglight()
}
},
immediate: true
}
},
created() {
this.checkExistAccount()
},
methods: {
...noteMethods,
scrollOnHiglight() {
setTimeout(() => {
this.isActive = true
this.$refs.note.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' })
}, 100)
setTimeout(() => {
this.isActive = false
this.highlightNoteAccount({ isHighlighted: false })
}, 1000)
}
}
}
</script>