@zfqh/uview-x 0.0.0-stage → 0.0.2

package/utils/colorGradient.ts

@@ -0,0 +1,139 @@
+/**
+ * 求两个颜色之间的渐变值
+ * @param {string} startColor 开始的颜色
+ * @param {string} endColor 结束的颜色
+ * @param {number} step 颜色等分的份额
+ * */
+export function colorGradient(
+    startColor = 'rgb(0, 0, 0)',
+    endColor = 'rgb(255, 255, 255)',
+    step = 10
+): string[] {
+    const startRGB = hexToRgb(startColor, false) as number[] // 转换为rgb数组模式
+    const startR = startRGB[0]
+    const startG = startRGB[1]
+    const startB = startRGB[2]
+
+    const endRGB = hexToRgb(endColor, false) as number[]
+    const endR = endRGB[0]
+    const endG = endRGB[1]
+    const endB = endRGB[2]
+
+    const sR = (endR - startR) / step // 总差值
+    const sG = (endG - startG) / step
+    const sB = (endB - startB) / step
+    const colorArr = []
+    for (let i = 0; i < step; i++) {
+        // 计算每一步的hex值
+        let hex = rgbToHex(`rgb(${Math.round((sR * i + startR))},${Math.round((sG * i + startG))},${Math.round((sB
+			* i + startB))})`)
+        // 确保第一个颜色值为startColor的值
+        if (i === 0) hex = rgbToHex(startColor)
+        // 确保最后一个颜色值为endColor的值
+        if (i === step - 1) hex = rgbToHex(endColor)
+        colorArr.push(hex)
+    }
+    return colorArr
+}
+
+/**
+ * 将颜色转换为 RGB。
+ *
+ * @param sColor 颜色字符串，支持 `#rgb`、`#rrggbb`、`rgb(...)`。
+ * @param str 为 `true`（默认）时返回 `rgb(r,g,b)` 字符串；为 `false` 时返回 `[r,g,b]` 数组。
+ * @returns `str=false` 时返回 RGB 数组；否则返回 rgb 字符串；无法识别的颜色原样返回。
+ */
+export function hexToRgb(sColor: string, str = true): string | number[] {
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+    sColor = String(sColor).toLowerCase()
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            let sColorNew = '#'
+            for (let i = 1; i < 4; i += 1) {
+                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+            }
+            sColor = sColorNew
+        }
+        // 处理六位的颜色值
+        const sColorChange = []
+        for (let i = 1; i < 7; i += 2) {
+            sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
+        }
+        if (!str) {
+            return sColorChange
+        }
+        return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`
+    } if (/^(rgb|RGB)/.test(sColor)) {
+        const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
+        return arr.map((val) => Number(val))
+    }
+    return sColor
+}
+
+// 将rgb表示方式转换为hex表示方式
+export function rgbToHex(rgb: string): string {
+    const _this = rgb
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+    if (/^(rgb|RGB)/.test(_this)) {
+        const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
+        let strHex = '#'
+        for (let i = 0; i < aColor.length; i++) {
+            let hex = Number(aColor[i]).toString(16)
+            hex = String(hex).length == 1 ? `${0}${hex}` : hex // 保证每个rgb的值为2位
+            if (hex === '0') {
+                hex += hex
+            }
+            strHex += hex
+        }
+        if (strHex.length !== 7) {
+            strHex = _this
+        }
+        return strHex
+    } if (reg.test(_this)) {
+        const aNum = _this.replace(/#/, '').split('')
+        if (aNum.length === 6) {
+            return _this
+        } if (aNum.length === 3) {
+            let numHex = '#'
+            for (let i = 0; i < aNum.length; i += 1) {
+                numHex += (aNum[i] + aNum[i])
+            }
+            return numHex
+        }
+    } else {
+        return _this
+    }
+    // 合法 hex 但长度不是 3/6 时保持原值返回，保证返回类型为 string
+    return _this
+}
+
+/**
+* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
+* sHex为传入的十六进制的色值
+* alpha为rgba的透明度
+*/
+export function colorToRgba(color: string, alpha: number): string {
+    color = rgbToHex(color)
+    // 十六进制颜色值的正则表达式
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+    /* 16进制颜色转为RGB格式 */
+    let sColor = String(color).toLowerCase()
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            let sColorNew = '#'
+            for (let i = 1; i < 4; i += 1) {
+                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+            }
+            sColor = sColorNew
+        }
+        // 处理六位的颜色值
+        const sColorChange = []
+        for (let i = 1; i < 7; i += 2) {
+            sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
+        }
+        // return sColorChange.join(',')
+        return `rgba(${sColorChange.join(',')},${alpha})`
+    }
+
+    return sColor
+}

package/utils/compat.ts

@@ -0,0 +1,165 @@
+/**
+ * uv-ui 选项式 mixin 能力的组合式替代。
+ *
+ * 这些方法不依赖 Vue 运行时 API，可在 `.vue` 的 `<script setup>` 中直接使用，
+ * 也可在普通 `.ts` 模块中调用，避免 uni-app x Vapor 下的 mixin 限制。
+ */
+
+type ValueGetter = (key: string) => any;
+
+/** nvue 原生 dom 插件返回的节点尺寸 */
+export interface DomRectSize {
+  width: number;
+  height: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+/** `uni.requireNativePlugin('dom')` 的返回类型（nvue 专属） */
+export interface DomPlugin {
+  addRule(name: string, rule: string | Record<string, unknown>): void;
+  getComponentRect(component: unknown, callback: (res: { size?: DomRectSize }) => void): void;
+}
+
+/** `uni.requireNativePlugin('animation')` 的返回类型（nvue 专属） */
+export interface AnimationPlugin {
+  transition(node: unknown, options: Record<string, unknown>, callback?: () => void): void;
+}
+
+/**
+ * 生成 BEM 类名数组（替代 mixin 中的 `bem()`）。
+ *
+ * 仅返回扁平类名，符合 Vapor 只支持 class 选择器的约束。
+ *
+ * @param name 组件名（不含 `uv-` 前缀），如 `button`
+ * @param getValue 读取属性值的函数，通常为 `(key) => props[key]`
+ * @param fixed 固定拼接到类名上的属性名，如 `['type', 'size']`
+ * @param change 仅在值为真时拼接的属性名，如 `['plain', 'disabled']`
+ */
+export function createBem(name: string, getValue: ValueGetter, fixed: string[] = [], change: string[] = []): string[] {
+  const prefix = `uv-${name}--`;
+  const classes: string[] = [];
+  fixed.forEach((item) => {
+    const value = getValue(item);
+    if (value !== undefined && value !== null && value !== '') {
+      classes.push(prefix + value);
+    }
+  });
+  change.forEach((item) => {
+    if (getValue(item)) {
+      classes.push(prefix + item);
+    }
+  });
+  return classes;
+}
+
+/**
+ * 查询组件内节点尺寸/位置（替代 mixin 的 `$uvGetRect`）。
+ *
+ * @param instance 组件实例（`getCurrentInstance()!.proxy` 或 `.proxy`）
+ * @param selector 仅支持 `#id` / `.class`
+ * @param all 是否查询全部匹配节点
+ */
+export function getRect(instance: any, selector: string, all = false): Promise<any> {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value: any) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+    };
+    const timer = setTimeout(() => done(null), 600);
+    const query = uni.createSelectorQuery().in(instance);
+    const nodes = all ? query.selectAll(selector) : query.select(selector);
+    nodes
+      .boundingClientRect((rect: any) => {
+        clearTimeout(timer);
+        if (all && Array.isArray(rect) && rect.length) {
+          done(rect);
+          return;
+        }
+        if (!all && rect) {
+          done(rect);
+          return;
+        }
+        done(null);
+      })
+      .exec();
+  });
+}
+
+/**
+ * nvue 节点测量：nvue 不支持 uni.createSelectorQuery，使用原生 dom 模块。
+ * 非 nvue 环境返回 null，调用方自行回退。
+ */
+export function getRectNvue(ref: any): Promise<any> {
+  const requireNativePlugin = uni.requireNativePlugin;
+  if (typeof requireNativePlugin !== 'function' || !ref) {
+    return Promise.resolve(null);
+  }
+  const dom = requireNativePlugin('dom') as DomPlugin | undefined;
+  if (!dom || typeof dom.getComponentRect !== 'function') {
+    return Promise.resolve(null);
+  }
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value: any) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+    };
+    const timer = setTimeout(() => done(null), 600);
+    dom.getComponentRect(ref, (res: any) => {
+      clearTimeout(timer);
+      done(res && res.size ? res.size : null);
+    });
+  });
+}
+
+/** 页面跳转（替代 mixin 的 `openPage`）。 */
+export function openPage(url: string, linkType = 'navigateTo'): void {
+  if (!url) return;
+  switch (linkType) {
+    case 'navigateTo':
+    case 'to':
+      uni.navigateTo({ url });
+      break;
+    case 'redirectTo':
+    case 'redirect':
+      uni.redirectTo({ url });
+      break;
+    case 'switchTab':
+    case 'tab':
+      uni.switchTab({ url });
+      break;
+    case 'reLaunch':
+    case 'launch':
+      uni.reLaunch({ url });
+      break;
+    case 'navigateBack':
+    case 'back':
+      uni.navigateBack({});
+      break;
+    default:
+      uni.navigateTo({ url });
+  }
+}
+
+/** 阻止事件冒泡。 */
+export function preventEvent(e: any): void {
+  if (e && typeof e.stopPropagation === 'function') {
+    e.stopPropagation();
+  }
+}
+
+/** 空操作，仅阻止冒泡。 */
+export function noop(e: any): void {
+  preventEvent(e);
+}
+
+/** 判断是否为有效的 rpx/rpx 数值字符串（供选区/尺寸计算复用）。 */
+export function isNumberLike(value: any): boolean {
+  return /^-?\d+(\.\d+)?$/.test(String(value));
+}

