@operato/data-grist 10.5.0 → 10.7.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### :rocket: New Features
+
+* **data-grist:** 값과 표식을 한 줄에 담는 .line ([1c1e91c](https://github.com/hatiolab/operato/commit/1c1e91ca308cb9bc0de201ba1abcbd61d2ccd938))
+* **data-grist:** 셀 안 아이콘 단추 · 거터 머리 정렬 · 빈 화면 문구 ([c9b5a11](https://github.com/hatiolab/operato/commit/c9b5a110b3d6c312b1d76779fd6b97cdda5aeb1b))
+
+
+### :sparkles: Styling
+
+* **data-grist:** 머리글 · 푸터의 위계를 세우고 행 높이를 되돌린다 ([8c29e0b](https://github.com/hatiolab/operato/commit/8c29e0b04538a84a42de6713ce296fdbdc0817e8)), closes [#57676](https://github.com/hatiolab/operato/issues/57676) [#d6dbe0](https://github.com/hatiolab/operato/issues/d6dbe0) [#5f5f5](https://github.com/hatiolab/operato/issues/5f5f5) [#86909](https://github.com/hatiolab/operato/issues/86909)
+* **data-grist:** 숫자는 오른쪽으로 · 셀 여백을 7px 로 ([d066d88](https://github.com/hatiolab/operato/commit/d066d885e1842e09232487d55795acc67e3c6ebe))
+
+
+### :bug: Bug Fix
+
+* **data-grist,input:** 날짜는 앱 언어를 따른다 · 거르개는 목록보다 조용하다 ([1022153](https://github.com/hatiolab/operato/commit/10221535e5a2ea9699443a64109a16fdeefc1926))
+* **data-grist:** 재사용된 셀의 낡은 정렬 · 머리글 정렬 · 헤드룸을 감출 때 표가 넓어지지 않던 것 ([475dfd8](https://github.com/hatiolab/operato/commit/475dfd8b38aee4c0632b4ca54c6e0138c3f1dbd8))
+* **data-grist:** 카드가 없는 이미지의 자리를 만들지 않는다 · 별 크기와 quiet ([5a94f77](https://github.com/hatiolab/operato/commit/5a94f7799349bb9c1f3d3e0de057786e774b387a))
+* **data-grist:** 푸터가 자기 크기를 정하지 못하던 원인 · 읽기 전용에서 소터를 이름에 붙인다 ([617936f](https://github.com/hatiolab/operato/commit/617936fc69f4ce049fb631d14f52da94c20380d5))
+
+
+
 ## [10.5.0](https://github.com/hatiolab/operato/compare/v10.4.0...v10.5.0) (2026-08-31)
 
 

package/dist/src/configure/column-builder.js

@@ -3,6 +3,15 @@ import { getEditor } from '../editors/index.js';
 import { generateGutterColumn } from '../gutters/index.js';
 import { getGristEventHandler } from '../handlers/index.js';
 import { getRenderer } from '../renderers/index.js';
+/**
+ * 값을 오른쪽에 붙이는 칸.
+ *
+ * 자릿수가 세로로 맞아야 값을 견줄 수 있다. 왼쪽으로 두면 24 와 1,200 이 시작점만 같고 끝이 어긋나서
+ * 어느 쪽이 큰지 눈으로 읽히지 않는다.
+ *
+ * progress 는 뺀다 — 막대로 그리므로 정렬이 뜻을 갖지 않는다.
+ */
+const RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number'];
 export const buildColumn = (column) => {
     var _a, _b;
     var compiled = { ...column };
@@ -56,6 +65,13 @@ export const buildColumn = (column) => {
         classifier = NOOP;
     }
     compiled.record = {
+        /*
+         * 숫자 칸의 기본 정렬. 화면이 align 을 주면 그것이 이긴다 — 자릿수를 견줄 값이 아닌 숫자
+         * (전화번호 · 우편번호 같은 것)는 화면이 따로 정한다.
+         *
+         * 머리글도 따라온다. data-grid-header 가 열 제목을 그릴 때 record.align 을 본다.
+         */
+        ...(RIGHT_ALIGNED_TYPES.includes(column.type) ? { align: 'right' } : {}),
         ...record,
         classifier,
         renderer: recordRenderer,

package/dist/src/configure/column-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '../index.js'\nimport { NOOP } from '../const.js'\nimport { getEditor } from '../editors/index.js'\nimport { generateGutterColumn } from '../gutters/index.js'\nimport { getGristEventHandler } from '../handlers/index.js'\nimport { getRenderer } from '../renderers/index.js'\nimport { ColumnConfig } from '../types.js'\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  if (typeof header == 'string') {\n    compiled.header = {\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        compiled.label = {\n          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus, contextmenu } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus),\n    contextmenu: contextmenu && getGristEventHandler(contextmenu)\n  }\n\n  return compiled\n}\n"]}
+{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '../index.js'\nimport { NOOP } from '../const.js'\nimport { getEditor } from '../editors/index.js'\nimport { generateGutterColumn } from '../gutters/index.js'\nimport { getGristEventHandler } from '../handlers/index.js'\nimport { getRenderer } from '../renderers/index.js'\nimport { ColumnConfig } from '../types.js'\n\n/**\n * 값을 오른쪽에 붙이는 칸.\n *\n * 자릿수가 세로로 맞아야 값을 견줄 수 있다. 왼쪽으로 두면 24 와 1,200 이 시작점만 같고 끝이 어긋나서\n * 어느 쪽이 큰지 눈으로 읽히지 않는다.\n *\n * progress 는 뺀다 — 막대로 그리므로 정렬이 뜻을 갖지 않는다.\n */\nconst RIGHT_ALIGNED_TYPES = ['integer', 'float', 'number']\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  if (typeof header == 'string') {\n    compiled.header = {\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        compiled.label = {\n          renderer: compiled.header?.renderer || (() => name)\n        }\n        break\n      case 'string':\n        compiled.label = {\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    /*\n     * 숫자 칸의 기본 정렬. 화면이 align 을 주면 그것이 이긴다 — 자릿수를 견줄 값이 아닌 숫자\n     * (전화번호 · 우편번호 같은 것)는 화면이 따로 정한다.\n     *\n     * 머리글도 따라온다. data-grid-header 가 열 제목을 그릴 때 record.align 을 본다.\n     */\n    ...(RIGHT_ALIGNED_TYPES.includes(column.type) ? { align: 'right' } : {}),\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus, contextmenu } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus),\n    contextmenu: contextmenu && getGristEventHandler(contextmenu)\n  }\n\n  return compiled\n}\n"]}

package/dist/src/data-card/data-card-field.js

@@ -80,6 +80,20 @@ DataCardField.styles = [
         min-width: 100%;
       }
 
+      /*
+       * 카드의 제목은 두 줄까지 읽힌다.
+       *
+       * 한 줄로 자르면 「[처분 승인] D-1788231051788-B · …」 처럼 **구별되는 부분이 잘려 나간다.**
+       * 카드는 표와 달리 세로로 여유가 있고, 그 여유를 제목에 주는 것이 맞다.
+       */
+      :host([name]) > span {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+        overflow: hidden;
+      }
+
       @media only screen and (max-width: 460px) {
         *[center] {
           margin: initial;

package/dist/src/data-card/data-card-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAqEuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AAvFM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,AAjEY,CAiEZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAxE/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAyFzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n        /* 그림 본체 모서리도 둥글게 — wrapper 의 radius 와 동일 (record-card 의\n         * [thumbnail] wrapper 와 같은 변수 / fallback). */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n      }\n\n      :host > * {\n        margin: var(--spacing-none);\n\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([name]) label {\n        display: none;\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      :host([name]) > span,\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-card-field.js","sourceRoot":"","sources":["../../../src/data-card/data-card-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmFuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAkBnD,CAAC;IAfC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAE9C,IAAI,EACF,KAAK,EACL,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACrC,GAAG,MAAM,CAAA;QAEV,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YACvC,OAAO,IAAI,CAAA,UAAU,aAAa,CAAC,MAAM,CAAC,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAA;QACvE,CAAC;IACH,CAAC;;AArGM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6EF;CACF,AA/EY,CA+EZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AAtF/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CAuGzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n@customElement('ox-card-field')\nexport class DataCardField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        position: relative;\n\n        white-space: nowrap;\n\n        font: inherit;\n      }\n\n      :host([thumbnail]) {\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      :host([thumbnail]) > * {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n        /* 그림 본체 모서리도 둥글게 — wrapper 의 radius 와 동일 (record-card 의\n         * [thumbnail] wrapper 와 같은 변수 / fallback). */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n      }\n\n      :host > * {\n        margin: var(--spacing-none);\n\n        overflow: hidden;\n\n        text-overflow: ellipsis;\n        text-align: left;\n      }\n\n      :host > *[center] {\n        flex: none;\n        margin: var(--spacing-none) auto;\n      }\n\n      :host([name]) label {\n        display: none;\n      }\n\n      label {\n        flex: none;\n        width: 33%;\n        padding-bottom: 2px;\n        font: var(--data-card-item-etc-label-font);\n        text-transform: capitalize;\n      }\n\n      :host([name]) > span,\n      label + a {\n        display: block;\n        min-width: 100%;\n      }\n\n      /*\n       * 카드의 제목은 두 줄까지 읽힌다.\n       *\n       * 한 줄로 자르면 「[처분 승인] D-1788231051788-B · …」 처럼 **구별되는 부분이 잘려 나간다.**\n       * 카드는 표와 달리 세로로 여유가 있고, 그 여유를 제목에 주는 것이 맞다.\n       */\n      :host([name]) > span {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        white-space: normal;\n        overflow: hidden;\n      }\n\n      @media only screen and (max-width: 460px) {\n        *[center] {\n          margin: initial;\n        }\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Object }) value?: object\n\n  render(): TemplateResult {\n    var { value, column, record, rowIndex } = this\n\n    var {\n      label,\n      record: { renderer: recordRenderer }\n    } = column\n\n    if (typeof label == 'object') {\n      let { renderer: labelRenderer } = label\n      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`\n    } else {\n      return html`${recordRenderer(value, column, record, rowIndex, this)}`\n    }\n  }\n}\n"]}

package/dist/src/data-card/record-card.js

@@ -83,6 +83,17 @@ let RecordCard = class RecordCard extends LitElement {
         const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
         const detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
         const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined;
+        /*
+         * 값이 없으면 썸네일 자리를 만들지 않는다.
+         *
+         * 전에는 설정에 썸네일 컬럼 이름이 있으면 **레코드에 값이 있는지 보지 않고** 그렸다. 그래서 이미지를
+         * 갖지 않는 목록(결재함 · 업무함)에서 카드마다 깨진 이미지 표시가 세로의 절반을 차지하고, 정작
+         * 제목은 잘렸다. 없는 것의 자리를 비워 두는 것이다.
+         */
+        const thumbnailValue = thumbnailColumn ? record === null || record === void 0 ? void 0 : record[thumbnailColumn.name] : undefined;
+        const hasThumbnail = Array.isArray(thumbnailValue)
+            ? thumbnailValue.length > 0
+            : thumbnailValue !== null && thumbnailValue !== undefined && thumbnailValue !== '';
         const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList);
         if (this.hasAttribute('dirty')) {
             var dirtyIcon;
@@ -100,7 +111,7 @@ let RecordCard = class RecordCard extends LitElement {
         }
         return html `
       ${dirtyIcon ? html ` <md-icon dirty>${dirtyIcon}</md-icon> ` : html ``}
-      ${thumbnailColumn
+      ${thumbnailColumn && hasThumbnail
             ? html ` <ox-card-field
             thumbnail
             .rowIndex=${rowIndex}

package/dist/src/data-card/record-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler.js'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        /* Theme 정의가 누락된 application 에서도 합리적 radius 보장. */\n        border-radius: var(--data-card-record-card-border-radius, var(--md-sys-shape-corner-medium));\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        padding: var(--spacing-large);\n        box-sizing: border-box;\n        /* 동심 안쪽 radius — Material 3 shape token (외곽 = corner-medium, 안쪽 =\n         * corner-small). board-ui 카드와 동일 톤. */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler.js'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        /* Theme 정의가 누락된 application 에서도 합리적 radius 보장. */\n        border-radius: var(--data-card-record-card-border-radius, var(--md-sys-shape-corner-medium));\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        padding: var(--spacing-large);\n        box-sizing: border-box;\n        /* 동심 안쪽 radius — Material 3 shape token (외곽 = corner-medium, 안쪽 =\n         * corner-small). board-ui 카드와 동일 톤. */\n        border-radius: var(--data-card-thumbnail-radius, var(--md-sys-shape-corner-small));\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    const emphasized = this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n    /*\n     * 값이 없으면 썸네일 자리를 만들지 않는다.\n     *\n     * 전에는 설정에 썸네일 컬럼 이름이 있으면 **레코드에 값이 있는지 보지 않고** 그렸다. 그래서 이미지를\n     * 갖지 않는 목록(결재함 · 업무함)에서 카드마다 깨진 이미지 표시가 세로의 절반을 차지하고, 정작\n     * 제목은 잘렸다. 없는 것의 자리를 비워 두는 것이다.\n     */\n    const thumbnailValue = thumbnailColumn ? record?.[thumbnailColumn.name] : undefined\n    const hasThumbnail = Array.isArray(thumbnailValue)\n      ? thumbnailValue.length > 0\n      : thumbnailValue !== null && thumbnailValue !== undefined && thumbnailValue !== ''\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${thumbnailColumn && hasThumbnail\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

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;