Compare commits

...

8 Commits

Author SHA1 Message Date
6df2eb5acc 1.4.1
Some checks failed
Default (tags) / security (push) Failing after 17s
Default (tags) / test (push) Failing after 12s
Default (tags) / release (push) Has been skipped
Default (tags) / metadata (push) Has been skipped
2025-01-20 03:59:23 +01:00
469f8e0f21 fix(dependencies): Update dependency versions for smartpromise, webcontainer/api, tapbundle, and @types/node 2025-01-20 03:59:23 +01:00
3712f6ef90 1.4.0
Some checks failed
Default (tags) / security (push) Failing after 17s
Default (tags) / test (push) Failing after 12s
Default (tags) / release (push) Has been skipped
Default (tags) / metadata (push) Has been skipped
2025-01-20 03:43:21 +01:00
d2646cd62c feat(dees-terminal): Enhanced the dees-terminal component to support environment variable settings and improved setup command execution. 2025-01-20 03:43:20 +01:00
f29ca0ba0b 1.3.4
Some checks failed
Default (tags) / security (push) Failing after 18s
Default (tags) / test (push) Failing after 12s
Default (tags) / release (push) Has been skipped
Default (tags) / metadata (push) Has been skipped
2025-01-15 16:00:03 +01:00
0c273a818d fix(chart): Fix chart rendering and appearance issues in the DeesChartArea component. 2025-01-15 16:00:03 +01:00
6e8099c6f4 1.3.3
Some checks failed
Default (tags) / security (push) Failing after 18s
Default (tags) / test (push) Failing after 12s
Default (tags) / release (push) Has been skipped
Default (tags) / metadata (push) Has been skipped
2024-12-17 19:44:47 +01:00
07c68b82a4 fix(dees-input-multitoggle): Add missing TypeScript declaration for dees-input-multitoggle 2024-12-17 19:44:47 +01:00
7 changed files with 6889 additions and 5025 deletions

View File

@ -1,5 +1,34 @@
# Changelog # Changelog
## 2025-01-20 - 1.4.1 - fix(dependencies)
Update dependency versions for smartpromise, webcontainer/api, tapbundle, and @types/node
- Update @push.rocks/smartpromise to version ^4.2.0
- Downgrade @webcontainer/api to version 1.2.0
- Update @push.rocks/tapbundle to version ^5.5.6
- Update @types/node to version ^22.10.7
## 2025-01-20 - 1.4.0 - feat(dees-terminal)
Enhanced the dees-terminal component to support environment variable settings and improved setup command execution.
- Added environment property to pass custom environment variables.
- Introduced webcontainerDeferred to handle the promise for web container creation.
- Enhanced demo to illustrate environment variable usage.
- Improved async interaction with the terminal for setting environment variables and executing setup commands.
## 2025-01-15 - 1.3.4 - fix(chart)
Fix chart rendering and appearance issues in the DeesChartArea component.
- Resolved issues with chart dimensions calculation based on padding.
- Adjusted grid and axis lines appearance for better visibility.
- Updated tooltip and grid line styling for better accessibility.
- Improved series data representation as time-series for more accurate display.
## 2024-12-17 - 1.3.3 - fix(dees-input-multitoggle)
Add missing TypeScript declaration for dees-input-multitoggle
- Added a missing declaration to the HTMLElementTagNameMap for 'dees-input-multitoggle' element.
## 2024-12-09 - 1.3.2 - fix(metadata) ## 2024-12-09 - 1.3.2 - fix(metadata)
Updated package metadata and readme for better project description and structure. Updated package metadata and readme for better project description and structure.

View File

