@v-c/resize-observer 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/LICENSE +21 -0
  2. package/bump.config.ts +6 -0
  3. package/dist/Collection.cjs +44 -1
  4. package/dist/Collection.js +31 -23
  5. package/dist/SingleObserver/DomWrapper.cjs +11 -1
  6. package/dist/SingleObserver/DomWrapper.js +6 -9
  7. package/dist/SingleObserver/index.cjs +105 -1
  8. package/dist/SingleObserver/index.js +78 -57
  9. package/dist/index.cjs +56 -1
  10. package/dist/index.js +35 -25
  11. package/dist/utils/observerUtil.cjs +33 -1
  12. package/dist/utils/observerUtil.js +27 -18
  13. package/package.json +9 -8
  14. package/package/dist/Collection.cjs +0 -1
  15. package/package/dist/Collection.d.ts +0 -15
  16. package/package/dist/Collection.js +0 -36
  17. package/package/dist/SingleObserver/DomWrapper.cjs +0 -1
  18. package/package/dist/SingleObserver/DomWrapper.d.ts +0 -4
  19. package/package/dist/SingleObserver/DomWrapper.js +0 -14
  20. package/package/dist/SingleObserver/index.cjs +0 -1
  21. package/package/dist/SingleObserver/index.d.ts +0 -3
  22. package/package/dist/SingleObserver/index.js +0 -84
  23. package/package/dist/index.cjs +0 -1
  24. package/package/dist/index.d.ts +0 -24
  25. package/package/dist/index.js +0 -46
  26. package/package/dist/utils/observerUtil.cjs +0 -1
  27. package/package/dist/utils/observerUtil.d.ts +0 -7
  28. package/package/dist/utils/observerUtil.js +0 -24
  29. package/package/package.json +0 -26
  30. package/package/src/Collection.tsx +0 -44
  31. package/package/src/SingleObserver/DomWrapper.tsx +0 -7
  32. package/package/src/SingleObserver/index.tsx +0 -92
  33. package/package/src/index.tsx +0 -62
  34. package/package/src/utils/observerUtil.ts +0 -41
  35. package/package/tsconfig.json +0 -7
  36. package/package/vite.config.ts +0 -18
  37. package/package/vitest.config.ts +0 -9
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023 antdv-community
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/bump.config.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from 'bumpp'
2
+
3
+ export default defineConfig({
4
+ commit: 'chore(release): @v-c/resize-observer %s',
5
+ tag: '@v-c/resize-observer@%s',
6
+ })
@@ -1 +1,44 @@
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;
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const vue = require("vue");
4
+ const CollectionContext = Symbol("CollectionContext");
5
+ const Collection = /* @__PURE__ */ vue.defineComponent({
6
+ props: {
7
+ onBatchResize: {
8
+ type: Function,
9
+ required: false,
10
+ default: void 0
11
+ }
12
+ },
13
+ setup(props, {
14
+ slots
15
+ }) {
16
+ const resizeIdRef = vue.shallowRef(0);
17
+ const resizeInfosRef = vue.shallowRef([]);
18
+ const onCollectionResize = vue.inject(CollectionContext, () => {
19
+ });
20
+ const onResize = (size, element, data) => {
21
+ const resizeId = resizeIdRef.value + 1;
22
+ resizeIdRef.value = resizeId;
23
+ resizeInfosRef.value.push({
24
+ size,
25
+ element,
26
+ data
27
+ });
28
+ Promise.resolve().then(() => {
29
+ if (resizeIdRef.value === resizeId) {
30
+ const resizeInfos = resizeInfosRef.value;
31
+ resizeInfosRef.value = [];
32
+ props.onBatchResize?.(resizeInfos);
33
+ }
34
+ });
35
+ onCollectionResize?.(size, element, data);
36
+ };
37
+ vue.provide(CollectionContext, onResize);
38
+ return () => {
39
+ return slots.default?.();
40
+ };
41
+ }
42
+ });
43
+ exports.Collection = Collection;
44
+ exports.CollectionContext = CollectionContext;
@@ -1,36 +1,44 @@
1
- import { defineComponent as z, shallowRef as f, inject as R, provide as d } from "vue";
2
- const a = Symbol("CollectionContext"), m = /* @__PURE__ */ z({
1
+ import { defineComponent, shallowRef, inject, provide } from "vue";
2
+ const CollectionContext = Symbol("CollectionContext");
3
+ const Collection = /* @__PURE__ */ defineComponent({
3
4
  props: {
4
5
  onBatchResize: {
5
6
  type: Function,
6
- required: !1
7
+ required: false,
8
+ default: void 0
7
9
  }
8
10
  },
9
- setup(n, {
10
- slots: o
11
+ setup(props, {
12
+ slots
11
13
  }) {
12
- const t = f(0), i = f([]), c = R(a, () => {
14
+ const resizeIdRef = shallowRef(0);
15
+ const resizeInfosRef = shallowRef([]);
16
+ const onCollectionResize = inject(CollectionContext, () => {
13
17
  });
14
- return d(a, (e, r, u) => {
15
- const l = t.value + 1;
16
- t.value = l, i.value.push({
17
- size: e,
18
- element: r,
19
- data: u
20
- }), Promise.resolve().then(() => {
21
- var s;
22
- if (t.value === l) {
23
- const v = i.value;
24
- i.value = [], (s = n.onBatchResize) == null || s.call(n, v);
18
+ const onResize = (size, element, data) => {
19
+ const resizeId = resizeIdRef.value + 1;
20
+ resizeIdRef.value = resizeId;
21
+ resizeInfosRef.value.push({
22
+ size,
23
+ element,
24
+ data
25
+ });
26
+ Promise.resolve().then(() => {
27
+ if (resizeIdRef.value === resizeId) {
28
+ const resizeInfos = resizeInfosRef.value;
29
+ resizeInfosRef.value = [];
30
+ props.onBatchResize?.(resizeInfos);
25
31
  }
26
- }), c == null || c(e, r, u);
27
- }), () => {
28
- var e;
29
- return (e = o.default) == null ? void 0 : e.call(o);
32
+ });
33
+ onCollectionResize?.(size, element, data);
34
+ };
35
+ provide(CollectionContext, onResize);
36
+ return () => {
37
+ return slots.default?.();
30
38
  };
31
39
  }
32
40
  });
33
41
  export {
34
- m as Collection,
35
- a as CollectionContext
42
+ Collection,
43
+ CollectionContext
36
44
  };
@@ -1 +1,11 @@
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;
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const vue = require("vue");
4
+ const DomWrapper = /* @__PURE__ */ vue.defineComponent({
5
+ setup(_, {
6
+ slots
7
+ }) {
8
+ return () => slots.default?.();
9
+ }
10
+ });
11
+ exports.default = DomWrapper;
@@ -1,14 +1,11 @@
1
- import { defineComponent as p } from "vue";
2
- const f = /* @__PURE__ */ p({
3
- setup(n, {
4
- slots: e
1
+ import { defineComponent } from "vue";
2
+ const DomWrapper = /* @__PURE__ */ defineComponent({
3
+ setup(_, {
4
+ slots
5
5
  }) {
6
- return () => {
7
- var r;
8
- return (r = e.default) == null ? void 0 : r.call(e);
9
- };
6
+ return () => slots.default?.();
10
7
  }
11
8
  });
12
9
  export {
13
- f as default
10
+ DomWrapper as default
14
11
  };
@@ -1 +1,105 @@
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;
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const vue = require("vue");
4
+ const findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
5
+ const Collection = require("../Collection.cjs");
6
+ const observerUtil = require("../utils/observerUtil.cjs");
7
+ const DomWrapper = require("./DomWrapper.cjs");
8
+ const SingleObserver = /* @__PURE__ */ vue.defineComponent({
9
+ props: {
10
+ data: {
11
+ type: null,
12
+ required: false,
13
+ default: void 0
14
+ },
15
+ disabled: {
16
+ type: Boolean,
17
+ required: false,
18
+ default: void 0
19
+ },
20
+ onResize: {
21
+ type: Function,
22
+ required: false,
23
+ default: void 0
24
+ }
25
+ },
26
+ name: "SingleObserver",
27
+ inheritAttrs: false,
28
+ setup(props, {
29
+ expose,
30
+ slots
31
+ }) {
32
+ const elementRef = vue.shallowRef();
33
+ const wrapperRef = vue.shallowRef();
34
+ const onCollectionResize = vue.inject(Collection.CollectionContext, () => {
35
+ });
36
+ const sizeRef = vue.shallowRef({
37
+ width: -1,
38
+ height: -1,
39
+ offsetWidth: -1,
40
+ offsetHeight: -1
41
+ });
42
+ const getDom = () => {
43
+ const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
44
+ if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
45
+ return dom;
46
+ };
47
+ const onInternalResize = (target) => {
48
+ const {
49
+ onResize,
50
+ data
51
+ } = props;
52
+ const {
53
+ width,
54
+ height
55
+ } = target.getBoundingClientRect();
56
+ const {
57
+ offsetHeight,
58
+ offsetWidth
59
+ } = target;
60
+ const fixedWidth = Math.floor(width);
61
+ const fixedHeight = Math.floor(height);
62
+ if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
63
+ const size = {
64
+ width: fixedWidth,
65
+ height: fixedHeight,
66
+ offsetWidth,
67
+ offsetHeight
68
+ };
69
+ sizeRef.value = size;
70
+ const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
71
+ const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
72
+ const sizeInfo = {
73
+ ...size,
74
+ offsetWidth: mergedOffsetWidth,
75
+ offsetHeight: mergedOffsetHeight
76
+ };
77
+ onCollectionResize?.(sizeInfo, target, data);
78
+ if (onResize) {
79
+ Promise.resolve().then(() => {
80
+ onResize(sizeInfo, target);
81
+ });
82
+ }
83
+ }
84
+ };
85
+ let currentElement;
86
+ vue.onMounted(() => {
87
+ currentElement = getDom();
88
+ if (currentElement && !props.disabled) observerUtil.observe(currentElement, onInternalResize);
89
+ });
90
+ vue.onBeforeUnmount(() => {
91
+ if (currentElement) observerUtil.unobserve(currentElement, onInternalResize);
92
+ });
93
+ expose({
94
+ getDom
95
+ });
96
+ return () => {
97
+ return vue.createVNode(DomWrapper.default, {
98
+ "ref": wrapperRef
99
+ }, {
100
+ default: () => [slots.default?.()]
101
+ });
102
+ };
103
+ }
104
+ });
105
+ exports.default = SingleObserver;
@@ -1,84 +1,105 @@
1
- import { defineComponent as y, shallowRef as a, inject as z, onMounted as O, onBeforeUnmount as E, createVNode as S } from "vue";
2
- import h from "@v-c/util/dist/Dom/findDOMNode";
3
- import { CollectionContext as q } from "../Collection.js";
4
- import { observe as B, unobserve as C } from "../utils/observerUtil.js";
5
- import D from "./DomWrapper.js";
6
- const P = /* @__PURE__ */ y({
1
+ import { defineComponent, shallowRef, inject, onMounted, onBeforeUnmount, createVNode } from "vue";
2
+ import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
3
+ import { CollectionContext } from "../Collection.js";
4
+ import { observe, unobserve } from "../utils/observerUtil.js";
5
+ import DomWrapper from "./DomWrapper.js";
6
+ const SingleObserver = /* @__PURE__ */ defineComponent({
7
7
  props: {
8
8
  data: {
9
9
  type: null,
10
- required: !1
10
+ required: false,
11
+ default: void 0
11
12
  },
12
13
  disabled: {
13
14
  type: Boolean,
14
- required: !1
15
+ required: false,
16
+ default: void 0
15
17
  },
16
18
  onResize: {
17
19
  type: Function,
18
- required: !1
20
+ required: false,
21
+ default: void 0
19
22
  }
20
23
  },
21
24
  name: "SingleObserver",
22
- inheritAttrs: !1,
23
- setup(u, {
24
- expose: w,
25
- slots: r
25
+ inheritAttrs: false,
26
+ setup(props, {
27
+ expose,
28
+ slots
26
29
  }) {
27
- const n = a(), m = a(), s = z(q, () => {
28
- }), t = a({
30
+ const elementRef = shallowRef();
31
+ const wrapperRef = shallowRef();
32
+ const onCollectionResize = inject(CollectionContext, () => {
33
+ });
34
+ const sizeRef = shallowRef({
29
35
  width: -1,
30
36
  height: -1,
31
37
  offsetWidth: -1,
32
38
  offsetHeight: -1
33
- }), c = () => {
34
- const e = h(n) || (n.value && typeof n.value == "object" ? h(n.value.nativeElement) : null) || h(m.value);
35
- return e && e.nodeType === 3 && e.nextElementSibling ? e.nextElementSibling : e;
36
- }, p = (e) => {
39
+ });
40
+ const getDom = () => {
41
+ const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
42
+ if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
43
+ return dom;
44
+ };
45
+ const onInternalResize = (target) => {
46
+ const {
47
+ onResize,
48
+ data
49
+ } = props;
50
+ const {
51
+ width,
52
+ height
53
+ } = target.getBoundingClientRect();
37
54
  const {
38
- onResize: g,
39
- data: x
40
- } = u, {
41
- width: d,
42
- height: l
43
- } = e.getBoundingClientRect(), {
44
- offsetHeight: i,
45
- offsetWidth: f
46
- } = e, v = Math.floor(d), b = Math.floor(l);
47
- if (t.value.width !== v || t.value.height !== b || t.value.offsetWidth !== f || t.value.offsetHeight !== i) {
48
- const R = {
49
- width: v,
50
- height: b,
51
- offsetWidth: f,
52
- offsetHeight: i
55
+ offsetHeight,
56
+ offsetWidth
57
+ } = target;
58
+ const fixedWidth = Math.floor(width);
59
+ const fixedHeight = Math.floor(height);
60
+ if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
61
+ const size = {
62
+ width: fixedWidth,
63
+ height: fixedHeight,
64
+ offsetWidth,
65
+ offsetHeight
53
66
  };
54
- t.value = R;
55
- const H = f === Math.round(d) ? d : f, M = i === Math.round(l) ? l : i, W = {
56
- ...R,
57
- offsetWidth: H,
58
- offsetHeight: M
67
+ sizeRef.value = size;
68
+ const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
69
+ const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
70
+ const sizeInfo = {
71
+ ...size,
72
+ offsetWidth: mergedOffsetWidth,
73
+ offsetHeight: mergedOffsetHeight
59
74
  };
60
- s == null || s(W, e, x), g && Promise.resolve().then(() => {
61
- g(W, e);
62
- });
75
+ onCollectionResize?.(sizeInfo, target, data);
76
+ if (onResize) {
77
+ Promise.resolve().then(() => {
78
+ onResize(sizeInfo, target);
79
+ });
80
+ }
63
81
  }
64
82
  };
65
- let o;
66
- return O(() => {
67
- o = c(), o && !u.disabled && B(o, p);
68
- }), E(() => {
69
- o && C(o, p);
70
- }), w({
71
- getDom: c
72
- }), () => S(D, {
73
- ref: m
74
- }, {
75
- default: () => {
76
- var e;
77
- return [(e = r.default) == null ? void 0 : e.call(r)];
78
- }
83
+ let currentElement;
84
+ onMounted(() => {
85
+ currentElement = getDom();
86
+ if (currentElement && !props.disabled) observe(currentElement, onInternalResize);
87
+ });
88
+ onBeforeUnmount(() => {
89
+ if (currentElement) unobserve(currentElement, onInternalResize);
79
90
  });
91
+ expose({
92
+ getDom
93
+ });
94
+ return () => {
95
+ return createVNode(DomWrapper, {
96
+ "ref": wrapperRef
97
+ }, {
98
+ default: () => [slots.default?.()]
99
+ });
100
+ };
80
101
  }
81
102
  });
82
103
  export {
83
- P as default
104
+ SingleObserver as default
84
105
  };
package/dist/index.cjs CHANGED
@@ -1 +1,56 @@
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;
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const vue = require("vue");
4
+ const util = require("@v-c/util");
5
+ const toArray = require("@v-c/util/dist/Children/toArray");
6
+ const Collection = require("./Collection.cjs");
7
+ const index = require("./SingleObserver/index.cjs");
8
+ const observerUtil = require("./utils/observerUtil.cjs");
9
+ function _isSlot(s) {
10
+ return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
11
+ }
12
+ const INTERNAL_PREFIX_KEY = "vc-observer-key";
13
+ const ResizeObserver = /* @__PURE__ */ vue.defineComponent({
14
+ props: {
15
+ data: {
16
+ type: null,
17
+ required: false,
18
+ default: void 0
19
+ },
20
+ disabled: {
21
+ type: Boolean,
22
+ required: false,
23
+ default: void 0
24
+ },
25
+ onResize: {
26
+ type: Function,
27
+ required: false,
28
+ default: void 0
29
+ }
30
+ },
31
+ setup(props, {
32
+ slots
33
+ }) {
34
+ return () => {
35
+ const childNodes = toArray.toArray(slots.default?.());
36
+ if (process.env.NODE_ENV !== "production") {
37
+ if (childNodes.length > 1) {
38
+ util.warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
39
+ } else if (childNodes.length === 0) {
40
+ util.warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
41
+ }
42
+ }
43
+ return childNodes.map((child, index$1) => {
44
+ const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index$1}`;
45
+ return vue.createVNode(index.default, vue.mergeProps(props, {
46
+ "key": key
47
+ }), _isSlot(child) ? child : {
48
+ default: () => [child]
49
+ });
50
+ });
51
+ };
52
+ }
53
+ });
54
+ ResizeObserver.Collection = Collection.Collection;
55
+ exports._rs = observerUtil._rs;
56
+ exports.default = ResizeObserver;
package/dist/index.js CHANGED
@@ -1,46 +1,56 @@
1
- import { defineComponent as p, createVNode as a, mergeProps as l, isVNode as u } from "vue";
2
- import { warning as i } from "@v-c/util";
3
- import { toArray as m } from "@v-c/util/dist/Children/toArray";
4
- import { Collection as c } from "./Collection.js";
5
- import d from "./SingleObserver/index.js";
6
- import { _rs as k } from "./utils/observerUtil.js";
7
- function b(r) {
8
- return typeof r == "function" || Object.prototype.toString.call(r) === "[object Object]" && !u(r);
1
+ import { defineComponent, createVNode, mergeProps, isVNode } from "vue";
2
+ import { warning } from "@v-c/util";
3
+ import { toArray } from "@v-c/util/dist/Children/toArray";
4
+ import { Collection } from "./Collection.js";
5
+ import SingleObserver from "./SingleObserver/index.js";
6
+ import { _rs } from "./utils/observerUtil.js";
7
+ function _isSlot(s) {
8
+ return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
9
9
  }
10
- const y = "vc-observer-key", v = /* @__PURE__ */ p({
10
+ const INTERNAL_PREFIX_KEY = "vc-observer-key";
11
+ const ResizeObserver = /* @__PURE__ */ defineComponent({
11
12
  props: {
12
13
  data: {
13
14
  type: null,
14
- required: !1
15
+ required: false,
16
+ default: void 0
15
17
  },
16
18
  disabled: {
17
19
  type: Boolean,
18
- required: !1
20
+ required: false,
21
+ default: void 0
19
22
  },
20
23
  onResize: {
21
24
  type: Function,
22
- required: !1
25
+ required: false,
26
+ default: void 0
23
27
  }
24
28
  },
25
- setup(r, {
26
- slots: o
29
+ setup(props, {
30
+ slots
27
31
  }) {
28
32
  return () => {
29
- var n;
30
- const t = m((n = o.default) == null ? void 0 : n.call(o));
31
- 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) => {
32
- const f = (e == null ? void 0 : e.key) || `${y}-${s}`;
33
- return a(d, l(r, {
34
- key: f
35
- }), b(e) ? e : {
36
- default: () => [e]
33
+ const childNodes = toArray(slots.default?.());
34
+ if (process.env.NODE_ENV !== "production") {
35
+ if (childNodes.length > 1) {
36
+ warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
37
+ } else if (childNodes.length === 0) {
38
+ warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
39
+ }
40
+ }
41
+ return childNodes.map((child, index) => {
42
+ const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
43
+ return createVNode(SingleObserver, mergeProps(props, {
44
+ "key": key
45
+ }), _isSlot(child) ? child : {
46
+ default: () => [child]
37
47
  });
38
48
  });
39
49
  };
40
50
  }
41
51
  });
42
- v.Collection = c;
52
+ ResizeObserver.Collection = Collection;
43
53
  export {
44
- k as _rs,
45
- v as default
54
+ _rs,
55
+ ResizeObserver as default
46
56
  };
@@ -1 +1,33 @@
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;
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const ResizeObserver = require("resize-observer-polyfill");
4
+ const elementListeners = /* @__PURE__ */ new Map();
5
+ function onResize(entities) {
6
+ entities.forEach((entity) => {
7
+ const { target } = entity;
8
+ elementListeners.get(target)?.forEach((listener) => listener(target));
9
+ });
10
+ }
11
+ const resizeObserver = new ResizeObserver(onResize);
12
+ const _el = process.env.NODE_ENV !== "production" ? elementListeners : null;
13
+ const _rs = process.env.NODE_ENV !== "production" ? onResize : null;
14
+ function observe(element, callback) {
15
+ if (!elementListeners.has(element)) {
16
+ elementListeners.set(element, /* @__PURE__ */ new Set());
17
+ resizeObserver.observe(element);
18
+ }
19
+ elementListeners?.get?.(element)?.add?.(callback);
20
+ }
21
+ function unobserve(element, callback) {
22
+ if (elementListeners.has(element)) {
23
+ elementListeners?.get?.(element)?.delete?.(callback);
24
+ if (!elementListeners?.get?.(element)?.size) {
25
+ resizeObserver.unobserve(element);
26
+ elementListeners.delete(element);
27
+ }
28
+ }
29
+ }
30
+ exports._el = _el;
31
+ exports._rs = _rs;
32
+ exports.observe = observe;
33
+ exports.unobserve = unobserve;