feat(useClipboard): added a new composable (#709)

* feat(useClipboard): add `useClipboard` composable * feat(useClipboard): `useClipboard` composable * Update docs/composable/web/clipboard.md Co-authored-by: Carlos Rodrigues <david-181@hotmail.com> * fix(useClipboard): Fixed docs example * chore(docs): added refresh button * types(event): more relax typescript window event * chore(clipboard): improvements * chore: add test and rename methods to be text * chore: added read and write Co-authored-by: Carlos Rodrigues <carlos@hypermob.co.uk>
pikax · Jan 1, 2021 · e2d12c9 · e2d12c9
1 parent 041d2c4
commit e2d12c9
Show file tree

Hide file tree

Showing 14 changed files with 365 additions and 105 deletions.
diff --git a/docs/.vuepress/components/ClipboardExample.vue b/docs/.vuepress/components/ClipboardExample.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p>click the button to copy a random number</p>
+    <button @click="copy">copy</button>
+    <p>Check your dev tools to see what has been copied to your clipboard</p>
+
+    <p>You can also change the clipboard</p>
+    <input v-model="text" />
+
+    <div>
+      <p>Current clipboard:</p>
+      <p>{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useClipboard } from "vue-composable";
+export default {
+  setup() {
+    const { text, writeText } = useClipboard();
+
+    function copy() {
+      writeText(Math.random().toString());
+      console.log(text.value);
+    }
+
+    return {
+      copy,
+
+      text,
+    };
+  },
+};
+</script>
diff --git a/docs/.vuepress/components/ValidationExample.vue b/docs/.vuepress/components/ValidationExample.vue
@@ -17,7 +17,7 @@
         :class="{
           invalid: form.$anyDirty && form.$anyInvalid,
           dirty: form.$anyDirty && !form.$anyInvalid,
-          error: form.$errors.length > 0
+          error: form.$errors.length > 0,
         }"
       />
     </form>
@@ -28,7 +28,7 @@
 import { defineComponent, ref, reactive, computed } from "@vue/composition-api";
 import { useValidation } from "vue-composable";
 
-const required = x => !!x;
+const required = (x) => !!x;
 
 export default defineComponent({
   setup() {
@@ -39,18 +39,18 @@ export default defineComponent({
     const form = useValidation({
       firstName: {
         $value: name,
-        required
+        required,
       },
       lastName: {
         $value: surname,
-        required
+        required,
       },
       password: {
         $value: password,
         required: {
           $validator: required,
-          $message: ref("password is required")
-        }
+          $message: ref("password is required"),
+        },
       },
       samePassword: {
         $value: ref(""),
@@ -59,9 +59,9 @@ export default defineComponent({
           $validator(x) {
             return x === password.value;
           },
-          $message: "Password don't match"
-        }
-      }
+          $message: "Password don't match",
+        },
+      },
     });
 
     const submitText = computed(() => {
@@ -79,7 +79,7 @@ export default defineComponent({
       return "Submit";
     });
 
-    const onSubmit = e => {
+    const onSubmit = (e) => {
       e.preventDefault();
       if (form.$anyInvalid) {
         alert("invalid form");
@@ -91,40 +91,40 @@ export default defineComponent({
     return {
       onSubmit,
       submitText,
-      form
+      form,
     };
-  }
+  },
 });
 </script>
 
 <style scoped>
 .invalid {
-	color: #e0e0e0;
-	background: #282c34;
-	border: none;
-	outline: none;
-	border-radius: 3px;
-	padding: 0.3rem;
-	margin: 0.5rem auto;
+  color: #e0e0e0;
+  background: #282c34;
+  border: none;
+  outline: none;
+  border-radius: 3px;
+  padding: 0.3rem;
+  margin: 0.5rem auto;
 }
 
 .dirty {
-	color: #ffff92;
-	background: #282c34;
-	border: none;
-	padding: 0.3rem;
-	border-radius: 3px;
-	margin: 0.5rem auto;
-	outline: none;
+  color: #ffff92;
+  background: #282c34;
+  border: none;
+  padding: 0.3rem;
+  border-radius: 3px;
+  margin: 0.5rem auto;
+  outline: none;
 }
 
 .error {
-	color: #fb686c;
-	background: #282c34;
-	padding: 0.3rem;
-	margin: 0.5rem auto;
-	border: none;
-	outline: none;
-	border-radius: 3px;
+  color: #fb686c;
+  background: #282c34;
+  padding: 0.3rem;
+  margin: 0.5rem auto;
+  border: none;
+  outline: none;
+  border-radius: 3px;
 }
 </style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -12,7 +12,12 @@ module.exports = {
       "@vuepress/pwa",
       {
         serviceWorker: true,
-        updatePopup: true,
+        updatePopup: {
+          "/": {
+            message: "New content is available.",
+            buttonText: "Refresh",
+          },
+        },
       },
     ],
   ],
@@ -201,6 +206,7 @@ module.exports = {
             ["composable/web/intersectionObserver", "IntersectionObserver"],
             ["composable/web/networkInformation", "NetworkInformation"],
             ["composable/web/online", "Navigator.onLine"],
+            ["composable/web/clipboard", "Clipboard API"],
             ["composable/web/pageVisibility", "PageVisibilityAPI"],
             ["composable/web/language", "Language"],
             ["composable/web/broadcastChannel", "BroadcastChannel API"],

diff --git a/docs/api/vue-composable.api.md b/docs/api/vue-composable.api.md
@@ -857,7 +857,9 @@ export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(): Break
 // Warning: (ae-forgotten-export) The symbol "DefaultTailwindBreakpoints" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function useBreakpointTailwindCSS(): BreakpointReturn<DefaultTailwindBreakpoints>;
+export function useBreakpointTailwindCSS(): BreakpointReturn<
+  DefaultTailwindBreakpoints
+>;
 
 // @public (undocumented)
 export function useBreakpointTailwindCSS<T extends BreakpointObject>(): BreakpointReturn<T>;

diff --git a/docs/composable/i18n/i18n.md b/docs/composable/i18n/i18n.md
@@ -68,12 +68,12 @@ const { i18n } = useI18n({
   fallback: "en",
   messages: {
     en: {
-      hello: "hello world"
+      hello: "hello world",
     },
     pt: {
-      hello2: "Olá mundo"
-    }
-  }
+      hello2: "Olá mundo",
+    },
+  },
 });
 
 i18n.hello; // correct, because is the selected locale
@@ -210,9 +210,9 @@ const { $t, $ts, addLocale, removeLocale } = useI18n();
   <div>
     <div>
       <select v-model="locale">
-        <option v-for="l in locales" :key="l" :value="l">{{
-          i18n.locales[l]
-        }}</option>
+        <option v-for="l in locales" :key="l" :value="l">
+          {{ i18n.locales[l] }}
+        </option>
       </select>
       <div>
         <label for="name">{{ i18n.input.name.label }}</label>
@@ -335,7 +335,7 @@ export default {
               "Viernes",
               "Sábado"
             ],
-            
+
             input: {
               name: {
                 label: "Nombre",

diff --git a/docs/composable/pagination/pagination.md b/docs/composable/pagination/pagination.md
@@ -74,11 +74,11 @@ export default {
       next,
       prev,
       offset,
-      pageSize
+      pageSize,
     } = usePagination({
       currentPage: 1,
       pageSize: 10,
-      total: computed(() => arrayRef.value.length)
+      total: computed(() => arrayRef.value.length),
     });
 
     const result = computed(() => {
@@ -92,9 +92,9 @@ export default {
       lastPage,
       next,
       prev,
-      result
+      result,
     };
-  }
+  },
 };
 </script>
 ```