diff --git a/package.json b/package.json index 00e4ebae5ae..b768131dd1d 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "@vueuse/monorepo", "type": "module", - "version": "13.4.0", + "version": "13.5.0", "private": true, - "packageManager": "pnpm@10.12.1", + "packageManager": "pnpm@10.12.4", "description": "Collection of essential Vue Composition Utilities", "author": "Anthony Fu", "license": "MIT", diff --git a/packages/.test/mount.ts b/packages/.test/mount.ts index a4fd0e1b455..d15da2ae594 100644 --- a/packages/.test/mount.ts +++ b/packages/.test/mount.ts @@ -41,7 +41,7 @@ export function useInjectedSetup(setup: () => V) { provide(Key, shallowRef(1)) }, render() { - return h('div', []) + return h(Comp) }, }) diff --git a/packages/components/package.json b/packages/components/package.json index ed52c726076..65df0b72e1d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@vueuse/components", "type": "module", - "version": "13.4.0", + "version": "13.5.0", "description": "Renderless components for VueUse", "author": "Jacob Clevenger", "license": "MIT", diff --git a/packages/core/computedInject/index.test.ts b/packages/core/computedInject/index.test.ts index a501ec974b9..ed2a100c152 100644 --- a/packages/core/computedInject/index.test.ts +++ b/packages/core/computedInject/index.test.ts @@ -23,4 +23,24 @@ describe('computedInject', () => { expect(anotherComputedNum.value).toBe(11) }) }) + + it('should pass oldValue to computed getter', () => { + useInjectedSetup(() => { + const curValue = shallowRef(0) + const oldValue = shallowRef() + + const computedNum = computedInject(Key, (source, previous) => { + oldValue.value = previous + return curValue.value + (source?.value ?? 0) + }) + + expect(computedNum.value).toBe(1) + expect(oldValue.value).toBeUndefined() + + curValue.value = 1 + + expect(computedNum.value).toBe(2) + expect(oldValue.value).toBe(1) + }) + }) }) diff --git a/packages/core/computedInject/index.ts b/packages/core/computedInject/index.ts index 552ee1f1615..4ac108cab09 100644 --- a/packages/core/computedInject/index.ts +++ b/packages/core/computedInject/index.ts @@ -1,8 +1,8 @@ import type { ComputedRef, InjectionKey } from 'vue' import { computed, inject } from 'vue' -export type ComputedInjectGetter = (source: T | undefined, ctx?: any) => K -export type ComputedInjectGetterWithDefault = (source: T, ctx?: any) => K +export type ComputedInjectGetter = (source: T | undefined, oldValue?: K) => K +export type ComputedInjectGetterWithDefault = (source: T, oldValue?: K) => K export type ComputedInjectSetter = (v: T) => void export interface WritableComputedInjectOptions { @@ -48,11 +48,11 @@ export function computedInject( source = inject(key, defaultSource, treatDefaultAsFactory) as T if (typeof options === 'function') { - return computed(ctx => options(source, ctx)) + return computed(oldValue => options(source, oldValue as K | undefined)) } else { return computed({ - get: ctx => options.get(source, ctx), + get: oldValue => options.get(source, oldValue as K | undefined), set: options.set, }) } diff --git a/packages/core/onClickOutside/index.md b/packages/core/onClickOutside/index.md index 38405ea5845..a0a061fb4bc 100644 --- a/packages/core/onClickOutside/index.md +++ b/packages/core/onClickOutside/index.md @@ -44,6 +44,19 @@ useEventListener('pointermove', (e) => { }) ``` +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. + +```ts +const ignoreElRef = useTemplateRef('ignoreEl') +const ignoreElSelector = '.ignore-el' + +onClickOutside( + target, + event => console.log(event), + { ignore: [ignoreElRef, ignoreElSelector] }, +) +``` + ## Component Usage ```vue diff --git a/packages/core/onClickOutside/index.ts b/packages/core/onClickOutside/index.ts index a907fd59261..083accee30d 100644 --- a/packages/core/onClickOutside/index.ts +++ b/packages/core/onClickOutside/index.ts @@ -10,7 +10,8 @@ import { useEventListener } from '../useEventListener' export interface OnClickOutsideOptions extends ConfigurableWindow { /** - * List of elements that should not trigger the event. + * List of elements that should not trigger the event, + * provided as Refs or CSS Selectors. */ ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]> /** @@ -84,8 +85,8 @@ export function onClickOutside( if (isIOS && !_iOSWorkaround) { _iOSWorkaround = true const listenerOptions = { passive: true } - // Not using useEventListener because this event handlers must not be disposed. - // See previusly linked references and https://github.com/vueuse/vueuse/issues/4724 + // Not using useEventListener because these event handlers must not be disposed. + // See previously linked references and https://github.com/vueuse/vueuse/issues/4724 Array.from(window.document.body.children) .forEach(el => el.addEventListener('click', noop, listenerOptions)) window.document.documentElement.addEventListener('click', noop, listenerOptions) diff --git a/packages/core/package.json b/packages/core/package.json index 7741a17383e..ef41db865ce 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@vueuse/core", "type": "module", - "version": "13.4.0", + "version": "13.5.0", "description": "Collection of essential Vue Composition Utilities", "author": "Anthony Fu ", "license": "MIT", diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts index 6b727d306ea..d839c640806 100644 --- a/packages/core/useColorMode/index.ts +++ b/packages/core/useColorMode/index.ts @@ -46,7 +46,7 @@ export interface UseColorModeOptions extends * * @default undefined */ - onChanged?: (mode: T | BasicColorMode, defaultHandler:((mode: T | BasicColorMode) => void)) => void + onChanged?: (mode: T | BasicColorMode, defaultHandler: ((mode: T | BasicColorMode) => void)) => void /** * Custom storage ref diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue index 19caef00c38..af1338785dd 100644 --- a/packages/core/useSpeechSynthesis/demo.vue +++ b/packages/core/useSpeechSynthesis/demo.vue @@ -6,11 +6,13 @@ const voice = deepRef(undefined as unknown as SpeechSynthe const text = shallowRef('Hello, everyone! Good morning!') const pitch = shallowRef(1) const rate = shallowRef(1) +const volume = shallowRef(1) const speech = useSpeechSynthesis(text, { voice, pitch, rate, + volume, }) let synth: SpeechSynthesis @@ -96,6 +98,14 @@ function stop() { +
+
+ +
+ +
+
+