Vuejs-Vue status indicator 1.2.1: vue-status-indicator - A Vue.js component to show status indicator as colored dots.

icon
Latest Release: 1.2.1

Changelog

  • fix: fixed status attribute and pulse effect.
  • test: fixed tests.
Source code(tar.gz)
Source code(zip)

Status Indicator · NPMVERSION GITHUBSTARS BUILD DOWNLOADS

A Vue component to show a status indicator as colored dots. This is a fork of status-indicator with a few changes for use it with Vue.

Install/Usage

# Install with npm
$ npm i -S vue-status-indicator

# or yarn
$ yarn add vue-status-indicator
<div id="app">
  <status-indicator status="active" />
</div>

You can use Local Registration:

import { StatusIndicator } from 'vue-status-indicator';
new Vue({
  el: '#app',
  components: {
    StatusIndicator,
  },
});

or Global Registration:

import StatusIndicator from 'vue-status-indicator';
Vue.use(StatusIndicator);

// or with a custom component name
import { StatusIndicator } from 'vue-status-indicator';
Vue.component('custom-name', StatusIndicator);

Usage in browser

In browser you can use Unpkg, Jsdelivr, CDN.js, etc.

# Unpkg
https://unpkg.com/[email protected]/dist/vue-status-indicator.js

# JSDelivr
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-status-indicator.min.js

Supported Browsers

Latest versions of Chrome/Firefox/Safari/IE/Opera.

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.

:root {
  --status-indicator-size: 10px;
  --status-indicator-animation-duration: 2s;

  --status-indicator-color: rgb(216, 226, 233);
  --status-indicator-color-semi: rgba(216, 226, 233, .5);
  --status-indicator-color-transparent: rgba(216, 226, 233, 0);

  --status-indicator-color-active: rgb(0, 149, 255);
  --status-indicator-color-active-semi: rgba(0, 149, 255, .5);
  --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);

  --status-indicator-color-positive: rgb(75, 210, 143);
  --status-indicator-color-positive-semi: rgba(75, 210, 143, .5);
  --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);

  --status-indicator-color-intermediary: rgb(255, 170, 0);
  --status-indicator-color-intermediary-semi: rgba(255, 170, 0, .5);
  --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);

  --status-indicator-color-negative: rgb(255, 77, 77);
  --status-indicator-color-negative-semi: rgba(255, 77, 77, .5);
  --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
}

Community

All feedback and suggestions are welcome!

License

This is a open-source software licensed under the MIT license

Comments

  • Typescript support?
    Typescript support?

    Dec 1, 2020

    It would help with auto-complete and it looks cool! :D

    Also great work on the port, I would be happy to make a pull request with Typescript support if you're busy

    Reply
  • Better library implementation with @vue/cli
    Better library implementation with @vue/cli

    Oct 22, 2018

                                                                                                                                                                                                            enhancement hacktoberfest 
    Reply
  • How to make a pulsating indicator?
    How to make a pulsating indicator?

    Apr 16, 2020

    I've tried the obvious code:

        <status-indicator status="positive" pulse=true />
    

    Could you please help me correct this? Also apologies if this was in the guide, I didn't see it.

    Reply
  • ERROR: vue-status-indicator.esm.js:133:86: Unterminated regular expression
    ERROR: vue-status-indicator.esm.js:133:86: Unterminated regular expression

    Feb 29, 2020

    Trying to load as local registration in component:

    <template>
       ...
       <status-indicator status="active pulse"></status-indicator>
       ...
    </template>
    
    <script>
       import StatusIndicator from 'vue-status-indicator';
    
        export default {
           props: ["env"],
           components: {
              StatusIndicator
           },
      ...
    </script>
    

    Error when starting up: Screenshot 2020-02-29 at 9 51 36 PM

    bug 
    Reply
  • New build approach
    New build approach

    Jul 20, 2019

    Issue

    New build approach

    Solution

    • Added Rollup configuration for build library.
    • Removed unnecessary configuration.
    • Modified package.json.
    • Added new style configuration for editor config, jest, eslint, travis, babel.
    • Added new tests.
    • New package structure.
    enhancement 
    Reply
  • feature/next: Added support for build plugin
    feature/next: Added support for build plugin

    May 5, 2018

    Changes

    • Added Rollup config for build plugin.
    • Added module, unpkg and main for import plugin.
    • Fixed #1
    Reply
  • Add template language to components
    Add template language to components

    Jan 16, 2018

    This PR adds the lang attribute to the template elements.

    This was proposed in issue https://github.com/coderdiaz/vue-status-indicator/issues/1

    Reply
  • Provide minified css
    Provide minified css

    Jul 15, 2019

    Hi, can a minified css be provided as part of dist? Thanks.

    enhancement 
    Reply
  • Error when using in vue project
    Error when using in vue project

    Jul 4, 2019

    /home/j/projekt/C/confirmo/src/node_modules/vue-status-indicator/styles.css:1 (function (exports, require, module, __filename, __dirname) { :root { ^

    SyntaxError: Unexpected token : at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:617:28) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) at Module.require (module.js:597:17) at require (internal/module.js:11:18) at npmRequire (/home/j/projekt/C/confirmo/src/.meteor/local/build/programs/server/npm-require.js:133:10) at Module.useNode (packages/modules-runtime.js:664:18) at styles.css (packages/modules.js:347:8) at fileEvaluate (packages/modules-runtime.js:336:7) at Module.require (packages/modules-runtime.js:238:14) at Module.moduleLink [as link] (/home/j/.meteor/packages/modules/.0.13.0.60cbwj.yyusx++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:38:38) at /home/j/projekt/C/confirmo/src/.meteor/local/build/programs/server/app/app.js:2844:8 at HelloPageCustomer.vue (app/features/customer/HelloPageCustomer.vue:71:1) at fileEvaluate (packages/modules-runtime.js:336:7) at Module.require (packages/modules-runtime.js:238:14) at require (packages/modules-runtime.js:258:21) at /home/j/projekt/C/confirmo/src/.meteor/local/build/programs/server/app/app.js:3346:1 at /home/j/projekt/C/confirmo/src/.meteor/local/build/programs/server/boot.js:419:36 Exited with code: 1 Your application is crashing. Waiting for file change.

    Usage: bug 

    Reply
  • ParseError: Unexpected token
    ParseError: Unexpected token

    Jan 16, 2018

    When I import the module using:

    import StatusIndicator from 'vue-status-indicator';
    

    I get the following error:

    <some path>/node_modules/vue-status-indica
    tor/src/components/StatusIndicator.vue:1                                        
    <template>                                                                      
    ^                                                                               
    ParseError: Unexpected token
    

    I think this has to do with the missing lang="html" attribute in the template element.

    bug help wanted 
    Reply
  • Create postcss.config.js
    Create postcss.config.js

    Sep 17, 2018

    This is missing and breaks some builds.

    enhancement 
    Reply