@v-c/resize-observer 1.0.1 → 1.0.4
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.
- package/dist/Collection.cjs +1 -0
- package/dist/SingleObserver/DomWrapper.cjs +4 -1
- package/dist/SingleObserver/index.cjs +21 -59
- package/dist/SingleObserver/index.js +14 -55
- package/dist/index.cjs +11 -6
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -2
- package/dist/useResizeObserver.cjs +54 -0
- package/dist/useResizeObserver.d.ts +3 -0
- package/dist/useResizeObserver.js +49 -0
- package/dist/utils/observerUtil.cjs +1 -0
- package/package.json +2 -2
- package/src/SingleObserver/index.tsx +21 -77
- package/src/index.tsx +2 -1
- package/src/useResizeObserver.ts +82 -0
package/dist/Collection.cjs
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
let vue = require("vue");
|
|
4
7
|
var DomWrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({ setup(_, { slots }) {
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_Collection = require("../Collection.cjs");
|
|
4
|
-
const
|
|
7
|
+
const require_useResizeObserver = require("../useResizeObserver.cjs");
|
|
5
8
|
const require_DomWrapper = require("./DomWrapper.cjs");
|
|
6
9
|
let vue = require("vue");
|
|
7
|
-
let
|
|
8
|
-
let
|
|
9
|
-
|
|
10
|
+
let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
11
|
+
let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
|
|
12
|
+
_v_c_util_dist_Dom_findDOMNode = require_rolldown_runtime.__toESM(_v_c_util_dist_Dom_findDOMNode);
|
|
10
13
|
var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
11
14
|
props: {
|
|
12
15
|
data: {
|
|
@@ -27,67 +30,26 @@ var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
27
30
|
name: "SingleObserver",
|
|
28
31
|
inheritAttrs: false,
|
|
29
32
|
setup(props, { expose, slots }) {
|
|
30
|
-
const elementRef = (0, vue.shallowRef)();
|
|
31
33
|
const wrapperRef = (0, vue.shallowRef)();
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
else wrapperRef.value = el;
|
|
36
|
-
};
|
|
37
|
-
const onCollectionResize = (0, vue.inject)(require_Collection.CollectionContext, () => {});
|
|
38
|
-
const sizeRef = (0, vue.shallowRef)({
|
|
39
|
-
width: -1,
|
|
40
|
-
height: -1,
|
|
41
|
-
offsetWidth: -1,
|
|
42
|
-
offsetHeight: -1
|
|
43
|
-
});
|
|
44
|
-
const getDom = () => {
|
|
45
|
-
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);
|
|
46
|
-
if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
|
|
34
|
+
const getDom = (el) => {
|
|
35
|
+
const dom = (0, _v_c_util_dist_Dom_findDOMNode.default)(el);
|
|
36
|
+
if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && dom.nextElementSibling) return dom.nextElementSibling;
|
|
47
37
|
return dom;
|
|
48
38
|
};
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
|
|
56
|
-
const size = {
|
|
57
|
-
width: fixedWidth,
|
|
58
|
-
height: fixedHeight,
|
|
59
|
-
offsetWidth,
|
|
60
|
-
offsetHeight
|
|
61
|
-
};
|
|
62
|
-
sizeRef.value = size;
|
|
63
|
-
const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
|
|
64
|
-
const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
|
|
65
|
-
const sizeInfo = {
|
|
66
|
-
...size,
|
|
67
|
-
offsetWidth: mergedOffsetWidth,
|
|
68
|
-
offsetHeight: mergedOffsetHeight
|
|
69
|
-
};
|
|
70
|
-
onCollectionResize?.(sizeInfo, target, data);
|
|
71
|
-
if (onResize) Promise.resolve().then(() => {
|
|
72
|
-
onResize(sizeInfo, target);
|
|
73
|
-
});
|
|
74
|
-
}
|
|
39
|
+
const setWrapperRef = (el) => {
|
|
40
|
+
const _wrapper = el;
|
|
41
|
+
if (el?.elementEl && typeof el.elementEl === "object") _wrapper.value = el.elementEl;
|
|
42
|
+
else if (el?.__$el && typeof el.__$el === "object") _wrapper.value = el.__$el;
|
|
43
|
+
else _wrapper.value = el;
|
|
44
|
+
wrapperRef.value = getDom(el);
|
|
75
45
|
};
|
|
76
|
-
const
|
|
77
|
-
(0, vue.
|
|
78
|
-
|
|
79
|
-
const currentElement = getDom();
|
|
80
|
-
if (currentElement) require_observerUtil.observe(currentElement, onInternalResize);
|
|
81
|
-
onCleanup(() => {
|
|
82
|
-
if (currentElement) require_observerUtil.unobserve(currentElement, onInternalResize);
|
|
83
|
-
});
|
|
84
|
-
}, {
|
|
85
|
-
immediate: true,
|
|
86
|
-
flush: "post"
|
|
46
|
+
const onCollectionResize = (0, vue.inject)(require_Collection.CollectionContext, () => {});
|
|
47
|
+
require_useResizeObserver.default((0, vue.computed)(() => props.disabled), wrapperRef, (...args) => props?.onResize?.(...args), (size, element) => {
|
|
48
|
+
onCollectionResize?.(size, element, props.data);
|
|
87
49
|
});
|
|
88
50
|
expose({ getDom });
|
|
89
51
|
return () => {
|
|
90
|
-
const children = (0,
|
|
52
|
+
const children = (0, _v_c_util_dist_props_util.filterEmpty)(slots?.default?.());
|
|
91
53
|
if (children.length === 1 && (0, vue.isVNode)(children[0])) return (0, vue.createVNode)(children[0], { ref: setWrapperRef });
|
|
92
54
|
return (0, vue.createVNode)(require_DomWrapper.default, { "ref": wrapperRef }, { default: () => [slots.default?.()] });
|
|
93
55
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CollectionContext } from "../Collection.js";
|
|
2
|
-
import
|
|
2
|
+
import useResizeObserver from "../useResizeObserver.js";
|
|
3
3
|
import DomWrapper_default from "./DomWrapper.js";
|
|
4
|
-
import { computed, createVNode, defineComponent, inject, isVNode, shallowRef
|
|
4
|
+
import { computed, createVNode, defineComponent, inject, isVNode, shallowRef } from "vue";
|
|
5
5
|
import { filterEmpty } from "@v-c/util/dist/props-util";
|
|
6
6
|
import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
|
|
7
7
|
var SingleObserver_default = /* @__PURE__ */ defineComponent({
|
|
@@ -24,63 +24,22 @@ var SingleObserver_default = /* @__PURE__ */ defineComponent({
|
|
|
24
24
|
name: "SingleObserver",
|
|
25
25
|
inheritAttrs: false,
|
|
26
26
|
setup(props, { expose, slots }) {
|
|
27
|
-
const elementRef = shallowRef();
|
|
28
27
|
const wrapperRef = shallowRef();
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
else wrapperRef.value = el;
|
|
33
|
-
};
|
|
34
|
-
const onCollectionResize = inject(CollectionContext, () => {});
|
|
35
|
-
const sizeRef = shallowRef({
|
|
36
|
-
width: -1,
|
|
37
|
-
height: -1,
|
|
38
|
-
offsetWidth: -1,
|
|
39
|
-
offsetHeight: -1
|
|
40
|
-
});
|
|
41
|
-
const getDom = () => {
|
|
42
|
-
const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
|
|
43
|
-
if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
|
|
28
|
+
const getDom = (el) => {
|
|
29
|
+
const dom = findDOMNode(el);
|
|
30
|
+
if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && dom.nextElementSibling) return dom.nextElementSibling;
|
|
44
31
|
return dom;
|
|
45
32
|
};
|
|
46
|
-
const
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
|
|
53
|
-
const size = {
|
|
54
|
-
width: fixedWidth,
|
|
55
|
-
height: fixedHeight,
|
|
56
|
-
offsetWidth,
|
|
57
|
-
offsetHeight
|
|
58
|
-
};
|
|
59
|
-
sizeRef.value = size;
|
|
60
|
-
const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
|
|
61
|
-
const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
|
|
62
|
-
const sizeInfo = {
|
|
63
|
-
...size,
|
|
64
|
-
offsetWidth: mergedOffsetWidth,
|
|
65
|
-
offsetHeight: mergedOffsetHeight
|
|
66
|
-
};
|
|
67
|
-
onCollectionResize?.(sizeInfo, target, data);
|
|
68
|
-
if (onResize) Promise.resolve().then(() => {
|
|
69
|
-
onResize(sizeInfo, target);
|
|
70
|
-
});
|
|
71
|
-
}
|
|
33
|
+
const setWrapperRef = (el) => {
|
|
34
|
+
const _wrapper = el;
|
|
35
|
+
if (el?.elementEl && typeof el.elementEl === "object") _wrapper.value = el.elementEl;
|
|
36
|
+
else if (el?.__$el && typeof el.__$el === "object") _wrapper.value = el.__$el;
|
|
37
|
+
else _wrapper.value = el;
|
|
38
|
+
wrapperRef.value = getDom(el);
|
|
72
39
|
};
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const currentElement = getDom();
|
|
77
|
-
if (currentElement) observe(currentElement, onInternalResize);
|
|
78
|
-
onCleanup(() => {
|
|
79
|
-
if (currentElement) unobserve(currentElement, onInternalResize);
|
|
80
|
-
});
|
|
81
|
-
}, {
|
|
82
|
-
immediate: true,
|
|
83
|
-
flush: "post"
|
|
40
|
+
const onCollectionResize = inject(CollectionContext, () => {});
|
|
41
|
+
useResizeObserver(computed(() => props.disabled), wrapperRef, (...args) => props?.onResize?.(...args), (size, element) => {
|
|
42
|
+
onCollectionResize?.(size, element, props.data);
|
|
84
43
|
});
|
|
85
44
|
expose({ getDom });
|
|
86
45
|
return () => {
|
package/dist/index.cjs
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_Collection = require("./Collection.cjs");
|
|
4
7
|
const require_observerUtil = require("./utils/observerUtil.cjs");
|
|
8
|
+
const require_useResizeObserver = require("./useResizeObserver.cjs");
|
|
5
9
|
const require_index = require("./SingleObserver/index.cjs");
|
|
6
10
|
let vue = require("vue");
|
|
7
|
-
let
|
|
8
|
-
let
|
|
11
|
+
let _v_c_util = require("@v-c/util");
|
|
12
|
+
let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
9
13
|
function _isSlot(s) {
|
|
10
14
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
|
|
11
15
|
}
|
|
@@ -29,10 +33,10 @@ var ResizeObserver = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
29
33
|
},
|
|
30
34
|
setup(props, { slots }) {
|
|
31
35
|
return () => {
|
|
32
|
-
const childNodes = (0,
|
|
36
|
+
const childNodes = (0, _v_c_util_dist_props_util.filterEmpty)(slots.default?.() ?? []).filter(Boolean);
|
|
33
37
|
if (process.env.NODE_ENV !== "production") {
|
|
34
|
-
if (childNodes.length > 1) (0,
|
|
35
|
-
else if (childNodes.length === 0) (0,
|
|
38
|
+
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.");
|
|
39
|
+
else if (childNodes.length === 0) (0, _v_c_util.warning)(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
|
|
36
40
|
}
|
|
37
41
|
return childNodes.map((child, index) => {
|
|
38
42
|
const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
|
|
@@ -45,3 +49,4 @@ ResizeObserver.Collection = require_Collection.Collection;
|
|
|
45
49
|
var src_default = ResizeObserver;
|
|
46
50
|
exports._rs = require_observerUtil._rs;
|
|
47
51
|
exports.default = src_default;
|
|
52
|
+
exports.useResizeObserver = require_useResizeObserver.default;
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Collection } from "./Collection.js";
|
|
2
2
|
import { _rs } from "./utils/observerUtil.js";
|
|
3
|
+
import useResizeObserver from "./useResizeObserver.js";
|
|
3
4
|
import SingleObserver_default from "./SingleObserver/index.js";
|
|
4
5
|
import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
|
|
5
6
|
import { warning } from "@v-c/util";
|
|
@@ -27,7 +28,7 @@ var ResizeObserver = /* @__PURE__ */ defineComponent({
|
|
|
27
28
|
},
|
|
28
29
|
setup(props, { slots }) {
|
|
29
30
|
return () => {
|
|
30
|
-
const childNodes = filterEmpty(slots.default?.() ?? []);
|
|
31
|
+
const childNodes = filterEmpty(slots.default?.() ?? []).filter(Boolean);
|
|
31
32
|
if (process.env.NODE_ENV !== "production") {
|
|
32
33
|
if (childNodes.length > 1) warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
|
|
33
34
|
else if (childNodes.length === 0) warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
|
|
@@ -41,4 +42,4 @@ var ResizeObserver = /* @__PURE__ */ defineComponent({
|
|
|
41
42
|
});
|
|
42
43
|
ResizeObserver.Collection = Collection;
|
|
43
44
|
var src_default = ResizeObserver;
|
|
44
|
-
export { _rs, src_default as default };
|
|
45
|
+
export { _rs, src_default as default, useResizeObserver };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
5
|
+
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
6
|
+
const require_observerUtil = require("./utils/observerUtil.cjs");
|
|
7
|
+
let vue = require("vue");
|
|
8
|
+
function useResizeObserver(enabled, getTarget, onDelayResize, onSyncResize) {
|
|
9
|
+
const sizeRef = (0, vue.shallowRef)({
|
|
10
|
+
width: -1,
|
|
11
|
+
height: -1,
|
|
12
|
+
offsetWidth: -1,
|
|
13
|
+
offsetHeight: -1
|
|
14
|
+
});
|
|
15
|
+
const onInternalResize = (target) => {
|
|
16
|
+
const { width, height } = target.getBoundingClientRect();
|
|
17
|
+
const { offsetWidth, offsetHeight } = target;
|
|
18
|
+
const fixedWidth = Math.floor(width);
|
|
19
|
+
const fixedHeight = Math.floor(height);
|
|
20
|
+
if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
|
|
21
|
+
const size = {
|
|
22
|
+
width: fixedWidth,
|
|
23
|
+
height: fixedHeight,
|
|
24
|
+
offsetWidth,
|
|
25
|
+
offsetHeight
|
|
26
|
+
};
|
|
27
|
+
sizeRef.value = size;
|
|
28
|
+
const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
|
|
29
|
+
const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
|
|
30
|
+
const sizeInfo = {
|
|
31
|
+
...size,
|
|
32
|
+
offsetWidth: mergedOffsetWidth,
|
|
33
|
+
offsetHeight: mergedOffsetHeight
|
|
34
|
+
};
|
|
35
|
+
onSyncResize?.(sizeInfo, target);
|
|
36
|
+
Promise.resolve().then(() => {
|
|
37
|
+
onDelayResize?.(sizeInfo, target);
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
(0, vue.watch)([enabled, getTarget], (_, _o, onCleanup) => {
|
|
42
|
+
const target = typeof getTarget === "function" ? getTarget() : (0, vue.unref)(getTarget);
|
|
43
|
+
if (target && enabled) {
|
|
44
|
+
require_observerUtil.observe(target, onInternalResize);
|
|
45
|
+
onCleanup(() => {
|
|
46
|
+
if (target) require_observerUtil.unobserve(target, onInternalResize);
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}, {
|
|
50
|
+
immediate: true,
|
|
51
|
+
flush: "post"
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
exports.default = useResizeObserver;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { observe, unobserve } from "./utils/observerUtil.js";
|
|
2
|
+
import { shallowRef, unref, watch } from "vue";
|
|
3
|
+
function useResizeObserver(enabled, getTarget, onDelayResize, onSyncResize) {
|
|
4
|
+
const sizeRef = shallowRef({
|
|
5
|
+
width: -1,
|
|
6
|
+
height: -1,
|
|
7
|
+
offsetWidth: -1,
|
|
8
|
+
offsetHeight: -1
|
|
9
|
+
});
|
|
10
|
+
const onInternalResize = (target) => {
|
|
11
|
+
const { width, height } = target.getBoundingClientRect();
|
|
12
|
+
const { offsetWidth, offsetHeight } = target;
|
|
13
|
+
const fixedWidth = Math.floor(width);
|
|
14
|
+
const fixedHeight = Math.floor(height);
|
|
15
|
+
if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
|
|
16
|
+
const size = {
|
|
17
|
+
width: fixedWidth,
|
|
18
|
+
height: fixedHeight,
|
|
19
|
+
offsetWidth,
|
|
20
|
+
offsetHeight
|
|
21
|
+
};
|
|
22
|
+
sizeRef.value = size;
|
|
23
|
+
const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
|
|
24
|
+
const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
|
|
25
|
+
const sizeInfo = {
|
|
26
|
+
...size,
|
|
27
|
+
offsetWidth: mergedOffsetWidth,
|
|
28
|
+
offsetHeight: mergedOffsetHeight
|
|
29
|
+
};
|
|
30
|
+
onSyncResize?.(sizeInfo, target);
|
|
31
|
+
Promise.resolve().then(() => {
|
|
32
|
+
onDelayResize?.(sizeInfo, target);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
watch([enabled, getTarget], (_, _o, onCleanup) => {
|
|
37
|
+
const target = typeof getTarget === "function" ? getTarget() : unref(getTarget);
|
|
38
|
+
if (target && enabled) {
|
|
39
|
+
observe(target, onInternalResize);
|
|
40
|
+
onCleanup(() => {
|
|
41
|
+
if (target) unobserve(target, onInternalResize);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
}, {
|
|
45
|
+
immediate: true,
|
|
46
|
+
flush: "post"
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
export { useResizeObserver as default };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
1
2
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
2
3
|
let resize_observer_polyfill = require("resize-observer-polyfill");
|
|
3
4
|
resize_observer_polyfill = require_rolldown_runtime.__toESM(resize_observer_polyfill);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/resize-observer",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.4",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"resize-observer-polyfill": "^1.5.1",
|
|
20
|
-
"@v-c/util": "^1.0.
|
|
20
|
+
"@v-c/util": "^1.0.8"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "vite build",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ResizeObserverProps
|
|
1
|
+
import type { ResizeObserverProps } from '../index.tsx'
|
|
2
2
|
import findDOMNode from '@v-c/util/dist/Dom/findDOMNode'
|
|
3
3
|
import { filterEmpty } from '@v-c/util/dist/props-util'
|
|
4
4
|
import {
|
|
@@ -8,102 +8,46 @@ import {
|
|
|
8
8
|
inject,
|
|
9
9
|
isVNode,
|
|
10
10
|
shallowRef,
|
|
11
|
-
watch,
|
|
12
11
|
} from 'vue'
|
|
13
12
|
import { CollectionContext } from '../Collection'
|
|
14
|
-
import
|
|
13
|
+
import useResizeObserver from '../useResizeObserver.ts'
|
|
15
14
|
import DomWrapper from './DomWrapper'
|
|
16
15
|
|
|
17
16
|
const SingleObserver = defineComponent<ResizeObserverProps>({
|
|
18
17
|
name: 'SingleObserver',
|
|
19
18
|
inheritAttrs: false,
|
|
20
19
|
setup(props, { expose, slots }) {
|
|
21
|
-
const elementRef = shallowRef<HTMLElement>()
|
|
22
20
|
const wrapperRef = shallowRef()
|
|
21
|
+
|
|
22
|
+
const getDom = (el: any): any => {
|
|
23
|
+
const dom = findDOMNode(el)
|
|
24
|
+
// 判断当前的dom是不是一个text元素
|
|
25
|
+
if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && (dom as any).nextElementSibling)
|
|
26
|
+
return (dom as any).nextElementSibling as HTMLElement
|
|
27
|
+
return dom
|
|
28
|
+
}
|
|
23
29
|
const setWrapperRef = (el: any) => {
|
|
30
|
+
const _wrapper = el
|
|
24
31
|
if (el?.elementEl && typeof el.elementEl === 'object') {
|
|
25
|
-
|
|
32
|
+
_wrapper.value = el.elementEl
|
|
26
33
|
}
|
|
27
34
|
else if (el?.__$el && typeof el.__$el === 'object') {
|
|
28
|
-
|
|
35
|
+
_wrapper.value = el.__$el
|
|
29
36
|
}
|
|
30
37
|
else {
|
|
31
|
-
|
|
38
|
+
_wrapper.value = el
|
|
32
39
|
}
|
|
40
|
+
wrapperRef.value = getDom(el)
|
|
33
41
|
}
|
|
34
42
|
const onCollectionResize = inject(CollectionContext, () => {})
|
|
35
|
-
const sizeRef = shallowRef<SizeInfo>({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 })
|
|
36
|
-
const getDom = () => {
|
|
37
|
-
const dom = findDOMNode(elementRef as any)
|
|
38
|
-
|| (elementRef.value && typeof elementRef.value === 'object' ? findDOMNode((elementRef.value as any).nativeElement) : null)
|
|
39
|
-
|| findDOMNode(wrapperRef.value)
|
|
40
|
-
// 判断当前的dom是不是一个text元素
|
|
41
|
-
if (dom && dom.nodeType === 3 && dom.nextElementSibling)
|
|
42
|
-
return dom.nextElementSibling as HTMLElement
|
|
43
|
-
return dom
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
const onInternalResize = (target: HTMLElement) => {
|
|
47
|
-
const { onResize, data } = props
|
|
48
|
-
const { width, height } = target.getBoundingClientRect()
|
|
49
|
-
const { offsetHeight, offsetWidth } = target
|
|
50
|
-
/**
|
|
51
|
-
* Resize observer trigger when content size changed.
|
|
52
|
-
* In most case we just care about element size,
|
|
53
|
-
* let's use `boundary` instead of `contentRect` here to avoid shaking.
|
|
54
|
-
*/
|
|
55
|
-
const fixedWidth = Math.floor(width)
|
|
56
|
-
const fixedHeight = Math.floor(height)
|
|
57
|
-
if (
|
|
58
|
-
sizeRef.value.width !== fixedWidth
|
|
59
|
-
|| sizeRef.value.height !== fixedHeight
|
|
60
|
-
|| sizeRef.value.offsetWidth !== offsetWidth
|
|
61
|
-
|| sizeRef.value.offsetHeight !== offsetHeight
|
|
62
|
-
) {
|
|
63
|
-
const size = { width: fixedWidth, height: fixedHeight, offsetWidth, offsetHeight }
|
|
64
|
-
sizeRef.value = size
|
|
65
43
|
|
|
66
|
-
// IE is strange, right?
|
|
67
|
-
const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth
|
|
68
|
-
const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight
|
|
69
|
-
|
|
70
|
-
const sizeInfo = {
|
|
71
|
-
...size,
|
|
72
|
-
offsetWidth: mergedOffsetWidth,
|
|
73
|
-
offsetHeight: mergedOffsetHeight,
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// Let collection know what happened
|
|
77
|
-
onCollectionResize?.(sizeInfo, target, data)
|
|
78
|
-
|
|
79
|
-
if (onResize) {
|
|
80
|
-
// defer the callback but not defer to next frame
|
|
81
|
-
Promise.resolve().then(() => {
|
|
82
|
-
onResize(sizeInfo, target)
|
|
83
|
-
})
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
44
|
const disabled = computed(() => props.disabled)
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
const currentElement = getDom() as HTMLElement
|
|
96
|
-
if (currentElement) {
|
|
97
|
-
observe(currentElement, onInternalResize as any)
|
|
98
|
-
}
|
|
99
|
-
onCleanup(() => {
|
|
100
|
-
if (currentElement)
|
|
101
|
-
unobserve(currentElement, onInternalResize as any)
|
|
102
|
-
})
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
immediate: true,
|
|
106
|
-
flush: 'post',
|
|
45
|
+
useResizeObserver(
|
|
46
|
+
disabled,
|
|
47
|
+
wrapperRef,
|
|
48
|
+
(...args) => props?.onResize?.(...args),
|
|
49
|
+
(size, element) => {
|
|
50
|
+
onCollectionResize?.(size, element, props.data)
|
|
107
51
|
},
|
|
108
52
|
)
|
|
109
53
|
expose({
|
package/src/index.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import { Collection } from './Collection.tsx'
|
|
|
5
5
|
import SingleObserver from './SingleObserver'
|
|
6
6
|
import { _rs } from './utils/observerUtil'
|
|
7
7
|
|
|
8
|
+
export { default as useResizeObserver } from './useResizeObserver'
|
|
8
9
|
const INTERNAL_PREFIX_KEY = 'vc-observer-key'
|
|
9
10
|
export {
|
|
10
11
|
/** @private Test only for mock trigger resize event */
|
|
@@ -31,7 +32,7 @@ export interface ResizeObserverProps {
|
|
|
31
32
|
const ResizeObserver = defineComponent<ResizeObserverProps>({
|
|
32
33
|
setup(props, { slots }) {
|
|
33
34
|
return () => {
|
|
34
|
-
const childNodes = filterEmpty(slots.default?.() ?? [])
|
|
35
|
+
const childNodes = filterEmpty(slots.default?.() ?? []).filter(Boolean)
|
|
35
36
|
if (process.env.NODE_ENV !== 'production') {
|
|
36
37
|
if (childNodes.length > 1) {
|
|
37
38
|
warning(
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import type { Ref } from 'vue'
|
|
2
|
+
import type { OnResize } from './index'
|
|
3
|
+
import { shallowRef, unref, watch } from 'vue'
|
|
4
|
+
import { observe, unobserve } from './utils/observerUtil'
|
|
5
|
+
|
|
6
|
+
export default function useResizeObserver(
|
|
7
|
+
enabled: Ref<boolean | undefined>,
|
|
8
|
+
getTarget: Ref<Element | undefined> | (() => HTMLElement),
|
|
9
|
+
onDelayResize?: OnResize,
|
|
10
|
+
onSyncResize?: OnResize,
|
|
11
|
+
) {
|
|
12
|
+
// ============================= Size =============================
|
|
13
|
+
const sizeRef = shallowRef({
|
|
14
|
+
width: -1,
|
|
15
|
+
height: -1,
|
|
16
|
+
offsetWidth: -1,
|
|
17
|
+
offsetHeight: -1,
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
// ============================= Size =============================
|
|
21
|
+
const onInternalResize = (target: HTMLElement) => {
|
|
22
|
+
const { width, height } = target.getBoundingClientRect()
|
|
23
|
+
const { offsetWidth, offsetHeight } = target
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Resize observer trigger when content size changed.
|
|
27
|
+
* In most case we just care about element size,
|
|
28
|
+
* let's use `boundary` instead of `contentRect` here to avoid shaking.
|
|
29
|
+
*/
|
|
30
|
+
const fixedWidth = Math.floor(width)
|
|
31
|
+
const fixedHeight = Math.floor(height)
|
|
32
|
+
|
|
33
|
+
if (
|
|
34
|
+
sizeRef.value.width !== fixedWidth
|
|
35
|
+
|| sizeRef.value.height !== fixedHeight
|
|
36
|
+
|| sizeRef.value.offsetWidth !== offsetWidth
|
|
37
|
+
|| sizeRef.value.offsetHeight !== offsetHeight
|
|
38
|
+
) {
|
|
39
|
+
const size = { width: fixedWidth, height: fixedHeight, offsetWidth, offsetHeight }
|
|
40
|
+
sizeRef.value = size
|
|
41
|
+
|
|
42
|
+
// IE is strange, right?
|
|
43
|
+
const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth
|
|
44
|
+
const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight
|
|
45
|
+
|
|
46
|
+
const sizeInfo = {
|
|
47
|
+
...size,
|
|
48
|
+
offsetWidth: mergedOffsetWidth,
|
|
49
|
+
offsetHeight: mergedOffsetHeight,
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Call the callback immediately, let the caller decide whether to defer
|
|
53
|
+
// onResize(sizeInfo, target);
|
|
54
|
+
onSyncResize?.(sizeInfo, target)
|
|
55
|
+
|
|
56
|
+
// defer the callback but not defer to next frame
|
|
57
|
+
Promise.resolve().then(() => {
|
|
58
|
+
onDelayResize?.(sizeInfo, target)
|
|
59
|
+
})
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Dynamic observe
|
|
64
|
+
watch(
|
|
65
|
+
[enabled, getTarget],
|
|
66
|
+
(_, _o, onCleanup) => {
|
|
67
|
+
const target = typeof getTarget === 'function' ? getTarget() : unref(getTarget)
|
|
68
|
+
if (target && enabled) {
|
|
69
|
+
observe(target, onInternalResize as any)
|
|
70
|
+
onCleanup(() => {
|
|
71
|
+
if (target) {
|
|
72
|
+
unobserve(target, onInternalResize as any)
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
immediate: true,
|
|
79
|
+
flush: 'post',
|
|
80
|
+
},
|
|
81
|
+
)
|
|
82
|
+
}
|