@v-c/resize-observer 0.0.1

package/dist/Collection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),u=Symbol("CollectionContext"),d=n.defineComponent({props:{onBatchResize:{type:Function,required:!1}},setup(o,{slots:t}){const i=n.shallowRef(0),l=n.shallowRef([]),c=n.inject(u,()=>{}),v=(e,r,s)=>{const a=i.value+1;i.value=a,l.value.push({size:e,element:r,data:s}),Promise.resolve().then(()=>{var f;if(i.value===a){const C=l.value;l.value=[],(f=o.onBatchResize)==null||f.call(o,C)}}),c==null||c(e,r,s)};return n.provide(u,v),()=>{var e;return(e=t.default)==null?void 0:e.call(t)}}});exports.Collection=d;exports.CollectionContext=u;

package/dist/Collection.d.ts

@@ -0,0 +1,15 @@
+import { InjectionKey } from 'vue';
+import { SizeInfo } from '.';
+type onCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void;
+export declare const CollectionContext: InjectionKey<onCollectionResize>;
+export interface ResizeInfo {
+    size: SizeInfo;
+    element: HTMLElement;
+    data: any;
+}
+export interface CollectionProps {
+    /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+    onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
+}
+export declare const Collection: import('vue').DefineComponent<CollectionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export {};

package/dist/Collection.js

@@ -0,0 +1,36 @@
+import { defineComponent as z, shallowRef as f, inject as R, provide as d } from "vue";
+const a = Symbol("CollectionContext"), m = /* @__PURE__ */ z({
+  props: {
+    onBatchResize: {
+      type: Function,
+      required: !1
+    }
+  },
+  setup(n, {
+    slots: o
+  }) {
+    const t = f(0), i = f([]), c = R(a, () => {
+    });
+    return d(a, (e, r, u) => {
+      const l = t.value + 1;
+      t.value = l, i.value.push({
+        size: e,
+        element: r,
+        data: u
+      }), Promise.resolve().then(() => {
+        var s;
+        if (t.value === l) {
+          const v = i.value;
+          i.value = [], (s = n.onBatchResize) == null || s.call(n, v);
+        }
+      }), c == null || c(e, r, u);
+    }), () => {
+      var e;
+      return (e = o.default) == null ? void 0 : e.call(o);
+    };
+  }
+});
+export {
+  m as Collection,
+  a as CollectionContext
+};

package/dist/SingleObserver/DomWrapper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),t=r.defineComponent({setup(n,{slots:e}){return()=>{var u;return(u=e.default)==null?void 0:u.call(e)}}});exports.default=t;

package/dist/SingleObserver/DomWrapper.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/SingleObserver/DomWrapper.js

@@ -0,0 +1,14 @@
+import { defineComponent as p } from "vue";
+const f = /* @__PURE__ */ p({
+  setup(n, {
+    slots: e
+  }) {
+    return () => {
+      var r;
+      return (r = e.default) == null ? void 0 : r.call(e);
+    };
+  }
+});
+export {
+  f as default
+};

package/dist/SingleObserver/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),a=require("@v-c/util/dist/Dom/findDOMNode"),O=require("../Collection.cjs"),w=require("../utils/observerUtil.cjs"),S=require("./DomWrapper.cjs"),x=t.defineComponent({props:{data:{type:null,required:!1},disabled:{type:Boolean,required:!1},onResize:{type:Function,required:!1}},name:"SingleObserver",inheritAttrs:!1,setup(h,{expose:M,slots:f}){const i=t.shallowRef(),c=t.shallowRef(),l=t.inject(O.CollectionContext,()=>{}),n=t.shallowRef({width:-1,height:-1,offsetWidth:-1,offsetHeight:-1}),v=()=>{const e=a(i)||(i.value&&typeof i.value=="object"?a(i.value.nativeElement):null)||a(c.value);return e&&e.nodeType===3&&e.nextElementSibling?e.nextElementSibling:e},g=e=>{const{onResize:m,data:W}=h,{width:u,height:d}=e.getBoundingClientRect(),{offsetHeight:r,offsetWidth:s}=e,b=Math.floor(u),p=Math.floor(d);if(n.value.width!==b||n.value.height!==p||n.value.offsetWidth!==s||n.value.offsetHeight!==r){const R={width:b,height:p,offsetWidth:s,offsetHeight:r};n.value=R;const y=s===Math.round(u)?u:s,H=r===Math.round(d)?d:r,q={...R,offsetWidth:y,offsetHeight:H};l==null||l(q,e,W),m&&Promise.resolve().then(()=>{m(q,e)})}};let o;return t.onMounted(()=>{o=v(),o&&!h.disabled&&w.observe(o,g)}),t.onBeforeUnmount(()=>{o&&w.unobserve(o,g)}),M({getDom:v}),()=>t.createVNode(S.default,{ref:c},{default:()=>{var e;return[(e=f.default)==null?void 0:e.call(f)]}})}});exports.default=x;

package/dist/SingleObserver/index.d.ts

@@ -0,0 +1,3 @@
+import { ResizeObserverProps } from '../index.tsx';
+declare const SingleObserver: import('vue').DefineComponent<ResizeObserverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResizeObserverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default SingleObserver;

package/dist/SingleObserver/index.js

