From fdf20a66052d169e8e210d6cbd871a145fb75189 Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Sat, 27 Jul 2024 08:46:38 +0900
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E6=96=B0=E3=81=B8=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=BE=93=E3=81=A8=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88?=
 =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MkSortOrderEditor.vue}                    | 34 ++++++++---------
 .../src/components/grid/MkDataCell.vue        | 38 +++++++++++++------
 .../frontend/src/components/grid/MkGrid.vue   |  4 +-
 .../src/components/grid/grid-utils.ts         |  2 +-
 .../custom-emojis-manager.local.list.vue      |  8 +++-
 .../admin/custom-emojis-manager.remote.vue    |  8 +++-
 6 files changed, 56 insertions(+), 38 deletions(-)
 rename packages/frontend/src/{pages/admin/custom-emojis-manager.sort-order-folder.vue => components/MkSortOrderEditor.vue} (74%)

diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.sort-order-folder.vue b/packages/frontend/src/components/MkSortOrderEditor.vue
similarity index 74%
rename from packages/frontend/src/pages/admin/custom-emojis-manager.sort-order-folder.vue
rename to packages/frontend/src/components/MkSortOrderEditor.vue
index 3040bd151c..ff038d3709 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.sort-order-folder.vue
+++ b/packages/frontend/src/components/MkSortOrderEditor.vue
@@ -4,26 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkFolder :spacerMax="8" :spacerMin="8">
-	<template #icon><i class="ti ti-arrows-sort"></i></template>
-	<template #label>{{ i18n.ts._customEmojisManager._gridCommon.sortOrder }}</template>
-	<div :class="$style.sortOrderArea">
-		<div :class="$style.sortOrderAreaTags">
-			<MkTagItem
-				v-for="order in sortOrders"
-				:key="order.key"
-				:iconClass="order.direction === 'ASC' ? 'ti ti-arrow-up' : 'ti ti-arrow-down'"
-				:exButtonIconClass="'ti ti-x'"
-				:content="order.key"
-				@click="onToggleSortOrderButtonClicked(order)"
-				@exButtonClick="onRemoveSortOrderButtonClicked(order.key)"
-			/>
-		</div>
-		<MkButton :class="$style.sortOrderAddButton" @click="onAddSortOrderButtonClicked">
-			<span class="ti ti-plus"/>
-		</MkButton>
+<div :class="$style.sortOrderArea">
+	<div :class="$style.sortOrderAreaTags">
+		<MkTagItem
+			v-for="order in sortOrders"
+			:key="order.key"
+			:iconClass="order.direction === 'ASC' ? 'ti ti-arrow-up' : 'ti ti-arrow-down'"
+			:exButtonIconClass="'ti ti-x'"
+			:content="order.key"
+			@click="onToggleSortOrderButtonClicked(order)"
+			@exButtonClick="onRemoveSortOrderButtonClicked(order.key)"
+		/>
 	</div>
-</MkFolder>
+	<MkButton :class="$style.sortOrderAddButton" @click="onAddSortOrderButtonClicked">
+		<span class="ti ti-plus"/>
+	</MkButton>
+</div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/frontend/src/components/grid/MkDataCell.vue b/packages/frontend/src/components/grid/MkDataCell.vue
index 9c12dbddb4..ce1aabefd9 100644
--- a/packages/frontend/src/components/grid/MkDataCell.vue
+++ b/packages/frontend/src/components/grid/MkDataCell.vue
@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
+	v-if="cell.row.using"
 	ref="rootEl"
 	class="mk_grid_td"
 	:class="$style.cell"
@@ -26,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			[needsContentCentering ? $style.center : {}],
 		]"
 	>
-		<div v-if="!editing" ref="contentAreaEl">
+		<div v-if="!editing" ref="contentAreaEl" :class="$style.contentArea">
 			<div :class="$style.content">
 				<div v-if="cellType === 'text'">
 					{{ cell.value }}
