@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/DataTable.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Checkbox } from "./Checkbox.js";
+import { Pagination } from "./Pagination.js";
+import { TableColumnFilter } from "./TableColumnFilter.js";
+import { TableColumnVisibility } from "./TableColumnVisibility.js";
+import { Button } from "./Button.js";
+import { Placeholder } from "./Placeholder.js";
+import { LoadingOverlay } from "./LoadingOverlay.js";
+import s from "./DataTable.module.css";
+const positive = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.max(1, Math.floor(value)) : fallback;
+function DataTable({
+  rows,
+  columns,
+  rowKey,
+  label = "\u6570\u636E\u8868\u683C",
+  selected,
+  onSelectionChange,
+  selectionLabel,
+  initialPageSize = 5,
+  loading = false,
+  sort: controlledSort,
+  defaultSort = null,
+  onSortChange,
+  filters: controlledFilters,
+  defaultFilters = {},
+  onFiltersChange,
+  pagination,
+  defaultPagination,
+  onPaginationChange,
+  pageSizes,
+  visibleColumns,
+  defaultVisibleColumns,
+  onVisibleColumnsChange,
+  showColumnSelector = true,
+  manualFiltering = false,
+  manualSorting = false,
+  manualPagination = false,
+  total
+}) {
+  const [localSort, setLocalSort] = useState(defaultSort), [localFilters, setLocalFilters] = useState(defaultFilters), [localPage, setLocalPage] = useState({
+    page: positive(defaultPagination?.page, 1),
+    pageSize: positive(
+      defaultPagination?.pageSize,
+      positive(initialPageSize, 5)
+    )
+  }), [hidden, setHidden] = useState(
+    () => defaultVisibleColumns ? columns.filter((column) => !defaultVisibleColumns.includes(column.key)).map((column) => column.key) : []
+  );
+  const sort = controlledSort === void 0 ? localSort : controlledSort, filters = controlledFilters ?? localFilters;
+  const pageSize = positive(pagination?.pageSize, localPage.pageSize), page = positive(pagination?.page, localPage.page);
+  const filtered = useMemo(() => {
+    const result = manualFiltering ? [...rows] : rows.filter(
+      (row) => columns.every(
+        (column2) => !filters[column2.key]?.length || filters[column2.key].includes(String(column2.value(row)))
+      )
+    );
+    const column = columns.find((item) => item.key === sort?.key);
+    if (column && sort && !manualSorting)
+      result.sort((a, b) => {
+        const x = column.value(a), y = column.value(b);
+        return (typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y), "zh-CN", { numeric: true })) * (sort.direction === "asc" ? 1 : -1);
+      });
+    return result;
+  }, [rows, columns, filters, sort, manualFiltering, manualSorting]);
+  const count = manualPagination ? typeof total === "number" && Number.isFinite(total) ? Math.max(0, Math.floor(total)) : rows.length : filtered.length;
+  const current = Math.min(page, Math.max(1, Math.ceil(count / pageSize))), visible = manualPagination ? filtered : filtered.slice((current - 1) * pageSize, current * pageSize), ids = visible.map(rowKey), selection = selected || [], selectedCount = ids.filter((key) => selection.includes(key)).length;
+  const normalizeColumns = (keys) => {
+    const next = columns.filter(
+      (column) => column.hideable === false || keys.includes(column.key)
+    ).map((column) => column.key);
+    if (!next.length && columns[0]) next.push(columns[0].key);
+    return next;
+  };
+  const visibleKeys = normalizeColumns(
+    visibleColumns ?? columns.filter((column) => !hidden.includes(column.key)).map((column) => column.key)
+  ), displayColumns = columns.filter(
+    (column) => visibleKeys.includes(column.key)
+  );
+  const changePage = (next) => {
+    if (pagination === void 0) setLocalPage(next);
+    if (next.page !== current || next.pageSize !== pageSize)
+      onPaginationChange?.(next);
+  };
+  const changeSort = (next) => {
+    if (controlledSort === void 0) setLocalSort(next);
+    onSortChange?.(next);
+    changePage({ page: 1, pageSize });
+  };
+  const changeFilters = (next) => {
+    if (controlledFilters === void 0) setLocalFilters(next);
+    onFiltersChange?.(next);
+    changePage({ page: 1, pageSize });
+  };
+  const active = !!sort || columns.some((column) => filters[column.key]?.length);
+  return /* @__PURE__ */ jsxs("div", { className: s.container, role: "region", "aria-label": `${label}\u533A\u57DF`, children: [
+    (showColumnSelector || active) && /* @__PURE__ */ jsxs("div", { className: s.toolbar, children: [
+      active && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          onClick: () => {
+            if (controlledSort === void 0) setLocalSort(null);
+            if (controlledFilters === void 0) setLocalFilters({});
+            onSortChange?.(null);
+            onFiltersChange?.({});
+            changePage({ page: 1, pageSize });
+          },
+          children: "\u6E05\u9664\u7B5B\u9009\u4E0E\u6392\u5E8F"
+        }
+      ),
+      showColumnSelector && /* @__PURE__ */ jsx(
+        TableColumnVisibility,
+        {
+          columns,
+          value: visibleKeys,
+          label: `${label}\u663E\u793A\u5217`,
+          onChange: (keys) => {
+            const next = normalizeColumns(keys);
+            if (visibleColumns === void 0)
+              setHidden(
+                columns.filter((column) => !next.includes(column.key)).map((column) => column.key)
+              );
+            onVisibleColumnsChange?.(next);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(LoadingOverlay, { active: loading, children: /* @__PURE__ */ jsxs("div", { className: s.scroll, children: [
+      /* @__PURE__ */ jsxs("table", { className: s.table, "aria-label": label, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          onSelectionChange && /* @__PURE__ */ jsx("th", { className: s.selection, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: "\u9009\u62E9\u5F53\u524D\u9875",
+              checked: ids.length > 0 && selectedCount === ids.length,
+              indeterminate: selectedCount > 0 && selectedCount < ids.length,
+              disabled: !ids.length,
+              onChange: (checked) => onSelectionChange(
+                checked ? [.../* @__PURE__ */ new Set([...selection, ...ids])] : selection.filter((key) => !ids.includes(key))
+              )
+            }
+          ) }),
+          displayColumns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": sort?.key === column.key ? sort.direction === "asc" ? "ascending" : "descending" : "none",
+              children: /* @__PURE__ */ jsxs("div", { className: s.heading, children: [
+                column.sortable ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: s.sort,
+                    "aria-label": `\u6392\u5E8F${column.label}`,
+                    onClick: () => changeSort(
+                      sort?.key !== column.key ? { key: column.key, direction: "asc" } : sort.direction === "asc" ? { key: column.key, direction: "desc" } : null
+                    ),
+                    children: [
+                      column.label,
+                      sort?.key === column.key ? sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}) : /* @__PURE__ */ jsx(ArrowUpDown, {})
+                    ]
+                  }
+                ) : column.label,
+                column.filterOptions && /* @__PURE__ */ jsx(
+                  TableColumnFilter,
+                  {
+                    label: column.label,
+                    options: column.filterOptions,
+                    value: filters[column.key] || [],
+                    onChange: (values) => changeFilters({ ...filters, [column.key]: values })
+                  }
+                )
+              ] })
+            },
+            column.key
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: visible.map((row) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            "data-selected": selection.includes(rowKey(row)),
+            children: [
+              onSelectionChange && /* @__PURE__ */ jsx("td", { className: s.selection, children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  label: selectionLabel?.(row) || `\u9009\u62E9${rowKey(row)}`,
+                  checked: selection.includes(rowKey(row)),
+                  onChange: (checked) => onSelectionChange(
+                    checked ? [.../* @__PURE__ */ new Set([...selection, rowKey(row)])] : selection.filter((key) => key !== rowKey(row))
+                  )
+                }
+              ) }),
+              displayColumns.map((column) => /* @__PURE__ */ jsx("td", { children: column.render ? column.render(row) : column.value(row) }, column.key))
+            ]
+          },
+          rowKey(row)
+        )) })
+      ] }),
+      !filtered.length && /* @__PURE__ */ jsx(Placeholder, { variant: rows.length ? "search" : "empty" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        summary: selection.length ? ` \xB7 \u5DF2\u9009\u62E9 ${selection.length} \u9879` : void 0,
+        page: current,
+        pageSize,
+        total: count,
+        pageSizes,
+        resetPageOnSizeChange: false,
+        onPageChange: (next) => changePage({ page: next, pageSize }),
+        onPageSizeChange: (next) => changePage({ page: 1, pageSize: next })
+      }
+    )
+  ] });
+}
+export {
+  DataTable
+};