@@ -0,0 +1,84 @@
+import { defineComponent as y, shallowRef as a, inject as z, onMounted as O, onBeforeUnmount as E, createVNode as S } from "vue";
+import h from "@v-c/util/dist/Dom/findDOMNode";
+import { CollectionContext as q } from "../Collection.js";
+import { observe as B, unobserve as C } from "../utils/observerUtil.js";
+import D from "./DomWrapper.js";
+const P = /* @__PURE__ */ y({
+  props: {
+    data: {
+      type: null,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1
+    },
+    onResize: {
+      type: Function,
+      required: !1
+    }
+  },
+  name: "SingleObserver",
+  inheritAttrs: !1,
+  setup(u, {
+    expose: w,
+    slots: r
+  }) {
+    const n = a(), m = a(), s = z(q, () => {
+    }), t = a({
+      width: -1,
+      height: -1,
+      offsetWidth: -1,
+      offsetHeight: -1
+    }), c = () => {
+      const e = h(n) || (n.value && typeof n.value == "object" ? h(n.value.nativeElement) : null) || h(m.value);
+      return e && e.nodeType === 3 && e.nextElementSibling ? e.nextElementSibling : e;
+    }, p = (e) => {
+      const {
+        onResize: g,
+        data: x
+      } = u, {
+        width: d,
+        height: l
+      } = e.getBoundingClientRect(), {
+        offsetHeight: i,
+        offsetWidth: f
+      } = e, v = Math.floor(d), b = Math.floor(l);
+      if (t.value.width !== v || t.value.height !== b || t.value.offsetWidth !== f || t.value.offsetHeight !== i) {
+        const R = {
+          width: v,
+          height: b,
+          offsetWidth: f,
+          offsetHeight: i
+        };
+        t.value = R;
+        const H = f === Math.round(d) ? d : f, M = i === Math.round(l) ? l : i, W = {
+          ...R,
+          offsetWidth: H,
+          offsetHeight: M
+        };
+        s == null || s(W, e, x), g && Promise.resolve().then(() => {
+          g(W, e);
+        });
+      }
+    };
+    let o;
+    return O(() => {
+      o = c(), o && !u.disabled && B(o, p);
+    }), E(() => {
+      o && C(o, p);
+    }), w({
+      getDom: c
+    }), () => S(D, {
+      ref: m
+    }, {
+      default: () => {
+        var e;
+        return [(e = r.default) == null ? void 0 : e.call(r)];
+      }
+    });
+  }
+});
+export {
+  P as default
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("@v-c/util"),c=require("@v-c/util/dist/Children/toArray"),d=require("./Collection.cjs"),f=require("./SingleObserver/index.cjs"),p=require("./utils/observerUtil.cjs");function b(r){return typeof r=="function"||Object.prototype.toString.call(r)==="[object Object]"&&!t.isVNode(r)}const y="vc-observer-key",u=t.defineComponent({props:{data:{type:null,required:!1},disabled:{type:Boolean,required:!1},onResize:{type:Function,required:!1}},setup(r,{slots:n}){return()=>{var i;const o=c.toArray((i=n.default)==null?void 0:i.call(n));return process.env.NODE_ENV!=="production"&&(o.length>1?s.warning(!1,"Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead."):o.length===0&&s.warning(!1,"`children` of ResizeObserver is empty. Nothing is in observe.")),o.map((e,l)=>{const a=(e==null?void 0:e.key)||`${y}-${l}`;return t.createVNode(f.default,t.mergeProps(r,{key:a}),b(e)?e:{default:()=>[e]})})}}});u.Collection=d.Collection;exports._rs=p._rs;exports.default=u;

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { Collection } from './Collection.tsx';
+import { _rs } from './utils/observerUtil';
+export { 
+/** @private Test only for mock trigger resize event */
+_rs, };
+export interface SizeInfo {
+    width: number;
+    height: number;
+    offsetWidth: number;
+    offsetHeight: number;
+}
+export type OnResize = (size: SizeInfo, element: HTMLElement) => void;
+export interface ResizeObserverProps {
+    /** Pass to ResizeObserver.Collection with additional data */
+    data?: any;
+    disabled?: boolean;
+    /** Trigger if element resized. Will always trigger when first time render. */
+    onResize?: OnResize;
+}
+declare const ResizeObserver: import('vue').DefineComponent<ResizeObserverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResizeObserverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof ResizeObserver & {
+    Collection: typeof Collection;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,46 @@
+import { defineComponent as p, createVNode as a, mergeProps as l, isVNode as u } from "vue";
+import { warning as i } from "@v-c/util";
+import { toArray as m } from "@v-c/util/dist/Children/toArray";
+import { Collection as c } from "./Collection.js";
+import d from "./SingleObserver/index.js";
+import { _rs as k } from "./utils/observerUtil.js";
+function b(r) {
+  return typeof r == "function" || Object.prototype.toString.call(r) === "[object Object]" && !u(r);
+}
+const y = "vc-observer-key", v = /* @__PURE__ */ p({
+  props: {
+    data: {
+      type: null,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1
+    },
+    onResize: {
+      type: Function,
+      required: !1
+    }
+  },
+  setup(r, {
+    slots: o
+  }) {
+    return () => {
+      var n;
+      const t = m((n = o.default) == null ? void 0 : n.call(o));
+      return process.env.NODE_ENV !== "production" && (t.length > 1 ? i(!1, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.") : t.length === 0 && i(!1, "`children` of ResizeObserver is empty. Nothing is in observe.")), t.map((e, s) => {
+        const f = (e == null ? void 0 : e.key) || `${y}-${s}`;
+        return a(d, l(r, {
+          key: f
+        }), b(e) ? e : {
+          default: () => [e]
+        });
+      });
+    };
+  }
+});
+v.Collection = c;
+export {
+  k as _rs,
+  v as default
+};

package/dist/utils/observerUtil.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("resize-observer-polyfill"),o=new Map;function d(c){c.forEach(b=>{var r;const{target:u}=b;(r=o.get(u))==null||r.forEach(v=>v(u))})}const g=new s(d),p=process.env.NODE_ENV!=="production"?o:null,E=process.env.NODE_ENV!=="production"?d:null;function _(c,b){var u,r,v;o.has(c)||(o.set(c,new Set),g.observe(c)),(v=(r=(u=o==null?void 0:o.get)==null?void 0:u.call(o,c))==null?void 0:r.add)==null||v.call(r,b)}function i(c,b){var u,r,v,a,f;o.has(c)&&((v=(r=(u=o==null?void 0:o.get)==null?void 0:u.call(o,c))==null?void 0:r.delete)==null||v.call(r,b),(f=(a=o==null?void 0:o.get)==null?void 0:a.call(o,c))!=null&&f.size||(g.unobserve(c),o.delete(c)))}exports._el=p;exports._rs=E;exports.observe=_;exports.unobserve=i;

package/dist/utils/observerUtil.d.ts

@@ -0,0 +1,7 @@
+export type ResizeListener = (element: Element) => void;
+declare function onResize(entities: ResizeObserverEntry[]): void;
+export declare const _el: Map<Element, Set<ResizeListener>> | null;
+export declare const _rs: typeof onResize | null;
+export declare function observe(element: Element, callback: ResizeListener): void;
+export declare function unobserve(element: Element, callback: ResizeListener): void;
+export {};

package/dist/utils/observerUtil.js

@@ -0,0 +1,24 @@
+import E from "resize-observer-polyfill";
+const o = /* @__PURE__ */ new Map();
+function b(c) {
+  c.forEach((v) => {
+    var f;
+    const { target: r } = v;
+    (f = o.get(r)) == null || f.forEach((u) => u(r));
+  });
+}
+const d = new E(b), h = process.env.NODE_ENV !== "production" ? o : null, z = process.env.NODE_ENV !== "production" ? b : null;
+function N(c, v) {
+  var r, f, u;
+  o.has(c) || (o.set(c, /* @__PURE__ */ new Set()), d.observe(c)), (u = (f = (r = o == null ? void 0 : o.get) == null ? void 0 : r.call(o, c)) == null ? void 0 : f.add) == null || u.call(f, v);
+}
+function O(c, v) {
+  var r, f, u, a, p;
+  o.has(c) && ((u = (f = (r = o == null ? void 0 : o.get) == null ? void 0 : r.call(o, c)) == null ? void 0 : f.delete) == null || u.call(f, v), (p = (a = o == null ? void 0 : o.get) == null ? void 0 : a.call(o, c)) != null && p.size || (d.unobserve(c), o.delete(c)));
+}
+export {
+  h as _el,
+  z as _rs,
+  N as observe,
+  O as unobserve
+};

package/package/dist/Collection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),u=Symbol("CollectionContext"),d=n.defineComponent({props:{onBatchResize:{type:Function,required:!1}},setup(o,{slots:t}){const i=n.shallowRef(0),l=n.shallowRef([]),c=n.inject(u,()=>{}),v=(e,r,s)=>{const a=i.value+1;i.value=a,l.value.push({size:e,element:r,data:s}),Promise.resolve().then(()=>{var f;if(i.value===a){const C=l.value;l.value=[],(f=o.onBatchResize)==null||f.call(o,C)}}),c==null||c(e,r,s)};return n.provide(u,v),()=>{var e;return(e=t.default)==null?void 0:e.call(t)}}});exports.Collection=d;exports.CollectionContext=u;

package/package/dist/Collection.d.ts

@@ -0,0 +1,15 @@
+import { InjectionKey } from 'vue';
+import { SizeInfo } from '.';
+type onCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void;
+export declare const CollectionContext: InjectionKey<onCollectionResize>;
+export interface ResizeInfo {
+    size: SizeInfo;
+    element: HTMLElement;
+    data: any;
+}
+export interface CollectionProps {
+    /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+    onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
+}
+export declare const Collection: import('vue').DefineComponent<CollectionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export {};

package/package/dist/Collection.js

@@ -0,0 +1,36 @@
+import { defineComponent as z, shallowRef as f, inject as R, provide as d } from "vue";
+const a = Symbol("CollectionContext"), m = /* @__PURE__ */ z({
+  props: {
+    onBatchResize: {
+      type: Function,
+      required: !1
+    }
+  },
+  setup(n, {
+    slots: o
+  }) {
+    const t = f(0), i = f([]), c = R(a, () => {
+    });
+    return d(a, (e, r, u) => {
+      const l = t.value + 1;
+      t.value = l, i.value.push({
+        size: e,
+        element: r,
+        data: u
+      }), Promise.resolve().then(() => {
+        var s;
+        if (t.value === l) {
+          const v = i.value;
+          i.value = [], (s = n.onBatchResize) == null || s.call(n, v);
+        }
+      }), c == null || c(e, r, u);
+    }), () => {
+      var e;
+      return (e = o.default) == null ? void 0 : e.call(o);
+    };
+  }
+});
+export {
+  m as Collection,
+  a as CollectionContext
+};

package/package/dist/SingleObserver/DomWrapper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),t=r.defineComponent({setup(n,{slots:e}){return()=>{var u;return(u=e.default)==null?void 0:u.call(e)}}});exports.default=t;