@@ -51,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 		</div>
-		<div v-else ref="inputAreaEl">
+		<div v-else ref="inputAreaEl" :class="$style.inputArea">
 			<input
 				v-if="cellType === 'text'"
 				type="text"
@@ -105,13 +106,15 @@ const props = defineProps<{
 	bus: GridEventEmitter,
 }>();
 
-const { cell, rowSetting, bus } = toRefs(props);
+const { cell, bus } = toRefs(props);
 
 const rootEl = shallowRef<InstanceType<typeof HTMLTableCellElement>>();
 const contentAreaEl = shallowRef<InstanceType<typeof HTMLDivElement>>();
 const inputAreaEl = shallowRef<InstanceType<typeof HTMLDivElement>>();
 
+/** 値が編集中かどうか */
 const editing = ref<boolean>(false);
+/** 編集中の値. {@link beginEditing}と{@link endEditing}内、および各inputタグやそのコールバックからの操作のみを想定する */
 const editingValue = ref<CellValue>(undefined);
 
 const cellWidth = computed(() => cell.value.column.width);
@@ -148,7 +151,8 @@ function onCellDoubleClick(ev: MouseEvent) {
 function onOutsideMouseDown(ev: MouseEvent) {
 	const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target);
 	if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) {
-		endEditing(true);
+		endEditing(true, editingValue.value);
+		editingValue.value = undefined;
 	}
 }
 
@@ -166,13 +170,15 @@ function onCellKeyDown(ev: KeyboardEvent) {
 	} else {
 		switch (ev.code) {
 			case 'Escape': {
-				endEditing(false);
+				endEditing(false, editingValue.value);
+				editingValue.value = undefined;
 				break;
 			}
 			case 'NumpadEnter':
 			case 'Enter': {
 				if (!ev.isComposing) {
-					endEditing(true);
+					endEditing(true, editingValue.value);
+					editingValue.value = undefined;
 				}
 			}
 		}
@@ -243,7 +249,7 @@ async function beginEditing(target: HTMLElement) {
 	}
 }
 
