@wipco/sdui 0.1.0 → 0.3.0

package/dist/chunk-KADFN76X.js

@@ -0,0 +1,541 @@
+import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-ZUCI34QY.js';
+import { useRef, useEffect, useState, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Popover({
+  open,
+  onClose,
+  trigger,
+  footer,
+  alignLeft = true,
+  width,
+  children
+}) {
+  const hostRef = useRef(null);
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  useEffect(() => {
+    if (!open) return;
+    const closeOnOutside = (event) => {
+      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
+      closeRef.current();
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") closeRef.current();
+    };
+    document.addEventListener("pointerdown", closeOnOutside);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutside);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [open]);
+  return (
+    // 트리거와 패널을 함께 감싸는 기준 상자 — .erp-popover-host의 position:relative가
+    // 패널 absolute의 기준이 된다
+    /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+      trigger,
+      open ? (
+        // 기본은 오른쪽 기준(.erp-popover), --left가 붙으면 왼쪽 기준으로 뒤집힌다
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: alignLeft ? "erp-popover erp-popover--left" : "erp-popover",
+            style: width ? { width } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "erp-popover__body", children }),
+              footer ? /* @__PURE__ */ jsx("div", { className: "erp-popover__foot", children: footer }) : null
+            ]
+          }
+        )
+      ) : null
+    ] })
+  );
+}
+function splitMultiValue(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function joinMultiValue(values) {
+  return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean))).sort().join(",");
+}
+function normalizeSearchText(value) {
+  return value.toLowerCase().replace(/\s+/g, "");
+}
+function includesLooseSearch(text, keyword) {
+  const normalizedKeyword = normalizeSearchText(keyword);
+  return normalizedKeyword.length === 0 || normalizeSearchText(text).includes(normalizedKeyword);
+}
+function searchFieldKeys(fields) {
+  return fields.flatMap((field) => {
+    if (field.type === "dateRange") {
+      return [field.fromKey ?? `${field.key}From`, field.toKey ?? `${field.key}To`];
+    }
+    if (field.type === "numberRange") {
+      return [field.fromKey ?? `${field.key}Min`, field.toKey ?? `${field.key}Max`];
+    }
+    return [field.key];
+  });
+}
+function searchValuesFromParams(fields, params) {
+  const values = {};
+  for (const key of searchFieldKeys(fields)) {
+    const value = params.get(key);
+    if (value) values[key] = value;
+  }
+  return values;
+}
+function cleanSearchValues(fields, values) {
+  const allowed = new Set(searchFieldKeys(fields));
+  const fieldsByKey = new Map(fields.map((field) => [field.key, field]));
+  return Object.fromEntries(
+    Object.entries(values).map(([key, value]) => {
+      const field = fieldsByKey.get(key);
+      const cleaned = field?.type === "select" || field?.type === "cascading" ? joinMultiValue(splitMultiValue(value)) : value.trim();
+      return [key, cleaned];
+    }).filter(([key, value]) => allowed.has(key) && value)
+  );
+}
+function cascadingPathMap(options) {
+  const paths = /* @__PURE__ */ new Map();
+  const visit = (option, parents) => {
+    const path = [...parents, option];
+    paths.set(option.value, path);
+    option.children?.forEach((child) => visit(child, path));
+  };
+  options.forEach((option) => visit(option, []));
+  return paths;
+}
+function cascadingValuePaths(options) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [value, path] of cascadingPathMap(options)) {
+    map.set(
+      value,
+      path.map((option) => option.value)
+    );
+  }
+  return map;
+}
+function cascadingPathLabel(pathMap, value) {
+  const path = pathMap.get(value);
+  return path?.length ? path.map((option) => option.label).join(" > ") : value;
+}
+function activeSearchCriteria(fields, values) {
+  const criteria = [];
+  for (const field of fields) {
+    if (field.type === "select") {
+      for (const value2 of splitMultiValue(values[field.key] ?? "")) {
+        const label = field.options.find((o) => o.value === value2)?.label ?? value2;
+        criteria.push({
+          key: `${field.key}:${value2}`,
+          label: `${field.label}: ${label}`,
+          clearKeys: [field.key],
+          valueKey: field.key,
+          value: value2
+        });
+      }
+      continue;
+    }
+    if (field.type === "cascading") {
+      const pathMap = cascadingPathMap(field.options);
+      for (const value2 of splitMultiValue(values[field.key] ?? "")) {
+        criteria.push({
+          key: `${field.key}:${value2}`,
+          label: `${field.label}: ${cascadingPathLabel(pathMap, value2)}`,
+          clearKeys: [field.key],
+          valueKey: field.key,
+          value: value2
+        });
+      }
+      continue;
+    }
+    if (field.type === "dateRange" || field.type === "numberRange") {
+      const fromKey = field.fromKey ?? `${field.key}${field.type === "dateRange" ? "From" : "Min"}`;
+      const toKey = field.toKey ?? `${field.key}${field.type === "dateRange" ? "To" : "Max"}`;
+      const from = values[fromKey];
+      const to = values[toKey];
+      if (from || to) {
+        criteria.push({
+          key: field.key,
+          label: `${field.label}: ${from ?? ""}~${to ?? ""}`,
+          clearKeys: [fromKey, toKey]
+        });
+      }
+      continue;
+    }
+    const value = values[field.key];
+    if (value) {
+      criteria.push({
+        key: field.key,
+        label: `${field.label}: ${value}`,
+        clearKeys: [field.key]
+      });
+    }
+  }
+  return criteria;
+}
+var EMPTY_FIELDS = [];
+var EMPTY_VALUES = {};
+function SearchToolbar({
+  search,
+  onSearchChange,
+  onSearch,
+  advancedFields = EMPTY_FIELDS,
+  advancedValues = EMPTY_VALUES,
+  placeholder = "\uAC80\uC0C9",
+  className,
+  hideSearchInput = false
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(advancedValues);
+  const hasAdvanced = advancedFields.length > 0;
+  useEffect(() => {
+    if (!open) setDraft(advancedValues);
+  }, [advancedValues, open]);
+  const activeCriteria = useMemo(
+    () => activeSearchCriteria(advancedFields, advancedValues),
+    [advancedFields, advancedValues]
+  );
+  const submit = (event) => {
+    event.preventDefault();
+    onSearch(search.trim(), cleanSearchValues(advancedFields, advancedValues));
+    setOpen(false);
+  };
+  const applyAdvancedSearch = () => {
+    onSearch(search.trim(), cleanSearchValues(advancedFields, draft));
+    setOpen(false);
+  };
+  const resetAdvancedSearch = () => {
+    setDraft({});
+    onSearch(search.trim(), {});
+    setOpen(false);
+  };
+  const removeCriterion = (criterion) => {
+    const nextValues = { ...advancedValues };
+    if (criterion.valueKey && criterion.value !== void 0) {
+      const remaining = splitMultiValue(nextValues[criterion.valueKey] ?? "").filter(
+        (value) => value !== criterion.value
+      );
+      if (remaining.length > 0) nextValues[criterion.valueKey] = joinMultiValue(remaining);
+      else delete nextValues[criterion.valueKey];
+    } else {
+      criterion.clearKeys.forEach((key) => delete nextValues[key]);
+    }
+    setDraft(nextValues);
+    onSearch(search.trim(), cleanSearchValues(advancedFields, nextValues));
+  };
+  return /* @__PURE__ */ jsxs("form", { className: ["wp-row", className].filter(Boolean).join(" "), onSubmit: submit, children: [
+    activeCriteria.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: activeCriteria.map((criterion) => /* @__PURE__ */ jsx(Tag, { onRemove: () => removeCriterion(criterion), children: criterion.label }, criterion.key)) }) : null,
+    !hideSearchInput ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        icon: "search",
+        value: search,
+        onChange: (event) => onSearchChange(event.target.value),
+        placeholder
+      }
+    ) : null,
+    hasAdvanced ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onClose: () => setOpen(false),
+        alignLeft: false,
+        width: "min(560px, 80vw)",
+        trigger: (
+          // 검색 입력창 옆에 나란히 서는 자리라 테두리가 있어야 한 덩어리로 읽힌다.
+          // 열린 상태는 인라인 배경이 아니라 pressed(aria-pressed 틴트)로 알린다.
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              icon: "sliders-horizontal",
+              label: "\uC0C1\uC138\uAC80\uC0C9",
+              variant: "outlined",
+              pressed: open,
+              "aria-expanded": open,
+              onClick: () => setOpen((value) => !value)
+            }
+          )
+        ),
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "refresh-cw", onClick: resetAdvancedSearch, children: "\uCD08\uAE30\uD654" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: applyAdvancedSearch, children: "\uC801\uC6A9" })
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "wp-grid wp-grid--2", children: advancedFields.map((field) => /* @__PURE__ */ jsx(
+          SearchFieldInput,
+          {
+            field,
+            values: draft,
+            onChange: (patch) => setDraft((current) => ({ ...current, ...patch }))
+          },
+          field.key
+        )) })
+      }
+    ) : null
+  ] });
+}
+function SearchFieldInput({
+  field,
+  values,
+  onChange
+}) {
+  if (field.type === "select") {
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsx(MultiSelectInput, { field, values, onChange }) });
+  }
+  if (field.type === "cascading") {
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsx(CascadingInput, { field, values, onChange }) });
+  }
+  if (field.type === "dateRange") {
+    const fromKey = field.fromKey ?? `${field.key}From`;
+    const toKey = field.toKey ?? `${field.key}To`;
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsxs("div", { className: "wp-row", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "date",
+          mono: true,
+          value: values[fromKey] ?? "",
+          onChange: (e) => onChange({ [fromKey]: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "~" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "date",
+          mono: true,
+          value: values[toKey] ?? "",
+          onChange: (e) => onChange({ [toKey]: e.target.value })
+        }
+      )
+    ] }) });
+  }
+  if (field.type === "numberRange") {
+    const fromKey = field.fromKey ?? `${field.key}Min`;
+    const toKey = field.toKey ?? `${field.key}Max`;
+    return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsxs("div", { className: "wp-row", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          mono: true,
+          placeholder: field.minPlaceholder ?? "\uCD5C\uC18C",
+          value: values[fromKey] ?? "",
+          onChange: (e) => onChange({ [fromKey]: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "~" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          mono: true,
+          placeholder: field.maxPlaceholder ?? "\uCD5C\uB300",
+          value: values[toKey] ?? "",
+          onChange: (e) => onChange({ [toKey]: e.target.value })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Field, { label: field.label, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      placeholder: field.placeholder,
+      value: values[field.key] ?? "",
+      onChange: (e) => onChange({ [field.key]: e.target.value })
+    }
+  ) });
+}
+function multiSelectLabel(field, values) {
+  if (values.length === 0) return field.allLabel ?? "\uC804\uCCB4";
+  const labels = values.map((value) => field.options.find((item) => item.value === value)?.label ?? value);
+  if (labels.length <= 2) return labels.join(", ");
+  return `${labels[0]} \uC678 ${labels.length - 1}`;
+}
+function MultiSelectInput({
+  field,
+  values,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = splitMultiValue(values[field.key] ?? "");
+  const toggle = (value, checked) => {
+    const next = checked ? [...selected, value] : selected.filter((item) => item !== value);
+    onChange({ [field.key]: joinMultiValue(next) });
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onClose: () => setOpen(false),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          block: true,
+          iconEnd: "chevron-down",
+          onClick: () => setOpen((value) => !value),
+          children: multiSelectLabel(field, selected)
+        }
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "wp-col", children: field.options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: option.label,
+          checked: selected.includes(option.value),
+          onChange: (e) => toggle(option.value, e.target.checked)
+        },
+        option.value
+      )) })
+    }
+  );
+}
+function uniqueCascadingOptions(options) {
+  const seen = /* @__PURE__ */ new Set();
+  return options.filter((option) => {
+    if (seen.has(option.value)) return false;
+    seen.add(option.value);
+    return true;
+  });
+}
+function cascadingLevels(options, selectedPaths) {
+  const levels = [];
+  let currentOptions = options;
+  let depth = 0;
+  while (currentOptions.length > 0) {
+    levels.push(currentOptions);
+    const selectedAtDepth = uniqueCascadingOptions(
+      selectedPaths.map((path) => path[depth]).filter(
+        (option) => Boolean(option && currentOptions.some((current) => current.value === option.value))
+      )
+    );
+    const nextOptions = uniqueCascadingOptions(selectedAtDepth.flatMap((option) => option.children ?? []));
+    if (nextOptions.length === 0) break;
+    currentOptions = nextOptions;
+    depth += 1;
+  }
+  return levels;
+}
+function selectedValuesForCascadingLevel(selectedPaths, depth, options) {
+  const optionValues = new Set(options.map((option) => option.value));
+  return Array.from(
+    new Set(
+      selectedPaths.map((path) => path[depth]?.value).filter((value) => Boolean(value) && optionValues.has(value))
+    )
+  );
+}
+function cascadingPathIncludes(pathMap, value, maybeAncestor) {
+  return pathMap.get(value)?.some((option) => option.value === maybeAncestor) ?? false;
+}
+function cascadingValuesOverlap(leftValue, rightValue, pathMap) {
+  return cascadingPathIncludes(pathMap, leftValue, rightValue) || cascadingPathIncludes(pathMap, rightValue, leftValue);
+}
+function cascadingLevelLabel(values, allLabel, pathMap, showPathLabels) {
+  if (values.length === 0) return allLabel;
+  const labels = values.map((value) => {
+    if (showPathLabels) return cascadingPathLabel(pathMap, value);
+    return pathMap.get(value)?.at(-1)?.label ?? value;
+  });
+  if (labels.length <= 2) return labels.join(", ");
+  return `${labels[0]} \uC678 ${labels.length - 1}`;
+}
+function cascadingOptionLabel(option, pathMap, showPathLabels) {
+  return showPathLabels ? cascadingPathLabel(pathMap, option.value) : option.label;
+}
+function CascadingInput({
+  field,
+  values,
+  onChange
+}) {
+  const pathMap = useMemo(() => cascadingPathMap(field.options), [field.options]);
+  const selectedValues = useMemo(
+    () => splitMultiValue(values[field.key] ?? "").filter((value) => pathMap.has(value)),
+    [field.key, pathMap, values]
+  );
+  const selectedPaths = useMemo(
+    () => selectedValues.map((value) => pathMap.get(value)).filter((path) => Boolean(path)),
+    [pathMap, selectedValues]
+  );
+  const levels = useMemo(() => cascadingLevels(field.options, selectedPaths), [field.options, selectedPaths]);
+  const setSelectedValues = (nextValues) => {
+    onChange({ [field.key]: joinMultiValue(nextValues) });
+  };
+  const toggleOption = (option, nextChecked) => {
+    const withoutOverlap = selectedValues.filter(
+      (value) => !cascadingValuesOverlap(option.value, value, pathMap)
+    );
+    setSelectedValues(nextChecked ? [...withoutOverlap, option.value] : withoutOverlap);
+  };
+  const clearLevel = (depth) => {
+    if (depth === 0) {
+      setSelectedValues([]);
+      return;
+    }
+    const parents = selectedValuesForCascadingLevel(selectedPaths, depth - 1, levels[depth - 1] ?? []);
+    const rest = selectedValues.filter((value) => {
+      const parentValue = pathMap.get(value)?.[depth - 1]?.value;
+      return !parentValue || !parents.includes(parentValue);
+    });
+    setSelectedValues([...rest, ...parents]);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "wp-col", children: levels.map((options, depth) => {
+    const levelValues = selectedValuesForCascadingLevel(selectedPaths, depth, options);
+    const showPathLabels = depth > 0 && selectedValuesForCascadingLevel(selectedPaths, depth - 1, levels[depth - 1] ?? []).length > 1;
+    return /* @__PURE__ */ jsx(
+      CascadingLevelSelect,
+      {
+        allLabel: depth === 0 ? field.allLabel ?? "\uC804\uCCB4" : "\uC804\uCCB4",
+        options,
+        pathMap,
+        selectedValues: levelValues,
+        showPathLabels,
+        onClear: () => clearLevel(depth),
+        onToggle: toggleOption
+      },
+      depth
+    );
+  }) });
+}
+function CascadingLevelSelect({
+  options,
+  pathMap,
+  selectedValues,
+  allLabel,
+  showPathLabels,
+  onClear,
+  onToggle
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedSet = new Set(selectedValues);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onClose: () => setOpen(false),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          block: true,
+          iconEnd: "chevron-down",
+          onClick: () => setOpen((value) => !value),
+          children: cascadingLevelLabel(selectedValues, allLabel, pathMap, showPathLabels)
+        }
+      ),
+      footer: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: "refresh-cw", onClick: onClear, children: allLabel }),
+      children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { minWidth: 200 }, children: options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: cascadingOptionLabel(option, pathMap, showPathLabels),
+          checked: selectedSet.has(option.value),
+          onChange: (e) => onToggle(option, e.target.checked)
+        },
+        option.value
+      )) })
+    }
+  );
+}
+
+export { Popover, SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue };

package/dist/chunk-KBHI3IUR.js

@@ -0,0 +1,40 @@
+import { Button } from './chunk-ZUCI34QY.js';
+import { useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PRINT_CSS = `
+.erp-print-shell{display:flex;flex-direction:column;align-items:center;gap:var(--wp-space-4);padding:var(--wp-space-6) var(--wp-space-4)}
+.erp-print-toolbar{display:flex;justify-content:flex-end;gap:var(--wp-space-2);width:100%;max-width:210mm}
+.erp-print-sheet{width:100%;max-width:210mm;box-sizing:border-box;background:var(--wp-surface-card);border:var(--wp-border-w) solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);padding:var(--wp-space-7)}
+.erp-print-sheet table{border-collapse:collapse;width:100%}
+.erp-print-sheet th,.erp-print-sheet td{border:var(--wp-border-w) solid var(--wp-border-default);padding:var(--wp-space-1) var(--wp-space-2)}
+@media print{
+  @page{size:A4;margin:1cm}
+  .erp-print-hidden{display:none !important}
+  .erp-print-shell{display:block;padding:0}
+  .erp-print-sheet{--wp-border-default:rgba(0,0,0,.85);--wp-border-subtle:rgba(0,0,0,.6);max-width:none;border:0;border-radius:0;box-shadow:none;padding:0;font-size:12pt;color:rgba(0,0,0,.92)}
+}
+`;
+function PrintStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-print", precedence: "medium", children: PRINT_CSS });
+}
+function PrintSheet({ title, children, autoPrint = false }) {
+  useEffect(() => {
+    if (!autoPrint || !window.opener) return;
+    const timer = window.setTimeout(() => window.print(), 500);
+    return () => window.clearTimeout(timer);
+  }, [autoPrint]);
+  return /* @__PURE__ */ jsxs("div", { className: "erp-print-shell", children: [
+    /* @__PURE__ */ jsx(PrintStyles, {}),
+    /* @__PURE__ */ jsxs("div", { className: "erp-print-toolbar erp-print-hidden", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: () => window.print(), children: "\uC778\uC1C4\uD558\uAE30" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => window.close(), children: "\uB2EB\uAE30" })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "erp-print-sheet", children: [
+      title ? /* @__PURE__ */ jsx("h1", { className: "wp-h3", style: { margin: "0 0 var(--wp-space-5)" }, children: title }) : null,
+      children
+    ] })
+  ] });
+}
+
+export { PrintSheet };