package/package/dist/SingleObserver/DomWrapper.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/package/dist/SingleObserver/DomWrapper.js

@@ -0,0 +1,14 @@
+import { defineComponent as p } from "vue";
+const f = /* @__PURE__ */ p({
+  setup(n, {
+    slots: e
+  }) {
+    return () => {
+      var r;
+      return (r = e.default) == null ? void 0 : r.call(e);
+    };
+  }
+});
+export {
+  f as default
+};

package/package/dist/SingleObserver/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),a=require("@v-c/util/dist/Dom/findDOMNode"),O=require("../Collection.cjs"),w=require("../utils/observerUtil.cjs"),S=require("./DomWrapper.cjs"),x=t.defineComponent({props:{data:{type:null,required:!1},disabled:{type:Boolean,required:!1},onResize:{type:Function,required:!1}},name:"SingleObserver",inheritAttrs:!1,setup(h,{expose:M,slots:f}){const i=t.shallowRef(),c=t.shallowRef(),l=t.inject(O.CollectionContext,()=>{}),n=t.shallowRef({width:-1,height:-1,offsetWidth:-1,offsetHeight:-1}),v=()=>{const e=a(i)||(i.value&&typeof i.value=="object"?a(i.value.nativeElement):null)||a(c.value);return e&&e.nodeType===3&&e.nextElementSibling?e.nextElementSibling:e},g=e=>{const{onResize:m,data:W}=h,{width:u,height:d}=e.getBoundingClientRect(),{offsetHeight:r,offsetWidth:s}=e,b=Math.floor(u),p=Math.floor(d);if(n.value.width!==b||n.value.height!==p||n.value.offsetWidth!==s||n.value.offsetHeight!==r){const R={width:b,height:p,offsetWidth:s,offsetHeight:r};n.value=R;const y=s===Math.round(u)?u:s,H=r===Math.round(d)?d:r,q={...R,offsetWidth:y,offsetHeight:H};l==null||l(q,e,W),m&&Promise.resolve().then(()=>{m(q,e)})}};let o;return t.onMounted(()=>{o=v(),o&&!h.disabled&&w.observe(o,g)}),t.onBeforeUnmount(()=>{o&&w.unobserve(o,g)}),M({getDom:v}),()=>t.createVNode(S.default,{ref:c},{default:()=>{var e;return[(e=f.default)==null?void 0:e.call(f)]}})}});exports.default=x;

