@opentiny/vue-renderless 3.25.0 → 3.27.0

package/calendar-view/index.js

@@ -426,15 +426,18 @@ const toToday = ({ state, api, nextTick }) => () => {
     });
   }
 };
-const currentDateChange = ({ state, api }) => (date) => {
+const currentDateChange = ({ state, api, nextTick }) => (date) => {
   const currentDate = new Date(date);
   const year = currentDate.getFullYear();
   const month = currentDate.getMonth() + 1;
+  const day = currentDate.getDate();
   state.activeMonth = month;
   state.activeYear = year;
+  state.currentDate = `${year}-${month}-${day}`;
   if (state.mode !== "month") {
-    api.getAllWednesdaysInMonth(currentDate);
-    api.getAllDatesOfCurrWeek(state.monthWednesdays[0]);
+    nextTick(() => {
+      api.initWeeklyCalendar(currentDate);
+    });
   }
 };
 const getAllWednesdaysInYear = ({ state }) => (year) => {

package/calendar-view/vue.js

@@ -123,11 +123,12 @@ const initState = ({ reactive, props, computed, api: api2, images, modesIcon })
     multiSelect: computed(() => props.multiSelect),
     cascaderVisible: false,
     eventTipContent: {},
-    activeYear: props.year,
+    activeYear: props.year || (/* @__PURE__ */ new Date()).getFullYear(),
     displayMode: props.mode,
-    activeMonth: props.month,
-    currentDate: props.year + "-" + props.month,
-    cascaderCurrent: [props.year || (/* @__PURE__ */ new Date()).getFullYear(), props.month || (/* @__PURE__ */ new Date()).getMonth + 1],
+    activeMonth: props.month || (/* @__PURE__ */ new Date()).getMonth() + 1,
+    dateType: computed(() => !props.day ? "month" : "date"),
+    currentDate: props.year && props.month && props.day ? `${props.year}-${props.month}-${props.day}` : props.year && props.month ? `${props.year}-${props.month}` : `${(/* @__PURE__ */ new Date()).getFullYear()}-${(/* @__PURE__ */ new Date()).getMonth() + 1}-${(/* @__PURE__ */ new Date()).getDate()}`,
+    cascaderCurrent: [props.year || (/* @__PURE__ */ new Date()).getFullYear(), props.month || (/* @__PURE__ */ new Date()).getMonth() + 1],
     cascaderOptions: computed(() => api2.computeCascaderOptions()),
     calendar: computed(() => api2.computedCalendar("cur")),
     prevCalendar: computed(() => api2.computedCalendar("prev")),
@@ -153,6 +154,9 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
     () => state.mode,
     (val) => {
       emit("mode-change", val);
+      if (val !== "month") {
+        api2.getAllDatesOfCurrWeek(state.currentDate);
+      }
       if (val === "schedule") {
         api2.getCurWeekEvent();
       }
@@ -266,7 +270,7 @@ const initApi = ({ vm, api: api2, state, t, props, emit, nextTick }) => {
     initWeeklyCalendar: initWeeklyCalendar({ api: api2, state }),
     getDatesOfPreviousWeek: getDatesOfPreviousWeek({ api: api2, state }),
     getDatesOfNextWeek: getDatesOfNextWeek({ api: api2, state }),
-    currentDateChange: currentDateChange({ api: api2, state }),
+    currentDateChange: currentDateChange({ api: api2, state, nextTick }),
     newSchedule: newSchedule({ emit }),
     getPrevWeek: throttle(50, true, getPrevWeek({ api: api2, state, emit })),
     getNextWeek: throttle(50, true, getNextWeek({ api: api2, state, emit })),

package/color-picker/vue.js

@@ -50,6 +50,10 @@ const renderless = (props, ctx, { emit }) => {
   ctx.watch(
     () => props.modelValue,
     () => {
+      if (props.colorMode === "linear-gradient") {
+        state.hex = props.modelValue;
+        return;
+      }
       color.fromString(props.modelValue);
       const { r, g, b, a } = color.toRgba();
       state.hex = `rgba(${r}, ${g}, ${b}, ${a})`;

package/color-select-panel/alpha-select/index.js

@@ -1,12 +1,15 @@
 import "../../chunk-G2ADBYYC.js";
 import { getClientXY } from "../utils/getClientXY";
-const initState = ({ ref, reactive }) => {
-  const background = ref("");
+import { useContext } from "../utils/context";
+const initState = (hooks) => {
+  const { ref, reactive } = hooks;
+  const ctx = useContext(hooks);
+  const background = ref(ctx.activeColor.value.color.value);
   const left = ref(0);
-  const state = reactive({ background, left });
+  const state = reactive({ background, left, activeColor: ctx.activeColor });
   return state;
 };
-const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
+const useEvent = (state, slider, alphaWrapper, alphaThumb, props, ctx) => {
   const onDrag = (event) => {
     if (!slider.value || !alphaThumb.value) {
       return;
@@ -20,7 +23,7 @@ const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
     const alpha = Math.round(
       (left - alphaThumb.value.offsetWidth / 2) / (rect.width - alphaThumb.value.offsetWidth) * 100
     );
-    props.color.set("alpha", alpha);
+    ctx.activeColor.value.color.set("alpha", alpha);
   };
   const onClick = (event) => {
     if (event.target !== alphaThumb.value) {
@@ -36,12 +39,12 @@ const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
     if (!el) {
       return 0;
     }
-    const alpha = props.color.get("alpha");
+    const alpha = ctx.activeColor.value.color.get("alpha");
     return alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100;
   };
   const getBackground = () => {
-    if (props.color && props.color.value) {
-      const { r, g, b } = props.color.toRgb();
+    if (ctx.activeColor && ctx.activeColor.value) {
+      const { r, g, b } = ctx.activeColor.value.color.toRgb();
       return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
     }
     return "";
@@ -52,14 +55,16 @@ const useEvent = (state, slider, alphaWrapper, alphaThumb, props) => {
   };
   return { onDrag, onClick, update };
 };
-const initWatch = (props, update, { watch }) => {
+const initWatch = (props, update, { watch }, ctx) => {
   watch(
-    () => props.color.get("alpha"),
-    () => update(),
+    () => ctx.activeColor.value.color,
+    () => {
+      update();
+    },
     { deep: true }
   );
   watch(
-    () => props.color,
+    () => ctx.activeColor,
     () => update(),
     { deep: true }
   );

package/color-select-panel/alpha-select/vue.js

@@ -1,6 +1,7 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
 import { initState, initWatch, useEvent } from ".";
+import { useContext } from "../utils/context";
 const api = ["state", "color", "slider", "alphaWrapper", "alphaThumb", "onClick"];
 const renderless = (props, hooks, utils) => {
   const { onMounted, ref } = hooks;
@@ -8,8 +9,9 @@ const renderless = (props, hooks, utils) => {
   const slider = ref();
   const alphaWrapper = ref();
   const alphaThumb = ref();
+  const ctx = useContext(hooks);
   const state = initState(hooks);
-  const { update, onClick, onDrag } = useEvent(state, slider, alphaWrapper, alphaThumb, props);
+  const { update, onClick, onDrag } = useEvent(state, slider, alphaWrapper, alphaThumb, props, ctx);
   onMounted(() => {
     if (!slider.value || !alphaThumb.value) {
       return;
@@ -27,7 +29,7 @@ const renderless = (props, hooks, utils) => {
     update();
     emit("ready", update);
   });
-  initWatch(props, update, hooks);
+  initWatch(props, update, hooks, ctx);
   const api2 = {
     state,
     slider,

package/color-select-panel/hue-select/index.js

@@ -1,9 +1,28 @@
 import "../../chunk-G2ADBYYC.js";
+import { Color } from "../utils/color";
 import { getClientXY } from "../utils/getClientXY";
-const initState = (props, { reactive, ref, computed }) => {
+import { useContext } from "../utils/context";
+import { ColorPoint } from "../utils/color-points";
+const useOnClickBar = ({ addPoint, setActivePoint, getActviePoint }, { bar }, getLeft) => {
+  return (event) => {
+    const activePoint = getActviePoint().value;
+    const color = new Color({
+      enableAlpha: activePoint.color.enableAlpha,
+      format: activePoint.color.format,
+      value: activePoint.color.value
+    });
+    const left = getLeft(bar.value, event);
+    const colorPoint = new ColorPoint(color, left);
+    addPoint(colorPoint);
+    setActivePoint(colorPoint);
+  };
+};
+const initState = (props, hooks) => {
+  const { reactive, ref, computed } = hooks;
+  const ctx = useContext(hooks);
   const hueValue = computed(() => props.color.get("hue"));
-  const thumbTop = ref(0);
-  const state = reactive({ hueValue, thumbTop });
+  const thumbLeft = ref(0);
+  const state = reactive({ hueValue, thumbLeft, ctx });
   return state;
 };
 const initDom = ({ ref }) => {
@@ -13,7 +32,7 @@ const initDom = ({ ref }) => {
     wrapper: ref()
   };
 };
-const useEvent = ({ thumb, bar }, state, props, { emit }) => {
+const useEvent = ({ thumb, bar }, state, props, { emit }, ctx) => {
   const onSvReady = (update2) => {
     emit("svReady", update2);
   };
@@ -21,14 +40,28 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
     if (!thumb.value) {
       return 0;
     }
-    const hue = props.color.get("hue");
+    const hue = ctx.activeColor.value.color.get("hue");
     if (!bar.value) {
       return 0;
     }
-    return hue * (bar.value.offsetHeight - thumb.value.offsetHeight / 2) / 360;
+    return hue * (bar.value.offsetWidth - thumb.value.offsetWidth / 2) / 360;
   };
   const update = () => {
-    state.thumbTop = getThumbTop();
+    state.thumbLeft = getThumbTop();
+    if (ctx.colorMode.value !== "linear-gradient") {
+      ctx.activeColor.value.cursorLeft = state.thumbLeft;
+    }
+  };
+  const getLeft = (barEl, event) => {
+    if (!thumb.value) {
+      return 0;
+    }
+    const rect = barEl == null ? void 0 : barEl.getBoundingClientRect();
+    const { clientX } = getClientXY(event);
+    let left = clientX - rect.left;
+    left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+    left = Math.max(thumb.value.offsetWidth / 2, left);
+    return left;
   };
   const onDrag = (event) => {
     if (!bar.value || !thumb.value) {
@@ -38,20 +71,18 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
     if (!el) {
       return;
     }
+    const left = getLeft(el, event);
     const rect = el == null ? void 0 : el.getBoundingClientRect();
-    const { clientY } = getClientXY(event);
-    let top = clientY - rect.top;
-    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-    top = Math.max(thumb.value.offsetHeight / 2, top);
-    const hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
-    state.thumbTop = top;
+    const hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
+    state.thumbLeft = left;
     emit("hueUpdate", hue);
-    props.color.set("hue", hue);
+    ctx.activeColor.value.color.set("hue", hue);
   };
-  return { update, onDrag, onSvReady };
+  return { update, onDrag, onSvReady, getLeft, getThumbTop };
 };
 export {
   initDom,
   initState,
-  useEvent
+  useEvent,
+  useOnClickBar
 };

package/color-select-panel/hue-select/vue.js

@@ -1,19 +1,38 @@
-import "../../chunk-G2ADBYYC.js";
+import {
+  __objRest,
+  __spreadValues
+} from "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
-import { initDom, initState, useEvent } from ".";
-const api = ["state", "onSvReady", "bar", "thumb", "wrapper"];
+import { initDom, initState, useEvent, useOnClickBar } from ".";
+import { useContext } from "../utils/context";
+import { useColorPoints } from "../utils/color-points";
+const api = ["state", "onSvReady", "bar", "thumb", "wrapper", "onClickBar"];
 const renderless = (props, hooks, utils) => {
-  const { onMounted } = hooks;
+  const { onMounted, watch } = hooks;
   const { emit } = utils;
   const { thumb, bar, wrapper } = initDom(hooks);
   const state = initState(props, hooks);
-  const { onSvReady, onDrag, update } = useEvent({ thumb, bar, wrapper }, state, props, utils);
+  const ctx = useContext(hooks);
+  const { onSvReady, onDrag, update, getLeft, getThumbTop } = useEvent(
+    { thumb, bar, wrapper },
+    state,
+    props,
+    utils,
+    ctx
+  );
+  const _a = useColorPoints(
+    { wrapper: bar, points: [ctx.activeColor.value] },
+    hooks,
+    ctx
+  ), { addPoint, setActivePoint } = _a, rest = __objRest(_a, ["addPoint", "setActivePoint"]);
+  const onClickBar = useOnClickBar(__spreadValues({ addPoint, setActivePoint }, rest), { bar, thumb, wrapper }, getLeft);
   const api2 = {
     state,
     onSvReady,
     bar,
     thumb,
-    wrapper
+    wrapper,
+    onClickBar
   };
   onMounted(() => {
     if (!bar.value || !thumb.value) {
@@ -32,6 +51,13 @@ const renderless = (props, hooks, utils) => {
     emit("hueReady", update);
     update();
   });
+  watch(
+    () => ctx.activeColor.value.color,
+    () => {
+      state.thumbLeft = getThumbTop();
+    },
+    { immediate: true, deep: true }
+  );
   return api2;
 };
 export {

package/color-select-panel/index.js

@@ -1,5 +1,11 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import colors from "./utils/color-map";
 import { Color } from "./utils/color";
+import { createContext } from "./utils/context";
+import { ColorPoint } from "./utils/color-points";
 const panelRgb = (color, alpha) => {
   const { r, g, b } = color.toRgb();
   return alpha ? `rgba(${r},${g},${b},${color.get("alpha") / 100})` : `rgb(${r},${g},${b})`;
@@ -16,7 +22,147 @@ const triggerColorUpdate = (value, emit) => {
 const triggerConfirm = (value, emit) => {
   emit("confirm", value);
 };
-const initApi = (props, state, { emit, nextTick }) => {
+const parseCustomRGBA = (str, type) => {
+  if (!str || typeof str !== "string") {
+    return [0, 0, 0, 0];
+  }
+  let content = "";
+  let match = null;
+  if (type === "hsl") {
+    match = str.match(/hsla?\(([^)]+)\)/);
+  } else if (type === "rgb") {
+    match = str.match(/rgba?\(([^)]+)\)/);
+  } else if (type === "hsv") {
+    match = str.match(/hsva?\(([^)]+)\)/);
+  }
+  if (!match || !match[1]) {
+    return [0, 0, 0, 0];
+  }
+  content = match[1];
+  const parts = content.split(",").map((item) => item.trim());
+  const result = parts.map((item, index) => {
+    if (index === 0 || index === parts.length - 1 && parts.length === 4) {
+      return parseFloat(item);
+    }
+    return item;
+  });
+  return result;
+};
+const isGrandient = (val) => {
+  if (typeof val !== "string") {
+    return false;
+  }
+  return val.trim().startsWith("linear-gradient");
+};
+const sideCornerDegreeMap = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+  "top left": 315,
+  "left top": 315,
+  "top right": 45,
+  "right top": 45,
+  "bottom left": 225,
+  "left bottom": 225,
+  "bottom right": 135,
+  "right bottom": 135
+};
+const createColorPoints = (val, props, hooks, ext, bar) => {
+  if (!isGrandient(val)) {
+    return { colorPoints: [], angular: 180 };
+  }
+  const nodes = ext.parse(val);
+  let angular = 180;
+  const parseAngular = (node2) => {
+    if (node2.type === "angular") {
+      return Number.parseInt(node2.value);
+    }
+    return sideCornerDegreeMap[node2.value] || 180;
+  };
+  const parseBehavior = {
+    hex: (node2) => {
+      return new ColorPoint(new Color({ value: `#${node2.value}`, format: "hex", enableAlpha: props.alpha }), 0);
+    },
+    rgb: (node2) => {
+      if (props.alpha) {
+        return parseBehavior.rgba(__spreadProps(__spreadValues({}, node2), { type: "rgba" }));
+      }
+      return new ColorPoint(new Color({ enableAlpha: false, format: "rgb", value: `rgb(${node2.value.join(",")})` }), 0);
+    },
+    rgba: (node2) => {
+      const color = new Color({ enableAlpha: props.alpha, format: "rgba", value: `rgba(${node2.value.join(",")})` });
+      return new ColorPoint(color, 0);
+    },
+    hsl: (node2) => {
+      if (props.alpha) {
+        return parseBehavior.hsla(__spreadProps(__spreadValues({}, node2), { type: "hsla" }));
+      }
+      const color = new Color({ enableAlpha: false, format: "hsl", value: `hsl(${node2.value.join(" ")})` });
+      return new ColorPoint(color, 0);
+    },
+    hsla: (node2) => {
+      const color = new Color({ enableAlpha: props.alpha, format: "hsl", value: `hsl(${node2.value.join(" ")})` });
+      return new ColorPoint(color, 0);
+    },
+    literal: (node2) => {
+      let value = colors[node2.value] || "#00000000";
+      const color = new Color({ enableAlpha: true, format: "hex", value });
+      return new ColorPoint(color, 0);
+    },
+    "var": (node2) => {
+      hooks.warn("unsupported var ref.");
+      return parseBehavior.hex({ type: "hex", value: "#000", length: node2.length });
+    }
+  };
+  const unsupportedLengthUnit = ["em", "calc"];
+  const parseLength = (node2) => {
+    if (!node2 || !bar) {
+      return 0;
+    }
+    if (unsupportedLengthUnit.includes(node2.type)) {
+      hooks.warn(`unsupported unit ${node2.type}`);
+      return 0;
+    }
+    const barRect = bar.getBoundingClientRect();
+    const { width } = barRect;
+    const numberValue = Number.parseFloat(node2.value);
+    if (node2.type === "%") {
+      return Number.parseInt(`${numberValue / 100 * width}`);
+    }
+    if (node2.type === "px") {
+      return Number.parseInt(`${numberValue / width}`);
+    }
+    return 0;
+  };
+  const parseColotStop = (colorStop) => {
+    if (!(colorStop.type in parseBehavior)) {
+      hooks.warn(`unknown behavior ${colorStop}`);
+      throw new Error(`unknown behavior ${colorStop}`);
+    }
+    const colorPoint = parseBehavior[colorStop.type](colorStop);
+    const cursorLeft = parseLength(colorStop.length);
+    colorPoint.cursorLeft = cursorLeft;
+    return colorPoint;
+  };
+  const [node] = nodes;
+  if (node.type !== "linear-gradient") {
+    hooks.warn(`Only support linear-gradient yet.`);
+    return { colorPoints: [], angular: 180 };
+  }
+  if (!node) {
+    return { colorPoints: [], angular: 180 };
+  }
+  if (node.orientation) {
+    angular = parseAngular(node.orientation);
+  } else {
+    angular = 180;
+  }
+  const colorPoints = node.colorStops.map((colorStop) => parseColotStop(colorStop));
+  return { colorPoints, angular };
+};
+const initApi = (props, state, utils, hooks, ext) => {
+  const { emit, nextTick } = utils;
   const setShowPicker = (value) => state.showPicker = value;
   const resetColor = () => {
     nextTick(() => {
@@ -31,6 +177,12 @@ const initApi = (props, state, { emit, nextTick }) => {
     });
   };
   const submitValue = () => {
+    if (state.ctx.colorMode === "linear-gradient") {
+      updateModelValue(state.ctx.linearGardientValue, emit);
+      triggerConfirm(state.ctx.linearGardientValue, emit);
+      setShowPicker(false);
+      return;
+    }
     const value = state.color.value;
     updateModelValue(value, emit);
     triggerConfirm(value, emit);
@@ -93,10 +245,32 @@ const initApi = (props, state, { emit, nextTick }) => {
     setShowPicker(false);
   };
   const onHistoryClick = (historyColor) => {
-    state.color.fromString(historyColor);
+    if (state.ctx.colorMode === "monochrome") {
+      state.ctx.activeColor.color.fromString(historyColor);
+      return;
+    }
+    const colorString = isGrandient(historyColor) ? historyColor : `linear-gradient(90deg, #fff 0%, ${historyColor} 100%)`;
+    const colorPoints = createColorPoints(colorString, props, hooks, ext, state.ctx.bar);
+    state.ctx.colorPoints = colorPoints.colorPoints;
+    const lastPoint = colorPoints.colorPoints.at(-1);
+    if (lastPoint) {
+      state.ctx.activeColor = lastPoint;
+    }
+    state.ctx.deg = colorPoints.angular;
   };
   const onPredefineColorClick = (predefineColor) => {
-    state.color.fromString(predefineColor);
+    if (state.ctx.colorMode === "monochrome") {
+      state.color.fromString(predefineColor);
+      return;
+    }
+    const colorString = isGrandient(predefineColor) ? predefineColor : `linear-gradient(180deg, #fff 0%, ${predefineColor} 100%)`;
+    const colorPoints = createColorPoints(colorString, props, hooks, ext, state.ctx.bar);
+    state.ctx.colorPoints = colorPoints.colorPoints;
+    const lastPoint = colorPoints.colorPoints.at(-1);
+    if (lastPoint) {
+      state.ctx.activeColor = lastPoint;
+    }
+    state.ctx.deg = colorPoints.angular;
   };
   return {
     open,
@@ -114,8 +288,9 @@ const initApi = (props, state, { emit, nextTick }) => {
     onClickOutside
   };
 };
-const initState = (props, { reactive, ref, computed }) => {
+const initState = (props, hooks, utils, ext) => {
   var _a, _b;
+  const { reactive, ref, computed } = hooks;
   const stack = ref([...(_a = props.history) != null ? _a : []]);
   const predefineStack = computed(() => props.predefine);
   const hue = ref();
@@ -129,7 +304,40 @@ const initState = (props, { reactive, ref, computed }) => {
       value: props.modelValue
     })
   );
+  const bar = ref(null);
+  const ctx = {
+    colorMode: computed(() => {
+      var _a2;
+      return (_a2 = props.colorMode) != null ? _a2 : "monochrome";
+    }),
+    activeColor: ref(new ColorPoint(color, 0)),
+    colorPoints: ref([new ColorPoint(color, 0)]),
+    linearGardientValue: ref(""),
+    bar,
+    deg: ref(180)
+  };
+  if (isGrandient(props.modelValue)) {
+    hooks.watchEffect(() => {
+      if (!bar.value) {
+        return;
+      }
+      const { colorPoints, angular } = createColorPoints(props.modelValue, props, hooks, ext, bar.value);
+      ctx.deg.value = angular;
+      ctx.colorPoints.value = colorPoints;
+      const lastPoint = colorPoints.at(-1);
+      if (lastPoint) {
+        ctx.activeColor.value = lastPoint;
+      }
+    });
+  }
+  createContext(ctx, hooks);
   const input = ref("");
+  const hexInput1 = ref();
+  const hexInput2 = ref();
+  const hexInput4 = ref();
+  const hexInput5 = ref();
+  const hexInput6 = ref();
+  const hexInput7 = ref();
   const showPicker = ref(props.visible);
   const showPanel = ref(false);
   const panelColor = computed(() => {
@@ -142,6 +350,12 @@ const initState = (props, { reactive, ref, computed }) => {
   const state = reactive({
     color,
     input,
+    hexInput1,
+    hexInput2,
+    hexInput4,
+    hexInput5,
+    hexInput6,
+    hexInput7,
     showPicker,
     showPanel,
     panelColor,
@@ -154,7 +368,10 @@ const initState = (props, { reactive, ref, computed }) => {
     enablePredefineColor: computed(() => props.enablePredefineColor),
     enableHistory: computed(() => props.enableHistory),
     currentFormat,
-    formats: props.format
+    formats: props.format,
+    ctx,
+    isLinearGradient: computed(() => ctx.colorMode.value === "linear-gradient"),
+    linearGradient: computed(() => ctx.linearGardientValue.value)
   });
   return state;
 };
@@ -192,9 +409,19 @@ const initWatch = (state, props, { nextTick, watch }, { emit }) => {
     }
   );
   watch(
-    () => state.currentColor,
+    () => [state.currentColor, state.linearGradient],
     () => {
-      state.input = state.currentColor;
+      if (state.isLinearGradient) {
+        state.input = state.linearGradient;
+        return;
+      } else {
+        state.input = state.currentColor;
+        const result = parseCustomRGBA(state.currentColor, state.currentFormat);
+        state.hexInput4 = Math.ceil(Number(result[0]));
+        state.hexInput5 = result[1];
+        state.hexInput6 = result[2];
+        state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
+      }
       triggerColorUpdate(state.input, emit);
     },
     { flush: "sync" }
@@ -236,6 +463,7 @@ export {
   initState,
   initWatch,
   panelRgb,
+  parseCustomRGBA,
   triggerCancel,
   triggerColorUpdate,
   triggerConfirm,