@opentiny/vue-renderless 3.11.8 → 3.12.0

package/chart-core/index.js

@@ -7,11 +7,12 @@ import {
   DEFAULT_THEME,
   STATIC_PROPS,
   ECHARTS_SETTINGS,
-  SAAS_DEFAULT_COLORS_10,
-  SAAS_DEFAULT_COLORS_18,
+  SAAS_DEFAULT_COLORS,
+  SAAS_DEFAULT_SAME_COLORS,
   DEFAULT_CONFIG
 } from "./deps/constants";
-import { getType, debounce, isObject, cloneDeep, isEqual, htmlHandler } from "./deps/utils";
+import { getType, debounce, isObject, cloneDeep, isEqual, htmlHandler, get } from "./deps/utils";
+import { xss } from "../common/xss";
 import setAnimation from "./modules/animation";
 import setExtend from "./modules/extend";
 import setMark from "./modules/mark";
@@ -20,22 +21,77 @@ const computedCanvasStyle = (props) => () => ({
   height: props.height,
   position: "relative"
 });
-const calcColors = (data) => data.length <= 10 ? SAAS_DEFAULT_COLORS_10 : SAAS_DEFAULT_COLORS_18;
-const computedChartColor = (props) => () => {
+const isStack = ({ props }) => {
+  let {
+    settings: { stack },
+    data: { columns }
+  } = props;
+  let flag = false;
+  if (typeof stack !== "object" || !Array.isArray(columns))
+    return flag;
+  Object.keys(stack).forEach((key) => {
+    stack[key].forEach((stackItem) => {
+      const isExist = columns.includes(stackItem);
+      if (isExist) {
+        flag = true;
+      }
+    });
+  });
+  return flag;
+};
+const calcColors = ({ len, type, isStack: isStack2 }) => {
+  let SAAS_COLOR = SAAS_DEFAULT_COLORS;
+  let lastColor = "#1B3F86";
+  if (isStack2 && type === "") {
+    return len && len > 6 ? [lastColor].concat(SAAS_COLOR.slice(0, len - 1)) : SAAS_COLOR.slice(0, [len || 8]);
+  }
+  if (!isStack2 && type === "") {
+    type = "default";
+  }
+  if (type === "blue" || type === "green") {
+    SAAS_COLOR = SAAS_DEFAULT_SAME_COLORS[type].slice(0, len).sort((a, b) => a.idx - b.idx).map((item) => item.color);
+  }
+  return len && len > 6 ? SAAS_COLOR.slice(0, len - 1).concat([lastColor]) : SAAS_COLOR.slice(0, [len || 8]);
+};
+const computedInitColor = (props) => () => {
   let defaultColors = DEFAULT_COLORS;
-  let { data } = props;
-  const { extend } = props;
-  if (data && Array.isArray(data.rows)) {
-    defaultColors = calcColors(data.rows);
+  let { data, colorMode, extend } = props;
+  let flag = isStack({ props });
+  if (data && (Array.isArray(data.rows) || Array.isArray(data.columns))) {
+    const { columns, rows } = data;
+    const len = Math.max(columns ? columns.length : 0, rows ? rows.length : 0);
+    defaultColors = calcColors({ len, type: colorMode, isStack: flag });
   } else if (Array.isArray(data)) {
-    defaultColors = calcColors(data);
-  } else if (extend && Array.isArray(extend.series)) {
-    defaultColors = calcColors(extend.series);
+    defaultColors = calcColors({ len: data.length, type: colorMode, isStack: flag });
   } else if (extend && extend.series && Array.isArray(extend.series.data)) {
-    defaultColors = calcColors(extend.series.data);
+    defaultColors = calcColors({ len: extend.series.data.length, type: colorMode, isStack: flag });
+  } else if (extend && Array.isArray(extend.series)) {
+    defaultColors = calcColors({ len: extend.series.length, type: colorMode, isStack: flag });
+  }
+  return props.colors || props.theme && props.theme.color || defaultColors;
+};
+const computedChartColor = (props) => ({ series }) => {
+  let defaultColors = DEFAULT_COLORS;
+  let { colorMode } = props;
+  let flag = isStack({ props });
+  if (series && Array.isArray(series)) {
+    const validateList = ["pie", "radar", "sankey", "heatmap", "wordCloud"];
+    let len = 0;
+    if (series.some((item) => validateList.includes(item.type))) {
+      series.forEach((item) => len += item.data && item.data.length);
+    } else {
+      len = series.length;
+    }
+    defaultColors = calcColors({ len, type: colorMode, isStack: flag });
+  } else if (series && typeof series === "object") {
+    defaultColors = calcColors({ len: series.data.length, type: colorMode, isStack: flag });
   }
   return props.colors || props.theme && props.theme.color || defaultColors;
 };
+const getDefaultThemeColors = () => () => {
+  const { blue, green } = SAAS_DEFAULT_SAME_COLORS;
+  return { default: SAAS_DEFAULT_COLORS, blue, green };
+};
 const dataHandler = ({ api, props, state, echartsLib, t, vm }) => () => {
   if (!api.chartHandler) {
     return;
@@ -94,7 +150,7 @@ const echartsResize = (state) => () => state.echarts && state.echarts.resize();
 const setOptionsLegend = ({ props, options }) => {
   if (props.legendPosition && options.legend) {
     options.legend[props.legendPosition] = 10;
-    if (~["left", "right"].indexOf(props.legendPosition)) {
+    if (["left", "right"].includes(props.legendPosition)) {
       options.legend.top = "middle";
       options.legend.orient = "vertical";
     }
@@ -166,19 +222,19 @@ const judgeWidthHandler = ({ props, api, vm, nextTick }) => () => {
     });
   }
 };
-const setOption = ({ state, options, setOptionOpts, emit, api, props, echartsLib }) => {
-  state.echarts.setOption(options, setOptionOpts);
-  emit("ready", state.echarts, options, echartsLib);
-  if (!state.once["ready-once"]) {
-    state.once["ready-once"] = true;
-    emit("ready-once", state.echarts, options, echartsLib);
-  }
-  api.judgeWidthHandler(options);
-  afterSetOption({ props, state, options, echartsLib });
-  afterSetOptionOnce({ props, state, options, echartsLib });
-};
 const optionsHandler = ({ props, state, emit, echartsLib, api, vm }) => (options) => {
   if (options.tooltip) {
+    if (typeof options.tooltip.formatter === "function") {
+      const formatter = options.tooltip.formatter;
+      const customFormatter = (...args) => {
+        const rerutnValue = formatter(...args);
+        return xss.filterHtml(rerutnValue);
+      };
+      options.tooltip.formatter = customFormatter;
+    } else {
+      let xssHtml = xss.filterHtml(options.tooltip.formatter);
+      options.tooltip.formatter = xssHtml;
+    }
     const defaultTooltip = DEFAULT_CONFIG.tooltip || {};
     options.tooltip = __spreadValues(__spreadValues({}, defaultTooltip), options.tooltip);
   }
@@ -187,7 +243,6 @@ const optionsHandler = ({ props, state, emit, echartsLib, api, vm }) => (options
     options.legend = __spreadValues(__spreadValues({}, defaultLegend), options.legend);
   }
   setOptionsLegend({ props, options });
-  options.color = state.chartColor;
   selfSetting({ props, options });
   setAnimation({ options, animation: props.animation });
   applyMarks({ props, options });
@@ -195,7 +250,18 @@ const optionsHandler = ({ props, state, emit, echartsLib, api, vm }) => (options
     setExtend({ options, extend: props.extend });
     options.series.label = __spreadValues({ show: false }, options.series.label);
     options.series.radius = ["25%", "100%"];
+    const series = options.series;
+    if (Array.isArray(series)) {
+      options.series = series.map((item) => {
+        if (get(item, "type") === "line" && get(item, "label.show")) {
+          item.showSymbol = true;
+        }
+        return item;
+      });
+    }
   }
+  options.color = api.computedChartColor({ series: options.series });
+  emit("handle-color", options.color, api.getDefaultThemeColors());
   options = afterConfig({ props, options });
   let setOptionOpts = mapChartNotMerge(props);
   if (props.notSetUnchange && props.notSetUnchange.length) {
@@ -218,7 +284,15 @@ const optionsHandler = ({ props, state, emit, echartsLib, api, vm }) => (options
   if (vm._isDestroyed) {
     return;
   }
-  setOption({ state, options, setOptionOpts, emit, api, props, echartsLib });
+  state.echarts.setOption(options, setOptionOpts);
+  emit("ready", state.echarts, options, echartsLib);
+  if (!state.once["ready-once"]) {
+    state.once["ready-once"] = true;
+    emit("ready-once", state.echarts, options, echartsLib);
+  }
+  api.judgeWidthHandler(options);
+  afterSetOption({ props, state, options, echartsLib });
+  afterSetOptionOnce({ props, state, options, echartsLib });
 };
 const resizeableHandler = ({ api, state }) => (resizeable) => {
   if (resizeable && !state.once.onresize) {
@@ -228,7 +302,7 @@ const resizeableHandler = ({ api, state }) => (resizeable) => {
     api.removeResizeListener();
   }
 };
-const init = ({ state, props, api, refs, echartsLib, markRaw }) => () => {
+const init = ({ state, props, api, vm, echartsLib, markRaw }) => () => {
   if (state.echarts) {
     return;
   }
@@ -238,7 +312,9 @@ const init = ({ state, props, api, refs, echartsLib, markRaw }) => () => {
     ictThemeName.line = settings.line;
   }
   const themeName = props.themeName || props.theme || DEFAULT_THEME;
-  state.echarts = markRaw(echartsLib.init(refs.canvas, __spreadValues(__spreadValues({}, themeName), ictThemeName), props.initOptions));
+  state.echarts = markRaw(
+    echartsLib.init(vm.$refs.canvas, themeName, __spreadValues(__spreadValues({}, themeName), ictThemeName), props.initOptions)
+  );
   if (props.data) {
     api.changeHandler();
   }
@@ -257,9 +333,9 @@ const removeResizeListener = ({ state, api }) => () => {
 };
 const addWatchToProps = ({ props, watch, api }) => () => {
   Object.keys(props).forEach((prop) => {
-    if (!~STATIC_PROPS.indexOf(prop)) {
+    if (!STATIC_PROPS.includes(prop)) {
       const opts = {};
-      if (~["[object Object]", "[object Array]"].indexOf(getType(props[prop]))) {
+      if (["[object Object]", "[object Array]"].includes(getType(props[prop]))) {
         opts.deep = true;
       } else {
         opts.immediate = true;
@@ -349,6 +425,19 @@ const mounted = ({ state, api, vm, props, watch, t }) => () => {
   state.registeredEvents = [];
   state.once = {};
   state.store = {};
+  if (props.extend && props.extend.tooltip) {
+    if (typeof props.extend.tooltip.formatter === "function") {
+      const formatter = props.extend.tooltip.formatter;
+      const customFormatter = (...args) => {
+        const rerutnValue = formatter(...args);
+        return xss.filterHtml(rerutnValue);
+      };
+      props.extend.tooltip.formatter = customFormatter;
+    } else {
+      let xssHtml = xss.filterHtml(props.extend.tooltip.formatter);
+      props.extend.tooltip.formatter = xssHtml;
+    }
+  }
   api.chartHandler = vm.chartHandler;
   api.resizeHandler = debounce(api.resize, props.resizeDelay);
   api.changeHandler = debounce(api.dataHandler, props.changeDelay);
@@ -365,9 +454,11 @@ export {
   clean,
   computedCanvasStyle,
   computedChartColor,
+  computedInitColor,
   createEventProxy,
   dataHandler,
   echartsResize,
+  getDefaultThemeColors,
   init,
   judgeWidthHandler,
   mounted,

package/chart-core/vue.js

@@ -18,7 +18,9 @@ import {
   clean,
   mounted,
   changeHandler,
-  resizeHandler
+  resizeHandler,
+  computedInitColor,
+  getDefaultThemeColors
 } from "./index";
 import { camelToKebab } from "./deps/utils";
 const api = [
@@ -40,19 +42,20 @@ const api = [
   "clean",
   "mounted",
   "changeHandler",
-  "resizeHandler"
+  "resizeHandler",
+  "getDefaultThemeColors"
 ];
-const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, markRaw }, { t, vm, refs, emit, nextTick }, { echartsLib }) => {
-  let api2 = {};
+const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, markRaw }, { t, vm, emit, nextTick }, { echartsLib }) => {
   const state = reactive({
-    chartColor: computed(() => api2.computedChartColor()),
+    chartColor: computed(() => api2.computedInitColor()),
     canvasStyle: computed(() => api2.computedCanvasStyle())
   });
-  api2 = {
+  const api2 = {
     state,
     camelToKebab,
     computedChartColor: computedChartColor(props),
-    computedCanvasStyle: computedCanvasStyle(props)
+    computedCanvasStyle: computedCanvasStyle(props),
+    computedInitColor: computedInitColor(props)
   };
   onMounted(() => api2.mounted());
   onBeforeUnmount(() => api2.clean());
@@ -64,7 +67,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     changeHandler: changeHandler({ api: api2, props }),
     resizeHandler: resizeHandler({ api: api2, props }),
     nextTickResize: nextTickResize({ api: api2, nextTick }),
-    init: init({ state, props, api: api2, refs, echartsLib, markRaw }),
+    init: init({ state, props, api: api2, vm, echartsLib, markRaw }),
     createEventProxy: createEventProxy({ api: api2, props, state }),
     addResizeListener: addResizeListener({ state, api: api2 }),
     resizeableHandler: resizeableHandler({ api: api2, state }),
@@ -73,6 +76,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     addWatchToProps: addWatchToProps({ vm, props, watch, api: api2 }),
     dataHandler: dataHandler({ api: api2, props, state, echartsLib, t, vm }),
     judgeWidthHandler: judgeWidthHandler({ props, api: api2, vm, nextTick }),
+    getDefaultThemeColors: getDefaultThemeColors(),
     optionsHandler: optionsHandler({
       props,
       state,

package/chart-radar/index.js

@@ -3,7 +3,7 @@ import { getFormated } from "../chart-core/deps/utils";
 import { itemPoint, itemLabel, itemContent } from "../chart-core/deps/constants";
 import { isNull } from "../common/type";
 const getRadarLegend = (rows, dimension, legendName) => {
-  let legendData = rows.map((row) => row[dimension]);
+  let legendData = rows.map((row) => row[dimension]).filter((i) => i);
   function formatter(name) {
     return isNull(legendName[name]) ? name : legendName[name];
   }
@@ -61,7 +61,7 @@ const getRadarSeries = (args) => {
   const seriesData = rows.map((row) => {
     const serieData = {
       value: [],
-      name: row[dimension],
+      name: row[dimension] || "",
       symbol: "circle",
       symbolSize: 8,
       showSymbol: false,

package/checkbox-button/vue.js

@@ -10,7 +10,14 @@ import {
   computedIsDisabled,
   toggleEvent
 } from "./index";
-import { addToStore, computedIsChecked, computedStore, computedIsLimitDisabled, computedIsShowText, computedShowText } from "../checkbox";
+import {
+  addToStore,
+  computedIsChecked,
+  computedStore,
+  computedIsLimitDisabled,
+  computedIsShowText,
+  computedShowText
+} from "../checkbox";
 const api = ["state", "handleChange"];
 const initState = ({ reactive, computed, api: api2 }) => {
   const state = reactive({

package/checkbox-group/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { computedFormItemSize, computedCheckboxGroupSize } from "./index";
 const api = ["state"];
-const renderless = (props, { computed, reactive, watch }, { dispatch, constants }) => {
+const renderless = (props, { computed, reactive, watch, provide }, { dispatch, constants }) => {
   const api2 = {
     computedFormItemSize: computedFormItemSize(props)
   };
@@ -11,15 +11,14 @@ const renderless = (props, { computed, reactive, watch }, { dispatch, constants
   });
   Object.assign(api2, {
     state,
-    computedCheckboxGroupSize: computedCheckboxGroupSize({
-      props,
-      formItemSize
-    })
+    computedCheckboxGroupSize: computedCheckboxGroupSize({ props, formItemSize })
   });
   watch(
     () => props.modelValue,
     (value) => dispatch(constants.FORM_ITEM, constants.FORM_CHANGE, [value])
   );
+  provide("size", props.size);
+  provide("vertical", props.vertical);
   return api2;
 };
 export {

package/col/index.js

@@ -27,8 +27,9 @@ const setGlobalAttrValue = ({ attr, className, value }) => {
   className[`col-lg-${attr}`] = value;
   className[`col-xl-${attr}`] = value;
 };
-const getClassName = ({ api, props }) => () => {
-  const multiple = 2;
+const getClassName = ({ api, props, state }) => () => {
+  var _a;
+  const multiple = 24 / (((_a = state.layout) == null ? void 0 : _a.cols) || 12);
   const span = props.span * multiple;
   const offset = props.offset;
   const push = props.move ? props.move : 0;
@@ -80,14 +81,9 @@ const getStyle = ({ props, state }) => () => {
   const no = props.no;
   const styles = [];
   let gutter = parent ? parent.gutter : null;
-  let noSpace = parent ? parent.noSpace : null;
   let order = "";
-  if (gutter) {
-    gutter = gutter / 2;
-    styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`);
-  } else if (noSpace) {
-    styles.push("padding-left:0;padding-right:0;");
-  }
+  gutter = gutter / 2;
+  styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`);
   if (parent && parent.flex && parent.order) {
     order = parent.order === "asc" ? no : -no;
     styles.push(`order:${order};-webkit-order:${order};-ms-order:${order};-moz-order:${order};`);

package/col/vue.js

@@ -1,12 +1,13 @@
 import "../chunk-G2ADBYYC.js";
 import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row } from "./index";
 const api = ["state"];
-const renderless = (props, { computed, reactive }, { parent }) => {
+const renderless = (props, { computed, reactive, inject }, { parent }) => {
   const api2 = {};
   const state = reactive({
     row: computed(() => api2.row()),
     style: computed(() => api2.getStyle()),
-    className: computed(() => api2.getClassName())
+    className: computed(() => api2.getClassName()),
+    layout: inject("layout")
   });
   Object.assign(api2, {
     state,
@@ -14,7 +15,7 @@ const renderless = (props, { computed, reactive }, { parent }) => {
     setGlobalAttrValue,
     setSubitemAttrValue,
     getStyle: getStyle({ props, state }),
-    getClassName: getClassName({ api: api2, props })
+    getClassName: getClassName({ api: api2, props, state })
   });
   return api2;
 };

package/collapse-item/index.js

@@ -8,7 +8,14 @@ const handleFocus = ({ state, interval }) => () => {
     }
   }, interval);
 };
-const handleHeaderClick = ({ componentName, dispatch, eventName, props, parent, state }) => () => {
+const handleHeaderClick = ({
+  componentName,
+  dispatch,
+  eventName,
+  props,
+  parent,
+  state
+}) => () => {
   if (props.disabled) {
     return;
   }
@@ -16,7 +23,12 @@ const handleHeaderClick = ({ componentName, dispatch, eventName, props, parent,
   state.focusing = false;
   state.isClick = true;
 };
-const handleEnterClick = ({ componentName, dispatch, eventName, parent }) => () => dispatch(componentName, eventName, parent);
+const handleEnterClick = ({
+  componentName,
+  dispatch,
+  eventName,
+  parent
+}) => () => dispatch(componentName, eventName, parent);
 export {
   handleEnterClick,
   handleFocus,

package/color-picker/index.js

@@ -1,52 +1,42 @@
 import "../chunk-G2ADBYYC.js";
-const onConfirm = (hex, triggerBg, res, emit, isShow) => {
+const onCancel = (tmpColor, triggerBg, isShow, pre, emit) => {
   return (color) => {
-    res.value = color;
-    hex.value = res.value;
-    triggerBg.value = res.value;
-    emit("confirm", res.value);
+    tmpColor.reset(color.value.getHex());
+    triggerBg.value = pre.value;
     isShow.value = false;
+    emit("cancel");
   };
 };
-const onCancel = (res, triggerBg, emit, isShow, hex, color) => {
-  return () => {
-    if (isShow.value) {
-      res.value = triggerBg.value;
-      hex.value = triggerBg.value;
-      color.reset(hex.value);
-      emit("cancel");
-    }
+const onConfirm = (triggerBg, pre, hex, isShow, emit) => {
+  return (color) => {
+    pre.value = triggerBg.value;
+    triggerBg.value = color;
+    hex.value = color;
     isShow.value = false;
+    emit("confirm", color);
   };
 };
-const onColorUpdate = (color, res, triggerBg) => {
-  res.value = color.getHex();
+const onHueUpdate = (tmpColor, triggerBg) => {
+  return (h) => {
+    triggerBg.value = tmpColor.getHex();
+    tmpColor.set({ h });
+  };
 };
-const onHSVUpdate = (color, res, hex) => {
-  return {
-    onHueUpdate: (hue) => {
-      color.set({ h: hue });
-      onColorUpdate(color, res);
-      hex.value = color.getHex();
-    },
-    onSVUpdate: ({ s, v }) => {
-      color.set({ s, v });
-      onColorUpdate(color, res);
-    }
+const onSVUpdate = (tmpColor, triggerBg) => {
+  return ({ s, v }) => {
+    triggerBg.value = tmpColor.getHex();
+    tmpColor.set({ s, v });
   };
 };
-const onAlphaUpdate = (color, res) => {
-  return {
-    update: (alpha) => {
-      color.set({ a: alpha });
-      onColorUpdate(color, res);
-    }
+const onColorUpdate = (triggerBg) => {
+  return (color) => {
+    triggerBg.value = color.value.getHex();
   };
 };
 export {
-  onAlphaUpdate,
   onCancel,
   onColorUpdate,
   onConfirm,
-  onHSVUpdate
+  onHueUpdate,
+  onSVUpdate
 };

package/color-picker/utils/color.js

@@ -33,6 +33,7 @@ class Color {
     this.s = 0;
     this.v = 0;
     this.a = 100;
+    this.preH = 0;
     this.enableAlpha = false;
     this.reset(value);
     this.enableAlpha = alpha;
@@ -52,6 +53,7 @@ class Color {
     this.s = s;
     this.v = v;
     this.a = a;
+    this.preH = h;
   }
   set({ h, s, v, a }) {
     this.h = h != null ? h : this.h;
@@ -59,6 +61,9 @@ class Color {
     this.v = v != null ? v : this.v;
     this.a = a != null ? a : this.a;
   }
+  setPrevH(val) {
+    this.preH = val;
+  }
   /**
    *
    * @returns [R,G,B]
@@ -92,5 +97,6 @@ class Color {
   }
 }
 export {
-  Color as default
+  Color as default,
+  normalizeHexColor
 };

package/color-picker/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-G2ADBYYC.js";
 import Color from "./utils/color";
-import { onConfirm, onCancel, onHSVUpdate, onAlphaUpdate } from ".";
+import { onConfirm, onCancel, onHueUpdate, onSVUpdate, onColorUpdate } from "./index";
 const api = [
   "state",
   "changeVisible",
@@ -14,46 +14,59 @@ const api = [
   "alpha"
 ];
 const renderless = (props, context, { emit }) => {
-  var _a, _b, _c, _d;
-  const { modelValue, visible } = context.toRefs(props);
-  const hex = context.ref((_a = modelValue.value) != null ? _a : "transparent");
-  const res = context.ref((_b = modelValue.value) != null ? _b : "transparent");
-  const triggerBg = context.ref((_c = modelValue.value) != null ? _c : "transparent");
-  const isShow = context.ref((_d = visible == null ? void 0 : visible.value) != null ? _d : false);
-  const cursor = context.ref();
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { modelValue, visible, predefine, size, history } = context.toRefs(props);
+  const pre = context.ref((_a = modelValue.value) != null ? _a : "transparent");
+  const triggerBg = context.ref((_b = pre.value) != null ? _b : "transparent");
+  const tmpColor = new Color((_c = triggerBg.value) != null ? _c : "transparent");
+  const hex = context.ref((_d = modelValue.value) != null ? _d : "transparent");
+  const isShow = context.ref((_e = visible == null ? void 0 : visible.value) != null ? _e : false);
   const changeVisible = (state2) => {
     isShow.value = state2;
   };
-  const color = new Color(hex.value, props.alpha);
+  const stack = context.ref([...(_f = history == null ? void 0 : history.value) != null ? _f : []]);
+  const predefineStack = context.ref([...(_g = predefine == null ? void 0 : predefine.value) != null ? _g : []]);
   const state = context.reactive({
     isShow,
     hex,
-    color,
     triggerBg,
     defaultValue: modelValue,
-    res
+    stack,
+    predefineStack,
+    size: size != null ? size : ""
   });
+  const api2 = {
+    state,
+    changeVisible,
+    onCancel: onCancel(tmpColor, triggerBg, isShow, pre, emit),
+    onConfirm: onConfirm(triggerBg, pre, hex, isShow, emit),
+    onHueUpdate: onHueUpdate(tmpColor, triggerBg),
+    onSVUpdate: onSVUpdate(tmpColor, triggerBg),
+    onColorUpdate: onColorUpdate(triggerBg)
+  };
+  context.watch(
+    predefine,
+    (newPredefine) => {
+      predefineStack.value = [...newPredefine];
+    },
+    { deep: true }
+  );
+  context.watch(
+    history,
+    (newHistory) => {
+      stack.value = [...newHistory];
+    },
+    { deep: true }
+  );
   context.watch(modelValue, (newValue) => {
+    pre.value = newValue;
     hex.value = newValue;
-    res.value = newValue;
-    triggerBg.value = newValue;
-    color.reset(hex.value);
+    state.hex = newValue;
+    state.triggerBg = newValue;
   });
   context.watch(visible, (visible2) => {
     isShow.value = visible2;
   });
-  const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex);
-  const { update } = onAlphaUpdate(color, res);
-  const api2 = {
-    state,
-    changeVisible,
-    onHueUpdate,
-    onSVUpdate,
-    onConfirm: onConfirm(hex, triggerBg, res, emit, isShow),
-    onCancel: onCancel(res, triggerBg, emit, isShow, hex, color),
-    onAlphaUpdate: update,
-    cursor
-  };
   return api2;
 };
 export {