@opentiny/vue-renderless 3.17.5 → 3.18.0-beta.1

package/README.md

@@ -1,7 +1,16 @@
 # @opentiny/vue-renderless
 
-This is for TINY's own internal use only, currently as a dependency for @opentiny/vue.
+Provides a rendering-free logic layer for the `TinyVue` component.
 
-It can also be used as a renderless functions for implementing a custom UI component.
+## You can customize the global configuration of some components
 
-For all instructions, please check out the home page: [https://open.codehub.huawei.com/innersource/originjs/tiny/opentiny-vue/home](https://open.codehub.huawei.com/innersource/originjs/tiny/opentiny-vue/home)
+### Modify the popup window starting level (z-index)
+
+Add the following code to the entry file `main.js`:
+
+```js
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager'
+
+// Set the starting level to 3000
+PopupManager.zIndex = 3000
+```

package/action-menu/index.js

@@ -9,14 +9,14 @@ const computedMaxShowNum = ({ props, state }) => () => {
     return 2;
   }
 };
-const computedSpacing = ({ props, state }) => () => {
+const computedSpacing = ({ props, state, designConfig }) => () => {
   if (props.spacing !== void 0) {
     return String(props.spacing).includes("px") ? props.spacing : props.spacing + "px";
   }
   if (state.isCardMode) {
     return "10px";
   } else {
-    return "5px";
+    return (designConfig == null ? void 0 : designConfig.props.spacing) || "8px";
   }
 };
 const computedMoreText = ({ props, state, t }) => () => {

package/action-menu/vue.js

@@ -9,7 +9,7 @@ import {
   computedSuffixIcon
 } from "./index";
 const api = ["state", "handleMoreClick", "handleItemClick", "visibleChange"];
-const renderless = (props, { computed, reactive }, { emit, t }) => {
+const renderless = (props, { computed, reactive }, { emit, t, designConfig }) => {
   const api2 = {};
   const state = reactive({
     visibleOptions: computed(() => props.options.slice(0, state.maxShowNum)),
@@ -26,7 +26,7 @@ const renderless = (props, { computed, reactive }, { emit, t }) => {
     handleItemClick: handleItemClick(emit),
     visibleChange: visibleChange(emit),
     computedMaxShowNum: computedMaxShowNum({ props, state }),
-    computedSpacing: computedSpacing({ props, state }),
+    computedSpacing: computedSpacing({ props, state, designConfig }),
     computedMoreText: computedMoreText({ props, state, t }),
     computedSuffixIcon: computedSuffixIcon({ props, state })
   });

package/anchor/index.js

@@ -87,11 +87,14 @@ const handleScroll = (state) => () => {
   state.scrollTimer = window.setTimeout(() => {
     state.isScroll = false;
     clearTimeout(state.scrollTimer);
-  }, 2e3);
+  }, 200);
 };
 const setChildOffsetTop = ({ state, props }) => {
-  var _a;
-  state.offsetTop = ((_a = document.querySelector(props.links[0].link)) == null ? void 0 : _a.offsetTop) || 0;
+  var _a, _b;
+  if (!((_a = props.links) == null ? void 0 : _a.length)) {
+    return;
+  }
+  state.offsetTop = ((_b = document.querySelector(props.links[0].link)) == null ? void 0 : _b.offsetTop) || 0;
 };
 const getContainer = ({ props }) => () => props.containerId && document.querySelector(props.containerId) || document.body;
 const mounted = ({ state, api, props, nextTick }) => () => {
@@ -131,6 +134,10 @@ const onItersectionObserver = ({ state, props, api, vm, emit }) => () => {
         updateSkidPosition({ vm, state, emit });
         return;
       }
+      if (state.isScroll) {
+        api.handleScroll();
+        return;
+      }
       for (let key in state.observerLinks) {
         if (Object.prototype.hasOwnProperty.call(state.observerLinks, key)) {
           const item = state.observerLinks[key];
@@ -146,7 +153,7 @@ const onItersectionObserver = ({ state, props, api, vm, emit }) => () => {
         }
       }
     },
-    { root: scrollContainer, threshold: [0] }
+    { root: scrollContainer, threshold: [0, 0.25, 0.5, 1] }
   );
   addObserver({ props, state });
 };

package/autocomplete/index.js

@@ -1,4 +1,5 @@
 import "../chunk-G2ADBYYC.js";
+import { FORM_ITEM, FORM_EVENT } from "../common/form/const";
 const getData = ({
   props,
   state,
@@ -28,11 +29,15 @@ const handleChange = ({
   api,
   emit,
   state,
-  props
+  props,
+  dispatch
 }) => (value) => {
   state.activated = true;
   emit("update:modelValue", value);
   state.suggestionDisabled = false;
+  if (state.validateEvent) {
+    dispatch(FORM_ITEM, FORM_EVENT.change, [value]);
+  }
   if (!props.triggerOnFocus && !value) {
     state.suggestionDisabled = true;
     state.suggestions = [];
@@ -55,9 +60,12 @@ const handleFocus = ({
     api.debouncedGetData(props.modelValue);
   }
 };
-const handleBlur = ({ emit, state }) => (event) => {
+const handleBlur = ({ emit, state, dispatch, props }) => () => {
   state.suggestionDisabled = true;
-  emit("blur", event);
+  emit("blur");
+  if (state.validateEvent) {
+    dispatch(FORM_ITEM, FORM_EVENT.blur, [props.modelValue]);
+  }
 };
 const handleClear = ({ emit, state }) => () => {
   state.activated = false;
@@ -91,21 +99,22 @@ const select = ({
   emit,
   nextTick,
   props,
-  state
+  state,
+  dispatch
 }) => (item) => {
-  emit("update:modelValue", item[props.valueKey]);
+  const value = item[props.valueKey];
+  emit("update:modelValue", value);
   emit("select", item);
+  if (state.validateEvent) {
+    dispatch(FORM_ITEM, FORM_EVENT.change, [value]);
+  }
   nextTick(() => {
     state.activated = false;
     state.suggestions = [];
     state.highlightedIndex = -1;
   });
 };
-const highlight = ({
-  constants,
-  vm,
-  state
-}) => (index) => {
+const highlight = ({ constants, vm, state }) => (index) => {
   if (!state.suggestionVisible || state.loading) {
     return;
   }
@@ -136,10 +145,7 @@ const computedVisible = (state) => {
   let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
   return (isValidData || state.loading) && state.activated;
 };
-const watchVisible = ({
-  suggestionState,
-  vm
-}) => (val) => {
+const watchVisible = ({ suggestionState, vm }) => (val) => {
   let $input = vm.$refs.input.getInput();
   if ($input) {
     suggestionState.dropdownWidth = $input.offsetWidth + "px";

package/autocomplete/vue.js

@@ -19,7 +19,6 @@ import {
 } from "./index";
 const api = [
   "state",
-  "select",
   "suggestionState",
   "getInput",
   "handleChange",
@@ -37,8 +36,10 @@ const initState = ({
   reactive,
   $prefix,
   computed,
+  props,
   inject
 }) => {
+  var _a;
   const state = reactive({
     showAutoWidth: inject("showAutoWidth", null),
     popperElm: null,
@@ -48,7 +49,9 @@ const initState = ({
     highlightedIndex: -1,
     suggestionDisabled: false,
     id: $prefix + "-" + guid(),
-    suggestionVisible: computed(() => computedVisible(state))
+    suggestionVisible: computed(() => computedVisible(state)),
+    // props.validateEvent优先级大于inject，都没有配置默认为true
+    validateEvent: (_a = props.validateEvent) != null ? _a : inject("validateEvent", true)
   });
   return state;
 };
@@ -67,7 +70,19 @@ const initSuggestionState = ({
     referenceElm
   });
 };
-const initApi = ({ api: api2, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants }) => {
+const initApi = ({
+  api: api2,
+  state,
+  doDestroy,
+  suggestionState,
+  emit,
+  vm,
+  props,
+  updatePopper,
+  nextTick,
+  constants,
+  dispatch
+}) => {
   api2.getData = getData({ props, state, updatePopper, nextTick });
   Object.assign(api2, {
     state,
@@ -75,13 +90,13 @@ const initApi = ({ api: api2, state, doDestroy, suggestionState, emit, vm, props
     suggestionState,
     close: close(state),
     open: open(api2),
-    handleBlur: handleBlur({ emit, state }),
+    handleBlur: handleBlur({ emit, state, dispatch, props }),
     mounted: mounted({ vm, state, suggestionState }),
     highlight: highlight({ constants, vm, state }),
     handleClear: handleClear({ emit, state }),
-    select: select({ emit, nextTick, props, state }),
+    select: select({ emit, nextTick, props, state, dispatch }),
     watchVisible: watchVisible({ suggestionState, vm }),
-    handleChange: handleChange({ api: api2, emit, state, props }),
+    handleChange: handleChange({ api: api2, emit, state, props, dispatch }),
     handleFocus: handleFocus({ api: api2, emit, props, state }),
     handleKeyEnter: handleKeyEnter({ api: api2, emit, nextTick, props, state }),
     debouncedGetData: debounce(props.debounce, api2.getData)
@@ -96,9 +111,9 @@ const renderless = (props, {
   toRefs,
   onDeactivated,
   inject
-}, { $prefix, vm, parent, emit, constants, nextTick, slots }) => {
+}, { $prefix, vm, parent, emit, constants, nextTick, slots, dispatch }) => {
   const api2 = {};
-  const state = initState({ reactive, $prefix, computed, inject });
+  const state = initState({ reactive, $prefix, computed, props, inject });
   const { showPopper, popperElm, referenceElm, doDestroy, updatePopper } = userPopper({
     reactive,
     watch,
@@ -112,7 +127,19 @@ const renderless = (props, {
     onDeactivated
   });
   const suggestionState = initSuggestionState({ reactive, parent, showPopper, popperElm, referenceElm });
-  initApi({ api: api2, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants });
+  initApi({
+    api: api2,
+    state,
+    doDestroy,
+    suggestionState,
+    emit,
+    vm,
+    props,
+    updatePopper,
+    nextTick,
+    constants,
+    dispatch
+  });
   watch(() => state.suggestionVisible, api2.watchVisible);
   onMounted(api2.mounted);
   return api2;

package/badge/index.js

@@ -1,10 +1,11 @@
 import "../chunk-G2ADBYYC.js";
-const computedContent = ({ props, state }) => () => typeof state.valueRef === "number" && typeof props.max === "number" ? props.max < state.valueRef ? `${props.max}+` : state.valueRef : state.valueRef;
+const computedContent = ({ props, state }) => () => (typeof props.value === "number" || typeof props.value === "string") && typeof props.max === "number" ? props.max < Number(state.valueRef) ? `${props.max}+` : state.valueRef : state.valueRef;
 const computedValueRef = ({ props }) => () => {
-  if (typeof props.value === "number") {
+  if (typeof props.value === "number" || typeof props.value === "string") {
     return props.value;
+  } else {
+    return void 0;
   }
-  return typeof props.modelValue === "number" ? props.modelValue : void 0;
 };
 const computedTransform = ({ designConfig, props }) => () => {
   if ((designConfig == null ? void 0 : designConfig.transform) === "unset") {

package/base-select/index.js

@@ -420,7 +420,7 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     if (!state.isDisplayOnly && (props.hoverExpand || props.clickExpand) && !props.disabled) {
       api.calcCollapseTags();
     }
-    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || state.initialInputHeight || (state.isSaaSTheme ? 28 : 30);
+    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || state.initialInputHeight || 32;
     const noSelected = state.selected.length === 0;
     const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : constants.SPACING_HEIGHT;
     if (!state.isDisplayOnly) {
@@ -1198,7 +1198,7 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
     document.activeElement.blur();
   }
   state.completed = true;
-  const defaultSizeMap = { default: 28, mini: 24, small: 32, medium: 40 };
+  const defaultSizeMap = { default: 32, mini: 24, small: 36, medium: 40 };
   const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
   if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
     state.currentPlaceholder = "";
@@ -1249,7 +1249,7 @@ const optmzApis = {
       vm.$refs.scrollbar.$el.querySelectorAll(
         '.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
       )
-    ).map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`)).filter((v) => v);
+    ).map((item) => item.querySelector(`[data-tag="tiny-option"]:not(${querySelectKey})`)).filter((v) => v);
   },
   setScrollTop: ({ refs, state }) => {
     const { optimizeStore } = state;

package/breadcrumb-item/vue.js

@@ -1,14 +1,13 @@
 import "../chunk-G2ADBYYC.js";
 import { linkClick } from "./index";
 const api = ["linkClick", "state"];
-const renderless = (props, { reactive, inject }, { designConfig }, { refs, router, emit }) => {
+const renderless = (props, { reactive, inject, computed }, { refs, router, emit, designConfig }) => {
   const breadcrumbEmitter = inject("breadcrumbEmitter");
   const breadcrumb = inject("breadcrumb");
   const constants = breadcrumb._constants;
-  const separator = breadcrumb.separator || (designConfig == null ? void 0 : designConfig.separator) || ">";
   const state = reactive({
     size: inject("size", null),
-    separator
+    separator: computed(() => breadcrumb.separator || (designConfig == null ? void 0 : designConfig.separator) || "/")
   });
   const api2 = {
     state,

package/button-group/index.js

@@ -23,7 +23,12 @@ const getItemClass = ({ props, state }) => (node) => {
   if (state.disabled || node.disabled) {
     return { disabled: true };
   }
-  return props.plain ? { plain: props.plain } : {};
+  return props.plain ? {
+    plain: props.plain,
+    medium: props.size === "medium",
+    small: props.size === "small",
+    mini: props.size === "mini"
+  } : {};
 };
 export {
   getItemClass,

package/carousel-item/index.js

@@ -46,7 +46,7 @@ const translateItem = ({ api, CARD_SCALE, parent, state, carouselParent }) => ({
   } else {
     state.active = index === activeIndex;
     if (length === 2 && !state.active) {
-      state.translate = vnode.type === TYPE_VERTICAL ? -parentHeight : -parentWidth;
+      state.translate = vnode.type === TYPE_VERTICAL ? parentHeight : parentWidth;
     } else {
       state.translate = vnode.type === TYPE_VERTICAL ? parentHeight * (index - activeIndex) : parentWidth * (index - activeIndex);
     }

package/checkbox/index.js

@@ -111,7 +111,7 @@ const computedIsGroupDisplayOnly = ({ state }) => () => state.isGroup && (state.
 const computedDisplayLabel = ({ state, props, t }) => () => {
   state.showLabel = true;
   if (props.trueLabel !== void 0 && props.falseLabel !== void 0) {
-    return props.modelValue ? String(props.trueLabel) : String(props.falseLabel);
+    return props.modelValue;
   } else {
     return props.modelValue ? t("yes") : t("no");
   }

package/collapse-item/index.js

@@ -23,6 +23,11 @@ const handleHeaderClick = ({
   state.focusing = false;
   state.isClick = true;
 };
+const handleHeaderContainerClick = ({ api }) => (e) => {
+  if (e.target === e.currentTarget) {
+    api.handleHeaderClick();
+  }
+};
 const handleEnterClick = ({
   componentName,
   dispatch,
@@ -32,5 +37,6 @@ const handleEnterClick = ({
 export {
   handleEnterClick,
   handleFocus,
-  handleHeaderClick
+  handleHeaderClick,
+  handleHeaderContainerClick
 };

package/collapse-item/vue.js

@@ -1,7 +1,14 @@
 import "../chunk-G2ADBYYC.js";
-import { handleFocus, handleEnterClick, handleHeaderClick } from "./index";
+import { handleFocus, handleEnterClick, handleHeaderClick, handleHeaderContainerClick } from "./index";
 import { guid } from "../common/string";
-const api = ["state", "isActive", "handleFocus", "handleEnterClick", "handleHeaderClick"];
+const api = [
+  "state",
+  "isActive",
+  "handleFocus",
+  "handleEnterClick",
+  "handleHeaderClick",
+  "handleHeaderContainerClick"
+];
 const renderless = (props, { computed, reactive }, { parent, constants, dispatch, designConfig }) => {
   var _a;
   const _constants = parent.collapse._constants;
@@ -22,6 +29,9 @@ const renderless = (props, { computed, reactive }, { parent, constants, dispatch
     handleEnterClick: handleEnterClick({ componentName, dispatch, eventName, parent }),
     handleHeaderClick: handleHeaderClick({ componentName, dispatch, eventName, props, parent, state })
   };
+  Object.assign(api2, {
+    handleHeaderContainerClick: handleHeaderContainerClick({ api: api2 })
+  });
   return api2;
 };
 export {

package/color-picker/index.js

@@ -1,42 +1,30 @@
 import "../chunk-G2ADBYYC.js";
-const onCancel = (tmpColor, triggerBg, isShow, pre, emit) => {
-  return (color) => {
-    tmpColor.reset(color.value.getHex());
-    triggerBg.value = pre.value;
-    isShow.value = false;
-    emit("cancel");
-  };
+const updateModelValue = (val, emit) => {
+  emit("update:modelValue", val);
 };
-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 toggleVisible = (isShow) => {
+  return (val) => {
+    isShow.value = val;
   };
 };
-const onHueUpdate = (tmpColor, triggerBg) => {
-  return (h) => {
-    triggerBg.value = tmpColor.getHex();
-    tmpColor.set({ h });
+const useEvent = (hex, emit, changeVisible) => {
+  const onConfirm = (val) => {
+    hex.value = val;
+    updateModelValue(val, emit);
+    emit("confirm", val);
+    changeVisible(false);
   };
-};
-const onSVUpdate = (tmpColor, triggerBg) => {
-  return ({ s, v }) => {
-    triggerBg.value = tmpColor.getHex();
-    tmpColor.set({ s, v });
+  const onCancel = (color) => {
+    hex.value = color.value.hex;
+    changeVisible(false);
+    emit("cancel");
   };
-};
-const onColorUpdate = (triggerBg) => {
-  return (color) => {
-    triggerBg.value = color.value.getHex();
+  return {
+    onConfirm,
+    onCancel
   };
 };
 export {
-  onCancel,
-  onColorUpdate,
-  onConfirm,
-  onHueUpdate,
-  onSVUpdate
+  toggleVisible,
+  useEvent
 };

package/color-picker/vue.js

@@ -1,72 +1,49 @@
 import "../chunk-G2ADBYYC.js";
-import Color from "./utils/color";
-import { onConfirm, onCancel, onHueUpdate, onSVUpdate, onColorUpdate } from "./index";
-const api = [
-  "state",
-  "changeVisible",
-  "cursor",
-  "onColorUpdate",
-  "onHueUpdate",
-  "onSVUpdate",
-  "onConfirm",
-  "onCancel",
-  "onAlphaUpdate",
-  "alpha"
-];
-const renderless = (props, context, { emit }) => {
-  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 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,
-    triggerBg,
-    defaultValue: modelValue,
-    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(
+import { toggleVisible, useEvent } from "./index";
+const api = ["state", "changeVisible", "onConfirm", "onCancel", "onHueUpdate", "onSVUpdate", "onColorUpdate"];
+const renderless = (props, ctx, { emit }) => {
+  var _a, _b, _c;
+  const { modelValue, visible, predefine, size, history } = ctx.toRefs(props);
+  const isShow = ctx.ref(visible.value);
+  const hex = ctx.ref((_a = modelValue.value) != null ? _a : "transparent");
+  const stack = ctx.ref([...(_b = history == null ? void 0 : history.value) != null ? _b : []]);
+  const predefineStack = ctx.ref([...(_c = predefine == null ? void 0 : predefine.value) != null ? _c : []]);
+  ctx.watch(
     predefine,
     (newPredefine) => {
       predefineStack.value = [...newPredefine];
     },
     { deep: true }
   );
-  context.watch(
+  ctx.watch(
     history,
     (newHistory) => {
       stack.value = [...newHistory];
     },
     { deep: true }
   );
-  context.watch(modelValue, (newValue) => {
-    pre.value = newValue;
-    hex.value = newValue;
-    state.hex = newValue;
-    state.triggerBg = newValue;
+  const state = ctx.reactive({
+    isShow,
+    hex,
+    triggerBg: ctx.ref(modelValue.value),
+    size,
+    stack,
+    predefineStack
+  });
+  ctx.watch(props, () => {
+    hex.value = props.modelValue;
   });
-  context.watch(visible, (visible2) => {
-    isShow.value = visible2;
+  ctx.watch(hex, () => {
+    emit("update:modelValue", hex.value);
   });
+  const changeVisible = toggleVisible(isShow);
+  const { onConfirm, onCancel } = useEvent(hex, emit, changeVisible);
+  const api2 = {
+    state,
+    changeVisible,
+    onConfirm,
+    onCancel
+  };
   return api2;
 };
 export {

package/color-select-panel/index.js

@@ -20,6 +20,7 @@ const onConfirm = (hex, pre, res, emit, stack, enableHistory, color) => {
     }
     color.value.setPrevH(color.value.get("h"));
     emit("confirm", res.value);
+    emit("update:modelValue", res.value);
   };
 };
 const onCancel = (res, pre, emit, isShow, hex, color) => {
@@ -33,31 +34,33 @@ const onCancel = (res, pre, emit, isShow, hex, color) => {
       }));
       emit("cancel", color);
     }
+    emit("update:modelValue", hex.value);
   };
 };
-const onColorUpdate = (color, res) => {
+const onColorUpdate = (color, res, emit) => {
   res.value = color.value.getHex();
+  emit("update:modelValue", res.value);
 };
 const onHSVUpdate = (color, res, hex, emit) => {
   return {
     onHueUpdate: (hue) => {
       color.value.set({ h: hue });
-      onColorUpdate(color, res);
+      onColorUpdate(color, res, emit);
       hex.value = color.value.getHex();
       emit("hue-update", hue);
     },
     onSVUpdate: ({ s, v }) => {
       hex.value = color.value.getHex();
-      onColorUpdate(color, res);
+      onColorUpdate(color, res, emit);
       emit("sv-update", { s, v });
     }
   };
 };
-const onAlphaUpdate = (color, res) => {
+const onAlphaUpdate = (color, res, emit) => {
   return {
     update: (alpha) => {
       color.value.set({ a: alpha });
-      onColorUpdate(color, res);
+      onColorUpdate(color, res, emit);
     }
   };
 };

package/color-select-panel/vue.js

@@ -58,7 +58,6 @@ const renderless = (props, context, { emit }) => {
     { deep: true }
   );
   context.watch(modelValue, (newValue) => {
-    pre.value = res.value;
     hex.value = newValue;
     res.value = newValue;
     color.value.reset(newValue);
@@ -68,7 +67,7 @@ const renderless = (props, context, { emit }) => {
     isShow.value = visible2;
   });
   const { onHueUpdate, onSVUpdate } = onHSVUpdate(color, res, hex, emit);
-  const { update } = onAlphaUpdate(color, res);
+  const { update } = onAlphaUpdate(color, res, emit);
   const api2 = {
     state,
     changeVisible,