@taskon/widget-react 0.0.1 → 0.0.2

package/dist/chunks/{Table-CWGf2FKV.js → WidgetShell-8xn-Jivw.js}

@@ -1,8 +1,176 @@
-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");
+import { useState, useMemo, useCallback, useEffect, forwardRef } from "react";
+import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
+import { h as useTaskOnContext, j as composeRefs, T as ThemeProvider } from "./ThemeProvider-CulHkqqY.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import '../WidgetShell.css';function cloudThemeToReactTheme(cloud) {
+  const isDual = cloud.colorMode.type === "dual";
+  const modeStrategy = isDual ? cloud.colorMode.dualVariant : "auto";
+  let mode;
+  if (cloud.colorMode.type === "dual") {
+    mode = cloud.colorMode.dualVariant === "auto" ? "auto" : "light";
+  } else {
+    mode = cloud.colorMode.type;
+  }
+  const mapColorToSeed = (color) => ({
+    colorPrimary: color.primaryColor,
+    colorSecondary: color.secondaryColor,
+    colorSuccess: color.successColor,
+    colorWarning: color.warningColor,
+    colorError: color.errorColor,
+    colorLink: color.linkColor,
+    colorTextOnPrimary: color.textInPrimaryButton,
+    colorText: color.textColor,
+    colorBgBase: color.backgroundColor
+  });
+  const mapSpacingToSeed = () => {
+    const base = Math.max(1, Number(cloud.spacing.sizeBaseStep) || 1);
+    const unit = Math.max(1, Number(cloud.spacing.sizeChangeUnit) || 1);
+    return {
+      spacingBaseStep: base,
+      spacingChangeUnit: unit
+    };
+  };
+  return {
+    mode,
+    modeStrategy,
+    // Global seed (shape and spacing values applied regardless of mode)
+    seed: {
+      borderRadius: cloud.shape.borderRadius,
+      fontSize: cloud.shape.fontSize,
+      ...mapSpacingToSeed()
+    },
+    // Per-mode color overrides
+    light: {
+      seed: mapColorToSeed(cloud.light)
+    },
+    dark: {
+      seed: mapColorToSeed(cloud.dark)
+    }
+  };
+}
+function usePagination(options) {
+  const { total, pageSize, initialPage = 0, mode = "pagination" } = options;
+  const [page, setPage] = useState(initialPage);
+  const totalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(total / pageSize));
+  }, [total, pageSize]);
+  const safePage = useMemo(() => {
+    return Math.min(page, totalPages - 1);
+  }, [page, totalPages]);
+  if (safePage !== page) {
+    setPage(safePage);
+  }
+  const hasPrevious = safePage > 0;
+  const hasNext = safePage < totalPages - 1;
+  const goToPage = useCallback(
+    (targetPage) => {
+      const validPage = Math.max(0, Math.min(targetPage, totalPages - 1));
+      setPage(validPage);
+    },
+    [totalPages]
+  );
+  const goToPrevious = useCallback(() => {
+    if (hasPrevious) {
+      setPage((p) => p - 1);
+    }
+  }, [hasPrevious]);
+  const goToNext = useCallback(() => {
+    if (hasNext) {
+      setPage((p) => p + 1);
+    }
+  }, [hasNext]);
+  const reset = useCallback(() => {
+    setPage(0);
+  }, []);
+  const startIndex = safePage * pageSize + 1;
+  const endIndex = Math.min((safePage + 1) * pageSize, total);
+  const hasMore = useMemo(() => {
+    if (mode === "infinite") {
+      return safePage < totalPages - 1;
+    }
+    return hasNext;
+  }, [mode, safePage, totalPages, hasNext]);
+  const loadedCount = useMemo(() => {
+    if (mode === "infinite") {
+      return Math.min((safePage + 1) * pageSize, total);
+    }
+    return endIndex - startIndex + 1;
+  }, [mode, safePage, pageSize, total, startIndex, endIndex]);
+  const loadMore = useCallback(() => {
+    if (mode === "infinite" && hasMore) {
+      setPage((p) => p + 1);
+    }
+  }, [mode, hasMore]);
+  return {
+    page: safePage,
+    totalPages,
+    hasPrevious,
+    hasNext,
+    goToPage,
+    goToPrevious,
+    goToNext,
+    reset,
+    startIndex,
+    endIndex,
+    // Infinite 模式专用
+    loadMore,
+    hasMore,
+    loadedCount
+  };
+}
+function useWidgetConfig(widgetId) {
+  const { client } = useTaskOnContext();
+  const [config, setConfig] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!widgetId || !client) {
+      setConfig(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    const api = createWidgetApi(client);
+    api.getWidgetInfo(widgetId).then((info) => {
+      if (!cancelled) {
+        setConfig(parseWidgetConfig(info));
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.warn("[TaskOn] Failed to load widget config:", err);
+        setError(
+          err instanceof Error ? err.message : "Failed to load widget config"
+        );
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [widgetId, client]);
+  return { config, isLoading, error };
+}
+function useResolvedWidgetConfig(widgetId) {
+  const { config, isLoading, error } = useWidgetConfig(widgetId);
+  const cloudTheme = useMemo(() => {
+    if (!(config == null ? void 0 : config.theme)) return void 0;
+    return cloudThemeToReactTheme(config.theme);
+  }, [config == null ? void 0 : config.theme]);
+  return {
+    functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
+    cloudTheme,
+    isConfigLoading: isLoading,
+    configError: error
+  };
+}
+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;
@@ -122,7 +290,7 @@ const Button = forwardRef(
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "var(--taskon-spacing-xs, 4px)",
+      gap: "var(--taskon-spacing-xs)",
       fontFamily: "inherit",
       fontWeight: 500,
       lineHeight: 1.5,
@@ -138,55 +306,55 @@ const Button = forwardRef(
     };
     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)",
+        fontSize: "var(--taskon-font-size-sm)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-sm)",
+        borderRadius: "var(--taskon-border-radius-sm)",
         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)",
+        fontSize: "var(--taskon-font-size)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-md)",
+        borderRadius: "var(--taskon-border-radius)",
         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)",
+        fontSize: "var(--taskon-font-size-lg)",
+        padding: isIconOnly ? "var(--taskon-spacing-sm)" : "var(--taskon-spacing-sm) var(--taskon-spacing-lg)",
+        borderRadius: "var(--taskon-border-radius)",
         minWidth: isIconOnly ? "40px" : "96px",
         height: "40px"
       }
     };
     const variantStyles = {
       primary: {
-        backgroundColor: "var(--taskon-color-primary, #6366f1)",
-        color: "#ffffff"
+        backgroundColor: "var(--taskon-color-primary)",
+        color: "var(--taskon-color-text-on-primary)"
       },
       secondary: {
-        backgroundColor: "var(--taskon-color-secondary, #64748b)",
-        color: "#ffffff"
+        backgroundColor: "var(--taskon-color-secondary)",
+        color: "var(--taskon-color-text-on-primary)"
       },
       outline: {
         backgroundColor: "transparent",
-        color: "var(--taskon-color-text, #0f172a)",
-        border: "1px solid var(--taskon-color-border, #e2e8f0)"
+        color: "var(--taskon-color-text)",
+        border: "1px solid var(--taskon-color-border)"
       },
       ghost: {
         backgroundColor: "transparent",
-        color: "var(--taskon-color-text, #0f172a)"
+        color: "var(--taskon-color-text)"
       },
       danger: {
-        backgroundColor: "var(--taskon-color-error, #ef4444)",
-        color: "#ffffff"
+        backgroundColor: "var(--taskon-color-error)",
+        color: "var(--taskon-color-text-on-primary)"
       }
     };
     const hoverStyles = {
-      primary: "hover:bg-[var(--taskon-color-primary-hover,#9197fe)] active:bg-[var(--taskon-color-primary-active,#4b49cb)]",
+      primary: "hover:bg-[var(--taskon-color-primary-hover)] active:bg-[var(--taskon-color-primary-active)]",
       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)]",
