feat(useClipboard): UseClipboard component (#3359)

Co-authored-by: Alexzvn <alex.zdea@gmail.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/components/index.ts

@@ -51,3 +51,4 @@ export * from '../core/useTimestamp/component'
 export * from '../core/useVirtualList/component'
 export * from '../core/useWindowFocus/component'
 export * from '../core/useWindowSize/component'
+export * from '../core/useClipboard/component'

packages/core/useClipboard/component.ts

@@ -0,0 +1,22 @@
+import { defineComponent, reactive } from 'vue-demi'
+import { useClipboard } from '@vueuse/core'
+import type { UseClipboardOptions } from '@vueuse/core'
+
+interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {}
+
+export const UseClipboard = /* #__PURE__ */ defineComponent<UseClipboardProps>({
+  name: 'UseClipboard',
+  props: [
+    'source',
+    'read',
+    'navigator',
+    'copiedDuring',
+    'legacy',
+  ] as unknown as undefined,
+
+  setup(props, { slots }) {
+    const data = reactive(useClipboard(props))
+
+    return () => slots.default?.(data)
+  },
+})

packages/core/useClipboard/index.md

@@ -34,3 +34,13 @@ const { text, copy, copied, isSupported } = useClipboard({ source })
 ```
 
 Set `legacy: true` to keep the ability to copy if [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is not available. It will handle copy with [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) as fallback.
+
+## Component Usage
+
+```html
+<UseClipboard source="copy me" v-slot="{ copy, copied }">
+  <button @click="copy()">
+    {{ copied ? 'Copied' : 'Copy' }}
+  </button>
+</UseClipboard>
+```