wip

src/web/app/mobile/tags/notify.tag → src/web/app/mobile/views/components/notify.vue

-<mk-notify>
-	<mk-notification-preview notification={ opts.notification }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position fixed
-			z-index 1024
-			bottom -64px
-			left 0
-			width 100%
-			height 64px
-			pointer-events none
-			-webkit-backdrop-filter blur(2px)
-			backdrop-filter blur(2px)
-			background-color rgba(#000, 0.5)
+<template>
+<div class="mk-notify">
+	<mk-notification-preview :notification="notification"/>
+</div>
+</template>
 
-	</style>
-	<script lang="typescript">
-		import * as anime from 'animejs';
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
 
-		this.on('mount', () => {
+export default Vue.extend({
+	props: ['notification'],
+	mounted() {
+		Vue.nextTick(() => {
 			anime({
-				targets: this.root,
+				targets: this.$el,
 				bottom: '0px',
 				duration: 500,
 				easing: 'easeOutQuad'
@@ -28,7 +21,7 @@
 
 			setTimeout(() => {
 				anime({
-					targets: this.root,
+					targets: this.$el,
 					bottom: '-64px',
 					duration: 500,
 					easing: 'easeOutQuad',
@@ -36,5 +29,21 @@
 				});
 			}, 6000);
 		});
-	</script>
-</mk-notify>
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-notify
+	position fixed
+	z-index 1024
+	bottom -64px
+	left 0
+	width 100%
+	height 64px
+	pointer-events none
+	-webkit-backdrop-filter blur(2px)
+	backdrop-filter blur(2px)
+	background-color rgba(#000, 0.5)
+
+</style>