Skip to content

Commit 44154e7

Browse files
author
Javier Diaz Chamorro
authored
Merge pull request #8 from coderdiaz/feature/new-approach
New build approach
2 parents eb6f34d + af2ed50 commit 44154e7

34 files changed

+4373
-4249
lines changed

‎.babelrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }]
4+
],
5+
"env": {
6+
"test": {
7+
"presets": [
8+
["env", { "targets": { "node": "current" } }]
9+
]
10+
}
11+
}
12+
}

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
node_modules/

‎.eslintrc.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
},
6+
extends: [
7+
'plugin:vue/essential',
8+
'airbnb-base',
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint',
16+
},
17+
};

‎.github/ISSUE_TEMPLATE.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
## Issue report
2+
3+
## Current behavior
4+
<!-- Describe how the issue manifests. -->
5+
6+
## Input Code
7+
<!-- REPL or Repo link if applicable: -->
8+
```js
9+
const your = (code) => here;
10+
```
11+
12+
## Expected behavior
13+
<!-- A clear and concise description of what you expected to happen (or code). -->
14+
15+
## Posible solution
16+
<!-- Only if you have suggestions on a fix for the bug -->
17+
18+
## Environment
19+
<pre><code>
20+
Plugin version: X.Y.Z
21+
<!-- Check whether this is still an issue in the most recent version -->
22+
23+
For tooling issue:
24+
- Node version: XX <!-- run `node --version` -->
25+
- Platform: <!-- Mac, Linux, Windows -->
26+
27+
Others:
28+
<!-- Anything else relevant? Operating system version, IDE, package manager, etc. -->
29+
</pre></code>

‎.github/PULL_REQUEST_TEMPLATE.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
## PR Checklist
2+
Please check if your PR fulfills the following requirements:
3+
4+
- [ ] The commit message follows our guidelines: https://github.com/coderdiaz/vue-status-indicator/blob/master/CONTRIBUTING.md
5+
- [ ] Tests for the changes have been added (for bug fixes / features).
6+
- [ ] Docs have been added / updated (for bug fixes / features).
7+
8+
## PR Type
9+
What kind of change does this PR introduce?
10+
11+
<!-- Please check the one that applies to this PR using "x". -->
12+
```
13+
[ ] Bugfixes
14+
[ ] Feature
15+
[ ] Code style update (formatting, local variables)
16+
[ ] Refactoring (no functional changes, no api changes)
17+
[ ] Build related changes
18+
[ ] CI related changes
19+
[ ] Other... Please describe:
20+
```
21+
22+
## What is the current behavior?
23+
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
24+
25+
## What is the new behaviour?
26+
27+
## Does this PR introduce a breaking change?
28+
```
29+
[ ] Yes
30+
[ ] No
31+
```
32+
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->

‎.gitignore

+13-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
node_modules/
1+
node_modules/
2+
dist/
3+
coverage/
4+
yarn-error.log
5+
npm-debug.log
6+
.DS_Store
7+
8+
# Editor directories
9+
.idea
10+
*.suo
11+
*.ntvs*
12+
*.njsproj
13+
*.sln

‎.travis.yml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
language: node_js
2+
node_js:
3+
- 8
4+
- 10
5+
cache:
6+
yarn: true
7+
directories: node_modules
8+
install:
9+
- yarn
10+
script:
11+
- yarn test:unit