package/utils/compress.ts

@@ -0,0 +1,34 @@
+export interface CompressOptions {
+	width?: number | string
+	height?: number | string
+}
+
+function image(url: string, style?: CompressOptions): string {
+	url = String(url || '')
+	if (/^https?:\/\//.test(url)) {
+		const { width, height } = style || {}
+		let params = ''
+		if (/\d+(r?px)?$/.test(String(width))) {
+			const size = Number.parseFloat(String(width))
+			params = `imageMogr2/thumbnail/${size}x/format/webp`
+		} else if (/\d+(r?px)?$/.test(String(height))) {
+			const size = Number.parseFloat(String(height))
+			params = `imageMogr2/thumbnail/x${size}/format/webp`
+		}
+		if (params) {
+			if (url.lastIndexOf('?') === -1) {
+				return `${url}?${params}`
+			}
+			if (url.lastIndexOf('imageMogr2/') === -1) {
+				return `${url}&${params}`
+			}
+		}
+	}
+	return url
+}
+
+const compress: { image: typeof image } = {
+	image
+}
+
+export default compress

package/utils/config.ts

@@ -0,0 +1,95 @@
+// #ifndef APP-NVUE
+import vars from '../styles/var.module.scss';
+// #endif
+
+export interface UviewXColor {
+  primary: string;
+  primaryDark: string;
+  primaryDisabled: string;
+  primaryLight: string;
+  success: string;
+  successDark: string;
+  successDisabled: string;
+  successLight: string;
+  warning: string;
+  warningDark: string;
+  warningDisabled: string;
+  warningLight: string;
+  error: string;
+  errorDark: string;
+  errorDisabled: string;
+  errorLight: string;
+  info: string;
+  infoDark: string;
+  infoDisabled: string;
+  infoLight: string;
+  bgColor: string;
+  bgLightColor: string;
+  mainColor: string;
+  contentColor: string;
+  tipsColor: string;
+  lightColor: string;
+  disabledColor: string;
+  borderColor: string;
+  [key: string]: string;
+}
+
+export type UviewXProps = Record<string, Record<string, unknown>>;
+
+export interface UviewXConfig {
+  // 主题名称
+  type: string[];
+  // 颜色部分，本来可以通过 scss 的 :export 导出供 js 使用，但是 nvue 不支持
+  color: UviewXColor;
+  // 组件默认 props，一次性合并进各组件的 props 定义
+  props: UviewXProps;
+  // 默认单位，可以通过配置为 rpx，那么在用于传入组件大小参数为数值时，就默认为 rpx
+  unit: string;
+}
+
+export type UviewXColorConfig = Partial<UviewXColor>;
+
+// 兜底色板与 styles/color.scss 保持一致；非 nvue 端会由 var.module.scss 覆盖为实际主题色
+const color: UviewXColor = {
+  primary: '#00b4c3',
+  primaryDark: '#157572',
+  primaryDisabled: '#b4e3d9',
+  primaryLight: '#dff3f9',
+  success: '#5ac725',
+  successDark: '#53c21d',
+  successDisabled: '#a9e08f',
+  successLight: '#f5fff0',
+  warning: '#ff9a05',
+  warningDark: '#ed6c04',
+  warningDisabled: '#f9d39b',
+  warningLight: '#fdf6ec',
+  error: '#ff4d4f',
+  errorDark: '#e45656',
+  errorDisabled: '#f7b2b2',
+  errorLight: '#fef0f0',
+  info: '#909399',
+  infoDark: '#767a82',
+  infoDisabled: '#c4c6c9',
+  infoLight: '#f4f4f5',
+  bgColor: '#f5f5f5',
+  bgLightColor: '#fffbf4',
+  mainColor: '#333333',
+  contentColor: '#7a7a7a',
+  tipsColor: '#9a9a9a',
+  lightColor: '#c0c4cc',
+  disabledColor: '#c8c9cc',
+  borderColor: '#eeeeee',
+};
+
+// #ifndef APP-NVUE
+Object.assign(color, vars);
+// #endif
+
+const config: UviewXConfig = {
+  type: ['primary', 'success', 'info', 'error', 'warning'],
+  color,
+  props: {},
+  unit: 'px',
+};
+
+export default config;

