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

Compare commits

base: ayo:v2.0.2
Branches Tags
ayo:main
ayo:chore/use-workspaces
ayo:v2.1.2
ayo:v2.1.1
ayo:v2.1.0
ayo:v2.0.3
ayo:v2.0.2
ayo:v2.0.1
ayo:v2.0.0
ayo:v1.1.1
ayo:v1.1.0
ayo:v1.0.2
ayo:v1.0.1
ayo:v1.0.0
ayo:v0.0.6
ayo:v0.0.5
ayo:v0.0.4
ayo:v0.0.1
...
compare: ayo:main
Branches Tags
ayo:main
ayo:chore/use-workspaces
ayo:v2.1.2
ayo:v2.1.1
ayo:v2.1.0
ayo:v2.0.3
ayo:v2.0.2
ayo:v2.0.1
ayo:v2.0.0
ayo:v1.1.1
ayo:v1.1.0
ayo:v1.0.2
ayo:v1.0.1
ayo:v1.0.0
ayo:v0.0.6
ayo:v0.0.5
ayo:v0.0.4
ayo:v0.0.1

12 commits
v2.0.2 ... main

Author SHA1 Message Date
Ayo
e4b5a9ebc2 feat(site): update CDN url 2026-05-16 18:58:09 +02:00
Ayo
de93866548 2.1.2 2026-05-14 19:40:47 +02:00
Ayo
a9c344bee4 chore: remove src & screenshot from distribution 2026-05-14 19:40:34 +02:00
Ayo
45db0001c7 2.1.1 2026-05-14 12:40:21 +02:00
Ayo
06a32d61c3 chore: don't include the public dir in lib build 2026-05-14 12:39:55 +02:00
Ayo
2a1096ab1e 2.1.0 2026-05-14 12:31:57 +02:00
Ayo
7a800fd07a feat: add types & source to distribution 2026-05-14 12:31:46 +02:00
Ayo
fc9a5c483d feat(site): add paragraph to quick start 2026-05-14 09:54:59 +02:00
Ayo
71b4eae7c2 2.0.3 2026-05-14 09:50:53 +02:00
Ayo
ac5a0e1de5 feat(site): format the quick start code 2026-05-14 09:50:41 +02:00
Ayo
ec16f7d7da feat(site): add quick start section 2026-05-14 09:47:36 +02:00
Ayo
d76a43c0c4 chore: update readme with asides 2026-05-14 09:31:20 +02:00
6 changed files with 102 additions and 37 deletions
Show stats Expand all files Collapse all files

7
README.md
View file

