WIP: Finishing other missing docs

pikax · Nov 1, 2019 · ef83b36 · ef83b36
1 parent 2ac49b7
commit ef83b36
Show file tree

Hide file tree

Showing 18 changed files with 595 additions and 23 deletions.
diff --git a/dist/vue-composable.cjs.js b/dist/vue-composable.cjs.js
@@ -387,9 +387,13 @@ function useWebSocket(url, protocols) {
         isClosed.value = false;
     });
     const send = (data) => ws.send(data);
+    const close = (code, reason) => {
+        ws.close(code, reason);
+    };
     return {
         ws,
         send,
+        close,
         messageEvent,
         errorEvent,
         data,

diff --git a/dist/vue-composable.es.js b/dist/vue-composable.es.js
@@ -381,9 +381,13 @@ function useWebSocket(url, protocols) {
         isClosed.value = false;
     });
     const send = (data) => ws.send(data);
+    const close = (code, reason) => {
+        ws.close(code, reason);
+    };
     return {
         ws,
         send,
+        close,
         messageEvent,
         errorEvent,
         data,

diff --git a/dist/vue-composable.umd.js b/dist/vue-composable.umd.js
@@ -386,9 +386,13 @@
           isClosed.value = false;
       });
       const send = (data) => ws.send(data);
+      const close = (code, reason) => {
+          ws.close(code, reason);
+      };
       return {
           ws,
           send,
+          close,
           messageEvent,
           errorEvent,
           data,

diff --git a/dist/vue-composable.umd.prod.js b/dist/vue-composable.umd.prod.js
@@ -360,9 +360,13 @@
           isClosed.value = false;
       });
       const send = (data) => ws.send(data);