‎CONTRIBUTING.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
## Contribute
2+
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:
3+
4+
## Development Setup
5+
You will need Node.js version +8.9.0.
6+
1. After clonning the repo, run:
7+
```bash
8+
$ npm i # or yarn install
9+
```
10+
11+
### Commonly use NPM scripts
12+
```bash
13+
# build all packages
14+
$ npm run build
15+
16+
# run full unit-tests suite
17+
$ npm run test:unit
18+
19+
# run linter
20+
$ npm run lint
21+
```
22+
23+
## Found a Bug?
24+
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.
25+
26+
## Missing a Feature?
27+
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:
28+
- 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".
29+
- **Small Features** can be crafted and firectly submitted as a Pull Request.
30+
31+
## Coding Rules
32+
To ensure consistency throughout the source code, keep these rules in mind as you are working:
33+
- All feature or bug fixes **must be tested** by one or more specs (unit-tests).
34+
- We follow [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript), but wrap all code at **100 characters**.
35+
36+
## Commit Message Guidelines
37+
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**.
38+
39+
### Type
40+
Must be one of the following:
41+
- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).
42+
- **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs).
43+
- **docs**: Documentation only changes.
44+
- **feature**: A new feature.
45+
- **bugfix**: A bug fix.
46+
- **refactor**: A code change that neither fixes a bug nor adds a feature.
47+
- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
48+
- **test**: Adding missing tests or correcting existing tests.

‎LICENSE.md renamed to ‎LICENSE

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
Copyright (c) Tan Nhu, Javier Diaz
1+
MIT License
2+
3+
Copyright (c) 2018 Javier Diaz Chamorro
24

35
Permission is hereby granted, free of charge, to any person obtaining a copy
46
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
79
copies of the Software, and to permit persons to whom the Software is
810
furnished to do so, subject to the following conditions:
911

10-
The above copyright notice and this permission notice shall be included in
11-
all copies or substantial portions of the Software.
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
1214