package/package/dist/SingleObserver/index.d.ts

@@ -0,0 +1,3 @@
+import { ResizeObserverProps } from '../index.tsx';
+declare const SingleObserver: import('vue').DefineComponent<ResizeObserverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResizeObserverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default SingleObserver;

package/package/dist/SingleObserver/index.js

@@ -0,0 +1,84 @@
+import { defineComponent as y, shallowRef as a, inject as z, onMounted as O, onBeforeUnmount as E, createVNode as S } from "vue";
+import h from "@v-c/util/dist/Dom/findDOMNode";
+import { CollectionContext as q } from "../Collection.js";
+import { observe as B, unobserve as C } from "../utils/observerUtil.js";
+import D from "./DomWrapper.js";
+const P = /* @__PURE__ */ y({
+  props: {
+    data: {
+      type: null,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1
+    },
+    onResize: {
+      type: Function,
+      required: !1
+    }
+  },
+  name: "SingleObserver",
+  inheritAttrs: !1,
+  setup(u, {
+    expose: w,
+    slots: r
+  }) {
+    const n = a(), m = a(), s = z(q, () => {
+    }), t = a({
+      width: -1,
+      height: -1,
+      offsetWidth: -1,
+      offsetHeight: -1
+    }), c = () => {
+      const e = h(n) || (n.value && typeof n.value == "object" ? h(n.value.nativeElement) : null) || h(m.value);
+      return e && e.nodeType === 3 && e.nextElementSibling ? e.nextElementSibling : e;
+    }, p = (e) => {
+      const {
+        onResize: g,
+        data: x
+      } = u, {
+        width: d,
+        height: l
+      } = e.getBoundingClientRect(), {
+        offsetHeight: i,
+        offsetWidth: f
+      } = e, v = Math.floor(d), b = Math.floor(l);
+      if (t.value.width !== v || t.value.height !== b || t.value.offsetWidth !== f || t.value.offsetHeight !== i) {
+        const R = {
+          width: v,
+          height: b,
+          offsetWidth: f,
+          offsetHeight: i
+        };
+        t.value = R;
+        const H = f === Math.round(d) ? d : f, M = i === Math.round(l) ? l : i, W = {
+          ...R,
+          offsetWidth: H,
+          offsetHeight: M
+        };
+        s == null || s(W, e, x), g && Promise.resolve().then(() => {
+          g(W, e);
+        });
+      }
+    };
+    let o;
+    return O(() => {
+      o = c(), o && !u.disabled && B(o, p);
+    }), E(() => {
+      o && C(o, p);
+    }), w({
+      getDom: c
+    }), () => S(D, {
+      ref: m
+    }, {
+      default: () => {
+        var e;
+        return [(e = r.default) == null ? void 0 : e.call(r)];
+      }
+    });
+  }
+});
+export {
+  P as default
+};

