@operato/data-grist 10.6.0 → 10.8.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.8.0](https://github.com/hatiolab/operato/compare/v10.7.0...v10.8.0) (2026-09-04)
+
+
+### :bug: Bug Fix
+
+* **data-grist:** 고정 열 뒤에 깐 층을 걷는다 — 그것이 줄 상태의 색을 덮었다 ([6a4960b](https://github.com/hatiolab/operato/commit/6a4960bbc22e9f75727d4befe404a35ed448264e))
+* **data-grist:** 고정 열이 마우스 올린 줄에서 투명해지던 것을 고친다 ([e9861d3](https://github.com/hatiolab/operato/commit/e9861d3b43bfa5d581148dee8ff085a3ebf80bf8))
+* **data-grist:** 머리 아래에 위쪽 padding 이 한 번 더 나타나 여백이 어긋났다 ([96bf21f](https://github.com/hatiolab/operato/commit/96bf21f7ac240e43196df885593c3e44aa901bd7))
+* **data-grist:** 어두운 모드에서 안 보이던 지나는 줄 표시를 줄 색에서 만든다 ([f9d1c0d](https://github.com/hatiolab/operato/commit/f9d1c0d0697a6d52f911dd13715cdbe50947c1b9))
+* **data-grist:** 지나는 줄 표시가 고정 열에서 끊기던 것을 고친다 ([d4b33f9](https://github.com/hatiolab/operato/commit/d4b33f969a4914b5efbf161d41270694b51790b6))
+
+
+### :sparkles: Styling
+
+* **popup:** 참조 팝업의 모양을 다듬고 모서리 규칙을 토큰으로 세운다 ([f8244c0](https://github.com/hatiolab/operato/commit/f8244c0acca2241b3777ae80cd3c25c53a837404))
+
+
+
+## [10.7.0](https://github.com/hatiolab/operato/compare/v10.6.0...v10.7.0) (2026-09-02)
+
+
+### :rocket: New Features
+
+* **data-grist:** 읽기 전용 표에서 마우스가 지나는 줄을 보인다 ([375a1e0](https://github.com/hatiolab/operato/commit/375a1e02fb99e7757f951ec00f4ef52121713325))
+
+
+### :bug: Bug Fix
+
+* **data-grist:** 마우스 오버 색이 줄 끝의 빈 칸에만 안 붙었다 ([1135a9f](https://github.com/hatiolab/operato/commit/1135a9fc0dd6171e4a17bdc0a230cf3ead0c1647))
+* **data-grist:** 표를 벗어나도 남던 줄 표시 · 호버 색을 면 단계에서 가져온다 · 소터 자리를 손잡이에서 파생 ([f2dd34e](https://github.com/hatiolab/operato/commit/f2dd34e34889f852385fc778a0a1df5375d8ab20))
+
+
+
 ## [10.6.0](https://github.com/hatiolab/operato/compare/v10.5.0...v10.6.0) (2026-09-02)
 
 

package/dist/src/data-grid/data-grid-body-style.js

@@ -46,6 +46,22 @@ export const dataGridBodyStyle = css `
     color: var(--grid-record-selected-color);
   }
 
+  /*
+   * 마우스가 지나는 줄.
+   *
+   * 고른 줄보다 **훨씬 옅다.** 지나는 것은 사실이 아니고 눈이 어디 있는지 알려 주는 것뿐이라, 고른
+   * 줄과 같은 무게로 그리면 무엇이 골라졌는지 헷갈린다. 그래서 고른 줄 규칙 뒤에 둔다 — 둘이 겹칠
+   * 때는 고른 쪽이 이겨야 하므로 색을 옅게 두고 순서로 다투지 않는다.
+   *
+   * 값은 표가 정한다. 고치는 표에서는 비운다(data-grid.ts) — 거기서는 점선 셀 테두리가 이미 자리를
+   * 말하고, 둘이 함께 있으면 시끄럽다.
+   */
+  @media (hover: hover) {
+    ox-grid-field[hovered-row]:not([selected-row]) {
+      background-color: var(--grid-record-hover-background-color, transparent);
+    }
+  }
+
   ox-grid-field[focused-row] {
     box-shadow: var(--grid-record-focused-box-shadow);
     font-weight: bold;
@@ -91,6 +107,11 @@ export const dataGridBodyStyle = css `
       background-color: transparent;
     }
 
+    /* 종이에는 마우스가 없다. */
+    ox-grid-field[hovered-row] {
+      background-color: transparent;
+    }
+
     ox-grid-field[emphasized-row] {
       background-color: transparent;
       color: initial;

package/dist/src/data-grid/data-grid-body-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-auto-rows: var(--grid-record-height, min-content);\n\n    overflow: auto;\n    /*\n     * 세로 스크롤바 자리를 늘 비워 둔다 — 머리와 가로 스크롤 범위를 같게 만들기 위해서다.\n     *\n     * 머리는 overflow: hidden 이라 스크롤바에 자리를 내주지 않고, 몸은 긴 목록에서 스크롤바 폭만큼\n     * 좁아진다. 그래서 갈 수 있는 거리가 몸이 그만큼 더 길었고, 오른쪽 끝에서 몸만 더 갔다.\n     * 재보니 정확히 --scrollbar-width 만큼(5px)이었다.\n     *\n     * 자리를 늘 비워 두면 목록 길이와 무관하게 두 폭이 같다. 목록이 길어질 때 열이 움찔하는 것도\n     * 함께 없어진다 — 스크롤바가 생기는 순간 폭이 바뀌지 않는다.\n     */\n    scrollbar-gutter: stable;\n    outline: none;\n    color: var(--grid-record-color);\n    position: relative;\n    border-bottom: var(--grid-body-bottom-border);\n  }\n\n  ox-grid-field[odd] {\n    background-color: var(--grid-record-odd-background-color);\n  }\n\n  ox-grid-field[disabled] {\n    background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n    color: var(--grid-record-disabled-color, var(--grid-record-color));\n    opacity: var(--grid-record-disabled-opacity, 1);\n  }\n  ox-grid-field[odd][disabled] {\n    background-color: var(\n      --grid-odd-record-disabled-background-color,\n      var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n    );\n    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n  }\n\n  ox-grid-field[selected-row] {\n    background-color: var(--grid-record-selected-background-color);\n    color: var(--grid-record-selected-color);\n  }\n\n  ox-grid-field[focused-row] {\n    box-shadow: var(--grid-record-focused-box-shadow);\n    font-weight: bold;\n    color: var(--grid-record-focused-color);\n    background-image: var(--focused-background-image);\n    background-blend-mode: darken;\n  }\n\n  /*\n   * 초점 셀 표식 — border 가 아니라 outline 으로 그린다.\n   *\n   * border 로 그리면 두 가지가 깨진다.\n   *   · 네 면 테두리가 셀 크기를 바꿔 줄이 어긋난다\n   *   · 아래 면이 **줄을 나누는 선 자리**를 차지해, 그 셀만 줄 선이 사라진다\n   *\n   * outline 은 자리를 차지하지 않는다. outline-offset: -1px 로 안쪽에 그려 옆 셀과 겹치지 않게 한다.\n   * 표식을 감추고 싶은 화면은 토큰을 none 으로 두면 되고, 그래도 줄 선은 남는다.\n   */\n  ox-grid-field[focused] {\n    outline: var(--grid-record-focused-cell-border);\n    outline-offset: -1px;\n  }\n\n  ox-grid-field[emphasized-row],\n  ox-grid-field[emphasized-row][focused] {\n    background-color: var(--grid-record-emphasized-background-color);\n    color: var(--grid-record-emphasized-color);\n  }\n\n  ox-grid-field[editing] {\n    background-color: var(--grid-record-editing-background-color);\n  }\n\n  @media print {\n    :host {\n      grid-template-columns: var(--grid-template-print-columns);\n    }\n    ox-grid-field[focused] {\n      outline: none;\n    }\n\n    ox-grid-field[selected-row] {\n      background-color: transparent;\n    }\n\n    ox-grid-field[emphasized-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[focused-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[editing] {\n      background-color: transparent;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: lighten;\n    }\n  }\n\n  @media (prefers-color-scheme: light) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: darken;\n    }\n  }\n`\n"]}
+{"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2InC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-auto-rows: var(--grid-record-height, min-content);\n\n    overflow: auto;\n    /*\n     * 세로 스크롤바 자리를 늘 비워 둔다 — 머리와 가로 스크롤 범위를 같게 만들기 위해서다.\n     *\n     * 머리는 overflow: hidden 이라 스크롤바에 자리를 내주지 않고, 몸은 긴 목록에서 스크롤바 폭만큼\n     * 좁아진다. 그래서 갈 수 있는 거리가 몸이 그만큼 더 길었고, 오른쪽 끝에서 몸만 더 갔다.\n     * 재보니 정확히 --scrollbar-width 만큼(5px)이었다.\n     *\n     * 자리를 늘 비워 두면 목록 길이와 무관하게 두 폭이 같다. 목록이 길어질 때 열이 움찔하는 것도\n     * 함께 없어진다 — 스크롤바가 생기는 순간 폭이 바뀌지 않는다.\n     */\n    scrollbar-gutter: stable;\n    outline: none;\n    color: var(--grid-record-color);\n    position: relative;\n    border-bottom: var(--grid-body-bottom-border);\n  }\n\n  ox-grid-field[odd] {\n    background-color: var(--grid-record-odd-background-color);\n  }\n\n  ox-grid-field[disabled] {\n    background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n    color: var(--grid-record-disabled-color, var(--grid-record-color));\n    opacity: var(--grid-record-disabled-opacity, 1);\n  }\n  ox-grid-field[odd][disabled] {\n    background-color: var(\n      --grid-odd-record-disabled-background-color,\n      var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n    );\n    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n  }\n\n  ox-grid-field[selected-row] {\n    background-color: var(--grid-record-selected-background-color);\n    color: var(--grid-record-selected-color);\n  }\n\n  /*\n   * 마우스가 지나는 줄.\n   *\n   * 고른 줄보다 **훨씬 옅다.** 지나는 것은 사실이 아니고 눈이 어디 있는지 알려 주는 것뿐이라, 고른\n   * 줄과 같은 무게로 그리면 무엇이 골라졌는지 헷갈린다. 그래서 고른 줄 규칙 뒤에 둔다 — 둘이 겹칠\n   * 때는 고른 쪽이 이겨야 하므로 색을 옅게 두고 순서로 다투지 않는다.\n   *\n   * 값은 표가 정한다. 고치는 표에서는 비운다(data-grid.ts) — 거기서는 점선 셀 테두리가 이미 자리를\n   * 말하고, 둘이 함께 있으면 시끄럽다.\n   */\n  @media (hover: hover) {\n    ox-grid-field[hovered-row]:not([selected-row]) {\n      background-color: var(--grid-record-hover-background-color, transparent);\n    }\n  }\n\n  ox-grid-field[focused-row] {\n    box-shadow: var(--grid-record-focused-box-shadow);\n    font-weight: bold;\n    color: var(--grid-record-focused-color);\n    background-image: var(--focused-background-image);\n    background-blend-mode: darken;\n  }\n\n  /*\n   * 초점 셀 표식 — border 가 아니라 outline 으로 그린다.\n   *\n   * border 로 그리면 두 가지가 깨진다.\n   *   · 네 면 테두리가 셀 크기를 바꿔 줄이 어긋난다\n   *   · 아래 면이 **줄을 나누는 선 자리**를 차지해, 그 셀만 줄 선이 사라진다\n   *\n   * outline 은 자리를 차지하지 않는다. outline-offset: -1px 로 안쪽에 그려 옆 셀과 겹치지 않게 한다.\n   * 표식을 감추고 싶은 화면은 토큰을 none 으로 두면 되고, 그래도 줄 선은 남는다.\n   */\n  ox-grid-field[focused] {\n    outline: var(--grid-record-focused-cell-border);\n    outline-offset: -1px;\n  }\n\n  ox-grid-field[emphasized-row],\n  ox-grid-field[emphasized-row][focused] {\n    background-color: var(--grid-record-emphasized-background-color);\n    color: var(--grid-record-emphasized-color);\n  }\n\n  ox-grid-field[editing] {\n    background-color: var(--grid-record-editing-background-color);\n  }\n\n  @media print {\n    :host {\n      grid-template-columns: var(--grid-template-print-columns);\n    }\n    ox-grid-field[focused] {\n      outline: none;\n    }\n\n    ox-grid-field[selected-row] {\n      background-color: transparent;\n    }\n\n    /* 종이에는 마우스가 없다. */\n    ox-grid-field[hovered-row] {\n      background-color: transparent;\n    }\n\n    ox-grid-field[emphasized-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[focused-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[editing] {\n      background-color: transparent;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: lighten;\n    }\n  }\n\n  @media (prefers-color-scheme: light) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: darken;\n    }\n  }\n`\n"]}

package/dist/src/data-grid/data-grid-body.d.ts

@@ -44,6 +44,10 @@ export declare class DataGridBody extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onFetchParamsChange: EventListener;
+    private _hoveredRow;
+    /** 지나는 줄을 옮긴다. 같은 줄이면 아무것도 하지 않는다. */
+    private setHoveredRow;
+    private markRow;
     getFieldByIndex(rowIndex: number, columnIndex: number, residue?: boolean): DataGridField | undefined;
     startEditTarget(row: number, column: number, valueWith?: string | null): void;
     shouldUpdate(changes: any): boolean;

package/dist/src/data-grid/data-grid-body.js

@@ -97,6 +97,7 @@ let DataGridBody = class DataGridBody extends LitElement {
         this._onFetchParamsChange = () => {
             this.scrollTop = 0;
         };
+        this._hoveredRow = -1;
     }
     /* 편집 가능한 셀이 하나라도 있는지 — 없으면(읽기 전용 그리드) IME 입력 버퍼로 포커스를 넘기지 않는다 */
     get _hasEditableColumn() {
@@ -337,6 +338,31 @@ let DataGridBody = class DataGridBody extends LitElement {
             }
             this._draggable = false;
         });
+        /*
+         * ── 마우스가 지나는 줄을 표시한다 ─────────────────────────────────────
+         * 읽기 전용 표에는 지금 어느 줄에 있는지 알려 주는 것이 아무것도 없다. 고치는 표에는 점선 셀
+         * 테두리가 그 일을 하지만 읽기 전용에는 그것도 없어서, 칸이 여덟이면 눈이 가로로 가다 줄을 놓친다.
+         *
+         * 줄에는 감싸는 요소가 없다 — 셀이 각각 격자 항목이다. 그래서 CSS 만으로는 「같은 줄」을 가릴 수
+         * 없고, 이미 있는 방식(selected-row)처럼 그 줄의 셀마다 표식을 붙인다.
+         *
+         * 다시 그리지 않고 속성만 바꾼다. 줄이 바뀔 때마다 몸 전체를 다시 그리면 큰 표에서 눌린다.
+         */
+        this.renderRoot.addEventListener('pointerover', (event) => {
+            var _a, _b;
+            if (event.pointerType === 'touch') {
+                return;
+            }
+            const field = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'ox-grid-field');
+            this.setHoveredRow(field ? field.rowIndex : -1);
+        });
+        /*
+         * 표를 벗어나면 지운다 — 남겨 두면 마지막 줄이 골라진 것처럼 보인다.
+         *
+         * **요소에 붙인다.** renderRoot 는 ShadowRoot 이고 pointerleave 는 요소에 가는 사건이라 거기서는
+         * 안 먹었다. [재봤음] 표를 벗어난 뒤에도 표식 8개가 남아 있었다. 2026-09-02
+         */
+        this.addEventListener('pointerleave', () => this.setHoveredRow(-1));
         this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this));
         this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this));
         this.renderRoot.addEventListener('contextmenu', dataGridBodyContextMenuHandler.bind(this));
@@ -370,6 +396,37 @@ let DataGridBody = class DataGridBody extends LitElement {
         }
         super.disconnectedCallback();
     }
+    /** 지나는 줄을 옮긴다. 같은 줄이면 아무것도 하지 않는다. */
+    setHoveredRow(rowIndex) {
+        if (rowIndex === this._hoveredRow) {
+            return;
+        }
+        this.markRow(this._hoveredRow, false);
+        this.markRow(rowIndex, true);
+        this._hoveredRow = rowIndex;
+    }
+    markRow(rowIndex, on) {
+        var _a;
+        if (rowIndex < 0) {
+            return;
+        }
+        const columns = this.columns.filter(column => !column.hidden).length;
+        /*
+         * 한 줄은 칸 수보다 **하나 많은** 자식을 갖는다. 마지막 하나는 남는 폭을 메우는 빈 칸이다
+         * (`columnIndex` 가 -1 인 `ox-grid-field` — 위 render 참조).
+         *
+         * 전에는 칸 수만큼만 돌아서 **그 빈 칸만 색이 안 바뀌었다.** 표가 화면보다 좁으면 줄 오른쪽이
+         * 잘려 보인다.
+         *
+         * `getFieldByIndex` 로는 그 칸에 닿을 수 없다 — 열 번호를 `% columns` 로 감기 때문에 칸 수를
+         * 넘기면 0번으로 돌아온다. 그래서 자식을 직접 센다.
+         */
+        const cells = columns + 1;
+        const first = rowIndex * cells;
+        for (let index = 0; index < cells; index++) {
+            (_a = this.renderRoot.children.item(first + index)) === null || _a === void 0 ? void 0 : _a.toggleAttribute('hovered-row', on);
+        }
+    }
     getFieldByIndex(rowIndex, columnIndex, residue = true) {
         if (rowIndex < 0) {
             return;
@@ -1014,6 +1071,24 @@ DataGridBody.styles = [
         z-index: 2; /* 고정된 열을 다른 열 위에 표시. */
       }
 
+      /*
+       * ── 고정 열의 불투명은 **뒤에 층을 깔아서 지킬 수 없다** ──────────────
+       *
+       * 이 칸은 스크롤되는 열 위에 떠 있어서(position: sticky) 투명해지면 그 아래가 비친다.
+       * 그래서 한때 여기에 이런 것을 두었다.
+       *
+       *   [fixed]::before { position:absolute; inset:0; background-color: …; z-index:-1 }
+       *
+       * **안 된다.** 음수 z-index 자식은 자기 요소의 **배경 위에** 그려진다(칸의 글자 아래일
+       * 뿐이다). 그래서 그 층이 줄 상태의 색을 덮었고, 마우스를 올린 줄의 띠가 고정 열에서만
+       * 사라졌다. 그때 나는 계산된 background-color 를 재고 「같은 색이다」라고 했는데, 재야
+       * 했던 것은 **칠해진 것**이었다.
+       *
+       * 불투명은 다른 데서 지킨다 — **줄 상태 색을 transparent 로 두지 않는 것**이다. 그 값은
+       * 「칠하지 않는다」가 아니라 「칸의 바탕을 지운다」이고, 지워진 자리에는 뒤가 비친다.
+       * 고치는 표가 그렇게 두었던 것을 걷었다(data-grid.ts).
+       */
+
       :host([raised]) [fixed] {
         /* 고정 컬럼이 살짝 올라와 있는 느낌을 표현 */
         box-shadow: 3px 0 3px rgba(0, 0, 0, 0.1);