feat(usePreferredReducedTransparency): add new function (#4201)

Co-authored-by: Anthony Fu <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>

packages/components/index.ts

@@ -44,6 +44,7 @@ export * from '../core/usePreferredContrast/component'
 export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
 export * from '../core/usePreferredReducedMotion/component'
+export * from '../core/usePreferredReducedTransparency/component'
 export * from '../core/useResizeObserver/directive'
 export * from '../core/useScreenSafeArea/component'
 export * from '../core/useScroll/directive'

packages/core/index.ts

@@ -93,6 +93,7 @@ export * from './usePreferredContrast'
 export * from './usePreferredDark'
 export * from './usePreferredLanguages'
 export * from './usePreferredReducedMotion'
+export * from './usePreferredReducedTransparency'
 export * from './usePrevious'
 export * from './useRafFn'
 export * from './useRefHistory'

packages/core/usePreferredReducedTransparency/component.ts

@@ -0,0 +1,16 @@
+import { usePreferredReducedTransparency } from '@vueuse/core'
+import { defineComponent, reactive } from 'vue'
+
+export const UsePreferredReducedTransparency = /* #__PURE__ */ defineComponent({
+  name: 'UsePreferredReducedTransparency',
+  setup(props, { slots }) {
+    const data = reactive({
+      transparency: usePreferredReducedTransparency(),
+    })
+
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+})

packages/core/usePreferredReducedTransparency/demo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { usePreferredReducedTransparency } from '@vueuse/core'
+
+const transparency = usePreferredReducedTransparency()
+</script>
+
+<template>
+  <note class="mb-2">
+    Preferred Transparency:
+  </note>
+  <code>{{ transparency }}</code>
+</template>

packages/core/usePreferredReducedTransparency/index.md

@@ -0,0 +1,25 @@
+---
+category: Browser
+---
+
+# usePreferredReducedTransparency
+
+Reactive [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query.
+
+## Usage
+
+```js
+import { usePreferredReducedTransparency } from '@vueuse/core'
+
+const preferredTransparency = usePreferredReducedTransparency()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredReducedTransparency v-slot="{ transparency }">
+    Preferred Reduced transparency: {{ transparency }}
+  </UsePreferredReducedTransparency>
+</template>
+```

packages/core/usePreferredReducedTransparency/index.ts

@@ -0,0 +1,21 @@
+import type { ConfigurableWindow } from '../_configurable'
+import { computed } from 'vue'
+import { useMediaQuery } from '../useMediaQuery'
+
+export type ReducedTransparencyType = 'reduce' | 'no-preference'
+
+/**
+ * Reactive prefers-reduced-transparency media query.
+ *
+ * @see https://vueuse.org/usePreferredReducedTransparency
+ * @param [options]
+ */
+export function usePreferredReducedTransparency(options?: ConfigurableWindow) {
+  const isReduced = useMediaQuery('(prefers-reduced-transparency: reduce)', options)
+
+  return computed<ReducedTransparencyType>(() => {
+    if (isReduced.value)
+      return 'reduce'
+    return 'no-preference'
+  })
+}