package/package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("@v-c/util"),c=require("@v-c/util/dist/Children/toArray"),d=require("./Collection.cjs"),f=require("./SingleObserver/index.cjs"),p=require("./utils/observerUtil.cjs");function b(r){return typeof r=="function"||Object.prototype.toString.call(r)==="[object Object]"&&!t.isVNode(r)}const y="vc-observer-key",u=t.defineComponent({props:{data:{type:null,required:!1},disabled:{type:Boolean,required:!1},onResize:{type:Function,required:!1}},setup(r,{slots:n}){return()=>{var i;const o=c.toArray((i=n.default)==null?void 0:i.call(n));return process.env.NODE_ENV!=="production"&&(o.length>1?s.warning(!1,"Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead."):o.length===0&&s.warning(!1,"`children` of ResizeObserver is empty. Nothing is in observe.")),o.map((e,l)=>{const a=(e==null?void 0:e.key)||`${y}-${l}`;return t.createVNode(f.default,t.mergeProps(r,{key:a}),b(e)?e:{default:()=>[e]})})}}});u.Collection=d.Collection;exports._rs=p._rs;exports.default=u;

package/package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { Collection } from './Collection.tsx';
+import { _rs } from './utils/observerUtil';
+export { 
+/** @private Test only for mock trigger resize event */
+_rs, };
+export interface SizeInfo {
+    width: number;
+    height: number;
+    offsetWidth: number;
+    offsetHeight: number;
+}
+export type OnResize = (size: SizeInfo, element: HTMLElement) => void;
+export interface ResizeObserverProps {
+    /** Pass to ResizeObserver.Collection with additional data */
+    data?: any;
+    disabled?: boolean;
+    /** Trigger if element resized. Will always trigger when first time render. */
+    onResize?: OnResize;
+}
+declare const ResizeObserver: import('vue').DefineComponent<ResizeObserverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResizeObserverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof ResizeObserver & {
+    Collection: typeof Collection;
+};
+export default _default;

package/package/dist/index.js

@@ -0,0 +1,46 @@
+import { defineComponent as p, createVNode as a, mergeProps as l, isVNode as u } from "vue";
+import { warning as i } from "@v-c/util";
+import { toArray as m } from "@v-c/util/dist/Children/toArray";
+import { Collection as c } from "./Collection.js";
+import d from "./SingleObserver/index.js";
+import { _rs as k } from "./utils/observerUtil.js";
+function b(r) {
+  return typeof r == "function" || Object.prototype.toString.call(r) === "[object Object]" && !u(r);
+}
+const y = "vc-observer-key", v = /* @__PURE__ */ p({
+  props: {
+    data: {
+      type: null,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1
+    },
+    onResize: {
+      type: Function,
+      required: !1
+    }
+  },
+  setup(r, {
+    slots: o
+  }) {
+    return () => {
+      var n;
+      const t = m((n = o.default) == null ? void 0 : n.call(o));
+      return process.env.NODE_ENV !== "production" && (t.length > 1 ? i(!1, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.") : t.length === 0 && i(!1, "`children` of ResizeObserver is empty. Nothing is in observe.")), t.map((e, s) => {
+        const f = (e == null ? void 0 : e.key) || `${y}-${s}`;
+        return a(d, l(r, {
+          key: f
+        }), b(e) ? e : {
+          default: () => [e]
+        });
+      });
+    };
+  }
+});
+v.Collection = c;
+export {
+  k as _rs,
+  v as default
+};

package/package/dist/utils/observerUtil.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("resize-observer-polyfill"),o=new Map;function d(c){c.forEach(b=>{var r;const{target:u}=b;(r=o.get(u))==null||r.forEach(v=>v(u))})}const g=new s(d),p=process.env.NODE_ENV!=="production"?o:null,E=process.env.NODE_ENV!=="production"?d:null;function _(c,b){var u,r,v;o.has(c)||(o.set(c,new Set),g.observe(c)),(v=(r=(u=o==null?void 0:o.get)==null?void 0:u.call(o,c))==null?void 0:r.add)==null||v.call(r,b)}function i(c,b){var u,r,v,a,f;o.has(c)&&((v=(r=(u=o==null?void 0:o.get)==null?void 0:u.call(o,c))==null?void 0:r.delete)==null||v.call(r,b),(f=(a=o==null?void 0:o.get)==null?void 0:a.call(o,c))!=null&&f.size||(g.unobserve(c),o.delete(c)))}exports._el=p;exports._rs=E;exports.observe=_;exports.unobserve=i;

package/package/dist/utils/observerUtil.d.ts

@@ -0,0 +1,7 @@
+export type ResizeListener = (element: Element) => void;
+declare function onResize(entities: ResizeObserverEntry[]): void;
+export declare const _el: Map<Element, Set<ResizeListener>> | null;
+export declare const _rs: typeof onResize | null;
+export declare function observe(element: Element, callback: ResizeListener): void;
+export declare function unobserve(element: Element, callback: ResizeListener): void;
+export {};

package/package/dist/utils/observerUtil.js

