From b2c8548c675897fbfcb662fbec23c649a43c776e Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Tue, 30 Jan 2024 07:59:21 +0900
Subject: [PATCH] fix border rendering

---
 .../src/components/grid/MkDataCell.vue        |  2 -
 .../src/components/grid/MkDataRow.vue         |  4 +-
 .../frontend/src/components/grid/MkGrid.vue   | 74 +++++++++++++++++--
 .../src/components/grid/MkHeaderCell.vue      |  1 -
 .../src/components/grid/MkHeaderRow.vue       |  4 +-
 .../src/components/grid/MkNumberCell.vue      |  7 +-
 packages/frontend/src/components/grid/grid.ts |  4 +
 .../admin/custom-emojis-grid.register.vue     |  1 +
 8 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/grid/MkDataCell.vue b/packages/frontend/src/components/grid/MkDataCell.vue
index 3a2a54050e..892297d019 100644
--- a/packages/frontend/src/components/grid/MkDataCell.vue
+++ b/packages/frontend/src/components/grid/MkDataCell.vue
@@ -234,8 +234,6 @@ $cellHeight: 28px;
 	height: $cellHeight;
 	max-height: $cellHeight;
 	min-height: $cellHeight;
-	border-left: solid 0.5px var(--divider);
-	border-top: solid 0.5px var(--divider);
 	cursor: cell;
 
 	&:focus {
diff --git a/packages/frontend/src/components/grid/MkDataRow.vue b/packages/frontend/src/components/grid/MkDataRow.vue
index 0134cc1352..8b1b1dfe60 100644
--- a/packages/frontend/src/components/grid/MkDataRow.vue
+++ b/packages/frontend/src/components/grid/MkDataRow.vue
@@ -1,6 +1,7 @@
 <template>
 <tr :class="[$style.row, [row.ranged ? $style.ranged : {}]]">
 	<MkNumberCell
+		v-if="gridSetting.rowNumberVisible"
 		:content="(row.index + 1).toString()"
 		:row="row"
 	/>
@@ -19,7 +20,7 @@
 
 <script setup lang="ts">
 import { toRefs } from 'vue';
-import { GridEventEmitter, GridRow, Size } from '@/components/grid/grid.js';
+import { GridEventEmitter, GridRow, GridSetting, Size } from '@/components/grid/grid.js';
 import MkDataCell from '@/components/grid/MkDataCell.vue';
 import MkNumberCell from '@/components/grid/MkNumberCell.vue';
 import { CellValue, GridCell } from '@/components/grid/cell.js';
@@ -33,6 +34,7 @@ const emit = defineEmits<{
 const props = defineProps<{
 	row: GridRow,
 	cells: GridCell[],
+	gridSetting: GridSetting,
 	bus: GridEventEmitter,
 }>();
 
diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index 6e4e758769..132025b10e 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -2,13 +2,14 @@
 <table
 	ref="rootEl"
 	tabindex="-1"
-	:class="$style.grid"
+	:class="[$style.grid, $style.border]"
 	@mousedown="onMouseDown"
 	@keydown="onKeyDown"
 >
 	<thead>
 		<MkHeaderRow
 			:columns="columns"
+			:gridSetting="gridSetting"
 			:bus="bus"
 			@operation:beginWidthChange="onHeaderCellWidthBeginChange"
 			@operation:endWidthChange="onHeaderCellWidthEndChange"
@@ -23,6 +24,7 @@
 			:key="row.index"
 			:row="row"
 			:cells="cells[row.index]"
+			:gridSetting="gridSetting"
 			:bus="bus"
 			@operation:beginEdit="onCellEditBegin"
 			@operation:endEdit="onCellEditEnd"
@@ -42,6 +44,7 @@ import {
 	GridColumn,
 	GridEventEmitter,
 	GridRow,
+	GridSetting,
 	GridState,
 	Size,
 } from '@/components/grid/grid.js';
@@ -52,10 +55,15 @@ import { cellValidation, ValidateViolation } from '@/components/grid/cell-valida
 import { CELL_ADDRESS_NONE, CellAddress, CellValue, GridCell } from '@/components/grid/cell.js';
 import { calcCellWidth, equalCellAddress, getCellAddress } from '@/components/grid/utils.js';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+	gridSetting?: GridSetting,
 	columnSettings: ColumnSetting[],
 	data: DataSource[]
-}>();
+}>(), {
+	gridSetting: () => ({
+		rowNumberVisible: true,
+	}),
+});
 
 const emit = defineEmits<{
 	(ev: 'operation:cellValidation', violation: ValidateViolation): void;
@@ -65,7 +73,7 @@ const emit = defineEmits<{
 
 const bus = new GridEventEmitter();
 
-const { columnSettings, data } = toRefs(props);
+const { gridSetting, columnSettings, data } = toRefs(props);
 
 const rootEl = ref<InstanceType<typeof HTMLTableElement>>();
 const columns = ref<GridColumn[]>([]);
@@ -798,14 +806,68 @@ refreshData();
 </script>
 
 <style module lang="scss">
+$borderSetting: solid 0.5px var(--divider);
+$borderRadius: var(--radius);
+
 .grid {
 	overflow: scroll;
 	table-layout: fixed;
 	width: fit-content;
 	user-select: none;
+}
 
-	border: solid 0.5px var(--divider);
+.border {
 	border-spacing: 0;
-	border-radius: var(--radius);
+
+	thead {
+		tr {
+			th {
+				border-left: $borderSetting;
+				border-top: $borderSetting;
+
+				&:first-child {
+					// 左上セル
+					border-top-left-radius: $borderRadius;
+				}
+
+				&:last-child {
+					// 右上セル
+					border-top-right-radius: $borderRadius;
+					border-right: $borderSetting;
+				}
+			}
+		}
+	}
+
+	tbody {
+		tr {
+			td, th {
+				border-left: $borderSetting;
+				border-top: $borderSetting;
+
+				&:last-child {
+					// 一番右端の列
+					border-right: $borderSetting;
+				}
+			}
+
+			&:last-child {
+				td, th {
+					// 一番下の行
+					border-bottom: $borderSetting;
+
+					&:first-child {
+						// 左下セル
+						border-bottom-left-radius: $borderRadius;
+					}
+
+					&:last-child {
+						// 右下セル
+						border-bottom-right-radius: $borderRadius;
+					}
+				}
+			}
+		}
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/grid/MkHeaderCell.vue b/packages/frontend/src/components/grid/MkHeaderCell.vue
index ca92422891..6609e8a0c5 100644
--- a/packages/frontend/src/components/grid/MkHeaderCell.vue
+++ b/packages/frontend/src/components/grid/MkHeaderCell.vue
@@ -145,7 +145,6 @@ function updateContentSize() {
 $handleWidth: 5px;
 
 .cell {
-	border-left: solid 0.5px var(--divider);
 	cursor: pointer;
 }
 
diff --git a/packages/frontend/src/components/grid/MkHeaderRow.vue b/packages/frontend/src/components/grid/MkHeaderRow.vue
index 88158db8be..cb22a193be 100644
--- a/packages/frontend/src/components/grid/MkHeaderRow.vue
+++ b/packages/frontend/src/components/grid/MkHeaderRow.vue
@@ -1,6 +1,7 @@
 <template>
 <tr :class="$style.header">
 	<MkNumberCell
+		v-if="gridSetting.rowNumberVisible"
 		content="#"
 		:top="true"
 	/>
@@ -19,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { GridColumn, GridEventEmitter, Size } from '@/components/grid/grid.js';
+import { GridColumn, GridEventEmitter, GridSetting, Size } from '@/components/grid/grid.js';
 import MkHeaderCell from '@/components/grid/MkHeaderCell.vue';
 import MkNumberCell from '@/components/grid/MkNumberCell.vue';
 
@@ -33,6 +34,7 @@ const emit = defineEmits<{
 }>();
 defineProps<{
 	columns: GridColumn[],
+	gridSetting: GridSetting,
 	bus: GridEventEmitter,
 }>();
 
diff --git a/packages/frontend/src/components/grid/MkNumberCell.vue b/packages/frontend/src/components/grid/MkNumberCell.vue
index 4a0dcf126a..86b6950c99 100644
--- a/packages/frontend/src/components/grid/MkNumberCell.vue
+++ b/packages/frontend/src/components/grid/MkNumberCell.vue
@@ -1,5 +1,5 @@
 <template>
-<th :class="[$style.cell, [top ? {} : $style.border]]">
+<th :class="[$style.cell]">
 	<div
 		:class="[
 			$style.root,
@@ -16,7 +16,6 @@ import { GridRow } from '@/components/grid/grid.js';
 defineProps<{
 	content: string,
 	row?: GridRow,
-	top?: boolean,
 }>();
 
 </script>
@@ -50,8 +49,4 @@ $cellWidth: 34px;
 		background-color: var(--accentedBg);
 	}
 }
-
-.border {
-	border-top: solid 0.5px var(--divider);
-}
 </style>
diff --git a/packages/frontend/src/components/grid/grid.ts b/packages/frontend/src/components/grid/grid.ts
index 1d84d0430a..763497cb36 100644
--- a/packages/frontend/src/components/grid/grid.ts
+++ b/packages/frontend/src/components/grid/grid.ts
@@ -2,6 +2,10 @@ import { EventEmitter } from 'eventemitter3';
 import { CellValidator } from '@/components/grid/cell-validators.js';
 import { CellValue } from '@/components/grid/cell.js';
 
+export type GridSetting = {
+	rowNumberVisible: boolean;
+}
+
 export type DataSource = Record<string, CellValue>;
 
 export type GridState = 'normal' | 'cellSelecting' | 'cellEditing' | 'colResizing' | 'colSelecting' | 'rowSelecting'
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
index c2634359eb..1117715d6a 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
@@ -30,6 +30,7 @@
 		<div>
 			<div v-if="registerLogs.length > 0" style="overflow-y: scroll;">
 				<MkGrid
+					:gridSetting="{ rowNumberVisible: false }"
 					:data="convertedRegisterLogs"
 					:columnSettings="registerLogColumnSettings"
 				/>