1315
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1416
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1517
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1618
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1719
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19-
THE SOFTWARE.
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+52-90
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,67 @@
1-
<p align="center">
2-
<a href="https://github.com/coderdiaz/vue-status-indicator">
3-
<img src="https://vuejs.org/images/logo.png" width="120">
4-
</a>
5-
<h2 align="center">&lt;vue-status-indicator /&gt;</h2>
6-
</p>
7-
8-
<p align="center">
9-
A Vue component to show status indicator as colored dots. <a href="https://coderdiaz.me/vue-status-indicator/">Demo</a>. This is a fork of <a href="https://github.com/tnhu/status-indicator">status-indicator</a> with a few changes for use with Vue.js.
10-
</p>
11-
12-
<p align="center">
13-
<a href="https://npmjs.com/package/vue-status-indicator"><img src="https://img.shields.io/npm/dt/vue-status-indicator.svg?style=flat-square"></a>
14-
<a href="https://github.com/coderdiaz/vue-status-indicator/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square"></a>
15-
<a href="https://github.com/coderdiaz/vue-status-indicator/stargazers"><img src="https://img.shields.io/github/stars/coderdiaz/vue-status-indicator.svg?style=flat-square"></a>
16-
<a href="http://npmjs.com/package/vue-status-indicator"><img src="https://img.shields.io/npm/v/vue-status-indicator.svg?style=flat-square"></a>
17-
<a href="http://npmjs.com/package/vue-status-indicator"><img src="https://img.shields.io/npm/dm/vue-status-indicator.svg?style=flat-square"></a>
18-
<a href="https://www.paypal.me/coderdiaz"><img src="https://img.shields.io/badge/invite-coffee-red.svg?style=flat-square"></a>
19-
</a>
20-
21-
---
22-
23-
![Screenshot](https://i.imgur.com/v1vJ3Ue.gif)
24-
25-
## Install
26-
27-
```bash
28-
npm i -S vue-status-indicator
29-
```
30-
31-
### Donate
1+
# [Status Indicator](https://github.com/coderdiaz/vue-status-indicator) &middot; [![NPMVERSION](https://img.shields.io/npm/v/vue-status-indicator.svg)](http://npmjs.com/package/vue-status-indicator) [![GITHUBSTARS](https://img.shields.io/github/stars/coderdiaz/vue-status-indicator.svg)](https://github.com/coderdiaz/vue-status-indicator/stargazers) [![BUILD](https://travis-ci.org/coderdiaz/vue-status-indicator.svg?branch=master)](https://travis-ci.org/coderdiaz/vue-status-indicator) [![DOWNLOADS](https://img.shields.io/npm/dt/vue-status-indicator.svg)](https://npmjs.com/package/vue-status-indicator)
322

33-
<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/coderdiaz"><img src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px">Buy me a coffee</span></a>
3+
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.
344

35-
## Usage
36-
Import status-indicator.css in your CSS or JavaScript.
5+
## Install/Usage
6+
<!-- Replace the docs for usage the plugin -->
7+
```sh
8+
# Install with npm
9+
$ npm i -S vue-status-indicator
3710

38-
CSS:
39-
40-
```css
41-
@import 'vue-status-indicator'
11+
# or yarn
12+
$ yarn add vue-status-indicator
4213
```
4314

44-
JavaScript:
15+
```html
16+
<div id="app">
17+
<status-indicator status="active" />
18+
</div>
19+
```
4520

46-
```javascript
47-
import 'vue-status-indicator/styles.css'
21+
You can use **Local Registration**:
22+
```js
23+
import { StatusIndicator } from 'vue-status-indicator';
24+
new Vue({
25+
el: '#app',
26+
components: {
27+
StatusIndicator,
28+
},
29+
});
4830
```
4931

50-
Import component `status-indicator`.
32+
or **Global Registration**:
33+
```js
34+
import StatusIndicator from 'vue-status-indicator';
35+
Vue.use(StatusIndicator);
5136

52-
```javascript
53-
import { StatusIndicator } from 'vue-status-indicator'
37+
// or with a custom component name
38+
import { StatusIndicator } from 'vue-status-indicator';
39+
Vue.component('custom-name', StatusIndicator);
5440
```
5541

56-
HTML/Vue:
42+
### Usage in browser
43+
<!-- Write an example for use the plugin in browser from CDN -->
44+
In browser you can use Unpkg, Jsdelivr, CDN.js, etc.
45+
```sh
46+
# Unpkg
47+
https://unpkg.com/vue-status-indicator@latest/dist/vue-status-indicator.js
5748

58-
```html
59-
<template>
60-
<status-indicator active pulse></status-indicator>
61-
</template>
62-
<script>
63-
import { StatusIndicator } from 'vue-status-indicator'
64-
export default {
65-
components: {
66-
StatusIndicator
67-
}
68-
}
69-
</script>
49+
# JSDelivr
50+
https://cdn.jsdelivr.net/npm/vue-status-indicator@latest/dist/vue-status-indicator.min.js
7051
```
7152

72-
Usage in Browser:
73-
```
74-
https://unpkg.com/vue-status-indicator@latest/dist/vue-status-indicator.min.js
75-
https://unpkg.com/vue-status-indicator@latest/styles.css
76-
```
77-
**Example**: https://jsfiddle.net/coderdiaz/k038cdf3/
53+
### Supported Browsers
54+
Latest versions of Chrome/Firefox/Safari/IE/Opera.
7855

79-
### API
80-
81-
```html
82-
<status-indicator active|positive|intermediary|negative pulse></status-indicator>
83-
```
56+
## Documentation
57+
<!-- Add all documentation about the plugin: props, events, etc -->
58+
### Props
59+
|Name|Description|Type|Default|Required|
60+
|---|---|---|---|---|
61+
|status|Status color for the dot|String|""|false|
62+
|pulse|Enable or disable the pulse effect|Boolean|false|false|
8463

64+
### Customatization
8565
You are able to customize the dot by CSS variables, default configuration is listed below.
8666

8767
```css
@@ -111,26 +91,8 @@ You are able to customize the dot by CSS variables, default configuration is lis
11191
}
11292
```
11393

114-
## Development
115-
116-
``` bash
117-
# install dependencies
118-
npm install
119-
120-
# serve with hot reload at localhost:8080
121-
npm run dev
122-
123-
# build for production with minification
124-
npm run build
125-
```
126-
127-
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
128-
129-
130-
### Supported Browsers
131-
132-
Latest versions of Chrome/Firefox/Safari/IE/Opera.
133-
134-
### LICENSE
94+
## Community
95+
All feedback and suggestions are welcome!
13596

136-
MIT
97+
## License
98+
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-status-indicator/master/LICENSE)

0 commit comments

Comments
 (0)