feat: init

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+      },
+    ],
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+};

.gitignore

@@ -0,0 +1,19 @@
+node_modules
+.DS_Store
+dist
+lib
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmignore

@@ -0,0 +1,15 @@
+.npmignore
+.gitignore
+.eslintrc
+.eslintrc
+.idea
+.prettierrc
+
+node_modules/
+package-lock.json
+yarn.lock
+npm-debug.log
+yarn-error.log
+
+*.test.js
+.travis.yml

README.md

@@ -1,2 +1,82 @@
-# vue-next-progressbar
-Slim progress bars for Vue 3.
+# Vue next progressbar
+> Slim progress bars for Vue 3.
+
+## Table of Contents
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#compiles-and-hot-reloads-for-development)
+- [License](#license)
+
+## Installation
+``` bash
+npm install @jambonn/vue-next-progressbar
+```
+
+or if you prefer yarn
+
+``` bash
+yarn add @jambonn/vue-next-progressbar
+```
+
+## Usage
+### Global
+You may install Vue next progressbar globally:
+```js
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import VueNextProgressbar from '@jambonn/vue-next-progressbar'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createRouter({
+    history: createWebHistory(),
+    routes: [],
+}));
+app.use(VueNextProgressbar, { router: true })
+app.mount('#app')
+```
+### Use in component
+When install global Vue next progressbar, you can control progress in component
+```vue
+<template>
+  <button type="button" @click="progressBar.start()">Shows the progress bar</button>
+  <button type="button" @click="progressBar.done()">Completes the progress</button>
+</template>
+<script>
+import { getCurrentInstance, inject } from 'vue'
+export default {
+  setup() {
+    // Get from global properties
+    const app = getCurrentInstance()
+    const progressBar = app.appContext.config.globalProperties.$Progressbar
+
+    // Get from provide
+    const injectProgressBar = inject('Progressbar');
+    return { progressBar, injectProgressBar }
+  }
+}
+</script>
+```
+
+### Control progress
+Simply call start() and done() to control the Vue next progress bar.
+```js
+import { VueProgressbar } from '@jambonn/vue-next-progressbar'
+VueProgressbar.start();
+VueProgressbar.done();
+```
+
+### Compiles and hot-reloads for development
+``` bash
+yarn install
+yarn dev
+```
+then navigate to `http://localhost:8080`
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+## License
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

demo/App.vue

@@ -0,0 +1,189 @@
+<template>
+  <header class="page-header">
+    <div class="page-header__logo">
+      <img src="./assets/logo.png" alt="" />
+      <span class="page-header__logo-text"></span>
+    </div>
+    <h1>Vue Progressbar</h1>
+    <p class="brief big">Slim progress bars for Vue 3.</p>
+  </header>
+  <div class="contents">
+    <div class="controls">
+      <p>
+        <button class="button play" @click="progressBar.start()"></button>
+        <i>ProgressBar</i><b>.start()</b>
+        — shows the progress bar
+      </p>
+      <p>
+        <button class="button play" @click="progressBar.done()"></button>
+        <i>ProgressBar</i><b>.done()</b>
+        — completes the progress
+      </p>
+    </div>
+  </div>
+  <div class="hr-rule"></div>
+  <div class="share-buttons">
+    <iframe
+      src="https://ghbtns.com/github-btn.html?user=jambonn&amp;repo=vue-next-progressbar&amp;type=watch&amp;count=true"
+      allowtransparency="true"
+      frameborder="0"
+      scrolling="0"
+      width="100"
+      height="20"
+    ></iframe>
+    <iframe
+      src="https://ghbtns.com/github-btn.html?user=jambonn&amp;type=follow&amp;count=true"
+      allowtransparency="true"
+      frameborder="0"
+      scrolling="0"
+      width="175"
+      height="20"
+    ></iframe>
+  </div>
+</template>
+<script>
+import { getCurrentInstance } from 'vue';
+export default {
+  name: 'App',
+  setup() {
+    const app = getCurrentInstance();
+    const progressBar = app.appContext.config.globalProperties.$Progressbar;
+    return { progressBar };
+  },
+};
+</script>
+<style lang="css">
+* {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+body {
+  background: #fff;
+}
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+body,
+td,
+input,
+textarea {
+  font-family: inter, source sans pro, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #222;
+}
+.page-header {
+  text-align: center;
+  max-width: 400px;
+  padding: 3em 20px;
+  margin: 0 auto;
+}
+@media (min-width: 480px) {
+  .page-header {
+    padding: 4.5em 20px 3.5em;
+  }
+}
+.page-header h1 {
+  font-size: 2em;
+  text-align: center;
+  font-weight: 200;
+  line-height: 1.3;
+  color: #333;
+  margin: 0;
+}
+@media (min-width: 480px) {
+  .page-header h1 {
+    font-size: 3em;
+    margin-top: 1em;
+    margin-bottom: 0.4em;
+  }
+}
+.page-header__logo {
+  position: relative;
+  display: inline-block;
+}
+.page-header__logo-text {
+  display: inline-block;
+  width: 100px;
+  height: 20px;
+  border: solid 4px #2d9;
+  border-radius: 10px;
+  position: absolute;
+  right: -20px;
+  bottom: 20px;
+}
+.page-header__logo-text:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  bottom: 4px;
+  width: 40%;
+  background: #2d9;
+  border-radius: 3px;
+}
+p.brief.big {
+  font-size: 1.1em;
+}
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+}
+.button {
+  display: inline-block;
+  text-decoration: none;
+  background: #eee;
+  color: #777;
+  border-radius: 2px;
+  padding: 8px 10px;
+  font-weight: 700;
+  text-align: left;
+}
+.button.play:before {
+  content: '\25b6';
+}
+.controls .button {
+  width: 40px;
+  margin-right: 10px;
+  text-align: center;
+}
+i,
+b {
+  font-style: normal;
+  font-weight: 400;
+}
+.controls {
+  font-size: 0.9em;
+  text-align: left;
+  margin: 0 auto;
+  max-width: 480px;
+}
+@media (min-width: 480px) {
+  .controls {
+    text-align: center;
+  }
+}
+.controls i {
+  color: #999;
+}
+.controls b {
+  color: #29d;
+  font-weight: 700;
+}
+.hr-rule {
+  height: 1px;
+  width: 100px;
+  margin: 40px auto;
+  background: #ddd;
+}
+.share-buttons {
+  margin: 0 auto;
+  text-align: center;
+}
+</style>

demo/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Progress bar</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

demo/main.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import VueNextProgressbar from '../src/progressbar';
+import '../src/progressbar.scss';
+
+const app = createApp(App);
+app.use(VueNextProgressbar);
+app.mount('#app');