From 71b4653d890715d6b0df0d277122b3edbc664cca Mon Sep 17 00:00:00 2001
From: Alexzvn <personal@alexzvn.me>
Date: Fri, 10 Nov 2023 00:28:12 +0700
Subject: [PATCH] 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            |  1 +
 packages/core/useClipboard/component.ts | 22 ++++++++++++++++++++++
 packages/core/useClipboard/index.md     | 10 ++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 packages/core/useClipboard/component.ts

diff --git a/packages/components/index.ts b/packages/components/index.ts
index fab5a19fae5..de66a56a361 100644
--- a/packages/components/index.ts
+++ b/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'
diff --git a/packages/core/useClipboard/component.ts b/packages/core/useClipboard/component.ts
new file mode 100644
index 00000000000..edb9f1d1c0f
--- /dev/null
+++ b/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)
+  },
+})
diff --git a/packages/core/useClipboard/index.md b/packages/core/useClipboard/index.md
index e037efcb9ca..14e2135fef0 100644
--- a/packages/core/useClipboard/index.md
+++ b/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>
+```