@@ -0,0 +1,24 @@
+import E from "resize-observer-polyfill";
+const o = /* @__PURE__ */ new Map();
+function b(c) {
+  c.forEach((v) => {
+    var f;
+    const { target: r } = v;
+    (f = o.get(r)) == null || f.forEach((u) => u(r));
+  });
+}
+const d = new E(b), h = process.env.NODE_ENV !== "production" ? o : null, z = process.env.NODE_ENV !== "production" ? b : null;
+function N(c, v) {
+  var r, f, u;
+  o.has(c) || (o.set(c, /* @__PURE__ */ new Set()), d.observe(c)), (u = (f = (r = o == null ? void 0 : o.get) == null ? void 0 : r.call(o, c)) == null ? void 0 : f.add) == null || u.call(f, v);
+}
+function O(c, v) {
+  var r, f, u, a, p;
+  o.has(c) && ((u = (f = (r = o == null ? void 0 : o.get) == null ? void 0 : r.call(o, c)) == null ? void 0 : f.delete) == null || u.call(f, v), (p = (a = o == null ? void 0 : o.get) == null ? void 0 : a.call(o, c)) != null && p.size || (d.unobserve(c), o.delete(c)));
+}
+export {
+  h as _el,
+  z as _rs,
+  N as observe,
+  O as unobserve
+};

package/package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@v-c/resize-observer",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/util": "workspace:*",
+    "classnames": "^2.5.1",
+    "resize-observer-polyfill": "^1.5.1"
+  }
+}

package/package/src/Collection.tsx

@@ -0,0 +1,44 @@
+import type { InjectionKey } from 'vue'
+import type { SizeInfo } from '.'
+import { defineComponent, inject, provide, shallowRef } from 'vue'
+
+type onCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void
+
+export const CollectionContext: InjectionKey<onCollectionResize> = Symbol('CollectionContext')
+
+export interface ResizeInfo {
+  size: SizeInfo
+  element: HTMLElement
+  data: any
+}
+
+export interface CollectionProps {
+  /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+  onBatchResize?: (resizeInfo: ResizeInfo[]) => void
+}
+
+export const Collection = defineComponent<CollectionProps>({
+  setup(props, { slots }) {
+    const resizeIdRef = shallowRef(0)
+    const resizeInfosRef = shallowRef<ResizeInfo[]>([])
+    const onCollectionResize = inject(CollectionContext, () => {})
+    const onResize = (size: SizeInfo, element: HTMLElement, data: any) => {
+      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?.()
+    }
+  },
+})

package/package/src/SingleObserver/DomWrapper.tsx

@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent ({
+  setup(_, { slots }) {
+    return () => slots.default?.()
+  },
+})

package/package/src/SingleObserver/index.tsx

@@ -0,0 +1,92 @@
+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 { CollectionContext } from '../Collection'
+import { observe, unobserve } from '../utils/observerUtil.ts'
+import DomWrapper from './DomWrapper'
+
+const SingleObserver = defineComponent<ResizeObserverProps>({
+  name: 'SingleObserver',
+  inheritAttrs: false,
+  setup(props, { expose, slots }) {
+    const elementRef = shallowRef<HTMLElement>()
+    const wrapperRef = shallowRef()
+    const onCollectionResize = inject(CollectionContext, () => {})
+    const sizeRef = shallowRef<SizeInfo>({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 })
+    const getDom = () => {
+      const dom = findDOMNode(elementRef as any)
+        || (elementRef.value && typeof elementRef.value === 'object' ? findDOMNode((elementRef.value as any).nativeElement) : null)
+        || findDOMNode(wrapperRef.value)
+      // 判断当前的dom是不是一个text元素
+      if (dom && dom.nodeType === 3 && dom.nextElementSibling)
+        return dom.nextElementSibling as HTMLElement
+
+      return dom
+    }
+
+    const onInternalResize = (target: HTMLElement) => {
+      const { onResize, data } = props
+      const { width, height } = target.getBoundingClientRect()
+      const { offsetHeight, offsetWidth } = target
+      /**
+       * Resize observer trigger when content size changed.
+       * In most case we just care about element size,
+       * let's use `boundary` instead of `contentRect` here to avoid shaking.
+       */
+      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
+
+        // IE is strange, right?
+        const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth
+        const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight
+
+        const sizeInfo = {
+          ...size,
+          offsetWidth: mergedOffsetWidth,
+          offsetHeight: mergedOffsetHeight,
+        }
+
+        // Let collection know what happened
+        onCollectionResize?.(sizeInfo, target, data)
+
+        if (onResize) {
+          // defer the callback but not defer to next frame
+          Promise.resolve().then(() => {
+            onResize(sizeInfo, target)
+          })
+        }
+      }
+    }
+    let currentElement: HTMLElement
+    onMounted(() => {
+      currentElement = getDom() as HTMLElement
+      if (currentElement && !props.disabled)
+        observe(currentElement, onInternalResize as any)
+    })
+
+    onBeforeUnmount(() => {
+      if (currentElement)
+        unobserve(currentElement, onInternalResize as any)
+    })
+    expose({
+      getDom,
+    })
+    return () => {
+      return (
+        <DomWrapper ref={wrapperRef}>
+          {slots.default?.()}
+        </DomWrapper>
+      )
+    }
+  },
+})
+
+export default SingleObserver

package/package/src/index.tsx

