Merge branch 'develop' into vue3

src/client/widgets/notifications.vue

@@ -1,16 +1,17 @@
 <template>
 <mk-container :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
 	<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
+	<template #func><button @click="configure()" class="_button"><fa :icon="faCog"/></button></template>
 
 	<div>
-		<x-notifications/>
+		<x-notifications :include-types="props.includingTypes"/>
 	</div>
 </mk-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBell } from '@fortawesome/free-solid-svg-icons';
+import { faBell, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import XNotifications from '../components/notifications.vue';
 import define from './define';
@@ -26,6 +27,11 @@ const widget = define({
 			type: 'number',
 			default: 300,
 		},
+		includingTypes: {
+			type: 'array',
+			hidden: true,
+			default: null,
+		},
 	})
 });
 
@@ -38,8 +44,19 @@ export default defineComponent({
 
 	data() {
 		return {
-			faBell
+			faBell, faCog
 		};
 	},
+
+	methods: {
+		async configure() {
+			this.$root.new(await import('../components/notification-setting-window.vue').then(m => m.default), {
+				includingTypes: this.props.includingTypes,
+			}).$on('ok', async ({ includingTypes }) => {
+				this.props.includingTypes = includingTypes;
+				this.save();
+			});
+		}
+	}
 });
 </script>