This commit is contained in:
samunohito 2024-01-29 08:12:11 +09:00
parent e21c43e2aa
commit 53bad559a0
4 changed files with 37 additions and 8 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<tr :class="$style.row"> <tr :class="[$style.row]">
<MkNumberCell <MkNumberCell
:content="(row.index + 1).toString()" :content="(row.index + 1).toString()"
:row="row" :row="row"

View file

@ -124,7 +124,6 @@ function onKeyDown(ev: KeyboardEvent) {
switch (state.value) { switch (state.value) {
case 'normal': { case 'normal': {
// normal
ev.preventDefault(); ev.preventDefault();
if (ev.ctrlKey) { if (ev.ctrlKey) {
@ -418,6 +417,7 @@ function onMouseMove(ev: MouseEvent) {
unSelectionOutOfRange(leftTop, rightBottom); unSelectionOutOfRange(leftTop, rightBottom);
expandRange(leftTop, rightBottom); expandRange(leftTop, rightBottom);
previousCellAddress.value = targetCellAddress; previousCellAddress.value = targetCellAddress;
break; break;
@ -692,7 +692,6 @@ function refreshData() {
const _data: DataSource[] = data.value; const _data: DataSource[] = data.value;
const _rows: GridRow[] = _data.map((_, index) => ({ const _rows: GridRow[] = _data.map((_, index) => ({
index, index,
})); }));
const _columns: GridColumn[] = columnSettings.value.map((setting, index) => ({ const _columns: GridColumn[] = columnSettings.value.map((setting, index) => ({
index, index,

View file

@ -1,6 +1,12 @@
<template> <template>
<th :class="[$style.num, [top ? {} : $style.border]]"> <th :class="[$style.cell, [top ? {} : $style.border]]">
{{ content }} <div
:class="[
$style.root,
]"
>
{{ content }}
</div>
</th> </th>
</template> </template>
@ -16,10 +22,33 @@ defineProps<{
</script> </script>
<style module lang="scss"> <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; padding: 0 8px;
min-width: 30px; height: 100%;
width: 30px; border: solid 0.5px transparent;
&.selected {
background-color: var(--accentedBg);
}
} }
.border { .border {

View file

@ -33,6 +33,7 @@ export type GridColumn = {
export type GridRow = { export type GridRow = {
index: number; index: number;
selected: boolean;
} }
export type CellValueChangedEvent = { export type CellValueChangedEvent = {