@bifrostui/utils 2.0.0-beta.2 → 2.0.0-beta.5

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export { default as getRootElement } from './getRootElement';
 export { default as getBoundingClientRect } from './getBoundingClientRect';
 export * from './isType';
 export * from './render';
+export * from './themeCreator';

package/dist/index.js

@@ -75,6 +75,7 @@ var import_getRootElement = __toESM(require("./getRootElement"));
 var import_getBoundingClientRect = __toESM(require("./getBoundingClientRect"));
 __reExport(src_exports, require("./isType"), module.exports);
 __reExport(src_exports, require("./render"), module.exports);
+__reExport(src_exports, require("./themeCreator"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   blockTouch,
@@ -108,5 +109,6 @@ __reExport(src_exports, require("./render"), module.exports);
   useUniqueId,
   useValue,
   ...require("./isType"),
-  ...require("./render")
+  ...require("./render"),
+  ...require("./themeCreator")
 });

package/dist/themeCreator/createTheme.d.ts

@@ -0,0 +1,10 @@
+import { MountThemeVarsOptions, ThemeCreatorOptions } from './index.types';
+/**
+ * 挂载自定义主题
+ */
+declare const mountThemeVars: (options: MountThemeVarsOptions) => void;
+/**
+ * 创建主题
+ */
+declare const createTheme: (options: ThemeCreatorOptions) => string;
+export { createTheme, mountThemeVars };

package/dist/themeCreator/createTheme.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createTheme_exports = {};
+__export(createTheme_exports, {
+  createTheme: () => createTheme,
+  mountThemeVars: () => mountThemeVars
+});
+module.exports = __toCommonJS(createTheme_exports);
+const convertToCss = (styles) => {
+  let result = "";
+  const cssVarKeys = Object.keys(styles);
+  cssVarKeys.forEach((key, index) => {
+    const value = styles[key];
+    if (value.includes("PX")) {
+      result += "/* prettier-ignore */\n	";
+    }
+    result += `${key}: ${value};
+${index === cssVarKeys.length - 1 ? "" : "	"}`;
+  });
+  return result;
+};
+const mountThemeVars = (options) => {
+  const { theme = "", container } = options || {};
+  const style = document.createElement("style");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(theme));
+  if (!container) {
+    document.head.appendChild(style);
+    return;
+  }
+  container.appendChild(style);
+};
+const createTheme = (options) => {
+  const {
+    rootSelector = ":root, [data-color-mode='light'][data-theme]",
+    cssVars = {}
+  } = options || {};
+  const rootContent = `${rootSelector} {
+	${convertToCss(cssVars)} }`;
+  return rootContent;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createTheme,
+  mountThemeVars
+});

package/dist/themeCreator/cssVarToValue.d.ts

@@ -0,0 +1,5 @@
+import { CssVarToValueOptions } from './index.types';
+/**
+ * css变量转值
+ */
+export declare const cssVarToValue: (options: CssVarToValueOptions) => string | undefined;

package/dist/themeCreator/cssVarToValue.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var cssVarToValue_exports = {};
+__export(cssVarToValue_exports, {
+  cssVarToValue: () => cssVarToValue
+});
+module.exports = __toCommonJS(cssVarToValue_exports);
+var import_registry = require("@bifrostui/styles/registry");
+const cssVarToValue = (options) => {
+  var _a;
+  const {
+    cssVar,
+    themeVars = (_a = import_registry.defaultLight) == null ? void 0 : _a.cssVars,
+    _visitedKeys = /* @__PURE__ */ new Set()
+  } = options || {};
+  if (!cssVar)
+    return "";
+  const variableKey = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
+  const variableValue = themeVars == null ? void 0 : themeVars[variableKey];
+  if (_visitedKeys.has(variableKey)) {
+    console.warn(`\u68C0\u6D4B\u5230CSS\u53D8\u91CF\u5FAA\u73AF\u5F15\u7528: ${variableKey}`);
+    return variableValue;
+  }
+  const nextVisited = new Set(_visitedKeys).add(variableKey);
+  if (variableValue && variableValue.startsWith("var(")) {
+    return cssVarToValue({
+      cssVar: variableValue,
+      themeVars,
+      _visitedKeys: nextVisited
+    });
+  }
+  return variableValue;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cssVarToValue
+});

package/dist/themeCreator/index.d.ts

@@ -0,0 +1,3 @@
+export * from './createTheme';
+export * from './cssVarToValue';
+export * from './index.types';

package/dist/themeCreator/index.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var themeCreator_exports = {};
+module.exports = __toCommonJS(themeCreator_exports);
+__reExport(themeCreator_exports, require("./createTheme"), module.exports);
+__reExport(themeCreator_exports, require("./cssVarToValue"), module.exports);
+__reExport(themeCreator_exports, require("./index.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./createTheme"),
+  ...require("./cssVarToValue"),
+  ...require("./index.types")
+});

package/dist/themeCreator/index.types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 挂载自定义主题选项
+ */
+export interface MountThemeVarsOptions {
+    theme: string;
+    container?: HTMLElement;
+}
+export interface ThemeCreatorOptions {
+    /**
+     * 主题所挂在的根选择器
+     * @default `:root, [data-color-mode='light'][data-theme]`
+     */
+    rootSelector?: string;
+    /**
+     * 主题全局变量
+     */
+    cssVars: Record<string, string>;
+}
+/**
+ * css变量转值
+ */
+export interface CssVarToValueOptions {
+    /**
+     * 当前主题
+     */
+    cssVar: string;
+    /**
+     * 当前主题模式
+     * @default defaultLight
+     */
+    themeVars?: Record<string, string>;
+    /**
+     * 记录已解析的变量路径
+     * 函数内部使用参数
+     */
+    _visitedKeys?: Set<string>;
+}