+      const close = (code, reason) => {
+          ws.close(code, reason);
+      };
       return {
           ws,
           send,
+          close,
           messageEvent,
           errorEvent,
           data,

diff --git a/dist/web/webSocket.d.ts b/dist/web/webSocket.d.ts
@@ -1,6 +1,7 @@
 export declare function useWebSocket(url: string, protocols?: string | string[]): {
     ws: WebSocket;
     send: (data: string | ArrayBuffer | SharedArrayBuffer | Blob | ArrayBufferView) => void;
+    close: (code?: number | undefined, reason?: string | undefined) => void;
     messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
     errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
     data: import("@vue/composition-api").Ref<any>;

diff --git a/docs/.vuepress/components/AxiosExample.vue b/docs/.vuepress/components/AxiosExample.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <p>current Id {{id}}</p>
+    <p>
+      <button @click="id--">prev</button>
+      <button @click="id++">next</button>
+    </p>
+    <p v-if="loading">loading...</p>
+    <div v-else>
+      <p>Status: {{status}}</p>
+      {{ data }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch } from '@vue/composition-api';
+import { useAxios } from '../../../';
+
+export default {
+  name: "axios-example",
+  setup() {
+    const id = ref(1);
+    const { data, loading, exec, error, status } = useAxios();
+
+    watch(id, id => {
+      exec({
+        method: "GET",
+        url: "https://reqres.in/api/user/" + id
+      });
+    });
+
+    return {
+      id,
+      data,
+      loading,
+      status
+    };
+  }
+};
+</script>
diff --git a/docs/.vuepress/components/CancellablePromiseExample.vue b/docs/.vuepress/components/CancellablePromiseExample.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div>
+      <label for="delayPromise">Delay seconds</label>
+      <input name="delayPromise" v-model="delay" />
+    </div>
+    <div>
+      <button @click="exec(delay)" :disabled="loading">Execute</button>
+      <button @click="cancel()" :disabled="!loading">Cancel</button>
+    </div>
+
+    <div v-if="loading">loading...</div>
+    <div v-else-if="cancelled">
+      <p>Request cancelled</p>
+      <p>Result: {{ result }}</p>
+      <p>Error: {{ error }}</p>
+    </div>
+    <div v-else>
+      <p>Result: {{ result }}</p>
+      <p>Error: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "@vue/composition-api";
+import { useCancellablePromise } from "../../..";
+export default {
+  name: "cancellable-promise-example",
+  setup() {
+    const {
+      exec,
+      loading,
+      cancel,
+      error,
+      cancelled,
+      result
+    } = useCancellablePromise(delay =>
+      fetch(`https://reqres.in/api/users?delay=${delay}`).then(x => x.json())
+    );
+
+    const delay = ref(1);
+    return {
+      delay,
+      exec,
+      error,
+      loading,
+      cancel,
+      cancelled,
+      result
+    };
+  }
+};
+</script>
diff --git a/docs/.vuepress/components/PromiseExample.vue b/docs/.vuepress/components/PromiseExample.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <label for="timeout">
+      Duration (ms)
+      <input type="number" name="timeout" v-model.number="timeout" />
+    </label>
+    <label for="error">
+      Reject promise
+      <input type="checkbox" name="error" v-model="throwError" />
+    </label>
+
+    <button @click="exec(timeout)">Execute</button>
+
+    <div v-if="loading">loading...</div>
+    <div v-else-if="result">{{result}}</div>
+    <div v-else>
+      <p>error: {{error}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "@vue/composition-api";
+import { usePromise } from "../../..";
+
+export default {
+  name: "promise-example",
+  setup() {
+    const timeout = ref(1000);
+    const throwError = ref(false);
+
+    const { exec, error, loading, result } = usePromise(ms => {
+      if (throwError.value) {
+        return Promise.reject(new Error("Throw Error checked"));
+      }
+      return new Promise(res => setTimeout(() => res("sucess"), ms));
+    });
+
+    return {
+      timeout,
+      throwError,
+      error,
+      exec,
+      loading,
+      result
+    };
+  }
+};
+</script>
diff --git a/docs/.vuepress/components/WebSocketExample.vue b/docs/.vuepress/components/WebSocketExample.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <button @click="send" :disabled="!isOpen">Send</button>
+    <button @click="close(1000)" :disabled="!isOpen">Close</button>
+    <p>open: {{isOpen}}</p>
+    <p>closed: {{isClosed}}</p>
+    <p>data: {{data}}</p>
+    <p>errored: {{errored}}</p>
+  </div>
+</template>
+
+<script>
+import { useWebSocket } from "../../../";
+export default {
+  name: "web-socket-example",
+  setup() {
+    const { isOpen, isClosed, data, errored, send, close } = useWebSocket(
+      "wss://javascript.info/article/websocket/demo/hello"
+    );
+
+    return {
+      isOpen,
+      isClosed,
+      data,
+      errored,
+      send,
+      close
+    };
+  }
+};
+</script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -154,10 +154,11 @@ module.exports = {
       // ],
       "/examples/": [],
       "/": [
-        "",
+        // "",
         {
           title: "Event",
-          sidebarDepth: 0,
+          collapsable: false,
+          sidebarDepth: 1,
           children: [
             ["composable/event/event", "event"],
             ["composable/event/onMouseMove", "onMouseMove"],
@@ -167,30 +168,32 @@ module.exports = {
         },
         {
           title: "Pagination",
-          sidebarDepth: 0,
+          collapsable: false,
+          sidebarDepth: 1,
           children: [
             ["composable/pagination/pagination", "pagination"],
             ["composable/pagination/arrayPagination", "arrayPagination"]
           ]
         },
-
         {
           title: "Promise",
-          sidebarDepth: 0,
+          sidebarDepth: 1,
+          collapsable: false,
           children: [
             ["composable/promise/promise", "promise"],
             ["composable/promise/cancellablePromise", "cancellablePromise"]
           ]
         },
         {
           title: "Web",
+          sidebarDepth: 1,
+          collapsable: false,
           children: [
             ["composable/web/fetch", "fetch"],
             ["composable/web/axios", "axios"],
-            ["composable/web/webSockets", "webSockets"]
+            ["composable/web/webSocket", "webSocket"]
           ]
-        },
-        ["composable/web/fetch", "fetch"]
+        }
       ]
     },
     locales: {

diff --git a/docs/README.md b/docs/README.md
@@ -4,7 +4,7 @@ lang: en-US
 home: true
 # heroImage:
 actionText: Get Started →
-actionLink: ./composable/
+actionLink: ./composable/event/event
 features:
   - title: Composition
     details: General purpose composable components that fits your needs.
@@ -47,34 +47,26 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 
 ### Event
 
-> Event based
-
 - [Event](/composable/event/event)
 - [Mouse Move](/composable/event/onMoveMove)
 - [Resize](/composable/event/onResize)
 - [Scroll](/composable/event/onScroll)
 
 ### Pagination
 
-> Pagination related
-
 - [Pagination](/composable/pagination/pagination)
 - [Array Pagination](/composable/pagination/arrayPagination)
 
 ### Promise
 
-> Promise based
-
-- Promise <Badge text="WIP" type="warn" />
-- Cancellable Promise <Badge text="WIP" type="warn" />
+- [Promise](/composable/promise)
+- [Cancellable Promise](/composable/promise/cancellablePromise)
 
 ### Web
 
-> Web based
-
-- Axios <Badge text="WIP" type="warn" />
+- [Axios](/composable/web/axios)
 - [Fetch](/composable/web/fetch)
-- WebSocket <Badge text="WIP" type="warn" />
+- [WebSocket](/composable/web/webSocket)
 
 ## Usage
 

diff --git a/docs/composable/README.md b/docs/composable/README.md
@@ -1,4 +1,4 @@
-# 
+# [Template]
 
 > The [mousemove event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event).