@wipco/sdui 0.26.0 → 0.28.0

package/dist/chunk-ZDRERW4G.js

@@ -0,0 +1,359 @@
+import { TagMultiSelect } from './chunk-QDEZXA34.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-SAPJVLZM.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import React, { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function facetsFrom(rows) {
+  const titles = /* @__PURE__ */ new Set();
+  const grades = /* @__PURE__ */ new Set();
+  if (Array.isArray(rows)) {
+    for (const row of rows) {
+      if (typeof row !== "object" || row === null) continue;
+      const title = row.job_title;
+      const grade = row.grade;
+      if (typeof title === "string" && title.trim()) titles.add(title.trim());
+      if (typeof grade === "string" && grade.trim()) grades.add(grade.trim());
+    }
+  }
+  const ko = (a, b) => a.localeCompare(b, "ko");
+  return { titles: [...titles].sort(ko), grades: [...grades].sort(ko) };
+}
+var uidCounter = 0;
+var uid = (prefix) => `${prefix}-${Date.now()}-${++uidCounter}`;
+var describeScope = (override) => {
+  const identityParts = [];
+  if (override.jobTitles.length > 0) identityParts.push(`\uC9C1\uCC45 ${override.jobTitles.join(", ")}`);
+  if (override.grades.length > 0) identityParts.push(`\uC9C1\uAE09 ${override.grades.join(", ")}`);
+  const legacyEntities = override.entityTypes ?? [];
+  const identityPart = identityParts.length > 0 ? identityParts.join(" \uB610\uB294 ") : legacyEntities.length > 0 ? "\uC9C1\uCC45\xB7\uC9C1\uAE09 \uC870\uAC74 \uC5C6\uC74C (\uC804 \uC9C1\uC6D0 \uC801\uC6A9)" : "\uC9C1\uCC45\xB7\uC9C1\uAE09 \uC870\uAC74 \uC5C6\uC74C (\uB9E4\uCE6D\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4)";
+  if (legacyEntities.length === 0) return identityPart;
+  return `${identityPart} \xB7 \uC5C5\uBB34\uC720\uD615 ${legacyEntities.join(", ")} \uD55C\uC815`;
+};
+var withSelected = (options, selected) => [...options, ...selected.filter((value) => !options.includes(value))].map((value) => ({
+  value,
+  label: value
+}));
+var orderCircleStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 28,
+  height: 28,
+  flex: "none",
+  borderRadius: "var(--wp-radius-pill)",
+  background: "var(--wp-surface-brand-tint)",
+  color: "var(--wp-text-brand)"
+};
+function StepSummary({ steps }) {
+  if (steps.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uB9E4\uCE6D \uC2DC \uC790\uB3D9 \uC2B9\uC778\uB429\uB2C8\uB2E4." });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap", gap: "var(--wp-space-1)" }, children: steps.map((step, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(Badge, { tone: "neutral", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: stepTypeIcon(step.type),
+          size: 12,
+          style: { marginRight: "var(--wp-space-1)" }
+        }
+      ),
+      stepLabel(step)
+    ] }),
+    index < steps.length - 1 ? /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 12, style: { color: "var(--wp-text-muted)", flex: "none" } }) : null
+  ] }, step.id)) });
+}
+function ApprovalOverridesEditorImpl({
+  value,
+  onChange,
+  jobTitleOptions,
+  gradeOptions,
+  facetsEndpoint,
+  searchEndpoint,
+  groupSearchEndpoint,
+  searchOptions,
+  disabled = false
+}) {
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const overrides = value ?? [];
+  const [fetchedFacets, setFetchedFacets] = useState(
+    null
+  );
+  useEffect(() => {
+    if (!facetsEndpoint) return;
+    let alive = true;
+    api(facetsEndpoint, { method: "GET" }).then((response) => {
+      if (!alive) return;
+      const body = response;
+      const rows = Array.isArray(response) ? response : body?.data ?? [];
+      setFetchedFacets(facetsFrom(rows));
+    }).catch(() => {
+    });
+    return () => {
+      alive = false;
+    };
+  }, [facetsEndpoint]);
+  const mergedTitles = [
+    ...jobTitleOptions ?? [],
+    ...(fetchedFacets?.titles ?? []).filter((t) => !(jobTitleOptions ?? []).includes(t))
+  ];
+  const mergedGrades = [
+    ...gradeOptions ?? [],
+    ...(fetchedFacets?.grades ?? []).filter((g) => !(gradeOptions ?? []).includes(g))
+  ];
+  const updateOverride = (id, patch) => {
+    onChange?.(
+      overrides.map((override) => override.id === id ? { ...override, ...patch } : override)
+    );
+  };
+  const addOverride = () => {
+    onChange?.([...overrides, { id: uid("line"), name: "", jobTitles: [], grades: [], steps: [] }]);
+  };
+  const removeOverride = (id) => {
+    onChange?.(overrides.filter((override) => override.id !== id));
+  };
+  const duplicateOverride = (index) => {
+    const source = overrides[index];
+    if (!source) return;
+    const copy = {
+      ...source,
+      id: uid("line"),
+      name: source.name.trim() ? `${source.name} (\uBCF5\uC0AC\uBCF8)` : "",
+      jobTitles: [...source.jobTitles],
+      grades: [...source.grades],
+      steps: source.steps.map((step) => ({
+        ...step,
+        id: uid("step"),
+        customApprovers: step.customApprovers?.map((approver) => ({ ...approver }))
+      }))
+    };
+    const next = [...overrides];
+    next.splice(index + 1, 0, copy);
+    onChange?.(next);
+  };
+  const moveOverride = (index, direction) => {
+    const target = index + direction;
+    if (target < 0 || target >= overrides.length) return;
+    const next = [...overrides];
+    [next[index], next[target]] = [next[target], next[index]];
+    onChange?.(next);
+  };
+  const [dragIndex, setDragIndex] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const finishDrag = () => {
+    if (dragIndex !== null && dropIndex !== null && dragIndex !== dropIndex) {
+      const next = [...overrides];
+      const [moved] = next.splice(dragIndex, 1);
+      next.splice(dropIndex, 0, moved);
+      onChange?.(next);
+    }
+    setDragIndex(null);
+    setDropIndex(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+    /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uC694\uCCAD\uC790\uC758 \uC9C1\uCC45\xB7\uC9C1\uAE09\uC5D0 \uB530\uB77C \uAE30\uBCF8 \uACB0\uC7AC\uC120 \uB300\uC2E0 \uC801\uC6A9\uD560 \uACB0\uC7AC\uB77C\uC778\uC785\uB2C8\uB2E4. \uC9C1\uCC45\uACFC \uC9C1\uAE09 \uC911 \uD558\uB098\uB9CC \uB9DE\uC544\uB3C4 \uC801\uC6A9\uB418\uBA70, \uC704\uC5D0\uC11C\uBD80\uD130 \uBA3C\uC800 \uB9E4\uCE6D\uB418\uB294 \uACB0\uC7AC\uB77C\uC778\uC774 \uC6B0\uC120 \uC801\uC6A9\uB429\uB2C8\uB2E4." }),
+    overrides.length === 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: {
+          border: "var(--wp-border-w) dashed var(--wp-border-default)",
+          borderRadius: "var(--wp-radius-lg)",
+          padding: "var(--wp-space-4)",
+          textAlign: "center",
+          color: "var(--wp-text-muted)"
+        },
+        children: "\uC124\uC815\uB41C \uC9C1\uAE09/\uC9C1\uCC45\uBCC4 \uACB0\uC7AC\uB77C\uC778\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."
+      }
+    ) : overrides.map((override, index) => /* @__PURE__ */ jsx(
+      Card,
+      {
+        padding: "tight",
+        style: {
+          // 드롭 목적지 표시 — 삽입될 자리의 카드 위에 브랜드 선을 긋는다.
+          boxShadow: dropIndex === index && dragIndex !== null && dragIndex !== index ? "0 calc(-1 * var(--wp-space-1)) 0 0 var(--wp-border-brand)" : void 0,
+          opacity: dragIndex === index ? 0.5 : void 0
+        },
+        onDragOver: (event) => {
+          if (dragIndex === null) return;
+          event.preventDefault();
+          if (dropIndex !== index) setDropIndex(index);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          finishDrag();
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                draggable: !disabled,
+                "aria-hidden": true,
+                title: "\uB04C\uC5B4\uC11C \uC6B0\uC120\uC21C\uC704 \uBCC0\uACBD",
+                style: {
+                  cursor: disabled ? "default" : "grab",
+                  color: "var(--wp-text-muted)",
+                  display: "inline-flex",
+                  flex: "none",
+                  touchAction: "none"
+                },
+                onDragStart: (event) => {
+                  event.dataTransfer.setData("text/plain", String(index));
+                  event.dataTransfer.effectAllowed = "move";
+                  setDragIndex(index);
+                },
+                onDragEnd: () => {
+                  setDragIndex(null);
+                  setDropIndex(null);
+                },
+                children: /* @__PURE__ */ jsx(Icon, { name: "grip-vertical", size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: orderCircleStyle, title: "\uB9E4\uCE6D \uC6B0\uC120\uC21C\uC704", children: index + 1 }),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                "aria-label": "\uACB0\uC7AC\uB77C\uC778 \uC774\uB984",
+                value: override.name,
+                disabled,
+                placeholder: "\uC608: \uD300\uC7A5 \uC2B9\uC778 \uC0DD\uB7B5 \uB77C\uC778",
+                onChange: (event) => updateOverride(override.id, { name: event.target.value })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flex: "none", gap: "var(--wp-space-1)" }, children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "chevron-up",
+                  label: "\uC6B0\uC120\uC21C\uC704 \uC62C\uB9AC\uAE30",
+                  size: "sm",
+                  disabled: disabled || index === 0,
+                  onClick: () => moveOverride(index, -1)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "chevron-down",
+                  label: "\uC6B0\uC120\uC21C\uC704 \uB0B4\uB9AC\uAE30",
+                  size: "sm",
+                  disabled: disabled || index === overrides.length - 1,
+                  onClick: () => moveOverride(index, 1)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "copy",
+                  label: "\uACB0\uC7AC\uB77C\uC778 \uBCF5\uC81C",
+                  size: "sm",
+                  disabled,
+                  onClick: () => duplicateOverride(index)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  icon: "trash-2",
+                  label: "\uACB0\uC7AC\uB77C\uC778 \uC0AD\uC81C",
+                  variant: "danger",
+                  size: "sm",
+                  disabled,
+                  onClick: () => removeOverride(override.id)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-1)" }, children: [
+            /* @__PURE__ */ jsx("span", { className: "wp-caption", children: describeScope(override) }),
+            /* @__PURE__ */ jsx(StepSummary, { steps: override.steps })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Field,
+            {
+              label: "\uC801\uC6A9 \uC9C1\uCC45",
+              hint: "\uC120\uD0DD\uD55C \uC9C1\uCC45 \uC911 \uD558\uB098\uB77C\uB3C4 \uC77C\uCE58\uD558\uBA74 \uC774 \uACB0\uC7AC\uB77C\uC778\uC774 \uC801\uC6A9\uB429\uB2C8\uB2E4.",
+              children: /* @__PURE__ */ jsx(
+                TagMultiSelect,
+                {
+                  options: withSelected(mergedTitles, override.jobTitles),
+                  values: override.jobTitles,
+                  disabled,
+                  emptyText: "\uC120\uD0DD \uAC00\uB2A5\uD55C \uC9C1\uCC45\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+                  onChange: (jobTitles) => updateOverride(override.id, { jobTitles })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Field,
+            {
+              label: "\uC801\uC6A9 \uC9C1\uAE09",
+              hint: "\uC9C1\uCC45 \uC870\uAC74\uACFC OR \u2014 \uC9C1\uAE09\uB9CC \uC77C\uCE58\uD574\uB3C4 \uC801\uC6A9\uB429\uB2C8\uB2E4.",
+              children: /* @__PURE__ */ jsx(
+                TagMultiSelect,
+                {
+                  options: withSelected(mergedGrades, override.grades),
+                  values: override.grades,
+                  disabled,
+                  emptyText: "\uC120\uD0DD \uAC00\uB2A5\uD55C \uC9C1\uAE09\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+                  onChange: (grades) => updateOverride(override.id, { grades })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "wp-col",
+              style: {
+                gap: "var(--wp-space-2)",
+                borderTop: "var(--wp-border-w) solid var(--wp-divider)",
+                paddingTop: "var(--wp-space-3)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "wp-label", children: "\uC774 \uACB0\uC7AC\uB77C\uC778\uC758 \uACB0\uC7AC \uB2E8\uACC4" }),
+                /* @__PURE__ */ jsx(
+                  ApprovalLineEditor,
+                  {
+                    value: override.steps,
+                    onChange: (steps) => updateOverride(override.id, { steps }),
+                    searchEndpoint,
+                    groupSearchEndpoint,
+                    options: searchOptions,
+                    disabled
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      },
+      override.id
+    )),
+    /* @__PURE__ */ jsx("div", { className: "wp-row", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        icon: "plus",
+        disabled,
+        title: disabled ? "\uBE44\uD65C\uC131\uD654\uB428" : void 0,
+        onClick: addOverride,
+        children: "\uACB0\uC7AC\uB77C\uC778 \uCD94\uAC00"
+      }
+    ) })
+  ] });
+}
+var ApprovalOverridesEditor = boxed(ApprovalOverridesEditorImpl, "ApprovalOverridesEditor");
+
+export { ApprovalOverridesEditor };

package/dist/meta.d.ts

@@ -425,6 +425,9 @@ declare const richComponentMeta: {
 
 declare const ApprovalStepperMeta: SduiComponentMeta;
 declare const RankBoardMeta: SduiComponentMeta;
+declare const ApprovalLineEditorMeta: SduiComponentMeta;
+declare const ApprovalOverridesEditorMeta: SduiComponentMeta;
+declare const OrgChartBoardMeta: SduiComponentMeta;
 declare const AutocompleteFieldMeta: SduiComponentMeta;
 declare const InlineEditMeta: SduiComponentMeta;
 declare const JsonFieldMeta: SduiComponentMeta;
@@ -458,7 +461,10 @@ declare const StripMeta: SduiComponentMeta;
  * 프롭을 못 그린다.
  */
 declare const widgetComponentMeta: {
+    ApprovalLineEditor: SduiComponentMeta;
+    ApprovalOverridesEditor: SduiComponentMeta;
     ApprovalStepper: SduiComponentMeta;
+    OrgChartBoard: SduiComponentMeta;
     RankBoard: SduiComponentMeta;
     AutocompleteField: SduiComponentMeta;
     ColumnBoard: SduiComponentMeta;
@@ -592,4 +598,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, ApprovalStepperMeta, 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, RankBoardMeta, 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 };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, 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, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, 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 };