@wipco/sdui 0.20.0 → 0.21.0

package/dist/chunk-K3JBSWFI.js

@@ -0,0 +1,133 @@
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var RECORD_SHEET_CSS = `
+.erp-recsheet__scroll{overflow-x:auto;min-width:0}
+.erp-recsheet{width:100%;min-width:44rem;border-collapse:collapse;table-layout:fixed;font-size:var(--wp-size-sm)}
+.erp-recsheet td{height:var(--wp-row-h-dense);border:var(--wp-border-w) solid var(--wp-border-default);padding:var(--wp-space-1) var(--wp-space-2);color:var(--wp-text-default);vertical-align:middle;line-height:var(--wp-leading-snug);overflow-wrap:anywhere}
+.erp-recsheet td.erp-recsheet__title{background:var(--wp-surface-inverse);color:var(--wp-text-inverse);text-align:center;font-size:var(--wp-size-lg);font-weight:var(--wp-weight-semibold);letter-spacing:var(--wp-tracking-heading);padding:var(--wp-space-3) var(--wp-space-2)}
+.erp-recsheet td.erp-recsheet__label{background:var(--wp-surface-sunken);color:var(--wp-text-subtle);font-size:var(--wp-size-xs);font-weight:var(--wp-weight-semibold);text-align:center;white-space:nowrap}
+.erp-recsheet td.erp-recsheet__section{background:var(--wp-surface-brand-tint);border-top:var(--wp-border-w-strong) solid var(--wp-border-brand);color:var(--wp-text-brand);font-size:var(--wp-size-xs);font-weight:var(--wp-weight-semibold);letter-spacing:var(--wp-tracking-heading)}
+.erp-recsheet tr.erp-recsheet__gap td{border:0;padding:0;height:var(--wp-space-3)}
+.erp-recsheet td.erp-recsheet__mono{font-family:var(--wp-font-mono);font-size:var(--wp-size-xs)}
+.erp-recsheet td.erp-recsheet__photo{background:var(--wp-surface-sunken);padding:var(--wp-space-2);text-align:center}
+.erp-recsheet__img{display:block;width:100%;height:11rem;object-fit:cover;border-radius:var(--wp-radius-sm)}
+.erp-recsheet__noimg{display:flex;align-items:center;justify-content:center;width:100%;height:11rem;border:var(--wp-border-w) dashed var(--wp-border-default);border-radius:var(--wp-radius-sm);color:var(--wp-text-disabled);font-size:var(--wp-size-xs)}
+.erp-recsheet__note{margin:var(--wp-space-2) 0 0;text-align:right;color:var(--wp-text-subtle);font-size:var(--wp-size-xs)}
+@media print{
+  .erp-recsheet__scroll{overflow-x:visible}
+  .erp-recsheet{min-width:0}
+  .erp-recsheet tr{break-inside:avoid}
+}
+`;
+function RecordSheetStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-recsheet", precedence: "medium", children: RECORD_SHEET_CSS });
+}
+function gridColumns(columns) {
+  if (typeof columns !== "number" || !Number.isFinite(columns)) return 24;
+  return Math.min(60, Math.max(1, Math.floor(columns)));
+}
+function cellClass(cell) {
+  const classes = [];
+  if (cell.kind === "label") classes.push("erp-recsheet__label");
+  else if (cell.kind === "section") classes.push("erp-recsheet__section");
+  else if (cell.kind === "photo") classes.push("erp-recsheet__photo");
+  if (cell.mono) classes.push("erp-recsheet__mono");
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+function isBlank(value) {
+  return value === null || value === void 0 || value === "";
+}
+function pickValue(cell, item) {
+  if (!item || typeof item !== "object") return void 0;
+  const row = item;
+  if (cell.fields && cell.fields.length > 0) {
+    const parts = cell.fields.map((name) => isBlank(row[name]) ? "" : String(row[name]));
+    if (parts.every((part) => part === "")) return void 0;
+    return parts.join(cell.separator ?? " ~ ");
+  }
+  if (cell.field) return row[cell.field];
+  return void 0;
+}
+function PhotoCell({ src, alt }) {
+  const [failed, setFailed] = useState(false);
+  const label = alt ?? "\uC0AC\uC9C4";
+  if (!src || failed) return /* @__PURE__ */ jsx("span", { className: "erp-recsheet__noimg", children: label });
+  return /* @__PURE__ */ jsx("img", { className: "erp-recsheet__img", src, alt: label, onError: () => setFailed(true) });
+}
+function cellContent(cell, item, repeated) {
+  if (cell.kind === "photo") return /* @__PURE__ */ jsx(PhotoCell, { src: cell.src, alt: cell.alt });
+  if (!repeated) {
+    if (!isBlank(cell.text)) return cell.text;
+    if (cell.kind === "label" || cell.kind === "section") return null;
+    return cell.placeholder ?? "-";
+  }
+  const value = pickValue(cell, item);
+  if (!isBlank(value)) return value;
+  return item ? cell.placeholder ?? "-" : null;
+}
+function renderCells(cells, items, keyPrefix) {
+  return cells.map((cell, index) => {
+    const item = items ? items[cell.source ?? 0] ?? null : null;
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: cellClass(cell),
+        colSpan: cell.span && cell.span > 1 ? cell.span : void 0,
+        rowSpan: cell.rowSpan && cell.rowSpan > 1 ? cell.rowSpan : void 0,
+        style: cell.align && cell.align !== "left" ? { textAlign: cell.align } : void 0,
+        children: cellContent(cell, item, items !== null)
+      },
+      `${keyPrefix}-${index}`
+    );
+  });
+}
+function repeatLength(sources, minRows) {
+  const longest = sources.reduce((max, source) => Math.max(max, source.length), 0);
+  return Math.max(longest, Math.max(0, Math.floor(minRows ?? 0)));
+}
+function RecordSheetImpl({ columns, title, rows, note }) {
+  const width = gridColumns(columns);
+  const list = Array.isArray(rows) ? rows : [];
+  const body = [];
+  list.forEach((row, rowIndex) => {
+    if (row?.gap) {
+      body.push(
+        /* @__PURE__ */ jsx("tr", { className: "erp-recsheet__gap", children: /* @__PURE__ */ jsx("td", { colSpan: width }) }, `gap-${rowIndex}`)
+      );
+      return;
+    }
+    const cells = Array.isArray(row?.cells) ? row.cells : [];
+    if (cells.length === 0) return;
+    if (Array.isArray(row.repeat)) {
+      const sources = row.repeat.map((source) => Array.isArray(source) ? source : []);
+      const count = repeatLength(sources, row.minRows);
+      for (let line = 0; line < count; line += 1) {
+        body.push(
+          /* @__PURE__ */ jsx("tr", { children: renderCells(
+            cells,
+            sources.map((source) => source[line] ?? null),
+            `rep-${rowIndex}-${line}`
+          ) }, `rep-${rowIndex}-${line}`)
+        );
+      }
+      return;
+    }
+    body.push(/* @__PURE__ */ jsx("tr", { children: renderCells(cells, null, `row-${rowIndex}`) }, `row-${rowIndex}`));
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "erp-recsheet__scroll", children: [
+    /* @__PURE__ */ jsx(RecordSheetStyles, {}),
+    /* @__PURE__ */ jsxs("table", { className: "erp-recsheet", children: [
+      /* @__PURE__ */ jsx("colgroup", { children: Array.from({ length: width }, (_, index) => /* @__PURE__ */ jsx("col", { style: { width: `${100 / width}%` } }, index)) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        title ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-recsheet__title", colSpan: width, children: title }) }) : null,
+        body
+      ] })
+    ] }),
+    note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
+  ] });
+}
+var RecordSheet = boxed(RecordSheetImpl, "RecordSheet");
+
+export { RecordSheet };

