From ee4eed1a409f3217dfd5bc7815373c6a49395b64 Mon Sep 17 00:00:00 2001
From: zhaocl97 <zhaocl97@foxmail.com>
Date: Thu, 4 Aug 2022 13:52:47 +0800
Subject: [PATCH 1/3] feat(usePreferredReducedMotion):  new function

---
 .../usePreferredReducedMotion/component.ts    | 16 +++++++++++++
 .../core/usePreferredReducedMotion/demo.vue   | 12 ++++++++++
 .../core/usePreferredReducedMotion/index.md   | 23 +++++++++++++++++++
 .../core/usePreferredReducedMotion/index.ts   | 21 +++++++++++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 packages/core/usePreferredReducedMotion/component.ts
 create mode 100644 packages/core/usePreferredReducedMotion/demo.vue
 create mode 100644 packages/core/usePreferredReducedMotion/index.md
 create mode 100644 packages/core/usePreferredReducedMotion/index.ts

diff --git a/packages/core/usePreferredReducedMotion/component.ts b/packages/core/usePreferredReducedMotion/component.ts
new file mode 100644
index 00000000000..7ca183cf686
--- /dev/null
+++ b/packages/core/usePreferredReducedMotion/component.ts
@@ -0,0 +1,16 @@
+import { defineComponent, reactive } from 'vue-demi'
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+export const UsePreferredReducedMotion = defineComponent({
+  name: 'UsePreferredReducedMotion',
+  setup(props, { slots }) {
+    const data = reactive({
+      motion: usePreferredReducedMotion(),
+    })
+
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+})
diff --git a/packages/core/usePreferredReducedMotion/demo.vue b/packages/core/usePreferredReducedMotion/demo.vue
new file mode 100644
index 00000000000..8b7a5006a32
--- /dev/null
+++ b/packages/core/usePreferredReducedMotion/demo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+const motion = usePreferredReducedMotion()
+</script>
+
+<template>
+  <note class="mb-2">
+    Preferred Motion:
+  </note>
+  <code>{{ motion }}</code>
+</template>
diff --git a/packages/core/usePreferredReducedMotion/index.md b/packages/core/usePreferredReducedMotion/index.md
new file mode 100644
index 00000000000..709ad9d6f96
--- /dev/null
+++ b/packages/core/usePreferredReducedMotion/index.md
@@ -0,0 +1,23 @@
+---
+category: Browser
+---
+
+# usePreferredReducedMotion
+
+Reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query.
+
+## Usage
+
+```js
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+const preferredMotion = usePreferredReducedMotion()
+```
+
+## Component Usage
+
+```html
+<UsePreferredReducedMotion v-slot="{ motion }">
+  Preferred Color Scheme: {{ motion }}
+<UsePreferredReducedMotion>
+```
diff --git a/packages/core/usePreferredReducedMotion/index.ts b/packages/core/usePreferredReducedMotion/index.ts
new file mode 100644
index 00000000000..4eb0b530702
--- /dev/null
+++ b/packages/core/usePreferredReducedMotion/index.ts
@@ -0,0 +1,21 @@
+import { computed } from 'vue-demi'
+import { useMediaQuery } from '../useMediaQuery'
+import type { ConfigurableWindow } from '../_configurable'
+
+export type ReducedMotionType = 'reduce' | 'no-preference'
+
+/**
+ * Reactive prefers-reduced-motion media query.
+ *
+ * @see https://vueuse.org/usePreferredReducedMotion
+ * @param [options]
+ */
+export function usePreferredReducedMotion(options?: ConfigurableWindow) {
+  const isReduced = useMediaQuery('(prefers-reduced-motion: reduce)', options)
+
+  return computed<ReducedMotionType>(() => {
+    if (isReduced.value)
+      return 'reduce'
+    return 'no-preference'
+  })
+}

From c4ac3977f5588de2cf92393f886dceb19f4468cd Mon Sep 17 00:00:00 2001
From: zhaocl97 <zhaocl97@foxmail.com>
Date: Thu, 4 Aug 2022 13:55:52 +0800
Subject: [PATCH 2/3] feat(usePreferredReducedMotion): export

---
 packages/components/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/index.ts b/packages/components/index.ts
index a45a339327e..f0cb08f7e91 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -40,6 +40,7 @@ export * from '../core/usePointer/component'
 export * from '../core/usePreferredColorScheme/component'
 export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
+export * from '../core/usePreferredReducedMotion/component'
 export * from '../core/useScreenSafeArea/component'
 export * from '../core/useScroll/directive'
 export * from '../core/useScrollLock/directive'

From 9a7eaf42788bb7c26bc952c9c98496f7061dab5c Mon Sep 17 00:00:00 2001
From: zhaocl97 <zhaocl97@foxmail.com>
Date: Thu, 4 Aug 2022 14:03:15 +0800
Subject: [PATCH 3/3] feat(usePreferredReducedMotion): export

---
 packages/core/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/index.ts b/packages/core/index.ts
index a30573ee049..8da1ef601d9 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -83,6 +83,7 @@ export * from './usePointerSwipe'
 export * from './usePreferredColorScheme'
 export * from './usePreferredDark'
 export * from './usePreferredLanguages'
+export * from './usePreferredReducedMotion'
 export * from './useRafFn'
 export * from './useRefHistory'
 export * from './useResizeObserver'