@v-c/resize-observer 0.0.3 → 0.0.4

package/dist/Collection.cjs

@@ -1,44 +1,38 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
 const CollectionContext = Symbol("CollectionContext");
-const Collection = /* @__PURE__ */ vue.defineComponent({
-  props: {
-    onBatchResize: {
-      type: Function,
-      required: false,
-      default: void 0
-    }
-  },
-  setup(props, {
-    slots
-  }) {
-    const resizeIdRef = vue.shallowRef(0);
-    const resizeInfosRef = vue.shallowRef([]);
-    const onCollectionResize = vue.inject(CollectionContext, () => {
-    });
-    const onResize = (size, element, data) => {
-      const resizeId = resizeIdRef.value + 1;
-      resizeIdRef.value = resizeId;
-      resizeInfosRef.value.push({
-        size,
-        element,
-        data
-      });
-      Promise.resolve().then(() => {
-        if (resizeIdRef.value === resizeId) {
-          const resizeInfos = resizeInfosRef.value;
-          resizeInfosRef.value = [];
-          props.onBatchResize?.(resizeInfos);
-        }
-      });
-      onCollectionResize?.(size, element, data);
-    };
-    vue.provide(CollectionContext, onResize);
-    return () => {
-      return slots.default?.();
-    };
-  }
+const Collection = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: { onBatchResize: {
+		type: Function,
+		required: false,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		const resizeIdRef = (0, vue.shallowRef)(0);
+		const resizeInfosRef = (0, vue.shallowRef)([]);
+		const onCollectionResize = (0, vue.inject)(CollectionContext, () => {});
+		const onResize = (size, element, data) => {
+			const resizeId = resizeIdRef.value + 1;
+			resizeIdRef.value = resizeId;
+			resizeInfosRef.value.push({
+				size,
+				element,
+				data
+			});
+			Promise.resolve().then(() => {
+				if (resizeIdRef.value === resizeId) {
+					const resizeInfos = resizeInfosRef.value;
+					resizeInfosRef.value = [];
+					props.onBatchResize?.(resizeInfos);
+				}
+			});
+			onCollectionResize?.(size, element, data);
+		};
+		(0, vue.provide)(CollectionContext, onResize);
+		return () => {
+			return slots.default?.();
+		};
+	}
 });
 exports.Collection = Collection;
 exports.CollectionContext = CollectionContext;

package/dist/Collection.js

@@ -1,44 +1,36 @@
-import { defineComponent, shallowRef, inject, provide } from "vue";
+import { defineComponent, inject, provide, shallowRef } from "vue";
 const CollectionContext = Symbol("CollectionContext");
 const Collection = /* @__PURE__ */ defineComponent({
-  props: {
-    onBatchResize: {
-      type: Function,
-      required: false,
-      default: void 0
-    }
-  },
-  setup(props, {
-    slots
-  }) {
-    const resizeIdRef = shallowRef(0);
-    const resizeInfosRef = shallowRef([]);
-    const onCollectionResize = inject(CollectionContext, () => {
-    });
-    const onResize = (size, element, data) => {
-      const resizeId = resizeIdRef.value + 1;
-      resizeIdRef.value = resizeId;
-      resizeInfosRef.value.push({
-        size,
-        element,
-        data
-      });
-      Promise.resolve().then(() => {
-        if (resizeIdRef.value === resizeId) {
-          const resizeInfos = resizeInfosRef.value;
-          resizeInfosRef.value = [];
-          props.onBatchResize?.(resizeInfos);
-        }
-      });
-      onCollectionResize?.(size, element, data);
-    };
-    provide(CollectionContext, onResize);
-    return () => {
-      return slots.default?.();
-    };
-  }
+	props: { onBatchResize: {
+		type: Function,
+		required: false,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		const resizeIdRef = shallowRef(0);
+		const resizeInfosRef = shallowRef([]);
+		const onCollectionResize = inject(CollectionContext, () => {});
+		const onResize = (size, element, data) => {
+			const resizeId = resizeIdRef.value + 1;
+			resizeIdRef.value = resizeId;
+			resizeInfosRef.value.push({
+				size,
+				element,
+				data
+			});
+			Promise.resolve().then(() => {
+				if (resizeIdRef.value === resizeId) {
+					const resizeInfos = resizeInfosRef.value;
+					resizeInfosRef.value = [];
+					props.onBatchResize?.(resizeInfos);
+				}
+			});
+			onCollectionResize?.(size, element, data);
+		};
+		provide(CollectionContext, onResize);
+		return () => {
+			return slots.default?.();
+		};
+	}
 });
-export {
-  Collection,
-  CollectionContext
-};
+export { Collection, CollectionContext };

package/dist/SingleObserver/DomWrapper.cjs

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const DomWrapper = /* @__PURE__ */ vue.defineComponent({
-  setup(_, {
-    slots
-  }) {
-    return () => slots.default?.();
-  }
-});
-exports.default = DomWrapper;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var DomWrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({ setup(_, { slots }) {
+	return () => slots.default?.();
+} });
+exports.default = DomWrapper_default;

package/dist/SingleObserver/DomWrapper.js

@@ -1,11 +1,5 @@
 import { defineComponent } from "vue";
-const DomWrapper = /* @__PURE__ */ defineComponent({
-  setup(_, {
-    slots
-  }) {
-    return () => slots.default?.();
-  }
-});
-export {
-  DomWrapper as default
-};
+var DomWrapper_default = /* @__PURE__ */ defineComponent({ setup(_, { slots }) {
+	return () => slots.default?.();
+} });
+export { DomWrapper_default as default };

package/dist/SingleObserver/index.cjs

@@ -1,105 +1,94 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
-const Collection = require("../Collection.cjs");
-const observerUtil = require("../utils/observerUtil.cjs");
-const DomWrapper = require("./DomWrapper.cjs");
-const SingleObserver = /* @__PURE__ */ vue.defineComponent({
-  props: {
-    data: {
-      type: null,
-      required: false,
-      default: void 0
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: void 0
-    },
-    onResize: {
-      type: Function,
-      required: false,
-      default: void 0
-    }
-  },
-  name: "SingleObserver",
-  inheritAttrs: false,
-  setup(props, {
-    expose,
-    slots
-  }) {
-    const elementRef = vue.shallowRef();
-    const wrapperRef = vue.shallowRef();
-    const onCollectionResize = vue.inject(Collection.CollectionContext, () => {
-    });
-    const sizeRef = vue.shallowRef({
-      width: -1,
-      height: -1,
-      offsetWidth: -1,
-      offsetHeight: -1
-    });
-    const getDom = () => {
-      const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
-      if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
-      return dom;
-    };
-    const onInternalResize = (target) => {
-      const {
-        onResize,
-        data
-      } = props;
-      const {
-        width,
-        height
-      } = target.getBoundingClientRect();
-      const {
-        offsetHeight,
-        offsetWidth
-      } = target;
-      const fixedWidth = Math.floor(width);
-      const fixedHeight = Math.floor(height);
-      if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
-        const size = {
-          width: fixedWidth,
-          height: fixedHeight,
-          offsetWidth,
-          offsetHeight
-        };
-        sizeRef.value = size;
-        const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
-        const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
-        const sizeInfo = {
-          ...size,
-          offsetWidth: mergedOffsetWidth,
-          offsetHeight: mergedOffsetHeight
-        };
-        onCollectionResize?.(sizeInfo, target, data);
-        if (onResize) {
-          Promise.resolve().then(() => {
-            onResize(sizeInfo, target);
-          });
-        }
-      }
-    };
-    let currentElement;
-    vue.onMounted(() => {
-      currentElement = getDom();
-      if (currentElement && !props.disabled) observerUtil.observe(currentElement, onInternalResize);
-    });
-    vue.onBeforeUnmount(() => {
-      if (currentElement) observerUtil.unobserve(currentElement, onInternalResize);
-    });
-    expose({
-      getDom
-    });
-    return () => {
-      return vue.createVNode(DomWrapper.default, {
-        "ref": wrapperRef
-      }, {
-        default: () => [slots.default?.()]
-      });
-    };
-  }
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_Collection = require("../Collection.cjs");
+const require_observerUtil = require("../utils/observerUtil.cjs");
+const require_DomWrapper = require("./DomWrapper.cjs");
+let vue = require("vue");
+let __v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+__v_c_util_dist_Dom_findDOMNode = require_rolldown_runtime.__toESM(__v_c_util_dist_Dom_findDOMNode);
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "SingleObserver",
+	inheritAttrs: false,
+	setup(props, { expose, slots }) {
+		const elementRef = (0, vue.shallowRef)();
+		const wrapperRef = (0, vue.shallowRef)();
+		const setWrapperRef = (el) => {
+			if (el?.elementEl && typeof el.elementEl === "object") elementRef.value = el.elementEl;
+			else if (el?.__$el && typeof el.__$el === "object") elementRef.value = el.__$el;
+			else wrapperRef.value = el;
+		};
+		const onCollectionResize = (0, vue.inject)(require_Collection.CollectionContext, () => {});
+		const sizeRef = (0, vue.shallowRef)({
+			width: -1,
+			height: -1,
+			offsetWidth: -1,
+			offsetHeight: -1
+		});
+		const getDom = () => {
+			const dom = (0, __v_c_util_dist_Dom_findDOMNode.default)(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? (0, __v_c_util_dist_Dom_findDOMNode.default)(elementRef.value.nativeElement) : null) || (0, __v_c_util_dist_Dom_findDOMNode.default)(wrapperRef.value);
+			if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
+			return dom;
+		};
+		const onInternalResize = (target) => {
+			const { onResize, data } = props;
+			const { width, height } = target.getBoundingClientRect();
+			const { offsetHeight, offsetWidth } = target;
+			const fixedWidth = Math.floor(width);
+			const fixedHeight = Math.floor(height);
+			if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
+				const size = {
+					width: fixedWidth,
+					height: fixedHeight,
+					offsetWidth,
+					offsetHeight
+				};
+				sizeRef.value = size;
+				const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
+				const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
+				const sizeInfo = {
+					...size,
+					offsetWidth: mergedOffsetWidth,
+					offsetHeight: mergedOffsetHeight
+				};
+				onCollectionResize?.(sizeInfo, target, data);
+				if (onResize) Promise.resolve().then(() => {
+					onResize(sizeInfo, target);
+				});
+			}
+		};
+		let currentElement;
+		(0, vue.onMounted)(() => {
+			currentElement = getDom();
+			if (currentElement && !props.disabled) require_observerUtil.observe(currentElement, onInternalResize);
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			if (currentElement) require_observerUtil.unobserve(currentElement, onInternalResize);
+		});
+		expose({ getDom });
+		return () => {
+			const children = (0, __v_c_util_dist_props_util.filterEmpty)(slots?.default?.());
+			if (children.length === 1 && (0, vue.isVNode)(children[0])) return (0, vue.createVNode)(children[0], { ref: setWrapperRef });
+			return (0, vue.createVNode)(require_DomWrapper.default, { "ref": wrapperRef }, { default: () => [slots.default?.()] });
+		};
+	}
 });
