Add comprehensive component library and demo application
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
@@ -0,0 +1,210 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DashboardSidebarComponent, SidebarMenuItem } from "./dashboard.sidebar.component";
|
||||
import { LayoutContainerComponent } from "../../shared/layout-containers/layout-container.component";
|
||||
import {
|
||||
faWindowMaximize, faUserCircle, faCertificate, faHandPointer, faIdCard, faTags,
|
||||
faCheckSquare, faKeyboard, faThLarge, faList, faDotCircle, faSearch, faToggleOn,
|
||||
faTable, faImage, faImages, faPlay, faBars, faEdit, faEye, faCompass,
|
||||
faVideo, faComment, faMousePointer, faLayerGroup, faSquare, faCalendarDays, faClock,
|
||||
faGripVertical, faArrowsAlt, faBoxOpen, faChevronLeft, faSpinner, faExclamationTriangle,
|
||||
faCloudUploadAlt, faFileText, faListAlt, faCircle, faExpandArrowsAlt
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { DemoRoutes } from '../../demos';
|
||||
import { ScrollContainerComponent } from '../../../../../ui-essentials/src/lib/layouts';
|
||||
// import { DemoRoutes } from "../../../../../ui-essentials/src/public-api";
|
||||
|
||||
@Component({
|
||||
selector: 'skyui-dashboard',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
DashboardSidebarComponent,
|
||||
LayoutContainerComponent,
|
||||
ScrollContainerComponent,
|
||||
DemoRoutes
|
||||
],
|
||||
template: `
|
||||
|
||||
|
||||
<ui-layout-container [topBarHeight]=64 [leftNavigationState]="'full'"
|
||||
[showTopBar]=false [customLeftWidth]=260>
|
||||
<div slot=left-navigation style="height: 100vh;">
|
||||
<ui-scroll-container scrollbarVisibility="never">
|
||||
<skyui-dashboard-sidebar [data]=menuItems (selected)="menuClick($event)"></skyui-dashboard-sidebar>
|
||||
</ui-scroll-container>
|
||||
</div>
|
||||
|
||||
<div slot=content style="height: 100vh;">
|
||||
<ui-scroll-container>
|
||||
<ui-demo-routes [route]=route></ui-demo-routes>
|
||||
</ui-scroll-container>
|
||||
</div>
|
||||
</ui-layout-container>
|
||||
|
||||
`,
|
||||
})
|
||||
export class DashboardComponent {
|
||||
// Sidebar state
|
||||
sidebarCollapsed = false;
|
||||
route: string = "image-container"
|
||||
faBars = faBars;
|
||||
|
||||
// FontAwesome icons
|
||||
faWindowMaximize = faWindowMaximize;
|
||||
faUserCircle = faUserCircle;
|
||||
faCertificate = faCertificate;
|
||||
faHandPointer = faHandPointer;
|
||||
faIdCard = faIdCard;
|
||||
faTags = faTags;
|
||||
faCheckSquare = faCheckSquare;
|
||||
faKeyboard = faKeyboard;
|
||||
faThLarge = faThLarge;
|
||||
faList = faList;
|
||||
faDotCircle = faDotCircle;
|
||||
faSearch = faSearch;
|
||||
faToggleOn = faToggleOn;
|
||||
faTable = faTable;
|
||||
faImage = faImage;
|
||||
faImages = faImages;
|
||||
faPlay = faPlay;
|
||||
faEdit = faEdit;
|
||||
faEye = faEye;
|
||||
faCompass = faCompass;
|
||||
faVideo = faVideo;
|
||||
faComment = faComment;
|
||||
faMousePointer = faMousePointer;
|
||||
faLayerGroup = faLayerGroup;
|
||||
faSquare = faSquare;
|
||||
faCalendarDays = faCalendarDays;
|
||||
faClock = faClock;
|
||||
faGripVertical = faGripVertical;
|
||||
faArrowsAlt = faArrowsAlt;
|
||||
faBoxOpen = faBoxOpen;
|
||||
faChevronLeft = faChevronLeft;
|
||||
faSpinner = faSpinner;
|
||||
faExclamationTriangle = faExclamationTriangle;
|
||||
faCloudUploadAlt = faCloudUploadAlt;
|
||||
faFileText = faFileText;
|
||||
faListAlt = faListAlt;
|
||||
faCircle = faCircle;
|
||||
faExpandArrowsAlt = faExpandArrowsAlt;
|
||||
|
||||
menuItems: any = []
|
||||
|
||||
// Toggle sidebar method
|
||||
toggleSidebar() {
|
||||
this.sidebarCollapsed = !this.sidebarCollapsed;
|
||||
}
|
||||
|
||||
addMenuItem(id: string, label: string, icon?: any, children?: SidebarMenuItem[]): void {
|
||||
const menuItem: SidebarMenuItem = {
|
||||
id,
|
||||
label,
|
||||
icon,
|
||||
active: false,
|
||||
children,
|
||||
isParent: !!children,
|
||||
expanded: false
|
||||
};
|
||||
this.menuItems.push(menuItem);
|
||||
}
|
||||
|
||||
createChildItem(id: string, label: string, icon?: any): SidebarMenuItem {
|
||||
return {
|
||||
id,
|
||||
label,
|
||||
icon,
|
||||
active: false,
|
||||
isParent: false
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
// Forms category
|
||||
const formsChildren = [
|
||||
this.createChildItem("input", "Input Fields", this.faKeyboard),
|
||||
this.createChildItem("checkbox", "Checkboxes", this.faCheckSquare),
|
||||
this.createChildItem("radio", "Radio Buttons", this.faDotCircle),
|
||||
this.createChildItem("search", "Search Bars", this.faSearch),
|
||||
this.createChildItem("switch", "Switches", this.faToggleOn),
|
||||
this.createChildItem("autocomplete", "Autocomplete", this.faListAlt),
|
||||
this.createChildItem("date-picker", "Date Picker", this.faCalendarDays),
|
||||
this.createChildItem("time-picker", "Time Picker", this.faClock),
|
||||
this.createChildItem("file-upload", "File Upload", this.faCloudUploadAlt),
|
||||
this.createChildItem("form-field", "Form Field", this.faFileText)
|
||||
];
|
||||
this.addMenuItem("forms", "Forms", this.faEdit, formsChildren);
|
||||
|
||||
// Data Display category
|
||||
const dataDisplayChildren = [
|
||||
this.createChildItem("table", "Tables", this.faTable),
|
||||
this.createChildItem("lists", "Lists", this.faList),
|
||||
this.createChildItem("progress", "Progress Bars", this.faCheckSquare),
|
||||
this.createChildItem("badge", "Badges", this.faCertificate),
|
||||
this.createChildItem("avatar", "Avatars", this.faUserCircle),
|
||||
this.createChildItem("cards", "Cards", this.faIdCard)
|
||||
];
|
||||
this.addMenuItem("data-display", "Data Display", this.faEye, dataDisplayChildren);
|
||||
|
||||
// Navigation category
|
||||
const navigationChildren = [
|
||||
this.createChildItem("appbar", "App Bars", this.faWindowMaximize),
|
||||
this.createChildItem("menu", "Menus", this.faBars),
|
||||
this.createChildItem("pagination", "Pagination", this.faChevronLeft)
|
||||
];
|
||||
this.addMenuItem("navigation", "Navigation", this.faCompass, navigationChildren);
|
||||
|
||||
// Media category
|
||||
const mediaChildren = [
|
||||
this.createChildItem("image-container", "Image Container", this.faImage),
|
||||
this.createChildItem("carousel", "Carousel", this.faImages),
|
||||
this.createChildItem("video-player", "Video Player", this.faPlay)
|
||||
];
|
||||
this.addMenuItem("media", "Media", this.faVideo, mediaChildren);
|
||||
|
||||
// Actions category
|
||||
const actionsChildren = [
|
||||
this.createChildItem("buttons", "Buttons", this.faMousePointer)
|
||||
];
|
||||
this.addMenuItem("actions", "Actions", this.faMousePointer, actionsChildren);
|
||||
|
||||
// Feedback category
|
||||
const feedbackChildren = [
|
||||
this.createChildItem("chips", "Chips", this.faTags),
|
||||
this.createChildItem("loading-spinner", "Loading Spinner", this.faSpinner),
|
||||
this.createChildItem("skeleton-loader", "Skeleton Loader", this.faSpinner),
|
||||
this.createChildItem("empty-state", "Empty State", this.faExclamationTriangle)
|
||||
];
|
||||
this.addMenuItem("feedback", "Feedback", this.faComment, feedbackChildren);
|
||||
|
||||
// Layout category
|
||||
const layoutChildren = [
|
||||
this.createChildItem("layout", "Layout Demos", this.faThLarge),
|
||||
this.createChildItem("grid-system", "Grid System", this.faGripVertical),
|
||||
this.createChildItem("spacer", "Spacer", this.faArrowsAlt),
|
||||
this.createChildItem("container", "Container", this.faBoxOpen)
|
||||
];
|
||||
this.addMenuItem("layouts", "Layouts", this.faLayerGroup, layoutChildren);
|
||||
|
||||
// Overlays category
|
||||
const overlaysChildren = [
|
||||
this.createChildItem("modal", "Modal/Dialog", this.faSquare),
|
||||
this.createChildItem("drawer", "Drawer/Sidebar", this.faBars),
|
||||
this.createChildItem("backdrop", "Backdrop", this.faCircle),
|
||||
this.createChildItem("overlay-container", "Overlay Container", this.faExpandArrowsAlt)
|
||||
];
|
||||
this.addMenuItem("overlays", "Overlays", this.faLayerGroup, overlaysChildren);
|
||||
|
||||
// Utilities (standalone)
|
||||
this.addMenuItem("fontawesome", "FontAwesome Icons", this.faCheckSquare);
|
||||
}
|
||||
|
||||
menuClick(id: string) {
|
||||
console.log(JSON.stringify(id))
|
||||
|
||||
this.route = id.toString()
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user