fix(client): 一部のコンポーネントが裏に隠れるのを修正

CHANGELOG.md

@@ -7,6 +7,13 @@
 
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+
+### Bugfixes
+- クライアント: 一部のコンポーネントが裏に隠れるのを修正
+
 ## 12.99.3 (2021/12/14)
 ### Bugfixes
 - クライアント: オートコンプリートがダイアログの裏に隠れる問題を修正

packages/client/src/components/toast.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-toast">
+<div class="mk-toast" style="{ zIndex }">
 	<transition name="notification-slide" appear @after-leave="$emit('closed')">
 		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
 	</transition>
@@ -9,6 +9,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XNotification from './notification.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -23,7 +24,8 @@ export default defineComponent({
 	emits: ['closed'],
 	data() {
 		return {
-			showing: true
+			showing: true,
+			zIndex: os.claimZIndex(true),
 		};
 	},
 	mounted() {
@@ -45,7 +47,6 @@ export default defineComponent({
 
 .mk-toast {
 	position: fixed;
-	z-index: 10000;
 	left: 0;
 	width: 250px;
 	top: 32px;

packages/client/src/ui/_common_/upload.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-uploader _acrylic">
+<div class="mk-uploader _acrylic" :style="{ zIndex }">
 	<ol v-if="uploads.length > 0">
 		<li v-for="ctx in uploads" :key="ctx.id">
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
@@ -25,6 +25,7 @@ export default defineComponent({
 	data() {
 		return {
 			uploads: os.uploads,
+			zIndex: os.claimZIndex(true),
 		};
 	},
 });
@@ -33,7 +34,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .mk-uploader {
 	position: fixed;
-	z-index: 10000;
 	right: 16px;
 	width: 260px;
 	top: 32px;