refactor: Improve configuration

Author: microcipcip

.eslintrc

@@ -8,7 +8,7 @@
     "prettier/@typescript-eslint"
   ],
   "parserOptions": {
-    "project": "./tsconfig.json"
+    "project": "./tsconfig.eslint.json"
   },
   "rules": {
     "prettier/prettier": "error",

README.md

@@ -2,7 +2,7 @@
 
 [![NPM Version](https://img.shields.io/npm/v/vue-use-kit.svg)](https://www.npmjs.com/package/vue-use-kit) [![NPM Downloads](https://img.shields.io/npm/dm/vue-use-kit.svg)](https://www.npmjs.com/package/vue-use-kit) [![Build Status](https://img.shields.io/travis/microcipcip/vue-use-kit/master.svg)](https://travis-ci.org/microcipcip/vue-use-kit) [![GitHub license](https://img.shields.io/github/license/microcipcip/vue-use-kit?style=flat-square)](https://github.com/microcipcip/vue-use-kit/blob/master/LICENSE) [![Demo](https://img.shields.io/badge/demos-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/)
 
-> 🌳 Collection of useful [Vue Composition API](https://vue-composition-api-rfc.netlify.com) functions.</em>
+> 🌳 Vue kit of useful [Vue Composition API](https://vue-composition-api-rfc.netlify.com) functions.</em>
 
 Please note that Vue 3.0 has not been released yet, therefore the installation and setup of [@vue/composition-api](https://github.com/vuejs/composition-api) is required for this library to work.
 
@@ -21,6 +21,9 @@ Please check the [documentation](https://microcipcip.github.io/vue-use-kit/) to
 - Sensors
   - [`useMedia`](./src/components/useMedia/stories/useMedia.md) &mdash; tracks state of a CSS media query. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--basic-demo)
   - [`useMouse`](./src/components/useMouse/stories/useMouse.md) &mdash; tracks the mouse's position. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo)
+  - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) &mdash; tracks the mouse's position relative to given element. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
+- Animations
+  - [`useTimeoutFn`](./src/components/useTimeoutFn/stories/useTimeoutFn.md) &mdash; calls function after a timeout. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
 - Utils
   - [`getQuery`](./src/components/getQuery/stories/getQuery.md) &mdash; get a CSS media query string. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo)
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-use-kit",
   "version": "0.0.0-development",
-  "description": "Useful collection of Vue composition API utilities",
+  "description": "Useful kit of Vue composition API utilities",
   "keywords": [
     "vue",
     "vue-use",

src/api.ts

@@ -0,0 +1,2 @@
+export * from '@vue/composition-api'
+export { default } from '@vue/composition-api'

src/components/getQuery/stories/getQuery.md

@@ -5,15 +5,18 @@ getQuery is an utility function that helps you build a min max media query.
 ## Reference
 
 ```typescript
-const query = getQuery(min?: number, max?: number): string
+getQuery(
+    min?: number, 
+    max?: number
+): string
 ```
 
-## Parameters
+### Parameters
 
 - `min: number` the min value to use to build the media query
 - `max: number` the max value to use to build the media query
 
-## Returns
+### Returns
 
 - `query: string` the media query value
 

src/components/useMedia/stories/UseMediaAdvancedDemo.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { computed } from '@vue/composition-api'
+import { computed } from '../../../api'
 import { getQuery, useMedia } from '../../../vue-use-kit'
 
 // breakpoints

src/components/useMedia/stories/useMedia.md

@@ -5,15 +5,18 @@ Vue function that tracks the state of a CSS media query.
 ## Reference
 
 ```typescript
-const isQueryMatching = useMedia(query: string, defaultState?: boolean): import("@vue/composition-api").Ref<boolean>
+useMedia(
+    query: string,
+    defaultState?: boolean
+): Ref<boolean>
 ```
 
-## Parameters
+### Parameters
 
 - `query: string` the media query to use, for example '(min-width: 1024px)'
 - `defaultState?: boolean` the value used as fallback for SSR
 
-## Returns
+### Returns
 
 - `isQueryMatching: boolean` whether the query matches or not
 

src/components/useMedia/useMedia.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted } from '../../api'
 
 export function useMedia(query: string, defaultState = false) {
   let mql: MediaQueryList

src/components/useMouse/stories/UseMouseAdvancedDemo.vue

@@ -16,43 +16,33 @@
       <tbody>
         <tr>
           <td>docX, docY</td>
-          <td>Mouse position relative to <strong>document</strong></td>
+          <td>Mouse position <strong>relative to document</strong></td>
           <td>
             <span>{{ toInt(docX) }}px</span>
           </td>
           <td>
             <span>{{ toInt(docY) }}px</span>
           </td>
         </tr>
-        <tr>
-          <td>elX, elY</td>
-          <td>Mouse position relative to <strong>emoji element</strong></td>
-          <td>
-            <span>{{ toInt(elX) }}px</span>
-          </td>
-          <td>
-            <span>{{ toInt(elY) }}px</span>
-          </td>
-        </tr>
       </tbody>
     </table>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, computed, onMounted, onUnmounted } from '@vue/composition-api'
+import { ref, computed, onMounted, onUnmounted } from '../../../api'
 import { useMouse } from '../../../vue-use-kit'
 
 const toInt = (n: number) => Math.round(n)
 
 export default Vue.extend({
-  name: 'UseMouseDemo',
+  name: 'useMouseAdvancedDemo',
   setup() {
     const emojiRef = ref(null)
-    let pauseEmoji = ref(false)
+    let pauseEmoji = ref(true)
 
-    const { docX, docY, elX, elY } = useMouse(emojiRef)
+    const { docX, docY } = useMouse()
 
     const emojiStyle = computed(() => {
       if (pauseEmoji.value) return
@@ -87,9 +77,7 @@ export default Vue.extend({
       toggleEmojiMovement,
       toInt,
       docX,
-      docY,
-      elX,
-      elY,
+      docY
     }
   }
 })

src/components/useMouse/stories/UseMouseDemo.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="table is-fullwidth" ref="tableRef">
+  <table class="table is-fullwidth">
     <thead>
       <tr>
         <th>Props</th>
@@ -11,48 +11,34 @@
     <tbody>
       <tr>
         <td>docX, docY</td>
-        <td>Mouse position relative to <strong>document</strong></td>
+        <td>Mouse position <strong>relative to document</strong></td>
         <td>
           <span>{{ toInt(docX) }}px</span>
         </td>
         <td>
           <span>{{ toInt(docY) }}px</span>
         </td>
       </tr>
-      <tr>
-        <td>elX, elY</td>
-        <td>Mouse position relative to <strong>table element</strong></td>
-        <td>
-          <span>{{ toInt(elX) }}px</span>
-        </td>
-        <td>
-          <span>{{ toInt(elY) }}px</span>
-        </td>
-      </tr>
     </tbody>
   </table>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '../../../api'
 import { useMouse } from '../../../vue-use-kit'
 
 const toInt = (n: number) => Math.round(n)
 
 export default Vue.extend({
   name: 'UseMouseDemo',
   setup() {
-    const tableRef = ref(null)
-    const { docX, docY, elX, elY } = useMouse(tableRef)
+    const { docX, docY } = useMouse()
 
     return {
-      tableRef,
       toInt,
       docX,
-      docY,
-      elX,
-      elY,
+      docY
     }
   }
 })