Skip to content

Commit 1e154fb

Browse files
PeikyLiuPeikyLiu
committed
Merge branch 'useFocusTrap/updateContainerElements' of github.com:PeikyLiu/vueuse into useFocusTrap/updateContainerElements
2 parents be349a2 + db18925 commit 1e154fb

File tree

60 files changed

+2882
-2108
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2882
-2108
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "@vueuse/monorepo",
33
"type": "module",
4-
"version": "13.3.0",
4+
"version": "13.5.0",
55
"private": true,
6-
"packageManager": "pnpm@10.11.0",
6+
"packageManager": "pnpm@10.12.4",
77
"description": "Collection of essential Vue Composition Utilities",
88
"author": "Anthony Fu<https://github.com/antfu>",
99
"license": "MIT",

‎packages/.test/mount.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function useInjectedSetup<V>(setup: () => V) {
4141
provide(Key, shallowRef(1))
4242
},
4343
render() {
44-
return h('div', [])
44+
return h(Comp)
4545
},
4646
})
4747

‎packages/components/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@vueuse/components",
33
"type": "module",
4-
"version": "13.3.0",
4+
"version": "13.5.0",
55
"description": "Renderless components for VueUse",
66
"author": "Jacob Clevenger<https://github.com/wheatjs>",
77
"license": "MIT",

‎packages/core/computedInject/index.test.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,24 @@ describe('computedInject', () => {
2323
expect(anotherComputedNum.value).toBe(11)
2424
})
2525
})
26+
27+
it('should pass oldValue to computed getter', () => {
28+
useInjectedSetup(() => {
29+
const curValue = shallowRef(0)
30+
const oldValue = shallowRef()
31+
32+
const computedNum = computedInject(Key, (source, previous) => {
33+
oldValue.value = previous
34+
return curValue.value + (source?.value ?? 0)
35+
})
36+
37+
expect(computedNum.value).toBe(1)
38+
expect(oldValue.value).toBeUndefined()
39+
40+
curValue.value = 1
41+
42+
expect(computedNum.value).toBe(2)
43+
expect(oldValue.value).toBe(1)
44+
})
45+
})
2646
})

‎packages/core/computedInject/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { ComputedRef, InjectionKey } from 'vue'
22
import { computed, inject } from 'vue'
33

4-
export type ComputedInjectGetter<T, K> = (source: T | undefined, ctx?: any) => K
5-
export type ComputedInjectGetterWithDefault<T, K> = (source: T, ctx?: any) => K
4+
export type ComputedInjectGetter<T, K> = (source: T | undefined, oldValue?: K) => K
5+
export type ComputedInjectGetterWithDefault<T, K> = (source: T, oldValue?: K) => K
66
export type ComputedInjectSetter<T> = (v: T) => void
77

88
export interface WritableComputedInjectOptions<T, K> {
@@ -48,11 +48,11 @@ export function computedInject<T, K = any>(
4848
source = inject(key, defaultSource, treatDefaultAsFactory) as T
4949

5050
if (typeof options === 'function') {
51-
return computed(ctx => options(source, ctx))
51+
return computed(oldValue => options(source, oldValue as K | undefined))
5252
}
5353
else {
5454
return computed({
55-
get: ctx => options.get(source, ctx),
55+
get: oldValue => options.get(source, oldValue as K | undefined),
5656
set: options.set,
5757
})
5858
}

‎packages/core/onClickOutside/index.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,19 @@ useEventListener('pointermove', (e) => {
4444
})
4545
```
4646

47+
If you want to ignore certain elements, you can use the `ignore` option. Provide the elements to ignore as an array of Refs or CSS Selectors.
48+
49+
```ts
50+
const ignoreElRef = useTemplateRef<HTMLElement>('ignoreEl')
51+
const ignoreElSelector = '.ignore-el'
52+
53+
onClickOutside(
54+
target,
55+
event => console.log(event),
56+
{ ignore: [ignoreElRef, ignoreElSelector] },
57+
)
58+
```
59+
4760
## Component Usage
4861

4962
```vue

‎packages/core/onClickOutside/index.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { useEventListener } from '../useEventListener'
1010

1111
export interface OnClickOutsideOptions<Controls extends boolean = false> extends ConfigurableWindow {
1212
/**
13-
* List of elements that should not trigger the event.
13+
* List of elements that should not trigger the event,
14+
* provided as Refs or CSS Selectors.
1415
*/
1516
ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]>
1617
/**
@@ -84,8 +85,8 @@ export function onClickOutside(
8485
if (isIOS && !_iOSWorkaround) {
8586
_iOSWorkaround = true
8687
const listenerOptions = { passive: true }
87-
// Not using useEventListener because this event handlers must not be disposed.
88-
// See previusly linked references and https://github.com/vueuse/vueuse/issues/4724
88+
// Not using useEventListener because these event handlers must not be disposed.
89+
// See previously linked references and https://github.com/vueuse/vueuse/issues/4724
8990
Array.from(window.document.body.children)
9091
.forEach(el => el.addEventListener('click', noop, listenerOptions))
9192
window.document.documentElement.addEventListener('click', noop, listenerOptions)

‎packages/core/onLongPress/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { TimerHandle } from '@vueuse/shared'
12
import type { Position } from '../types'
23
import type { MaybeElementRef } from '../unrefElement'
34
import { computed } from 'vue'
@@ -48,7 +49,7 @@ export function onLongPress(
4849
) {
4950
const elementRef = computed(() => unrefElement(target))
5051

51-
let timeout: ReturnType<typeof setTimeout> | undefined
52+
let timeout: TimerHandle
5253
let posStart: Position | undefined
5354
let startTimestamp: number | undefined
5455
let hasLongPressed = false

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@vueuse/core",
33
"type": "module",
4-
"version": "13.3.0",
4+
"version": "13.5.0",
55
"description": "Collection of essential Vue Composition Utilities",
66
"author": "Anthony Fu <https://github.com/antfu>",
77
"license": "MIT",

‎packages/core/useAsyncState/index.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,32 @@ const { state, isReady, isLoading } = useAsyncState(
1919
{ id: null },
2020
)
2121
```
22+
23+
### Manually trigger the async function
24+
25+
You can also trigger it manually. This is useful when you want to control when the async function is executed.
26+
27+
```vue
28+
<script setup lang="ts">
29+
import { useAsyncState } from '@vueuse/core'
30+
31+
const { state, execute, executeImmediate } = useAsyncState(action, '', { immediate: false })
32+
33+
async function action(event) {
34+
await new Promise(resolve => setTimeout(resolve, 500))
35+
return `${event.target.textContent} clicked!`
36+
}
37+
</script>
38+
39+
<template>
40+
<p>State: {{ state }}</p>
41+
42+
<button class="button" @click="executeImmediate">
43+
Execute now
44+
</button>
45+
46+
<button class="ml-2 button" @click="event => execute(500, event.target)">
47+
Execute with delay
48+
</button>
49+
</template>
50+
```

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy