feat(wcctools): Add section-based configuration API for setupWccTools, new Views, and section-aware routing/sidebar
This commit is contained in:
262
test/views/view-empty-state.ts
Normal file
262
test/views/view-empty-state.ts
Normal file
@@ -0,0 +1,262 @@
|
||||
import { DeesElement, customElement, html, css, property, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
@customElement('view-empty-state')
|
||||
export class ViewEmptyState extends DeesElement {
|
||||
public static demo = [
|
||||
() => html`<view-empty-state></view-empty-state>`,
|
||||
() => html`<view-empty-state variant="no-results"></view-empty-state>`,
|
||||
() => html`<view-empty-state variant="error"></view-empty-state>`,
|
||||
];
|
||||
|
||||
@property()
|
||||
accessor variant: 'empty' | 'no-results' | 'error' = 'empty';
|
||||
|
||||
@property()
|
||||
accessor title: string = '';
|
||||
|
||||
@property()
|
||||
accessor description: string = '';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
|
||||
color: ${cssManager.bdTheme('#1a1a1a', '#e5e5e5')};
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto 24px;
|
||||
background: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 48px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.icon.error {
|
||||
color: #ef4444;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: ${cssManager.bdTheme('#666', '#888')};
|
||||
margin: 0 0 24px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
color: ${cssManager.bdTheme('#1a1a1a', '#e5e5e5')};
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: ${cssManager.bdTheme('#ddd', '#222')};
|
||||
}
|
||||
|
||||
.illustration {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.illustration svg {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.folder-back {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background: ${cssManager.bdTheme('#ddd', '#333')};
|
||||
border-radius: 4px 4px 8px 8px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.folder-front {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
background: ${cssManager.bdTheme('#e5e5e5', '#444')};
|
||||
border-radius: 0 4px 8px 8px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.folder-tab {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 12px;
|
||||
background: ${cssManager.bdTheme('#ddd', '#333')};
|
||||
border-radius: 4px 4px 0 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 4px solid ${cssManager.bdTheme('#ccc', '#444')};
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.search-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background: ${cssManager.bdTheme('#ccc', '#444')};
|
||||
border-radius: 2px;
|
||||
bottom: -18px;
|
||||
right: -8px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid #ef4444;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin: 0 auto 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.error-icon::before {
|
||||
content: '!';
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
color: #ef4444;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
private getContent() {
|
||||
switch (this.variant) {
|
||||
case 'no-results':
|
||||
return {
|
||||
title: this.title || 'No results found',
|
||||
description:
|
||||
this.description ||
|
||||
"We couldn't find what you're looking for. Try adjusting your search or filters.",
|
||||
icon: 'search',
|
||||
primaryAction: 'Clear Filters',
|
||||
secondaryAction: 'Go Back',
|
||||
};
|
||||
case 'error':
|
||||
return {
|
||||
title: this.title || 'Something went wrong',
|
||||
description:
|
||||
this.description ||
|
||||
"We're having trouble loading this page. Please try again or contact support if the problem persists.",
|
||||
icon: 'error',
|
||||
primaryAction: 'Try Again',
|
||||
secondaryAction: 'Contact Support',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
title: this.title || 'No items yet',
|
||||
description:
|
||||
this.description ||
|
||||
"Get started by creating your first item. It only takes a few seconds.",
|
||||
icon: 'folder',
|
||||
primaryAction: 'Create New',
|
||||
secondaryAction: 'Learn More',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const content = this.getContent();
|
||||
|
||||
return html`
|
||||
<div class="empty-state">
|
||||
${this.renderIcon(content.icon)}
|
||||
<h2>${content.title}</h2>
|
||||
<p>${content.description}</p>
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary">${content.primaryAction}</button>
|
||||
<button class="btn btn-secondary">${content.secondaryAction}</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderIcon(type: string) {
|
||||
switch (type) {
|
||||
case 'search':
|
||||
return html`<div class="search-icon"></div>`;
|
||||
case 'error':
|
||||
return html`<div class="error-icon"></div>`;
|
||||
default:
|
||||
return html`
|
||||
<div class="folder-icon">
|
||||
<div class="folder-tab"></div>
|
||||
<div class="folder-back"></div>
|
||||
<div class="folder-front"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user