Restructure layout components architecture
- Move layout components from layouts/ directory to components/layout/ - Reorganize divider component from data-display to layout category - Add comprehensive layout component collection including aspect-ratio, bento-grid, box, breakpoint-container, center, column, dashboard-shell, feed-layout, flex, grid-container, hstack, list-detail-layout, scroll-container, section, sidebar-layout, stack, supporting-pane-layout, tabs-container, and vstack - Update all demo components to match new layout structure - Refactor routing and index exports to reflect reorganized component architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -0,0 +1,282 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { GridContainerComponent } from 'ui-essentials';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-grid-container-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, GridContainerComponent],
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<h2>GridContainer Demo</h2>
|
||||
<p class="demo-description">
|
||||
Advanced CSS Grid wrapper with template areas support, responsive column/row definitions, and auto-placement algorithms.
|
||||
</p>
|
||||
|
||||
<!-- Basic Grid Examples -->
|
||||
<section class="demo-section">
|
||||
<h3>Basic Grid Layouts</h3>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Auto-fit Grid (Responsive)</h4>
|
||||
<ui-grid-container columns="auto-fit" gap="md">
|
||||
@for (item of basicItems; track item.id) {
|
||||
<div class="demo-grid-item demo-grid-item--primary">{{ item.label }}</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Fixed 3-Column Grid</h4>
|
||||
<ui-grid-container [columns]="3" gap="lg">
|
||||
@for (item of basicItems; track item.id) {
|
||||
<div class="demo-grid-item demo-grid-item--secondary">{{ item.label }}</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gap Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Gap Sizes</h3>
|
||||
<div class="demo-row">
|
||||
@for (gap of gaps; track gap) {
|
||||
<div class="demo-example">
|
||||
<h4>{{ gap }} Gap</h4>
|
||||
<ui-grid-container [columns]="3" [gap]="gap">
|
||||
@for (item of shortItems; track item.id) {
|
||||
<div class="demo-grid-item demo-grid-item--success">{{ item.label }}</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Column Variants -->
|
||||
<section class="demo-section">
|
||||
<h3>Column Layouts</h3>
|
||||
@for (colCount of columnCounts; track colCount) {
|
||||
<div class="demo-example">
|
||||
<h4>{{ colCount }} Columns</h4>
|
||||
<ui-grid-container [columns]="colCount" gap="md">
|
||||
@for (item of getItemsForColumns(colCount); track item.id) {
|
||||
<div class="demo-grid-item demo-grid-item--info">{{ item.label }}</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<!-- Auto Grid Types -->
|
||||
<section class="demo-section">
|
||||
<h3>Auto Grid Types</h3>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Auto-fit (Items stretch to fill space)</h4>
|
||||
<ui-grid-container columns="auto-fit" gap="md">
|
||||
@for (item of autoItems; track item.id) {
|
||||
<div class="demo-grid-item demo-grid-item--warning">{{ item.label }}</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Auto-fill (Empty columns maintained)</h4>
|
||||
<ui-grid-container columns="auto-fill" gap="md">
|
||||
@for (item of autoItems; track item.id) {
|
||||
<div class="demo-grid-item demo-grid-item--danger">{{ item.label }}</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Advanced Features -->
|
||||
<section class="demo-section">
|
||||
<h3>Advanced Features</h3>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Dense Grid (Auto-placement fills gaps)</h4>
|
||||
<ui-grid-container [columns]="4" gap="md" [dense]="true">
|
||||
<div class="demo-grid-item demo-grid-item--primary ui-grid-item--span-2">Wide Item (2 cols)</div>
|
||||
<div class="demo-grid-item demo-grid-item--secondary">Item 1</div>
|
||||
<div class="demo-grid-item demo-grid-item--success ui-grid-item--row-span-2">Tall Item</div>
|
||||
<div class="demo-grid-item demo-grid-item--info">Item 2</div>
|
||||
<div class="demo-grid-item demo-grid-item--warning">Item 3</div>
|
||||
<div class="demo-grid-item demo-grid-item--danger ui-grid-item--span-3">Extra Wide (3 cols)</div>
|
||||
<div class="demo-grid-item demo-grid-item--primary">Item 4</div>
|
||||
<div class="demo-grid-item demo-grid-item--secondary">Item 5</div>
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Grid with Template Areas</h4>
|
||||
<ui-grid-container
|
||||
customColumns="1fr 2fr 1fr"
|
||||
customRows="auto auto 1fr auto"
|
||||
templateAreas="'header header header' 'sidebar main aside' 'sidebar main aside' 'footer footer footer'"
|
||||
gap="md"
|
||||
padding="lg">
|
||||
<div class="demo-grid-item demo-grid-item--primary" style="grid-area: header;">Header</div>
|
||||
<div class="demo-grid-item demo-grid-item--secondary" style="grid-area: sidebar;">Sidebar</div>
|
||||
<div class="demo-grid-item demo-grid-item--info" style="grid-area: main;">Main Content</div>
|
||||
<div class="demo-grid-item demo-grid-item--success" style="grid-area: aside;">Aside</div>
|
||||
<div class="demo-grid-item demo-grid-item--warning" style="grid-area: footer;">Footer</div>
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Alignment Options -->
|
||||
<section class="demo-section">
|
||||
<h3>Alignment Options</h3>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Justify Content: Center</h4>
|
||||
<ui-grid-container [columns]="2" gap="md" justifyContent="center" style="height: 200px;">
|
||||
<div class="demo-grid-item demo-grid-item--primary">Item 1</div>
|
||||
<div class="demo-grid-item demo-grid-item--secondary">Item 2</div>
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
|
||||
<div class="demo-example">
|
||||
<h4>Align Items: Center</h4>
|
||||
<ui-grid-container [columns]="3" gap="md" alignItems="center" style="height: 150px;">
|
||||
<div class="demo-grid-item demo-grid-item--success">Centered</div>
|
||||
<div class="demo-grid-item demo-grid-item--info">Items</div>
|
||||
<div class="demo-grid-item demo-grid-item--warning">Vertically</div>
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Row Modes -->
|
||||
<section class="demo-section">
|
||||
<h3>Row Modes</h3>
|
||||
@for (rowMode of rowModes; track rowMode) {
|
||||
<div class="demo-example">
|
||||
<h4>{{ rowMode }} Rows</h4>
|
||||
<ui-grid-container [columns]="3" gap="md" [rowMode]="rowMode" style="height: 200px;">
|
||||
<div class="demo-grid-item demo-grid-item--primary">
|
||||
@if (rowMode === 'min-content') {
|
||||
Short
|
||||
} @else if (rowMode === 'max-content') {
|
||||
This is longer content to demonstrate max-content behavior
|
||||
} @else {
|
||||
Content for {{ rowMode }}
|
||||
}
|
||||
</div>
|
||||
<div class="demo-grid-item demo-grid-item--secondary">Item 2</div>
|
||||
<div class="demo-grid-item demo-grid-item--success">Item 3</div>
|
||||
</ui-grid-container>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<!-- Interactive Example -->
|
||||
<section class="demo-section">
|
||||
<h3>Interactive Grid Builder</h3>
|
||||
|
||||
<div class="demo-controls">
|
||||
<div class="demo-control-group">
|
||||
<label>Columns:</label>
|
||||
<select [(ngModel)]="interactiveConfig.columns">
|
||||
@for (col of allColumns; track col) {
|
||||
<option [value]="col">{{ col }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="demo-control-group">
|
||||
<label>Gap:</label>
|
||||
<select [(ngModel)]="interactiveConfig.gap">
|
||||
@for (gap of gaps; track gap) {
|
||||
<option [value]="gap">{{ gap }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="demo-control-group">
|
||||
<label>Dense:</label>
|
||||
<input type="checkbox" [(ngModel)]="interactiveConfig.dense">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ui-grid-container
|
||||
[columns]="interactiveConfig.columns"
|
||||
[gap]="interactiveConfig.gap"
|
||||
[dense]="interactiveConfig.dense"
|
||||
style="border: 2px dashed #ccc; min-height: 200px;">
|
||||
@for (item of interactiveItems; track item.id) {
|
||||
<div
|
||||
class="demo-grid-item"
|
||||
[class]="'demo-grid-item--' + item.variant"
|
||||
[class.ui-grid-item--span-2]="item.span === 2"
|
||||
[class.ui-grid-item--span-3]="item.span === 3"
|
||||
[class.ui-grid-item--row-span-2]="item.rowSpan === 2">
|
||||
{{ item.label }}
|
||||
@if (item.span > 1) {
|
||||
<small>({{ item.span }} cols)</small>
|
||||
}
|
||||
@if (item.rowSpan > 1) {
|
||||
<small>({{ item.rowSpan }} rows)</small>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</ui-grid-container>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './grid-container-demo.component.scss'
|
||||
})
|
||||
export class GridContainerDemoComponent {
|
||||
gaps = ['sm', 'md', 'lg'] as const;
|
||||
columnCounts = [1, 2, 3, 4, 5, 6] as const;
|
||||
allColumns = [1, 2, 3, 4, 5, 6, 'auto-fit', 'auto-fill'] as const;
|
||||
rowModes = ['auto', 'equal', 'min-content', 'max-content'] as const;
|
||||
|
||||
basicItems = [
|
||||
{ id: 1, label: 'Item 1' },
|
||||
{ id: 2, label: 'Item 2' },
|
||||
{ id: 3, label: 'Item 3' },
|
||||
{ id: 4, label: 'Item 4' },
|
||||
{ id: 5, label: 'Item 5' },
|
||||
{ id: 6, label: 'Item 6' },
|
||||
{ id: 7, label: 'Item 7' },
|
||||
{ id: 8, label: 'Item 8' }
|
||||
];
|
||||
|
||||
shortItems = [
|
||||
{ id: 1, label: 'A' },
|
||||
{ id: 2, label: 'B' },
|
||||
{ id: 3, label: 'C' }
|
||||
];
|
||||
|
||||
autoItems = [
|
||||
{ id: 1, label: 'Auto Item 1' },
|
||||
{ id: 2, label: 'Auto Item 2' },
|
||||
{ id: 3, label: 'Auto Item 3' },
|
||||
{ id: 4, label: 'Auto Item 4' }
|
||||
];
|
||||
|
||||
interactiveConfig = {
|
||||
columns: 'auto-fit' as const,
|
||||
gap: 'md' as const,
|
||||
dense: false
|
||||
};
|
||||
|
||||
interactiveItems = [
|
||||
{ id: 1, label: 'Regular', variant: 'primary', span: 1, rowSpan: 1 },
|
||||
{ id: 2, label: 'Wide', variant: 'secondary', span: 2, rowSpan: 1 },
|
||||
{ id: 3, label: 'Tall', variant: 'success', span: 1, rowSpan: 2 },
|
||||
{ id: 4, label: 'Extra Wide', variant: 'info', span: 3, rowSpan: 1 },
|
||||
{ id: 5, label: 'Normal', variant: 'warning', span: 1, rowSpan: 1 },
|
||||
{ id: 6, label: 'Regular', variant: 'danger', span: 1, rowSpan: 1 },
|
||||
{ id: 7, label: 'Wide', variant: 'primary', span: 2, rowSpan: 1 },
|
||||
{ id: 8, label: 'Normal', variant: 'secondary', span: 1, rowSpan: 1 }
|
||||
];
|
||||
|
||||
getItemsForColumns(colCount: number) {
|
||||
const count = Math.min(colCount * 2, this.basicItems.length);
|
||||
return this.basicItems.slice(0, count);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user