From 7bce3cab0a3ad16de79c57d836c0d26b61d083bb Mon Sep 17 00:00:00 2001 From: xiongweijian Date: Tue, 30 Aug 2022 15:09:42 +0800 Subject: [PATCH 1/5] fix(useElementSize): support specify `boxSizing` --- packages/core/useElementSize/index.ts | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/core/useElementSize/index.ts b/packages/core/useElementSize/index.ts index fc940e958db..90d6c8f9d7b 100644 --- a/packages/core/useElementSize/index.ts +++ b/packages/core/useElementSize/index.ts @@ -4,6 +4,17 @@ import type { UseResizeObserverOptions } from '../useResizeObserver' import { useResizeObserver } from '../useResizeObserver' import { unrefElement } from '../unrefElement' +export interface UseElementSizeOptions extends UseResizeObserverOptions { + /** + * + * Indicates how the total width and height of an element is calculated. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing + * @default 'borderBox' + */ + boxSizing?: 'borderBox' | 'contentBox' +} + export interface ElementSize { width: number height: number @@ -20,16 +31,26 @@ export interface ElementSize { export function useElementSize( target: MaybeComputedElementRef, initialSize: ElementSize = { width: 0, height: 0 }, - options: UseResizeObserverOptions = {}, + options: UseElementSizeOptions = {}, ) { + const { boxSizing = 'borderBox' } = options + const width = ref(initialSize.width) const height = ref(initialSize.height) useResizeObserver( target, ([entry]) => { - width.value = entry.contentRect.width - height.value = entry.contentRect.height + const boxSize = boxSizing === 'borderBox' ? entry.borderBoxSize : entry.contentBoxSize + if (boxSize) { + width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0) + height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0) + } + else { + // fallback + width.value = entry.contentRect.width + height.value = entry.contentRect.height + } }, options, ) From abf66c2cda1404513db99a52d816c5995f240fd8 Mon Sep 17 00:00:00 2001 From: xiongweijian Date: Tue, 30 Aug 2022 16:06:42 +0800 Subject: [PATCH 2/5] (useElementSize): support `box` sizing --- packages/core/useElementSize/index.ts | 8 +++++--- packages/core/useResizeObserver/index.ts | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/core/useElementSize/index.ts b/packages/core/useElementSize/index.ts index 90d6c8f9d7b..7a8fe14892f 100644 --- a/packages/core/useElementSize/index.ts +++ b/packages/core/useElementSize/index.ts @@ -33,15 +33,17 @@ export function useElementSize( initialSize: ElementSize = { width: 0, height: 0 }, options: UseElementSizeOptions = {}, ) { - const { boxSizing = 'borderBox' } = options - + const { box = 'content-box' } = options const width = ref(initialSize.width) const height = ref(initialSize.height) useResizeObserver( target, ([entry]) => { - const boxSize = boxSizing === 'borderBox' ? entry.borderBoxSize : entry.contentBoxSize + const boxSize = box === 'border-box' + ? entry.borderBoxSize + : (box === 'content-box' ? entry.contentBoxSize : entry.devicePixelContentBoxSize) + if (boxSize) { width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0) height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0) diff --git a/packages/core/useResizeObserver/index.ts b/packages/core/useResizeObserver/index.ts index 2acb815e2c8..c4681371011 100644 --- a/packages/core/useResizeObserver/index.ts +++ b/packages/core/useResizeObserver/index.ts @@ -24,11 +24,11 @@ export type ResizeObserverCallback = (entries: ReadonlyArray Date: Tue, 30 Aug 2022 16:30:45 +0800 Subject: [PATCH 3/5] fix(useElementSize): remove redundant interface --- packages/core/useElementSize/index.ts | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/core/useElementSize/index.ts b/packages/core/useElementSize/index.ts index 7a8fe14892f..9b2915bd287 100644 --- a/packages/core/useElementSize/index.ts +++ b/packages/core/useElementSize/index.ts @@ -4,17 +4,6 @@ import type { UseResizeObserverOptions } from '../useResizeObserver' import { useResizeObserver } from '../useResizeObserver' import { unrefElement } from '../unrefElement' -export interface UseElementSizeOptions extends UseResizeObserverOptions { - /** - * - * Indicates how the total width and height of an element is calculated. - * - * @see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing - * @default 'borderBox' - */ - boxSizing?: 'borderBox' | 'contentBox' -} - export interface ElementSize { width: number height: number @@ -31,7 +20,7 @@ export interface ElementSize { export function useElementSize( target: MaybeComputedElementRef, initialSize: ElementSize = { width: 0, height: 0 }, - options: UseElementSizeOptions = {}, + options: UseResizeObserverOptions = {}, ) { const { box = 'content-box' } = options const width = ref(initialSize.width) From 8a94d1b7e56a0169b158a665844274d28c9893e9 Mon Sep 17 00:00:00 2001 From: xiongweijian Date: Tue, 30 Aug 2022 16:32:30 +0800 Subject: [PATCH 4/5] fix(useElementSize): update demo --- packages/core/useElementSize/demo.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/useElementSize/demo.vue b/packages/core/useElementSize/demo.vue index 49aa3148939..847df27c648 100644 --- a/packages/core/useElementSize/demo.vue +++ b/packages/core/useElementSize/demo.vue @@ -4,7 +4,9 @@ import { stringify } from '@vueuse/docs-utils' import { useElementSize } from '@vueuse/core' const el = ref(null) -const size = reactive(useElementSize(el)) +const size = reactive(useElementSize(el, { width: 0, height: 0 }, { + box: 'border-box', +})) const text = stringify(size) From f613046043d8b98ddb1905b20d91287a9b7676c8 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Mon, 5 Sep 2022 21:27:26 +0800 Subject: [PATCH 5/5] chore: formatting --- packages/core/useElementSize/demo.vue | 10 +++++++--- packages/core/useElementSize/index.ts | 17 ++++++++++++----- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/core/useElementSize/demo.vue b/packages/core/useElementSize/demo.vue index 847df27c648..14a76688696 100644 --- a/packages/core/useElementSize/demo.vue +++ b/packages/core/useElementSize/demo.vue @@ -4,9 +4,13 @@ import { stringify } from '@vueuse/docs-utils' import { useElementSize } from '@vueuse/core' const el = ref(null) -const size = reactive(useElementSize(el, { width: 0, height: 0 }, { - box: 'border-box', -})) +const size = reactive( + useElementSize( + el, + { width: 0, height: 0 }, + { box: 'border-box' }, + ), +) const text = stringify(size) diff --git a/packages/core/useElementSize/index.ts b/packages/core/useElementSize/index.ts index 9b2915bd287..32d313dffd5 100644 --- a/packages/core/useElementSize/index.ts +++ b/packages/core/useElementSize/index.ts @@ -31,7 +31,9 @@ export function useElementSize( ([entry]) => { const boxSize = box === 'border-box' ? entry.borderBoxSize - : (box === 'content-box' ? entry.contentBoxSize : entry.devicePixelContentBoxSize) + : box === 'content-box' + ? entry.contentBoxSize + : entry.devicePixelContentBoxSize if (boxSize) { width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0) @@ -45,10 +47,15 @@ export function useElementSize( }, options, ) - watch(() => unrefElement(target), (ele) => { - width.value = ele ? initialSize.width : 0 - height.value = ele ? initialSize.height : 0 - }) + + watch( + () => unrefElement(target), + (ele) => { + width.value = ele ? initialSize.width : 0 + height.value = ele ? initialSize.height : 0 + }, + ) + return { width, height,