package/dist/themeCreator/index.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_types_exports = {};
+module.exports = __toCommonJS(index_types_exports);

package/es/index.d.ts

@@ -13,3 +13,4 @@ export { default as getRootElement } from './getRootElement';
 export { default as getBoundingClientRect } from './getBoundingClientRect';
 export * from './isType';
 export * from './render';
+export * from './themeCreator';

package/es/index.js

@@ -33,6 +33,7 @@ import { default as default9 } from "./getRootElement";
 import { default as default10 } from "./getBoundingClientRect";
 export * from "./isType";
 export * from "./render";
+export * from "./themeCreator";
 export {
   default8 as blockTouch,
   default3 as convertHexToRGBA,

package/es/themeCreator/createTheme.d.ts

@@ -0,0 +1,10 @@
+import { MountThemeVarsOptions, ThemeCreatorOptions } from './index.types';
+/**
+ * 挂载自定义主题
+ */
+declare const mountThemeVars: (options: MountThemeVarsOptions) => void;
+/**
+ * 创建主题
+ */
+declare const createTheme: (options: ThemeCreatorOptions) => string;
+export { createTheme, mountThemeVars };

package/es/themeCreator/createTheme.js

@@ -0,0 +1,37 @@
+const convertToCss = (styles) => {
+  let result = "";
+  const cssVarKeys = Object.keys(styles);
+  cssVarKeys.forEach((key, index) => {
+    const value = styles[key];
+    if (value.includes("PX")) {
+      result += "/* prettier-ignore */\n	";
+    }
+    result += `${key}: ${value};
+${index === cssVarKeys.length - 1 ? "" : "	"}`;
+  });
+  return result;
+};
+const mountThemeVars = (options) => {
+  const { theme = "", container } = options || {};
+  const style = document.createElement("style");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(theme));
+  if (!container) {
+    document.head.appendChild(style);
+    return;
+  }
+  container.appendChild(style);
+};
+const createTheme = (options) => {
+  const {
+    rootSelector = ":root, [data-color-mode='light'][data-theme]",
+    cssVars = {}
+  } = options || {};
+  const rootContent = `${rootSelector} {
+	${convertToCss(cssVars)} }`;
+  return rootContent;
+};
+export {
+  createTheme,
+  mountThemeVars
+};

package/es/themeCreator/cssVarToValue.d.ts

@@ -0,0 +1,5 @@
+import { CssVarToValueOptions } from './index.types';
+/**
+ * css变量转值
+ */
+export declare const cssVarToValue: (options: CssVarToValueOptions) => string | undefined;

package/es/themeCreator/cssVarToValue.js

@@ -0,0 +1,29 @@
+import { defaultLight } from "@bifrostui/styles/registry";
+const cssVarToValue = (options) => {
+  var _a;
+  const {
+    cssVar,
+    themeVars = (_a = defaultLight) == null ? void 0 : _a.cssVars,
+    _visitedKeys = /* @__PURE__ */ new Set()
+  } = options || {};
+  if (!cssVar)
+    return "";
+  const variableKey = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
+  const variableValue = themeVars == null ? void 0 : themeVars[variableKey];
+  if (_visitedKeys.has(variableKey)) {
+    console.warn(`\u68C0\u6D4B\u5230CSS\u53D8\u91CF\u5FAA\u73AF\u5F15\u7528: ${variableKey}`);
+    return variableValue;
+  }
+  const nextVisited = new Set(_visitedKeys).add(variableKey);
+  if (variableValue && variableValue.startsWith("var(")) {
+    return cssVarToValue({
+      cssVar: variableValue,
+      themeVars,
+      _visitedKeys: nextVisited
+    });
+  }
+  return variableValue;
+};
+export {
+  cssVarToValue
+};

package/es/themeCreator/index.d.ts

@@ -0,0 +1,3 @@
+export * from './createTheme';
+export * from './cssVarToValue';
+export * from './index.types';

package/es/themeCreator/index.js

@@ -0,0 +1,3 @@
+export * from "./createTheme";
+export * from "./cssVarToValue";
+export * from "./index.types";

package/es/themeCreator/index.types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 挂载自定义主题选项
+ */
+export interface MountThemeVarsOptions {
+    theme: string;
+    container?: HTMLElement;
+}
+export interface ThemeCreatorOptions {
+    /**
+     * 主题所挂在的根选择器
+     * @default `:root, [data-color-mode='light'][data-theme]`
+     */
+    rootSelector?: string;
+    /**
+     * 主题全局变量
+     */
+    cssVars: Record<string, string>;
+}
+/**
+ * css变量转值
+ */
+export interface CssVarToValueOptions {
+    /**
+     * 当前主题
+     */
+    cssVar: string;
+    /**
+     * 当前主题模式
+     * @default defaultLight
+     */
+    themeVars?: Record<string, string>;
+    /**
+     * 记录已解析的变量路径
+     * 函数内部使用参数
+     */
+    _visitedKeys?: Set<string>;
+}

package/es/themeCreator/index.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/utils",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.5",
   "description": "BUI React utilities for building components.",
   "main": "dist/index.js",
   "module": "es/index.js",
@@ -16,7 +16,8 @@
     "glob": "11.0.0"
   },
   "dependencies": {
-    "react-is": "^18.0.0"
+    "react-is": "^18.0.0",
+    "@bifrostui/styles": "2.0.0-beta.5"
   },
   "peerDependencies": {
     "@tarojs/runtime": "^3.0.0",