Skip to content

Commit 41444fb

Browse files
author
Javier Diaz
committed
feat: added status indicator package
1 parent ae79413 commit 41444fb

File tree

3 files changed

+142
-0
lines changed

3 files changed

+142
-0
lines changed

‎packages/StatusIndicator/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import StatusIndicator from './src/main.vue';
2+
3+
StatusIndicator.install = (Vue) => {
4+
Vue.component(StatusIndicator.name, StatusIndicator);
5+
};
6+
7+
export default StatusIndicator;

‎packages/StatusIndicator/src/main.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<span class="status-indicator"></span>
3+
</template>
4+
<script>
5+
export default {
6+
name: 'StatusIndicator',
7+
props: {
8+
status: {
9+
type: String,
10+
default: '',
11+
validator(value) {
12+
if (value === '') return true;
13+
return ['active', 'positive', 'intermediary', 'negative'].indexOf(value) !== -1;
14+
},
15+
},
16+
pulse: {
17+
type: Boolean,
18+
default: false,
19+
},
20+
},
21+
mounted() {
22+
if (this.status !== '') this.$el[this.status] = '';
23+
if (this.pulse) this.$el.pulse = '';
24+
},
25+
};
26+
</script>
27+
<style src="./status-indicator.css"></style>

‎packages/StatusIndicator/src/status-indicator.css

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/* https://github.com/tnhu/status-indicator/blob/master/styles.css */
2+
:root {
3+
--status-indicator-size: 10px;
4+
--status-indicator-animation-duration: 2s;
5+
6+
--status-indicator-color: rgb(216, 226, 233);
7+
--status-indicator-color-semi: rgba(216, 226, 233, .5);
8+
--status-indicator-color-transparent: rgba(216, 226, 233, 0);
9+
10+
--status-indicator-color-active: rgb(0, 149, 255);
11+
--status-indicator-color-active-semi: rgba(0, 149, 255, .5);
12+
--status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
13+
14+
--status-indicator-color-positive: rgb(75, 210, 143);
15+
--status-indicator-color-positive-semi: rgba(75, 210, 143, .5);
16+
--status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
17+
18+
--status-indicator-color-intermediary: rgb(255, 170, 0);
19+
--status-indicator-color-intermediary-semi: rgba(255, 170, 0, .5);
20+
--status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
21+
22+
--status-indicator-color-negative: rgb(255, 77, 77);
23+
--status-indicator-color-negative-semi: rgba(255, 77, 77, .5);
24+
--status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
25+
}
26+
27+
@keyframes status-indicator-pulse {
28+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-semi); }
29+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-transparent); }
30+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-transparent); }
31+
}
32+
33+
@keyframes status-indicator-pulse-active {
34+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-active-semi); }
35+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-active-transparent); }
36+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-active-transparent); }
37+
}
38+
39+
@keyframes status-indicator-pulse-positive {
40+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-positive-semi); }
41+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-positive-transparent); }
42+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-positive-transparent); }
43+
}
44+
45+
@keyframes status-indicator-pulse-intermediary {
46+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-semi); }
47+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-intermediary-transparent); }
48+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-transparent); }
49+
}
50+
51+
@keyframes status-indicator-pulse-negative {
52+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-negative-semi); }
53+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-negative-transparent); }
54+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-negative-transparent); }
55+
}
56+
57+
.status-indicator {
58+
display: inline-block;
59+
border-radius: 50%;
60+
cursor: pointer;
61+
width: var(--status-indicator-size);
62+
height: var(--status-indicator-size);
63+
background-color: var(--status-indicator-color);
64+
}
65+
66+
.status-indicator[pulse] {
67+
animation-name: status-indicator-pulse;
68+
animation-duration: var(--status-indicator-animation-duration);
69+
animation-timing-function: ease-in-out;
70+
animation-iteration-count: infinite;
71+
animation-direction: normal;
72+
animation-delay: 0;
73+
animation-fill-mode: none;
74+
}
75+
76+
.status-indicator[active] {
77+
background-color: var(--status-indicator-color-active);
78+
}
79+
80+
.status-indicator[active][pulse] {
81+
animation-name: status-indicator-pulse-active;
82+
}
83+
84+
.status-indicator[positive] {
85+
background-color: var(--status-indicator-color-positive);
86+
animation-name: status-indicator-pulse-positive;
87+
}
88+
89+
.status-indicator[positive][pulse] {
90+
animation-name: status-indicator-pulse-positive;
91+
}
92+
93+
.status-indicator[intermediary] {
94+
background-color: var(--status-indicator-color-intermediary);
95+
}
96+
97+
.status-indicator[intermediary][pulse] {
98+
animation-name: status-indicator-pulse-intermediary;
99+
}
100+
101+
.status-indicator[negative] {
102+
background-color: var(--status-indicator-color-negative);
103+
animation-name: status-indicator-pulse-negative;
104+
}
105+
106+
.status-indicator[negative][pulse] {
107+
animation-name: status-indicator-pulse-negative;
108+
}

0 commit comments

Comments
 (0)