@ -7,7 +7,7 @@ Colored circles that can pulse. That's it. That's the component.
Copy the following to your HTML page: Copy the following to your HTML page:
```html ```html
<script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script> <script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"></script>
<status-indicator pulse status="positive"> <status-indicator pulse status="positive">
All systems operational All systems operational
@ -54,7 +54,8 @@ maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/scrip
</html> </html>
``` ```
Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg > [!NOTE]
> Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg
## Usage: Attributes ## Usage: Attributes
@ -82,7 +83,7 @@ You can add the `pulse` attribute to make the circle... pulse
## Result ## Result
![screenshot](./screenshot.png) ![screenshot](https://raw.githubusercontent.com/ayo-run/status-indicator/refs/heads/main/screenshot.png)
--- ---

76
index.html
View file

@ -35,6 +35,24 @@
status-indicator { status-indicator {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
} }
nav, code {
max-width: 500px;
@media(max-width:440px) {
max-width: 300px;
}
}
code {
padding: 1rem;
margin: 1rem 0;
pre {
margin: 0;
padding: 0.25rem 0;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -48,26 +66,44 @@
<hr /> <hr />
</header> </header>
<main> <main>
<p>Colored circles that can pulse</p> <section>
<status-indicator status="positive" pulse> <p>Colored circles that can pulse</p>
All systems operational <status-indicator status="positive" pulse>
</status-indicator> All systems operational
<br /> </status-indicator>
<status-indicator status="negative" pulse> <br />
Something's wrong <status-indicator status="negative" pulse>
</status-indicator> Something's wrong
<br /> </status-indicator>
<status-indicator status="active"> <br />
It's just fine; carry on <status-indicator status="active">
</status-indicator> It's just fine; carry on
<br /> </status-indicator>
<status-indicator> <br />
Nothing matters <status-indicator>
</status-indicator> Nothing matters
<br /> </status-indicator>
<status-indicator status="intermediary"> <br />
Slow down... <status-indicator status="intermediary">
</status-indicator> Slow down...
</status-indicator>
</section>
<section>
<h3>Quick Start</h3>
<p>
Copy the following to your HTML page:
</p>
<code><pre>
&lt;script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"&gt;&lt;/script&gt;
&lt;status-indicator pulse status="positive"&gt;
All systems operational
&lt;/status-indicator&gt;
</pre></code>
<p>More on the
<a href="https://git.ayo.run/ayo/status-indicator#readme">README</a>
</p>
</section>
</main> </main>
<footer> <footer>
<hr /> <hr />

10
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@ayo-run/status-indicator", "name": "@ayo-run/status-indicator",
"version": "2.0.2", "version": "2.1.2",
"type": "module", "type": "module",
"description": "Circles with color that can pulse to indicate status", "description": "Circles with color that can pulse to indicate status",
"license": "MIT", "license": "MIT",
@ -11,6 +11,7 @@
}, },
"homepage": "https://status-indicator.webcomponent.io", "homepage": "https://status-indicator.webcomponent.io",
"module": "./dist/status-indicator.js", "module": "./dist/status-indicator.js",
"types": "./dist/status-indicator.d.ts",
"exports": { "exports": {
".": { ".": {
"default": "./dist/status-indicator.js", "default": "./dist/status-indicator.js",
@ -21,8 +22,7 @@
"files": [ "files": [
"dist", "dist",
"README.md", "README.md",
"LICENSE", "LICENSE"
"screenshot.png"
], ],
"scripts": { "scripts": {
"test": "echo \"Warning: no test specified\"", "test": "echo \"Warning: no test specified\"",
@ -35,8 +35,8 @@
"@types/node": "^25.6.2", "@types/node": "^25.6.2",
"eslint": "^10.3.0", "eslint": "^10.3.0",
"husky": "^9.1.7", "husky": "^9.1.7",
"unplugin-dts": "^1.0.0", "vite": "^8.0.11",
"vite": "^8.0.11" "vite-plugin-dts": "^5.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"web-component-base": "^4.1.2" "web-component-base": "^4.1.2"

34
pnpm-lock.yaml
View file

@ -21,12 +21,12 @@ importers:
husky: husky:
specifier: ^9.1.7 specifier: ^9.1.7
version: 9.1.7 version: 9.1.7
unplugin-dts:
specifier: ^1.0.0
version: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
vite: vite:
specifier: ^8.0.11 specifier: ^8.0.11
version: 8.0.11(@types/node@25.6.2) version: 8.0.11(@types/node@25.6.2)
vite-plugin-dts:
specifier: ^5.0.0
version: 5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
packages: packages:
@ -665,6 +665,20 @@ packages:
uri-js@4.4.1: uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
vite-plugin-dts@5.0.0:
resolution: {integrity: sha512-VLNAUttBq7pLxxL/m/ztjd5zj5yiviiC7ijfPFVLK5c45FLcibvieBsdjSka3a4ag1qdrAF9K3OysH4/lW+rPQ==}
peerDependencies:
'@microsoft/api-extractor': '>=7'
rollup: '>=3'
vite: '>=3'
peerDependenciesMeta:
'@microsoft/api-extractor':
optional: true
rollup:
optional: true
vite:
optional: true
vite@8.0.11: vite@8.0.11:
resolution: {integrity: sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==} resolution: {integrity: sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==}
engines: {node: ^20.19.0 || >=22.12.0} engines: {node: ^20.19.0 || >=22.12.0}
@ -1286,6 +1300,20 @@ snapshots:
dependencies: dependencies:
punycode: 2.3.1 punycode: 2.3.1
vite-plugin-dts@5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2)):
dependencies:
unplugin-dts: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
optionalDependencies:
vite: 8.0.11(@types/node@25.6.2)
transitivePeerDependencies:
- '@rspack/core'
- '@vue/language-core'
- esbuild
- rolldown
- supports-color
- typescript
- webpack
vite@8.0.11(@types/node@25.6.2): vite@8.0.11(@types/node@25.6.2):
dependencies: dependencies:
lightningcss: 1.32.0 lightningcss: 1.32.0

1
src/status-indicator.ts
View file

@ -30,6 +30,7 @@ class StatusIndicator extends WebComponent {
} }
get template(): any { get template(): any {
// @ts-ignore: Needs fixing on the base class
const statusColor = this.#indicatorColor[this.props.status] const statusColor = this.#indicatorColor[this.props.status]
return html` return html`

11
vite-lib.config.ts
View file

@ -1,23 +1,22 @@
import { resolve } from 'node:path' import { resolve } from 'node:path'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import dts from 'unplugin-dts/vite' import dts from 'vite-plugin-dts'
export default defineConfig({ export default defineConfig({
publicDir: false,
build: { build: {
lib: { lib: {
entry: resolve(import.meta.dirname, 'src/status-indicator.js'), entry: resolve(import.meta.dirname, 'src/status-indicator.ts'),
name: 'StatusIndicator', name: 'StatusIndicator',
fileName: 'status-indicator', fileName: 'status-indicator',
formats: ['es']
}, },
rolldownOptions: { rolldownOptions: {
external: ['web-component-base'], external: ['web-component-base'],
output: { output: {
globals: { globals: {
'WebComponent': 'WebComponent', 'web-component-base': 'web-component-base',
'html': 'html'
} }
} },
} }
}, },
plugins: [dts()] plugins: [dts()]