@wipco/sdui 0.1.0 → 0.3.0

package/dist/chunk-DGPRX4MU.js

@@ -0,0 +1,251 @@
+import { SegmentedControl, Select, Input } from './chunk-ZUCI34QY.js';
+import { useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MODE_ITEMS = [
+  { value: "year", label: "\uC5F0\uAC04" },
+  { value: "half", label: "\uBC18\uAE30" },
+  { value: "quarter", label: "\uBD84\uAE30" },
+  { value: "month", label: "\uC6D4\uAC04" },
+  { value: "custom", label: "\uC9C1\uC811" }
+];
+var MODES = ["year", "half", "quarter", "month", "custom"];
+function normalizeModes(modes) {
+  if (!Array.isArray(modes)) return MODE_ITEMS;
+  const seen = /* @__PURE__ */ new Set();
+  const items = [];
+  for (const raw of modes) {
+    const value = typeof raw === "string" ? raw : raw?.value;
+    if (!MODES.includes(value) || seen.has(value)) continue;
+    seen.add(value);
+    const preset = MODE_ITEMS.find((item) => item.value === value);
+    const given = typeof raw === "string" ? void 0 : raw;
+    items.push({ value, label: given?.label ?? preset?.label, icon: given?.icon });
+  }
+  return items.length > 0 ? items : MODE_ITEMS;
+}
+var pad2 = (n) => String(n).padStart(2, "0");
+var lastDayOfMonth = (year, month) => new Date(year, month, 0).getDate();
+var isIsoDate = (s) => typeof s === "string" && /^\d{4}-\d{2}-\d{2}$/.test(s);
+function clampInt(v, min, max, fallback) {
+  const n = typeof v === "number" && Number.isFinite(v) ? Math.round(v) : NaN;
+  if (Number.isNaN(n)) return fallback;
+  return Math.min(max, Math.max(min, n));
+}
+function rangeOf(p) {
+  const y = p.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  switch (p.mode) {
+    case "half": {
+      return (p.half ?? 1) === 1 ? { from: `${y}-01-01`, to: `${y}-06-30` } : { from: `${y}-07-01`, to: `${y}-12-31` };
+    }
+    case "quarter": {
+      const q = p.quarter ?? 1;
+      const startMonth = (q - 1) * 3 + 1;
+      const endMonth = q * 3;
+      return {
+        from: `${y}-${pad2(startMonth)}-01`,
+        to: `${y}-${pad2(endMonth)}-${pad2(lastDayOfMonth(y, endMonth))}`
+      };
+    }
+    case "month": {
+      const m = p.month ?? 1;
+      return { from: `${y}-${pad2(m)}-01`, to: `${y}-${pad2(m)}-${pad2(lastDayOfMonth(y, m))}` };
+    }
+    case "custom":
+      return { from: p.from ?? "", to: p.to ?? "" };
+    case "year":
+    default:
+      return { from: `${y}-01-01`, to: `${y}-12-31` };
+  }
+}
+function normalizePeriod(p) {
+  const now = /* @__PURE__ */ new Date();
+  const curYear = now.getFullYear();
+  const curMonth = now.getMonth() + 1;
+  const mode = p !== void 0 && MODES.includes(p.mode) ? p.mode : "month";
+  const year = clampInt(p?.year, 1970, 2999, curYear);
+  switch (mode) {
+    case "year":
+      return { mode, year };
+    case "half":
+      return { mode, year, half: clampInt(p?.half, 1, 2, curMonth <= 6 ? 1 : 2) };
+    case "quarter":
+      return {
+        mode,
+        year,
+        quarter: clampInt(p?.quarter, 1, 4, Math.ceil(curMonth / 3))
+      };
+    case "month":
+      return { mode, year, month: clampInt(p?.month, 1, 12, curMonth) };
+    case "custom": {
+      const base = rangeOf({ mode: "month", year, month: curMonth });
+      const from = isIsoDate(p?.from) ? p.from : base.from;
+      let to = isIsoDate(p?.to) ? p.to : base.to;
+      if (to < from) to = from;
+      return { mode, from, to };
+    }
+  }
+}
+function convertMode(cur, mode) {
+  const now = /* @__PURE__ */ new Date();
+  let year = cur.year ?? now.getFullYear();
+  let month;
+  if (cur.mode === "month" && cur.month !== void 0) {
+    month = cur.month;
+  } else if (cur.mode === "quarter" && cur.quarter !== void 0) {
+    month = (cur.quarter - 1) * 3 + 1;
+  } else if (cur.mode === "half" && cur.half !== void 0) {
+    month = cur.half === 2 ? 7 : 1;
+  } else if (cur.mode === "custom" && isIsoDate(cur.from)) {
+    year = Number(cur.from.slice(0, 4));
+    month = clampInt(Number(cur.from.slice(5, 7)), 1, 12, now.getMonth() + 1);
+  } else {
+    month = now.getMonth() + 1;
+  }
+  switch (mode) {
+    case "year":
+      return normalizePeriod({ mode, year });
+    case "half":
+      return normalizePeriod({ mode, year, half: month <= 6 ? 1 : 2 });
+    case "quarter":
+      return normalizePeriod({ mode, year, quarter: Math.ceil(month / 3) });
+    case "month":
+      return normalizePeriod({ mode, year, month });
+    case "custom": {
+      const range = rangeOf(cur);
+      return normalizePeriod({ mode, year, from: range.from, to: range.to });
+    }
+  }
+}
+var HALF_OPTIONS = [
+  { value: "1", label: "\uC0C1\uBC18\uAE30" },
+  { value: "2", label: "\uD558\uBC18\uAE30" }
+];
+var QUARTER_OPTIONS = [1, 2, 3, 4].map((q) => ({ value: String(q), label: `${q}\uBD84\uAE30` }));
+var MONTH_OPTIONS = Array.from({ length: 12 }, (_, i) => ({
+  value: String(i + 1),
+  label: `${i + 1}\uC6D4`
+}));
+function PeriodFilter({ value, onChange, years, modes }) {
+  const [inner, setInner] = useState(() => normalizePeriod(value));
+  const modeItems = useMemo(() => normalizeModes(modes), [modes]);
+  const requested = normalizePeriod(value !== void 0 ? value : inner);
+  const period = modeItems.some((item) => item.value === requested.mode) ? requested : convertMode(requested, modeItems[0].value);
+  const emit = (next) => {
+    setInner(next);
+    onChange?.(next);
+  };
+  const yearOptions = useMemo(() => {
+    const curYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const base = years !== void 0 && years.length > 0 ? [...new Set(years)] : Array.from({ length: 6 }, (_, i) => curYear - i);
+    if (period.year !== void 0 && !base.includes(period.year)) base.push(period.year);
+    return base.sort((a, b) => b - a).map((y) => ({ value: String(y), label: `${y}\uB144` }));
+  }, [years, period.year]);
+  const handleFromChange = (from) => {
+    if (!isIsoDate(from)) return;
+    const to = period.to !== void 0 && period.to >= from ? period.to : from;
+    emit({ mode: "custom", from, to });
+  };
+  const handleToChange = (to) => {
+    if (!isIsoDate(to)) return;
+    const from = period.from !== void 0 && period.from <= to ? period.from : to;
+    emit({ mode: "custom", from, to });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "\uAE30\uAC04 \uC120\uD0DD",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: "var(--wp-space-2)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            items: [...modeItems],
+            value: period.mode,
+            onChange: (m) => emit(convertMode(period, m))
+          }
+        ),
+        period.mode !== "custom" ? /* @__PURE__ */ jsx("span", { style: { width: 96, flex: "none" }, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "\uC5F0\uB3C4",
+            options: yearOptions,
+            value: String(period.year),
+            onChange: (e) => emit(normalizePeriod({ ...period, year: Number(e.target.value) }))
+          }
+        ) }) : null,
+        period.mode === "half" ? /* @__PURE__ */ jsx("span", { style: { width: 100, flex: "none" }, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "\uBC18\uAE30",
+            options: HALF_OPTIONS,
+            value: String(period.half),
+            onChange: (e) => emit(normalizePeriod({ ...period, half: Number(e.target.value) }))
+          }
+        ) }) : null,
+        period.mode === "quarter" ? /* @__PURE__ */ jsx("span", { style: { width: 96, flex: "none" }, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "\uBD84\uAE30",
+            options: QUARTER_OPTIONS,
+            value: String(period.quarter),
+            onChange: (e) => emit(
+              normalizePeriod({ ...period, quarter: Number(e.target.value) })
+            )
+          }
+        ) }) : null,
+        period.mode === "month" ? /* @__PURE__ */ jsx("span", { style: { width: 88, flex: "none" }, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "\uC6D4",
+            options: MONTH_OPTIONS,
+            value: String(period.month),
+            onChange: (e) => emit(normalizePeriod({ ...period, month: Number(e.target.value) }))
+          }
+        ) }) : null,
+        period.mode === "custom" ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "var(--wp-space-1)",
+              flex: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { width: 148, flex: "none" }, children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "date",
+                  "aria-label": "\uC2DC\uC791\uC77C",
+                  value: period.from ?? "",
+                  max: period.to,
+                  onChange: (e) => handleFromChange(e.target.value)
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-subtle)" }, "aria-hidden": true, children: "~" }),
+              /* @__PURE__ */ jsx("span", { style: { width: 148, flex: "none" }, children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "date",
+                  "aria-label": "\uC885\uB8CC\uC77C",
+                  value: period.to ?? "",
+                  min: period.from,
+                  onChange: (e) => handleToChange(e.target.value)
+                }
+              ) })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { PeriodFilter };

