fix(core): Fixed various package metadata issues and improved component interactions
This commit is contained in:
parent
a61326a8e5
commit
a89be07bc2
35
changelog.md
Normal file
35
changelog.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# Changelog
|
||||
|
||||
## 2024-06-26 - 1.0.79 - fix(core)
|
||||
Fixed various package metadata issues and improved component interactions
|
||||
|
||||
- Corrected package name and description in package.json
|
||||
- Updated dependencies and devDependencies to latest versions
|
||||
- Enhanced installation and usage documentation in readme.md
|
||||
- Replaced internal 'UptimelinkWindowLayer' with '@design.estate/dees-catalog' dependency
|
||||
|
||||
## 2023-10-06 - 1.0.78 - Core
|
||||
Multiple core updates
|
||||
|
||||
- Applied fixes and updates to core functionality repeatedly from version 1.0.55 to 1.0.78.
|
||||
|
||||
## 2022-03-25 - 1.0.69 - Core
|
||||
Core updates and fixes
|
||||
|
||||
- Incremental core fixes and updates from version 1.0.55 to 1.0.69.
|
||||
|
||||
## 2021-03-09 - 1.0.67 - Core
|
||||
Series of core fixes
|
||||
|
||||
- Continued fixes and updates to core from version 1.0.55 to 1.0.67.
|
||||
|
||||
## 2020-11-29 - 1.0.61 - Core
|
||||
Regular core fixes
|
||||
|
||||
- Ongoing core fixes and updates from version 1.0.55 to 1.0.61.
|
||||
|
||||
## 2020-09-19 - 1.0.58 - Core
|
||||
Core updates
|
||||
|
||||
- Core has been updated and fixed multiple times from version 1.0.55 to 1.0.58.
|
||||
|
||||
|
|
@ -2,13 +2,25 @@
|
|||
"gitzone": {
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "uptimelink",
|
||||
"githost": "code.foss.global",
|
||||
"gitscope": "uptime.link",
|
||||
"gitrepo": "webwidget",
|
||||
"description": "the webwidget for public use of uptimelink",
|
||||
"description": "The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.",
|
||||
"npmPackagename": "@uptimelink/webwidget",
|
||||
"license": "UNLICENSED",
|
||||
"projectDomain": "uptime.link"
|
||||
"license": "MIT",
|
||||
"projectDomain": "uptime.link",
|
||||
"keywords": [
|
||||
"uptime",
|
||||
"status",
|
||||
"webwidget",
|
||||
"monitoring",
|
||||
"widget",
|
||||
"typescript",
|
||||
"web component",
|
||||
"UI",
|
||||
"frontend",
|
||||
"npm package"
|
||||
]
|
||||
}
|
||||
},
|
||||
"npmci": {
|
||||
|
|
|
|||
33
package.json
33
package.json
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "@uptime.link_private/webwidget",
|
||||
"name": "@uptime.link/webwidget",
|
||||
"version": "1.0.78",
|
||||
"private": false,
|
||||
"description": "the webwidget for public use of uptimelink",
|
||||
"description": "The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"type": "module",
|
||||
|
|
@ -14,15 +14,16 @@
|
|||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.0.1",
|
||||
"@design.estate/dees-element": "^2.0.4",
|
||||
"@design.estate/dees-wcctools": "^1.0.73"
|
||||
"@design.estate/dees-catalog": "^1.0.289",
|
||||
"@design.estate/dees-domtools": "^2.0.57",
|
||||
"@design.estate/dees-element": "^2.0.34",
|
||||
"@design.estate/dees-wcctools": "^1.0.90"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.61",
|
||||
"@git.zone/tsbundle": "^2.0.10",
|
||||
"@git.zone/tsrun": "^1.2.32",
|
||||
"@git.zone/tswatch": "^2.0.13",
|
||||
"@git.zone/tsbuild": "^2.1.82",
|
||||
"@git.zone/tsbundle": "^2.0.15",
|
||||
"@git.zone/tsrun": "^1.2.49",
|
||||
"@git.zone/tswatch": "^2.0.23",
|
||||
"@push.rocks/projectinfo": "^5.0.2"
|
||||
},
|
||||
"files": [
|
||||
|
|
@ -39,5 +40,17 @@
|
|||
],
|
||||
"browserslist": [
|
||||
"last 1 Chrome versions"
|
||||
],
|
||||
"keywords": [
|
||||
"uptime",
|
||||
"status",
|
||||
"webwidget",
|
||||
"monitoring",
|
||||
"widget",
|
||||
"typescript",
|
||||
"web component",
|
||||
"UI",
|
||||
"frontend",
|
||||
"npm package"
|
||||
]
|
||||
}
|
||||
}
|
||||
6278
pnpm-lock.yaml
6278
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
259
readme.md
259
readme.md
|
|
@ -1,34 +1,245 @@
|
|||
# @uptimelink/webwidget
|
||||
the webwidget for public use of uptimelink
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@uptimelink/webwidget)
|
||||
* [gitlab.com (source)](https://gitlab.com/uptimelink/webwidget)
|
||||
* [github.com (source mirror)](https://github.com/uptimelink/webwidget)
|
||||
* [docs (typedoc)](https://uptimelink.gitlab.io/webwidget/)
|
||||
## Install
|
||||
|
||||
## Status for master
|
||||
To install the `@uptimelink/webwidget` package, you need to have Node.js and npm (or yarn) installed. Once you have these prerequisites, you can install the package via npm by running the following command in your terminal:
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||
```bash
|
||||
npm install @uptimelink/webwidget
|
||||
```
|
||||
|
||||
Alternatively, if you use yarn, you can run:
|
||||
|
||||
```bash
|
||||
yarn add @uptimelink/webwidget
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Use TypeScript for best in class intellisense
|
||||
For further information read the linked docs at the top of this readme.
|
||||
### Introduction
|
||||
The `@uptimelink/webwidget` package provides a web component that can be embedded into web pages to display uptime information for a given project on the UptimeLink platform. The component is implemented using TypeScript and leverages modern web standards including Web Components and LitElement.
|
||||
|
||||
> UNLICENSED licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
### Basic Setup
|
||||
First, you will need to import the `UptimelinkWebwidget` class and define it in your project. To do this, create an HTML file and include a script to register the web component.
|
||||
|
||||
[](https://maintainedby.lossless.com)
|
||||
```typescript
|
||||
// index.ts
|
||||
import { UptimelinkWebwidget } from '@uptimelink/webwidget';
|
||||
|
||||
// Append the webwidget component to the document body
|
||||
document.body.appendChild(UptimelinkWebwidget.demo());
|
||||
```
|
||||
|
||||
### Setting Up in HTML
|
||||
To use the widget in an HTML document, you will need to include the built JavaScript file. Here is an example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Uptime Link Widget</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module">
|
||||
import { UptimelinkWebwidget } from './path_to_your_built_index.js';
|
||||
customElements.define('uptimelink-webwidget', UptimelinkWebwidget);
|
||||
|
||||
const widgetElement = document.createElement('uptimelink-webwidget');
|
||||
widgetElement.projectSlug = 'uptime.link';
|
||||
document.body.appendChild(widgetElement);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Creating a Custom Page with the Widget
|
||||
You can integrate the widget into a custom page to display uptime status. First, create a new TypeScript file for the page.
|
||||
|
||||
```typescript
|
||||
// pages/customPage.ts
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const customPage = () => html`
|
||||
<style>
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
height: 120px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<uptimelink-webwidget projectSlug="custom-project-slug"></uptimelink-webwidget>
|
||||
</div>
|
||||
`;
|
||||
```
|
||||
|
||||
### Styling the Widget
|
||||
The `UptimelinkWebwidget` component comes with default styles but you can override those styles to match your site's aesthetics. Below is an example of how this can be done:
|
||||
|
||||
```typescript
|
||||
// customStyles.ts
|
||||
import { UptimelinkWebwidget } from '@uptimelink/webwidget';
|
||||
import { cssManager } from '@design.estate/dees-element';
|
||||
|
||||
UptimelinkWebwidget.styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainbox {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.statusindicator {
|
||||
background: #28a745;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
document.body.appendChild(UptimelinkWebwidget.demo());
|
||||
```
|
||||
|
||||
### Advanced Interactions
|
||||
The `UptimelinkWebwidget` allows for advanced interactions such as hovering effects to show detailed information. This is handled within the component's lifecycle and event handlers. Below is a detailed code snippet demonstrating lifecycle hooks and event listeners:
|
||||
|
||||
```typescript
|
||||
// uppimelink-webwidget.ts
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
|
||||
import { DeesWindowLayer } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('uptimelink-webwidget')
|
||||
export class UptimelinkWebwidget extends DeesElement {
|
||||
@property({ type: Boolean }) isOnTop = false;
|
||||
@property() public projectSlug: string;
|
||||
@property() public isFocused = false;
|
||||
@property() public isElevated = false;
|
||||
@property() public showExpanded: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.setupEventing();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
/* Add your custom styles here */
|
||||
</style>
|
||||
<div class="mainbox ${this.isFocused ? 'focused' : null}">
|
||||
<div class="firstLine">
|
||||
<div class="statusindicator"></div>
|
||||
<div class="statustext">All systems are up!</div>
|
||||
</div>
|
||||
${this.showExpanded ? html`
|
||||
<div class="expanded">
|
||||
/* Expanded view content */
|
||||
</div>
|
||||
` : null}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async setupEventing() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await this.updateComplete;
|
||||
const mainbox = this.shadowRoot.querySelector('.mainbox') as HTMLDivElement;
|
||||
|
||||
mainbox.onmouseenter = async () => {
|
||||
if (!this.isOnTop) {
|
||||
const rect = mainbox.getBoundingClientRect();
|
||||
const uptimelinkWidget = new UptimelinkWebwidget();
|
||||
uptimelinkWidget.isOnTop = true;
|
||||
uptimelinkWidget.style.position = 'fixed';
|
||||
uptimelinkWidget.style.top = `${rect.top}px`;
|
||||
uptimelinkWidget.style.left = `${rect.left}px`;
|
||||
document.body.append(uptimelinkWidget);
|
||||
return;
|
||||
}
|
||||
this.isElevated = true;
|
||||
this.isFocused = true;
|
||||
this.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
|
||||
await domtools.convenience.smartdelay.delayFor(200);
|
||||
if (!this.isFocused) return;
|
||||
this.showExpanded = true;
|
||||
await this.performUpdate();
|
||||
await domtools.convenience.smartdelay.delayFor(50);
|
||||
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
|
||||
expandedDiv.style.opacity = '1';
|
||||
};
|
||||
|
||||
mainbox.onmouseleave = async () => {
|
||||
if (!this.isOnTop) return;
|
||||
this.windowLayer.destroy();
|
||||
domtools.convenience.smartdelay.delayFor(200).then(() => {
|
||||
if (!this.isFocused) {
|
||||
this.isElevated = false;
|
||||
this.remove();
|
||||
}
|
||||
});
|
||||
if (!this.showExpanded) {
|
||||
this.isFocused = false;
|
||||
return;
|
||||
}
|
||||
this.showExpanded = false;
|
||||
await domtools.convenience.smartdelay.delayFor(50);
|
||||
this.isFocused = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Utilizing Multiple Widgets
|
||||
You can also utilize multiple instances of the web widget on a single page. Below is an example of how you could do this:
|
||||
|
||||
```typescript
|
||||
// multipleWidgets.ts
|
||||
import { UptimelinkWebwidget } from '@uptimelink/webwidget';
|
||||
|
||||
const widget1 = document.createElement('uptimelink-webwidget');
|
||||
const widget2 = document.createElement('uptimelink-webwidget');
|
||||
|
||||
widget1.projectSlug = 'project1';
|
||||
widget2.projectSlug = 'project2';
|
||||
|
||||
document.body.appendChild(widget1);
|
||||
document.body.appendChild(widget2);
|
||||
```
|
||||
|
||||
### Building and Serving
|
||||
To build the project, use the following npm scripts:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
To watch for changes and rebuild automatically:
|
||||
|
||||
```bash
|
||||
npm run watch
|
||||
```
|
||||
|
||||
### Testing
|
||||
Currently, the `test` script is identical to the `build` script. Running tests requires building the project:
|
||||
|
||||
```bash
|
||||
npm run test
|
||||
```
|
||||
|
||||
### Contributing
|
||||
Contributions to the `@uptimelink/webwidget` project are welcome! Please follow the guidelines provided in the repository. Reach out on the project issues page for discussions, questions, or follow the established process for submitting pull requests.
|
||||
|
||||
### Conclusion
|
||||
This guide covered the steps needed to install, set up, and use the `@uptimelink/webwidget` package in your TypeScript projects. We also explored various ways to customize and extend the widget, ensuring seamless integration into your existing web applications. For more detailed information, refer to the [documentation](https://uptimelink.gitlab.io/webwidget/).
|
||||
|
||||
Feel free to check the links provided in the initial sections for more context and updates about the project's status and availability.
|
||||
undefined
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
* autocreated commitinfo by @push.rocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@uptime.link_private/webwidget',
|
||||
version: '1.0.78',
|
||||
description: 'the webwidget for public use of uptimelink'
|
||||
name: '@uptime.link/webwidget',
|
||||
version: '1.0.79',
|
||||
description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
import { UptimelinkWindowLayer } from './uptimelink-windowlayer.js';
|
||||
import { DeesWindowLayer } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
|
@ -171,7 +171,7 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||
`;
|
||||
}
|
||||
|
||||
public windowLayer: UptimelinkWindowLayer;
|
||||
public windowLayer: DeesWindowLayer;
|
||||
private async setupEventing() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await this.updateComplete;
|
||||
|
|
@ -190,7 +190,7 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||
}
|
||||
this.isElevated = true;
|
||||
this.isFocused = true;
|
||||
this.windowLayer = await UptimelinkWindowLayer.createAndShow({
|
||||
this.windowLayer = await DeesWindowLayer.createAndShow({
|
||||
blur: true,
|
||||
});
|
||||
await domtools.convenience.smartdelay.delayFor(200);
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'uptimelink-windowlayer': UptimelinkWindowLayer;
|
||||
}
|
||||
}
|
||||
|
||||
export interface IOptions_UptimeLinkWindowLayer {
|
||||
blur: boolean;
|
||||
}
|
||||
|
||||
@customElement('uptimelink-windowlayer')
|
||||
export class UptimelinkWindowLayer extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<uptimelink-windowlayer></uptimelink-windowlayer>`;
|
||||
|
||||
public static async createAndShow(optionsArg?: IOptions_UptimeLinkWindowLayer) {
|
||||
const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
|
||||
const windowLayer = new UptimelinkWindowLayer();
|
||||
windowLayer.options = {
|
||||
...windowLayer.options,
|
||||
...optionsArg,
|
||||
}
|
||||
document.body.append(windowLayer);
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
||||
windowLayer.show();
|
||||
return windowLayer;
|
||||
}
|
||||
|
||||
@state()
|
||||
public options: IOptions_UptimeLinkWindowLayer = {
|
||||
blur: false
|
||||
};
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public visible = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.windowOverlay {
|
||||
transition: all 0.2s;
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.0);
|
||||
backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
|
||||
pointer-events: none;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.visible {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
|
||||
}
|
||||
</style>
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
setTimeout(() => {
|
||||
this.visible = true;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
dispatchClicked() {
|
||||
this.dispatchEvent(new CustomEvent('clicked'));
|
||||
}
|
||||
|
||||
public toggleVisibility () {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
|
||||
public async show() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
this.visible = true;
|
||||
}
|
||||
|
||||
public async hide() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
this.visible = false;
|
||||
}
|
||||
|
||||
public async destroy() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
await this.hide();
|
||||
await domtools.convenience.smartdelay.delayFor(300);
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user