From b65f705291f7d77a08d8931cec4fd6063b1cd613 Mon Sep 17 00:00:00 2001
From: jelf <353742991@qq.com>
Date: Mon, 15 Nov 2021 00:00:49 +0800
Subject: [PATCH] feat(useEyeDropper): Reactive EyeDropper API (#911)
Co-authored-by: Jelf
Co-authored-by: Anthony Fu
---
README.md | 2 +-
packages/components/index.ts | 1 +
packages/core/index.ts | 1 +
packages/core/useEyeDropper/component.ts | 17 ++++++++++++++++
packages/core/useEyeDropper/demo.vue | 20 +++++++++++++++++++
packages/core/useEyeDropper/index.md | 25 ++++++++++++++++++++++++
packages/core/useEyeDropper/index.ts | 16 +++++++++++++++
packages/functions.md | 1 +
8 files changed, 82 insertions(+), 1 deletion(-)
create mode 100644 packages/core/useEyeDropper/component.ts
create mode 100644 packages/core/useEyeDropper/demo.vue
create mode 100644 packages/core/useEyeDropper/index.md
create mode 100644 packages/core/useEyeDropper/index.ts
diff --git a/README.md b/README.md
index 0ba1d0c90eb0..a289df2a2de4 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
-
+
diff --git a/packages/components/index.ts b/packages/components/index.ts
index a124213521b3..0ea234651dc0 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -13,6 +13,7 @@ export * from '../core/useDraggable/component'
export * from '../core/useElementBounding/component'
export * from '../core/useElementSize/component'
export * from '../core/useElementVisibility/component'
+export * from '../core/useEyeDropper/component'
export * from '../core/useFullscreen/component'
export * from '../core/useGeolocation/component'
export * from '../core/useIdle/component'
diff --git a/packages/core/index.ts b/packages/core/index.ts
index 0c85773fee8c..d29c5115552a 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -31,6 +31,7 @@ export * from './useElementVisibility'
export * from './useEventBus'
export * from './useEventListener'
export * from './useEventSource'
+export * from './useEyeDropper'
export * from './useFavicon'
export * from './useFetch'
export * from './useFps'
diff --git a/packages/core/useEyeDropper/component.ts b/packages/core/useEyeDropper/component.ts
new file mode 100644
index 000000000000..b48a83cf5f98
--- /dev/null
+++ b/packages/core/useEyeDropper/component.ts
@@ -0,0 +1,17 @@
+import { defineComponent, reactive } from 'vue-demi'
+import { useEyeDropper } from '@vueuse/core'
+
+export const UseEyeDropper = defineComponent({
+ name: 'UseEyeDropper',
+ props: {
+ sRGBHex: String,
+ },
+ setup(props, { slots }) {
+ const data = reactive(useEyeDropper())
+
+ return () => {
+ if (slots.default)
+ return slots.default(data)
+ }
+ },
+})
diff --git a/packages/core/useEyeDropper/demo.vue b/packages/core/useEyeDropper/demo.vue
new file mode 100644
index 000000000000..9f78a749fe5b
--- /dev/null
+++ b/packages/core/useEyeDropper/demo.vue
@@ -0,0 +1,20 @@
+
+
+ isSupported: {{ isSupported }}
+ sRGBHex: {{ sRGBHex }}
+
+
+
+
+
+
+
diff --git a/packages/core/useEyeDropper/index.md b/packages/core/useEyeDropper/index.md
new file mode 100644
index 000000000000..da0b55c3d6a6
--- /dev/null
+++ b/packages/core/useEyeDropper/index.md
@@ -0,0 +1,25 @@
+---
+category: Browser
+---
+
+# useEyeDropper
+
+Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
+
+## Usage
+
+```ts
+import { useEyeDropper } from '@vueuse/core'
+
+const { isSupported, open, sRGBHex } = useEyeDropper()
+```
+
+## Component
+
+```html
+
+
+
+```
diff --git a/packages/core/useEyeDropper/index.ts b/packages/core/useEyeDropper/index.ts
new file mode 100644
index 000000000000..66697d9b815b
--- /dev/null
+++ b/packages/core/useEyeDropper/index.ts
@@ -0,0 +1,16 @@
+import { ref } from 'vue-demi'
+
+export function useEyeDropper() {
+ const isSupported = Boolean(window && 'EyeDropper' in window)
+ const sRGBHex = ref('')
+
+ async function open() {
+ // @ts-expect-error
+ const eyeDropper = new window.EyeDropper()
+ const result = await eyeDropper.open()
+ sRGBHex.value = result.sRGBHex
+ return result
+ }
+
+ return { isSupported, sRGBHex, open }
+}
diff --git a/packages/functions.md b/packages/functions.md
index 9e0a879fcbc3..758ea609a665 100644
--- a/packages/functions.md
+++ b/packages/functions.md
@@ -24,6 +24,7 @@
- [`useCssVar`](https://vueuse.org/core/useCssVar/) — manipulate CSS variables
- [`useDark`](https://vueuse.org/core/useDark/) — reactive dark mode with auto data persistence
- [`useEventListener`](https://vueuse.org/core/useEventListener/) — use EventListener with ease
+ - [`useEyeDropper`](https://vueuse.org/core/useEyeDropper/) — reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
- [`useFavicon`](https://vueuse.org/core/useFavicon/) — reactive favicon
- [`useFetch`](https://vueuse.org/core/useFetch/) — reactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provides the ability to abort requests
- [`useFullscreen`](https://vueuse.org/core/useFullscreen/) — reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)