diff --git a/changelog.md b/changelog.md index bbdaeb9..9108b8c 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +## 2026-04-07 - 2.12.1 - fix(ts_web) +handle slotted config section content visibility and field row borders correctly + +- track whether the default slot has assigned content and hide the slot container when empty +- wrap rendered fields in a dedicated list so the last field row border is removed correctly when slot content is present + ## 2026-04-07 - 2.12.0 - feat(elements) standardize dashboard and detail views on dees tile and stats grid components diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 2e08f75..ace4987 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/catalog', - version: '2.12.0', + version: '2.12.1', description: 'UI component catalog for serve.zone' } diff --git a/ts_web/elements/sz-config-section.ts b/ts_web/elements/sz-config-section.ts index 89888cf..294d07c 100644 --- a/ts_web/elements/sz-config-section.ts +++ b/ts_web/elements/sz-config-section.ts @@ -126,6 +126,9 @@ export class SzConfigSection extends DeesElement { @state() accessor isCollapsed: boolean = false; + @state() + accessor hasSlottedContent: boolean = false; + public static styles = [ cssManager.defaultStyles, css` @@ -347,6 +350,11 @@ export class SzConfigSection extends DeesElement { padding: 0; } + .fields-list { + display: flex; + flex-direction: column; + } + /* Field rows */ .field-row { display: flex; @@ -357,7 +365,7 @@ export class SzConfigSection extends DeesElement { gap: 16px; } - .field-row:last-child { + .fields-list .field-row:last-child { border-bottom: none; } @@ -472,9 +480,8 @@ export class SzConfigSection extends DeesElement { border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')}; } - .slot-content:empty { + .slot-content.empty { display: none; - border-top: none; } /* Badge type */ @@ -506,6 +513,11 @@ export class SzConfigSection extends DeesElement { } } + private onSlotChange(e: Event) { + const slot = e.target as HTMLSlotElement; + this.hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0; + } + public render(): TemplateResult { const statusLabels: Record = { 'enabled': 'Enabled', @@ -551,9 +563,13 @@ export class SzConfigSection extends DeesElement {
- ${this.fields.map(field => this.renderField(field))} -
- + ${this.fields.length > 0 ? html` +
+ ${this.fields.map(field => this.renderField(field))} +
+ ` : ''} +
+
${this.links.length > 0 || this.actions.length > 0 ? html`