package/utils/debounce.ts

@@ -0,0 +1,7 @@
+import { useDebounce } from '../hooks/useDebounce'
+import type { DebounceFunction } from '../hooks/useDebounce'
+
+// 兼容旧用法：模块级共享实例，复用 useDebounce 实现
+const debounce: DebounceFunction = useDebounce()
+
+export default debounce

package/utils/digit.ts

@@ -0,0 +1,157 @@
+let _boundaryCheckingState = true; // 是否进行越界检查的全局开关
+
+/**
+ * 把错误的数据转正
+ * @private
+ * @example strip(0.09999999999999998)=0.1
+ */
+function strip(num: number, precision = 15): number {
+  return +parseFloat(Number(num).toPrecision(precision));
+}
+
+/**
+ * Return digits length of a number
+ * @private
+ * @param {*number} num Input number
+ */
+function digitLength(num: number): number {
+  // Get digit length of e
+  const eSplit = num.toString().split(/[eE]/);
+  const len = (eSplit[0].split('.')[1] || '').length - +(eSplit[1] || 0);
+  return len > 0 ? len : 0;
+}
+
+/**
+ * 把小数转成整数,如果是小数则放大成整数
+ * @private
+ * @param {*number} num 输入数
+ */
+function float2Fixed(num: number): number {
+  if (num.toString().indexOf('e') === -1) {
+    return Number(num.toString().replace('.', ''));
+  }
+  const dLen = digitLength(num);
+  return dLen > 0 ? strip(Number(num) * Math.pow(10, dLen)) : Number(num);
+}
+
+/**
+ * 检测数字是否越界，如果越界给出提示
+ * @private
+ * @param {*number} num 输入数
+ */
+function checkBoundary(num: number): void {
+  if (_boundaryCheckingState) {
+    if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
+      console.warn(`${num} 超出了精度限制，结果可能不正确`);
+    }
+  }
+}
+
+/**
+ * 把递归操作扁平迭代化
+ * @param {number[]} arr 要操作的数字数组
+ * @param {function} operation 迭代操作
+ * @private
+ */
+function iteratorOperation(arr: number[], operation: (a: number, b: number) => number): number {
+  const [num1, num2, ...others] = arr;
+  let res = operation(num1, num2);
+
+  others.forEach((num) => {
+    res = operation(res, num);
+  });
+
+  return res;
+}
+
+/**
+ * 高精度乘法
+ * @export
+ */
+export function times(...nums: number[]): number {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, times);
+  }
+
+  const [num1, num2] = nums;
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  const baseNum = digitLength(num1) + digitLength(num2);
+  const leftValue = num1Changed * num2Changed;
+
+  checkBoundary(leftValue);
+
+  return leftValue / Math.pow(10, baseNum);
+}
+
+/**
+ * 高精度加法
+ * @export
+ */
+export function plus(...nums: number[]): number {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, plus);
+  }
+
+  const [num1, num2] = nums;
+  // 取最大的小数位
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  // 把小数都转为整数然后再计算
+  return (times(num1, baseNum) + times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * 高精度减法
+ * @export
+ */
+export function minus(...nums: number[]): number {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, minus);
+  }
+
+  const [num1, num2] = nums;
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  return (times(num1, baseNum) - times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * 高精度除法
+ * @export
+ */
+export function divide(...nums: number[]): number {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, divide);
+  }
+
+  const [num1, num2] = nums;
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  checkBoundary(num1Changed);
+  checkBoundary(num2Changed);
+  // 重要，这里必须用strip进行修正
+  return times(num1Changed / num2Changed, strip(Math.pow(10, digitLength(num2) - digitLength(num1))));
+}
+
+/**
+ * 四舍五入
+ * @export
+ */
+export function round(num: number, ratio: number): number {
+  const base = Math.pow(10, ratio);
+  let result = divide(Math.round(Math.abs(times(num, base))), base);
+  if (num < 0 && result !== 0) {
+    result = times(result, -1);
+  }
+  // 位数不足则补0
+  return result;
+}
+
+/**
+ * 是否进行边界检查，默认开启
+ * @param flag 标记开关，true 为开启，false 为关闭，默认为 true
+ * @export
+ */
+export function enableBoundaryChecking(flag = true): void {
+  _boundaryCheckingState = flag;
+}
+