8000 feat(useResizeObserver): added `vResizeObserver` directive (#4008) · vueuse/vueuse@d431087 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit d431087

Browse files
pkc918pkc918
authored
feat(useResizeObserver): added vResizeObserver directive (#4008)
1 parent 83c4181 commit d431087

File tree

4 files changed

+117
-0
lines changed

4 files changed

+117
-0
lines changed

‎packages/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export * from '../core/usePreferredContrast/component'
4444
export * from '../core/usePreferredDark/component'
4545
export * from '../core/usePreferredLanguages/component'
4646
export * from '../core/usePreferredReducedMotion/component'
47+
export * from '../core/useResizeObserver/directive'
4748
export * from '../core/useScreenSafeArea/component'
4849
export * from '../core/useScroll/directive'
4950
export * from '../core/useScrollLock/directive'

‎packages/core/useResizeObserver/directive.test.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { defineComponent } from 'vue-demi'
2+
import type { VueWrapper } from '@vue/test-utils'
3+
import { mount } from '@vue/test-utils'
4+
import { beforeEach, describe, expect, it, vi } from 'vitest'
5+
import { vResizeObserver } from './directive'
6+
import type { UseResizeObserverOptions } from '.'
7+
8+
const App = defineComponent({
9+
props: {
10+
onResizeObserver: {
11+
type: Function,
12+
required: true,
13+
},
14+
options: {
15+
type: Object,
16+
required: false,
17+
},
18+
},
19+
20+
template: `<template>
21+
<div v-if="options" v-resize-observer="[onResizeObserver,options]">Hello world!</div>
22+
<div v-else v-resize-observer="onResizeObserver">Hello world!</div>
23+
</template>
24+
`,
25+
})
26+
27+
describe('vResizeObserver', () => {
28+
let onResizeObserver = vi.fn()
29+
let wrapper: VueWrapper<any>
30+
31+
describe('given no options', () => {
32+
beforeEach(() => {
33+
onResizeObserver = vi.fn()
34+
wrapper = mount(App, {
35+
props: {
36+
onResizeObserver,
37+
},
38+
global: {
39+
directives: {
40+
'resize-observer': vResizeObserver,
41+
},
42+
},
43+
})
44+
})
45+
46+
it('should be defined', () => {
47+
expect(wrapper).toBeDefined()
48+
})
49+
})
50+
51+
describe('given options', () => {
52+
beforeEach(() => {
53+
onResizeObserver = vi.fn()
54+
const options: UseResizeObserverOptions = {
55+
box: 'border-box',
56+
}
57+
wrapper = mount(App, {
58+
props: {
59+
onResizeObserver,
60+
options,
61+
},
62+
global: {
63+
directives: {
64+
'resize-observer': vResizeObserver,
65+
},
66+
},
67+
})
68+
})
69+
70+
it('should be defined', () => {
71+
expect(wrapper).toBeDefined()
72+
})
73+
})
74+
})

‎packages/core/useResizeObserver/directive.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { directiveHooks } from '@vueuse/shared'
2+
import type { ObjectDirective } from 'vue-demi'
3+
import { useResizeObserver } from '.'
4+
import type { ResizeObserverCallback, UseResizeObserverOptions } from '.'
5+
6+
type BindingValueFunction = ResizeObserverCallback
7+
8+
type BindingValueArray = [BindingValueFunction, UseResizeObserverOptions]
9+
10+
export const vResizeObserver: ObjectDirective<
11+
HTMLElement,
12+
BindingValueFunction | BindingValueArray
13+
> = {
14+
[directiveHooks.mounted](el, binding) {
15+
if (typeof binding.value === 'function')
16+
useResizeObserver(el, binding.value)
17+
else
18+
useResizeObserver(el, ...binding.value)
19+
},
20+
}

‎packages/core/useResizeObserver/index.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,26 @@ useResizeObserver(el, (entries) => {
3030
</template>
3131
```
3232

33+
## Directive Usage
34+
35+
```vue
36+
<script setup lang="ts">
37+
import { vResizeObserver } from '@vueuse/components'
38+
39+
const text = ref('')
40+
41+
function onResizeObserver(entries) {
42+
const [entry] = entries
43+
const { width, height } = entry.contentRect
44+
text.value = `width: ${width}, height: ${height}`
45+
}
46+
</script>
47+
48+
<template>
49+
<div v-resize-observer="onResizeObserver">
50+
{{ text }}
51+
</div>
52+
</template>
53+
```
54+
3355
[ResizeObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

0 commit comments

Comments
 (0)
0