@blocklet/pages-kit-inner-components 0.4.99 → 0.4.101

package/lib/es/chunks/config-color-B-ax03qd.js

@@ -0,0 +1,328 @@
+import { jsx as o, jsxs as f, Fragment as W } from "react/jsx-runtime";
+import j from "@arcblock/ux/lib/Empty";
+import { useLocaleContext as G } from "@arcblock/ux/lib/Locale/context";
+import { styled as R } from "@arcblock/ux/lib/Theme";
+import { useMuiColorPalette as E } from "@blocklet/pages-kit/contexts/color";
+import { isGradient as B, getSafeGradient as S, isColorString as H } from "@blocklet/pages-kit/utils/style";
+import "@emotion/css";
+import { TextField as L, Stack as P, FormControlLabel as _, Switch as U, Box as a, InputAdornment as X, Dialog as N, DialogTitle as O, Typography as I, ButtonGroup as Y, Button as K, DialogContent as $, Tooltip as q, Skeleton as J, DialogActions as Q } from "@mui/material";
+import { useReactive as Z, useLocalStorageState as ee, useBoolean as oe } from "ahooks";
+import "lodash/without";
+import { forwardRef as A, useState as ie, useEffect as re, useImperativeHandle as V, lazy as te, useCallback as le, Suspense as ne } from "react";
+import ae from "tinycolor2";
+import { red as ce, pink as se, purple as ue, indigo as de, blue as me, cyan as pe, teal as fe, green as ge, lime as he, yellow as ye, amber as be, orange as xe, brown as Ce, grey as ve, blueGrey as ke } from "@mui/material/colors";
+import { getImageSize as z, getVideoSize as D, UploaderButton as Ke } from "../uploader.js";
+import { Icon as we } from "@iconify-icon/react";
+import { useDebounce as Ie } from "react-use";
+import { b as F } from "./state-DsXKwImw.js";
+ce[300], se[300], ue[300], // deepPurple['300'],
+de[300], me[300], // lightBlue['300'],
+pe[300], fe[300], ge[300], // lightGreen['300'],
+he[300], ye[300], be[300], xe[300], // deepOrange['300'],
+Ce[300], ve[300], ke[300];
+const Ue = A(function({ showMarkdown: g, markdown: c, onMarkdownChange: s, showUploader: e, value: t, meta: w, onChange: u, ...d }, y) {
+  const [l, b] = ie("");
+  re(() => {
+    b(t || "");
+  }, [t, b]);
+  const k = async () => {
+    if (l !== t) {
+      const i = F(l);
+      if (!i) {
+        u(l, void 0);
+        return;
+      }
+      const p = await z(i).catch(() => D(i)).catch(() => {
+      });
+      u(l, { ...p, filename: l });
+    }
+  };
+  Ie(
+    () => {
+      l !== t && u(l);
+    },
+    300,
+    [l]
+  ), V(y, () => ({
+    submit: k
+  }));
+  const m = {};
+  return e && (m.InputProps = {
+    sx: { pr: 0 },
+    endAdornment: /* @__PURE__ */ o(X, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ o(
+      Ke,
+      {
+        onChange: async ({ response: i }) => {
+          var x;
+          const p = (x = i == null ? void 0 : i.data) == null ? void 0 : x.filename, C = F(p) || "";
+          let r = {};
+          C && (r = await z(C).catch(() => D(C)).catch(() => {
+          })), u(p, {
+            ...r,
+            filename: p
+          });
+        }
+      }
+    ) })
+  }), /* @__PURE__ */ o(
+    L,
+    {
+      size: "small",
+      fullWidth: !0,
+      ...d,
+      label: /* @__PURE__ */ f(P, { direction: "row", spacing: 1, alignItems: "center", children: [
+        d.label,
+        g && /* @__PURE__ */ f(W, { children: [
+          " (",
+          /* @__PURE__ */ o(
+            _,
+            {
+              checked: c,
+              label: /* @__PURE__ */ o(a, { component: we, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
+              labelPlacement: "start",
+              control: /* @__PURE__ */ o(U, { size: "small" }),
+              sx: { ml: 0.25, pr: 1 },
+              onChange: (i, p) => s == null ? void 0 : s(p)
+            }
+          ),
+          ")"
+        ] })
+      ] }),
+      InputLabelProps: { shrink: !0, ...d.InputLabelProps },
+      value: l,
+      onChange: (i) => b(i.target.value),
+      ...m,
+      onKeyDown: (i) => {
+        i.keyCode !== 229 && i.key === "Enter" && k();
+      }
+    }
+  );
+}), Te = te(() => import("react-best-gradient-color-picker")), M = 400, T = 270;
+function Xe({ color: h, sx: g = {}, ...c }) {
+  H(h);
+  const s = {};
+  return B(h) ? s.backgroundImage = h : s.backgroundColor = h, /* @__PURE__ */ o(
+    a,
+    {
+      sx: {
+        ...g,
+        width: "100%",
+        paddingBottom: "100%",
+        cursor: "pointer",
+        transition: "opacity 0.2s",
+        border: "1px solid #ccc",
+        borderRadius: 0.5,
+        "&:hover": {
+          opacity: 0.75
+        },
+        ...s
+      },
+      ...c
+    }
+  );
+}
+const Ne = A(function({ onSave: g, enableMuiPalette: c = !0 }, s) {
+  const e = Z({
+    value: "",
+    originalMuiKey: null
+  }), { t } = G(), [w, u] = ee("pages-kit:color-picker-active-tab", {
+    defaultValue: 0
+  }), d = E(), y = {};
+  e.value ? B(e.value) ? y.backgroundImage = e.value : y.backgroundColor = e.value : y.border = "1px solid #ccc";
+  const [l, { setFalse: b, setTrue: k }] = oe(!1), m = le(() => {
+    b();
+  }, [b]), i = c && w === 0;
+  V(s, () => ({
+    open({ value: r } = { value: "" }) {
+      if (c && d.isMuiColorKey(r)) {
+        e.originalMuiKey = r;
+        const x = d.getColorByMuiKey(r);
+        e.value = S(x || r), u(0);
+      } else
+        e.originalMuiKey = null, e.value = S(r), c || u(1);
+      k();
+    },
+    close() {
+      m();
+    }
+  }));
+  const p = () => {
+    if (c && d)
+      if (i) {
+        const r = d.getMuiKeyByColor(e.value);
+        g({ value: r || e.value }, m);
+      } else
+        g({ value: e.value }, m);
+    else
+      g({ value: e.value }, m);
+  }, { groupedMuiColors: C } = d;
+  return /* @__PURE__ */ f(N, { disableEnforceFocus: !0, open: l, onClose: m, hideBackdrop: !0, children: [
+    /* @__PURE__ */ f(O, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ o(I, { variant: "inherit", component: "div", children: t("maker.configColor") }),
+      c && /* @__PURE__ */ f(Y, { size: "small", "aria-label": "color mode selector", children: [
+        /* @__PURE__ */ o(
+          K,
+          {
+            variant: i ? "contained" : "outlined",
+            onClick: () => u(0),
+            sx: {
+              fontWeight: 500,
+              textTransform: "none",
+              minWidth: "unset"
+            },
+            children: t("maker.configColorMuiTheme") || "Theme Color"
+          }
+        ),
+        /* @__PURE__ */ o(
+          K,
+          {
+            variant: w === 1 ? "contained" : "outlined",
+            onClick: () => u(1),
+            sx: {
+              fontWeight: 500,
+              textTransform: "none",
+              minWidth: "unset"
+            },
+            children: t("maker.configColorCustomColor") || "Custom Color"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ f($, { sx: { width: 600, display: "flex", flexDirection: "row", gap: 2, overflowX: "hidden" }, children: [
+      /* @__PURE__ */ f(
+        a,
+        {
+          sx: {
+            ...y,
+            flex: "0 0 270px",
+            borderRadius: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "sticky",
+            top: 0
+          },
+          children: [
+            !e.value && /* @__PURE__ */ o(j, { children: t("error.notConfig") }),
+            e.originalMuiKey && i && /* @__PURE__ */ o(
+              I,
+              {
+                variant: "body2",
+                sx: {
+                  bgcolor: "rgba(255,255,255,0.7)",
+                  px: 2,
+                  py: 1,
+                  borderRadius: 1,
+                  color: "#000",
+                  maxWidth: "90%",
+                  textAlign: "center"
+                },
+                children: e.originalMuiKey
+              }
+            )
+          ]
+        },
+        "color-preview"
+      ),
+      /* @__PURE__ */ o(a, { sx: { flex: 1 }, children: i ? (
+        // MUI 主题色面板
+        /* @__PURE__ */ o(a, { sx: { height: M }, children: Object.entries(C).map(([r, x]) => /* @__PURE__ */ f(a, { sx: { pb: 1.5 }, children: [
+          /* @__PURE__ */ o(
+            I,
+            {
+              variant: "subtitle2",
+              gutterBottom: !0,
+              sx: { textTransform: "capitalize", mb: 0.5, lineHeight: 1 },
+              children: r
+            }
+          ),
+          /* @__PURE__ */ o(a, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: x.map((n) => {
+            let v = "";
+            return e.originalMuiKey === n.colorKey && (n.colorValue === "transparent" ? v = "rgba(0,0,0,0.7)" : ae(n.colorValue).isDark() ? v = "rgba(255,255,255,0.8)" : v = "rgba(0,0,0,0.7)"), /* @__PURE__ */ o(q, { title: n.colorKey, children: /* @__PURE__ */ o(
+              a,
+              {
+                onClick: () => {
+                  e.value = n.colorValue, e.originalMuiKey = n.colorKey;
+                },
+                sx: {
+                  width: 28,
+                  height: 28,
+                  bgcolor: n.colorValue,
+                  border: e.originalMuiKey === n.colorKey ? `2px solid ${v}` : "1px solid #ccc",
+                  borderRadius: 0.5,
+                  cursor: "pointer",
+                  "&:hover": { opacity: 0.8 },
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  // 透明色时显示棋盘背景
+                  ...n.colorValue === "transparent" ? {
+                    background: "repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px"
+                  } : {}
+                },
+                children: e.originalMuiKey === n.colorKey && /* @__PURE__ */ o(
+                  "i",
+                  {
+                    className: "i-mdi:check",
+                    style: {
+                      color: v,
+                      fontSize: "1.2rem"
+                    }
+                  }
+                )
+              }
+            ) }, n.colorKey);
+          }) })
+        ] }, r)) })
+      ) : (
+        // 自定义颜色选择器
+        /* @__PURE__ */ o(a, { sx: { overflowY: "auto", overflowX: "hidden" }, children: /* @__PURE__ */ o(ne, { fallback: /* @__PURE__ */ o(J, { variant: "rectangular", width: T, height: M }), children: /* @__PURE__ */ o(
+          Te,
+          {
+            disableDarkMode: !0,
+            width: T,
+            height: T,
+            value: e.value,
+            onChange: (r) => {
+              e.value = r, e.originalMuiKey = null;
+            },
+            hidePresets: !0,
+            hideAdvancedSliders: !0,
+            hideColorGuide: !0,
+            hideInputType: !0
+          }
+        ) }) })
+      ) })
+    ] }),
+    /* @__PURE__ */ f(Q, { children: [
+      /* @__PURE__ */ o(K, { variant: "outlined", size: "small", onClick: m, children: t("common.cancel") }),
+      /* @__PURE__ */ o(K, { variant: "contained", size: "small", onClick: p, children: t("maker.save") })
+    ] })
+  ] });
+});
+R(a)`
+  .color-item {
+    position: relative;
+  }
+  .color-item__checked {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.85);
+  }
+  .color-item__delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+`;
+export {
+  Ue as C,
+  Xe as a,
+  Ne as b
+};

package/lib/es/chunks/{draft-data-B1GJKphX.js → draft-data-0n1CKRWr.js}

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { u as o, S as a, k as s, h as n } from "./state-CYDNg8EG.js";
+import { u as o, S as a, l as s, d as n } from "./state-DsXKwImw.js";
 function d({ children: t }) {
   const r = o();
   return /* @__PURE__ */ e(a, { url: s(r ?? ""), name: "root", waitingSynced: !0, children: /* @__PURE__ */ e(i, { children: t }) });