58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<template>
|
|
<DialogFrame ref="Dialog" :width="300" :height="380" header-title="Login">
|
|
<LoginForm v-on:update-close="close" />
|
|
</DialogFrame>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, nextTick } from 'vue';
|
|
import DialogFrame from '../dialog/DialogFrame.vue';
|
|
import { useNotify } from '../general/useNotify';
|
|
import LoginForm from './LoginForm.vue';
|
|
|
|
const { NotifyResponse } = useNotify();
|
|
const Dialog = ref();
|
|
const refUserInput = ref();
|
|
|
|
const open = () => {
|
|
Dialog.value?.open();
|
|
nextTick(() => {
|
|
refUserInput.value?.focus();
|
|
}).catch((err) => NotifyResponse(err, 'error'));
|
|
};
|
|
|
|
const close = () => {
|
|
Dialog.value.close();
|
|
};
|
|
|
|
defineExpose({ open });
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
20% {
|
|
transform: translateX(-8px);
|
|
}
|
|
40% {
|
|
transform: translateX(8px);
|
|
}
|
|
60% {
|
|
transform: translateX(-6px);
|
|
}
|
|
80% {
|
|
transform: translateX(6px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 0.4s ease;
|
|
border: 2px solid #f44336;
|
|
}
|
|
</style>
|