@taskon/widget-react 0.0.1

package/dist/chunks/Table-CWGf2FKV.js

@@ -0,0 +1,449 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { forwardRef } from "react";
+import { c as composeRefs } from "./ThemeProvider-Cs8IUVQj.js";
+import '../Table.css';var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+var use = React[" use ".trim().toString()];
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+const Button = forwardRef(
+  ({
+    size = "medium",
+    variant = "primary",
+    loading = false,
+    iconPosition,
+    leftIcon,
+    rightIcon,
+    asChild = false,
+    disabled,
+    className = "",
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const actualIconPosition = iconPosition || (leftIcon ? "left" : rightIcon ? "right" : void 0);
+    const isIconOnly = actualIconPosition === "only" || !children && (leftIcon || rightIcon);
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "var(--taskon-spacing-xs, 4px)",
+      fontFamily: "inherit",
+      fontWeight: 500,
+      lineHeight: 1.5,
+      border: "none",
+      outline: "none",
+      cursor: disabled || loading ? "not-allowed" : "pointer",
+      transition: "all 0.2s ease-in-out",
+      position: "relative",
+      userSelect: "none",
+      whiteSpace: "nowrap",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    };
+    const sizeStyles = {
+      small: {
+        fontSize: "var(--taskon-font-size-sm, 12px)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs, 4px)" : "var(--taskon-spacing-xs, 4px) var(--taskon-spacing-sm, 8px)",
+        borderRadius: "var(--taskon-border-radius-sm, 4px)",
+        minWidth: isIconOnly ? "24px" : "64px",
+        height: "24px"
+      },
+      medium: {
+        fontSize: "var(--taskon-font-size, 14px)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs, 4px)" : "var(--taskon-spacing-xs, 4px) var(--taskon-spacing-md, 16px)",
+        borderRadius: "var(--taskon-border-radius, 8px)",
+        minWidth: isIconOnly ? "32px" : "80px",
+        height: "32px"
+      },
+      large: {
+        fontSize: "var(--taskon-font-size-lg, 16px)",
+        padding: isIconOnly ? "var(--taskon-spacing-sm, 8px)" : "var(--taskon-spacing-sm, 8px) var(--taskon-spacing-lg, 24px)",
+        borderRadius: "var(--taskon-border-radius, 8px)",
+        minWidth: isIconOnly ? "40px" : "96px",
+        height: "40px"
+      }
+    };
+    const variantStyles = {
+      primary: {
+        backgroundColor: "var(--taskon-color-primary, #6366f1)",
+        color: "#ffffff"
+      },
+      secondary: {
+        backgroundColor: "var(--taskon-color-secondary, #64748b)",
+        color: "#ffffff"
+      },
+      outline: {
+        backgroundColor: "transparent",
+        color: "var(--taskon-color-text, #0f172a)",
+        border: "1px solid var(--taskon-color-border, #e2e8f0)"
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        color: "var(--taskon-color-text, #0f172a)"
+      },
+      danger: {
+        backgroundColor: "var(--taskon-color-error, #ef4444)",
+        color: "#ffffff"
+      }
+    };
+    const hoverStyles = {
+      primary: "hover:bg-[var(--taskon-color-primary-hover,#9197fe)] active:bg-[var(--taskon-color-primary-active,#4b49cb)]",
+      secondary: "hover:opacity-90 active:opacity-80",
+      outline: "hover:bg-[var(--taskon-color-bg-spotlight,#f8fafc)] active:bg-[var(--taskon-color-bg-spotlight,#f8fafc)]",
+      ghost: "hover:bg-[var(--taskon-color-bg-spotlight,#f8fafc)] active:bg-[var(--taskon-color-bg-spotlight,#f8fafc)]",
+      danger: "hover:opacity-90 active:opacity-80"
+    };
+    const mergedStyle = {
+      ...baseStyles,
+      ...sizeStyles[size],
+      ...variantStyles[variant]
+    };
+    const mergedClassName = `${className} ${hoverStyles[variant]}`.trim();
+    const renderLoadingIndicator = () => {
+      if (!loading) return null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: "1em",
+            height: "1em",
+            border: "2px solid currentColor",
+            borderTopColor: "transparent",
+            borderRadius: "50%",
+            animation: "taskon-button-spin 0.6s linear infinite"
+          }
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+          @keyframes taskon-button-spin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` }),
+      /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          ref,
+          disabled: disabled || loading,
+          className: mergedClassName,
+          style: mergedStyle,
+          ...props,
+          children: [
+            loading && renderLoadingIndicator(),
+            !loading && leftIcon && actualIconPosition === "left" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: leftIcon }),
+            !isIconOnly && children,
+            !loading && rightIcon && actualIconPosition === "right" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: rightIcon })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Button.displayName = "Button";
+const defaultPaginationMessages = {
+  previous: "Previous",
+  next: "Next",
+  page: "Page",
+  of: "of",
+  showing: "Showing {start}-{end} of {total}"
+};
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "taskon-pagination-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "taskon-pagination-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+}
+function Pagination({
+  page,
+  totalPages,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+  messages = defaultPaginationMessages,
+  className = "",
+  showRange,
+  showArrows = true,
+  showButtonText = false,
+  // 默认不显示按钮文字，只显示箭头图标
+  size = "medium"
+}) {
+  if (totalPages <= 1) {
+    return null;
+  }
+  const rangeText = showRange && messages.showing ? messages.showing.replace("{start}", String(showRange.start)).replace("{end}", String(showRange.end)).replace("{total}", String(showRange.total)) : null;
+  return /* @__PURE__ */ jsxs("div", { className: `taskon-pagination taskon-pagination--${size} ${className}`, children: [
+    rangeText && /* @__PURE__ */ jsx("span", { className: "taskon-pagination-range", children: rangeText }),
+    /* @__PURE__ */ jsxs("div", { className: "taskon-pagination-controls", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size,
+          disabled: !hasPrevious,
+          onClick: onPrevious,
+          "aria-label": messages.previous,
+          leftIcon: showArrows ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : void 0,
+          className: "taskon-pagination-btn taskon-pagination-btn--prev",
+          children: showButtonText && messages.previous
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "taskon-pagination-info", children: [
+        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-current", children: page + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-separator", children: " / " }),
+        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-total", children: totalPages })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size,
+          disabled: !hasNext,
+          onClick: onNext,
+          "aria-label": messages.next,
+          rightIcon: showArrows ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : void 0,
+          className: "taskon-pagination-btn taskon-pagination-btn--next",
+          children: showButtonText && messages.next
+        }
+      )
+    ] })
+  ] });
+}
+function Table({
+  columns,
+  data,
+  rowConfig,
+  loading = false,
+  loadingText = "Loading...",
+  empty,
+  striped = false,
+  compact = false,
+  borderless = false,
+  className = "",
+  style
+}) {
+  const tableClassName = [
+    "taskon-table",
+    striped && "taskon-table--striped",
+    compact && "taskon-table--compact",
+    borderless && "taskon-table--borderless"
+  ].filter(Boolean).join(" ");
+  const getRowKey = (rowConfig == null ? void 0 : rowConfig.getRowKey) || ((_, index) => index);
+  const getColumnStyle = (column) => {
+    const style2 = {};
+    if (column.width) {
+      style2.width = typeof column.width === "number" ? `${column.width}px` : column.width;
+    }
+    if (column.minWidth) {
+      style2.minWidth = typeof column.minWidth === "number" ? `${column.minWidth}px` : column.minWidth;
+    }
+    return style2;
+  };
+  const getAlignClassName = (align) => {
+    if (!align || align === "left") return "";
+    return `taskon-table__header--${align}`;
+  };
+  const getCellAlignClassName = (align) => {
+    if (!align || align === "left") return "";
+    return `taskon-table__cell--${align}`;
+  };
+  const renderHeader = () => /* @__PURE__ */ jsx("thead", { className: "taskon-table__head", children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: `taskon-table__header ${getAlignClassName(column.align)} ${column.headerClassName || ""}`,
+      style: getColumnStyle(column),
+      children: column.title
+    },
+    column.key
+  )) }) });
+  const renderLoading = () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: columns.length, className: "taskon-table__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: loadingText })
+  ] }) });
+  const renderEmpty = () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "taskon-table__empty", children: /* @__PURE__ */ jsxs("div", { className: "taskon-table__empty-content", children: [
+    (empty == null ? void 0 : empty.icon) && /* @__PURE__ */ jsx("div", { className: "taskon-table__empty-icon", children: empty.icon }),
+    (empty == null ? void 0 : empty.title) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-title", children: empty.title }),
+    (empty == null ? void 0 : empty.description) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-desc", children: empty.description }),
+    !(empty == null ? void 0 : empty.title) && !(empty == null ? void 0 : empty.description) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-title", children: "No data" })
+  ] }) }) });
+  const renderRows = () => data.map((row, rowIndex) => {
+    var _a, _b, _c;
+    const rowKey = getRowKey(row, rowIndex);
+    const isHighlighted = ((_a = rowConfig == null ? void 0 : rowConfig.isHighlighted) == null ? void 0 : _a.call(rowConfig, row, rowIndex)) || false;
+    const isDisabled = ((_b = rowConfig == null ? void 0 : rowConfig.isDisabled) == null ? void 0 : _b.call(rowConfig, row, rowIndex)) || false;
+    const isClickable = !!(rowConfig == null ? void 0 : rowConfig.onRowClick);
+    const customRowClassName = ((_c = rowConfig == null ? void 0 : rowConfig.rowClassName) == null ? void 0 : _c.call(rowConfig, row, rowIndex)) || "";
+    const rowClassName = [
+      "taskon-table__row",
+      isHighlighted && "taskon-table__row--highlighted",
+      isDisabled && "taskon-table__row--disabled",
+      isClickable && "taskon-table__row--clickable",
+      customRowClassName
+    ].filter(Boolean).join(" ");
+    const handleRowClick = () => {
+      var _a2;
+      if (isClickable && !isDisabled) {
+        (_a2 = rowConfig == null ? void 0 : rowConfig.onRowClick) == null ? void 0 : _a2.call(rowConfig, row, rowIndex);
+      }
+    };
+    return /* @__PURE__ */ jsx("tr", { className: rowClassName, onClick: handleRowClick, children: columns.map((column) => {
+      const value = row[column.key];
+      const cellContent = column.render ? column.render(value, row, rowIndex) : value;
+      const cellClassName = [
+        "taskon-table__cell",
+        getCellAlignClassName(column.align),
+        column.ellipsis && "taskon-table__cell--ellipsis",
+        column.cellClassName
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx("td", { className: cellClassName, style: getColumnStyle(column), children: cellContent }, column.key);
+    }) }, rowKey);
+  });
+  const renderBody = () => {
+    if (!data || data.length === 0) {
+      if (loading) {
+        return renderLoading();
+      }
+      return renderEmpty();
+    }
+    return renderRows();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `taskon-table-container ${className}`, style, children: [
+    /* @__PURE__ */ jsxs("table", { className: tableClassName, children: [
+      renderHeader(),
+      /* @__PURE__ */ jsx("tbody", { className: "taskon-table__body", children: renderBody() })
+    ] }),
+    loading && data && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-overlay", children: /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }) })
+  ] });
+}
+export {
+  Button as B,
+  Pagination as P,
+  Table as T
+};