@@ -0,0 +1,62 @@
+import { warning } from '@v-c/util'
+import { toArray } from '@v-c/util/dist/Children/toArray'
+import { defineComponent } from 'vue'
+import { Collection } from './Collection.tsx'
+import SingleObserver from './SingleObserver'
+import { _rs } from './utils/observerUtil'
+
+const INTERNAL_PREFIX_KEY = 'vc-observer-key'
+export {
+  /** @private Test only for mock trigger resize event */
+  _rs,
+}
+
+export interface SizeInfo {
+  width: number
+  height: number
+  offsetWidth: number
+  offsetHeight: number
+}
+
+export type OnResize = (size: SizeInfo, element: HTMLElement) => void
+
+export interface ResizeObserverProps {
+  /** Pass to ResizeObserver.Collection with additional data */
+  data?: any
+  disabled?: boolean
+  /** Trigger if element resized. Will always trigger when first time render. */
+  onResize?: OnResize
+}
+
+const ResizeObserver = defineComponent<ResizeObserverProps>({
+  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 (
+          <SingleObserver {...props} key={key}>
+            {child}
+          </SingleObserver>
+        )
+      })
+    }
+  },
+})
+
+ResizeObserver.Collection = Collection
+
+export default ResizeObserver as typeof ResizeObserver & {
+  Collection: typeof Collection
+}

package/package/src/utils/observerUtil.ts

@@ -0,0 +1,41 @@
+import ResizeObserver from 'resize-observer-polyfill'
+
+export type ResizeListener = (element: Element) => void
+
+// =============================== Const ===============================
+const elementListeners = new Map<Element, Set<ResizeListener>>()
+
+function onResize(entities: ResizeObserverEntry[]) {
+  entities.forEach((entity) => {
+    const { target } = entity
+    elementListeners.get(target)?.forEach(listener => listener(target))
+  })
+}
+
+// Note: ResizeObserver polyfill not support option to measure border-box resize
+const resizeObserver = new ResizeObserver(onResize)
+
+// Dev env only
+
+export const _el = process.env.NODE_ENV !== 'production' ? elementListeners : null; // eslint-disable-line
+
+export const _rs = process.env.NODE_ENV !== 'production' ? onResize : null; // eslint-disable-line
+
+// ============================== Observe ==============================
+export function observe(element: Element, callback: ResizeListener) {
+  if (!elementListeners.has(element)) {
+    elementListeners.set(element, new Set())
+    resizeObserver.observe(element)
+  }
+  elementListeners?.get?.(element)?.add?.(callback)
+}
+
+export function unobserve(element: Element, callback: ResizeListener) {
+  if (elementListeners.has(element)) {
+    elementListeners?.get?.(element)?.delete?.(callback)
+    if (!elementListeners?.get?.(element)?.size) {
+      resizeObserver.unobserve(element)
+      elementListeners.delete(element)
+    }
+  }
+}

package/package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../tsconfig.json"],
+  "compilerOptions": {
+
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
+}

package/package/vite.config.ts

@@ -0,0 +1,18 @@
+import type { UserConfig } from 'vite'
+import fg from 'fast-glob'
+import { defineConfig, mergeConfig } from 'vite'
+import { buildCommon } from '../../scripts/build.common'
+
+const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
+
+export default defineConfig({
+  ...mergeConfig(buildCommon({
+    external: ['vue', 'classnames', /^@v-c\/util/, 'resize-observer-polyfill'],
+  }), {
+    build: {
+      lib: {
+        entry,
+      },
+    },
+  } as UserConfig),
+})

package/package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineProject, mergeConfig } from 'vitest/config'
+import configShared from '../../vitest.config.ts'
+
+export default mergeConfig(
+  configShared,
+  defineProject({
+
+  }),
+)

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@v-c/resize-observer",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/util": "workspace:*",
+    "classnames": "^2.5.1",
+    "resize-observer-polyfill": "^1.5.1"
+  }
+}

package/src/Collection.tsx

@@ -0,0 +1,44 @@
+import type { InjectionKey } from 'vue'
+import type { SizeInfo } from '.'
+import { defineComponent, inject, provide, shallowRef } from 'vue'
+
+type onCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void
+
+export const CollectionContext: InjectionKey<onCollectionResize> = Symbol('CollectionContext')
+
+export interface ResizeInfo {
+  size: SizeInfo
+  element: HTMLElement
+  data: any
+}
+
+export interface CollectionProps {
+  /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+  onBatchResize?: (resizeInfo: ResizeInfo[]) => void
+}
+
+export const Collection = defineComponent<CollectionProps>({
+  setup(props, { slots }) {
+    const resizeIdRef = shallowRef(0)
+    const resizeInfosRef = shallowRef<ResizeInfo[]>([])
+    const onCollectionResize = inject(CollectionContext, () => {})
+    const onResize = (size: SizeInfo, element: HTMLElement, data: any) => {
+      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?.()
+    }
+  },
+})

package/src/SingleObserver/DomWrapper.tsx

@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent ({
+  setup(_, { slots }) {
+    return () => slots.default?.()
+  },
+})

package/src/SingleObserver/index.tsx

