feat(useEyeDropper): Reactive EyeDropper API (vitest-dev#911)

Co-authored-by: Jelf <haichao.liang@parameters.cn>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-158%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-159%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

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'

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'

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)
+    }
+  },
+})

packages/core/useEyeDropper/demo.vue

@@ -0,0 +1,20 @@
+<template>
+  <template v-if="isSupported">
+    <div>isSupported: {{ isSupported }}</div>
+    <div>sRGBHex: {{ sRGBHex }}</div>
+  </template>
+  <div>
+    <button
+      :disabled="!isSupported"
+      @click="open"
+    >
+      {{ isSupported ? 'Open Eye Dropper' : 'Not Supported by Your Browser' }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useEyeDropper } from '@vueuse/core'
+
+const { isSupported, open, sRGBHex } = useEyeDropper()
+</script>

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
+<UseEyeDropper v-slot="{ isSupported, sRGBHex, open }">
+  <button :disabled="!isSupported" @click="open">
+    sRGBHex: {{ sRGBHex }}
+  </button>
+</UseEyeDropper>
+```

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 }
+}

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)