-exports.default = SingleObserver;
+var SingleObserver_default = SingleObserver;
+exports.default = SingleObserver_default;

package/dist/SingleObserver/index.js

@@ -1,105 +1,90 @@
-import { defineComponent, shallowRef, inject, onMounted, onBeforeUnmount, createVNode } from "vue";
-import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
 import { CollectionContext } from "../Collection.js";
 import { observe, unobserve } from "../utils/observerUtil.js";
-import DomWrapper from "./DomWrapper.js";
-const SingleObserver = /* @__PURE__ */ defineComponent({
-  props: {
-    data: {
-      type: null,
-      required: false,
-      default: void 0
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: void 0
-    },
-    onResize: {
-      type: Function,
-      required: false,
-      default: void 0
-    }
-  },
-  name: "SingleObserver",
-  inheritAttrs: false,
-  setup(props, {
-    expose,
-    slots
-  }) {
-    const elementRef = shallowRef();
-    const wrapperRef = shallowRef();
-    const onCollectionResize = inject(CollectionContext, () => {
-    });
-    const sizeRef = shallowRef({
-      width: -1,
-      height: -1,
-      offsetWidth: -1,
-      offsetHeight: -1
-    });
-    const getDom = () => {
-      const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
-      if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
-      return dom;
-    };
-    const onInternalResize = (target) => {
-      const {
-        onResize,
-        data
-      } = props;
-      const {
-        width,
-        height
-      } = target.getBoundingClientRect();
-      const {
-        offsetHeight,
-        offsetWidth
-      } = target;
-      const fixedWidth = Math.floor(width);
-      const fixedHeight = Math.floor(height);
-      if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
-        const size = {
-          width: fixedWidth,
-          height: fixedHeight,
-          offsetWidth,
-          offsetHeight
-        };
-        sizeRef.value = size;
-        const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
-        const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
-        const sizeInfo = {
-          ...size,
-          offsetWidth: mergedOffsetWidth,
-          offsetHeight: mergedOffsetHeight
-        };
-        onCollectionResize?.(sizeInfo, target, data);
-        if (onResize) {
-          Promise.resolve().then(() => {
-            onResize(sizeInfo, target);
-          });
-        }
-      }
-    };
-    let currentElement;
-    onMounted(() => {
-      currentElement = getDom();
-      if (currentElement && !props.disabled) observe(currentElement, onInternalResize);
-    });
-    onBeforeUnmount(() => {
-      if (currentElement) unobserve(currentElement, onInternalResize);
-    });
-    expose({
-      getDom
-    });
-    return () => {
-      return createVNode(DomWrapper, {
-        "ref": wrapperRef
-      }, {
-        default: () => [slots.default?.()]
-      });
-    };
-  }
+import DomWrapper_default from "./DomWrapper.js";
+import { createVNode, defineComponent, inject, isVNode, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+var SingleObserver_default = /* @__PURE__ */ defineComponent({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "SingleObserver",
+	inheritAttrs: false,
+	setup(props, { expose, slots }) {
+		const elementRef = shallowRef();
+		const wrapperRef = shallowRef();
+		const setWrapperRef = (el) => {
+			if (el?.elementEl && typeof el.elementEl === "object") elementRef.value = el.elementEl;
+			else if (el?.__$el && typeof el.__$el === "object") elementRef.value = el.__$el;
+			else wrapperRef.value = el;
+		};
+		const onCollectionResize = inject(CollectionContext, () => {});
+		const sizeRef = shallowRef({
+			width: -1,
+			height: -1,
+			offsetWidth: -1,
+			offsetHeight: -1
+		});
+		const getDom = () => {
+			const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
+			if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
+			return dom;
+		};
+		const onInternalResize = (target) => {
+			const { onResize, data } = props;
+			const { width, height } = target.getBoundingClientRect();
+			const { offsetHeight, offsetWidth } = target;
+			const fixedWidth = Math.floor(width);
+			const fixedHeight = Math.floor(height);
+			if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
+				const size = {
+					width: fixedWidth,
+					height: fixedHeight,
+					offsetWidth,
+					offsetHeight
+				};
+				sizeRef.value = size;
+				const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
+				const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
+				const sizeInfo = {
+					...size,
+					offsetWidth: mergedOffsetWidth,
+					offsetHeight: mergedOffsetHeight
+				};
+				onCollectionResize?.(sizeInfo, target, data);
+				if (onResize) Promise.resolve().then(() => {
+					onResize(sizeInfo, target);
+				});
+			}
+		};
+		let currentElement;
+		onMounted(() => {
+			currentElement = getDom();
+			if (currentElement && !props.disabled) observe(currentElement, onInternalResize);
+		});
+		onBeforeUnmount(() => {
+			if (currentElement) unobserve(currentElement, onInternalResize);
+		});
+		expose({ getDom });
+		return () => {
+			const children = filterEmpty(slots?.default?.());
+			if (children.length === 1 && isVNode(children[0])) return createVNode(children[0], { ref: setWrapperRef });
+			return createVNode(DomWrapper_default, { "ref": wrapperRef }, { default: () => [slots.default?.()] });
+		};
+	}
 });
-export {
-  SingleObserver as default
-};
+export { SingleObserver_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/index.cjs

@@ -1,56 +1,48 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const util = require("@v-c/util");
-const toArray = require("@v-c/util/dist/Children/toArray");
-const Collection = require("./Collection.cjs");
-const index = require("./SingleObserver/index.cjs");
-const observerUtil = require("./utils/observerUtil.cjs");
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_Collection = require("./Collection.cjs");
+const require_observerUtil = require("./utils/observerUtil.cjs");
+const require_index = require("./SingleObserver/index.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_Children_toArray = require("@v-c/util/dist/Children/toArray");
 function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 }
-const INTERNAL_PREFIX_KEY = "vc-observer-key";
-const ResizeObserver = /* @__PURE__ */ vue.defineComponent({
-  props: {
-    data: {
-      type: null,
-      required: false,
-      default: void 0
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: void 0
-    },
-    onResize: {
-      type: Function,
-      required: false,
-      default: void 0
-    }
-  },
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      const childNodes = toArray.toArray(slots.default?.());
-      if (process.env.NODE_ENV !== "production") {
-        if (childNodes.length > 1) {
-          util.warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
-        } else if (childNodes.length === 0) {
-          util.warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
-        }
-      }
-      return childNodes.map((child, index$1) => {
-        const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index$1}`;
-        return vue.createVNode(index.default, vue.mergeProps(props, {
-          "key": key
-        }), _isSlot(child) ? child : {
-          default: () => [child]
-        });
-      });
-    };
-  }
+var INTERNAL_PREFIX_KEY = "vc-observer-key";
+var ResizeObserver = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const childNodes = (0, __v_c_util_dist_Children_toArray.toArray)(slots.default?.());
+			if (process.env.NODE_ENV !== "production") {
+				if (childNodes.length > 1) (0, __v_c_util.warning)(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
+				else if (childNodes.length === 0) (0, __v_c_util.warning)(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
+			}
+			return childNodes.map((child, index) => {
+				const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
+				return (0, vue.createVNode)(require_index.default, (0, vue.mergeProps)(props, { "key": key }), _isSlot(child) ? child : { default: () => [child] });
+			});
+		};
+	}
 });
-ResizeObserver.Collection = Collection.Collection;
-exports._rs = observerUtil._rs;
-exports.default = ResizeObserver;
+ResizeObserver.Collection = require_Collection.Collection;
+var src_default = ResizeObserver;
+exports._rs = require_observerUtil._rs;
+exports.default = src_default;

package/dist/index.js

@@ -1,56 +1,45 @@
-import { defineComponent, createVNode, mergeProps, isVNode } from "vue";
-import { warning } from "@v-c/util";
-import { toArray } from "@v-c/util/dist/Children/toArray";
 import { Collection } from "./Collection.js";
-import SingleObserver from "./SingleObserver/index.js";
 import { _rs } from "./utils/observerUtil.js";
+import SingleObserver_default from "./SingleObserver/index.js";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { warning } from "@v-c/util";
+import { toArray } from "@v-c/util/dist/Children/toArray";
 function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const INTERNAL_PREFIX_KEY = "vc-observer-key";
-const ResizeObserver = /* @__PURE__ */ defineComponent({
-  props: {
-    data: {
-      type: null,
-      required: false,
-      default: void 0
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: void 0
-    },
-    onResize: {
-      type: Function,
-      required: false,
-      default: void 0
-    }
-  },
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      const childNodes = toArray(slots.default?.());
-      if (process.env.NODE_ENV !== "production") {
-        if (childNodes.length > 1) {
-          warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
-        } else if (childNodes.length === 0) {
-          warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
-        }
-      }
-      return childNodes.map((child, index) => {
-        const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
-        return createVNode(SingleObserver, mergeProps(props, {
-          "key": key
-        }), _isSlot(child) ? child : {
-          default: () => [child]
-        });
-      });
-    };
-  }
+var INTERNAL_PREFIX_KEY = "vc-observer-key";
+var ResizeObserver = /* @__PURE__ */ defineComponent({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const childNodes = toArray(slots.default?.());
+			if (process.env.NODE_ENV !== "production") {
+				if (childNodes.length > 1) warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
+				else if (childNodes.length === 0) warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
+			}
+			return childNodes.map((child, index) => {
+				const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
+				return createVNode(SingleObserver_default, mergeProps(props, { "key": key }), _isSlot(child) ? child : { default: () => [child] });
+			});
+		};
+	}
 });
 ResizeObserver.Collection = Collection;
-export {
-  _rs,
-  ResizeObserver as default
-};
+var src_default = ResizeObserver;
+export { _rs, src_default as default };

package/dist/utils/observerUtil.cjs

@@ -1,31 +1,31 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ResizeObserver = require("resize-observer-polyfill");
-const elementListeners = /* @__PURE__ */ new Map();
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let resize_observer_polyfill = require("resize-observer-polyfill");
+resize_observer_polyfill = require_rolldown_runtime.__toESM(resize_observer_polyfill);
+var elementListeners = /* @__PURE__ */ new Map();
 function onResize(entities) {
-  entities.forEach((entity) => {
-    const { target } = entity;
-    elementListeners.get(target)?.forEach((listener) => listener(target));
-  });
+	entities.forEach((entity) => {
+		const { target } = entity;
+		elementListeners.get(target)?.forEach((listener) => listener(target));
+	});
 }
-const resizeObserver = new ResizeObserver(onResize);
+var resizeObserver = new resize_observer_polyfill.default(onResize);
 const _el = process.env.NODE_ENV !== "production" ? elementListeners : null;
 const _rs = process.env.NODE_ENV !== "production" ? onResize : null;
 function observe(element, callback) {
-  if (!elementListeners.has(element)) {
-    elementListeners.set(element, /* @__PURE__ */ new Set());
-    resizeObserver.observe(element);
-  }
-  elementListeners?.get?.(element)?.add?.(callback);
+	if (!elementListeners.has(element)) {
+		elementListeners.set(element, /* @__PURE__ */ new Set());
+		resizeObserver.observe(element);
+	}
+	elementListeners?.get?.(element)?.add?.(callback);
 }
 function unobserve(element, callback) {
-  if (elementListeners.has(element)) {
-    elementListeners?.get?.(element)?.delete?.(callback);
-    if (!elementListeners?.get?.(element)?.size) {
-      resizeObserver.unobserve(element);
-      elementListeners.delete(element);
-    }
-  }
+	if (elementListeners.has(element)) {
+		elementListeners?.get?.(element)?.delete?.(callback);
+		if (!elementListeners?.get?.(element)?.size) {
+			resizeObserver.unobserve(element);
+			elementListeners.delete(element);
+		}
+	}
 }
 exports._el = _el;
 exports._rs = _rs;

package/dist/utils/observerUtil.js

@@ -1,33 +1,28 @@
 import ResizeObserver from "resize-observer-polyfill";
-const elementListeners = /* @__PURE__ */ new Map();
+var elementListeners = /* @__PURE__ */ new Map();
 function onResize(entities) {
-  entities.forEach((entity) => {
-    const { target } = entity;
-    elementListeners.get(target)?.forEach((listener) => listener(target));
-  });
+	entities.forEach((entity) => {
+		const { target } = entity;
+		elementListeners.get(target)?.forEach((listener) => listener(target));
+	});
 }
-const resizeObserver = new ResizeObserver(onResize);
+var resizeObserver = new ResizeObserver(onResize);
 const _el = process.env.NODE_ENV !== "production" ? elementListeners : null;
 const _rs = process.env.NODE_ENV !== "production" ? onResize : null;
 function observe(element, callback) {
-  if (!elementListeners.has(element)) {
-    elementListeners.set(element, /* @__PURE__ */ new Set());
-    resizeObserver.observe(element);
-  }
-  elementListeners?.get?.(element)?.add?.(callback);
+	if (!elementListeners.has(element)) {
+		elementListeners.set(element, /* @__PURE__ */ new Set());
+		resizeObserver.observe(element);
+	}
+	elementListeners?.get?.(element)?.add?.(callback);
 }
 function unobserve(element, callback) {
-  if (elementListeners.has(element)) {
-    elementListeners?.get?.(element)?.delete?.(callback);
-    if (!elementListeners?.get?.(element)?.size) {
-      resizeObserver.unobserve(element);
-      elementListeners.delete(element);
-    }
-  }
+	if (elementListeners.has(element)) {
+		elementListeners?.get?.(element)?.delete?.(callback);
+		if (!elementListeners?.get?.(element)?.size) {
+			resizeObserver.unobserve(element);
+			elementListeners.delete(element);
+		}
+	}
 }
-export {
-  _el,
-  _rs,
-  observe,
-  unobserve
-};
+export { _el, _rs, observe, unobserve };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/resize-observer",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "resize-observer-polyfill": "^1.5.1",
-    "@v-c/util": "0.0.13"
+    "@v-c/util": "0.0.15"
   },
   "scripts": {
     "build": "vite build",

package/src/SingleObserver/index.tsx

@@ -1,6 +1,7 @@
 import type { ResizeObserverProps, SizeInfo } from '../index.tsx'
 import findDOMNode from '@v-c/util/dist/Dom/findDOMNode'
-import { defineComponent, inject, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { filterEmpty } from '@v-c/util/dist/props-util'
+import { createVNode, defineComponent, inject, isVNode, onBeforeUnmount, onMounted, shallowRef } from 'vue'
 import { CollectionContext } from '../Collection'
 import { observe, unobserve } from '../utils/observerUtil.ts'
 import DomWrapper from './DomWrapper'
@@ -11,6 +12,17 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
   setup(props, { expose, slots }) {
     const elementRef = shallowRef<HTMLElement>()
     const wrapperRef = shallowRef()
+    const setWrapperRef = (el: any) => {
+      if (el?.elementEl && typeof el.elementEl === 'object') {
+        elementRef.value = el.elementEl
+      }
+      else if (el?.__$el && typeof el.__$el === 'object') {
+        elementRef.value = el.__$el
+      }
+      else {
+        wrapperRef.value = el
+      }
+    }
     const onCollectionResize = inject(CollectionContext, () => {})
     const sizeRef = shallowRef<SizeInfo>({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 })
     const getDom = () => {
@@ -20,7 +32,6 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
       // 判断当前的dom是不是一个text元素
       if (dom && dom.nodeType === 3 && dom.nextElementSibling)
         return dom.nextElementSibling as HTMLElement
-
       return dom
     }
 
@@ -80,6 +91,12 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
       getDom,
     })
     return () => {
+      const children = filterEmpty(slots?.default?.())
+      if (children.length === 1 && isVNode(children[0])) {
+        return createVNode(children[0], {
+          ref: setWrapperRef,
+        })
+      }
       return (
         <DomWrapper ref={wrapperRef}>
           {slots.default?.()}