@operato/data-grist 10.8.1 → 10.10.0

package/dist/src/data-grist.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import './data-grid/data-grid.js';
 import './data-list/data-list.js';
 import './data-card/data-card.js';
+import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, queryAsync, state } from 'lit/decorators.js';
 import isEmpty from 'lodash-es/isEmpty.js';
@@ -53,6 +54,13 @@ let DataGrist = class DataGrist extends LitElement {
         this._data = ZERO_DATA; // copy data, dirty data
         this._config = ZERO_CONFIG; // compiled configuration
         this._showSpinner = false;
+        /**
+         * 한 번이라도 조회했는가. 빈 목록에 대한 안내를 낼지 이 값이 정한다.
+         *
+         * 조회 전에도 records 는 비어 있다. 그러나 그것은 「없다」가 아니라 「아직 모른다」이다.
+         * 둘을 같게 두면 확인하지 않은 사실을 화면이 단정하게 된다.
+         */
+        this._fetched = false;
         this.headroomAtTop = true;
         this.lastLocation = {};
         this.popstateEventHandler = ((e) => {
@@ -315,7 +323,7 @@ let DataGrist = class DataGrist extends LitElement {
              * 그 변수들은 믿을 수 없다 — 미는 쪽(onTop · onNotTop)이 같은 변수에 **밀어 놓은 값을** 다시
              * 담는다. 그래서 감출 때 되돌릴 값이 이미 오염돼 있다.
              *
-             * [재봤음] 머리를 감춰도 표가 그대로였다. 2026-09-02
+             * [확인함] 머리를 감춰도 표가 그대로였다. 2026-09-02
              *
              *   전        머리 78px   margin-top 78px   표 시작 191
              *   감춘 뒤    머리 0px    margin-top 78px   표 시작 191   ← 안 움직인다
@@ -327,7 +335,20 @@ let DataGrist = class DataGrist extends LitElement {
         }
     }
     render() {
-        const empty = !this._showSpinner && this._data.records.length == 0;
+        /*
+         * ── 빈 목록에 대한 안내는 조회를 마친 뒤에만 낸다 ──────────────────────
+         *
+         * 조회 중에는 이미 내지 않는다(_showSpinner). 다만 **첫 조회가 시작되기 전**에도 records 는
+         * 비어 있고 스피너는 아직 뜨지 않았다. 그 한 프레임 동안 「아직 아무것도 없습니다」가 스친다.
+         * 확인하지 않은 사실을 화면이 단정하는 셈이다.
+         *
+         *   [읽었음] _showSpinner 초기값 false · data-provider 는 조회를 시작할 때 showSpinner()
+         *
+         * 화면들이 저마다 같은 방어를 두고 있었다(lot-list 의 loaded 검사). 조회 여부는 이 부품이
+         * 가진 사실이므로 여기서 판단한다.
+         */
+        const empty = this._fetched && !this._showSpinner && this._data.records.length == 0;
+        const emptyNote = empty ? this.noteWhenEmpty() : undefined;
         return html `
       <slot name="headroom"> </slot>
       <div id="wrap" @keydown=${(e) => this.onKeydown(e)}>
@@ -335,12 +356,14 @@ let DataGrist = class DataGrist extends LitElement {
             ? html `
               <ox-grid
                 id="grist"
+                .gridLabel=${this.gridLabel}
                 .config=${this.compiledConfig}
                 .data=${this._data}
                 .sorters=${this.sorters || []}
                 .filters=${this.filters || []}
                 .pagination=${this.pagination || {}}
                 ?empty=${empty}
+                .emptyNote=${emptyNote}
               >
                 <slot name="setting" slot="setting"> </slot>
               </ox-grid>
@@ -354,6 +377,7 @@ let DataGrist = class DataGrist extends LitElement {
                   .sorters=${this.sorters || []}
                   .filters=${this.filters || []}
                   ?empty=${empty}
+                .emptyNote=${emptyNote}
                 >
                 </ox-card>
               `
@@ -365,6 +389,7 @@ let DataGrist = class DataGrist extends LitElement {
                   .sorters=${this.sorters || []}
                   .filters=${this.filters || []}
                   ?empty=${empty}
+                .emptyNote=${emptyNote}
                 >
                 </ox-list>
               `}
@@ -694,6 +719,8 @@ let DataGrist = class DataGrist extends LitElement {
      * You can call this method to hide the spinner when loading or processing is finished.
      */
     hideSpinner() {
+        /* 조회를 마쳤다. 이제 목록이 비었다는 것은 확인된 사실이다. */
+        this._fetched = true;
         this._showSpinner = false;
     }
     /**
@@ -763,7 +790,7 @@ let DataGrist = class DataGrist extends LitElement {
              * **인라인 값이 아니라 실제로 보이는지를 본다.**
              *
              * 전에는 `style.display` 를 읽었다. 아무도 감춘 적이 없으면 그 값은 빈 문자열이고,
-             * `'' !== 'none'` 이 참이라 **첫 번째 누름이 감추는 쪽으로** 갔다. 이 단추를 누르는 사람은
+             * `'' !== 'none'` 이 참이라 **첫 번째 누름이 감추는 쪽으로** 갔다. 이 버튼을 누르는 사람은
              * 「걸러 보고 싶다」는 뜻인데 아무 일도 안 일어난 것처럼 보였다 — 안 보이던 영역을 한 번 더
              * 감춘 것이다.
              */
@@ -788,6 +815,50 @@ let DataGrist = class DataGrist extends LitElement {
      * @method
      * @public
      */
+    /**
+     * 목록이 비었을 때 무슨 말을 하나. **판단은 여기서 한 번만** 한다.
+     *
+     * 모드가 셋이고(GRID · CARD · LIST) 셋 다 자기 자리에 안내를 그린다. 판단까지 각자 하면 세 벌이
+     * 되고, 실제로 그랬다 — 셋이 같은 문장을 하드코딩하고 있었다. 여기서 정해 내려보낸다.
+     *
+     * ── 빈 목록은 두 가지 다른 사실을 말해야 한다 ──────────────────────────────
+     *
+     *   아직 아무것도 없다    이 표에 만들어진 것이 없다
+     *   찾는 것이 없다        찾거나 걸러 본 결과가 없다
+     *
+     * 합치면 결함이 「고를 게 없다」로 보인다. 질의가 빈 배열을 내는데 화면이 「해당하는 것이
+     * 없습니다」라고 말하면 아무도 그것이 결함인 줄 모른다.
+     *
+     * 조건이 걸렸을 때는 **화면이 준 emptyNote 를 쓰지 않는다.** 그 말은 「아직 없다」를 위해 쓴
+     * 것이라 조건이 걸린 자리에서는 거짓이 된다.
+     */
+    noteWhenEmpty() {
+        var _a, _b;
+        const conditioned = (this.filters || []).some(({ value }) => {
+            if (value === undefined || value === null)
+                return false;
+            if (typeof value === 'string')
+                return value.length > 0;
+            if (Array.isArray(value))
+                return value.length > 0;
+            return true;
+        });
+        if (conditioned) {
+            return {
+                icon: 'search_off',
+                title: i18next.t('text.grid-nothing-found', { defaultValue: 'nothing found' }),
+                description: i18next.t('text.grid-clear-search', {
+                    defaultValue: 'clear the search or filters to see everything'
+                })
+            };
+        }
+        const given = (_a = this.compiledConfig) === null || _a === void 0 ? void 0 : _a.emptyNote;
+        return {
+            icon: given === null || given === void 0 ? void 0 : given.icon,
+            title: (_b = given === null || given === void 0 ? void 0 : given.title) !== null && _b !== void 0 ? _b : i18next.t('text.grid-no-records', { defaultValue: 'nothing to show' }),
+            description: given === null || given === void 0 ? void 0 : given.description
+        };
+    }
     reset() {
         var _a, _b;
         // TODO tree 형태의 데이타로 _data를 만들 때, children, collapsed 등을 감안한다.
@@ -1062,13 +1133,13 @@ DataGrist.styles = [
     SpinnerStyles,
     css `
       /*
-       * ── 표의 겉모습 — 한 벌로 여기서 정한다 ──────────────────────────────
+       * ── 표의 겉모습. 한 곳에서 정한다 ──────────────────────────────
        *
        * 화면마다 --grid-* 토큰을 하나씩 덮어 모양을 바꾸지 않는다. 그 방식은 두 가지로 깨졌다.
        *
        *   · 한 토큰이 두 뜻을 겸한다. --grid-record-focused-cell-border 는 「초점 표식」이면서
        *     「줄을 나누는 선」이었다. 표식을 감추려고 none 을 주면 줄 선이 사라졌다
-       *   · 스무 개를 짝 맞춰 덮어야 한 벌이 되고, 하나 빠지면 그 자리만 옛 모양으로 남는다
+       *   · 스무 개를 짝 맞춰 덮어야 하나로 맞춰지고, 하나 빠지면 그 자리만 옛 모양으로 남는다
        *
        * 토큰은 shadow DOM 을 넘어 상속되므로 여기서 정하면 머리·칸·바닥까지 그대로 닿는다.
        *
@@ -1099,7 +1170,7 @@ DataGrist.styles = [
          * 머리와 몸의 여백은 **같은 값이다.** 1px 이라도 다르면 머리글과 첫 줄의 리듬이 어긋난다.
          *
          * 9px 에서 7px 로 내렸다. 한 줄 표는 40 → 36px, 세 줄 표는 74 → 70px 이 되고, 줄과 줄 사이는
-         * 안 변한다 — 그것은 셀 여백이 아니라 .sub 의 margin-top 이다. [재봤음] 2026-09-02
+         * 안 변한다 — 그것은 셀 여백이 아니라 .sub 의 margin-top 이다. [확인함] 2026-09-02
          *
          * 이 화면들이 하는 일은 훑고 고치는 것이라 한 화면에 줄이 많을수록 낫다.
          */
@@ -1127,7 +1198,6 @@ DataGrist.styles = [
         --grid-header-text-transform: none;
         --grid-header-letter-spacing: 0.01em;
         --grid-header-sorter-size: 14px;
-        --grid-header-mark-size: 14px;
         /* 세로 선을 그리는 것이 폭 조절 손잡이다 — 감추면 둘이 함께 사라진다. */
         --grid-header-splitter-display: none;
 
@@ -1152,7 +1222,7 @@ DataGrist.styles = [
          *   표 바깥(surface-container)    240 242 244   바깥보다는 밝다
          *
          * 잉크를 얹는 방식으로도 해 봤는데, 겹치지 않을 만큼 진하게 하면(10%) 232 233 234 로 **바깥보다
-         * 어두워져** 무겁게 느껴졌다. 옅게 하면(6%) 바깥과 정확히 겹쳤다. [재봤음] 2026-09-02
+         * 어두워져** 무겁게 느껴졌다. 옅게 하면(6%) 바깥과 정확히 겹쳤다. [확인함] 2026-09-02
          *
          * ── 면 단계로는 어두운 모드에서 띠가 사라졌다 ────────────────────────
          * 그때 「면 단계를 쓰면 어두운 모드에서 함께 뒤집힌다」고 적었다. **그게 안 됐다.**
@@ -1161,13 +1231,13 @@ DataGrist.styles = [
          * 어두운 팔레트는 lowest(30 34 40)가 low(26 30 35)보다 **밝다** — 밝은 모드의 순서를 그대로
          * 두었다. 줄은 lowest 를 쓰므로, low 를 얹으면 4단 어두워지는 것이 전부였다.
          *
-         *   [재봤음] 2026-09-04 · operato-plant 인원 화면(어두운 모드)
+         *   [확인함] 2026-09-04 · operato-plant 인원 화면(어두운 모드)
          *     줄 rgb(30 34 40) · 띠 rgb(26 30 35) → 대비 1.048   보이지 않는다
          *
          * 그래서 **줄 자신의 색에서 만든다.** 그 줄의 잉크를 5% 섞는다 — 밝은 줄에서는 눌리고 어두운
          * 줄에서는 들린다. 앱의 사다리 순서에 기대지 않으므로 어느 팔레트에서도 같은 방향이다.
          *
-         *   [재봤음] 5% 로 재 본 대비
+         *   [확인함] 5% 로 재 본 대비
          *     밝은 모드  255 → 243   1.11   바깥(240)보다는 여전히 밝다
          *     어두운 모드  30 →  40   1.14
          *
@@ -1258,6 +1328,9 @@ DataGrist.styles = [
 __decorate([
     property()
 ], DataGrist.prototype, "mode", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' })
+], DataGrist.prototype, "gridLabel", void 0);
 __decorate([
     property()
 ], DataGrist.prototype, "config", void 0);
@@ -1303,6 +1376,9 @@ __decorate([
 __decorate([
     state()
 ], DataGrist.prototype, "_showSpinner", void 0);
+__decorate([
+    state()
+], DataGrist.prototype, "_fetched", void 0);
 __decorate([
     query('slot[name=headroom]')
 ], DataGrist.prototype, "head", void 0);