46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<q-card bordered class="row q-ma-xs q-pa-xs" style="position: relative">
|
||
|
|
<div class="col-12 text-weight-light">{{ dateString }}</div>
|
||
|
|
<div class="col-12">{{ modelValue.text }}</div>
|
||
|
|
<q-btn
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="close"
|
||
|
|
size="sm"
|
||
|
|
color="negative"
|
||
|
|
class="q-ma-xs"
|
||
|
|
style="position: absolute; top: 0; right: 0"
|
||
|
|
@click="remove"
|
||
|
|
/>
|
||
|
|
</q-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, PropType, computed } from 'vue';
|
||
|
|
import { formatDateTime } from 'src/utils/datetime';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'Notification',
|
||
|
|
props: {
|
||
|
|
modelValue: {
|
||
|
|
required: true,
|
||
|
|
type: Object as PropType<FG.Notification>,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: {
|
||
|
|
remove: (id: number) => !!id,
|
||
|
|
},
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const dateString = computed(() => formatDateTime(props.modelValue.time, true, true));
|
||
|
|
|
||
|
|
function remove() {
|
||
|
|
emit('remove', props.modelValue.id);
|
||
|
|
}
|
||
|
|
|
||
|
|
return { dateString, remove };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|