From 94385d32213a00a06a59fbd2296d6ef1b5f91785 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 8 May 2023 16:52:00 +0000
Subject: [PATCH] container-name

---
 packages/frontend/src/components/MkModalWindow.vue | 4 +++-
 packages/frontend/src/components/MkWindow.vue      | 4 +++-
 packages/frontend/src/ui/deck/column.vue           | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index f983f77750..b4ce5c7c6a 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -9,7 +9,7 @@
 			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
 			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
-		<div class="body">
+		<div class="body" :style="`container-name: modalWindow_${id};`">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
 		</div>
 	</div>
@@ -18,6 +18,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
+import { v4 as uuid } from 'uuid';
 import MkModal from './MkModal.vue';
 
 const props = withDefaults(defineProps<{
@@ -39,6 +40,7 @@ const emit = defineEmits<{
 	(event: 'ok'): void;
 }>();
 
+const id = uuid();
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 let rootEl = $shallowRef<HTMLElement>();
 let headerEl = $shallowRef<HTMLElement>();
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index b662479b2a..0d96e64e54 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -29,7 +29,7 @@
 					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
-			<div :class="$style.content">
+			<div :class="$style.content" :style="`container-name: window_${id};`">
 				<slot></slot>
 			</div>
 		</div>
@@ -49,6 +49,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, provide } from 'vue';
+import { v4 as uuid } from 'uuid';
 import contains from '@/scripts/contains';
 import * as os from '@/os';
 import { MenuItem } from '@/types/menu';
@@ -102,6 +103,7 @@ const emit = defineEmits<{
 
 provide('inWindow', true);
 
+const id = uuid();
 let rootEl = $shallowRef<HTMLElement | null>();
 let showing = $ref(true);
 let beforeClickedAt = 0;
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 402bbe0352..f9d64d38b2 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -22,7 +22,7 @@
 		<span :class="$style.title"><slot name="header"></slot></span>
 		<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
 	</header>
-	<div v-show="active" ref="body" :class="$style.body">
+	<div v-show="active" ref="body" :class="$style.body" :style="`container-name: column_${column.id};`">
 		<slot></slot>
 	</div>
 </section>