fix(structure): group components into groups inside the repo
This commit is contained in:
@@ -0,0 +1,199 @@
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<style>
|
||||
.demoWrapper {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 48px;
|
||||
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="demoWrapper">
|
||||
<div class="section">
|
||||
<div class="section-title">TypeScript Code Example</div>
|
||||
<div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
|
||||
<dees-dataview-codebox proglang="typescript">
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
class UserService {
|
||||
private users: User[] = [];
|
||||
|
||||
constructor(private apiUrl: string) {
|
||||
console.log('UserService initialized');
|
||||
}
|
||||
|
||||
async getUsers(): Promise<User[]> {
|
||||
try {
|
||||
const response = await fetch(this.apiUrl);
|
||||
const data = await response.json();
|
||||
return data.users;
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
addUser(user: User): void {
|
||||
this.users.push(user);
|
||||
}
|
||||
}
|
||||
|
||||
// Usage example
|
||||
const service = new UserService('https://api.example.com/users');
|
||||
const users = await service.getUsers();
|
||||
console.log('Found users:', users.length);
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">JavaScript Example</div>
|
||||
<div class="section-description">Modern JavaScript with ES6+ features.</div>
|
||||
<dees-dataview-codebox proglang="javascript">
|
||||
// Array manipulation examples
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
const doubled = numbers.map(n => n * 2);
|
||||
const filtered = numbers.filter(n => n > 3);
|
||||
|
||||
// Object destructuring
|
||||
const user = { name: 'John', age: 30, city: 'New York' };
|
||||
const { name, age } = user;
|
||||
|
||||
// Promise handling
|
||||
const fetchData = async (url) => {
|
||||
const response = await fetch(url);
|
||||
return response.json();
|
||||
};
|
||||
|
||||
// Modern syntax
|
||||
const greet = (name = 'World') => \`Hello, \${name}!\`;
|
||||
console.log(greet('ShadCN'));
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Python Example</div>
|
||||
<div class="section-description">Python code with classes and type hints.</div>
|
||||
<dees-dataview-codebox proglang="python">
|
||||
from typing import List, Optional
|
||||
import asyncio
|
||||
|
||||
class DataProcessor:
|
||||
"""A simple data processor class"""
|
||||
|
||||
def __init__(self, name: str):
|
||||
self.name = name
|
||||
self.data: List[dict] = []
|
||||
|
||||
async def process_data(self, items: List[dict]) -> List[dict]:
|
||||
"""Process data items asynchronously"""
|
||||
results = []
|
||||
for item in items:
|
||||
# Simulate async processing
|
||||
await asyncio.sleep(0.1)
|
||||
results.append({
|
||||
'id': item.get('id'),
|
||||
'processed': True,
|
||||
'processor': self.name
|
||||
})
|
||||
return results
|
||||
|
||||
def get_summary(self) -> dict:
|
||||
return {
|
||||
'processor': self.name,
|
||||
'items_processed': len(self.data)
|
||||
}
|
||||
|
||||
# Usage
|
||||
processor = DataProcessor("Main")
|
||||
data = await processor.process_data([{'id': 1}, {'id': 2}])
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">CSS Example</div>
|
||||
<div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
|
||||
<dees-dataview-codebox proglang="css">
|
||||
/* Modern CSS with custom properties */
|
||||
:root {
|
||||
--primary-color: #3b82f6;
|
||||
--secondary-color: #10b981;
|
||||
--background: #ffffff;
|
||||
--text-color: #09090b;
|
||||
--border-radius: 6px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--background);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">JSON Example</div>
|
||||
<div class="section-description">JSON configuration with proper formatting.</div>
|
||||
<dees-dataview-codebox proglang="json">
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "1.10.7",
|
||||
"description": "A comprehensive catalog of web components",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element",
|
||||
"test": "tstest test/ --web --verbose"
|
||||
},
|
||||
"dependencies": {
|
||||
"@design.estate/dees-element": "^2.0.45",
|
||||
"highlight.js": "^11.9.0"
|
||||
}
|
||||
}
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
@@ -0,0 +1,260 @@
|
||||
import { demoFunc } from './dees-dataview-codebox.demo.js';
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
state,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
|
||||
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
import * as smartstring from '@push.rocks/smartstring';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-dataview-codebox': DeesDataviewCodebox;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-dataview-codebox')
|
||||
export class DeesDataviewCodebox extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property()
|
||||
accessor progLang: string = 'typescript';
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
reflect: true,
|
||||
})
|
||||
accessor codeToDisplay: string = '';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-family: ${cssGeistFontFamily};
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.appbar {
|
||||
position: relative;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
height: 32px;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.appbar .fileName {
|
||||
line-height: inherit;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
position: relative;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacesLabel {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.languageLabel {
|
||||
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
|
||||
padding: 0px 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
|
||||
.codegrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lineNumbers {
|
||||
color: ${cssManager.bdTheme('#71717a', '#52525b')};
|
||||
padding: 24px 16px 0px 0px;
|
||||
text-align: right;
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
}
|
||||
|
||||
.lineCounter:last-child {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
margin: 0px;
|
||||
padding: 24px 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: 400;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
code,
|
||||
code *,
|
||||
.lineNumbers {
|
||||
line-height: 1.4em;
|
||||
font-weight: 200;
|
||||
font-family: ${cssMonoFontFamily};
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: ${cssManager.bdTheme('#059669', '#10b981')};
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
|
||||
}
|
||||
|
||||
.hljs-function {
|
||||
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
|
||||
.hljs-attr {
|
||||
color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
|
||||
}
|
||||
|
||||
.hljs-variable {
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
class="mainbox"
|
||||
@contextmenu="${(eventArg) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'About',
|
||||
iconName: 'circleInfo',
|
||||
action: async () => {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}"
|
||||
>
|
||||
<div class="appbar">
|
||||
<dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
|
||||
<div class="fileName">index.ts</div>
|
||||
<dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
|
||||
</div>
|
||||
<div class="codegrid">
|
||||
<div class="lineNumbers">
|
||||
${(() => {
|
||||
let lineCounter = 0;
|
||||
return this.codeToDisplay.split('\n').map((lineArg) => {
|
||||
lineCounter++;
|
||||
return html`<div class="lineCounter">${lineCounter}</div>`;
|
||||
});
|
||||
})()}
|
||||
</div>
|
||||
<pre><code></code></pre>
|
||||
</div>
|
||||
<div class="bottomBar">
|
||||
<div class="spacesLabel">Spaces: 2</div>
|
||||
<div class="languageLabel">${this.progLang}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private codeToDisplayStore = '';
|
||||
|
||||
public async updated(_changedProperties) {
|
||||
super.updated(_changedProperties);
|
||||
console.log('highlighting now');
|
||||
console.log(this.childNodes);
|
||||
const slottedCodeNodes: Text[] = [];
|
||||
this.childNodes.forEach((childNode) => {
|
||||
if (childNode.nodeName === '#text') {
|
||||
slottedCodeNodes.push(childNode as Text);
|
||||
}
|
||||
});
|
||||
if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
|
||||
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
|
||||
}
|
||||
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
|
||||
this.codeToDisplayStore = smartstring.indent
|
||||
.normalize(slottedCodeNodes[0].wholeText)
|
||||
.trimStart();
|
||||
this.codeToDisplay = this.codeToDisplayStore;
|
||||
}
|
||||
await domtools.plugins.smartdelay.delayFor(0);
|
||||
const localCodeNode = this.shadowRoot.querySelector('code');
|
||||
const html = hlight.highlight(this.codeToDisplayStore, {
|
||||
language: this.progLang,
|
||||
ignoreIllegals: true,
|
||||
});
|
||||
localCodeNode.innerHTML = html.value;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-dataview-codebox.js';
|
||||
@@ -0,0 +1,164 @@
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
export const demoFunc = () => html` <style>
|
||||
.demo {
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
|
||||
display: block;
|
||||
content: '';
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
margin-bottom: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.demo-note {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
</style>
|
||||
<div class="demo">
|
||||
<div class="demo-note">
|
||||
Right-click on any detail row to copy the value, key, or key:value combination
|
||||
</div>
|
||||
<div class="demo-grid">
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Service Health Status</div>
|
||||
<dees-dataview-statusobject
|
||||
.statusObject=${{
|
||||
id: '1',
|
||||
name: 'API Gateway Service',
|
||||
combinedStatus: 'ok',
|
||||
combinedStatusText: 'All systems operational',
|
||||
details: [
|
||||
{
|
||||
name: 'Response Time',
|
||||
value: '45ms (avg)',
|
||||
status: 'ok',
|
||||
statusText: 'Within normal range',
|
||||
},
|
||||
{
|
||||
name: 'Uptime',
|
||||
value: '99.99% (30 days)',
|
||||
status: 'ok',
|
||||
statusText: 'Excellent uptime',
|
||||
},
|
||||
{
|
||||
name: 'Active Connections',
|
||||
value: '1,234 / 10,000',
|
||||
status: 'ok',
|
||||
statusText: 'Normal load',
|
||||
},
|
||||
{
|
||||
name: 'SSL Certificate',
|
||||
value: 'Valid until 2024-12-31',
|
||||
status: 'ok',
|
||||
statusText: 'Certificate valid',
|
||||
},
|
||||
],
|
||||
} as tsclass.code.IStatusObject}
|
||||
>
|
||||
</dees-dataview-statusobject>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Database Cluster Status</div>
|
||||
<dees-dataview-statusobject
|
||||
.statusObject=${{
|
||||
id: '2',
|
||||
name: 'PostgreSQL Cluster',
|
||||
combinedStatus: 'partly_ok',
|
||||
combinedStatusText: 'Minor issues detected',
|
||||
details: [
|
||||
{
|
||||
name: 'Primary Node',
|
||||
value: 'db-primary-01 (healthy)',
|
||||
status: 'ok',
|
||||
statusText: 'Operating normally',
|
||||
},
|
||||
{
|
||||
name: 'Replica Lag',
|
||||
value: '2.5 seconds',
|
||||
status: 'partly_ok',
|
||||
statusText: 'Slightly elevated',
|
||||
},
|
||||
{
|
||||
name: 'Disk Usage',
|
||||
value: '78% (312GB / 400GB)',
|
||||
status: 'partly_ok',
|
||||
statusText: 'Approaching threshold',
|
||||
},
|
||||
{
|
||||
name: 'Connection Pool',
|
||||
value: '89 / 100 connections',
|
||||
status: 'ok',
|
||||
statusText: 'Within limits',
|
||||
},
|
||||
],
|
||||
} as tsclass.code.IStatusObject}
|
||||
>
|
||||
</dees-dataview-statusobject>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Build Pipeline Status</div>
|
||||
<dees-dataview-statusobject
|
||||
.statusObject=${{
|
||||
id: '3',
|
||||
name: 'CI/CD Pipeline',
|
||||
combinedStatus: 'not_ok',
|
||||
combinedStatusText: 'Build failure',
|
||||
details: [
|
||||
{
|
||||
name: 'Last Build',
|
||||
value: 'Build #1234 - Failed',
|
||||
status: 'not_ok',
|
||||
statusText: 'Test failures',
|
||||
},
|
||||
{
|
||||
name: 'Failed Tests',
|
||||
value: '3 tests failed: auth.spec.ts, user.spec.ts, api.spec.ts',
|
||||
status: 'not_ok',
|
||||
statusText: 'Unit test failures',
|
||||
},
|
||||
{
|
||||
name: 'Code Coverage',
|
||||
value: '82.5% (target: 85%)',
|
||||
status: 'partly_ok',
|
||||
statusText: 'Below target',
|
||||
},
|
||||
{
|
||||
name: 'Build Duration',
|
||||
value: '12m 34s',
|
||||
status: 'ok',
|
||||
statusText: 'Normal duration',
|
||||
},
|
||||
],
|
||||
} as tsclass.code.IStatusObject}
|
||||
>
|
||||
</dees-dataview-statusobject>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
@@ -0,0 +1,251 @@
|
||||
import * as colors from '../../00colors.js';
|
||||
import * as plugins from '../../00plugins.js';
|
||||
|
||||
import { demoFunc } from './dees-dataview-statusobject.demo.js';
|
||||
import {
|
||||
DeesElement,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
state,
|
||||
cssManager,
|
||||
css,
|
||||
type CSSResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-dataview-statusobject': DeesDataviewStatusobject;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-dataview-statusobject')
|
||||
export class DeesDataviewStatusobject extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
border-radius: 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
min-height: 48px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 48px auto 100px;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
|
||||
}
|
||||
|
||||
.statusdot {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
|
||||
margin: auto;
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 0% 63.9% / 0.2)', 'hsl(0 0% 45.1% / 0.2)')};
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.copyMain {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
text-align: center;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.copyMain:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
|
||||
}
|
||||
|
||||
.copyMain:active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 14.9%)')};
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.statusdot.ok {
|
||||
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.2)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
|
||||
}
|
||||
|
||||
.statusdot.not_ok {
|
||||
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.2)', 'hsl(0 72.2% 50.6% / 0.2)')};
|
||||
}
|
||||
|
||||
.statusdot.partly_ok {
|
||||
background: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(25 95% 53% / 0.2)', 'hsl(25 95% 63% / 0.2)')};
|
||||
}
|
||||
|
||||
.detail {
|
||||
min-height: 60px;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 48px auto;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
|
||||
transition: background-color 0.15s ease;
|
||||
padding-right: 16px;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
.detail:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
||||
}
|
||||
|
||||
.detail:active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
|
||||
}
|
||||
|
||||
.detail .detailsText {
|
||||
padding: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail .detailsText .label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.detail .detailsText .value {
|
||||
font-size: 14px;
|
||||
font-family: 'Intel One Mono', 'Geist Mono', monospace;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
line-height: 1.5;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
<div class="heading">
|
||||
<div class="statusdot ${this.statusObject?.combinedStatus}"></div>
|
||||
<h1>${this.statusObject?.name || 'No status object assigned'}</h1>
|
||||
<div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
|
||||
</div>
|
||||
${this.statusObject?.details?.map((detailArg) => {
|
||||
return html`
|
||||
<div
|
||||
class="detail"
|
||||
@contextmenu=${(event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
DeesContextmenu.openContextMenuWithOptions(event, [
|
||||
{
|
||||
name: 'Copy Value',
|
||||
iconName: 'lucide:copy',
|
||||
action: async () => {
|
||||
await this.copyToClipboard(detailArg.value, 'Value');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Copy Key',
|
||||
iconName: 'lucide:key',
|
||||
action: async () => {
|
||||
await this.copyToClipboard(detailArg.name, 'Key');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Copy Key:Value',
|
||||
iconName: 'lucide:copy-plus',
|
||||
action: async () => {
|
||||
await this.copyToClipboard(`${detailArg.name}: ${detailArg.value}`, 'Key:Value');
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
<div class="statusdot ${detailArg.status}"></div>
|
||||
<div class="detailsText">
|
||||
<div class="label">${detailArg.name}</div>
|
||||
<div class="value">${detailArg.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {}
|
||||
|
||||
private async copyToClipboard(text: string, type: string = 'Text') {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
console.log(`${type} copied to clipboard`);
|
||||
// You could add visual feedback here if needed
|
||||
} catch (err) {
|
||||
console.error(`Failed to copy ${type}:`, err);
|
||||
}
|
||||
}
|
||||
|
||||
private async handleCopyAsJson() {
|
||||
if (!this.statusObject) return;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
|
||||
|
||||
// Show feedback
|
||||
const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement;
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Copied!';
|
||||
|
||||
// Apply success styles based on theme
|
||||
const isDark = !this.goBright;
|
||||
button.style.background = isDark ? 'hsl(142.1 70.6% 45.3% / 0.1)' : 'hsl(142.1 76.2% 36.3% / 0.1)';
|
||||
button.style.borderColor = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
|
||||
button.style.color = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
|
||||
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.style.background = '';
|
||||
button.style.borderColor = '';
|
||||
button.style.color = '';
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-dataview-statusobject.js';
|
||||
3
ts_web/elements/00group-dataview/index.ts
Normal file
3
ts_web/elements/00group-dataview/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
// Data View Components
|
||||
export * from './dees-dataview-codebox/index.js';
|
||||
export * from './dees-dataview-statusobject/index.js';
|
||||
Reference in New Issue
Block a user