package/dist/meta.d.ts

@@ -442,6 +442,7 @@ declare const OrgChartMeta: SduiComponentMeta;
 declare const SummaryTableMeta: SduiComponentMeta;
 declare const TreeViewMeta: SduiComponentMeta;
 declare const PrintSheetMeta: SduiComponentMeta;
+declare const RecordSheetMeta: SduiComponentMeta;
 declare const SecureScreenMeta: SduiComponentMeta;
 declare const StripMeta: SduiComponentMeta;
 /**
@@ -467,6 +468,7 @@ declare const widgetComponentMeta: {
     OrgChart: SduiComponentMeta;
     PeriodFilter: SduiComponentMeta;
     PrintSheet: SduiComponentMeta;
+    RecordSheet: SduiComponentMeta;
     SearchableMultiPicker: SduiComponentMeta;
     SecureScreen: SduiComponentMeta;
     StackedMeter: SduiComponentMeta;
@@ -557,11 +559,11 @@ declare const SDUI_CATEGORIES: ReadonlyArray<{
     label: string;
 }>;
 /**
- * 라이브러리가 아는 어휘 전체 — 기본 41 + rich 2 + 위젯 21 + DS 6 + 렌더러 내장 2 = 72종.
+ * 라이브러리가 아는 어휘 전체 — 기본 42 + rich 2 + 위젯 22 + DS 6 + 렌더러 내장 2 = 74종.
  * 편집기처럼 어휘 전부를 다뤄야 하는 쪽에서 쓴다.
  *
  * **레지스트리와 일대일이 아니다.** `defaultRegistry`에 없는 것도 들어 있다 —
- * rich 2종, 위젯 21종, DS 6종은 소비자가 `createRegistry`로 직접 얹는 어휘라서
+ * rich 2종, 위젯 22종, DS 6종은 소비자가 `createRegistry`로 직접 얹는 어휘라서
  * 여기 있다고 곧바로 렌더되지는 않는다. 이 목록은 "빌더가 프롭을 그릴 줄 아는 이름"이지
  * "지금 렌더할 수 있는 이름"이 아니다.
  *
@@ -586,4 +588,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RecordSheetMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/meta.js

@@ -4478,6 +4478,146 @@ var PrintSheetMeta = {
   },
   resize: { kind: "none" }
 };
+var RecordSheetMeta = {
+  name: "RecordSheet",
+  label: "\uC591\uC2DD \uD45C",
+  category: "data",
+  icon: "layout-grid",
+  description: "\uCE78\uC744 \uBCD1\uD569\uD574 \uC4F0\uB294 \uC885\uC774 \uC11C\uC2DD\uC6A9 \uD45C(\uC778\uC0AC\uAE30\uB85D\uCE74\uB4DC \uB4F1). \uACA9\uC790 \uC5F4 \uC218\uB97C \uC815\uD558\uACE0 \uCE78\uB9C8\uB2E4 \uBA87 \uCE78\uC744 \uCC28\uC9C0\uD560\uC9C0 \uC801\uB294\uB2E4 \u2014 \uAD6C\uD68D\uC774 \uB2EC\uB77C\uB3C4 \uC138\uB85C\uC120\uC774 \uD558\uB098\uB85C \uC774\uC5B4\uC9C4\uB2E4.",
+  props: [
+    {
+      name: "columns",
+      kind: "number",
+      label: "\uACA9\uC790 \uC5F4 \uC218",
+      default: 24,
+      description: "\uBAA8\uB4E0 \uCE78 \uBCD1\uD569(span)\uC758 \uAE30\uC900. 24\uBA74 2\xB73\xB74\xB76\xB78\xB712 \uB4F1\uBD84\uC774 \uB531 \uB5A8\uC5B4\uC9C4\uB2E4.",
+      group: "layout"
+    },
+    { name: "title", kind: "string", label: "\uD45C \uC81C\uBAA9 \uC904", bindable: true, group: "content" },
+    {
+      name: "rows",
+      kind: "array",
+      label: "\uC904",
+      required: true,
+      group: "data",
+      description: "\uC704\uC5D0\uC11C \uC544\uB798\uB85C \uADF8\uB9B4 \uC904 \uBAA9\uB85D. \uAC01 \uC904\uC740 \uCE78 \uBAA9\uB85D\uC774\uAC70\uB098, \uBC30\uC5F4\uC744 \uB418\uD480\uC774\uD558\uB294 \uC904\uC774\uB2E4.",
+      item: [
+        {
+          name: "gap",
+          kind: "boolean",
+          label: "\uBE48 \uC904",
+          description: "\uD14C\uB450\uB9AC \uC5C6\uB294 \uC5EC\uBC31 \uC904 \u2014 \uAD6C\uD68D \uC0AC\uC774\uB97C \uB744\uC6B4\uB2E4. \uCF1C\uBA74 \uB098\uBA38\uC9C0\uB294 \uBB34\uC2DC\uB41C\uB2E4."
+        },
+        {
+          name: "repeat",
+          kind: "binding",
+          label: "\uB418\uD480\uC774\uD560 \uBC30\uC5F4\uB4E4",
+          bindable: true,
+          description: "\uBC30\uC5F4\uC758 \uBC30\uC5F4. \uC5EC\uB7FF \uC8FC\uBA74 \uB098\uB780\uD788 \uB193\uACE0 \uAC00\uC7A5 \uAE34 \uAC83\uC5D0 \uB9DE\uCD98\uB2E4 \u2014 \uC67C\uCABD \uD559\uB825\xB7\uC624\uB978\uCABD \uC790\uACA9\uCC98\uB7FC \uAE38\uC774\uAC00 \uB2E4\uB978 \uBAA9\uB85D\uC744 \uD55C \uACA9\uC790\uC5D0 \uB2F4\uB294\uB2E4."
+        },
+        {
+          name: "minRows",
+          kind: "number",
+          label: "\uCD5C\uC18C \uC904 \uC218",
+          description: "\uAC12\uC774 \uBAA8\uC790\uB77C\uBA74 \uBE48 \uC904\uB85C \uCC44\uC6CC \uC591\uC2DD \uB192\uC774\uB97C \uC9C0\uD0A8\uB2E4."
+        },
+        {
+          name: "cells",
+          kind: "array",
+          label: "\uCE78",
+          item: [
+            { name: "span", kind: "number", label: "\uC5F4 \uBCD1\uD569", default: 1 },
+            { name: "rowSpan", kind: "number", label: "\uD589 \uBCD1\uD569", default: 1 },
+            {
+              name: "kind",
+              kind: "enum",
+              label: "\uCE78 \uC885\uB958",
+              default: "value",
+              options: [
+                { value: "value", label: "\uAC12" },
+                { value: "label", label: "\uBA38\uB9AC\uCE78", description: "\uD68C\uC0C9 \uBC30\uACBD + \uAC00\uC6B4\uB370 \uC815\uB82C" },
+                { value: "section", label: "\uAD6C\uD68D \uC81C\uBAA9", description: "\uAD6C\uD68D \uC704\uC5D0 \uAD75\uC740 \uC120\uC774 \uBD99\uB294\uB2E4" },
+                { value: "photo", label: "\uC0AC\uC9C4", description: "src\uC758 \uC0AC\uC9C4\uC744 \uCC44\uC6B4\uB2E4. \uC5C6\uC73C\uBA74 \uC790\uB9AC \uC0C1\uC790." }
+              ]
+            },
+            { name: "text", kind: "node", label: "\uACE0\uC815 \uAC12", bindable: true },
+            { name: "source", kind: "number", label: "\uBC30\uC5F4 \uBC88\uD638", default: 0, description: "\uB418\uD480\uC774 \uC904\uC5D0\uC11C \uBA87 \uBC88\uC9F8 \uBC30\uC5F4\uC744 \uBCFC\uC9C0." },
+            { name: "field", kind: "string", label: "\uD56D\uBAA9 \uD544\uB4DC" },
+            {
+              name: "fields",
+              kind: "array",
+              label: "\uC774\uC5B4 \uBD99\uC77C \uD544\uB4DC\uB4E4",
+              item: [],
+              itemKind: "string",
+              description: "\uAE30\uAC04 \uCE78(\uC2DC\uC791 ~ \uC885\uB8CC)\uCC98\uB7FC \uB450 \uD544\uB4DC\uB97C \uD55C \uCE78\uC5D0 \uB2F4\uC744 \uB54C."
+            },
+            { name: "separator", kind: "string", label: "\uC774\uC74C\uB9D0", default: " ~ " },
+            {
+              name: "align",
+              kind: "enum",
+              label: "\uC815\uB82C",
+              options: [
+                { value: "left", label: "\uC67C\uCABD" },
+                { value: "center", label: "\uAC00\uC6B4\uB370" },
+                { value: "right", label: "\uC624\uB978\uCABD" }
+              ]
+            },
+            { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" },
+            { name: "placeholder", kind: "string", label: "\uBE48 \uAC12 \uD45C\uC2DC", default: "-" },
+            { name: "src", kind: "string", label: "\uC0AC\uC9C4 \uC8FC\uC18C", bindable: true },
+            { name: "alt", kind: "string", label: "\uC0AC\uC9C4 \uB300\uCCB4 \uAE00\uC790", default: "\uC0AC\uC9C4" }
+          ]
+        }
+      ]
+    },
+    {
+      name: "note",
+      kind: "string",
+      label: "\uD45C \uC544\uB798 \uC8FC\uC11D",
+      bindable: true,
+      group: "content",
+      description: "\uC624\uB978\uCABD \uC544\uB798\uC5D0 \uC791\uAC8C \uBD99\uB294 \uD55C \uC904(\uCD9C\uB825\uC77C \uB4F1)."
+    }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  preset: {
+    component: "RecordSheet",
+    props: {
+      columns: 12,
+      title: "\uC0AC\uC6D0 \uC778\uC0AC\uAE30\uB85D\uCE74\uB4DC",
+      rows: [
+        {
+          cells: [
+            { kind: "label", span: 2, text: "\uC131\uBA85" },
+            { span: 4, text: "\uD64D\uAE38\uB3D9" },
+            { kind: "label", span: 2, text: "\uC0AC\uBC88" },
+            { span: 4, text: "140", mono: true }
+          ]
+        },
+        { gap: true },
+        { cells: [{ kind: "section", span: 12, text: "1) \uD559\uC704 \uBC0F \uD559\uB825\uC0AC\uD56D" }] },
+        {
+          cells: [
+            { kind: "label", span: 5, text: "\uD559\uAD50\uBA85" },
+            { kind: "label", span: 3, text: "\uD559\uC704" },
+            { kind: "label", span: 4, text: "\uC878\uC5C5\uC77C" }
+          ]
+        },
+        {
+          repeat: [[{ institution: "\uC704\uD504\uCF54\uB300\uD559\uAD50", degree: "\uD559\uC0AC", end_date: "2018-02-09" }]],
+          minRows: 2,
+          cells: [
+            { span: 5, field: "institution" },
+            { span: 3, field: "degree", align: "center" },
+            { span: 4, field: "end_date", align: "center", mono: true }
+          ]
+        }
+      ]
+    }
+  },
+  resize: { kind: "none" }
+};
 var SecureScreenMeta = {
   name: "SecureScreen",
   label: "\uD654\uBA74 \uBCF4\uD638",
@@ -4576,6 +4716,7 @@ var widgetComponentMeta = {
   OrgChart: OrgChartMeta,
   PeriodFilter: PeriodFilterMeta,
   PrintSheet: PrintSheetMeta,
+  RecordSheet: RecordSheetMeta,
   SearchableMultiPicker: SearchableMultiPickerMeta,
   SecureScreen: SecureScreenMeta,
   StackedMeter: StackedMeterMeta,
@@ -4620,4 +4761,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RecordSheetMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/widgets/RecordSheet.d.ts

@@ -0,0 +1,59 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
+import React__default from 'react';
+
+/** 칸의 생김새 — 값칸(기본)·머리칸·구획 제목·사진칸 */
+type RecordSheetCellKind = 'value' | 'label' | 'section' | 'photo';
+interface RecordSheetCell {
+    /** 격자에서 차지할 열 수. 기본 1 */
+    span?: number;
+    /** 아래로 병합할 줄 수(사진 칸 등). 기본 1 */
+    rowSpan?: number;
+    kind?: RecordSheetCellKind;
+    /** 고정 칸의 값. 되풀이 줄에서는 `field`/`fields`가 우선한다. */
+    text?: React__default.ReactNode;
+    /** 되풀이 줄에서 볼 배열 번호(`repeat`의 인덱스). 기본 0 */
+    source?: number;
+    /** 되풀이 항목에서 꺼낼 필드 */
+    field?: string;
+    /** 여러 필드를 이어 붙인다 — 기간 칸(시작 ~ 종료) 등. `field`보다 우선한다. */
+    fields?: string[];
+    /** `fields` 사이에 넣을 글자. 기본 ' ~ ' */
+    separator?: string;
+    align?: 'left' | 'center' | 'right';
+    /** 고정폭 글꼴 — 날짜·번호 칸 */
+    mono?: boolean;
+    /** 값이 비었을 때 대신 쓸 글자. 기본 '-'. 되풀이의 **빈 줄**은 언제나 빈칸이다. */
+    placeholder?: string;
+    /** 사진 칸(kind:'photo')의 이미지 주소 */
+    src?: string;
+    /** 사진이 없거나 못 불러올 때 상자에 쓸 글자. 기본 '사진' */
+    alt?: string;
+}
+interface RecordSheetRow {
+    /** 테두리 없는 빈 줄 — 구획 사이를 띄운다. 주면 나머지는 무시된다. */
+    gap?: boolean;
+    /**
+     * 이 줄을 배열만큼 되풀이한다. 배열을 여럿 주면 나란히 놓고 가장 긴 것에 맞춘다.
+     * 칸은 `source`로 몇 번째 배열을 볼지 고른다.
+     */
+    repeat?: Array<unknown>;
+    /** 되풀이의 최소 줄 수 — 모자라면 빈 줄로 채운다 */
+    minRows?: number;
+    cells?: RecordSheetCell[];
+}
+interface RecordSheetProps {
+    /** 격자 열 수 — 모든 `span`의 기준. 기본 24 */
+    columns?: number;
+    /** 표 맨 위 제목 줄(반전 배경). 없으면 그리지 않는다. */
+    title?: string;
+    rows: RecordSheetRow[];
+    /** 표 아래 오른쪽에 붙는 주석 한 줄(예: 출력일) */
+    note?: string;
+}
+/**
+ * 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자식 축(`grow`·`width` …)이
+ * 이 컴포넌트에서도 동작하게 하는 유일한 통로다. 까닭은 {@link ../boxed.tsx}에 있다.
+ */
+declare const RecordSheet: React__default.FC<RecordSheetProps & SduiBoxProps>;
+
+export { RecordSheet, type RecordSheetCell, type RecordSheetCellKind, type RecordSheetProps, type RecordSheetRow };

