@opentiny/vue-renderless 3.13.1 → 3.14.0

package/multi-select/vue.js

@@ -1,5 +1,22 @@
 import "../chunk-G2ADBYYC.js";
-import { created, handleClick, confirm, reset, wheelChange, clickWheelItem, loadDefault } from "./index";
+import {
+  created,
+  initValue,
+  handleClick,
+  confirm,
+  reset,
+  wheelChange,
+  clickWheelItem,
+  loadDefault,
+  handleSearchBtnClick,
+  handleOptionSelect,
+  handleClose,
+  toggleItemExpand,
+  computedCurrentOptions,
+  updateValue,
+  handleSearchInput,
+  updateTitle
+} from "./index";
 const api = [
   "state",
   "created",
@@ -8,58 +25,86 @@ const api = [
   "reset",
   "wheelChange",
   "clickWheelItem",
-  "loadDefault"
+  "loadDefault",
+  "handleSearchBtnClick",
+  "handleClose",
+  "handleSearchInput"
 ];
-const initState = (reactive) => {
+const initState = ({ emitter, reactive, computed, api: api2, props }) => {
   const state = reactive({
     dataSource: [],
     wheelData: [],
+    isSearching: false,
     headerIndex: -1,
-    showWheel: false,
+    showOptions: false,
     labelLevelsInfo: [],
     labelsStyle: [],
     wheelIndex: [],
     wheelText: "",
     headerInfo: [],
     defaultSelectedIndexs: [],
-    defaultSelectedArray: []
+    defaultSelectedArray: [],
+    multiSelectEmitter: emitter(),
+    searchValue: "",
+    optionMap: [],
+    currentOptions: computed(() => api2.computedCurrentOptions()),
+    showMask: computed(() => props.mask && state.showOptions)
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, emit, nextTick, refs }) => {
+const initApi = ({ api: api2, props, state, emit, nextTick, refs, vm }) => {
   Object.assign(api2, {
     state,
-    created: created({ props, state, refs, nextTick }),
+    created: created({ api: api2, emit, props, state, refs, nextTick }),
+    initValue: initValue({ props, emit }),
     handleClick: handleClick({ api: api2, props, state }),
     confirm: confirm({ state, emit }),
     reset: reset({ api: api2, props, state, emit }),
     wheelChange: wheelChange(state),
     clickWheelItem: clickWheelItem({ state, emit }),
-    loadDefault: loadDefault({ props, state })
+    loadDefault: loadDefault({ props, state }),
+    handleSearchBtnClick: handleSearchBtnClick({ props, state, nextTick, vm }),
+    handleOptionSelect: handleOptionSelect({ api: api2, state, emit }),
+    handleClose: handleClose(state),
+    toggleItemExpand: toggleItemExpand({ state }),
+    computedCurrentOptions: computedCurrentOptions({ state, props }),
+    updateValue: updateValue({ state, props, emit }),
+    updateTitle: updateTitle({ props, state }),
+    handleSearchInput: handleSearchInput({ state, emit })
   });
 };
-const initWatch = ({ watch, props, state, refs, nextTick }) => {
+const initWatch = ({ api: api2, watch, props, state, refs, nextTick }) => {
   watch(
     () => props.dataSource,
     () => {
-      api.created({ props, state, refs, nextTick });
+      api2.created({ props, state, refs, nextTick });
     }
   );
   watch(
     () => props.defaultSelectedArray,
     () => {
-      api.created({ props, state, refs, nextTick });
+      api2.created({ props, state, refs, nextTick });
     }
   );
+  watch(
+    () => props.modelValue,
+    () => {
+      api2.updateTitle();
+    },
+    { deep: true }
+  );
 };
-const renderless = (props, { onMounted, reactive, watch }, { emit, nextTick, refs }) => {
+const renderless = (props, { onMounted, reactive, watch, provide, computed }, { emit, nextTick, refs, vm, emitter }) => {
   const api2 = {};
-  const state = initState(reactive);
-  initApi({ api: api2, props, state, emit, nextTick, refs });
-  initWatch({ watch, props, state, refs, nextTick });
+  const state = initState({ emitter, reactive, computed, api: api2, props });
+  provide("multiSelect", vm);
+  initApi({ api: api2, props, state, emit, nextTick, refs, vm });
+  initWatch({ api: api2, watch, props, state, refs, nextTick });
   onMounted(() => {
     api2.created({ props, state, refs, nextTick });
   });
+  state.multiSelectEmitter.on("multiSelectItemClick", api2.handleOptionSelect);
+  state.multiSelectEmitter.on("toggleItemExpand", api2.toggleItemExpand);
   return api2;
 };
 export {

package/multi-select-item/index.js

@@ -0,0 +1,23 @@
+import "../chunk-G2ADBYYC.js";
+const handleClick = ({ props, multiSelect }) => (event) => {
+  if (props.option.disabled) {
+    return;
+  }
+  event.stopPropagation();
+  if (props.disabled !== true && multiSelect.disabled !== true) {
+    multiSelect.state.multiSelectEmitter.emit("multiSelectItemClick", props.option);
+  }
+};
+const toggleExpand = ({ props, multiSelect }) => (event) => {
+  if (props.option.disabled) {
+    return;
+  }
+  event.stopPropagation();
+  if (props.disabled !== true && multiSelect.disabled !== true) {
+    multiSelect.state.multiSelectEmitter.emit("toggleItemExpand", props.option);
+  }
+};
+export {
+  handleClick,
+  toggleExpand
+};

package/multi-select-item/vue.js

@@ -0,0 +1,31 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, toggleExpand } from "./index";
+const api = [
+  "state",
+  "created",
+  "handleClick",
+  "confirm",
+  "reset",
+  "wheelChange",
+  "clickWheelItem",
+  "loadDefault",
+  "toggleExpand"
+];
+const initApi = ({ api: api2, props, state, multiSelect }) => {
+  Object.assign(api2, {
+    state,
+    handleClick: handleClick({ props, multiSelect }),
+    toggleExpand: toggleExpand({ props, multiSelect })
+  });
+};
+const renderless = (props, { reactive, inject }, { emit, nextTick, refs, vm }) => {
+  const api2 = {};
+  const multiSelect = inject("multiSelect");
+  const state = reactive({});
+  initApi({ api: api2, multiSelect, props, state });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/numeric/index.js

@@ -16,11 +16,11 @@ const initService = (service) => {
   };
 };
 const getDecimal = (props) => (value) => getMiniDecimal(value, props.plugin);
-const watchValue = ({ api, state, nextTick }) => (value) => {
+const watchValue = ({ api, props, state, nextTick }) => (value) => {
   if (value === state.currentValue) {
     return;
   }
-  api.setCurrentValue(value);
+  api.setCurrentValue(value, props.changeCompat);
   nextTick(() => {
     api.dispatchDisplayedValue();
   });
@@ -61,7 +61,7 @@ const increase = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.maxDisabled) {
     return;
   }
-  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
+  const value = (props.mouseWheel ? state.displayValue : Number(state.userInput)) || 0;
   if (value.toString().includes("e")) {
     return;
   }
@@ -79,7 +79,7 @@ const decrease = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.minDisabled) {
     return;
   }
-  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
+  const value = (props.mouseWheel ? state.displayValue : Number(state.userInput)) || 0;
   if (value.toString().includes("e")) {
     return;
   }
@@ -108,9 +108,9 @@ const handleBlur = ({
     dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.blur, [state.displayValue]);
   }
 };
-const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
+const handleFocus = ({ emit, state, props, api, vm }) => (event) => {
   if (props.disabled) {
-    refs.input.blur();
+    vm.$refs.input.blur();
   }
   state.inputStatus = true;
   const currentValue = api.getDecimal(state.currentValue);
@@ -126,8 +126,8 @@ const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
   }
   emit("focus", event);
 };
-const focus = (refs) => () => {
-  refs.input.focus();
+const focus = (vm) => () => {
+  vm.$refs.input.focus();
 };
 const getEmitValue = (args) => {
   let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal } = args;
@@ -163,7 +163,7 @@ const setCurrentValue = ({
   emit,
   props,
   state
-}) => (newVal) => {
+}) => (newVal, emitChangeFlag = true) => {
   const { max, min, allowEmpty, validateEvent, stringMode, plugin } = props;
   const { format } = state;
   const oldVal = state.currentValue;
@@ -183,7 +183,9 @@ const setCurrentValue = ({
   state.lastInput = emitValue;
   if (emitValue !== oldVal) {
     emit("update:modelValue", emitValue);
-    emit("change", emitValue, oldVal);
+    if (emitChangeFlag) {
+      emit("change", emitValue, oldVal);
+    }
     state.currentValue = emitValue;
     state.userInput = emitValue;
     if (validateEvent && oldVal === "") {
@@ -233,8 +235,21 @@ const handleInputChange = ({ api, state, props }) => (event) => {
   }
   api.setCurrentValue(value);
 };
-const select = (refs) => () => refs.input.select();
+const select = (vm) => () => vm.$refs.input.select();
 const mounted = ({ constants, parent, props, state }) => () => {
+  if (props.shape === "filter") {
+    state.controls = false;
+  }
+  if (isNumber(state.currentValue) && state.currentValue < props.min) {
+    state.currentValue = props.min;
+    state.lastInput = props.min;
+    state.userInput = props.min;
+  }
+  if (isNumber(state.currentValue) && state.currentValue > props.max) {
+    state.currentValue = props.max;
+    state.lastInput = props.max;
+    state.userInput = props.max;
+  }
   const innerInput = parent.$el.querySelector("input");
   innerInput.setAttribute(constants.KEY, constants.VALUE);
   innerInput.setAttribute(constants.MAX, props.max);
@@ -255,8 +270,11 @@ const updated = ({ constants, parent, state }) => () => {
   const innerInput = parent.$el.querySelector("input");
   innerInput && innerInput.setAttribute(constants.VALUENOW, state.currentValue);
 };
-const displayValue = ({ props, state }) => () => {
+const displayValue = ({ props, state, api }) => () => {
   const { currentValue, inputStatus, userInput } = state;
+  if (props.shape === "filter" && props.filter) {
+    api.filterValue();
+  }
   if (inputStatus) {
     return userInput;
   }
@@ -321,10 +339,24 @@ const getDisplayOnlyText = ({ parent, state, props }) => () => {
     }
   }
 };
+const filterValue = ({ state }) => () => {
+  return (state.radioVal || "") + state.lastInput;
+};
+const handleClear = ({ state, emit }) => () => {
+  state.currentValue = "";
+  state.userInput = "";
+  state.lastInput = "";
+  state.radioVal = "";
+  emit("clear");
+};
+const handleChange = ({ state, emit }) => () => {
+  emit("filter-change", state.radioVal);
+};
 export {
   decrease,
   dispatchDisplayedValue,
   displayValue,
+  filterValue,
   focus,
   getDecimal,
   getDisplayOnlyText,
@@ -333,6 +365,8 @@ export {
   getPrecision,
   getUnitPrecision,
   handleBlur,
+  handleChange,
+  handleClear,
   handleFocus,
   handleInput,
   handleInputChange,

package/numeric/vue.js

@@ -25,7 +25,10 @@ import {
   initService,
   dispatchDisplayedValue,
   getDisplayedValue,
-  getDisplayOnlyText
+  getDisplayOnlyText,
+  filterValue,
+  handleClear,
+  handleChange
 } from "./index";
 const api = [
   "state",
@@ -37,9 +40,19 @@ const api = [
   "handleInputChange",
   "mouseEvent",
   "focus",
-  "select"
+  "select",
+  "handleClear",
+  "handleChange"
 ];
-const initState = ({ reactive, computed, props, api: api2, $service, parent }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  api: api2,
+  $service,
+  constants,
+  parent
+}) => {
   const state = reactive({
     currentValue: props.modelValue,
     userInput: props.modelValue,
@@ -57,8 +70,13 @@ const initState = ({ reactive, computed, props, api: api2, $service, parent }) =
     maxDisabled: computed(() => !props.circulate && state.currentValue >= props.max || state.formDisabled),
     controlsAtRight: computed(() => props.controls && props.controlsPosition === "right"),
     format: computed(() => getUnitPrecision({ service: $service, props })),
+    filterMenu: constants.FILTER_OPTION,
+    filterValue: computed(() => api2.filterValue()),
+    handleClear: computed(() => api2.handleClear()),
+    handleChange: computed(() => api2.handleClear()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
-    displayOnlyText: computed(() => api2.getDisplayOnlyText())
+    displayOnlyText: computed(() => api2.getDisplayOnlyText()),
+    controls: props.controls
   });
   return state;
 };
@@ -67,7 +85,7 @@ const initApi = ({
   props,
   state,
   parent,
-  refs,
+  vm,
   emit,
   dispatch,
   constants,
@@ -75,30 +93,33 @@ const initApi = ({
 }) => {
   Object.assign(api2, {
     state,
-    focus: focus(refs),
-    select: select(refs),
+    focus: focus(vm),
+    select: select(vm),
     getPrecision: getPrecision(),
     toPrecision: toPrecision(state),
     updated: updated({ constants, parent, state }),
     mounted: mounted({ constants, parent, props, state }),
     unmounted: unmounted({ parent, state }),
     getDecimal: getDecimal(props),
-    handleFocus: handleFocus({ emit, state, props, api: api2, refs }),
+    handleFocus: handleFocus({ emit, state, props, api: api2, vm }),
     decrease: decrease({ api: api2, props, state }),
     increase: increase({ api: api2, props, state }),
     handleInput: handleInput({ state, api: api2, emit, props }),
     getNumPecision: getNumPecision({ api: api2, props }),
-    displayValue: displayValue({ props, state }),
+    displayValue: displayValue({ props, state, api: api2 }),
     internalDecrease: internalDecrease({ api: api2, state }),
     internalIncrease: internalIncrease({ api: api2, state }),
     handleInputChange: handleInputChange({ api: api2, state, props }),
     mouseEvent: mouseEvent({ api: api2, props, state }),
     handleBlur: handleBlur({ constants, dispatch, emit, props, state, api: api2 }),
-    watchValue: watchValue({ api: api2, state, nextTick }),
+    watchValue: watchValue({ api: api2, props, state, nextTick }),
     setCurrentValue: setCurrentValue({ api: api2, constants, dispatch, emit, props, state }),
     dispatchDisplayedValue: dispatchDisplayedValue({ api: api2, state, dispatch }),
     getDisplayedValue: getDisplayedValue({ state, props }),
-    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state })
+    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
+    filterValue: filterValue({ state }),
+    handleClear: handleClear({ state, emit }),
+    handleChange: handleChange({ state, emit })
   });
   api2.getDecimal(0);
 };
@@ -108,20 +129,24 @@ const initWatch = ({
   props,
   api: api2
 }) => {
-  watch(() => [props.max, props.min], ([curMax, curMin]) => {
-    if (curMax < curMin) {
-      throw new Error("[Numeric]: The maximum value should not be less than to the minimum value");
-    }
-  }, { immediate: true });
+  watch(
+    () => [props.max, props.min],
+    ([curMax, curMin]) => {
+      if (curMax < curMin) {
+        throw new Error("[Numeric]: The maximum value should not be less than to the minimum value");
+      }
+    },
+    { immediate: true }
+  );
   watch(() => props.modelValue, api2.watchValue, { immediate: true });
   watch(() => state.isDisplayOnly, api2.dispatchDisplayedValue);
 };
-const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, refs, constants, dispatch, service, nextTick }) => {
+const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, vm, constants, dispatch, service, nextTick }) => {
   const api2 = {};
   const $service = initService(service);
-  const state = initState({ reactive, computed, props, api: api2, $service, parent });
+  const state = initState({ reactive, computed, props, api: api2, constants, $service, parent });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  initApi({ api: api2, props, state, parent, refs, emit, dispatch, constants, nextTick });
+  initApi({ api: api2, props, state, parent, vm, emit, dispatch, constants, nextTick });
   initWatch({ state, watch, props, api: api2 });
   onMounted(() => {
     api2.dispatchDisplayedValue();

package/option/index.js

@@ -1,5 +1,6 @@
 import "../chunk-G2ADBYYC.js";
 import { getObj } from "../common/object";
+import { omitText } from "../common/string";
 const escapeRegexpString = (value = "") => String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
 const isEqual = ({ select, state }) => (a, b) => {
   if (!state.isObject) {
@@ -14,15 +15,26 @@ const contains = ({ select, state }) => (arr = [], target = null) => {
     return arr && arr.includes(target);
   } else {
     const valueKey = select.valueKey;
-    return arr && arr.some((item) => getObj(item, valueKey) === getObj(target, valueKey));
+    return arr && arr.some((item) => {
+      return getObj(item, valueKey) === getObj(target, valueKey);
+    });
   }
 };
-const handleGroupDisabled = (state) => (val) => {
+const handleGroupDisabled = ({ state, vm }) => (val) => {
   state.groupDisabled = val;
+  vm.groupDisabled = val;
 };
-const hoverItem = ({ select, props, state, vm }) => () => {
-  if (!props.disabled && !state.groupDisabled) {
-    select.state.hoverIndex = select.state.options.indexOf(vm);
+const hoverItem = ({ select, props, state }) => (e) => {
+  const dom = e.target;
+  const text = dom.textContent;
+  const style = window.getComputedStyle(dom);
+  const font = style.font;
+  const rect = dom.getBoundingClientRect();
+  const textWidth = rect.width - parseInt(style.paddingLeft || 0) - parseInt(style.paddingRight || 0);
+  const res = omitText(text, font, textWidth);
+  state.showTitle = res.o;
+  if (!props.disabled && !state.groupDisabled && !select.state.disabledOptionHover) {
+    select.state.hoverIndex = select.state.optionIndexArr.indexOf(state.index);
   }
 };
 const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
@@ -32,14 +44,19 @@ const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
     select.state.selectEmitter.emit(constants.EVENT_NAME.handleOptionClick, vm, true);
   }
 };
-const queryChange = ({ props, state }) => (query) => {
-  state.visible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || props.created;
+const queryChange = ({ select, props, state }) => (query) => {
+  const oldVisible = state.visible;
+  const newVisible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || !!props.created;
+  if (oldVisible !== newVisible) {
+    state.visible = newVisible;
+    select.state.filteredOptionsCount += newVisible ? 1 : -1;
+  }
 };
 const toggleEvent = ({ props, vm, type }) => {
   const optionEl = vm.$refs.option;
-  Object.keys(props.events).forEach((ev) => {
+  for (let ev in props.events) {
     optionEl[type + "EventListener"](ev, props.events[ev]);
-  });
+  }
 };
 const initValue = ({ select, props, constants, vm }) => () => {
   if (select.multiple && props.required) {
@@ -48,6 +65,7 @@ const initValue = ({ select, props, constants, vm }) => () => {
 };
 export {
   contains,
+  escapeRegexpString,
   handleGroupDisabled,
   hoverItem,
   initValue,

package/option/vue.js

@@ -1,4 +1,7 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import {
   isEqual,
   contains,
@@ -16,30 +19,33 @@ const initState = ({ reactive, computed, props, api: api2, markRaw, select, pare
     created: computed(() => props.created),
     index: -1,
     select: markRaw(select),
-    hover: false,
+    hover: computed(() => !state.select.optimization && state.select.state.hoverValue === state.index),
     visible: true,
     hitState: false,
     groupDisabled: false,
-    disabled: computed(() => props.disabled),
+    disabled: computed(() => props.disabled || state.groupDisabled),
     isObject: computed(() => Object.prototype.toString.call(props.value).toLowerCase() === "[object object]"),
     currentLabel: computed(() => props.label || (state.isObject ? "" : props.value)),
+    showTitle: false,
     currentValue: computed(() => props.value || props.label || ""),
     itemSelected: computed(() => {
       if (!select.multiple) {
-        return api2.isEqual(props.value, select.modelValue);
+        return api2.isEqual(props.value, select.state.modelValue);
       } else {
-        return api2.contains(select.modelValue, props.value);
+        return api2.contains(select.state.modelValue, props.value);
       }
     }),
     limitReached: computed(() => {
       if (select.multiple) {
         const multipleLimit = select.state.multipleLimit;
-        return !state.itemSelected && (select.modelValue || []).length >= multipleLimit && multipleLimit > 0;
+        return !state.itemSelected && (select.state.modelValue || []).length >= multipleLimit && multipleLimit > 0;
       } else {
         return false;
       }
     }),
-    selectCls: computed(() => state.itemSelected ? "checked-sur" : "check")
+    selectCls: computed(() => {
+      return state.itemSelected ? "checked-sur" : "check";
+    })
   });
   return state;
 };
@@ -48,10 +54,10 @@ const initApi = ({ api: api2, props, state, select, constants, vm }) => {
     state,
     isEqual: isEqual({ select, state }),
     contains: contains({ select, state }),
-    hoverItem: hoverItem({ select, vm, props, state }),
-    queryChange: queryChange({ props, state }),
+    hoverItem: hoverItem({ select, props, state }),
+    queryChange: queryChange({ select, props, state }),
     selectOptionClick: selectOptionClick({ constants, vm, props, state, select }),
-    handleGroupDisabled: handleGroupDisabled(state),
+    handleGroupDisabled: handleGroupDisabled({ state, vm }),
     initValue: initValue({ select, props, constants, vm })
   });
 };
@@ -87,20 +93,33 @@ const initOnMounted = ({ onMounted, props, api: api2, vm, state, constants, sele
   onMounted(() => {
     state.el = vm.$el;
     toggleEvent({ props, vm, type: "add" });
-    select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
+    if (!select.optimization) {
+      select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
+    }
     api2.initValue();
   });
 };
-const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm }) => {
+const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm, state }) => {
   onBeforeUnmount(() => {
-    const index = select.state.cachedOptions.indexOf(vm);
+    let selectedOptions = select.multiple ? select.state.selected : [select.state.selected];
+    const index = select.state.cachedOptions.findIndex((opt) => opt.state === state);
+    const selectedIndex = selectedOptions.findIndex((opt) => opt.state === state);
     toggleEvent({ props, vm, type: "remove" });
-    if (index === -1) {
+    if (index > -1 && selectedIndex < 0) {
       select.state.cachedOptions.splice(index, 1);
     }
-    select.onOptionDestroy(select.state.options.indexOf(vm));
+    select.onOptionDestroy(select.state.options.findIndex((opt) => opt.state === state));
   });
 };
+const initSelectState = ({ state, select, markRaw, props }) => {
+  let vm = __spreadProps(__spreadValues({}, props), { state });
+  select.state.options.push(markRaw(vm));
+  select.state.cachedOptions.push(markRaw(vm));
+  select.state.optionsIndex++;
+  state.index = select.state.optionsIndex;
+  select.state.optionsCount++;
+  select.state.filteredOptionsCount++;
+};
 const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw }, { vm, parent }) => {
   const api2 = {};
   const select = inject("select");
@@ -109,12 +128,9 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
   initApi({ api: api2, props, state, select, constants, vm });
   initWatch({ watch, props, state, select, constants });
   initOnMounted({ onMounted, props, api: api2, vm, state, constants, select });
-  initOnBeforeUnmount({ onBeforeUnmount, props, select, vm });
-  select.state.options.push(markRaw(vm));
-  select.state.cachedOptions.push(markRaw(vm));
-  select.state.optionsCount++;
-  select.state.filteredOptionsCount++;
-  vm.$on(constants.EVENT_NAME.handleGroupDisabled, api2.handleGroupDisabled);
+  initOnBeforeUnmount({ onBeforeUnmount, props, select, vm, state });
+  initSelectState({ state, select, markRaw, props });
+  parent.$on(constants.EVENT_NAME.handleGroupDisabled, api2.handleGroupDisabled);
   return api2;
 };
 export {

package/option-group/index.js

@@ -2,9 +2,9 @@ import "../chunk-G2ADBYYC.js";
 const queryChange = ({ select, state, vm }) => () => {
   state.visible = true;
   if (Array.isArray(select.state.options)) {
-    const groupOptions = select.state.options.filter(
-      (option) => option.state.parent && vm && option.state.parent.label === vm.label
-    );
+    const groupOptions = select.state.options.filter((option) => {
+      return option.state.parent.$parent && vm && option.state.parent.$parent.label === vm.label;
+    });
     if (Array.isArray(groupOptions)) {
       state.visible = groupOptions.some((option) => option.visible === true);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.13.1",
+  "version": "3.14.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [