@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/common/shared/color-picker/color.js

@@ -0,0 +1,428 @@
+import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
+import { cmykInputToColor, rgb2cmyk } from './cmyk';
+import { parseGradientString, isGradientColor } from './gradient';
+
+const mathRound = Math.round;
+const hsv2rgba = states => tinyColor(states).toRgb();
+const hsv2hsva = states => tinyColor(states).toHsv();
+const hsv2hsla = states => tinyColor(states).toHsl();
+/**
+ * 将渐变对象转换成字符串
+ * @param object
+ * @returns
+ */
+export const gradientColors2string = (object) => {
+  const { points, degree } = object;
+  const colorsStop = points
+    .sort((pA, pB) => pA.left - pB.left)
+    .map(p => `${p.color} ${Math.round(p.left * 100) / 100}%`);
+  return `linear-gradient(${degree}deg,${colorsStop.join(',')})`;
+};
+/**
+ * 去除颜色的透明度
+ * @param color
+ * @returns
+ */
+export const getColorWithoutAlpha = color => tinyColor(color).setAlpha(1)
+  .toHexString();
+// 生成一个随机ID
+export const genId = () => (1 + Math.random() * 4294967295).toString(16);
+/**
+ * 生成一个渐变颜色
+ * @param left
+ * @param color
+ * @returns
+ */
+export const genGradientPoint = (left, color) => ({
+  id: genId(),
+  left,
+  color,
+});
+export class Color {
+  constructor(input) {
+    this.states = {
+      s: 100,
+      v: 100,
+      h: 100,
+      a: 1,
+    };
+    this.gradientStates = {
+      colors: [],
+      degree: 0,
+      selectedId: null,
+      css: '',
+    };
+    this.update(input);
+  }
+
+  update(input) {
+    let _a; let _b;
+    const gradientColors = parseGradientString(input);
+    if (this.isGradient && !gradientColors) {
+      // 处理gradient模式下切换不同格式时的交互问题，输入的不是渐变字符串才使用当前处理
+      const colorHsv = tinyColor(input).toHsv();
+      this.states = colorHsv;
+      this.updateCurrentGradientColor();
+      return;
+    }
+    this.originColor = input;
+    this.isGradient = false;
+    let colorInput = input;
+    if (gradientColors) {
+      this.isGradient = true;
+      const object = gradientColors;
+      const points = object.points.map(c => genGradientPoint(c.left, c.color));
+      this.gradientStates = {
+        colors: points,
+        degree: object.degree,
+        selectedId: ((_a = points[0]) === null || _a === void 0 ? void 0 : _a.id) || null,
+      };
+      this.gradientStates.css = this.linearGradient;
+      colorInput = (_b = this.gradientSelectedPoint) === null || _b === void 0 ? void 0 : _b.color;
+    }
+    this.updateStates(colorInput);
+  }
+
+  get saturation() {
+    return this.states.s;
+  }
+
+  set saturation(value) {
+    this.states.s = Math.max(0, Math.min(100, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get value() {
+    return this.states.v;
+  }
+
+  set value(value) {
+    this.states.v = Math.max(0, Math.min(100, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get hue() {
+    return this.states.h;
+  }
+
+  set hue(value) {
+    this.states.h = Math.max(0, Math.min(360, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get alpha() {
+    return this.states.a;
+  }
+
+  set alpha(value) {
+    this.states.a = Math.max(0, Math.min(1, Math.round(value * 100) / 100));
+    this.updateCurrentGradientColor();
+  }
+
+  get rgb() {
+    const { r, g, b } = hsv2rgba(this.states);
+    return `rgb(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)})`;
+  }
+
+  get rgba() {
+    const { r, g, b, a } = hsv2rgba(this.states);
+    return `rgba(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)}, ${a})`;
+  }
+
+  get hsv() {
+    const { h, s, v } = this.getHsva();
+    return `hsv(${h}, ${s}%, ${v}%)`;
+  }
+
+  get hsva() {
+    const { h, s, v, a } = this.getHsva();
+    return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+  }
+
+  get hsl() {
+    const { h, s, l } = this.getHsla();
+    return `hsl(${h}, ${s}%, ${l}%)`;
+  }
+
+  get hsla() {
+    const { h, s, l, a } = this.getHsla();
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  get hex() {
+    return tinyColor(this.states).toHexString();
+  }
+
+  get hex8() {
+    return tinyColor(this.states).toHex8String();
+  }
+
+  get cmyk() {
+    const { c, m, y, k } = this.getCmyk();
+    return `cmyk(${c}, ${m}, ${y}, ${k})`;
+  }
+
+  get css() {
+    if (this.isGradient) {
+      return this.linearGradient;
+    }
+    return this.rgba;
+  }
+
+  get linearGradient() {
+    const { gradientColors, gradientDegree } = this;
+    return gradientColors2string({
+      points: gradientColors,
+      degree: gradientDegree,
+    });
+  }
+
+  get gradientColors() {
+    return this.gradientStates.colors;
+  }
+
+  set gradientColors(colors) {
+    this.gradientStates.colors = colors;
+    this.gradientStates.css = this.linearGradient;
+  }
+
+  get gradientSelectedId() {
+    return this.gradientStates.selectedId;
+  }
+
+  set gradientSelectedId(id) {
+    let _a;
+    if (id === this.gradientSelectedId) {
+      return;
+    }
+    this.gradientStates.selectedId = id;
+    this.updateStates((_a = this.gradientSelectedPoint) === null || _a === void 0 ? void 0 : _a.color);
+  }
+
+  get gradientDegree() {
+    return this.gradientStates.degree;
+  }
+
+  set gradientDegree(degree) {
+    this.gradientStates.degree = Math.max(0, Math.min(360, degree));
+    this.gradientStates.css = this.linearGradient;
+  }
+
+  get gradientSelectedPoint() {
+    const { gradientColors, gradientSelectedId } = this;
+    return gradientColors.find(color => color.id === gradientSelectedId);
+  }
+
+  getFormatsColorMap() {
+    return {
+      HEX: this.hex,
+      CMYK: this.cmyk,
+      RGB: this.rgb,
+      RGBA: this.rgba,
+      HSL: this.hsl,
+      HSLA: this.hsla,
+      HSV: this.hsv,
+      HSVA: this.hsva,
+      CSS: this.css,
+      HEX8: this.hex8,
+    };
+  }
+
+  updateCurrentGradientColor() {
+    const { isGradient, gradientColors, gradientSelectedId } = this;
+    const { length } = gradientColors;
+    const current = this.gradientSelectedPoint;
+    if (!isGradient || length === 0 || !current) {
+      return false;
+    }
+    const index = gradientColors.findIndex(color => color.id === gradientSelectedId);
+    const newColor = { ...current, color: this.rgba };
+    gradientColors.splice(index, 1, newColor);
+    this.gradientColors = gradientColors.slice();
+    return this;
+  }
+
+  updateStates(input) {
+    const color = tinyColor(cmykInputToColor(input));
+    const hsva = color.toHsv();
+    this.states = hsva;
+  }
+
+  getRgba() {
+    const { r, g, b, a } = hsv2rgba(this.states);
+    return {
+      r: mathRound(r),
+      g: mathRound(g),
+      b: mathRound(b),
+      a,
+    };
+  }
+
+  getCmyk() {
+    const { r, g, b } = this.getRgba();
+    const [c, m, y, k] = rgb2cmyk(r, g, b);
+    return {
+      c: mathRound(c * 100),
+      m: mathRound(m * 100),
+      y: mathRound(y * 100),
+      k: mathRound(k * 100),
+    };
+  }
+
+  getHsva() {
+    let { h, s, v, a } = hsv2hsva(this.states);
+    h = mathRound(h);
+    s = mathRound(s * 100);
+    v = mathRound(v * 100);
+    a *= 1;
+    return {
+      h,
+      s,
+      v,
+      a,
+    };
+  }
+
+  getHsla() {
+    let { h, s, l, a } = hsv2hsla(this.states);
+    h = mathRound(h);
+    s = mathRound(s * 100);
+    l = mathRound(l * 100);
+    a *= 1;
+    return {
+      h,
+      s,
+      l,
+      a,
+    };
+  }
+
+  /**
+     * 判断输入色是否与当前色相同
+     * @param color
+     * @returns
+     */
+  equals(color) {
+    return tinyColor.equals(this.rgba, color);
+  }
+
+  /**
+     * 校验输入色是否是一个有效颜色
+     * @param color
+     * @returns
+     */
+  static isValid(color) {
+    if (parseGradientString(color)) {
+      return true;
+    }
+    return tinyColor(color).isValid();
+  }
+
+  static hsva2color(h, s, v, a) {
+    return tinyColor({
+      h,
+      s,
+      v,
+      a,
+    }).toHsvString();
+  }
+
+  static hsla2color(h, s, l, a) {
+    return tinyColor({
+      h,
+      s,
+      l,
+      a,
+    }).toHslString();
+  }
+
+  static rgba2color(r, g, b, a) {
+    return tinyColor({
+      r,
+      g,
+      b,
+      a,
+    }).toHsvString();
+  }
+
+  static hex2color(hex, a) {
+    const color = tinyColor(hex);
+    color.setAlpha(a);
+    return color.toHexString();
+  }
+
+  /**
+     * 对象转颜色字符串
+     * @param object
+     * @param format
+     * @returns
+     */
+  static object2color(object, format) {
+    if (format === 'CMYK') {
+      const { c, m, y, k } = object;
+      return `cmyk(${c}, ${m}, ${y}, ${k})`;
+    }
+    const color = tinyColor(object, {
+      format,
+    });
+    return color.toRgbString();
+  }
+}
+/**
+ * 是否是渐变色
+ * @param input
+ * @returns
+ */
+Color.isGradientColor = input => !!isGradientColor(input);
+/**
+ * 比较两个颜色是否相同
+ * @param color1
+ * @param color2
+ * @returns
+ */
+Color.compare = (color1, color2) => {
+  const isGradientColor1 = Color.isGradientColor(color1);
+  const isGradientColor2 = Color.isGradientColor(color2);
+  if (isGradientColor1 && isGradientColor2) {
+    const gradientColor1 = gradientColors2string(parseGradientString(color1));
+    const gradientColor2 = gradientColors2string(parseGradientString(color2));
+    return gradientColor1 === gradientColor2;
+  }
+  if (!isGradientColor1 && !isGradientColor2) {
+    return tinyColor.equals(color1, color2);
+  }
+  return false;
+};
+const COLOR_OBJECT_OUTPUT_KEYS = [
+  'alpha',
+  'css',
+  'hex',
+  'hex8',
+  'hsl',
+  'hsla',
+  'hsv',
+  'hsva',
+  'rgb',
+  'rgba',
+  'saturation',
+  'value',
+  'isGradient',
+];
+/**
+ * 获取对外输出的color对象
+ * @param color
+ * @returns
+ */
+export const getColorObject = (color) => {
+  if (!color) {
+    return null;
+  }
+  const colorObject = Object.create(null);
+  // eslint-disable-next-line no-return-assign
+  COLOR_OBJECT_OUTPUT_KEYS.forEach(key => (colorObject[key] = color[key]));
+  if (color.isGradient) {
+    colorObject.linearGradient = color.linearGradient;
+  }
+  return colorObject;
+};
+export default Color;

package/dist/common/shared/color-picker/gradient.js

@@ -0,0 +1,180 @@
+/**
+ * 用于反解析渐变字符串为对象
+ * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
+ */
+import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
+import { isString, isNull } from '../../validator';
+/** ../../validator.js
+ * Utility combine multiple regular expressions.
+ *
+ * @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
+ * @param {string} flags Normal RegExp flags.
+ */
+const combineRegExp = (regexpList, flags) => {
+  let source = '';
+  for (let i = 0; i < regexpList.length; i += 1) {
+    if (isString(regexpList[i])) {
+      source += regexpList[i];
+    } else {
+      source += regexpList[i].source;
+    }
+  }
+  return new RegExp(source, flags);
+};
+/**
+ * Generate the required regular expressions once.
+ *
+ * Regular Expressions are easier to manage this way and can be well described.
+ *
+ * @result {object} Object containing regular expressions.
+ */
+const generateRegExp = () => {
+  // Note any variables with "Capture" in name include capturing bracket set(s).
+  const searchFlags = 'gi'; // ignore case for angles, "rgb" etc
+  const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types
+  // optional 2nd part
+  const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
+  const rComma = /\s*,\s*/; // Allow space around comma.
+  const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form
+  const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
+  const // "(1, 2, 3)"
+    rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
+  const // "(1, 2, 3, 4)"
+    rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
+  const // ".9", "-5px", "100%".
+    rKeyword = /[_a-z-][_a-z0-9-]*/;
+  const // "red", "transparent".
+    rColor = combineRegExp(['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'], '');
+  const rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
+  const // Single Color Stop, optional %, optional length.
+    rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
+  const // List of color stops min 1.
+    rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');
+  const // Angle or SideCorner
+    rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
+  const // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
+    rColorStopSearch = combineRegExp(['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'], searchFlags); // Capture 1:"color" and 2:"position" (optional).
+  return {
+    gradientSearch: rGradientSearch,
+    colorStopSearch: rColorStopSearch,
+  };
+};
+/**
+ * Actually parse the input gradient parameters string into an object for reusability.
+ *
+ *
+ * @note Really this only supports the standard syntax not historical versions, see MDN for details
+ *       https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
+ *
+ * @param regExpLib
+ * @param {string} input
+ * @returns {object|undefined}
+ */
+const parseGradient = (regExpLib, input) => {
+  let result;
+  let matchColorStop;
+  let stopResult;
+  // reset search position, because we reuse regex.
+  regExpLib.gradientSearch.lastIndex = 0;
+  const matchGradient = regExpLib.gradientSearch.exec(input);
+  if (!isNull(matchGradient)) {
+    result = {
+      original: matchGradient[0],
+      colorStopList: [],
+    };
+    // Line (Angle or Side-Corner).
+    if (matchGradient[1]) {
+      // eslint-disable-next-line prefer-destructuring
+      result.line = matchGradient[1];
+    }
+    // Angle or undefined if side-corner.
+    if (matchGradient[2]) {
+      // eslint-disable-next-line prefer-destructuring
+      result.angle = matchGradient[2];
+    }
+    // Side-corner or undefined if angle.
+    if (matchGradient[3]) {
+      // eslint-disable-next-line prefer-destructuring
+      result.sideCorner = matchGradient[3];
+    }
+    // reset search position, because we reuse regex.
+    regExpLib.colorStopSearch.lastIndex = 0;
+    // Loop though all the color-stops.
+    matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    while (!isNull(matchColorStop)) {
+      stopResult = {
+        color: matchColorStop[1],
+      };
+      // Position (optional).
+      if (matchColorStop[2]) {
+        // eslint-disable-next-line prefer-destructuring
+        stopResult.position = matchColorStop[2];
+      }
+      result.colorStopList.push(stopResult);
+      // Continue searching from previous position.
+      matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    }
+  }
+  // Can be undefined if match not found.
+  return result;
+};
+const REGEXP_LIB = generateRegExp();
+const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
+/**
+ * 验证是否是渐变字符串
+ * @param input
+ * @returns
+ */
+export const isGradientColor = (input) => {
+  REG_GRADIENT.lastIndex = 0;
+  return REG_GRADIENT.exec(input);
+};
+// 边界字符串和角度关系
+const sideCornerDegreeMap = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+  'top left': 225,
+  'left top': 225,
+  'top right': 135,
+  'right top': 135,
+  'bottom left': 315,
+  'left bottom': 315,
+  'bottom right': 45,
+  'right bottom': 45,
+};
+/**
+ * 解析渐变字符串为 GradientColors 对象
+ * @param input
+ * @returns
+ */
+export const parseGradientString = (input) => {
+  const match = isGradientColor(input);
+  if (!match) {
+    return false;
+  }
+  const gradientColors = {
+    points: [],
+    degree: 0,
+  };
+  const result = parseGradient(REGEXP_LIB, match[1]);
+  if (result.original.trim() !== match[1].trim()) {
+    return false;
+  }
+  const points = result.colorStopList.map(({ color, position }) => {
+    const point = Object.create(null);
+    point.color = tinyColor(color).toRgbString();
+    point.left = parseFloat(position);
+    return point;
+  });
+  gradientColors.points = points;
+  let degree = parseInt(result.angle, 10);
+  if (Number.isNaN(degree)) {
+    degree = sideCornerDegreeMap[result.sideCorner] || 90;
+  }
+  gradientColors.degree = degree;
+  return gradientColors;
+};
+export default parseGradientString;
+

package/dist/common/shared/color-picker/index.js

@@ -0,0 +1,3 @@
+export * from './cmyk';
+export * from './color';
+export * from './gradient';

package/dist/common/shared/date.js

@@ -0,0 +1,46 @@
+
+export const getDateRect = (date) => {
+  const _date = new Date(date);
+
+  return {
+    year: _date.getFullYear(),
+    month: _date.getMonth(),
+    date: _date.getDate(),
+    day: _date.getDay(),
+    time: _date.getTime(),
+  };
+};
+
+export const isSameDate = (date1, date2) => {
+  if (date1 instanceof Date || typeof date1 === 'number') date1 = getDateRect(date1);
+  if (date2 instanceof Date || typeof date2 === 'number') date2 = getDateRect(date2);
+  const keys = ['year', 'month', 'date'];
+  return keys.every(key => date1[key] === date2[key]);
+};
+
+export const getMonthDateRect = (date) => {
+  const { year, month } = getDateRect(date);
+  const firstDay = new Date(year, month, 1);
+  const weekdayOfFirstDay = firstDay.getDay();
+  const lastDate = new Date(+new Date(year, month + 1, 1) - 24 * 3600 * 1000).getDate();
+
+  return {
+    year,
+    month,
+    weekdayOfFirstDay,
+    lastDate,
+  };
+};
+
+export const isValidDate = val => typeof val === 'number' || val instanceof Date;
+
+export const getDate = (...args) => {
+  const now = new Date();
+  if (args.length === 0) return now;
+  if (args.length === 1 && args[0] <= 1000) {
+    const { year, month, date } = getDateRect(now);
+    return new Date(year, month + args[0], date);
+  }
+  // eslint-disable-next-line prefer-spread
+  return Date.apply(null, args);
+};