plain-design 1.0.0-beta.4 → 1.0.0-beta.6

package/src/packages/utils/color.utils.ts

@@ -1,189 +1,189 @@
-import Color from 'color';
-
-export type iColorFormat = 'hex' | 'rgb' | 'hsl'
-
-/**
- * 调色板
- * @author  韦胜健
- * @date    2022.4.24 17:14
- */
-export function lighter(originColor: string, i: number, format?: iColorFormat) {
-  const color = Color(originColor);
-  const h = color.hue();
-  const s = color.saturationv();
-  const v = color.value();
-
-  const hueStep = 2;
-  const maxSaturationStep = 100;
-  const minSaturationStep = 9;
-
-  const maxValue = 100;
-  const minValue = 30;
-
-  function getNewHue(isLight: boolean, i: number) {
-    let hue;
-    if (h >= 60 && h <= 240) {
-      hue = isLight ? h - hueStep * i : h + hueStep * i;
-    } else {
-      hue = isLight ? h + hueStep * i : h - hueStep * i;
-    }
-    if (hue < 0) {
-      hue += 360;
-    } else if (hue >= 360) {
-      hue -= 360;
-    }
-    return Math.round(hue);
-  }
-
-  function getNewSaturation(isLight: boolean, i: number) {
-    let newSaturation;
-
-    if (isLight) {
-      newSaturation = s <= minSaturationStep ? s : s - ((s - minSaturationStep) / 5) * i;
-    } else {
-      newSaturation = s + ((maxSaturationStep - s) / 4) * i;
-    }
-    if (newSaturation < 4) {newSaturation = 4;}
-    return newSaturation;
-  }
-
-  function getNewValue(isLight: boolean, i: number) {
-    return isLight ? v + ((maxValue - v) / 5) * i : (v <= minValue ? v : v - ((v - minValue) / 4) * i);
-  }
-
-  const isLight = i < 6;
-  const index = isLight ? 6 - i : i - 6;
-
-  const retColor = i === 6
-    ? color
-    : Color({
-      h: getNewHue(isLight, index),
-      s: getNewSaturation(isLight, index),
-      v: getNewValue(isLight, index),
-    });
-
-  return getColorString(retColor, format);
-}
-
-/**
- * 深色调色板
- * @author  韦胜健
- * @date    2022.5.5 23:49
- */
-export function darken(originColor: string, i: number, format?: iColorFormat) {
-  const color = Color(originColor);
-  let retColor: Color;
-  if (i === 6) {
-    retColor = color;
-  } else if (i > 6) {
-    retColor = color.lighten((i - 6) * 0.1);
-  } else {
-    retColor = color.darken((6 - i) * 0.135);
-  }
-  return getColorString(retColor, format);
-}
-
-/*---------------------------------------utils-------------------------------------------*/
-
-/**
- * 计算颜色字符串
- * @author  韦胜健
- * @date    2022.4.24 17:14
- */
-export function getColorString(color: Color, format?: iColorFormat): string {
-  const innerFormat = getColorFormat(format);
-  if (innerFormat === 'hex') {return color[innerFormat]();}
-  return color[innerFormat]().round().string();
-}
-
-/**
- * 修正颜色格式类型
- * @author  韦胜健
- * @date    2022.4.24 17:15
- */
-export const getColorFormat = (() => {
-  const formats = ['hex', 'rgb', 'hsl'];
-  return (format?: iColorFormat): iColorFormat => {
-    if (!format || formats.indexOf(format) < 0) {return 'hex';}
-    return format;
-  };
-})();
-
-/**
- * 获取透明度颜色
- * @author  韦胜健
- * @date    2022/6/6 17:26
- */
-export const getRgbColor = (color: Color) => {
-  return `rgba(${color.rgb().array().map((i, index) => index === 3 ? i : Math.floor(i)).join(',')})`;
-};
-
-/*---------------------------------------build color-------------------------------------------*/
-export function buildColor(option: {
-  color: string,
-  isDark: boolean,
-  lightNum?: number,
-  deepNum?: number,
-  light?: {
-    lightColor: string,
-    deepColor: string,
-  },
-  dark?: {
-    lightColor: string,
-    deepColor: string,
-  },
-}) {
-  const { color, isDark } = option;
-  const lightNum = option.lightNum || 11;
-  const deepNum = option.deepNum || 11;
-
-  const optionColor = Color(option.color);
-  const optionHue = optionColor.hue();
-  const optionSaturation = optionColor.saturationv();
-  const optionValue = optionColor.value();
-
-  let lightColor: Color, deepColor: Color;
-  if (!isDark) {
-    lightColor = option.light?.lightColor ? Color(option.light.lightColor) : Color.hsv([optionHue, 0, 100]);
-    deepColor = option.light?.deepColor ? Color(option.light.deepColor) : Color.hsv([optionHue, 100, 0]);
-  } else {
-    lightColor = option.light?.deepColor ? Color(option.light.deepColor) : Color.hsv([optionHue, 100, 0]);
-    deepColor = option.light?.lightColor ? Color(option.light.lightColor) : Color.hsv([optionHue, 0, 100]);
-  }
-
-  console.log({ optionHue, optionSaturation, optionValue });
-
-  const result: string[] = [];
-
-  /*light color*/
-  (() => {
-    const saturationStep = (optionSaturation - lightColor.saturationv()) / lightNum;
-    const valueStep = (optionValue - lightColor.value()) / lightNum;
-    new Array(lightNum).fill(1).forEach((_, index) => {
-      result.unshift(Color.hsv([
-        optionHue,
-        optionSaturation - (saturationStep * (index + 1)),
-        optionValue - (valueStep * (index + 1))
-      ]).hex());
-    });
-  })();
-
-  result.push(color);
-
-  /*deep color*/
-  (() => {
-    const saturationStep = (deepColor.saturationv() - optionSaturation) / deepNum;
-    const valueStep = (deepColor.value() - optionValue) / deepNum;
-    new Array(deepNum).fill(1).forEach((_, index) => {
-      result.push(Color.hsv([
-        optionHue,
-        optionSaturation + (saturationStep * (index + 1)),
-        optionValue + (valueStep * (index + 1))
-      ]).hex());
-    });
-  })();
-
-  result.pop();
-  result.shift();
-  return result;
-}
+import Color from 'color';
+
+export type iColorFormat = 'hex' | 'rgb' | 'hsl'
+
+/**
+ * 调色板
+ * @author  韦胜健
+ * @date    2022.4.24 17:14
+ */
+export function lighter(originColor: string, i: number, format?: iColorFormat) {
+  const color = Color(originColor);
+  const h = color.hue();
+  const s = color.saturationv();
+  const v = color.value();
+
+  const hueStep = 2;
+  const maxSaturationStep = 100;
+  const minSaturationStep = 9;
+
+  const maxValue = 100;
+  const minValue = 30;
+
+  function getNewHue(isLight: boolean, i: number) {
+    let hue;
+    if (h >= 60 && h <= 240) {
+      hue = isLight ? h - hueStep * i : h + hueStep * i;
+    } else {
+      hue = isLight ? h + hueStep * i : h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  }
+
+  function getNewSaturation(isLight: boolean, i: number) {
+    let newSaturation;
+
+    if (isLight) {
+      newSaturation = s <= minSaturationStep ? s : s - ((s - minSaturationStep) / 5) * i;
+    } else {
+      newSaturation = s + ((maxSaturationStep - s) / 4) * i;
+    }
+    if (newSaturation < 4) {newSaturation = 4;}
+    return newSaturation;
+  }
+
+  function getNewValue(isLight: boolean, i: number) {
+    return isLight ? v + ((maxValue - v) / 5) * i : (v <= minValue ? v : v - ((v - minValue) / 4) * i);
+  }
+
+  const isLight = i < 6;
+  const index = isLight ? 6 - i : i - 6;
+
+  const retColor = i === 6
+    ? color
+    : Color({
+      h: getNewHue(isLight, index),
+      s: getNewSaturation(isLight, index),
+      v: getNewValue(isLight, index),
+    });
+
+  return getColorString(retColor, format);
+}
+
+/**
+ * 深色调色板
+ * @author  韦胜健
+ * @date    2022.5.5 23:49
+ */
+export function darken(originColor: string, i: number, format?: iColorFormat) {
+  const color = Color(originColor);
+  let retColor: Color;
+  if (i === 6) {
+    retColor = color;
+  } else if (i > 6) {
+    retColor = color.lighten((i - 6) * 0.1);
+  } else {
+    retColor = color.darken((6 - i) * 0.135);
+  }
+  return getColorString(retColor, format);
+}
+
+/*---------------------------------------utils-------------------------------------------*/
+
+/**
+ * 计算颜色字符串
+ * @author  韦胜健
+ * @date    2022.4.24 17:14
+ */
+export function getColorString(color: Color, format?: iColorFormat): string {
+  const innerFormat = getColorFormat(format);
+  if (innerFormat === 'hex') {return color[innerFormat]();}
+  return color[innerFormat]().round().string();
+}
+
+/**
+ * 修正颜色格式类型
+ * @author  韦胜健
+ * @date    2022.4.24 17:15
+ */
+export const getColorFormat = (() => {
+  const formats = ['hex', 'rgb', 'hsl'];
+  return (format?: iColorFormat): iColorFormat => {
+    if (!format || formats.indexOf(format) < 0) {return 'hex';}
+    return format;
+  };
+})();
+
+/**
+ * 获取透明度颜色
+ * @author  韦胜健
+ * @date    2022/6/6 17:26
+ */
+export const getRgbColor = (color: Color) => {
+  return `rgba(${color.rgb().array().map((i, index) => index === 3 ? i : Math.floor(i)).join(',')})`;
+};
+
+/*---------------------------------------build color-------------------------------------------*/
+export function buildColor(option: {
+  color: string,
+  isDark: boolean,
+  lightNum?: number,
+  deepNum?: number,
+  light?: {
+    lightColor: string,
+    deepColor: string,
+  },
+  dark?: {
+    lightColor: string,
+    deepColor: string,
+  },
+}) {
+  const { color, isDark } = option;
+  const lightNum = option.lightNum || 11;
+  const deepNum = option.deepNum || 11;
+
+  const optionColor = Color(option.color);
+  const optionHue = optionColor.hue();
+  const optionSaturation = optionColor.saturationv();
+  const optionValue = optionColor.value();
+
+  let lightColor: Color, deepColor: Color;
+  if (!isDark) {
+    lightColor = option.light?.lightColor ? Color(option.light.lightColor) : Color.hsv([optionHue, 0, 100]);
+    deepColor = option.light?.deepColor ? Color(option.light.deepColor) : Color.hsv([optionHue, 100, 0]);
+  } else {
+    lightColor = option.light?.deepColor ? Color(option.light.deepColor) : Color.hsv([optionHue, 100, 0]);
+    deepColor = option.light?.lightColor ? Color(option.light.lightColor) : Color.hsv([optionHue, 0, 100]);
+  }
+
+  console.log({ optionHue, optionSaturation, optionValue });
+
+  const result: string[] = [];
+
+  /*light color*/
+  (() => {
+    const saturationStep = (optionSaturation - lightColor.saturationv()) / lightNum;
+    const valueStep = (optionValue - lightColor.value()) / lightNum;
+    new Array(lightNum).fill(1).forEach((_, index) => {
+      result.unshift(Color.hsv([
+        optionHue,
+        optionSaturation - (saturationStep * (index + 1)),
+        optionValue - (valueStep * (index + 1))
+      ]).hex());
+    });
+  })();
+
+  result.push(color);
+
+  /*deep color*/
+  (() => {
+    const saturationStep = (deepColor.saturationv() - optionSaturation) / deepNum;
+    const valueStep = (deepColor.value() - optionValue) / deepNum;
+    new Array(deepNum).fill(1).forEach((_, index) => {
+      result.push(Color.hsv([
+        optionHue,
+        optionSaturation + (saturationStep * (index + 1)),
+        optionValue + (valueStep * (index + 1))
+      ]).hex());
+    });
+  })();
+
+  result.pop();
+  result.shift();
+  return result;
+}

package/src/packages/utils/combineURL.ts

@@ -1,5 +1,5 @@
-export function combineURL(baseURL: string, relativeURL?: string) {
-  return relativeURL
-    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
-    : baseURL;
-}
+export function combineURL(baseURL: string, relativeURL?: string) {
+  return relativeURL
+    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
+    : baseURL;
+}

package/src/packages/utils/constant.tsx

@@ -1,5 +1,5 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-
-export const CheckboxStatus = createEnum(['uncheck', 'check', 'minus'] as const);
-
-export const noop = () => void 0;
+import {createEnum} from "plain-utils/utils/createEnum";
+
+export const CheckboxStatus = createEnum(['uncheck', 'check', 'minus'] as const);
+
+export const noop = () => void 0;

package/src/packages/utils/createAnimate.ts

@@ -1,45 +1,45 @@
-export function createAnimate(
-  {
-    initValue,
-    time,
-    action,
-  }: {
-    initValue: () => number,
-    time: number,
-    action: (val: number) => void,
-  }) {
-
-  let cancel = null as null | number;
-
-  return {
-    start: (percent: number, done?: () => void) => {
-      if (cancel != null) {
-        cancelAnimationFrame(cancel);
-      }
-      let startTime = Date.now();
-
-      let n = initValue();
-      let k = (percent - n) / time;
-
-      const run = () => {
-        let nowTime = Date.now();
-        let deltaTime = nowTime - startTime;
-
-        if (deltaTime > time) {
-          cancel = null;
-          action(percent);
-          !!done && done();
-          return;
-        }
-        action(Number((deltaTime * k + n).toFixed(2)));
-        cancel = requestAnimationFrame(run);
-      };
-      run();
-    },
-    stop: () => {
-      if (cancel != null) {
-        cancelAnimationFrame(cancel);
-      }
-    }
-  };
-}
+export function createAnimate(
+  {
+    initValue,
+    time,
+    action,
+  }: {
+    initValue: () => number,
+    time: number,
+    action: (val: number) => void,
+  }) {
+
+  let cancel = null as null | number;
+
+  return {
+    start: (percent: number, done?: () => void) => {
+      if (cancel != null) {
+        cancelAnimationFrame(cancel);
+      }
+      let startTime = Date.now();
+
+      let n = initValue();
+      let k = (percent - n) / time;
+
+      const run = () => {
+        let nowTime = Date.now();
+        let deltaTime = nowTime - startTime;
+
+        if (deltaTime > time) {
+          cancel = null;
+          action(percent);
+          !!done && done();
+          return;
+        }
+        action(Number((deltaTime * k + n).toFixed(2)));
+        cancel = requestAnimationFrame(run);
+      };
+      run();
+    },
+    stop: () => {
+      if (cancel != null) {
+        cancelAnimationFrame(cancel);
+      }
+    }
+  };
+}

package/src/packages/utils/createCache.ts

@@ -1,32 +1,32 @@
-/**
- * 创建缓存管理对象
- * @author  韦胜健
- * @date    2022.5.5 10:16
- */
-export function createCache<Data>(CACHE_KEY: string) {
-
-  const state = {
-    data: undefined as any
-  };
-
-  const get = (fromCache?: boolean): Data | null => {
-    if (!fromCache) {
-      return state.data;
-    }
-    const str = localStorage.getItem(CACHE_KEY);
-    const data = !!str ? JSON.parse(str) : null;
-    if (!!state) {state.data = data;}
-    return data;
-  };
-  const set = (data: Data | null) => {
-    state.data = data;
-    if (data == null) {
-      localStorage.removeItem(CACHE_KEY);
-    } else {
-      localStorage.setItem(CACHE_KEY, JSON.stringify(data));
-    }
-  };
-  const clear = () => {set(null);};
-  state.data = get(true);
-  return { get, set, clear };
-}
+/**
+ * 创建缓存管理对象
+ * @author  韦胜健
+ * @date    2022.5.5 10:16
+ */
+export function createCache<Data>(CACHE_KEY: string) {
+
+  const state = {
+    data: undefined as any
+  };
+
+  const get = (fromCache?: boolean): Data | null => {
+    if (!fromCache) {
+      return state.data;
+    }
+    const str = localStorage.getItem(CACHE_KEY);
+    const data = !!str ? JSON.parse(str) : null;
+    if (!!state) {state.data = data;}
+    return data;
+  };
+  const set = (data: Data | null) => {
+    state.data = data;
+    if (data == null) {
+      localStorage.removeItem(CACHE_KEY);
+    } else {
+      localStorage.setItem(CACHE_KEY, JSON.stringify(data));
+    }
+  };
+  const clear = () => {set(null);};
+  state.data = get(true);
+  return { get, set, clear };
+}

package/src/packages/utils/createEffectiveHandler.ts

@@ -1,8 +1,8 @@
-/**
- * 创建带副作用的函数句柄，提醒必须返回一个函数用来清理副作用
- * @author  韦胜健
- * @date    2022.6.19 16:08
- */
-export function createEffectiveHandler<Args extends any[]>(creator: (...args: Args) => (() => void)) {
-  return creator;
-}
+/**
+ * 创建带副作用的函数句柄，提醒必须返回一个函数用来清理副作用
+ * @author  韦胜健
+ * @date    2022.6.19 16:08
+ */
+export function createEffectiveHandler<Args extends any[]>(creator: (...args: Args) => (() => void)) {
+  return creator;
+}

package/src/packages/utils/createError.ts

@@ -1,16 +1,16 @@
-/**
- * 创建一个报错对象
- * @author  韦胜健
- * @date    2020/10/15 10:33
- */
-export function createError(tag: string) {
-  return (msg: string, isLog?: boolean) => {
-    const message = `${tag}:${msg}`;
-    const log = isLog == null ? true : isLog;
-    if (log) {
-      console.error(message);
-    } else {
-      throw new Error(message);
-    }
-  };
-}
+/**
+ * 创建一个报错对象
+ * @author  韦胜健
+ * @date    2020/10/15 10:33
+ */
+export function createError(tag: string) {
+  return (msg: string, isLog?: boolean) => {
+    const message = `${tag}:${msg}`;
+    const log = isLog == null ? true : isLog;
+    if (log) {
+      console.error(message);
+    } else {
+      throw new Error(message);
+    }
+  };
+}

package/src/packages/utils/createFlagManager.ts

@@ -1,34 +1,34 @@
-/**
- * 给mark对象使用，用来创建管理flag的对象
- * @author  韦胜健
- * @date    2020/11/27 11:38
- */
-import {reactive, UnwrapRef} from "plain-design-composition";
-
-export function createFlagManager<T = boolean>() {
-  return {
-    state: reactive({
-      map: {} as { [k: string]: T }
-    }),
-    get(key: string) {
-      return this.state.map[key];
-    },
-    set(key: string, val: UnwrapRef<T>) {
-      /*if (this.state.map.hasOwnProperty(key)) {
-          this.state.map[key] = val
-      } else {
-          set(this.state.map, key, val)
-      }*/
-      (this.state.map as any)[key] = val;
-    },
-    getActiveKeys(): string[] {
-      const keys: string[] = [];
-      for (let key in this.state.map) {
-        if (!!this.state.map[key]) {
-          keys.push(key);
-        }
-      }
-      return keys;
-    }
-  };
-}
+/**
+ * 给mark对象使用，用来创建管理flag的对象
+ * @author  韦胜健
+ * @date    2020/11/27 11:38
+ */
+import {reactive, UnwrapRef} from "plain-design-composition";
+
+export function createFlagManager<T = boolean>() {
+  return {
+    state: reactive({
+      map: {} as { [k: string]: T }
+    }),
+    get(key: string) {
+      return this.state.map[key];
+    },
+    set(key: string, val: UnwrapRef<T>) {
+      /*if (this.state.map.hasOwnProperty(key)) {
+          this.state.map[key] = val
+      } else {
+          set(this.state.map, key, val)
+      }*/
+      (this.state.map as any)[key] = val;
+    },
+    getActiveKeys(): string[] {
+      const keys: string[] = [];
+      for (let key in this.state.map) {
+        if (!!this.state.map[key]) {
+          keys.push(key);
+        }
+      }
+      return keys;
+    }
+  };
+}