ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement status property

Browse source
This commit is contained in:
ayo 2026-05-08 17:47:33 +02:00
parent 9269ea2c02
commit c410f0775b
2 changed files with 45 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -7,6 +7,24 @@
<script type="module" src="./src/status-indicator.ts"></script> <script type="module" src="./src/status-indicator.ts"></script>
</head> </head>
<body> <body>
<status-indicator>All systems operational</status-indicator> <status-indicator status="positive">
All systems operational
</status-indicator>
<br />
<status-indicator status="negative">
Something's wrong
</status-indicator>
<br />
<status-indicator status="active">
It's just fine; carry on
</status-indicator>
<br />
<status-indicator>
Nothing matters
</status-indicator>
<br />
<status-indicator status="intermediary">
Slow down...
</status-indicator>
</body> </body>
</html> </html>

29
src/status-indicator.ts
View file

@ -1,11 +1,34 @@
import { WebComponent, html } from 'web-component-base' import { WebComponent, html } from 'web-component-base'
import stylesheet from './stylesheets'
console.log(stylesheet.cssRules)
class StatusIndicator extends WebComponent { class StatusIndicator extends WebComponent {
static shadowRootInit: ShadowRootInit = {
mode: 'closed'
}
static props = {
status: 'default',
}
#indicatorColor: any = {
default: [216, 226, 233],
active: [0, 149, 255],
positive: [75, 210, 143],
intermediary: [255, 170, 0],
negative: [255, 77, 77]
}
get template(): any { get template(): any {
return html` return html`
<div
style=${{
display: 'inline-block',
borderRadius: '50%',
cursor: 'pointer',
width: '10px',
height: '10px',
backgroundColor: `rgba(${this.#indicatorColor[this.props.status]})`
}}
></div>
<slot></slot> <slot></slot>
` `
} }