-function endEditing(applyValue: boolean) {
+function endEditing(applyValue: boolean, newValue: CellValue) {
 	if (!editing.value) {
 		return;
 	}
@@ -251,11 +257,10 @@ function endEditing(applyValue: boolean) {
 	emit('operation:endEdit', cell.value);
 	unregisterOutsideMouseDown();
 
-	if (applyValue && editingValue.value !== cell.value.value) {
-		emitValueChange(editingValue.value);
+	if (applyValue && newValue !== cell.value.value) {
+		emitValueChange(newValue);
 	}
 
-	editingValue.value = undefined;
 	editing.value = false;
 
 	rootEl.value?.focus();
@@ -279,11 +284,15 @@ useTooltip(rootEl, (showing) => {
 	}
 
 	const content = cell.value.violation.violations.filter(it => !it.valid).map(it => it.result.message).join('\n');
-	os.popup(defineAsyncComponent(() => import('@/components/grid/MkCellTooltip.vue')), {
+	const result = os.popup(defineAsyncComponent(() => import('@/components/grid/MkCellTooltip.vue')), {
 		showing,
 		content,
 		targetElement: rootEl.value!,
-	}, {}, 'closed');
+	}, {
+		closed: () => {
+			result.dispose();
+		},
+	});
 });
 
 onMounted(() => {
@@ -339,6 +348,11 @@ $cellHeight: 28px;
 	}
 }
 
+.contentArea, .inputArea {
+	display: flex;
+	align-items: center;
+}
+
 .content {
 	display: inline-block;
 	padding: 0 8px;
diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index ddebfd0454..9fc3e82198 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -82,14 +82,14 @@ const props = defineProps<{
 }>();
 
 // non-reactive
-
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const rowSetting: Required<GridRowSetting> = {
 	...defaultGridRowSetting,
 	...props.settings.row,
 };
 
 // non-reactive
-
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const columnSettings = props.settings.cols;
 
 // non-reactive
diff --git a/packages/frontend/src/components/grid/grid-utils.ts b/packages/frontend/src/components/grid/grid-utils.ts
index 1281397a24..a45bc88926 100644
--- a/packages/frontend/src/components/grid/grid-utils.ts
+++ b/packages/frontend/src/components/grid/grid-utils.ts
@@ -8,7 +8,7 @@ import { DataSource, SizeStyle } from '@/components/grid/grid.js';
 import { CELL_ADDRESS_NONE, CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
 import { GridRow } from '@/components/grid/row.js';
 import { GridContext } from '@/components/grid/grid-event.js';
-import copyToClipboard from '@/scripts/copy-to-clipboard.js';
+import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
 import { GridColumn, GridColumnSetting } from '@/components/grid/column.js';
 
 export function isCellElement(elem: HTMLElement): boolean {
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
index 243f090c59..af375ae458 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
@@ -117,7 +117,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkInput>
 					</div>
 
-					<XSortOrderFolder :sortOrders="sortOrders" @update="onSortOrderUpdate"/>
+					<MkFolder :spacerMax="8" :spacerMin="8">
+						<template #icon><i class="ti ti-arrows-sort"></i></template>
+						<template #label>{{ i18n.ts._customEmojisManager._gridCommon.sortOrder }}</template>
+						<MkSortOrderEditor :sortOrders="sortOrders" @update="onSortOrderUpdate"/>
+					</MkFolder>
 
 					<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
 						<MkButton primary @click="onSearchRequest">
@@ -172,13 +176,13 @@ import { GridCellValidationEvent, GridCellValueChangeEvent, GridEvent } from '@/
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkPagingButtons from '@/components/MkPagingButtons.vue';
 import XRegisterLogsFolder from '@/pages/admin/custom-emojis-manager.logs-folder.vue';
-import XSortOrderFolder from '@/pages/admin/custom-emojis-manager.sort-order-folder.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { GridSetting } from '@/components/grid/grid.js';
 import { selectFile } from '@/scripts/select-file.js';
 import { copyGridDataToClipboard, removeDataFromGrid } from '@/components/grid/grid-utils.js';
+import MkSortOrderEditor from '@/components/MkSortOrderEditor.vue';
 
 type GridItem = {
 	checked: boolean;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
index f60fcbd232..eead4ec02f 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
@@ -53,7 +53,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkInput>
 				</div>
 
-				<XSortOrderFolder :sortOrders="sortOrders" @update="onSortOrderChanged"/>
+				<MkFolder :spacerMax="8" :spacerMin="8">
+					<template #icon><i class="ti ti-arrows-sort"></i></template>
+					<template #label>{{ i18n.ts._customEmojisManager._gridCommon.sortOrder }}</template>
+					<MkSortOrderEditor :sortOrders="sortOrders" @update="onSortOrderChanged"/>
+				</MkFolder>
 
 				<div :class="[[spMode ? $style.searchButtonsSp : $style.searchButtons]]">
 					<MkButton primary @click="onSearchRequest">
@@ -93,11 +97,11 @@ import { emptyStrToUndefined, GridSortOrder, RequestLogItem } from '@/pages/admi
 import { GridCellValueChangeEvent, GridEvent } from '@/components/grid/grid-event.js';
 import MkFolder from '@/components/MkFolder.vue';
 import XRegisterLogsFolder from '@/pages/admin/custom-emojis-manager.logs-folder.vue';
-import XSortOrderFolder from '@/pages/admin/custom-emojis-manager.sort-order-folder.vue';
 import * as os from '@/os.js';
 import { GridSetting } from '@/components/grid/grid.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import MkPagingButtons from '@/components/MkPagingButtons.vue';
+import MkSortOrderEditor from '@/components/MkSortOrderEditor.vue';
 
 type GridItem = {
 	checked: boolean;