docs: added useClipboard docs

Author: xiaoluoboding

deploy.sh

@@ -3,14 +3,11 @@
 # 确保脚本抛出遇到的错误
 set -e
 
-# 切换到 docs 目录
-cd docs
-
 # 生成静态文件
-npm run build:v2
+npm run docs:build:v2
 
 # 进入生成的文件夹
-cd v2/.vuepress/dist
+cd docs/v2/.vuepress/dist
 
 # 如果是发布到自定义域名
 # echo 'www.example.com' > CNAME

docs/v2/.vuepress/components/UseClipboard.vue

@@ -0,0 +1,42 @@
+<template>
+  <section>
+    <example-block>
+      <template slot="component" class="w-full text-center">
+        <input
+          type="text"
+          class="px-3 py-2 leading-5 border rounded-sm ml-2"
+          placeholder="Type something"
+          v-model="source"
+        />
+        <button class="cursor-pointer ml-2 px-4 py-2 border rounded-sm hover:bg-gray-100" @click="copy">Copy to Clipboard</button>
+        <button class="cursor-pointer ml-2 px-4 py-2 border rounded-sm bg-gray-100 hover:bg-white" @click="clear">Clear Clipboard</button>
+      </template>
+      <template slot="code">
+        <span>Copied Value: {{ text }}</span>
+      </template>
+    </example-block>
+  </section>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue-demi'
+// import { useClipboard } from '@vueblocks/vue-use-core'
+// Test local bundle
+import { useClipboard } from '../../../../packages/core/lib/index.cjs'
+
+export default defineComponent({
+  name: 'UseClipboard',
+  setup () {
+    const source = ref('')
+    const { copy, copied, text, clear } = useClipboard({ source })
+
+    return {
+      source,
+      text,
+      copy,
+      copied,
+      clear
+    }
+  }
+})
+</script>

docs/v2/.vuepress/config.js

@@ -42,6 +42,7 @@ module.exports = {
           collapsable: false,
           sidebarDepth: 1,
           children: [
+            '/guide/core/useClipboard',
             '/guide/core/useColor',
             '/guide/core/useCssVars',
             '/guide/core/useDebouncedRef',

docs/v2/guide/core/useClipboard.md

@@ -0,0 +1,66 @@
+# useClipboard
+
+::: tip useClipboard
+Reactive `navigator.clipboard` API
+:::
+
+## Example
+
+> Copy some input message
+
+<ClientOnly>
+  <UseClipboard />
+</ClientOnly>
+
+## Usage
+
+```html
+<input
+  type="text"
+  placeholder="Input some text"
+  v-model="source"
+/>
+<button @click="copy">Copy</button>
+<button @click="clear">Clear</button>
+```
+
+```js
+import { ref, defineComponent } from 'vue'
+import { useClipboard } from '@vueblocks/vue-use-core'
+
+export default defineComponent({
+  setup () {
+    const source = ref('')
+    const { copy, copied, text, clear } = useClipboard({ source })
+
+    return {
+      source,
+      text,
+      copy,
+      copied,
+      clear
+    }
+  }
+})
+```
+
+## Typing
+```ts
+interface ClipboardOption {
+    source?: string;
+    during?: number;
+}
+interface ClipboardResult {
+    text: Ref<string>;
+    copy: typeof NOOP;
+    clear: typeof NOOP;
+    copied: Ref<boolean>;
+    isSupported: Ref<boolean>;
+}
+/**
+ * A Reactive Clipboard API
+ * @param options
+ * @returns
+ */
+declare const useClipboard: (options?: ClipboardOption) => ClipboardResult;
+```