@bifrostui/utils 1.5.0 → 2.0.0-alpha.0

package/es/hooks/index.js

@@ -1,12 +1,7 @@
 import useDidMountEffect from "./useDidMountEffect";
 import useEventCallback from "./useEventCallback";
 import useForkRef from "./useForkRef";
-import useTouchEmulator, {
-  touchEmulator,
-  emulateTouchStart,
-  emulateTouchMove,
-  emulateTouchEnd
-} from "./useTouchEmulator";
+import useTouchEmulator from "./useTouchEmulator";
 import useValue from "./useValue";
 import useDomReady from "./useDomReady";
 import useSize from "./useSize";
@@ -14,10 +9,6 @@ import useDomCss from "./useDomCss";
 import useTouch from "./useTouch";
 import useUniqueId from "./useUniqueId";
 export {
-  emulateTouchEnd,
-  emulateTouchMove,
-  emulateTouchStart,
-  touchEmulator,
   useDidMountEffect,
   useDomCss,
   useDomReady,

package/es/hooks/useDidMountEffect.d.ts

@@ -1,5 +1,5 @@
 /**
- * skip inital run useEffect
+ * skip initial run useEffect
  */
 declare const useDidMountEffect: (func: any, deps: any) => void;
 export default useDidMountEffect;

package/es/hooks/useTouchEmulator.d.ts

@@ -1,7 +1 @@
-declare const emulateTouchStart: (ev: any) => void;
-declare const emulateTouchMove: (ev: any) => void;
-declare const emulateTouchEnd: (ev: any) => void;
-declare function useTouchEmulator(dom?: HTMLElement | Window): void;
-declare const touchEmulator: (dom?: HTMLElement | Window) => () => void;
-export default useTouchEmulator;
-export { touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd };
+export default function useTouchEmulator(dom?: HTMLElement | Window): void;

package/es/hooks/useTouchEmulator.js

@@ -66,44 +66,25 @@ function getActiveTouches(mouseEv) {
   }
   return createTouchList(mouseEv);
 }
-const emulateTouchStart = onMouse("touchstart");
-const emulateTouchMove = onMouse("touchmove");
-const emulateTouchEnd = onMouse("touchend");
 function useTouchEmulator(dom = window) {
+  const touchStart = onMouse("touchstart");
+  const touchMove = onMouse("touchmove");
+  const touchEnd = onMouse("touchend");
   useEffect(() => {
     if (dom) {
-      dom.addEventListener("mousedown", emulateTouchStart, true);
-      dom.addEventListener("mousemove", emulateTouchMove, true);
-      dom.addEventListener("mouseup", emulateTouchEnd, true);
+      dom.addEventListener("mousedown", touchStart, true);
+      dom.addEventListener("mousemove", touchMove, true);
+      dom.addEventListener("mouseup", touchEnd, true);
     }
     return () => {
       if (dom) {
-        dom.removeEventListener("mousedown", emulateTouchStart, true);
-        dom.removeEventListener("mousemove", emulateTouchMove, true);
-        dom.removeEventListener("mouseup", emulateTouchEnd, true);
+        dom.removeEventListener("mousedown", touchStart, true);
+        dom.removeEventListener("mousemove", touchMove, true);
+        dom.removeEventListener("mouseup", touchEnd, true);
       }
     };
   }, [dom]);
 }
-const touchEmulator = (dom = window) => {
-  if (dom) {
-    dom.addEventListener("mousedown", emulateTouchStart, true);
-    dom.addEventListener("mousemove", emulateTouchMove, true);
-    dom.addEventListener("mouseup", emulateTouchEnd, true);
-  }
-  return function() {
-    if (dom) {
-      dom.removeEventListener("mousedown", emulateTouchStart, true);
-      dom.removeEventListener("mousemove", emulateTouchMove, true);
-      dom.removeEventListener("mouseup", emulateTouchEnd, true);
-    }
-  };
-};
-var useTouchEmulator_default = useTouchEmulator;
 export {
-  useTouchEmulator_default as default,
-  emulateTouchEnd,
-  emulateTouchMove,
-  emulateTouchStart,
-  touchEmulator
+  useTouchEmulator as default
 };

package/es/index.d.ts

@@ -1,7 +1,7 @@
 export { default as debounce } from './debounce';