package/dist/widgets/RecordSheet.js

@@ -0,0 +1,2 @@
+export { RecordSheet } from '../chunk-K3JBSWFI.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.d.ts

@@ -16,6 +16,8 @@ import { SecureScreenProps } from './SecureScreen.js';
 export { SecureScreen } from './SecureScreen.js';
 import { SearchableMultiPickerProps } from './SearchableMultiPicker.js';
 export { MultiPickerOption, SearchableMultiPicker } from './SearchableMultiPicker.js';
+import { RecordSheetProps } from './RecordSheet.js';
+export { RecordSheet, RecordSheetCell, RecordSheetCellKind, RecordSheetRow } from './RecordSheet.js';
 import { PrintSheetProps } from './PrintSheet.js';
 export { PrintSheet } from './PrintSheet.js';
 import { PeriodFilterProps } from './PeriodFilter.js';
@@ -61,6 +63,7 @@ declare const widgetComponents: {
     OrgChart: React.FC<OrgChartProps & SduiBoxProps>;
     PeriodFilter: React.FC<PeriodFilterProps & SduiBoxProps>;
     PrintSheet: React.FC<PrintSheetProps & SduiBoxProps>;
+    RecordSheet: React.FC<RecordSheetProps & SduiBoxProps>;
     SearchableMultiPicker: React.FC<SearchableMultiPickerProps & SduiBoxProps>;
     SecureScreen: React.FC<SecureScreenProps & SduiBoxProps>;
     StackedMeter: React.FC<StackedMeterProps & SduiBoxProps>;
@@ -74,4 +77,4 @@ declare const widgetComponents: {
 /** 위젯 어휘의 컴포넌트 이름 union — 메타데이터 대조에 쓴다(`@wipco/sdui/meta`). */
 type SduiWidgetComponentName = keyof typeof widgetComponents;
 
-export { ColumnBoardProps, DiffViewProps, DisclosureProps, EventCalendarProps, ImageLightboxProps, InlineEditProps, JsonFieldProps, LiveClockProps, OrgChartProps, PeriodFilterProps, PrintSheetProps, type SduiWidgetComponentName, SearchableMultiPickerProps, SecureScreenProps, StackedMeterProps, StripProps, SummaryTableProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };
+export { ColumnBoardProps, DiffViewProps, DisclosureProps, EventCalendarProps, ImageLightboxProps, InlineEditProps, JsonFieldProps, LiveClockProps, OrgChartProps, PeriodFilterProps, PrintSheetProps, RecordSheetProps, type SduiWidgetComponentName, SearchableMultiPickerProps, SecureScreenProps, StackedMeterProps, StripProps, SummaryTableProps, TagMultiSelectProps, TimelineProps, TreePickerProps, TreeViewProps, widgetComponents };

package/dist/widgets/index.js

@@ -1,3 +1,9 @@
+import { TreePicker } from '../chunk-EQW24SJC.js';
+export { TreePicker } from '../chunk-EQW24SJC.js';
+import { TreeView } from '../chunk-IDUN2ESE.js';
+export { TreeView, buildTreeNodes } from '../chunk-IDUN2ESE.js';
+import { RecordSheet } from '../chunk-K3JBSWFI.js';
+export { RecordSheet } from '../chunk-K3JBSWFI.js';
 import { SearchableMultiPicker } from '../chunk-N5IATDUF.js';
 export { SearchableMultiPicker } from '../chunk-N5IATDUF.js';
 import { SecureScreen } from '../chunk-IIRENCDS.js';
@@ -12,10 +18,6 @@ import { TagMultiSelect } from '../chunk-QDEZXA34.js';
 export { TagMultiSelect } from '../chunk-QDEZXA34.js';
 import { Timeline } from '../chunk-EFYEOT47.js';
 export { Timeline } from '../chunk-EFYEOT47.js';
-import { TreePicker } from '../chunk-EQW24SJC.js';
-export { TreePicker } from '../chunk-EQW24SJC.js';
-import { TreeView } from '../chunk-IDUN2ESE.js';
-export { TreeView, buildTreeNodes } from '../chunk-IDUN2ESE.js';
 import { EventCalendar } from '../chunk-C3JY6GA3.js';
 export { EventCalendar } from '../chunk-C3JY6GA3.js';
 import { ImageLightbox } from '../chunk-XPBZMECW.js';
@@ -58,6 +60,7 @@ var widgetComponents = {
   OrgChart,
   PeriodFilter,
   PrintSheet,
+  RecordSheet,
   SearchableMultiPicker,
   SecureScreen,
   StackedMeter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",
@@ -84,6 +84,10 @@
       "types": "./dist/widgets/PrintSheet.d.ts",
       "default": "./dist/widgets/PrintSheet.js"
     },
+    "./widgets/RecordSheet": {
+      "types": "./dist/widgets/RecordSheet.d.ts",
+      "default": "./dist/widgets/RecordSheet.js"
+    },
     "./widgets/SearchableMultiPicker": {
       "types": "./dist/widgets/SearchableMultiPicker.d.ts",
       "default": "./dist/widgets/SearchableMultiPicker.js"