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

Compare commits

base: 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
..
compare: ayo:v2.0.0
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

No commits in common. "main" and "v2.0.0" have entirely different histories.
main ... v2.0.0

6 changed files with 37 additions and 132 deletions
Show stats Expand all files Collapse all files

37
README.md
View file

@ -7,15 +7,13 @@ 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@2.1.2/es2022/status-indicator.mjs"></script> <script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
<status-indicator pulse status="positive"> <status-indicator pulse status="positive">
All systems operational All systems operational
</status-indicator> </status-indicator>
``` ```
See example on CodePen: https://codepen.io/ayo-run/pen/RNorXrK
## Installation via NPM ## Installation via NPM
If you want to install the library as a node module, you can install the [published package](https://npmx.dev/@ayo-run/status-indicator) and the [base class](https://webcomponent.io) via NPM: If you want to install the library as a node module, you can install the [published package](https://npmx.dev/@ayo-run/status-indicator) and the [base class](https://webcomponent.io) via NPM:
@ -28,36 +26,7 @@ npm install web-component-base @ayo-run/status-indicator
pnpm add web-component-base @ayo-run/status-indicator pnpm add web-component-base @ayo-run/status-indicator
``` ```
## Usage: Imports ## Usage
Without a bundler that resolves `node_module` imports for you, you can use [import
maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap):
```html
<html>
<head>
<script type="importmap">
{
"imports": {
"web-component-base": "./node_modules/web-component-base/dist/index.js",
"status-indicator": "./node_modules/@ayo-run/status-indicator/dist/status-indicator.js"
}
}
</script>
<script type="module">
import StatusIndicator from "status-indicator";
</script>
</head>
<body>
<!-- you can use the status-indicator component now -->
</body>
</html>
```
> [!NOTE]
> Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg
## Usage: Attributes
### 1. `status` attribute ### 1. `status` attribute
@ -83,7 +52,7 @@ You can add the `pulse` attribute to make the circle... pulse
## Result ## Result
![screenshot](https://raw.githubusercontent.com/ayo-run/status-indicator/refs/heads/main/screenshot.png) ![screenshot](./screenshot.png)
--- ---

76
index.html
View file

@ -35,24 +35,6 @@
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>
@ -66,44 +48,26 @@
<hr /> <hr />
</header> </header>
<main> <main>
<section> <p>Colored circles that can pulse</p>
<p>Colored circles that can pulse</p> <status-indicator status="positive" pulse>
<status-indicator status="positive" pulse> All systems operational
All systems operational </status-indicator>
</status-indicator> <br />
<br /> <status-indicator status="negative" pulse>
<status-indicator status="negative" pulse> Something's wrong
Something's wrong </status-indicator>
</status-indicator> <br />
<br /> <status-indicator status="active">
<status-indicator status="active"> It's just fine; carry on
It's just fine; carry on </status-indicator>
</status-indicator> <br />
<br /> <status-indicator>
<status-indicator> Nothing matters
Nothing matters </status-indicator>
</status-indicator> <br />
<br /> <status-indicator status="intermediary">
<status-indicator status="intermediary"> Slow down...
Slow down... </status-indicator>
</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.1.2", "version": "2.0.0",
"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,7 +11,6 @@
}, },
"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",
@ -22,7 +21,8 @@
"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",
"vite": "^8.0.11", "unplugin-dts": "^1.0.0",
"vite-plugin-dts": "^5.0.0" "vite": "^8.0.11"
}, },
"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,20 +665,6 @@ 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}
@ -1300,20 +1286,6 @@ 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,7 +30,6 @@ 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,22 +1,23 @@
import { resolve } from 'node:path' import { resolve } from 'node:path'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts' import dts from 'unplugin-dts/vite'
export default defineConfig({ export default defineConfig({
publicDir: false,
build: { build: {
lib: { lib: {
entry: resolve(import.meta.dirname, 'src/status-indicator.ts'), entry: resolve(import.meta.dirname, 'src/status-indicator.js'),
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: {
'web-component-base': 'web-component-base', 'WebComponent': 'WebComponent',
'html': 'html'
} }
}, }
} }
}, },
plugins: [dts()] plugins: [dts()]