CremaArchive/ui-essentials
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive component library and demo application

Browse Source 
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
2025-09-03 05:38:09 +10:00
parent c803831f60
commit 5983722793
246 changed files with 52845 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
projects/demo-ui-essentials/src/app/demos/grid-system-demo/grid-system-demo.component.ts Normal file
View File

@@ -0,0 +1,132 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridSystemComponent } from '../../../../../ui-essentials/src/lib/components/layout';
@Component({
selector: 'ui-grid-system-demo',
standalone: true,
imports: [CommonModule, GridSystemComponent],
template: `
<div class="demo-container">
<h2>Grid System Demo</h2>
<!-- Column Variants -->
<section class="demo-section">
<h3>Column Variants</h3>
<div class="demo-row">
@for (cols of columnVariants; track cols) {
<div class="demo-grid-container">
<h4>{{ cols }} Columns</h4>
<ui-grid-system [columns]="cols" class="demo-grid">
@for (item of getItems(getItemCount(cols)); track $index) {
<div class="demo-grid-item">{{ $index + 1 }}</div>
}
</ui-grid-system>
</div>
}
</div>
</section>
<!-- Gap Variants -->
<section class="demo-section">
<h3>Gap Sizes</h3>
<div class="demo-row">
@for (gap of gapSizes; track gap) {
<div class="demo-grid-container">
<h4>Gap: {{ gap }}</h4>
<ui-grid-system [columns]="3" [gap]="gap" class="demo-grid">
@for (item of getItems(6); track $index) {
<div class="demo-grid-item">{{ $index + 1 }}</div>
}
</ui-grid-system>
</div>
}
</div>
</section>
<!-- Auto-fit and Auto-fill -->
<section class="demo-section">
<h3>Auto Layout</h3>
<div class="demo-grid-container">
<h4>Auto-fit (items stretch to fill)</h4>
<ui-grid-system columns="auto-fit" class="demo-grid">
@for (item of getItems(4); track $index) {
<div class="demo-grid-item">Auto-fit {{ $index + 1 }}</div>
}
</ui-grid-system>
</div>
<div class="demo-grid-container">
<h4>Auto-fill (creates empty columns)</h4>
<ui-grid-system columns="auto-fill" class="demo-grid">
@for (item of getItems(4); track $index) {
<div class="demo-grid-item">Auto-fill {{ $index + 1 }}</div>
}
</ui-grid-system>
</div>
</section>
<!-- Alignment -->
<section class="demo-section">
<h3>Alignment Options</h3>
<div class="demo-row">
<div class="demo-grid-container">
<h4>Justify Items: Center</h4>
<ui-grid-system [columns]="3" justifyItems="center" class="demo-grid demo-grid--fixed-height">
@for (item of getItems(6); track $index) {
<div class="demo-grid-item demo-grid-item--small">{{ $index + 1 }}</div>
}
</ui-grid-system>
</div>
<div class="demo-grid-container">
<h4>Align Items: Center</h4>
<ui-grid-system [columns]="3" alignItems="center" class="demo-grid demo-grid--fixed-height">
@for (item of getItems(6); track $index) {
<div class="demo-grid-item demo-grid-item--small">{{ $index + 1 }}</div>
}
</ui-grid-system>
</div>
</div>
</section>
<!-- Custom Grid -->
<section class="demo-section">
<h3>Custom Grid Template</h3>
<div class="demo-grid-container">
<h4>Custom Columns: 200px 1fr 100px</h4>
<ui-grid-system customColumns="200px 1fr 100px" class="demo-grid">
<div class="demo-grid-item">Fixed 200px</div>
<div class="demo-grid-item">Flexible 1fr</div>
<div class="demo-grid-item">Fixed 100px</div>
</ui-grid-system>
</div>
</section>
<!-- Responsive Grid -->
<section class="demo-section">
<h3>Responsive Grid</h3>
<p>Resize the window to see responsive behavior</p>
<ui-grid-system [columns]="12" [responsive]="true" class="demo-grid">
@for (item of getItems(24); track $index) {
<div class="demo-grid-item">{{ $index + 1 }}</div>
}
</ui-grid-system>
</section>
</div>
`,
styleUrl: './grid-system-demo.component.scss'
})
export class GridSystemDemoComponent {
columnVariants: (1 | 2 | 3 | 4 | 6 | 12)[] = [1, 2, 3, 4, 6, 12];
gapSizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[] = ['xs', 'sm', 'md', 'lg', 'xl'];
getItems(count: number): number[] {
return Array.from({ length: count }, (_, i) => i + 1);
}
getItemCount(cols: number | string): number {
if (typeof cols === 'number') {
return Math.min(cols * 2, 12);
}
return 6;
}
}