@epxing/dashboard 0.0.0-stage → 5.3.0-beta.2

package/dist/src/theme-style.js

@@ -0,0 +1,134 @@
+import '../style.css';
+const kebabCase = (key) => key.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const camelCase = (key) => key.replace(/-(\w)/g, (s, c) => c.toUpperCase());
+const ACCENT_BASE = {
+  content: "''",
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  height: "3px",
+  "pointer-events": "none"
+};
+function formatStyleToCss(style, getFileUrl) {
+  if (!style) return "";
+  return Object.keys(style).filter((key) => style[key] !== "" && style[key] !== null && style[key] !== void 0).map((key) => {
+    const cssKey = kebabCase(key);
+    if (cssKey === "background-image") {
+      return `${cssKey}: url(${getFileUrl(style[key])});`;
+    }
+    return `${cssKey}: ${style[key]};`;
+  }).join("\n");
+}
+function flattenStyleGroups(style) {
+  if (!style || typeof style !== "object") return null;
+  const flat = {};
+  for (const key in style) {
+    const value = style[key];
+    if (value && typeof value === "object") {
+      Object.assign(flat, value);
+    } else if (value !== "" && value !== null && value !== void 0) {
+      flat[key] = value;
+    }
+  }
+  return flat;
+}
+function collectStyleRules(parts, scope, getFileUrl, options = {}) {
+  const { containerSelector = ".epx-dashboard__container", hoverAncestor = "" } = options;
+  const { page = {}, component = {}, num = {} } = parts;
+  const rules = [];
+  const addRule = (selector, ...styleGroups) => {
+    const css = styleGroups.map((group) => formatStyleToCss(group, getFileUrl)).filter(Boolean).join("\n");
+    if (css) rules.push(`${selector} {
+${css}
+}`);
+  };
+  const addAccent = (selector, accent) => {
+    if (!accent || !Object.keys(accent).length) return;
+    addRule(selector, { position: "relative", overflow: "hidden" });
+    addRule(`${selector}::before`, { ...ACCENT_BASE, ...accent });
+  };
+  const hoverSel = (elementSel) => hoverAncestor ? `${scope} ${hoverAncestor}:hover ${elementSel}` : `${scope} ${elementSel}:hover`;
+  const addHoverFont = (elementSel, hoverStyle, selectors) => {
+    const font = hoverStyle && hoverStyle.fontStyle;
+    if (!font || !Object.keys(font).length) return;
+    const css = Object.keys(font).filter((key) => font[key] !== "" && font[key] !== null && font[key] !== void 0).map((key) => `${kebabCase(key)}: ${font[key]} !important;`).join("\n");
+    const base = hoverSel(elementSel);
+    if (css) rules.push(`${selectors.map((s) => `${base} ${s}`).join(", ")} {
+${css}
+}`);
+  };
+  addRule(`${scope} ${containerSelector}`.trim(), page.background);
+  addRule(`${scope} .epx-dashboard__component`, component.background, component.border, component.fontStyle, component.shadow);
+  addRule(hoverSel(".epx-dashboard__component"), flattenStyleGroups(component.hoverStyle));
+  addHoverFont(".epx-dashboard__component", component.hoverStyle, [".epx-chart__title", ".epx-card-num__title", ".epx-card-num__num font"]);
+  addAccent(`${scope} .epx-dashboard__component`, component.topAccent);
+  addRule(`${scope} .epx-chart__header`, component.titleBackground);
+  addRule(`${scope} .epx-chart__title, ${scope} .epx-card-num__title`, component.titleFontStyle);
+  addRule(`${scope} .epx-card-num`, num.background, num.border, num.shadow);
+  addRule(hoverSel(".epx-card-num"), flattenStyleGroups(num.hoverStyle));
+  addHoverFont(".epx-card-num", num.hoverStyle, [".epx-card-num__title", ".epx-card-num__num font"]);
+  addAccent(`${scope} .epx-card-num`, num.topAccent);
+  addRule(`${scope} .epx-card-num__title`, num.titleFontStyle);
+  addRule(`${scope} .epx-card-num__num font`, num.fontStyle);
+  return rules;
+}
+function buildThemeCss(themeStyles = {}, scope, getFileUrl, options = {}) {
+  const rules = collectStyleRules(themeStyles, scope, getFileUrl, options);
+  const customCss = themeStyles.customCss || themeStyles.custom && themeStyles.custom.css;
+  if (typeof customCss === "string" && customCss.trim()) {
+    rules.push(customCss.replace(/&/g, scope));
+  }
+  if (themeStyles.mobile && typeof themeStyles.mobile === "object") {
+    const mobileRules = collectStyleRules(themeStyles.mobile, scope, getFileUrl, options);
+    if (mobileRules.length) {
+      rules.push(`@media only screen and (max-width: 992px) {
+${mobileRules.join("\n")}
+}`);
+    }
+    if (options.mobilePreview) {
+      rules.push(...collectStyleRules(themeStyles.mobile, `${scope}.is-mobile-preview`, getFileUrl, options));
+    }
+  }
+  return rules.join("\n");
+}
+function buildThemeChartConfig(themeStyles = {}, isMobile = false) {
+  const baseComponent = themeStyles.component || {};
+  const baseChart = themeStyles.chart || {};
+  const mobile = isMobile && themeStyles.mobile || {};
+  const fontStyle = { ...baseComponent.fontStyle || {}, ...(mobile.component || {}).fontStyle || {} };
+  const chart = { ...baseChart, ...mobile.chart || {} };
+  const config = {};
+  if (Object.keys(fontStyle).length) {
+    const textStyle = {};
+    for (const key in fontStyle) {
+      textStyle[camelCase(key)] = fontStyle[key];
+    }
+    Object.assign(config, {
+      textStyle,
+      legend: { textStyle },
+      xAxis: { axisLabel: { ...textStyle } },
+      yAxis: { axisLabel: { ...textStyle } }
+    });
+  }
+  const colors = typeof chart.colors === "string" ? chart.colors.split(/[,，\s]+/).filter(Boolean) : chart.colors;
+  if (Array.isArray(colors) && colors.length) {
+    config.color = colors;
+  }
+  if (chart.splitLineColor) {
+    const splitLine = { lineStyle: { color: chart.splitLineColor } };
+    config.xAxis = { ...config.xAxis, splitLine: { ...splitLine } };
+    config.yAxis = { ...config.yAxis, splitLine: { ...splitLine } };
+  }
+  if (chart.axisLineColor) {
+    const axisLine = { lineStyle: { color: chart.axisLineColor } };
+    config.xAxis = { ...config.xAxis, axisLine: { ...axisLine } };
+    config.yAxis = { ...config.yAxis, axisLine: { ...axisLine } };
+  }
+  return config;
+}
+export {
+  buildThemeChartConfig,
+  buildThemeCss,
+  formatStyleToCss
+};