diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..27dd1da
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,12 @@
+{
+ "presets": [
+ ["env", { "modules": false }]
+ ],
+ "env": {
+ "test": {
+ "presets": [
+ ["env", { "targets": { "node": "current" } }]
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..3dce414
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..763301f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..263e16e
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true,
+ },
+ extends: [
+ 'plugin:vue/essential',
+ 'airbnb-base',
+ ],
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+ },
+ parserOptions: {
+ parser: 'babel-eslint',
+ },
+};
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000..d28d493
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,29 @@
+## Issue report
+
+## Current behavior
+
+
+## Input Code
+
+```js
+const your = (code) => here;
+```
+
+## Expected behavior
+
+
+## Posible solution
+
+
+## Environment
+
+Plugin version: X.Y.Z
+
+
+For tooling issue:
+- Node version: XX
+- Platform:
+
+Others:
+
+
\ No newline at end of file
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..10a7471
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,32 @@
+## PR Checklist
+Please check if your PR fulfills the following requirements:
+
+- [ ] The commit message follows our guidelines: https://github.com/coderdiaz/vue-status-indicator/blob/master/CONTRIBUTING.md
+- [ ] Tests for the changes have been added (for bug fixes / features).
+- [ ] Docs have been added / updated (for bug fixes / features).
+
+## PR Type
+What kind of change does this PR introduce?
+
+
+```
+[ ] Bugfixes
+[ ] Feature
+[ ] Code style update (formatting, local variables)
+[ ] Refactoring (no functional changes, no api changes)
+[ ] Build related changes
+[ ] CI related changes
+[ ] Other... Please describe:
+```
+
+## What is the current behavior?
+
+
+## What is the new behaviour?
+
+## Does this PR introduce a breaking change?
+```
+[ ] Yes
+[ ] No
+```
+
diff --git a/.gitignore b/.gitignore
index 40b878d..a157bde 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,13 @@
-node_modules/
\ No newline at end of file
+node_modules/
+dist/
+coverage/
+yarn-error.log
+npm-debug.log
+.DS_Store
+
+# Editor directories
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..ec297b2
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,11 @@
+language: node_js
+node_js:
+ - 8
+ - 10
+cache:
+ yarn: true
+ directories: node_modules
+install:
+ - yarn
+script:
+ - yarn test:unit
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..ae7ef20
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,48 @@
+## Contribute
+We would love for you to contribute and help make it even better than it is todat! As a contributor, here are the guidelines we would like you to follow:
+
+## Development Setup
+You will need Node.js version +8.9.0.
+1. After clonning the repo, run:
+```bash
+$ npm i # or yarn install
+```
+
+### Commonly use NPM scripts
+```bash
+# build all packages
+$ npm run build
+
+# run full unit-tests suite
+$ npm run test:unit
+
+# run linter
+$ npm run lint
+```
+
+## Found a Bug?
+If you find a bug in source code, you can help us by submitting an issue to our GitHub repository. Even better, you can submit a Pull Request with a fix.
+
+## Missing a Feature?
+You can request a new feature by submitting an issue to our GitHub repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it. Please consider what kind of change it is:
+- For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed. This will also allow us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted in the project. For your issue name, please prefix your proposal with `[discussion]`, for example "[discussion]: your feature idea".
+- **Small Features** can be crafted and firectly submitted as a Pull Request.
+
+## Coding Rules
+To ensure consistency throughout the source code, keep these rules in mind as you are working:
+- All feature or bug fixes **must be tested** by one or more specs (unit-tests).
+- We follow [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript), but wrap all code at **100 characters**.
+
+## Commit Message Guidelines
+We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, we use git commit messages to **generate the change log**.
+
+### Type
+Must be one of the following:
+- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).
+- **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs).
+- **docs**: Documentation only changes.
+- **feature**: A new feature.
+- **bugfix**: A bug fix.
+- **refactor**: A code change that neither fixes a bug nor adds a feature.
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
+- **test**: Adding missing tests or correcting existing tests.
diff --git a/LICENSE.md b/LICENSE
similarity index 87%
rename from LICENSE.md
rename to LICENSE
index 8a21926..9df2a3e 100644
--- a/LICENSE.md
+++ b/LICENSE
@@ -1,4 +1,6 @@
-Copyright (c) Tan Nhu, Javier Diaz
+MIT License
+
+Copyright (c) 2018 Javier Diaz Chamorro
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@@ -7,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index 67bb247..fe8482d 100644
--- a/README.md
+++ b/README.md
@@ -1,87 +1,67 @@
-
-
- 
-
-
<vue-status-indicator />
-
-
-
-A Vue component to show status indicator as colored dots. Demo. This is a fork of status-indicator with a few changes for use with Vue.js.
-
-
-
- 
- 
- 
- 
- 
- 
-
-
----
-
-
-
-## Install
-
-```bash
-npm i -S vue-status-indicator
-```
-
-### Donate
+# [Status Indicator](https://github.com/coderdiaz/vue-status-indicator) · [](http://npmjs.com/package/vue-status-indicator) [](https://github.com/coderdiaz/vue-status-indicator/stargazers) [](https://travis-ci.org/coderdiaz/vue-status-indicator) [](https://npmjs.com/package/vue-status-indicator)
-
Buy me a coffee
+A Vue component to show a status indicator as colored dots. This is a fork of [status-indicator](https://github.com/tnhu/status-indicator) with a few changes for use it with Vue.
-## Usage
-Import status-indicator.css in your CSS or JavaScript.
+## Install/Usage
+
+```sh
+# Install with npm
+$ npm i -S vue-status-indicator
-CSS:
-
-```css
-@import 'vue-status-indicator'
+# or yarn
+$ yarn add vue-status-indicator
```
-JavaScript:
+```html
+
+
+
+```
-```javascript
-import 'vue-status-indicator/styles.css'
+You can use **Local Registration**:
+```js
+import { StatusIndicator } from 'vue-status-indicator';
+new Vue({
+ el: '#app',
+ components: {
+ StatusIndicator,
+ },
+});
```
-Import component `status-indicator`.
+or **Global Registration**:
+```js
+import StatusIndicator from 'vue-status-indicator';
+Vue.use(StatusIndicator);
-```javascript
-import { StatusIndicator } from 'vue-status-indicator'
+// or with a custom component name
+import { StatusIndicator } from 'vue-status-indicator';
+Vue.component('custom-name', StatusIndicator);
```
-HTML/Vue:
+### Usage in browser
+
+In browser you can use Unpkg, Jsdelivr, CDN.js, etc.
+```sh
+# Unpkg
+https://unpkg.com/vue-status-indicator@latest/dist/vue-status-indicator.js
-```html
-
-
-
-
+# JSDelivr
+https://cdn.jsdelivr.net/npm/vue-status-indicator@latest/dist/vue-status-indicator.min.js
```
-Usage in Browser:
-```
-https://unpkg.com/vue-status-indicator@latest/dist/vue-status-indicator.min.js
-https://unpkg.com/vue-status-indicator@latest/styles.css
-```
-**Example**: https://jsfiddle.net/coderdiaz/k038cdf3/
+### Supported Browsers
+Latest versions of Chrome/Firefox/Safari/IE/Opera.
-### API
-
-```html
-
-```
+## Documentation
+
+### Props
+|Name|Description|Type|Default|Required|
+|---|---|---|---|---|
+|status|Status color for the dot|String|""|false|
+|pulse|Enable or disable the pulse effect|Boolean|false|false|
+### Customatization
You are able to customize the dot by CSS variables, default configuration is listed below.
```css
@@ -111,26 +91,8 @@ You are able to customize the dot by CSS variables, default configuration is lis
}
```
-## Development
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-```
-
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
-
-
-### Supported Browsers
-
-Latest versions of Chrome/Firefox/Safari/IE/Opera.
-
-### LICENSE
+## Community
+All feedback and suggestions are welcome!
-MIT
+## License
+This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-status-indicator/master/LICENSE)
diff --git a/build/rollup.config.js b/build/rollup.config.js
deleted file mode 100644
index 09ce011..0000000
--- a/build/rollup.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import vue from 'rollup-plugin-vue'
-import buble from 'rollup-plugin-buble'
-import uglify from 'rollup-plugin-uglify-es'
-
-export default {
- input: 'index.js',
- output: {
- name: 'VueStatusIndicator',
- exports: 'named'
- },
- plugins: [
- vue({
- css: true,
- compileTemplate: true
- }),
- buble(),
- uglify()
- ]
-}
\ No newline at end of file
diff --git a/dist/vue-status-indicator.esm.js b/dist/vue-status-indicator.esm.js
deleted file mode 100644
index 9273c89..0000000
--- a/dist/vue-status-indicator.esm.js
+++ /dev/null
@@ -1 +0,0 @@
-function __vue_normalize__(e,t,_,n,i,a,r,s){var u=_||{};return u.__file="/Users/javierdiaz/Coderdiaz/vue-status-indicator/src/components/StatusIndicator.vue",u.render||(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,i&&(u.functional=!0)),u._scopeId=n,u}function __vue_create_injector__(){var e=document.head||document.getElementsByTagName("head")[0],t={},_="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(n,i){if(!document.querySelector('style[data-vue-ssr-id~="'+n+'"]')){var a=_?i.media||"default":n,r=t[a]||(t[a]={ids:[],parts:[],element:void 0});if(!r.ids.includes(n)){var s=i.source,u=r.ids.length;if(r.ids.push(n),_&&(r.element=r.element||document.querySelector("style[data-group="+a+"]")),!r.element){var d=r.element=document.createElement("style");d.type="text/css",i.media&&d.setAttribute("media",i.media),_&&(d.setAttribute("data-group",a),d.setAttribute("data-next-index","0")),e.appendChild(d)}if(_&&(u=parseInt(r.element.getAttribute("data-next-index")),r.element.setAttribute("data-next-index",u+1)),r.element.styleSheet)r.parts.push(s),r.element.styleSheet.cssText=r.parts.filter(Boolean).join("\n");else{var l=document.createTextNode(s),o=r.element.childNodes;o[u]&&r.element.removeChild(o[u]),o.length?r.element.insertBefore(l,o[u]):r.element.appendChild(l)}}}}}function install(e){install.installed||(install.installed=!0,e.component("StatusIndicator",StatusIndicator))}var script={name:"StatusIndicator"},__vue_script__=script,__vue_render__=function(){var e=this,t=e.$createElement;return(e._self._c||t)("span",{staticClass:"status-indicator"})},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;var __vue_template__=void 0!==__vue_render__?{render:__vue_render__,staticRenderFns:__vue_staticRenderFns__}:{},__vue_inject_styles__=void 0,__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,StatusIndicator=__vue_normalize__(__vue_template__,__vue_inject_styles__,void 0===__vue_script__?{}:__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,void 0!==__vue_create_injector__?__vue_create_injector__:function(){},"undefined"!=typeof __vue_create_injector_ssr__?__vue_create_injector_ssr__:function(){}),plugin={install:install},GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:"undefined"!=typeof global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin);export default plugin;export{install,StatusIndicator};
diff --git a/dist/vue-status-indicator.min.js b/dist/vue-status-indicator.min.js
deleted file mode 100644
index ab67615..0000000
--- a/dist/vue-status-indicator.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var VueStatusIndicator=function(e){"use strict";function t(){var e=document.head||document.getElementsByTagName("head")[0],t={},n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,a){if(!document.querySelector('style[data-vue-ssr-id~="'+i+'"]')){var d=n?a.media||"default":i,r=t[d]||(t[d]={ids:[],parts:[],element:void 0});if(!r.ids.includes(i)){var s=a.source,o=r.ids.length;if(r.ids.push(i),n&&(r.element=r.element||document.querySelector("style[data-group="+d+"]")),!r.element){var u=r.element=document.createElement("style");u.type="text/css",a.media&&u.setAttribute("media",a.media),n&&(u.setAttribute("data-group",d),u.setAttribute("data-next-index","0")),e.appendChild(u)}if(n&&(o=parseInt(r.element.getAttribute("data-next-index")),r.element.setAttribute("data-next-index",o+1)),r.element.styleSheet)r.parts.push(s),r.element.styleSheet.cssText=r.parts.filter(Boolean).join("\n");else{var l=document.createTextNode(s),c=r.element.childNodes;c[o]&&r.element.removeChild(c[o]),c.length?r.element.insertBefore(l,c[o]):r.element.appendChild(l)}}}}}function n(e){n.installed||(n.installed=!0,e.component("StatusIndicator",r))}var i={name:"StatusIndicator"},a=function(){var e=this,t=e.$createElement;return(e._self._c||t)("span",{staticClass:"status-indicator"})},d=[];a._withStripped=!0;var r=function(e,t,n,i,a,d,r,s){var o=n||{};return o.__file="/Users/javierdiaz/Coderdiaz/vue-status-indicator/src/components/StatusIndicator.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,a&&(o.functional=!0)),o._scopeId=i,o}(void 0!==a?{render:a,staticRenderFns:d}:{},void 0,void 0===i?{}:i,void 0,!1,void 0,void 0!==t?t:function(){},"undefined"!=typeof __vue_create_injector_ssr__?__vue_create_injector_ssr__:function(){}),s={install:n},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(s),e.install=n,e.StatusIndicator=r,e.default=s,e}({});
diff --git a/dist/vue-status-indicator.umd.js b/dist/vue-status-indicator.umd.js
deleted file mode 100644
index 40d004e..0000000
--- a/dist/vue-status-indicator.umd.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueStatusIndicator={})}(this,function(e){"use strict";function t(){var e=document.head||document.getElementsByTagName("head")[0],t={},n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,d){if(!document.querySelector('style[data-vue-ssr-id~="'+i+'"]')){var a=n?d.media||"default":i,r=t[a]||(t[a]={ids:[],parts:[],element:void 0});if(!r.ids.includes(i)){var s=d.source,o=r.ids.length;if(r.ids.push(i),n&&(r.element=r.element||document.querySelector("style[data-group="+a+"]")),!r.element){var u=r.element=document.createElement("style");u.type="text/css",d.media&&u.setAttribute("media",d.media),n&&(u.setAttribute("data-group",a),u.setAttribute("data-next-index","0")),e.appendChild(u)}if(n&&(o=parseInt(r.element.getAttribute("data-next-index")),r.element.setAttribute("data-next-index",o+1)),r.element.styleSheet)r.parts.push(s),r.element.styleSheet.cssText=r.parts.filter(Boolean).join("\n");else{var l=document.createTextNode(s),c=r.element.childNodes;c[o]&&r.element.removeChild(c[o]),c.length?r.element.insertBefore(l,c[o]):r.element.appendChild(l)}}}}}function n(e){n.installed||(n.installed=!0,e.component("StatusIndicator",r))}var i={name:"StatusIndicator"},d=function(){var e=this,t=e.$createElement;return(e._self._c||t)("span",{staticClass:"status-indicator"})},a=[];d._withStripped=!0;var r=function(e,t,n,i,d,a,r,s){var o=n||{};return o.__file="/Users/javierdiaz/Coderdiaz/vue-status-indicator/src/components/StatusIndicator.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,d&&(o.functional=!0)),o._scopeId=i,o}(void 0!==d?{render:d,staticRenderFns:a}:{},void 0,void 0===i?{}:i,void 0,!1,void 0,void 0!==t?t:function(){},"undefined"!=typeof __vue_create_injector_ssr__?__vue_create_injector_ssr__:function(){}),s={install:n},o=null;"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(s),e.install=n,e.StatusIndicator=r,e.default=s,Object.defineProperty(e,"__esModule",{value:!0})});
diff --git a/index.html b/index.html
deleted file mode 100644
index aff2469..0000000
--- a/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
- vue-status-indicator
-
-
-
-
-
-
diff --git a/index.js b/index.js
index c2fdf29..72df815 100644
--- a/index.js
+++ b/index.js
@@ -1,25 +1,33 @@
-import StatusIndicator from './src/components/StatusIndicator.vue'
+import StatusIndicator from './packages/StatusIndicator/index';
-export function install (Vue) {
- if (install.installed) return
- install.installed = true
- Vue.component('StatusIndicator', StatusIndicator)
+const components = [
+ StatusIndicator,
+];
+
+export function install(Vue) {
+ if (install.installed) return;
+ install.installed = true;
+ components.forEach((component) => {
+ Vue.component(component.name, component);
+ });
}
const plugin = {
- install
-}
+ install,
+};
-let GlobalVue = null
+let GlobalVue = null;
if (typeof window !== 'undefined') {
- GlobalVue = window.Vue
+ GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
- GlobalVue = global.Vue
+ GlobalVue = global.Vue;
}
-
if (GlobalVue) {
- GlobalVue.use(plugin)
+ GlobalVue.use(plugin);
}
-export { StatusIndicator }
-export default plugin
\ No newline at end of file
+export {
+ StatusIndicator,
+};
+
+export default plugin;
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..1ecc088
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+ moduleFileExtensions: [
+ 'js',
+ 'jsx',
+ 'json',
+ 'vue',
+ ],
+ transform: {
+ '.*\\.(vue)$': 'vue-jest',
+ '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+ '^.+\\.js$': '/node_modules/babel-jest',
+ },
+ transformIgnorePatterns: [
+ '/node_modules/',
+ ],
+ snapshotSerializers: [
+ 'jest-serializer-vue',
+ ],
+ testMatch: [
+ '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
+ ],
+};
diff --git a/package.json b/package.json
index 1dc07d6..e1def96 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,33 @@
{
"name": "vue-status-indicator",
- "description": "A Vue component to show status indicator as colored dots.",
- "version": "1.1.1",
- "author": "Javier Diaz ",
+ "version": "1.2.0",
+ "description": "A template for create a Vue Plugin with Rollup",
"license": "MIT",
- "style": "styles.css",
+ "private": false,
+ "plugin": {
+ "name": "VueStatusIndicator",
+ "entryFile": "./index.js"
+ },
+ "author": {
+ "name": "Javier Diaz Chamorro",
+ "email": "hello@coderdiaz.me",
+ "url": "https://github.com/coderdiaz"
+ },
+ "scripts": {
+ "build": "rimraf dist && rollup -c --environment BUILD:production",
+ "prepare": "yarn lint && yarn test:unit && yarn build",
+ "lint": "eslint -c .eslintrc.js . --ext .js,.vue",
+ "test:unit": "jest -c"
+ },
+ "style": "dist/vue-status-indicator.css",
+ "main": "dist/vue-status-indicator.cjs.js",
+ "module": "dist/vue-status-indicator.esm.js",
+ "unpkg": "dist/vue-status-indicator.js",
+ "jsdelivr": "dist/vue-status-indicator.js",
+ "cdn": "dist/vue-status-indicator.js",
+ "files": [
+ "dist"
+ ],
"repository": {
"type": "git",
"url": "git+https://github.com/coderdiaz/vue-status-indicator.git"
@@ -12,8 +35,12 @@
"bugs": {
"url": "https://github.com/coderdiaz/vue-status-indicator/issues"
},
- "homepage": "https://coderdiaz.me/vue-status-indicator",
"keywords": [
+ "vue",
+ "vuejs",
+ "vue-component",
+ "component",
+ "vue.js",
"status",
"indicator",
"dot",
@@ -24,46 +51,30 @@
"pulse dot",
"animation"
],
- "scripts": {
- "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
- "build": "npm run build:browser && npm run build:es && npm run build:umd",
- "build:browser": "rollup --config build/rollup.config.js --format iife --file dist/vue-status-indicator.min.js",
- "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-status-indicator.esm.js",
- "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-status-indicator.umd.js",
- "compile:docs": "cross-env NODE_ENV=production webpack --progress --hide-modules",
- "deploy:docs": "push-dir --dir=public --branch=gh-pages",
- "prepublish": "npm run build"
+ "devDependencies": {
+ "@vue/test-utils": "^1.0.0-beta.29",
+ "babel-core": "^6.26.3",
+ "babel-eslint": "^10.0.2",
+ "babel-jest": "^24.8.0",
+ "babel-preset-env": "^1.7.0",
+ "eslint": "^6.0.1",
+ "eslint-config-airbnb-base": "^13.2.0",
+ "eslint-plugin-import": "^2.18.0",
+ "eslint-plugin-vue": "^5.2.3",
+ "jest": "^24.8.0",
+ "jest-serializer-vue": "^2.0.2",
+ "jest-transform-stub": "^2.0.0",
+ "rimraf": "^2.6.3",
+ "rollup": "^1.16.3",
+ "rollup-plugin-commonjs": "^10.0.1",
+ "rollup-plugin-css-only": "^1.0.0",
+ "rollup-plugin-node-resolve": "^5.2.0",
+ "rollup-plugin-terser": "^5.0.0",
+ "rollup-plugin-vue": "^5.0.1",
+ "vue-jest": "^3.0.4",
+ "vue-template-compiler": "^2.6.10"
},
- "main": "dist/vue-status-indicator.umd.js",
- "module": "dist/vue-status-indicator.esm.js",
- "unpkg": "dist/vue-status-indicator.min.js",
"dependencies": {
- "vue": "^2.5.11"
- },
- "browserslist": [
- "> 1%",
- "last 2 versions",
- "not ie <= 8"
- ],
- "devDependencies": {
- "babel-core": "^6.26.0",
- "babel-loader": "^7.1.2",
- "babel-preset-env": "^1.6.0",
- "babel-preset-stage-3": "^6.24.1",
- "cross-env": "^5.0.5",
- "css-loader": "^0.28.7",
- "file-loader": "^1.1.4",
- "node-sass": "^4.5.3",
- "push-dir": "^0.4.1",
- "rollup": "^0.58.2",
- "rollup-plugin-buble": "^0.19.2",
- "rollup-plugin-uglify-es": "^0.0.1",
- "rollup-plugin-vue": "^4.0.1",
- "sass-loader": "^6.0.6",
- "uglifyjs-webpack-plugin": "^1.1.6",
- "vue-loader": "^13.0.5",
- "vue-template-compiler": "^2.4.4",
- "webpack": "^3.6.0",
- "webpack-dev-server": "^2.9.1"
+ "vue": "^2.6.10"
}
}
diff --git a/packages/StatusIndicator/index.js b/packages/StatusIndicator/index.js
new file mode 100644
index 0000000..8717f10
--- /dev/null
+++ b/packages/StatusIndicator/index.js
@@ -0,0 +1,7 @@
+import StatusIndicator from './src/main.vue';
+
+StatusIndicator.install = (Vue) => {
+ Vue.component(StatusIndicator.name, StatusIndicator);
+};
+
+export default StatusIndicator;
diff --git a/packages/StatusIndicator/src/main.vue b/packages/StatusIndicator/src/main.vue
new file mode 100644
index 0000000..a12f870
--- /dev/null
+++ b/packages/StatusIndicator/src/main.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
diff --git a/styles.css b/packages/StatusIndicator/src/status-indicator.css
similarity index 98%
rename from styles.css
rename to packages/StatusIndicator/src/status-indicator.css
index d856c59..c5603f9 100644
--- a/styles.css
+++ b/packages/StatusIndicator/src/status-indicator.css
@@ -1,3 +1,4 @@
+/* https://github.com/tnhu/status-indicator/blob/master/styles.css */
:root {
--status-indicator-size: 10px;
--status-indicator-animation-duration: 2s;
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index f053ebf..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {};
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 6be0bc2..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
- vue-status-indicator
-
-
-
-
-
-
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..14c3bee
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,86 @@
+import vue from 'rollup-plugin-vue';
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+import pckg from './package.json';
+
+// Dynamic module config
+const inputFile = pckg.plugin.entryFile;
+const BrowserNamePackage = pckg.plugin.name;
+const ModuleNamePackage = pckg.name;
+
+const config = [
+ // ESM build to be used with webpack/rollup.
+ {
+ input: inputFile,
+ output: {
+ format: 'esm',
+ exports: 'named',
+ name: ModuleNamePackage,
+ file: `dist/${ModuleNamePackage}.esm.js`,
+ },
+ plugins: [
+ resolve({
+ extensions: ['.js', '.vue'],
+ }),
+ commonjs(),
+ vue(),
+ ],
+ },
+ // Common Js
+ {
+ input: inputFile,
+ output: {
+ format: 'cjs',
+ exports: 'named',
+ name: ModuleNamePackage,
+ file: `dist/${ModuleNamePackage}.cjs.js`,
+ },
+ plugins: [
+ resolve({
+ extensions: ['.js', '.vue'],
+ }),
+ commonjs(),
+ vue(),
+ ],
+ },
+ // SSR Build
+ {
+ input: inputFile,
+ output: {
+ format: 'cjs',
+ exports: 'named',
+ name: ModuleNamePackage,
+ file: `dist/${ModuleNamePackage}.ssr.js`,
+ },
+ plugins: [
+ resolve({
+ extensions: ['.js', '.vue'],
+ }),
+ commonjs(),
+ vue({ template: { optimizeSSR: true } }),
+ ],
+ },
+ // Browser build
+ {
+ input: inputFile,
+ output: {
+ format: 'iife',
+ exports: 'named',
+ name: BrowserNamePackage,
+ file: `dist/${ModuleNamePackage}.js`,
+ },
+ plugins: [
+ resolve({
+ extensions: ['.js', '.vue'],
+ }),
+ commonjs(),
+ css(),
+ vue({ css: false }),
+ terser(),
+ ],
+ },
+];
+
+export default config;
diff --git a/src/App.vue b/src/App.vue
deleted file mode 100644
index 2bcebfc..0000000
--- a/src/App.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-
-
-
- <vue-status-indicator/>
-
-
-
- [active]
- [positive]
- [intermediary]
- [negative]
-
-
-
-
-
-
-
-
-
-
- [pulse]
-
-
-
-
-
-
-