-export { getStylesAndLocation, getNewDirectionLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
+export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
 export { default as convertHexToRGBA } from './hex2rgba';
-export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
+export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
 export { default as isDev } from './isDev';
 export { isMini, isWeapp, isAlipay, isMiniapp } from './isMini';
 export { default as setRef } from './setRef';
@@ -9,8 +9,8 @@ export { default as throttle } from './throttle';
 export { default as toArray } from './toArray';
 export { default as blockTouch } from './touchBlocker';
 export { easing, duration, getTransitionProps, createTransitions, } from './transitions';
-export { default as getRootContainer } from './getRootContainer';
+export { default as getRootElement } from './getRootElement';
 export { default as getBoundingClientRect } from './getBoundingClientRect';
-export { getScrollRect, getClientRect } from './domUtils';
 export * from './isType';
 export * from './render';
+export * from './themeCreator';

package/es/index.js

@@ -1,7 +1,6 @@
 import { default as default2 } from "./debounce";
 import {
   getStylesAndLocation,
-  getNewDirectionLocation,
   triggerEventTransform,
   parsePlacement
 } from "./directionLocationUtil";
@@ -11,10 +10,6 @@ import {
   useEventCallback,
   useForkRef,
   useTouchEmulator,
-  touchEmulator,
-  emulateTouchStart,
-  emulateTouchMove,
-  emulateTouchEnd,
   useValue,
   useDomReady,
   useSize,
@@ -34,11 +29,11 @@ import {
   getTransitionProps,
   createTransitions
 } from "./transitions";
-import { default as default9 } from "./getRootContainer";
+import { default as default9 } from "./getRootElement";
 import { default as default10 } from "./getBoundingClientRect";
-import { getScrollRect, getClientRect } from "./domUtils";
 export * from "./isType";
 export * from "./render";
+export * from "./themeCreator";
 export {
   default8 as blockTouch,
   default3 as convertHexToRGBA,
@@ -46,14 +41,8 @@ export {
   default2 as debounce,
   duration,
   easing,
-  emulateTouchEnd,
-  emulateTouchMove,
-  emulateTouchStart,
   default10 as getBoundingClientRect,
-  getClientRect,
-  getNewDirectionLocation,
-  default9 as getRootContainer,
-  getScrollRect,
+  default9 as getRootElement,
   getStylesAndLocation,
   getTransitionProps,
   isAlipay,
@@ -65,7 +54,6 @@ export {
   default5 as setRef,
   default6 as throttle,
   default7 as toArray,
-  touchEmulator,
   triggerEventTransform,
   useDidMountEffect,
   useDomCss,

package/es/isMini.d.ts

@@ -1,6 +1,5 @@
 declare const isMini: boolean;
 declare const isWeapp: boolean;
 declare const isAlipay: boolean;
-declare const isTt: boolean;
-export { isMini, isWeapp, isAlipay, isTt };
+export { isMini, isWeapp, isAlipay };
 export declare const isMiniapp: () => boolean;

package/es/isMini.js

@@ -1,7 +1,6 @@
 const isMini = typeof process.env.TARO_ENV === "string";
 const isWeapp = process.env.TARO_ENV === "weapp";
 const isAlipay = process.env.TARO_ENV === "alipay";
-const isTt = process.env.TARO_ENV === "tt";
 const isMiniapp = () => {
   return isMini;
 };
@@ -9,6 +8,5 @@ export {
   isAlipay,
   isMini,
   isMiniapp,
-  isTt,
   isWeapp
 };

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": "1.5.0",
+  "version": "2.0.0-alpha.0",
   "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-alpha.0"
   },
   "peerDependencies": {
     "@tarojs/runtime": "^3.0.0",

package/dist/domUtils/index.d.ts

@@ -1,12 +0,0 @@
-export declare const getClientRect: () => Promise<{
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}>;
-export declare const getScrollRect: () => Promise<{
-    top: number;
-    left: number;
-}>;

package/dist/domUtils/index.js

@@ -1,46 +0,0 @@
-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 domUtils_exports = {};
-__export(domUtils_exports, {
-  getClientRect: () => getClientRect,
-  getScrollRect: () => getScrollRect
-});
-module.exports = __toCommonJS(domUtils_exports);
-const getClientRect = () => {
-  const width = window.innerWidth || document.documentElement.clientWidth;
-  const height = window.innerHeight || document.documentElement.clientHeight;
-  return Promise.resolve({
-    width,
-    height,
-    left: 0,
-    top: 0,
-    right: width,
-    bottom: height
-  });
-};
-const getScrollRect = () => {
-  return Promise.resolve({
-    top: window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop,
-    left: window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getClientRect,
-  getScrollRect
-});

package/dist/domUtils/index.miniapp.d.ts

@@ -1,2 +0,0 @@
-export declare const getClientRect: () => Promise<unknown>;
-export declare const getScrollRect: () => Promise<unknown>;

package/dist/domUtils/index.miniapp.js

@@ -1,86 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_miniapp_exports = {};
-__export(index_miniapp_exports, {
-  getClientRect: () => getClientRect,
-  getScrollRect: () => getScrollRect
-});
-module.exports = __toCommonJS(index_miniapp_exports);
-var import_taro = __toESM(require("@tarojs/taro"));
-const getClientRect = () => {
-  return new Promise((resolve, reject) => {
-    try {
-      const res = import_taro.default.getSystemInfoSync();
-      const width = res.windowWidth;
-      const height = res.windowHeight;
-      const clientInfo = __spreadProps(__spreadValues({}, res), {
-        width,
-        height,
-        left: 0,
-        top: 0,
-        right: width,
-        bottom: height
-      });
-      resolve(clientInfo);
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
-const getScrollRect = () => {
-  return new Promise((resolve) => {
-    import_taro.default.createSelectorQuery().selectViewport().scrollOffset().exec((res) => {
-      resolve({
-        top: res[0].scrollTop,
-        left: res[0].scrollLeft
-      });
-    });
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getClientRect,
-  getScrollRect
-});

package/dist/getRootContainer/index.d.ts

@@ -1,2 +0,0 @@
-declare const getRootContainer: (rootCon?: HTMLElement | (() => HTMLElement) | Window, defaultCon?: any) => any;
-export default getRootContainer;

package/dist/getRootContainer/index.miniapp.d.ts

@@ -1,3 +0,0 @@
-import type { TaroElement } from '@tarojs/runtime';
-declare const getRootContainer: (rootCon?: TaroElement | (() => TaroElement), defaultCon?: any) => any;
-export default getRootContainer;

package/es/domUtils/index.d.ts

@@ -1,12 +0,0 @@
-export declare const getClientRect: () => Promise<{
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}>;
-export declare const getScrollRect: () => Promise<{
-    top: number;
-    left: number;
-}>;

package/es/domUtils/index.js

@@ -1,22 +0,0 @@
-const getClientRect = () => {
-  const width = window.innerWidth || document.documentElement.clientWidth;
-  const height = window.innerHeight || document.documentElement.clientHeight;
-  return Promise.resolve({
-    width,
-    height,
-    left: 0,
-    top: 0,
-    right: width,
-    bottom: height
-  });
-};
-const getScrollRect = () => {
-  return Promise.resolve({
-    top: window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop,
-    left: window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft
-  });
-};
-export {
-  getClientRect,
-  getScrollRect
-};

package/es/domUtils/index.miniapp.d.ts

@@ -1,2 +0,0 @@
-export declare const getClientRect: () => Promise<unknown>;
-export declare const getScrollRect: () => Promise<unknown>;

package/es/domUtils/index.miniapp.js

@@ -1,54 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import Taro from "@tarojs/taro";
-const getClientRect = () => {
-  return new Promise((resolve, reject) => {
-    try {
-      const res = Taro.getSystemInfoSync();
-      const width = res.windowWidth;
-      const height = res.windowHeight;
-      const clientInfo = __spreadProps(__spreadValues({}, res), {
-        width,
-        height,
-        left: 0,
-        top: 0,
-        right: width,
-        bottom: height
-      });
-      resolve(clientInfo);
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
-const getScrollRect = () => {
-  return new Promise((resolve) => {
-    Taro.createSelectorQuery().selectViewport().scrollOffset().exec((res) => {
-      resolve({
-        top: res[0].scrollTop,
-        left: res[0].scrollLeft
-      });
-    });
-  });
-};
-export {
-  getClientRect,
-  getScrollRect
-};

package/es/getRootContainer/index.d.ts

@@ -1,2 +0,0 @@
-declare const getRootContainer: (rootCon?: HTMLElement | (() => HTMLElement) | Window, defaultCon?: any) => any;
-export default getRootContainer;

package/es/getRootContainer/index.js

@@ -1,9 +0,0 @@
-const getRootContainer = (rootCon, defaultCon) => {
-  const rootElement = typeof rootCon === "function" ? rootCon() : rootCon;
-  const defaultRootElement = document.body;
-  return rootElement || defaultCon || defaultRootElement;
-};
-var getRootContainer_default = getRootContainer;
-export {
-  getRootContainer_default as default
-};

package/es/getRootContainer/index.miniapp.d.ts

@@ -1,3 +0,0 @@
-import type { TaroElement } from '@tarojs/runtime';
-declare const getRootContainer: (rootCon?: TaroElement | (() => TaroElement), defaultCon?: any) => any;
-export default getRootContainer;