documentation has been created

Author: mustafadalga

README.md

@@ -1,46 +1,125 @@
-# vue3-number-counter
+# Vue 3 Number Counter
 
-This template should help get you started developing with Vue 3 in Vite.
+**Vue 3 animated number counter directive**
 
-## Recommended IDE Setup
+<p align="center">
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[![vue version](https://img.shields.io/npm/v/vue3-number-counter.svg)](https://www.npmjs.com/package/vue3-number-counter)
+[![vue version](https://img.shields.io/badge/vue-3.2-brightgreen.svg)](https://www.npmjs.com/package/vue3-number-counter)
 
-## Type Support for `.vue` Imports in TS
+</p>
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+## Installing
 
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+### Package manager
 
-## Customize configuration
+Using npm:
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+```bash
+npm i vue3-number-counter
+```
+
+Then, import and register the component:
+
+
+## Global Registration
+
+main.js
+```
+import numberCounter from "vue3-number-counter";
+app.use(numberCounter);
+```
+
+## Local Registration
+
+* Composition API
 
-## Project Setup
+```
+<script setup>
+import { numberCounter as vNumberCounter } from "vue3-number-counter";
+</script>
+```
 
-```sh
-npm install
+* Options API
+```
+<script>
+import { numberCounter } from "vue3-number-counter";
+
+export default {
+  directives: {
+    "number-counter": numberCounter
+  },
+}
+</script>
 ```
 
-### Compile and Hot-Reload for Development
 
-```sh
-npm run dev
+## Usage
+* Example 1
+```
+import { numberCounter } from "vue3-number-counter";
+
+export default {
+  directives: {
+    "number-counter": numberCounter
+  },
+  data () {
+    return {
+      counter: {
+        countFrom: 0,
+        countTo: 100,
+        duration: 1000,
+        text: "% completed"
+      }
+    }
+  }
+}
+
+
+<template>
+      <div v-number-counter="counter">0% completed</div>
+</template>
 ```
 
-### Type-Check, Compile and Minify for Production
+* Example 2
 
-```sh
-npm run build
+```
+<script setup>
+import { numberCounter as vNumberCounter } from "vue3-number-counter";
+
+const counter = {
+  countFrom: 0,
+  countTo: 100,
+  duration: 1000,
+  text: "% completed",
+};
+</script>
+
+<template>
+  <div v-number-counter="counter">0% completed</div>
+</template>
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+* Example 3
 
-```sh
-npm run lint
 ```
+const counter = {
+  countFrom: 0,
+  countTo: 100,
+  duration: 1000,
+  text: "% completed",
+};
+</script>
+
+<template>
+  <div v-number-counter="counter">0% completed</div>
+</template>
+```
+
+
+# Demo
+* https://vue-number-counter.netlify.app/
+
+## License
+[![License](https://img.shields.io/badge/LICENSE-GPL--3.0-orange)](https://github.com/mustafadalga/vue3-number-counter/blob/main/LICENSE)

package.json

@@ -1,6 +1,26 @@
 {
   "name": "vue3-number-counter",
-  "version": "0.0.0",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mustafadalga/vue3-number-counter"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "GNU General Public License v3.0",
+  "keywords": [
+    "number-counter",
+    "vue-number-counter",
+    "vue3-number-counter",
+    "animated-number-counter",
+    "counter",
+    "animated-number-counters"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",

src/App.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-
 </template>

src/directives/index.ts

@@ -0,0 +1,53 @@
+interface IBinding {
+    value: {
+        countFrom: number,
+        countTo: number,
+        duration: number,
+        text?: number
+    }
+}
+
+interface IHTMLElement extends HTMLElement {
+    animationFrameID: number
+}
+
+
+const vNumberCounter = {
+    mounted(element: IHTMLElement, binding: IBinding) {
+        const {countFrom, countTo, duration, text} = binding.value;
+
+        if (countTo <= 0) return;
+
+        const animate = () => {
+            let startTime: number;
+
+            const step = (currentTime: number) => {
+                if (!startTime) {
+                    startTime = currentTime;
+                }
+
+                const progress = Math.min((currentTime - startTime) / duration, 1);
+                const currentNumber = Math.floor(progress * (countTo - countFrom));
+
+                element.textContent = `${currentNumber + countFrom} ${text || ""}`;
+
+                if (progress < 1) {
+                    element.animationFrameID = window.requestAnimationFrame(step);
+                } else {
+                    window.cancelAnimationFrame(element.animationFrameID);
+                }
+            };
+
+            window.requestAnimationFrame(step);
+        };
+
+        animate();
+    },
+    unmounted(element: IHTMLElement) {
+        window.cancelAnimationFrame(element.animationFrameID);
+    }
+};
+
+export {
+    vNumberCounter
+};

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.mount('#app')

src/number-counter.ts

@@ -0,0 +1,10 @@
+import { vNumberCounter } from "@/directives";
+import type { App } from "vue";
+
+export default {
+    install: (app: App) => {
+        app.directive("number-counter", vNumberCounter);
+    },
+};
+
+export { vNumberCounter };

vite.config.ts

@@ -5,10 +5,26 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [ vue() ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  build: {
+    lib: {
+      entry: "./src/number-counter.ts",
+      formats: [ "es", "cjs" ],
+      name: "number-counter",
+      fileName: (format) => (format === "es" ? "index.js" : "index.cjs"),
+    },
+    rollupOptions: {
+      external: [ "vue" ],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
   }
-})
+})