package/components/DataTable.module.css

@@ -0,0 +1,112 @@
+.container {
+  min-width: 0;
+}
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.columnMenu {
+  display: flex;
+  flex-direction: column;
+}
+.scroll {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+}
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  white-space: nowrap;
+}
+.table th {
+  background: var(--soft);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+}
+.table td,
+.table th {
+  padding: 12px 16px;
+  border-bottom: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  height: 48px;
+}
+.table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.table tbody tr:hover {
+  background: var(--hover);
+}
+.table tr[data-selected="true"] {
+  background: var(--selected);
+}
+.heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.sort,
+.filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 0;
+  background: transparent;
+  padding: 4px;
+  border-radius: 5px;
+  color: inherit;
+}
+.sort:hover,
+.filter:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.sort svg,
+.filter svg {
+  width: 14px;
+  height: 14px;
+}
+.filter[data-active="true"] {
+  color: var(--accent);
+  background: var(--selected);
+}
+.filterPanel {
+  max-height: 300px;
+  overflow: auto;
+}
+.selection {
+  width: 44px;
+}
+.selection label > span:last-child {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.table td > button {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  border-radius: 5px;
+  padding: 4px;
+  color: inherit;
+}
+
+.filterReset {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}

package/components/DatePicker.d.ts

@@ -0,0 +1,15 @@
+import { type FieldOptions } from "./field";
+import { type DateConstraints } from "./dateConstraints";
+import { type DateRangePickerProps } from "./DateRangePicker";
+export type DatePickerMode = "date" | "time" | "datetime" | "range";
+export type SingleDatePickerProps = FieldOptions & DateConstraints & {
+    value: string;
+    onChange(value: string): void;
+    label: string;
+    mode?: Exclude<DatePickerMode, "range">;
+    seconds?: boolean;
+};
+export type DatePickerProps = SingleDatePickerProps | (DateRangePickerProps & {
+    mode: "range";
+});
+export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;

package/components/DatePicker.js

@@ -0,0 +1,186 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { useId, useState } from "react";
+import { CalendarDays, Clock3 } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import { Calendar, dateKey } from "./Calendar.js";
+import { TimeColumns } from "./TimeColumns.js";
+import { Button } from "./Button.js";
+import s from "./DatePicker.module.css";
+import {
+  boundedDate,
+  isDateAllowed
+} from "./dateConstraints.js";
+import { DateRangePicker } from "./DateRangePicker.js";
+function DatePicker(props) {
+  return props.mode === "range" ? /* @__PURE__ */ jsx(DateRangePicker, { ...props }) : /* @__PURE__ */ jsx(SingleDatePicker, { ...props });
+}
+function SingleDatePicker({
+  value,
+  onChange,
+  label,
+  mode = "date",
+  seconds = false,
+  disabled,
+  readOnly,
+  name,
+  id: controlId,
+  required,
+  error,
+  hint,
+  minDate,
+  maxDate,
+  disabledDate,
+  ...aria
+}) {
+  const constraints = { minDate, maxDate, disabledDate };
+  const field = useFieldControl({
+    id: controlId,
+    name,
+    label,
+    disabled,
+    readOnly,
+    required,
+    error,
+    hint,
+    ...aria
+  });
+  const pop = usePopover(field.disabled || field.readOnly), id = useId(), [date, setDate] = useState(value.slice(0, 10) || dateKey(/* @__PURE__ */ new Date())), [time, setTime] = useState("00:00");
+  const close = pop.closeAndFocus;
+  const show = () => {
+    if (field.disabled || field.readOnly) return;
+    if (pop.open) {
+      pop.close();
+      return;
+    }
+    setDate(
+      mode === "time" ? dateKey(/* @__PURE__ */ new Date()) : boundedDate(value.slice(0, 10), constraints)
+    );
+    setTime(
+      (mode === "time" ? value : value.split(/[T ]/)[1]) || (seconds ? "00:00:00" : "00:00")
+    );
+    pop.show();
+  };
+  const commit = () => {
+    if (mode !== "time" && !isDateAllowed(date, constraints)) return;
+    onChange(
+      mode === "date" ? date : mode === "time" ? time : date + "T" + time
+    );
+    close();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...fieldTriggerProps(field),
+        role: "combobox",
+        ref: pop.anchor,
+        type: "button",
+        className: s.trigger,
+        "aria-expanded": pop.open,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: show,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" && !pop.open) {
+            e.preventDefault();
+            show();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: value.replace("T", " ") || "\u8BF7\u9009\u62E9" }),
+          mode === "time" ? /* @__PURE__ */ jsx(Clock3, {}) : /* @__PURE__ */ jsx(CalendarDays, {})
+        ]
+      }
+    ),
+    field.name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        id,
+        width: mode === "datetime" ? seconds ? 530 : 470 : mode === "time" ? seconds ? 260 : 210 : 288,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: s.body, "data-mode": mode, children: [
+            mode !== "time" && /* @__PURE__ */ createElement(
+              Calendar,
+              {
+                ...constraints,
+                key: pop.open ? "open" : "closed",
+                value: date,
+                onChange: (next) => {
+                  if (!isDateAllowed(next, constraints)) return;
+                  setDate(next);
+                  if (mode === "date") {
+                    onChange(next);
+                    close();
+                  }
+                }
+              }
+            ),
+            mode !== "date" && /* @__PURE__ */ jsx(
+              TimeColumns,
+              {
+                value: time,
+                onChange: setTime,
+                seconds,
+                active: pop.open
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("footer", { className: s.footer, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: mode !== "time" && !isDateAllowed(dateKey(/* @__PURE__ */ new Date()), constraints),
+                onClick: () => {
+                  const now = /* @__PURE__ */ new Date(), nextDate = dateKey(now), nextTime = [
+                    now.getHours(),
+                    now.getMinutes(),
+                    ...seconds ? [now.getSeconds()] : []
+                  ].map((v) => String(v).padStart(2, "0")).join(":");
+                  if (mode !== "time" && !isDateAllowed(nextDate, constraints))
+                    return;
+                  setDate(nextDate);
+                  setTime(nextTime);
+                  if (mode === "date") {
+                    onChange(nextDate);
+                    close();
+                  }
+                },
+                children: mode === "date" ? "\u4ECA\u5929" : "\u6B64\u523B"
+              }
+            ),
+            mode !== "date" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                size: "small",
+                onClick: commit,
+                disabled: mode !== "time" && !isDateAllowed(date, constraints),
+                children: "\u786E\u5B9A"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DatePicker
+};

package/components/DatePicker.module.css

@@ -0,0 +1,85 @@
+.trigger {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 5px 10px;
+  min-width: 168px;
+}
+.trigger svg {
+  width: 15px;
+  height: 15px;
+  color: var(--muted);
+}
+.body {
+  display: flex;
+}
+.body[data-mode="datetime"] > :first-child {
+  flex: 1;
+}
+.body[data-mode="datetime"] > :last-child {
+  width: 170px;
+  border-left: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  margin-left: 8px;
+}
+.body[data-mode="time"] > div {
+  width: 100%;
+}
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 4px 4px;
+  margin-top: 6px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  min-height: 38px;
+}
+.footer > button:first-child {
+  border: 0;
+  background: transparent;
+  border-radius: 5px;
+  padding: 5px 10px;
+  font-size: 12px;
+}
+.footer > button:first-child:hover {
+  background: var(--hover);
+}
+.footer > button:first-child:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+.footer > button:first-child:disabled:hover {
+  background: transparent;
+}
+.rangeSummary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 8px;
+  font-size: 12px;
+  border-bottom: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.rangeSummary > svg {
+  width: 14px;
+  height: 14px;
+  color: var(--muted);
+}
+.rangeError {
+  min-height: 20px;
+  color: var(--danger);
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.rangeActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.footer > button:only-child {
+  width: 100%;
+}

package/components/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+import { type FieldOptions } from "./field";
+import { type DateConstraints, type DateRange } from "./dateConstraints";
+export type DateRangePickerProps = FieldOptions & DateConstraints & {
+    value: DateRange;
+    onChange(value: DateRange): void;
+    label: string;
+    clearable?: boolean;
+};
+export declare function DateRangePicker({ value, onChange, label, clearable, minDate, maxDate, disabledDate, ...options }: DateRangePickerProps): import("react").JSX.Element;