Compare commits
No commits in common. "main" and "v2.0.1" have entirely different histories.
6 changed files with 38 additions and 107 deletions
13
README.md
13
README.md
|
|
@ -7,15 +7,13 @@ Colored circles that can pulse. That's it. That's the component.
|
|||
Copy the following to your HTML page:
|
||||
|
||||
```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">
|
||||
All systems operational
|
||||
</status-indicator>
|
||||
```
|
||||
|
||||
See example on CodePen: https://codepen.io/ayo-run/pen/RNorXrK
|
||||
|
||||
## 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:
|
||||
|
|
@ -28,7 +26,7 @@ npm install 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):
|
||||
|
|
@ -54,10 +52,7 @@ maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/scrip
|
|||
</html>
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg
|
||||
|
||||
## Usage: Attributes
|
||||
## Attributes
|
||||
|
||||
### 1. `status` attribute
|
||||
|
||||
|
|
@ -83,7 +78,7 @@ You can add the `pulse` attribute to make the circle... pulse
|
|||
|
||||
## Result
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
76
index.html
76
index.html
|
|
@ -35,24 +35,6 @@
|
|||
status-indicator {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -66,44 +48,26 @@
|
|||
<hr />
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<p>Colored circles that can pulse</p>
|
||||
<status-indicator status="positive" pulse>
|
||||
All systems operational
|
||||
</status-indicator>
|
||||
<br />
|
||||
<status-indicator status="negative" pulse>
|
||||
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>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Quick Start</h3>
|
||||
<p>
|
||||
Copy the following to your HTML page:
|
||||
</p>
|
||||
<code><pre>
|
||||
<script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"></script>
|
||||
|
||||
<status-indicator pulse status="positive">
|
||||
All systems operational
|
||||
</status-indicator>
|
||||
</pre></code>
|
||||
<p>More on the
|
||||
<a href="https://git.ayo.run/ayo/status-indicator#readme">README</a>
|
||||
</p>
|
||||
</section>
|
||||
<p>Colored circles that can pulse</p>
|
||||
<status-indicator status="positive" pulse>
|
||||
All systems operational
|
||||
</status-indicator>
|
||||
<br />
|
||||
<status-indicator status="negative" pulse>
|
||||
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>
|
||||
</main>
|
||||
<footer>
|
||||
<hr />
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@ayo-run/status-indicator",
|
||||
"version": "2.1.2",
|
||||
"version": "2.0.1",
|
||||
"type": "module",
|
||||
"description": "Circles with color that can pulse to indicate status",
|
||||
"license": "MIT",
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
},
|
||||
"homepage": "https://status-indicator.webcomponent.io",
|
||||
"module": "./dist/status-indicator.js",
|
||||
"types": "./dist/status-indicator.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./dist/status-indicator.js",
|
||||
|
|
@ -22,7 +21,8 @@
|
|||
"files": [
|
||||
"dist",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
"LICENSE",
|
||||
"screenshot.png"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "echo \"Warning: no test specified\"",
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
"@types/node": "^25.6.2",
|
||||
"eslint": "^10.3.0",
|
||||
"husky": "^9.1.7",
|
||||
"vite": "^8.0.11",
|
||||
"vite-plugin-dts": "^5.0.0"
|
||||
"unplugin-dts": "^1.0.0",
|
||||
"vite": "^8.0.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"web-component-base": "^4.1.2"
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@ importers:
|
|||
husky:
|
||||
specifier: ^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:
|
||||
specifier: ^8.0.11
|
||||
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:
|
||||
|
||||
|
|
@ -665,20 +665,6 @@ packages:
|
|||
uri-js@4.4.1:
|
||||
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:
|
||||
resolution: {integrity: sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
|
|
@ -1300,20 +1286,6 @@ snapshots:
|
|||
dependencies:
|
||||
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):
|
||||
dependencies:
|
||||
lightningcss: 1.32.0
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ class StatusIndicator extends WebComponent {
|
|||
}
|
||||
|
||||
get template(): any {
|
||||
// @ts-ignore: Needs fixing on the base class
|
||||
const statusColor = this.#indicatorColor[this.props.status]
|
||||
|
||||
return html`
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
import { resolve } from 'node:path'
|
||||
import { defineConfig } from 'vite'
|
||||
import dts from 'vite-plugin-dts'
|
||||
import dts from 'unplugin-dts/vite'
|
||||
|
||||
export default defineConfig({
|
||||
publicDir: false,
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(import.meta.dirname, 'src/status-indicator.ts'),
|
||||
entry: resolve(import.meta.dirname, 'src/status-indicator.js'),
|
||||
name: 'StatusIndicator',
|
||||
fileName: 'status-indicator',
|
||||
formats: ['es']
|
||||
},
|
||||
rolldownOptions: {
|
||||
external: ['web-component-base'],
|
||||
output: {
|
||||
globals: {
|
||||
'web-component-base': 'web-component-base',
|
||||
'WebComponent': 'WebComponent',
|
||||
'html': 'html'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [dts()]
|
||||
|
|
|
|||
Loading…
Reference in a new issue