From d9113cc62cbf6ba7203d474bf9923db041fce21b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 11 Jul 2023 19:20:58 -0700
Subject: [PATCH] fix

---
 .../src/components/MkPostFormAttaches.vue     | 33 +++++++++----------
 packages/client/src/components/MkWidgets.vue  |  8 +++--
 .../pages/page-editor/page-editor.blocks.vue  |  5 ++-
 .../src/pages/page-editor/page-editor.vue     |  5 ++-
 .../client/src/pages/settings/reaction.vue    |  4 +--
 5 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 8517d6969..cb3a9901b 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -3,28 +3,27 @@
 		<VueDraggable
 			v-model="_files"
 			class="files"
-			item-key="id"
 			animation="150"
 			delay="100"
 			delay-on-touch-only="true"
 		>
-			<template #item="{ element }">
-				<div
-					class="file"
-					@click="showFileMenu(element, $event)"
-					@contextmenu.prevent="showFileMenu(element, $event)"
-				>
-					<MkDriveFileThumbnail
-						:data-id="element.id"
-						class="thumbnail"
-						:file="element"
-						fit="cover"
-					/>
-					<div v-if="element.isSensitive" class="sensitive">
-						<i class="ph-warning ph-bold ph-lg icon"></i>
-					</div>
+			<div
+				class="file"
+				v-for="element in _files"
+				:key="element.id"
+				@click="showFileMenu(element, $event)"
+				@contextmenu.prevent="showFileMenu(element, $event)"
+			>
+				<MkDriveFileThumbnail
+					:data-id="element.id"
+					class="thumbnail"
+					:file="element"
+					fit="cover"
+				/>
+				<div v-if="element.isSensitive" class="sensitive">
+					<i class="ph-warning ph-bold ph-lg icon"></i>
 				</div>
-			</template>
+			</div>
 		</VueDraggable>
 		<p class="remain">{{ 16 - files.length }}/16</p>
 	</div>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 4e40aeec3..4274b255d 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -30,11 +30,13 @@
 			</header>
 			<VueDraggable
 				v-model="widgets_"
-				item-key="id"
 				handle=".handle"
 				animation="150"
 			>
-				<template #item="{ element }">
+				<div
+					v-for="element in widgets_"
+					:key="element.id"
+				>
 					<div class="customize-container">
 						<button
 							class="config _button"
@@ -58,7 +60,7 @@
 							/>
 						</div>
 					</div>
-				</template>
+				</div>
 			</VueDraggable>
 		</template>
 		<component
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index a2ef65b15..c7a7b8152 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -2,21 +2,20 @@
 	<VueDraggable
 		v-model="blocks"
 		tag="div"
-		item-key="id"
 		handle=".drag-handle"
 		:group="{ name: 'blocks' }"
 		animation="150"
 		swap-threshold="0.5"
 	>
-		<template #item="{ element }">
 			<component
+				v-for="element in blocks"
+				:key="element"
 				:is="'x-' + element.type"
 				:value="element"
 				:hpml="hpml"
 				@update:value="updateItem"
 				@remove="() => removeItem(element)"
 			/>
-		</template>
 	</VueDraggable>
 </template>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index c8b2f47bd..772bc9ca5 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -123,14 +123,14 @@
 						v-model="variables"
 						tag="div"
 						class="variables"
-						item-key="name"
 						handle=".drag-handle"
 						:group="{ name: 'variables' }"
 						animation="150"
 						swap-threshold="0.5"
 					>
-						<template #item="{ element }">
 							<XVariable
+								v-for="element in variables"
+								:key="element.name"
 								:model-value="element"
 								:removable="true"
 								:hpml="hpml"
@@ -139,7 +139,6 @@
 								:draggable="true"
 								@remove="() => removeVariable(element)"
 							/>
-						</template>
 					</VueDraggable>
 
 					<MkButton
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index c407e6f94..2ce7fffb6 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -18,7 +18,7 @@
 						@end="save"
 						delay-on-touch-only="true"
 					>
-							<button
+							<div
 								v-for="item in reactions"
 								:key="item"
 								class="_button item"
@@ -29,7 +29,7 @@
 									style="height: 1.7em"
 									class="emoji"
 								/>
-							</button>
+							</div>
 						<template #footer>
 							<button class="_button add" @click="chooseEmoji">
 								<i class="ph-plus ph-bold ph-lg"></i>