@operato/data-grist 10.19.0 → 10.23.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.23.0](https://github.com/hatiolab/operato/compare/v10.22.0...v10.23.0) (2026-09-24)
+
+
+### :house: Code Refactoring
+
+* read Material's colour names, not their --ui aliases ([390e4cf](https://github.com/hatiolab/operato/commit/390e4cf7bf35ea5223d0c82cde6941ad4f95fea0))
+
+
+### :bug: Bug Fix
+
+* **attachment:** card actions as five quiet icons, so the row fits any card width ([1eb0665](https://github.com/hatiolab/operato/commit/1eb066581aa215957d98a1a8e7851af650c159ca))
+* **attachment:** draw the tile for files with no server thumbnail; tooltips on card fields ([4a0ee28](https://github.com/hatiolab/operato/commit/4a0ee28396564f098aca8f0b365be65921d24e07))
+* read custom properties that exist ([c9cec34](https://github.com/hatiolab/operato/commit/c9cec34d89485b058cfee8d91a06481b0cb9fa58))
+
+
+### :rocket: New Features
+
+* **attachment:** quiet cards for the attachment list; outlined card gutters ([97081d1](https://github.com/hatiolab/operato/commit/97081d17e37d99ae231317938329ccb52b4bfae6))
+* **attachment:** tiles for files that are not pictures; one-line card titles ([371cafc](https://github.com/hatiolab/operato/commit/371cafc2b9745a2b15b7870f843767aff5646632))
+* **data-grist,property-panel:** card reorder, quiet gutters, panel heading ([3ad5843](https://github.com/hatiolab/operato/commit/3ad5843287c75007b52bbf18d6117fcffdbd1a83))
+* **data-grist:** a proper personalizer popup for columns and filters ([4c3b620](https://github.com/hatiolab/operato/commit/4c3b620da53ce5dd80d820985d19d442c2d4ab0f))
+
+
+### :sparkles: Styling
+
+* **data-grist:** smaller ticks in the personalizer rows ([6c2f048](https://github.com/hatiolab/operato/commit/6c2f04832d57e86b96e466799afd4d7d31792e16))
+
+
+
+## [10.22.0](https://github.com/hatiolab/operato/compare/v10.21.0...v10.22.0) (2026-09-24)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
 ## [10.19.0](https://github.com/hatiolab/operato/compare/v10.18.0...v10.19.0) (2026-09-18)
 
 

package/dist/src/configure/rows-option-builder.js

@@ -1,7 +1,7 @@
 import { NOOP } from '../const.js';
 import { getGristEventHandler } from '../handlers/index.js';
 export const buildRowsOptions = (rows) => {
-    var { appendable = true, editable = true, insertable = false, selectable, groups = [], totals = [], classifier, accumulator } = rows;
+    var { appendable = true, editable = true, insertable = false, selectable, reorderable, groups = [], totals = [], classifier, accumulator } = rows;
     /* handler */
     var { click, dblclick, focus } = rows.handlers || {};
     if (typeof classifier !== 'function') {
@@ -13,6 +13,7 @@ export const buildRowsOptions = (rows) => {
         editable,
         insertable,
         selectable,
+        reorderable,
         groups,
         totals,
         handlers: {

package/dist/src/configure/rows-option-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"rows-option-builder.js","sourceRoot":"","sources":["../../../src/configure/rows-option-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAS,EAAc,EAAE;IACxD,IAAI,EACF,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,UAAU,EACV,WAAW,EACZ,GAAG,IAAI,CAAA;IAER,aAAa;IACb,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;IACpD,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE,CAAC;QACrC,UAAU,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,OAAO;QACL,WAAW;QACX,UAAU;QACV,QAAQ;QACR,UAAU;QACV,UAAU;QACV,MAAM;QACN,MAAM;QACN,QAAQ,EAAE;YACR,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,oBAAoB,CAAC,QAAQ,CAAC;YACxC,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC;SACnC;QACD,UAAU;KACX,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { NOOP } from '../const.js'\nimport { RowsConfig } from '../types.js'\nimport { getGristEventHandler } from '../handlers/index.js'\n\nexport const buildRowsOptions = (rows: any): RowsConfig => {\n  var {\n    appendable = true,\n    editable = true,\n    insertable = false,\n    selectable,\n    groups = [],\n    totals = [],\n    classifier,\n    accumulator\n  } = rows\n\n  /* handler */\n  var { click, dblclick, focus } = rows.handlers || {}\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  return {\n    accumulator,\n    appendable,\n    editable,\n    insertable,\n    selectable,\n    groups,\n    totals,\n    handlers: {\n      click: getGristEventHandler(click),\n      dblclick: getGristEventHandler(dblclick),\n      focus: getGristEventHandler(focus)\n    },\n    classifier\n  }\n}\n"]}
+{"version":3,"file":"rows-option-builder.js","sourceRoot":"","sources":["../../../src/configure/rows-option-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAS,EAAc,EAAE;IACxD,IAAI,EACF,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,WAAW,EACX,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,EAAE,EACX,UAAU,EACV,WAAW,EACZ,GAAG,IAAI,CAAA;IAER,aAAa;IACb,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;IACpD,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE,CAAC;QACrC,UAAU,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,OAAO;QACL,WAAW;QACX,UAAU;QACV,QAAQ;QACR,UAAU;QACV,UAAU;QACV,WAAW;QACX,MAAM;QACN,MAAM;QACN,QAAQ,EAAE;YACR,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,oBAAoB,CAAC,QAAQ,CAAC;YACxC,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC;SACnC;QACD,UAAU;KACX,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { NOOP } from '../const.js'\nimport { RowsConfig } from '../types.js'\nimport { getGristEventHandler } from '../handlers/index.js'\n\nexport const buildRowsOptions = (rows: any): RowsConfig => {\n  var {\n    appendable = true,\n    editable = true,\n    insertable = false,\n    selectable,\n    reorderable,\n    groups = [],\n    totals = [],\n    classifier,\n    accumulator\n  } = rows\n\n  /* handler */\n  var { click, dblclick, focus } = rows.handlers || {}\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  return {\n    accumulator,\n    appendable,\n    editable,\n    insertable,\n    selectable,\n    reorderable,\n    groups,\n    totals,\n    handlers: {\n      click: getGristEventHandler(click),\n      dblclick: getGristEventHandler(dblclick),\n      focus: getGristEventHandler(focus)\n    },\n    classifier\n  }\n}\n"]}

package/dist/src/data-card/data-card-field.d.ts

@@ -2,6 +2,7 @@ import { LitElement, TemplateResult } from 'lit';
 import { ColumnConfig, GristRecord } from '../types.js';
 export declare class DataCardField extends LitElement {
     static styles: import("lit").CSSResult[];
+    private tooltipController?;
     align?: string;
     record: GristRecord;
     column: ColumnConfig;

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

@@ -1,10 +1,17 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { TooltipReactiveController } from '@operato/utils';
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js';
 let DataCardField = class DataCardField extends LitElement {
     constructor() {
         super(...arguments);
+        /*
+         * Cut text gets a tooltip here as it does in a grid cell. The grid's cells and headers had the
+         * controller; the card's fields never did, so a card title clipped to its line count could not
+         * be read in full anywhere.
+         */
+        this.tooltipController = new TooltipReactiveController(this);
         this.record = ZERO_RECORD;
         this.column = ZERO_COLUMN;
         this.rowIndex = -1;
@@ -86,9 +93,10 @@ DataCardField.styles = [
        * 한 줄로 자르면 「[처분 승인] D-1788231051788-B · …」 처럼 **구별되는 부분이 잘려 나간다.**
        * 카드는 표와 달리 세로로 여유가 있고, 그 여유를 제목에 주는 것이 맞다.
        */
+      /* A list can ask for one line (--data-card-item-name-lines: 1) when its names all start alike. */
       :host([name]) > span {
         display: -webkit-box;
-        -webkit-line-clamp: 2;
+        -webkit-line-clamp: var(--data-card-item-name-lines, 2);
         -webkit-box-orient: vertical;
         white-space: normal;
         overflow: hidden;

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;;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"]}
+{"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,yBAAyB,EAAE,MAAM,gBAAgB,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmFL;;;;WAIG;QACK,sBAAiB,GAA+B,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAA;QAG/D,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;;AA7GM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8EF;CACF,AAhFY,CAgFZ;AAS8B;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;AA9F/B,aAAa;IADzB,aAAa,CAAC,eAAe,CAAC;GAClB,aAAa,CA+GzB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\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      /* A list can ask for one line (--data-card-item-name-lines: 1) when its names all start alike. */\n      :host([name]) > span {\n        display: -webkit-box;\n        -webkit-line-clamp: var(--data-card-item-name-lines, 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  /*\n   * Cut text gets a tooltip here as it does in a grid cell. The grid's cells and headers had the\n   * controller; the card's fields never did, so a card title clipped to its line count could not\n   * be read in full anywhere.\n   */\n  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\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/data-card-gutter.js

@@ -34,6 +34,12 @@ let DataCardGutter = class DataCardGutter extends LitElement {
                 this.removeAttribute('danger');
             }
         }
+        /* `quiet` may depend on the record (a set favorite stays visible), so it follows both. */
+        if (changes.has('column') || changes.has('record')) {
+            const { quiet } = this.column;
+            const isQuiet = typeof quiet === 'function' ? !!quiet(this.record) : !!quiet;
+            this.toggleAttribute('quiet', isQuiet);
+        }
     }
 };
 DataCardGutter.styles = [
@@ -50,14 +56,20 @@ DataCardGutter.styles = [
         margin-right: auto;
       }
 
+      /*
+       * A worded gutter is an outlined button in the card's own ink - it is one of several equal
+       * actions on the card, not the card's primary action, so it takes no fill. The destructive
+       * one is filled, in the theme's danger pair (the scheme's error tokens unless a theme hands
+       * in its own, as a dark theme does to avoid a pastel plate).
+       */
       * {
-        border: 0;
+        border: 1px solid var(--md-sys-color-outline-variant);
         font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
         line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);
 
         color: var(--md-sys-color-on-primary);
         background-color: var(--md-sys-color-primary);
-        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));
+        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-extra-small, 4px));
 
         padding: var(--spacing-small);
       }
@@ -74,8 +86,9 @@ DataCardGutter.styles = [
         --md-icon-size: var(--data-card-gutter-icon-size, 20px);
         font-size: var(--data-card-gutter-icon-size, 20px);
         line-height: 1;
+        border: 0;
         padding: var(--spacing-tiny);
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        color: var(--data-card-gutter-icon-color, var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface)));
         background-color: transparent;
         border-radius: var(--md-sys-shape-corner-small);
         cursor: pointer;
@@ -97,27 +110,29 @@ DataCardGutter.styles = [
        * 그려서 부자연. 자식들은 button hover 의 효과를 상속받기만 한다. */
       button:hover {
         cursor: pointer;
-        color: var(--md-sys-color-on-secondary);
-        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: var(--md-sys-color-secondary-container);
+        border-color: transparent;
       }
 
       :host([danger]) button {
-        color: var(--md-sys-color-on-error);
-        background-color: var(--md-sys-color-error);
-        border-color: var(--md-sys-color-error);
+        color: var(--danger-button-color, var(--md-sys-color-on-error));
+        background-color: var(--danger-button-background, var(--md-sys-color-error));
+        border-color: transparent;
       }
 
       :host([danger]) button:hover {
-        color: var(--md-sys-color-error);
-        background-color: var(--md-sys-color-on-secondary);
-        border-color: var(--md-sys-color-on-secondary);
+        color: var(--danger-button-hover-color, var(--md-sys-color-error));
+        background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
+        border-color: transparent;
       }
 
       button {
         display: flex;
         gap: var(--spacing-small);
-        border: 0;
         align-items: center;
+        font: inherit;
+        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
       }
 
       /* 자식 (span / md-icon) 은 button 의 color 를 inherit — button hover / danger
@@ -128,12 +143,15 @@ DataCardGutter.styles = [
       }
 
       button md-icon {
+        --md-icon-size: 16px;
+        font-size: 16px;
         border: 0;
         padding: 0;
         background-color: unset;
       }
 
       button span {
+        border: 0;
         padding: 0;
         background-color: transparent;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QA0GuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAgCnD,CAAC;IA7BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;YAE1C,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;YACtC,CAAC;YAED,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;IACH,CAAC;;AA1IM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGF;CACF,AAtGY,CAsGZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AA7G/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CA4I1B","sourcesContent":["import { css, html, LitElement, PropertyValues, 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-gutter')\nexport class DataCardGutter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: transparent;\n        align-content: center;\n        align-items: center;\n        text-overflow: ellipsis;\n      }\n\n      :host([row-selector]) {\n        margin-right: auto;\n      }\n\n      * {\n        border: 0;\n        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);\n        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        padding: var(--spacing-small);\n      }\n\n      /*\n        ── 아이콘만 있는 gutter 는 상자에 담지 않는다 ──────────────────────────\n        위의 별표 규칙은 글자 단추(iconOnly: false)를 위한 것이다. 그것이 아이콘 하나에도 걸리면\n        두 가지가 함께 잘못된다 — 아이콘이 label 글자 크기(0.8rem)로 줄어 13px 짜리 글리프가 되고,\n        그 작은 글리프가 색칠된 상자에 갇혀 답답해 보인다.\n\n        아이콘 단추는 아이콘 크기로 그리고, 바탕은 손이 갈 때만 든다.\n      */\n      md-icon {\n        --md-icon-size: var(--data-card-gutter-icon-size, 20px);\n        font-size: var(--data-card-gutter-icon-size, 20px);\n        line-height: 1;\n        padding: var(--spacing-tiny);\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        background-color: transparent;\n        border-radius: var(--md-sys-shape-corner-small);\n        cursor: pointer;\n      }\n\n      md-icon:hover {\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n      }\n\n      /* 되돌릴 수 없는 것은 손이 갔을 때 색으로 말한다 — 늘 붉게 두면 목록이 시끄럽다 */\n      :host([danger]) md-icon:hover {\n        color: var(--md-sys-color-on-error, #fff);\n        background-color: var(--md-sys-color-error);\n      }\n\n      /* button hover 효과는 button 자체에만 — *:hover 로 광범위 적용 시 자식\n       * (span/md-icon) 의 individual hover 가 secondary background 작은 박스를\n       * 그려서 부자연. 자식들은 button hover 의 효과를 상속받기만 한다. */\n      button:hover {\n        cursor: pointer;\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n      }\n\n      :host([danger]) button {\n        color: var(--md-sys-color-on-error);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) button:hover {\n        color: var(--md-sys-color-error);\n        background-color: var(--md-sys-color-on-secondary);\n        border-color: var(--md-sys-color-on-secondary);\n      }\n\n      button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n      }\n\n      /* 자식 (span / md-icon) 은 button 의 color 를 inherit — button hover / danger\n       * 상태에서 color 가 변하면 자식 글자 / 아이콘 색도 함께 반전. 상위의 *{...}\n       * 가 모든 자식에 color 박아서 inherit 안 되던 문제 보수. */\n      button > * {\n        color: inherit;\n      }\n\n      button md-icon {\n        border: 0;\n        padding: 0;\n        background-color: unset;\n      }\n\n      button span {\n        padding: 0;\n        background-color: transparent;\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    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n    return html` ${renderer(value, column, record, rowIndex, this)} `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      const { gutterName, danger } = this.column\n\n      if (gutterName == 'row-selector') {\n        this.setAttribute('row-selector', '')\n      } else {\n        this.removeAttribute('row-selector')\n      }\n\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-card-gutter.js","sourceRoot":"","sources":["../../../src/data-card/data-card-gutter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAI/D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAsHuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAwCnD,CAAC;IArCC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,oEAAoE;QACpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;YAE1C,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;YACtC,CAAC;YAED,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;QAED,0FAA0F;QAC1F,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;YAC7B,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;YAE5E,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACxC,CAAC;IACH,CAAC;;AA9JM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgHF;CACF,AAlHY,CAkHZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAzH/B,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CAgK1B","sourcesContent":["import { css, html, LitElement, PropertyValues, 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-gutter')\nexport class DataCardGutter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: transparent;\n        align-content: center;\n        align-items: center;\n        text-overflow: ellipsis;\n      }\n\n      :host([row-selector]) {\n        margin-right: auto;\n      }\n\n      /*\n       * A worded gutter is an outlined button in the card's own ink - it is one of several equal\n       * actions on the card, not the card's primary action, so it takes no fill. The destructive\n       * one is filled, in the theme's danger pair (the scheme's error tokens unless a theme hands\n       * in its own, as a dark theme does to avoid a pastel plate).\n       */\n      * {\n        border: 1px solid var(--md-sys-color-outline-variant);\n        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);\n        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-extra-small, 4px));\n\n        padding: var(--spacing-small);\n      }\n\n      /*\n        ── 아이콘만 있는 gutter 는 상자에 담지 않는다 ──────────────────────────\n        위의 별표 규칙은 글자 단추(iconOnly: false)를 위한 것이다. 그것이 아이콘 하나에도 걸리면\n        두 가지가 함께 잘못된다 — 아이콘이 label 글자 크기(0.8rem)로 줄어 13px 짜리 글리프가 되고,\n        그 작은 글리프가 색칠된 상자에 갇혀 답답해 보인다.\n\n        아이콘 단추는 아이콘 크기로 그리고, 바탕은 손이 갈 때만 든다.\n      */\n      md-icon {\n        --md-icon-size: var(--data-card-gutter-icon-size, 20px);\n        font-size: var(--data-card-gutter-icon-size, 20px);\n        line-height: 1;\n        border: 0;\n        padding: var(--spacing-tiny);\n        color: var(--data-card-gutter-icon-color, var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface)));\n        background-color: transparent;\n        border-radius: var(--md-sys-shape-corner-small);\n        cursor: pointer;\n      }\n\n      md-icon:hover {\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n      }\n\n      /* 되돌릴 수 없는 것은 손이 갔을 때 색으로 말한다 — 늘 붉게 두면 목록이 시끄럽다 */\n      :host([danger]) md-icon:hover {\n        color: var(--md-sys-color-on-error, #fff);\n        background-color: var(--md-sys-color-error);\n      }\n\n      /* button hover 효과는 button 자체에만 — *:hover 로 광범위 적용 시 자식\n       * (span/md-icon) 의 individual hover 가 secondary background 작은 박스를\n       * 그려서 부자연. 자식들은 button hover 의 효과를 상속받기만 한다. */\n      button:hover {\n        cursor: pointer;\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n        border-color: transparent;\n      }\n\n      :host([danger]) button {\n        color: var(--danger-button-color, var(--md-sys-color-on-error));\n        background-color: var(--danger-button-background, var(--md-sys-color-error));\n        border-color: transparent;\n      }\n\n      :host([danger]) button:hover {\n        color: var(--danger-button-hover-color, var(--md-sys-color-error));\n        background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n        border-color: transparent;\n      }\n\n      button {\n        display: flex;\n        gap: var(--spacing-small);\n        align-items: center;\n        font: inherit;\n        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);\n      }\n\n      /* 자식 (span / md-icon) 은 button 의 color 를 inherit — button hover / danger\n       * 상태에서 color 가 변하면 자식 글자 / 아이콘 색도 함께 반전. 상위의 *{...}\n       * 가 모든 자식에 color 박아서 inherit 안 되던 문제 보수. */\n      button > * {\n        color: inherit;\n      }\n\n      button md-icon {\n        --md-icon-size: 16px;\n        font-size: 16px;\n        border: 0;\n        padding: 0;\n        background-color: unset;\n      }\n\n      button span {\n        border: 0;\n        padding: 0;\n        background-color: transparent;\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    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */\n    return html` ${renderer(value, column, record, rowIndex, this)} `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      const { gutterName, danger } = this.column\n\n      if (gutterName == 'row-selector') {\n        this.setAttribute('row-selector', '')\n      } else {\n        this.removeAttribute('row-selector')\n      }\n\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n\n    /* `quiet` may depend on the record (a set favorite stays visible), so it follows both. */\n    if (changes.has('column') || changes.has('record')) {\n      const { quiet } = this.column\n      const isQuiet = typeof quiet === 'function' ? !!quiet(this.record) : !!quiet\n\n      this.toggleAttribute('quiet', isQuiet)\n    }\n  }\n}\n"]}

package/dist/src/data-card/data-card.d.ts

@@ -15,7 +15,14 @@ export declare class DataCard extends DataManipulator {
     private _total;
     private _limit;
     private _page;
+    private _draggedId;
+    private _dropTargetId;
+    private _dropSide;
     firstUpdated(changes: PropertyValues<this>): void;
+    private _wireReorder;
+    private _onDrop;
+    private _clearDropIndicator;
+    private _resetDragState;
     updated(changes: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     gotoTop(e: Event): void;

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

@@ -3,7 +3,7 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/text-button.js';
 import '@operato/list-state/ox-empty-note.js';
 import './record-card.js';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { DataManipulator } from '../data-manipulator.js';
 import { renderEmptyNote } from '../empty-note-render.js';
@@ -15,6 +15,10 @@ let DataCard = class DataCard extends DataManipulator {
         this._total = 0;
         this._limit = 20;
         this._page = 1;
+        /* Drag-reorder state (`rows.reorderable`) - board-tile-list.ts's proven shape, generalized. */
+        this._draggedId = null;
+        this._dropTargetId = null;
+        this._dropSide = null;
     }
     firstUpdated(changes) {
         this.isTop = true;
@@ -32,6 +36,175 @@ let DataCard = class DataCard extends DataManipulator {
             }
             this.isTop = this.scrollTop == 0;
         });
+        this._wireReorder();
+    }
+    /*
+     * `config.rows.reorderable` is read inside each handler, not at listener-registration time - the
+     * listeners are cheap to hold and this sidesteps any question of whether `config` has already been
+     * assigned by the time `firstUpdated` runs (it is a plain property set by the caller's template,
+     * not guaranteed ordered against connection).
+     */
+    _wireReorder() {
+        this.renderRoot.addEventListener('dragstart', (e) => {
+            var _a, _b, _c;
+            if (!((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.reorderable))
+                return;
+            const target = e.target.closest('[card][id]');
+            if (!(target === null || target === void 0 ? void 0 : target.id))
+                return;
+            this._draggedId = target.id;
+            target.classList.add('dragging');
+            e.dataTransfer.effectAllowed = 'move';
+            (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData('text/plain', target.id);
+        });
+        this.renderRoot.addEventListener('dragover', (e) => {
+            var _a, _b;
+            if (!((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.reorderable) || !this._draggedId)
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            const target = e.target.closest('[card][id]');
+            if (!(target === null || target === void 0 ? void 0 : target.id) || target.id === this._draggedId)
+                return;
+            const targetRect = target.getBoundingClientRect();
+            const mousePos = e.clientX - targetRect.left;
+            const side = mousePos < targetRect.width / 2 ? 'before' : 'after';
+            if (this._dropTargetId !== target.id || this._dropSide !== side) {
+                this._clearDropIndicator();
+                this._dropTargetId = target.id;
+                this._dropSide = side;
+                target.classList.add(side === 'before' ? 'drop-before' : 'drop-after');
+            }
+        });
+        this.renderRoot.addEventListener('dragleave', (e) => {
+            var _a, _b;
+            if (!((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.reorderable))
+                return;
+            const target = e.target.closest('[card][id]');
+            if ((target === null || target === void 0 ? void 0 : target.id) === this._dropTargetId) {
+                const related = e.relatedTarget;
+                if (!related || !target.contains(related)) {
+                    this._clearDropIndicator();
+                }
+            }
+        });
+        this.renderRoot.addEventListener('drop', (e) => this._onDrop(e));
+        this.renderRoot.addEventListener('dragend', (e) => {
+            var _a, _b;
+            if (!((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.reorderable))
+                return;
+            this._clearDropIndicator();
+            const target = e.target.closest('[card]');
+            if (target)
+                target.classList.remove('dragging');
+            this._resetDragState();
+        });
+    }
+    _onDrop(e) {
+        var _a, _b;
+        if (!((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.reorderable))
+            return;
+        e.preventDefault();
+        /* drop 이 먼저 계산한다 - dragleave 가 먼저 일어나 상태를 지울 수 있어서다. */
+        const dropTarget = e.target.closest('[card][id]');
+        let dropTargetId = this._dropTargetId;
+        let dropSide = this._dropSide;
+        if ((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) && dropTarget.id !== this._draggedId) {
+            dropTargetId = dropTarget.id;
+            const rect = dropTarget.getBoundingClientRect();
+            dropSide = e.clientX - rect.left < rect.width / 2 ? 'before' : 'after';
+        }
+        this._clearDropIndicator();
+        const draggedEl = this._draggedId ? this.renderRoot.querySelector(`[card][id="${this._draggedId}"]`) : null;
+        draggedEl === null || draggedEl === void 0 ? void 0 : draggedEl.classList.remove('dragging');
+        if (!this._draggedId || !dropTargetId || this._draggedId === dropTargetId) {
+            this._resetDragState();
+            return;
+        }
+        const records = [...this._records];
+        const draggedIndex = records.findIndex(r => r.id === this._draggedId);
+        if (draggedIndex === -1) {
+            this._resetDragState();
+            return;
+        }
+        const draggedId = this._draggedId;
+        const [dragged] = records.splice(draggedIndex, 1);
+        let targetIndex = records.findIndex(r => r.id === dropTargetId);
+        if (dropSide === 'after')
+            targetIndex++;
+        records.splice(targetIndex, 0, dragged);
+        this._resetDragState();
+        /* FLIP: 옮기기 전 자리를 먼저 잰다. */
+        const cards = this.renderRoot.querySelectorAll('[card][id]');
+        const firstPositions = new Map();
+        cards.forEach(card => firstPositions.set(card.id, card.getBoundingClientRect()));
+        /* 낙관적 갱신 - 지속은 이 이벤트를 듣는 쪽의 몫이다(RowsConfig.reorderable 문서 참조). */
+        this._records = records;
+        this.updateComplete.then(() => {
+            const updatedCards = this.renderRoot.querySelectorAll('[card][id]');
+            let droppedEl = null;
+            updatedCards.forEach(card => {
+                const first = firstPositions.get(card.id);
+                if (!first)
+                    return;
+                const last = card.getBoundingClientRect();
+                const dx = first.left - last.left;
+                const dy = first.top - last.top;
+                const el = card;
+                if (card.id === draggedId) {
+                    /* 옮긴 카드는 다른 카드들이 밀리는 동안 숨겨 뒀다가 마지막에 착지시킨다. */
+                    el.classList.add('flip-dropped-hidden');
+                    droppedEl = el;
+                }
+                else {
+                    if (dx === 0 && dy === 0)
+                        return;
+                    el.style.transform = `translate(${dx}px, ${dy}px)`;
+                    el.style.transition = 'none';
+                    requestAnimationFrame(() => {
+                        el.classList.add('flip-moving');
+                        el.style.transform = '';
+                        el.style.transition = '';
+                        el.addEventListener('transitionend', () => el.classList.remove('flip-moving'), { once: true });
+                    });
+                }
+            });
+            const ids = records.map(r => r.id);
+            const dispatchReorder = () => {
+                this.dispatchEvent(new CustomEvent('reorder', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { ids, movedId: draggedId }
+                }));
+            };
+            if (droppedEl) {
+                setTimeout(() => {
+                    const el = droppedEl;
+                    el.classList.remove('flip-dropped-hidden');
+                    el.classList.add('flip-dropped');
+                    el.addEventListener('animationend', () => {
+                        el.classList.remove('flip-dropped');
+                        dispatchReorder();
+                    }, { once: true });
+                }, 500);
+            }
+            else {
+                dispatchReorder();
+            }
+        });
+    }
+    _clearDropIndicator() {
+        var _a;
+        if (this._dropTargetId) {
+            (_a = this.renderRoot.querySelector(`[card][id="${this._dropTargetId}"]`)) === null || _a === void 0 ? void 0 : _a.classList.remove('drop-before', 'drop-after');
+        }
+        this._dropTargetId = null;
+        this._dropSide = null;
+    }
+    _resetDragState() {
+        this._draggedId = null;
+        this._dropTargetId = null;
+        this._dropSide = null;
     }
     updated(changes) {
         if (changes.has('config')) {
@@ -46,7 +219,7 @@ let DataCard = class DataCard extends DataManipulator {
         }
     }
     render() {
-        var { classifier } = this.config.rows;
+        var { classifier, reorderable } = this.config.rows;
         var records = this._records || [];
         if (this.config && this.config.rows.appendable) {
             records = [...records, { __dirty__: '+' }];
@@ -54,6 +227,8 @@ let DataCard = class DataCard extends DataManipulator {
         return html `
       ${records.map((record, rowIndex) => {
             var { emphasized } = classifier.call(null, record, rowIndex) || {};
+            /* Only a real record can be dragged - the trailing `appendable` placeholder has no id. */
+            var draggable = reorderable && record.id;
             return html `
           <ox-record-card
             .config=${this.config}
@@ -63,6 +238,8 @@ let DataCard = class DataCard extends DataManipulator {
             .emphasized=${emphasized}
             ?selected-row=${record['__selected__']}
             ?dirty=${record['__dirty__']}
+            id=${record.id || nothing}
+            draggable=${draggable ? 'true' : 'false'}
             card
           ></ox-record-card>
         `;
@@ -94,7 +271,17 @@ DataCard.styles = [
           기본값은 지금까지의 값 그대로다.
         */
         grid-template-columns: repeat(auto-fill, minmax(var(--data-card-min-width, 300px), 1fr));
+        /*
+          grid-template-rows: min-content only ever sizes the *first* row track - every row after
+          it is implicit, and an implicit track with no grid-auto-rows falls back to the browser's
+          default auto sizing, which is a looser (max-content-leaning) measurement than
+          min-content. With enough records to wrap past one row, that mismatch showed up as a real
+          gap: row 1 sized tight at ~201px, rows 2+ sized to ~319px while the cards inside still only
+          filled ~201px of it (operato-board's board-list, 2026-09-23 - 17 boards, 7 per row).
+          grid-auto-rows repeats the same rule for every implicit row, so all rows size alike.
+        */
         grid-template-rows: min-content;
+        grid-auto-rows: min-content;
         grid-gap: var(--spacing-large);
       }
 
@@ -157,6 +344,54 @@ DataCard.styles = [
         color: var(--grid-record-emphasized-color);
       }
 
+      /*
+        드래그 순서 바꾸기 (rows.reorderable) — board-list 의 board-tile-list.ts 에서 검증된 모양을
+        그대로 가져온다. 자리(placement)만 이 파일이 정하고, 지속(persist)은 소비자가 한다 — 그
+        경계는 위 types.ts RowsConfig.reorderable 문서에 있다.
+      */
+      [card][draggable='true'] {
+        cursor: grab;
+        transition:
+          opacity 0.2s ease,
+          transform 0.2s ease;
+      }
+
+      [card].dragging {
+        opacity: 0.3;
+        transform: scale(0.95);
+      }
+
+      [card].drop-before {
+        border-left: 3px solid var(--md-sys-color-primary);
+      }
+
+      [card].drop-after {
+        border-right: 3px solid var(--md-sys-color-primary);
+      }
+
+      [card].flip-moving {
+        transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
+      }
+
+      @keyframes ox-card-drop-land {
+        0% {
+          opacity: 0;
+          transform: scale(0.9);
+        }
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      [card].flip-dropped-hidden {
+        opacity: 0;
+      }
+
+      [card].flip-dropped {
+        animation: ox-card-drop-land 0.5s cubic-bezier(0.22, 0.6, 0.36, 1);
+      }
+
       @media screen and (max-width: 460px) {
         #setting {
           grid-template-columns: 1fr;