container-name

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>();

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;

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>