+      outline: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
+      ghost: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
       danger: "hover:opacity-90 active:opacity-80"
     };
     const mergedStyle = {
@@ -442,8 +610,50 @@ function Table({
     loading && data && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-overlay", children: /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }) })
   ] });
 }
+function WidgetShell({
+  widgetId,
+  isConfigLoading,
+  cloudTheme,
+  themeMode,
+  className,
+  errorMessage,
+  children
+}) {
+  const resolvedCloudTheme = useMemo(() => {
+    if (!cloudTheme) return void 0;
+    if (!themeMode) return cloudTheme;
+    return {
+      ...cloudTheme,
+      mode: themeMode
+    };
+  }, [cloudTheme, themeMode]);
+  if (widgetId && isConfigLoading) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: `${className}-loading`, children: [
+      /* @__PURE__ */ jsx("div", { className: `${className}-loading-spinner` }),
+      /* @__PURE__ */ jsx("span", { children: "Loading config..." })
+    ] }) });
+  }
+  if (errorMessage) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${className}-error-message`,
+        style: { overflowWrap: "anywhere", wordBreak: "break-word" },
+        children: errorMessage
+      }
+    ) }) });
+  }
+  if (resolvedCloudTheme) {
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme: resolvedCloudTheme, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
 export {
   Button as B,
   Pagination as P,
-  Table as T
+  Table as T,
+  WidgetShell as W,
+  usePagination as a,
+  cloudThemeToReactTheme as c,
+  useResolvedWidgetConfig as u
 };