@ -1,6 +1,6 @@
{ {
"name": "@design.estate/dees-catalog", "name": "@design.estate/dees-catalog",
"version": "1.3.2", "version": "1.4.1",
"private": false, "private": false,
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.", "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
"main": "dist_ts_web/index.js", "main": "dist_ts_web/index.js",
@ -15,23 +15,23 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@design.estate/dees-domtools": "^2.0.61", "@design.estate/dees-domtools": "^2.1.1",
"@design.estate/dees-element": "^2.0.39", "@design.estate/dees-element": "^2.0.39",
"@design.estate/dees-wcctools": "^1.0.90", "@design.estate/dees-wcctools": "^1.0.90",
"@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-brands-svg-icons": "^6.7.2",
"@fortawesome/free-regular-svg-icons": "^6.6.0", "@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.7.2",
"@push.rocks/smarti18n": "^1.0.4", "@push.rocks/smarti18n": "^1.0.4",
"@push.rocks/smartpromise": "^4.0.4", "@push.rocks/smartpromise": "^4.2.0",
"@push.rocks/smartstring": "^4.0.15", "@push.rocks/smartstring": "^4.0.15",
"@tsclass/tsclass": "^4.1.2", "@tsclass/tsclass": "^4.4.0",
"@webcontainer/api": "1.2.0", "@webcontainer/api": "1.2.0",
"apexcharts": "^3.54.0", "apexcharts": "^4.3.0",
"highlight.js": "11.10.0", "highlight.js": "11.11.1",
"ibantools": "^4.5.1", "ibantools": "^4.5.1",
"monaco-editor": "^0.52.0", "monaco-editor": "^0.52.2",
"pdfjs-dist": "^4.6.82", "pdfjs-dist": "^4.10.38",
"xterm": "^5.3.0", "xterm": "^5.3.0",
"xterm-addon-fit": "^0.8.0" "xterm-addon-fit": "^0.8.0"
}, },
@ -39,10 +39,10 @@
"@git.zone/tsbuild": "^2.1.84", "@git.zone/tsbuild": "^2.1.84",
"@git.zone/tsbundle": "^2.0.15", "@git.zone/tsbundle": "^2.0.15",
"@git.zone/tstest": "^1.0.90", "@git.zone/tstest": "^1.0.90",
"@git.zone/tswatch": "^2.0.23", "@git.zone/tswatch": "^2.0.37",
"@push.rocks/projectinfo": "^5.0.2", "@push.rocks/projectinfo": "^5.0.2",
"@push.rocks/tapbundle": "^5.3.0", "@push.rocks/tapbundle": "^5.5.6",
"@types/node": "^22.7.4" "@types/node": "^22.10.7"
}, },
"files": [ "files": [
"ts/**/*", "ts/**/*",

11580
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.3.2', version: '1.4.1',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

View File

@ -38,7 +38,7 @@ export class DeesChartArea extends DeesElement {
super(); super();
domtools.elementBasic.setup(); domtools.elementBasic.setup();
this.resizeObserver = new ResizeObserver(entries => { this.resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) { for (let entry of entries) {
if (entry.target.classList.contains('mainbox')) { if (entry.target.classList.contains('mainbox')) {
this.resizeChart(); // Call resizeChart when the .mainbox size changes this.resizeChart(); // Call resizeChart when the .mainbox size changes
@ -55,7 +55,7 @@ export class DeesChartArea extends DeesElement {
}); });
this.registerGarbageFunction(async () => { this.registerGarbageFunction(async () => {
this.resizeObserver.disconnect(); this.resizeObserver.disconnect();
}) });
} }
public static styles = [ public static styles = [
@ -71,7 +71,7 @@ export class DeesChartArea extends DeesElement {
position: relative; position: relative;
width: 100%; width: 100%;
height: 400px; height: 400px;
background: #222; background: #111;
border-radius: 8px; border-radius: 8px;
} }
@ -95,10 +95,12 @@ export class DeesChartArea extends DeesElement {
]; ];
public render(): TemplateResult { public render(): TemplateResult {
return html` <div class="mainbox"> return html`
<div class="mainbox">
<div class="chartTitle">${this.label}</div> <div class="chartTitle">${this.label}</div>
<div class="chartContainer"></div> <div class="chartContainer"></div>
</div> `; </div>
`;
} }
public async firstUpdated() { public async firstUpdated() {
@ -107,11 +109,23 @@ export class DeesChartArea extends DeesElement {
series: [ series: [
{ {
name: 'cpu', name: 'cpu',
data: [31, 40, 28, 51, 42, 109, 100], data: [
{ x: '2025-01-15T03:00:00', y: 25 },
{ x: '2025-01-15T07:00:00', y: 30 },
{ x: '2025-01-15T11:00:00', y: 20 },
{ x: '2025-01-15T15:00:00', y: 35 },
{ x: '2025-01-15T19:00:00', y: 25 },
],
}, },
{ {
name: 'memory', name: 'memory',
data: [11, 32, 45, 32, 34, 52, 41], data: [
{ x: '2025-01-15T03:00:00', y: 10 },
{ x: '2025-01-15T07:00:00', y: 12 },
{ x: '2025-01-15T11:00:00', y: 10 },
{ x: '2025-01-15T15:00:00', y: 30 },
{ x: '2025-01-15T19:00:00', y: 40 },
],
}, },
], ],
chart: { chart: {
@ -130,35 +144,62 @@ export class DeesChartArea extends DeesElement {
curve: 'smooth', curve: 'smooth',
}, },
xaxis: { xaxis: {
crosshairs: { type: 'datetime', // Time-series data
stroke: { labels: {
width: 1, format: 'hh:mm A', // Time formatting
color: '#444', style: {
colors: '#9e9e9e', // Label color
fontSize: '12px',
}, },
}, },
type: 'datetime', axisBorder: {
categories: [ show: false, // Hide x-axis border
'2018-09-19T00:00:00.000Z', },
'2018-09-19T01:30:00.000Z', axisTicks: {
'2018-09-19T02:30:00.000Z', show: false, // Hide x-axis ticks
'2018-09-19T03:30:00.000Z', },
'2018-09-19T04:30:00.000Z',
'2018-09-19T05:30:00.000Z',
'2018-09-19T06:30:00.000Z',
],
}, },
yaxis: { yaxis: {
crosshairs: { min: 0,
stroke: { labels: {
width: 1, formatter: function (val: number) {
color: '#444', return `${val} Mbps`; // Format Y-axis labels
}, },
style: {
colors: '#9e9e9e', // Label color
fontSize: '12px',
},
},
axisBorder: {
show: false, // Hide y-axis border
},
axisTicks: {
show: false, // Hide y-axis ticks
}, },
}, },
tooltip: { tooltip: {
shared: true, // Enables the tooltip to display across series
intersect: false, // Allows hovering anywhere on the chart
followCursor: true, // Makes tooltip follow mouse even between points
x: { x: {
format: 'dd/MM/yy HH:mm', format: 'dd/MM/yy HH:mm',
}, },
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
// Get the x value
const xValue = w.globals.labels[dataPointIndex];
// Iterate through each series and get its value
let tooltipContent = `<div style="padding: 10px; background: #1e1e2f; color: white; border-radius: 5px;">`;
tooltipContent += ``; // `<strong>Time:</strong> ${xValue}<br/>`;
series.forEach((s, index) => {
const label = w.globals.seriesNames[index]; // Get series label
const value = s[dataPointIndex]; // Get value at data point
tooltipContent += `<strong>${label}:</strong> ${value} Mbps<br/>`;
});
tooltipContent += `</div>`;
return tooltipContent;
},
}, },
grid: { grid: {
xaxis: { xaxis: {
@ -171,8 +212,8 @@ export class DeesChartArea extends DeesElement {
show: true, show: true,
}, },
}, },
borderColor: '#666', // Set the color of the grid lines borderColor: '#333', // Set the color of the grid lines
strokeDashArray: 2, // Solid line strokeDashArray: 0, // Solid line
row: { row: {
colors: [], // This can be used to alternate the shading of the horizontal rows colors: [], // This can be used to alternate the shading of the horizontal rows
opacity: 0.1, opacity: 0.1,
@ -182,6 +223,15 @@ export class DeesChartArea extends DeesElement {
opacity: 0.1, opacity: 0.1,
}, },
}, },
fill: {
type: 'gradient', // Gradient fill for the area
gradient: {
shade: 'dark',
type: 'vertical',
gradientToColors: ['#9c27b0'], // Gradient color ending
stops: [0, 100],
},
},
}; };
this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options); this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
await this.chart.render(); await this.chart.render();
@ -189,20 +239,22 @@ export class DeesChartArea extends DeesElement {
} }
public async resizeChart() { public async resizeChart() {
const element = this.shadowRoot.querySelector('.chartContainer'); const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
// Get computed style of the element // Get computed style of the element
const style = window.getComputedStyle(element); const styleMainbox = window.getComputedStyle(mainbox);
const styleChartContainer = window.getComputedStyle(chartContainer);
// Extract padding values // Extract padding values
const paddingTop = parseInt(style.paddingTop, 10); const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
const paddingBottom = parseInt(style.paddingBottom, 10); const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
const paddingLeft = parseInt(style.paddingLeft, 10); const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
const paddingRight = parseInt(style.paddingRight, 10); const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
// Calculate the actual width and height to use, subtracting padding // Calculate the actual width and height to use, subtracting padding
const actualWidth = element.clientWidth - paddingLeft - paddingRight; const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
const actualHeight = element.clientHeight - paddingTop - paddingBottom; const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
await this.chart.updateOptions({ await this.chart.updateOptions({
chart: { chart: {

View File

@ -12,6 +12,12 @@ import {
const { demoFunc } = await import('./dees-input-multitoggle.demo.js'); const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
declare global {
interface HTMLElementTagNameMap {
'dees-input-multitoggle': DeesInputMultitoggle;
}
}
@customElement('dees-input-multitoggle') @customElement('dees-input-multitoggle')
export class DeesInputMultitoggle extends DeesElement { export class DeesInputMultitoggle extends DeesElement {
public static demo = demoFunc; public static demo = demoFunc;

View File

@ -22,13 +22,25 @@ declare global {
@customElement('dees-terminal') @customElement('dees-terminal')
export class DeesTerminal extends DeesElement { export class DeesTerminal extends DeesElement {
public static demo = () => html` <dees-terminal></dees-terminal> `; public static demo = () => html` <dees-terminal
.environment=${{
NODE_ENV: 'development',
PORT: '3000',
}}
></dees-terminal> `;
// INSTANCE // INSTANCE
private resizeObserver: ResizeObserver; private resizeObserver: ResizeObserver;
@property() @property()
public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`; public setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
@property()
environment: {[key: string]: string} = {};
// exposing webcontainer
private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
public webcontainerPromise = this.webcontainerDeferred.promise;
constructor() { constructor() {
super(); super();
@ -282,8 +294,15 @@ export class DeesTerminal extends DeesElement {
input.write(data); input.write(data);
}); });
await this.waitForPrompt(term, '~/'); await this.waitForPrompt(term, '~/');
// lets set the environment variables
await this.setEnvironmentVariables(this.environment, webcontainerInstance);
input.write(`source source.env\n`);
await this.waitForPrompt(term, '~/');
// lets run the setup command
input.write(this.setupCommand); input.write(this.setupCommand);
input.write(`\n`); await this.waitForPrompt(term, '~/');
input.write(`clear && echo 'welcome'\n`);
this.webcontainerDeferred.resolve(webcontainerInstance);
} }
async connectedCallback(): Promise<void> { async connectedCallback(): Promise<void> {
@ -300,14 +319,16 @@ export class DeesTerminal extends DeesElement {
this.fitAddon.fit(); this.fitAddon.fit();
} }
private async waitForPrompt(term: Terminal, prompt: string): Promise<void> { public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
return new Promise<void>((resolve) => { return new Promise<void>((resolve) => {
const checkPrompt = () => { const checkPrompt = () => {
const lines = term.buffer.active; const lines = term.buffer.active;
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
const line = lines.getLine(i); const line = lines.getLine(i);
if (line && line.translateToString().includes(prompt)) { if (line && line.translateToString().includes(prompt)) {
setTimeout(() => {
resolve(); resolve();
}, 100);
return; return;
} }
} }
@ -317,4 +338,18 @@ export class DeesTerminal extends DeesElement {
checkPrompt(); checkPrompt();
}); });
} }
public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
let envFile = ``
for (const key in envArg) {
envFile += `export ${key}="${envArg[key]}"\n`;
}
await webcontainerInstance.mount({'source.env': {
file: {
contents: envFile,
}
}});
}
} }