Merge tag '2023.11.0' into merge-upstream

packages/frontend/src/components/MkInfo.vue

@@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="[$style.root, { [$style.warn]: warn, [$style.rounded]: rounded }]">
 	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
 	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
-	<slot></slot>
+	<div><slot></slot></div>
+	<button v-if="closable" :class="$style.button" class="_button" @click="close()"><i class="ti ti-x"></i></button>
 </div>
 </template>
 
@@ -16,14 +17,26 @@ import { } from 'vue';
 
 const props = withDefaults(defineProps<{
 	warn?: boolean;
+	closable?: boolean;
 	rounded?: boolean;
 }>(), {
 	rounded: true,
 });
+
+const emit = defineEmits<{
+	(ev: 'close'): void;
+}>();
+
+function close() {
+	// こいつの中では非表示動作は行わない
+	emit('close');
+}
 </script>
 
 <style lang="scss" module>
 .root {
+	display: flex;
+  align-items: center;
 	padding: 12px 14px;
 	font-size: 90%;
 	background: var(--infoBg);
@@ -43,4 +56,9 @@ const props = withDefaults(defineProps<{
 .i {
 	margin-right: 4px;
 }
+
+.button {
+	margin-left: auto;
+	padding: 4px;
+}
 </style>