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

feat(sidebar): add searchable sidebar with URL-backed query state and highlighted matches

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-30 12:30:45 +00:00
parent 287cc4d1c3
commit 63dd6a27b3
4 changed files with 127 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,6 +59,9 @@ export class WccDashboard extends DeesElement {
@property()
accessor selectedTheme: TTheme = 'dark';
@property()
accessor searchQuery: string = '';
// Derived from selectedViewport - no need for separate property
public get isNative(): boolean {
return this.selectedViewport === 'native';
@@ -118,6 +121,7 @@ export class WccDashboard extends DeesElement {
<wcc-sidebar
.dashboardRef=${this}
.selectedItem=${this.selectedItem}
.searchQuery=${this.searchQuery}
.isNative=${this.isNative}
@selectedType=${(eventArg) => {
this.selectedType = eventArg.detail;
@@ -128,6 +132,10 @@ export class WccDashboard extends DeesElement {
@selectedItem=${(eventArg) => {
this.selectedItem = eventArg.detail;
}}
@searchChanged=${(eventArg: CustomEvent) => {
this.searchQuery = eventArg.detail;
this.updateUrlWithScrollState();
}}
></wcc-sidebar>
<wcc-properties
.dashboardRef=${this}
@@ -224,11 +232,17 @@ export class WccDashboard extends DeesElement {
}
}
// Restore scroll positions from query parameters
// Restore state from query parameters
if (routeInfo.queryParams) {
const search = routeInfo.queryParams.search;
const frameScrollY = routeInfo.queryParams.frameScrollY;
const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
if (search) {
this.searchQuery = search;
} else {
this.searchQuery = '';
}
if (frameScrollY) {
this.frameScrollY = parseInt(frameScrollY);
}
@@ -240,6 +254,8 @@ export class WccDashboard extends DeesElement {
setTimeout(() => {
this.applyScrollPositions();
}, 100);
} else {
this.searchQuery = '';
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
@@ -280,11 +296,17 @@ export class WccDashboard extends DeesElement {
}
}
// Restore scroll positions from query parameters
// Restore state from query parameters
if (routeInfo.queryParams) {
const search = routeInfo.queryParams.search;
const frameScrollY = routeInfo.queryParams.frameScrollY;
const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
if (search) {
this.searchQuery = search;
} else {
this.searchQuery = '';
}
if (frameScrollY) {
this.frameScrollY = parseInt(frameScrollY);
}
@@ -296,6 +318,8 @@ export class WccDashboard extends DeesElement {
setTimeout(() => {
this.applyScrollPositions();
}, 100);
} else {
this.searchQuery = '';
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
@@ -369,6 +393,9 @@ export class WccDashboard extends DeesElement {
const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
const queryParams = new URLSearchParams();
if (this.searchQuery) {
queryParams.set('search', this.searchQuery);
}
if (this.frameScrollY > 0) {
queryParams.set('frameScrollY', this.frameScrollY.toString());
}
@@ -426,6 +453,9 @@ export class WccDashboard extends DeesElement {
const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
const queryParams = new URLSearchParams();
if (this.searchQuery) {
queryParams.set('search', this.searchQuery);
}
if (this.frameScrollY > 0) {
queryParams.set('frameScrollY', this.frameScrollY.toString());
}