From 53bad559a08a3bc63f20eb1e097bf769cae47a9b Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Mon, 29 Jan 2024 08:12:11 +0900
Subject: [PATCH] fix

---
 .../src/components/grid/MkDataRow.vue         |  2 +-
 .../frontend/src/components/grid/MkGrid.vue   |  3 +-
 .../src/components/grid/MkNumberCell.vue      | 39 ++++++++++++++++---
 packages/frontend/src/components/grid/grid.ts |  1 +
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/grid/MkDataRow.vue b/packages/frontend/src/components/grid/MkDataRow.vue
index b423d1bb74..c1380efd93 100644
--- a/packages/frontend/src/components/grid/MkDataRow.vue
+++ b/packages/frontend/src/components/grid/MkDataRow.vue
@@ -1,5 +1,5 @@
 <template>
-<tr :class="$style.row">
+<tr :class="[$style.row]">
 	<MkNumberCell
 		:content="(row.index + 1).toString()"
 		:row="row"
diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index 5347649cc1..e04df0d4ce 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -124,7 +124,6 @@ function onKeyDown(ev: KeyboardEvent) {
 
 	switch (state.value) {
 		case 'normal': {
-			// normalの時は自前で制御したい
 			ev.preventDefault();
 
 			if (ev.ctrlKey) {
@@ -418,6 +417,7 @@ function onMouseMove(ev: MouseEvent) {
 
 			unSelectionOutOfRange(leftTop, rightBottom);
 			expandRange(leftTop, rightBottom);
+
 			previousCellAddress.value = targetCellAddress;
 
 			break;
@@ -692,7 +692,6 @@ function refreshData() {
 	const _data: DataSource[] = data.value;
 	const _rows: GridRow[] = _data.map((_, index) => ({
 		index,
-
 	}));
 	const _columns: GridColumn[] = columnSettings.value.map((setting, index) => ({
 		index,
diff --git a/packages/frontend/src/components/grid/MkNumberCell.vue b/packages/frontend/src/components/grid/MkNumberCell.vue
index e5b1ba6301..4a0dcf126a 100644
--- a/packages/frontend/src/components/grid/MkNumberCell.vue
+++ b/packages/frontend/src/components/grid/MkNumberCell.vue
@@ -1,6 +1,12 @@
 <template>
-<th :class="[$style.num, [top ? {} : $style.border]]">
-	{{ content }}
+<th :class="[$style.cell, [top ? {} : $style.border]]">
+	<div
+		:class="[
+			$style.root,
+		]"
+	>
+		{{ content }}
+	</div>
 </th>
 </template>
 
@@ -16,10 +22,33 @@ defineProps<{
 </script>
 
 <style module lang="scss">
-.num {
+$cellHeight: 28px;
+$cellWidth: 34px;
+
+.cell {
+	overflow: hidden;
+	white-space: nowrap;
+	height: $cellHeight;
+	max-height: $cellHeight;
+	min-height: $cellHeight;
+	min-width: $cellWidth;
+	width: $cellWidth;
+	cursor: pointer;
+}
+
+.root {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
 	padding: 0 8px;
-	min-width: 30px;
-	width: 30px;
+	height: 100%;
+	border: solid 0.5px transparent;
+
+	&.selected {
+		background-color: var(--accentedBg);
+	}
 }
 
 .border {
diff --git a/packages/frontend/src/components/grid/grid.ts b/packages/frontend/src/components/grid/grid.ts
index d761b6c854..e41d32b204 100644
--- a/packages/frontend/src/components/grid/grid.ts
+++ b/packages/frontend/src/components/grid/grid.ts
@@ -33,6 +33,7 @@ export type GridColumn = {
 
 export type GridRow = {
 	index: number;
+	selected: boolean;
 }
 
 export type CellValueChangedEvent = {