581 lines
15 KiB
TypeScript
581 lines
15 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
state,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
export interface IConfigField {
|
|
key: string;
|
|
value: string | number | boolean | string[] | null;
|
|
type?: 'text' | 'boolean' | 'badge' | 'pills' | 'code' | 'link';
|
|
description?: string;
|
|
linkTo?: string;
|
|
}
|
|
|
|
export interface IConfigSectionAction {
|
|
label: string;
|
|
icon?: string;
|
|
event?: string;
|
|
detail?: any;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-config-section': SzConfigSection;
|
|
}
|
|
}
|
|
|
|
@customElement('sz-config-section')
|
|
export class SzConfigSection extends DeesElement {
|
|
public static demo = () => html`
|
|
<sz-config-section
|
|
title="SmartProxy"
|
|
subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
|
|
icon="lucide:network"
|
|
status="enabled"
|
|
.fields=${[
|
|
{ key: 'Route Count', value: 12 },
|
|
{ key: 'ACME Enabled', value: true, type: 'boolean' },
|
|
{ key: 'Account Email', value: 'admin@example.com' },
|
|
{ key: 'Use Production', value: true, type: 'boolean' },
|
|
{ key: 'Auto Renew', value: true, type: 'boolean' },
|
|
{ key: 'Renew Threshold', value: '30 days' },
|
|
] as IConfigField[]}
|
|
></sz-config-section>
|
|
<sz-config-section
|
|
title="Email Server"
|
|
subtitle="SMTP email handling with smartmta"
|
|
icon="lucide:mail"
|
|
status="disabled"
|
|
.fields=${[
|
|
{ key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
|
|
{ key: 'Hostname', value: null },
|
|
{ key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
|
|
] as IConfigField[]}
|
|
></sz-config-section>
|
|
<sz-config-section
|
|
title="DNS Server"
|
|
subtitle="Authoritative DNS with smartdns"
|
|
icon="lucide:globe"
|
|
status="not-configured"
|
|
collapsible
|
|
.fields=${[
|
|
{ key: 'Port', value: 53 },
|
|
{ key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
|
|
] as IConfigField[]}
|
|
></sz-config-section>
|
|
`;
|
|
|
|
public static demoGroups = ['Configuration'];
|
|
|
|
@property({ type: String })
|
|
public accessor title: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor subtitle: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor icon: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor status: 'enabled' | 'disabled' | 'not-configured' | 'warning' = 'enabled';
|
|
|
|
@property({ type: Array })
|
|
public accessor fields: IConfigField[] = [];
|
|
|
|
@property({ type: Array })
|
|
public accessor actions: IConfigSectionAction[] = [];
|
|
|
|
@property({ type: Boolean })
|
|
public accessor collapsible: boolean = false;
|
|
|
|
@property({ type: Boolean })
|
|
public accessor collapsed: boolean = false;
|
|
|
|
@state()
|
|
accessor isCollapsed: boolean = false;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section {
|
|
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
|
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 20px;
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
|
|
:host([collapsible]) .section-header {
|
|
cursor: pointer;
|
|
}
|
|
|
|
:host([collapsible]) .section-header:hover {
|
|
background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-icon dees-icon {
|
|
font-size: 18px;
|
|
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
|
}
|
|
|
|
.header-text {
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.header-subtitle {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
line-height: 1.3;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Status badge */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 10px;
|
|
border-radius: 9999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-badge.enabled {
|
|
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34,197,94,0.2)')};
|
|
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
|
}
|
|
|
|
.status-badge.disabled {
|
|
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239,68,68,0.2)')};
|
|
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
|
}
|
|
|
|
.status-badge.not-configured {
|
|
background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113,113,122,0.2)')};
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
}
|
|
|
|
.status-badge.warning {
|
|
background: ${cssManager.bdTheme('#fef3c7', 'rgba(245,158,11,0.15)')};
|
|
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
|
|
}
|
|
|
|
.status-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-badge.enabled .status-dot {
|
|
background: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
|
}
|
|
|
|
.status-badge.disabled .status-dot {
|
|
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
|
}
|
|
|
|
.status-badge.not-configured .status-dot {
|
|
background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
|
}
|
|
|
|
.status-badge.warning .status-dot {
|
|
background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
|
|
}
|
|
|
|
/* Action buttons */
|
|
.header-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 150ms ease;
|
|
white-space: nowrap;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.header-action:hover {
|
|
background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
|
|
}
|
|
|
|
.header-action dees-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Chevron */
|
|
.chevron {
|
|
display: flex;
|
|
align-items: center;
|
|
transition: transform 200ms ease;
|
|
}
|
|
|
|
.chevron.collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.chevron dees-icon {
|
|
font-size: 16px;
|
|
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
|
}
|
|
|
|
/* Content */
|
|
.section-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.section-content.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* Field rows */
|
|
.field-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
|
|
gap: 16px;
|
|
}
|
|
|
|
.field-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.field-key {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
flex-shrink: 0;
|
|
min-width: 140px;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.field-value {
|
|
font-size: 13px;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
text-align: right;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.field-value.null-value {
|
|
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
|
font-style: italic;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Boolean display */
|
|
.bool-value {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bool-value.true {
|
|
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
|
}
|
|
|
|
.bool-value.false {
|
|
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
|
}
|
|
|
|
.bool-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.bool-value.true .bool-dot {
|
|
background: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
|
}
|
|
|
|
.bool-value.false .bool-dot {
|
|
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
|
}
|
|
|
|
/* Pills */
|
|
.pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 9px;
|
|
border-radius: 9999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.1)')};
|
|
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
|
}
|
|
|
|
/* Code value */
|
|
.code-value {
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
font-size: 12px;
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
}
|
|
|
|
/* Link value */
|
|
.link-value {
|
|
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.link-value:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Description hint */
|
|
.field-description {
|
|
font-size: 11px;
|
|
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
|
margin-top: 3px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Slot for custom content */
|
|
.slot-content {
|
|
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
|
|
}
|
|
|
|
.slot-content:empty {
|
|
display: none;
|
|
border-top: none;
|
|
}
|
|
|
|
/* Badge type */
|
|
.badge-value {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 9px;
|
|
border-radius: 9999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
|
}
|
|
`,
|
|
];
|
|
|
|
async connectedCallback() {
|
|
await super.connectedCallback();
|
|
this.isCollapsed = this.collapsed;
|
|
if (this.collapsible) {
|
|
this.setAttribute('collapsible', '');
|
|
}
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
const statusLabels: Record<string, string> = {
|
|
'enabled': 'Enabled',
|
|
'disabled': 'Disabled',
|
|
'not-configured': 'Not Configured',
|
|
'warning': 'Warning',
|
|
};
|
|
|
|
return html`
|
|
<div class="section">
|
|
<div
|
|
class="section-header"
|
|
@click=${() => {
|
|
if (this.collapsible) {
|
|
this.isCollapsed = !this.isCollapsed;
|
|
}
|
|
}}
|
|
>
|
|
<div class="header-left">
|
|
${this.icon ? html`
|
|
<div class="header-icon">
|
|
<dees-icon .icon=${this.icon}></dees-icon>
|
|
</div>
|
|
` : ''}
|
|
<div class="header-text">
|
|
<div class="header-title">${this.title}</div>
|
|
${this.subtitle ? html`<div class="header-subtitle">${this.subtitle}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
${this.status ? html`
|
|
<span class="status-badge ${this.status}">
|
|
<span class="status-dot"></span>
|
|
${statusLabels[this.status] || this.status}
|
|
</span>
|
|
` : ''}
|
|
${this.actions.map(action => html`
|
|
<button class="header-action" @click=${(e: Event) => {
|
|
e.stopPropagation();
|
|
this.dispatchEvent(new CustomEvent(action.event || 'action', {
|
|
detail: action.detail || { label: action.label },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}}>
|
|
${action.icon ? html`<dees-icon .icon=${action.icon}></dees-icon>` : ''}
|
|
${action.label}
|
|
</button>
|
|
`)}
|
|
${this.collapsible ? html`
|
|
<span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
|
|
<dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
|
|
</span>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
<div class="section-content ${this.isCollapsed ? 'collapsed' : ''}">
|
|
${this.fields.map(field => this.renderField(field))}
|
|
<div class="slot-content">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderField(field: IConfigField): TemplateResult {
|
|
return html`
|
|
<div class="field-row">
|
|
<div class="field-key">${field.key}</div>
|
|
<div>
|
|
${this.renderFieldValue(field)}
|
|
${field.description ? html`<div class="field-description">${field.description}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderFieldValue(field: IConfigField): TemplateResult {
|
|
const value = field.value;
|
|
const type = field.type || this.inferType(value);
|
|
|
|
// Null / undefined
|
|
if (value === null || value === undefined) {
|
|
return html`<span class="field-value null-value">Not configured</span>`;
|
|
}
|
|
|
|
switch (type) {
|
|
case 'boolean':
|
|
return html`
|
|
<span class="bool-value ${value ? 'true' : 'false'}">
|
|
<span class="bool-dot"></span>
|
|
${value ? 'Enabled' : 'Disabled'}
|
|
</span>
|
|
`;
|
|
|
|
case 'pills':
|
|
if (Array.isArray(value) && value.length === 0) {
|
|
return html`<span class="field-value null-value">None</span>`;
|
|
}
|
|
return html`
|
|
<div class="pills">
|
|
${(value as string[]).map(v => html`<span class="pill">${v}</span>`)}
|
|
</div>
|
|
`;
|
|
|
|
case 'code':
|
|
return html`<span class="code-value">${String(value)}</span>`;
|
|
|
|
case 'badge':
|
|
return html`<span class="badge-value">${String(value)}</span>`;
|
|
|
|
case 'link':
|
|
return html`
|
|
<span
|
|
class="link-value"
|
|
@click=${() => {
|
|
if (field.linkTo) {
|
|
this.dispatchEvent(new CustomEvent('navigate', {
|
|
detail: { target: field.linkTo },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
}}
|
|
>${String(value)}</span>
|
|
`;
|
|
|
|
default:
|
|
return html`<span class="field-value">${String(value)}</span>`;
|
|
}
|
|
}
|
|
|
|
private inferType(value: unknown): string {
|
|
if (typeof value === 'boolean') return 'boolean';
|
|
if (Array.isArray(value)) return 'pills';
|
|
return 'text';
|
|
}
|
|
}
|