package/dist/chunk-IL2KS4WS.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/widgets/Strip.tsx
+var STRIP_CSS = `
+.erp-strip{display:flex;align-items:stretch;overflow-x:auto;min-width:0;padding-bottom:var(--wp-space-1);scrollbar-width:thin;scrollbar-color:var(--wp-border-default) transparent}
+.erp-strip::-webkit-scrollbar{height:6px}
+.erp-strip::-webkit-scrollbar-track{background:transparent}
+.erp-strip::-webkit-scrollbar-thumb{background:var(--wp-border-default);border-radius:var(--wp-radius-pill)}
+.erp-strip--snap{scroll-snap-type:x mandatory}
+.erp-strip__item{flex:0 0 auto;min-width:0}
+.erp-strip--snap .erp-strip__item{scroll-snap-align:start}
+`;
+function StripStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-strip", precedence: "medium", children: STRIP_CSS });
+}
+function Strip({ children, gap = "var(--wp-space-3)", snap = false }) {
+  const items = React.Children.toArray(children);
+  return /* @__PURE__ */ jsxs("div", { className: snap ? "erp-strip erp-strip--snap" : "erp-strip", style: { gap }, children: [
+    /* @__PURE__ */ jsx(StripStyles, {}),
+    items.map((child, index) => /* @__PURE__ */ jsx("div", { className: "erp-strip__item", children: child }, index))
+  ] });
+}
+
+export { Strip };