design.estate/dees-wcctools
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wcctools): add context menu and pinning support, persist pinned state in URL, and add grouped demo test elements

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-04 10:48:03 +00:00
parent 4fe17f5afd
commit 53df62a9fd
11 changed files with 803 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
ts_web/elements/wcc-dashboard.ts
View File

@@ -62,6 +62,10 @@ export class WccDashboard extends DeesElement {
@property()
accessor searchQuery: string = '';
// Pinned items as Set of "sectionName::itemName"
@property({ attribute: false })
accessor pinnedItems: Set<string> = new Set();
// Derived from selectedViewport - no need for separate property
public get isNative(): boolean {
return this.selectedViewport === 'native';
@@ -122,6 +126,7 @@ export class WccDashboard extends DeesElement {
.dashboardRef=${this}
.selectedItem=${this.selectedItem}
.searchQuery=${this.searchQuery}
.pinnedItems=${this.pinnedItems}
.isNative=${this.isNative}
@selectedType=${(eventArg) => {
this.selectedType = eventArg.detail;
@@ -136,6 +141,10 @@ export class WccDashboard extends DeesElement {
this.searchQuery = eventArg.detail;
this.updateUrlWithScrollState();
}}
@pinnedChanged=${(eventArg: CustomEvent) => {
this.pinnedItems = eventArg.detail;
this.updateUrlWithScrollState();
}}
></wcc-sidebar>
<wcc-properties
.dashboardRef=${this}
@@ -237,6 +246,7 @@ export class WccDashboard extends DeesElement {
const search = routeInfo.queryParams.search;
const frameScrollY = routeInfo.queryParams.frameScrollY;
const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
const pinned = routeInfo.queryParams.pinned;
if (search) {
this.searchQuery = search;
@@ -249,6 +259,16 @@ export class WccDashboard extends DeesElement {
if (sidebarScrollY) {
this.sidebarScrollY = parseInt(sidebarScrollY);
}
if (pinned) {
const newPinned = new Set(pinned.split(',').filter(Boolean));
// Only update if actually different to avoid update loops
if (this.pinnedItems.size !== newPinned.size ||
![...newPinned].every(k => this.pinnedItems.has(k))) {
this.pinnedItems = newPinned;
}
} else if (this.pinnedItems.size > 0) {
this.pinnedItems = new Set();
}
// Apply scroll positions after a short delay to ensure DOM is ready
setTimeout(() => {
@@ -256,6 +276,10 @@ export class WccDashboard extends DeesElement {
}, 100);
} else {
this.searchQuery = '';
// Only clear if not already empty to avoid update loops
if (this.pinnedItems.size > 0) {
this.pinnedItems = new Set();
}
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
@@ -301,6 +325,7 @@ export class WccDashboard extends DeesElement {
const search = routeInfo.queryParams.search;
const frameScrollY = routeInfo.queryParams.frameScrollY;
const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
const pinned = routeInfo.queryParams.pinned;
if (search) {
this.searchQuery = search;
@@ -313,6 +338,16 @@ export class WccDashboard extends DeesElement {
if (sidebarScrollY) {
this.sidebarScrollY = parseInt(sidebarScrollY);
}
if (pinned) {
const newPinned = new Set(pinned.split(',').filter(Boolean));
// Only update if actually different to avoid update loops
if (this.pinnedItems.size !== newPinned.size ||
![...newPinned].every(k => this.pinnedItems.has(k))) {
this.pinnedItems = newPinned;
}
} else if (this.pinnedItems.size > 0) {
this.pinnedItems = new Set();
}
// Apply scroll positions after a short delay to ensure DOM is ready
setTimeout(() => {
@@ -320,6 +355,10 @@ export class WccDashboard extends DeesElement {
}, 100);
} else {
this.searchQuery = '';
// Only clear if not already empty to avoid update loops
if (this.pinnedItems.size > 0) {
this.pinnedItems = new Set();
}
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
@@ -402,6 +441,9 @@ export class WccDashboard extends DeesElement {
if (this.sidebarScrollY > 0) {
queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
}
if (this.pinnedItems.size > 0) {
queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
}
const queryString = queryParams.toString();
const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
@@ -462,6 +504,9 @@ export class WccDashboard extends DeesElement {
if (this.sidebarScrollY > 0) {
queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
}
if (this.pinnedItems.size > 0) {
queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
}
const queryString = queryParams.toString();
const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;