docs: Adding useRafFn advanced demo

Author: microcipcip

.storybook/configureStorybook.js

@@ -10,7 +10,7 @@ const basicTheme = create({
   base: 'light',
   brandTitle: '🛠️ Vue use kit',
   brandUrl: pkg.repository.url,
-  brandImage: null
+  brandImage: 'https://raw.githubusercontent.com/microcipcip/vue-use-kit/master/public/logo-storybook.png',
 })
 
 addParameters({

README.md

@@ -3,7 +3,7 @@
   <br>
   <a href="https://github.com/microcipcip/vue-use-kit">
     <img 
-      src="https://raw.githubusercontent.com/microcipcip/vue-use-kit/master/assets/branding/logo.png" 
+      src="https://raw.githubusercontent.com/microcipcip/vue-use-kit/master/public/branding/logo.png" 
       alt="Vue use kit" 
       width="200" 
     />

assets/branding/logo.png

@@ -30,8 +30,8 @@
     "prebuild": "rimraf dist && rimraf docs",
     "build": "tsc --module commonjs -p ./tsconfig.build.json && rollup -c rollup.config.ts && npm run storybook:build && npm run build:clean",
     "build:clean": "ts-node tools/build-clean",
-    "dev": "start-storybook -p 3000",
-    "storybook:build": "build-storybook --quiet -c .storybook -o docs",
+    "dev": "start-storybook -p 3000 -s ./public",
+    "storybook:build": "build-storybook --quiet -c .storybook -s ./public -o docs",
     "test": "jest --verbose",
     "test:staged": "jest --bail --findRelatedTests",
     "test:watch": "jest --watch",

assets/branding/vue-use-kit.psd

@@ -0,0 +1,87 @@
+<template>
+  <div class="box">
+    <div
+      class="sprite"
+      style="background-image: url('/demo/muybridge.png')"
+      :style="spriteStyle"
+    ></div>
+
+    <br />
+    <div class="field">
+      <button class="button" @click="stop" v-if="isRunning">
+        <span class="icon"><i class="fas fa-pause"></i></span>
+      </button>
+      <button class="button" @click="start" v-else>
+        <span class="icon"><i class="fas fa-play"></i></span>
+      </button>
+      <button class="button" @click="backward">
+        <span class="icon"><i class="fas fa-backward"></i></span>
+      </button>
+      <button class="button" @click="forward">
+        <span class="icon"><i class="fas fa-forward"></i></span>
+      </button>
+    </div>
+    <div class="field">
+      <label class="label">Frames per second (fps)</label>
+      <div class="control">
+        <input class="input" type="number" min="1" max="121" v-model="fps" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref, computed } from '../../../api'
+import { useRafFn } from '../../../vue-use-kit'
+
+const spriteOpts = {
+  w: 175 * 2, // Enlarge sprite 2x
+  h: 130 * 2, // Enlarge sprite 2x
+  frames: 16
+}
+
+export default Vue.extend({
+  name: 'UseRafFnAdvancedDemo',
+  setup() {
+    const fps = ref(16)
+    const spriteDirection = ref(-1)
+    const spriteCurrentFrame = ref(0)
+
+    let countFrame = 0
+    const handleAnim = () => {
+      // Get current frame
+      spriteCurrentFrame.value = countFrame % spriteOpts.frames
+      countFrame = countFrame + 1
+    }
+
+    const spriteStyle = computed(() => {
+      const posX =
+        spriteOpts.w * spriteCurrentFrame.value * spriteDirection.value
+      return {
+        backgroundPosition: `${posX}px`
+      }
+    })
+
+    const backward = () => {
+      spriteDirection.value = 1
+    }
+
+    const forward = () => {
+      spriteDirection.value = -1
+    }
+
+    const { isRunning, start, stop } = useRafFn(handleAnim, fps)
+    return { isRunning, start, stop, backward, forward, fps, spriteStyle }
+  }
+})
+</script>
+
+<style>
+.sprite {
+  /* Enlarge sprite 2x */
+  width: 350px;
+  height: 260px;
+  background-size: 5600px 260px;
+}
+</style>