@iyulab/data-components 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.7.0] - 2026-07-19
+
+### Changed
+- **이 패키지의 eslint 가 실제로 동작하기 시작했다.** `eslint.config.js` 의 두 결함 — (1) `files: ['src/**/*']` 가 ESLint 9 에서 universal 패턴이라 `.ts` 를 opt-in 하지 못함, (2) 배열 프리셋(`tseslint.configs.recommended`)을 객체 스프레드해 프리셋이 무력화됨 — 을 수정했다. `build` 스크립트의 `eslint &&` 게이트는 매칭 파일이 0개라 항상 통과하고 있었다. 복구 후 실측 결과 **error 0건** — 이 패키지의 소스는 이미 깨끗했다.
+- `npm run lint` / `npm run lint:fix` 스크립트 추가.
+- **`UDataView` 의 열린 타입 의도를 명시** — `items`/`renderCard`/`renderCell` 등에 흩어져 있던 `any` 8곳을 새 `DataItem`(`Record<string, any>`) 타입 한 곳으로 격리했다. 이 컴포넌트는 소비자 도메인 타입을 제한하지 않는 범용 뷰어이므로 열린 타입이 설계 의도이며, 이제 그 의도가 코드에 표현된다. `formatValue` 는 `unknown` 으로 좁혔다. 원시값 배열(`[1, 2, 3]`)을 `items` 로 넘기던 코드는 이제 타입 오류가 날 수 있다.
+
+## [0.6.1] - 2026-07-08
+
+### Fixed
+- `UDataView`: fallback 이 없던 `var(--u-*)` 참조 24개에 컨텍스트별 fallback 을 부여 — `@iyulab/components` 테마 토큰이 정의되지 않은 환경에서 색상이 비어 렌더되던 문제.
+
 ## [0.6.0] - 2026-06-11
 
 ### Added

package/README.md

@@ -124,7 +124,7 @@ const sheet = document.querySelector('u-simple-sheet'); // USimpleSheet | null
 
 - [USimpleSheet](./docs/USimpleSheet.md)
 - [UDataView](./docs/UDataView.md)
