@iyulab/modern-app 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.13.0] - 2026-08-08
+
+### Added
+
+- **`u-info-field` accepts `format` (`'number' | 'currency' | 'date'`) and `currency`.**
+  When set, the value renders through `@iyulab/components`' `formatNumber`/`formatCurrency`/
+  `formatDate` instead of a plain `String(value)`, and `format="number"`/`"currency"` implies
+  the existing `numeric` (right-aligned, tabular-nums) styling automatically. `currency` has
+  no default — omitting it while `format="currency"` degrades to plain number formatting
+  rather than throwing. Existing usage without `format` is unaffected.
+
+### Changed
+
+- **`@iyulab/components` dependency floor raised to `^1.27.0`** (the feature above needs
+  `formatNumber`/`formatCurrency`/`formatDate`, added in that release).
+
 ## [0.12.0] - 2026-08-07
 
 ### Added

package/dist/components/InfoField.d.ts

@@ -1,5 +1,6 @@
 import { StyledElement } from '../internals/StyledElement.js';
 type ElementParts = 'host' | 'label' | 'value';
+export type InfoFieldFormat = 'number' | 'currency' | 'date';
 /** 값이 "아직 없음"인가 — `0` 과 `false` 는 **값이다**. */
 export declare function isBlank(v: unknown): boolean;
 /**
@@ -16,6 +17,7 @@ export declare function isBlank(v: unknown): boolean;
  * ```html
  * <u-info-field label="부수" .value=${order.quantity} numeric></u-info-field>
  * <u-info-field label="거래처">동서인쇄</u-info-field>   <!-- 슬롯이 value 를 이긴다 -->
+ * <u-info-field label="합계" format="currency" currency="KRW" .value=${order.total}></u-info-field>
  * ```
  */
 export declare class InfoField extends StyledElement<ElementParts> {
@@ -27,7 +29,8 @@ export declare class InfoField extends StyledElement<ElementParts> {
      * ⚠`0`·`false` 는 **대체되지 않는다** — 값이기 때문이다.
      * 속성(`value="…"`)과 프로퍼티(`.value=`) 둘 다 받는다 — HTML 속성은 항상 문자열이라
      * `type: String` 변환기가 붙어도 `.value=${order.quantity}` 같은 비-문자열 프로퍼티
-     * 바인딩은 그대로 통과한다(변환기는 속성 파싱에만 관여한다). 렌더는 항상 `String(value)`.
+     * 바인딩은 그대로 통과한다(변환기는 속성 파싱에만 관여한다). 렌더는 `format` 이 없으면
+     * 항상 `String(value)`.
      */
     value?: unknown;
     /** "아직 없음"을 나타낼 문구. */
@@ -35,9 +38,21 @@ export declare class InfoField extends StyledElement<ElementParts> {
     /**
      * 숫자 값 — 우정렬 + 고정폭 숫자(`tabular-nums`).
      * ★자릿수가 세로로 맞아야 크기 비교가 눈으로 된다. LOB 화면은 금액·수량이 절반이다.
+     * `format` 이 `'number'`/`'currency'` 면 이 정렬이 자동으로 함의된다 — 따로 켤 필요 없다.
      */
     numeric: boolean;
+    /**
+     * Renders the value through `@iyulab/components`' `formatNumber`/`formatCurrency`/
+     * `formatDate`. When unset (default), falls back to plain `String(value)` as before.
+     */
+    format?: InfoFieldFormat;
+    /**
+     * Currency code to use when `format="currency"` (e.g. `'KRW'`). **No default** — if
+     * omitted, degrades to plain number formatting without a currency symbol (does not throw).
+     */
+    currency?: string;
     private get hasSlotted();
+    private formatValue;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/InfoField.js

@@ -4,11 +4,12 @@ import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
+import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components";
 //#region src/components/InfoField.ts
-function s(e) {
+function u(e) {
 	return e == null || typeof e == "string" && e.trim() === "";
 }
-var c = class extends n {
+var d = class extends n {
 	constructor(...e) {
 		super(...e), this.label = "", this.blank = "—", this.numeric = !1;
 	}
@@ -18,16 +19,19 @@ var c = class extends n {
 	get hasSlotted() {
 		return this.childNodes.length > 0 && [...this.childNodes].some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
 	}
+	formatValue() {
+		return this.format === "currency" ? this.currency ? s(Number(this.value), this.currency) : l(Number(this.value)) : this.format === "number" ? l(Number(this.value)) : this.format === "date" ? c(this.value) : String(this.value);
+	}
 	render() {
-		let e = !this.hasSlotted && s(this.value);
+		let e = !this.hasSlotted && u(this.value), t = this.numeric || this.format === "number" || this.format === "currency";
 		return i`
       <div class="label" part="label">${this.label}</div>
-      <div class="value ${this.numeric ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
-        ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : String(this.value)}
+      <div class="value ${t ? "numeric" : ""} ${e ? "blank" : ""}" part="value">
+        ${this.hasSlotted ? i`<slot></slot>` : e ? this.blank : this.formatValue()}
       </div>
     `;
 	}
 };
-t([o({ type: String }), e("design:type", Object)], c.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], c.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], c.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], c.prototype, "numeric", void 0), c = t([a("u-info-field")], c);
+t([o({ type: String }), e("design:type", Object)], d.prototype, "label", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "value", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "blank", void 0), t([o({ type: Boolean }), e("design:type", Object)], d.prototype, "numeric", void 0), t([o({ type: String }), e("design:type", Object)], d.prototype, "format", void 0), t([o({ type: String }), e("design:type", String)], d.prototype, "currency", void 0), d = t([a("u-info-field")], d);
 //#endregion
-export { c as InfoField, s as isBlank };
+export { d as InfoField, u as isBlank };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -53,7 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.24.0",
+    "@iyulab/components": "^1.27.0",
     "@iyulab/router": "^0.11.0",
     "i18next": "^26.3.6",
     "lit": "^3.3.3"

package/skills/modern-app/references/components/info-field.md

@@ -34,10 +34,16 @@ and those are different states of the business. So the component owns the rule.
 | `value` | `unknown` | — | | Value; property only (`attribute: false`) |
 | `blank` | `string` | `'—'` | | Placeholder for null/undefined/empty — **not** for `0` or `false` |
 | `numeric` | `boolean` | `false` | | Right-align with tabular figures so digits line up vertically |
+| `format` | `'number'\|'currency'\|'date'` | — | | Renders `value` through `@iyulab/components`' `formatNumber`/`formatCurrency`/`formatDate`; unset falls back to plain `String(value)` |
+| `currency` | `string` | — | | Currency code for `format="currency"` (e.g. `'KRW'`); omitted degrades to plain number formatting, does not throw |
 
 ⚠ `numeric` earns its keep in **tables**, where columns of figures are compared by eye. On a
 lone field it just pushes the value away from its label.
 
+```html
+<u-info-field label="Total" format="currency" currency="KRW" .value=${order.total}></u-info-field>
+```
+
 ## CSS Parts
 
 | Part | Description |