@@ -0,0 +1,92 @@
+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 { CollectionContext } from '../Collection'
+import { observe, unobserve } from '../utils/observerUtil.ts'
+import DomWrapper from './DomWrapper'
+
+const SingleObserver = defineComponent<ResizeObserverProps>({
+  name: 'SingleObserver',
+  inheritAttrs: false,
+  setup(props, { expose, slots }) {
+    const elementRef = shallowRef<HTMLElement>()
+    const wrapperRef = shallowRef()
+    const onCollectionResize = inject(CollectionContext, () => {})
+    const sizeRef = shallowRef<SizeInfo>({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 })
+    const getDom = () => {
+      const dom = findDOMNode(elementRef as any)
+        || (elementRef.value && typeof elementRef.value === 'object' ? findDOMNode((elementRef.value as any).nativeElement) : null)
+        || findDOMNode(wrapperRef.value)
+      // 判断当前的dom是不是一个text元素
+      if (dom && dom.nodeType === 3 && dom.nextElementSibling)
+        return dom.nextElementSibling as HTMLElement
+
+      return dom
+    }
+
+    const onInternalResize = (target: HTMLElement) => {
+      const { onResize, data } = props
+      const { width, height } = target.getBoundingClientRect()
+      const { offsetHeight, offsetWidth } = target
+      /**
+       * Resize observer trigger when content size changed.
+       * In most case we just care about element size,
+       * let's use `boundary` instead of `contentRect` here to avoid shaking.
+       */
+      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
+
+        // IE is strange, right?
+        const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth
+        const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight
+
+        const sizeInfo = {
+          ...size,
+          offsetWidth: mergedOffsetWidth,
+          offsetHeight: mergedOffsetHeight,
+        }
+
+        // Let collection know what happened
+        onCollectionResize?.(sizeInfo, target, data)
+
+        if (onResize) {
+          // defer the callback but not defer to next frame
+          Promise.resolve().then(() => {
+            onResize(sizeInfo, target)
+          })
+        }
+      }
+    }
+    let currentElement: HTMLElement
+    onMounted(() => {
+      currentElement = getDom() as HTMLElement
+      if (currentElement && !props.disabled)
+        observe(currentElement, onInternalResize as any)
+    })
+
+    onBeforeUnmount(() => {
+      if (currentElement)
+        unobserve(currentElement, onInternalResize as any)
+    })
+    expose({
+      getDom,
+    })
+    return () => {
+      return (
+        <DomWrapper ref={wrapperRef}>
+          {slots.default?.()}
+        </DomWrapper>
+      )
+    }
+  },
+})
+
+export default SingleObserver

package/src/index.tsx

@@ -0,0 +1,62 @@
+import { warning } from '@v-c/util'
+import { toArray } from '@v-c/util/dist/Children/toArray'
+import { defineComponent } from 'vue'
+import { Collection } from './Collection.tsx'
+import SingleObserver from './SingleObserver'
+import { _rs } from './utils/observerUtil'
+
+const INTERNAL_PREFIX_KEY = 'vc-observer-key'
+export {
+  /** @private Test only for mock trigger resize event */
+  _rs,
+}
+
+export interface SizeInfo {
+  width: number
+  height: number
+  offsetWidth: number
+  offsetHeight: number
+}
+
+export type OnResize = (size: SizeInfo, element: HTMLElement) => void
+
+export interface ResizeObserverProps {
+  /** Pass to ResizeObserver.Collection with additional data */
+  data?: any
+  disabled?: boolean
+  /** Trigger if element resized. Will always trigger when first time render. */
+  onResize?: OnResize
+}
+
+const ResizeObserver = defineComponent<ResizeObserverProps>({
+  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 (
+          <SingleObserver {...props} key={key}>
+            {child}
+          </SingleObserver>
+        )
+      })
+    }
+  },
+})
+
+ResizeObserver.Collection = Collection
+
+export default ResizeObserver as typeof ResizeObserver & {
+  Collection: typeof Collection
+}

package/src/utils/observerUtil.ts

@@ -0,0 +1,41 @@
+import ResizeObserver from 'resize-observer-polyfill'
+
+export type ResizeListener = (element: Element) => void
+
+// =============================== Const ===============================
+const elementListeners = new Map<Element, Set<ResizeListener>>()
+
+function onResize(entities: ResizeObserverEntry[]) {
+  entities.forEach((entity) => {
+    const { target } = entity
+    elementListeners.get(target)?.forEach(listener => listener(target))
+  })
+}
+
+// Note: ResizeObserver polyfill not support option to measure border-box resize
+const resizeObserver = new ResizeObserver(onResize)
+
+// Dev env only
+
+export const _el = process.env.NODE_ENV !== 'production' ? elementListeners : null; // eslint-disable-line
+
+export const _rs = process.env.NODE_ENV !== 'production' ? onResize : null; // eslint-disable-line
+
+// ============================== Observe ==============================
+export function observe(element: Element, callback: ResizeListener) {
+  if (!elementListeners.has(element)) {
+    elementListeners.set(element, new Set())
+    resizeObserver.observe(element)
+  }
+  elementListeners?.get?.(element)?.add?.(callback)
+}
+
+export function unobserve(element: Element, callback: ResizeListener) {
+  if (elementListeners.has(element)) {
+    elementListeners?.get?.(element)?.delete?.(callback)
+    if (!elementListeners?.get?.(element)?.size) {
+      resizeObserver.unobserve(element)
+      elementListeners.delete(element)
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../tsconfig.json"],
+  "compilerOptions": {
+
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import type { UserConfig } from 'vite'
+import fg from 'fast-glob'
+import { defineConfig, mergeConfig } from 'vite'
+import { buildCommon } from '../../scripts/build.common'
+
+const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
+
+export default defineConfig({
+  ...mergeConfig(buildCommon({
+    external: ['vue', 'classnames', /^@v-c\/util/, 'resize-observer-polyfill'],
+  }), {
+    build: {
+      lib: {
+        entry,
+      },
+    },
+  } as UserConfig),
+})

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineProject, mergeConfig } from 'vitest/config'
+import configShared from '../../vitest.config.ts'
+
+export default mergeConfig(
+  configShared,
+  defineProject({
+
+  }),
+)