-- [URichTable](./docs/URichTable.md)
+- URichTable — 문서 작성 예정([types.ts](./src/components/u-rich-table/types.ts) 참고)
 - [UDataGrid 마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Theming

package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.139.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -6,4 +6,4 @@ function __decorate(decorators, target, key, desc) {
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
 //#endregion
-export { __decorate };
+export { __decorate as default };

package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.139.0}/helpers/esm/decorateMetadata.js

@@ -1,6 +1,6 @@
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-export { __decorateMetadata };
+export { __decorateMetadata as default };

package/dist/components/data-view/UDataView.d.ts

@@ -1,6 +1,14 @@
 import { TemplateResult } from 'lit';
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
 export type ViewMode = 'grid' | 'list' | 'table';
+/**
+ * UDataView 가 표시하는 임의의 데이터 레코드.
+ *
+ * 이 컴포넌트는 소비자의 도메인 타입을 제한하지 않는 범용 뷰어이므로 열린
+ * 타입이 설계 의도다. `any` 를 컴포넌트 전역에 흩뿌리는 대신 여기 한 곳으로
+ * 격리해 의도를 명시한다.
+ */
+export type DataItem = Record<string, any>;
 export interface DataColumn {
     key: string;
     label?: string;
@@ -13,7 +21,7 @@ export interface DataColumn {
 export declare class UDataView extends UElement {
     static styles: import('lit').CSSResultGroup[];
     /** 표시할 데이터 배열 */
-    items: any[];
+    items: DataItem[];
     /** 현재 뷰 모드 */
     mode: ViewMode;
     /** 표시할 컬럼 설정 (미지정시 자동 감지) */
@@ -23,9 +31,9 @@ export declare class UDataView extends UElement {
     /** 아이템 간격 */
     gap: string;
     /** 커스텀 렌더 함수 (grid/list 카드용) */
-    renderCard?: (item: any, index: number) => TemplateResult;
+    renderCard?: (item: DataItem, index: number) => TemplateResult;
     /** 커스텀 셀 렌더 함수 (table용) */
-    renderCell?: (item: any, column: DataColumn, index: number) => TemplateResult | string;
+    renderCell?: (item: DataItem, column: DataColumn, index: number) => TemplateResult | string;
     private selectedIndex;
     render(): TemplateResult<1>;
     private renderToolbar;

package/dist/components/data-view/UDataView.js

@@ -1,6 +1,6 @@
 import { styles } from "./UDataView.styles.js";
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";

package/dist/components/data-view/UDataView.styles.d.ts

@@ -1 +1 @@
-export declare const styles: import('lit').CSSResult;
+export declare const styles: import('lit').CSSResult[];

package/dist/components/data-view/UDataView.styles.js

@@ -1,6 +1,6 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 //#region src/components/data-view/UDataView.styles.ts
-var styles = css`
+var baseStyles = css`
   :host {
     display: block;
     width: 100%;
@@ -19,8 +19,8 @@ var styles = css`
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem;
-    background: var(--u-bg-color);
-    border: 1px solid var(--u-border-color);
+    background: var(--u-bg-color, #fff);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
   }
 
@@ -30,13 +30,13 @@ var styles = css`
   }
 
   .view-toggles u-button[active] {
-    background: var(--u-blue-600);
-    color: var(--u-neutral-0);
+    background: var(--u-blue-600, #1E88E5);
+    color: var(--u-neutral-0, #fff);
   }
 
   .info {
     font-size: 0.875rem;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #64748b);
     font-weight: 500;
   }
 
@@ -56,8 +56,8 @@ var styles = css`
 
   /* Card Styles */
   .card {
-    background: var(--u-bg-color);
-    border: 1px solid var(--u-border-color);
+    background: var(--u-bg-color, #fff);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
     padding: 1.25rem;
     cursor: pointer;
@@ -65,15 +65,15 @@ var styles = css`
   }
 
   .card:hover {
-    border-color: var(--u-blue-600);
-    box-shadow: 0 4px 12px var(--u-shadow-color-weak);
+    border-color: var(--u-blue-600, #1E88E5);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.08));
     transform: translateY(-2px);
   }
 
   .card.selected {
-    border-color: var(--u-blue-600);
-    background: var(--u-bg-color-active);
-    box-shadow: 0 0 0 3px var(--u-blue-200);
+    border-color: var(--u-blue-600, #1E88E5);
+    background: var(--u-bg-color-active, #EEEEEE);
+    box-shadow: 0 0 0 3px var(--u-blue-200, #90CAF9);
   }
 
   .card-content {
@@ -91,14 +91,14 @@ var styles = css`
   .card-field .label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #64748b);
     min-width: 80px;
     flex-shrink: 0;
   }
 
   .card-field .value {
     font-size: 0.9375rem;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #0f172a);
     word-break: break-word;
   }
 
@@ -116,18 +116,18 @@ var styles = css`
   /* Table */
   .table-wrapper {
     overflow-x: auto;
-    border: 1px solid var(--u-border-color);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
   }
 
   table {
     width: 100%;
     border-collapse: collapse;
-    background: var(--u-bg-color);
+    background: var(--u-bg-color, #fff);
   }
 
   thead {
-    background: var(--u-neutral-50);
+    background: var(--u-neutral-50, #f8fafc);
     position: sticky;
     top: 0;
     z-index: 10;
@@ -138,8 +138,8 @@ var styles = css`
     text-align: left;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak);
-    border-bottom: 2px solid var(--u-border-color);
+    color: var(--u-txt-color-weak, #64748b);
+    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
     white-space: nowrap;
   }
 
@@ -149,21 +149,21 @@ var styles = css`
   }
 
   tbody tr:hover {
-    background: var(--u-bg-color-hover);
+    background: var(--u-bg-color-hover, #F5F5F5);
   }
 
   tbody tr.selected {
-    background: var(--u-bg-color-active);
+    background: var(--u-bg-color-active, #EEEEEE);
   }
 
   tbody tr:not(:last-child) {
-    border-bottom: 1px solid var(--u-border-color-weak);
+    border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
   }
 
   td {
     padding: 0.875rem 1rem;
     font-size: 0.9375rem;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #0f172a);
   }
 
   /* Empty State */
@@ -172,9 +172,91 @@ var styles = css`
     align-items: center;
     justify-content: center;
     min-height: 300px;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #64748b);
     font-size: 1rem;
   }
 `;
+var DARK_PREFIXES = [
+	":host([theme=\"dark\"])",
+	":host-context([theme=\"dark\"])",
+	":host-context([data-theme=\"dark\"])"
+];
+var darkRules = (host) => `
+  ${host} .toolbar {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} .view-toggles u-button[active] {
+    background: var(--u-blue-600, #87B8F5);
+    color: var(--u-neutral-0, #000);
+  }
+
+  ${host} .info {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  ${host} .card {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} .card:hover {
+    border-color: var(--u-blue-600, #87B8F5);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.25));
+  }
+
+  ${host} .card.selected {
+    border-color: var(--u-blue-600, #87B8F5);
+    background: var(--u-bg-color-active, #3D3D3D);
+    box-shadow: 0 0 0 3px var(--u-blue-200, #2B4F7E);
+  }
+
+  ${host} .card-field .label {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  ${host} .card-field .value {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  ${host} .table-wrapper {
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} table {
+    background: var(--u-bg-color, #121212);
+  }
+
+  ${host} thead {
+    background: var(--u-neutral-50, #0A0A0A);
+  }
+
+  ${host} th {
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  ${host} tbody tr:hover {
+    background: var(--u-bg-color-hover, #2A2A2A);
+  }
+
+  ${host} tbody tr.selected {
+    background: var(--u-bg-color-active, #3D3D3D);
+  }
+
+  ${host} tbody tr:not(:last-child) {
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
+  ${host} td {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  ${host} .empty {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+`;
+var styles = [baseStyles, unsafeCSS(DARK_PREFIXES.map(darkRules).join("\n"))];
 //#endregion
 export { styles };

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { styles } from "./USimpleSheet.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/u-rich-table/URichTable.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";

package/dist/utilities/shadowDomProtection.js

@@ -97,3 +97,4 @@ function initShadowDomProtection() {
 }
 initShadowDomProtection();
 //#endregion
+export { initShadowDomProtection };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -53,10 +53,12 @@
     "start": "vite",
     "build": "eslint && vite build",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.6",
+    "@iyulab/components": "^1.5.1",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
@@ -74,17 +76,17 @@
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@lit/react": "^1.0.8",
-    "@types/node": "^25.8.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
     "eslint": "^9.39.4",
     "glob": "^13.0.6",
-    "globals": "^17.6.0",
-    "happy-dom": "^20.10.2",
-    "react": "^19.2.6",
+    "globals": "^17.7.0",
+    "happy-dom": "^20.10.6",
+    "react": "^19.2.7",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.59.3",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.8"
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
   }
 }