Update folder structure
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { Landing } from './views/pages/landing';
|
||||
import { Notfound } from './views/pages/notfound';
|
||||
import { AppLayout } from './layout/app.layout';
|
||||
import { Dashboard } from './views/dashboard';
|
||||
import { Documentation } from './views/pages/documentation';
|
||||
import { AppLayout } from './app/layout/core/app.layout';
|
||||
import { Dashboard } from './app/pages/dashboard/dashboard';
|
||||
import { Documentation } from './app/pages/documentation/documentation';
|
||||
import { Landing } from './app/pages/landing/landing';
|
||||
import { Notfound } from './app/pages/notfound/notfound';
|
||||
|
||||
export const appRoutes: Routes = [
|
||||
{
|
||||
@@ -11,12 +11,13 @@ export const appRoutes: Routes = [
|
||||
component: AppLayout,
|
||||
children: [
|
||||
{ path: '', component: Dashboard },
|
||||
{ path: 'uikit', loadChildren: () => import('./views/uikit/uikit.routes') },
|
||||
{ path: 'uikit', loadChildren: () => import('./app/pages/uikit/uikit.routes') },
|
||||
{ path: 'documentation', component: Documentation },
|
||||
{ path: 'pages', loadChildren: () => import('./views/pages/pages.routes') }
|
||||
{ path: 'pages', loadChildren: () => import('./app/pages/pages.routes') }
|
||||
]
|
||||
},
|
||||
{ path: 'landing', component: Landing },
|
||||
{ path: 'notfound', component: Notfound },
|
||||
{ path: 'auth', loadChildren: () => import('./views/pages/auth/auth.routes') }
|
||||
{ path: 'auth', loadChildren: () => import('./app/pages/auth/auth.routes') },
|
||||
{ path: '**', redirectTo: '/notfound' },
|
||||
];
|
||||
|
||||
@@ -6,7 +6,7 @@ import Aura from '@primeng/themes/aura';
|
||||
import Lara from '@primeng/themes/lara';
|
||||
import { PrimeNG } from 'primeng/config';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { LayoutService } from '../service/layout/layout.service';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
|
||||
const presets = {
|
||||
Aura,
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Component, computed, inject } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { AppConfigurator } from '../layout/app.configurator';
|
||||
import { LayoutService } from '../service/layout/layout.service';
|
||||
import { AppConfigurator } from './app.configurator';
|
||||
import { LayoutService} from '../service/layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'floating-configurator',
|
||||
selector: 'app-floating-configurator',
|
||||
imports: [ButtonModule, StyleClassModule, AppConfigurator],
|
||||
template: `
|
||||
<div class="fixed flex gap-4 top-8 right-8">
|
||||
@@ -27,7 +27,7 @@ import { LayoutService } from '../service/layout/layout.service';
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class FloatingConfigurator {
|
||||
export class AppFloatingConfigurator {
|
||||
LayoutService = inject(LayoutService);
|
||||
|
||||
isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme);
|
||||
@@ -3,9 +3,9 @@ import { CommonModule } from '@angular/common';
|
||||
import { NavigationEnd, Router, RouterModule } from '@angular/router';
|
||||
import { filter, Subscription } from 'rxjs';
|
||||
import { AppTopbar } from './app.topbar';
|
||||
import { AppSidebar } from './appsidebar';
|
||||
import { AppSidebar } from './app.sidebar';
|
||||
import { AppFooter } from './app.footer';
|
||||
import { LayoutService } from '../service/layout/layout.service';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
@@ -6,7 +6,7 @@ import { filter } from 'rxjs/operators';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { MenuItem} from 'primeng/api';
|
||||
import { LayoutService } from '../service/layout/layout.service';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
|
||||
@Component({
|
||||
// eslint-disable-next-line @angular-eslint/component-selector
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
import { AppMenu } from './app.menu';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
standalone:true,
|
||||
@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { AppConfigurator } from './app.configurator';
|
||||
import { LayoutService } from '../service/layout/layout.service';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-topbar',
|
||||
@@ -2,19 +2,20 @@ import { Component } from '@angular/core';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import { FloatingConfigurator } from '../../../components/floatingconfigurator';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-access',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ButtonModule,
|
||||
RouterModule,
|
||||
RippleModule,
|
||||
FloatingConfigurator,
|
||||
AppFloatingConfigurator,
|
||||
ButtonModule,
|
||||
],
|
||||
template: `
|
||||
<floating-configurator />
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
||||
@@ -4,7 +4,7 @@ import { Login } from './login';
|
||||
import { Error } from './error';
|
||||
|
||||
export default [
|
||||
{ path: 'access', component: Access},
|
||||
{ path: 'error', component: Error},
|
||||
{ path: 'login', component: Login},
|
||||
{ path: 'access', component: Access},
|
||||
{ path: 'error', component: Error},
|
||||
{ path: 'login', component: Login},
|
||||
] as Routes;
|
||||
@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import { FloatingConfigurator } from '../../../components/floatingconfigurator';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
imports: [ButtonModule, RippleModule, RouterModule, FloatingConfigurator, ButtonModule],
|
||||
selector: 'app-error',
|
||||
imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
|
||||
standalone: true,
|
||||
template: `
|
||||
<floating-configurator />
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
@@ -6,10 +6,10 @@ import { PasswordModule} from 'primeng/password';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import { RippleModule} from 'primeng/ripple';
|
||||
import { FloatingConfigurator } from '../../../components/floatingconfigurator';
|
||||
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ButtonModule,
|
||||
@@ -19,10 +19,10 @@ import { FloatingConfigurator } from '../../../components/floatingconfigurator';
|
||||
FormsModule,
|
||||
RouterModule,
|
||||
RippleModule,
|
||||
FloatingConfigurator
|
||||
AppFloatingConfigurator
|
||||
],
|
||||
template: `
|
||||
<floating-configurator />
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
@@ -18,7 +18,7 @@ import { TagModule } from 'primeng/tag';
|
||||
import { InputIconModule } from 'primeng/inputicon';
|
||||
import { IconFieldModule } from 'primeng/iconfield';
|
||||
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
||||
import { Product, ProductService } from '../../service/demo/product.service';
|
||||
import { Product, ProductService } from '../service/product.service';
|
||||
|
||||
interface Column {
|
||||
field: string;
|
||||
@@ -32,7 +32,8 @@ interface ExportColumn {
|
||||
}
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'app-crud',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
TableModule,
|
||||
@@ -53,7 +54,7 @@ interface ExportColumn {
|
||||
IconFieldModule,
|
||||
ConfirmDialogModule
|
||||
],
|
||||
template: `
|
||||
template: `
|
||||
<p-toolbar styleClass="mb-6">
|
||||
<ng-template #start>
|
||||
<p-button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" (onClick)="openNew()" />
|
||||
@@ -207,7 +208,7 @@ interface ExportColumn {
|
||||
|
||||
<p-confirmDialog [style]="{ width: '450px' }" />
|
||||
`,
|
||||
providers: [MessageService, ProductService, ConfirmationService],
|
||||
providers: [MessageService, ProductService, ConfirmationService],
|
||||
})
|
||||
export class Crud implements OnInit {
|
||||
productDialog: boolean = false;
|
||||
@@ -3,8 +3,7 @@ import { RippleModule } from 'primeng/ripple';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Product, ProductService } from '../../service/demo/product.service';
|
||||
|
||||
import { Product, ProductService } from '../../service/product.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ChartModule } from 'primeng/chart';
|
||||
import { debounceTime, Subscription } from 'rxjs';
|
||||
import { LayoutService } from '../../service/layout/layout.service';
|
||||
import { LayoutService } from '../../../layout/service/layout.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { StatsWidget } from '../components/dashboard/statswidget';
|
||||
import { RecentSalesWidget } from '../components/dashboard/recentsaleswidget';
|
||||
import { BestSellingWidget } from '../components/dashboard/bestsellingwidget';
|
||||
import { RevenueStreamWidget } from '../components/dashboard/revenuestreamwidget';
|
||||
import { NotificationsWidget } from '../components/dashboard/notificationswidget';
|
||||
|
||||
import { NotificationsWidget } from './components/notificationswidget';
|
||||
import { StatsWidget } from './components/statswidget';
|
||||
import { RecentSalesWidget } from './components/recentsaleswidget';
|
||||
import { BestSellingWidget } from './components/bestsellingwidget';
|
||||
import { RevenueStreamWidget } from './components/revenuestreamwidget';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-documentation',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-empty',
|
||||
standalone: true,
|
||||
template: `
|
||||
<div class="card">
|
||||
@@ -4,15 +4,15 @@ import { RippleModule } from 'primeng/ripple';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { FeaturesWidget } from '../../components/landing/featureswidget';
|
||||
import { TopbarWidget } from '../../components/landing/topbarwidget.component';
|
||||
import { HeroWidget } from '../../components/landing/herowidget';
|
||||
import { HighlightsWidget } from '../../components/landing/highlightswidget';
|
||||
import { PricingWidget } from '../../components/landing/pricingwidget';
|
||||
import { FooterWidget } from '../../components/landing/footerwidget';
|
||||
|
||||
import { TopbarWidget } from './components/topbarwidget.component';
|
||||
import { HeroWidget } from './components/herowidget';
|
||||
import { FeaturesWidget } from './components/featureswidget';
|
||||
import { HighlightsWidget } from './components/highlightswidget';
|
||||
import { PricingWidget } from './components/pricingwidget';
|
||||
import { FooterWidget } from './components/footerwidget';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
standalone: true,
|
||||
imports: [RouterModule, TopbarWidget, HeroWidget, FeaturesWidget, HighlightsWidget, PricingWidget, FooterWidget, RippleModule, StyleClassModule, ButtonModule, DividerModule],
|
||||
template: `
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { FloatingConfigurator } from '../../components/floatingconfigurator';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notfound',
|
||||
standalone: true,
|
||||
imports: [RouterModule, FloatingConfigurator, ButtonModule],
|
||||
imports: [RouterModule, AppFloatingConfigurator, ButtonModule],
|
||||
template: `
|
||||
<floating-configurator />
|
||||
<app-floating-configurator />
|
||||
<div class="flex items-center justify-center min-h-screen overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { Documentation } from './documentation';
|
||||
import { Crud } from './crud';
|
||||
import { Empty } from './empty';
|
||||
import { Documentation } from './documentation/documentation';
|
||||
import { Crud } from './crud/crud';
|
||||
import { Empty } from './empty/empty';
|
||||
|
||||
export default [
|
||||
{ path: 'documentation', component: Documentation },
|
||||
@@ -5,6 +5,7 @@ import {SplitButtonModule} from "primeng/splitbutton";
|
||||
import {MenuItem} from "primeng/api";
|
||||
|
||||
@Component({
|
||||
selector: 'app-button-demo',
|
||||
standalone: true,
|
||||
imports: [ButtonModule, ButtonGroupModule, SplitButtonModule],
|
||||
template: `<div class="flex flex-col md:flex-row gap-8">
|
||||
@@ -83,10 +84,10 @@ import {MenuItem} from "primeng/api";
|
||||
<div class="font-semibold text-xl">Templating</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button type="button">
|
||||
<img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
|
||||
</p-button>
|
||||
<p-button type="button" outlined severity="success">
|
||||
<img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
|
||||
<span class="text-bold">PrimeNG</span>
|
||||
</p-button>
|
||||
</div>
|
||||
@@ -166,17 +167,17 @@ import {MenuItem} from "primeng/api";
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Loading</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" />
|
||||
<p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
|
||||
<p-button type="button" class="mr-2 mb-2" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
|
||||
<p-button type="button" class="mr-2 mb-2" label="Search" [loading]="loading[3]" (click)="load(3)" />
|
||||
<p-button type="button" label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" />
|
||||
<p-button type="button" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
|
||||
<p-button type="button" styleClass="h-full" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
|
||||
<p-button type="button" label="Search" [loading]="loading[3]" (click)="load(3)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ButtonDoc implements OnInit {
|
||||
export class ButtonDemo implements OnInit {
|
||||
|
||||
items: MenuItem[] = [];
|
||||
|
||||
@@ -3,9 +3,10 @@ import { ChartModule } from 'primeng/chart';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { debounceTime, Subscription } from 'rxjs';
|
||||
import { FluidModule } from 'primeng/fluid';
|
||||
import { LayoutService } from '../../service/layout/layout.service';
|
||||
import { LayoutService } from '../../layout/service/layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-demo',
|
||||
standalone:true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
@@ -52,7 +53,7 @@ import { LayoutService } from '../../service/layout/layout.service';
|
||||
</p-fluid>
|
||||
`,
|
||||
})
|
||||
export class ChartDoc {
|
||||
export class ChartDemo {
|
||||
|
||||
lineData: any;
|
||||
|
||||
@@ -6,6 +6,7 @@ import { FileUploadModule } from 'primeng/fileupload';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
|
||||
@Component({
|
||||
selector: 'app-file-demo',
|
||||
standalone:true,
|
||||
imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule],
|
||||
template: `<div class="grid grid-cols-12 gap-8">
|
||||
@@ -37,7 +38,7 @@ import { ToastModule } from 'primeng/toast';
|
||||
</div>`,
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileDoc {
|
||||
export class FileDemo {
|
||||
|
||||
uploadedFiles: any[] = [];
|
||||
|
||||
@@ -7,6 +7,7 @@ import {FormsModule} from "@angular/forms";
|
||||
import {TextareaModule} from "primeng/textarea";
|
||||
|
||||
@Component({
|
||||
selector: 'app-formlayout-demo',
|
||||
standalone: true,
|
||||
imports: [InputTextModule, FluidModule, ButtonModule, SelectModule, FormsModule, TextareaModule],
|
||||
template:`<p-fluid>
|
||||
@@ -117,7 +118,7 @@ import {TextareaModule} from "primeng/textarea";
|
||||
</div>
|
||||
</p-fluid>`,
|
||||
})
|
||||
export class FormLayoutDoc {
|
||||
export class FormLayoutDemo {
|
||||
dropdownItems = [
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
@@ -26,10 +26,11 @@ import {ListboxModule} from "primeng/listbox";
|
||||
import {InputGroupAddonModule} from "primeng/inputgroupaddon";
|
||||
import {TextareaModule} from "primeng/textarea";
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { CountryService } from '../../service/demo/country.service';
|
||||
import { NodeService } from '../../service/demo/node.service';
|
||||
import { CountryService } from '../service/country.service';
|
||||
import { NodeService } from '../service/node.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-demo',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
@@ -240,7 +241,7 @@ import { NodeService } from '../../service/demo/node.service';
|
||||
</p-fluid>`,
|
||||
providers: [CountryService, NodeService]
|
||||
})
|
||||
export class InputDoc implements OnInit {
|
||||
export class InputDemo implements OnInit {
|
||||
floatValue: any = null;
|
||||
|
||||
autoValue: any = null;
|
||||
@@ -7,9 +7,10 @@ import { PickListModule } from 'primeng/picklist';
|
||||
import { OrderListModule } from 'primeng/orderlist';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { Product, ProductService } from '../../service/demo/product.service';
|
||||
import { Product, ProductService } from '../service/product.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, DataViewModule, FormsModule, SelectButtonModule, PickListModule, OrderListModule, TagModule, ButtonModule],
|
||||
template: ` <div class="flex flex-col">
|
||||
@@ -147,7 +148,7 @@ import { Product, ProductService } from '../../service/demo/product.service';
|
||||
`,
|
||||
providers: [ProductService]
|
||||
})
|
||||
export class ListDoc {
|
||||
export class ListDemo {
|
||||
layout: 'list' | 'grid' = 'list';
|
||||
|
||||
options = ['list', 'grid'];
|
||||
@@ -5,10 +5,11 @@ import { CarouselModule } from 'primeng/carousel';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { ImageModule } from 'primeng/image';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { Product, ProductService } from '../../service/demo/product.service';
|
||||
import { PhotoService } from '../../service/demo/photo.service';
|
||||
import { Product, ProductService } from '../service/product.service';
|
||||
import { PhotoService } from '../service/photo.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-media-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
|
||||
template: `<div class="card">
|
||||
@@ -53,7 +54,7 @@ import { PhotoService } from '../../service/demo/photo.service';
|
||||
</div>`,
|
||||
providers: [ProductService, PhotoService]
|
||||
})
|
||||
export class MediaDoc implements OnInit {
|
||||
export class MediaDemo implements OnInit {
|
||||
products!: Product[];
|
||||
|
||||
images!: any[];
|
||||
@@ -15,6 +15,7 @@ import { IconField, IconFieldModule } from 'primeng/iconfield';
|
||||
import { InputIcon, InputIconModule } from 'primeng/inputicon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-demo',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
@@ -128,7 +129,7 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class MenuDoc {
|
||||
export class MenuDemo {
|
||||
nestedMenuItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
@@ -8,6 +8,7 @@ import { MessageModule } from 'primeng/message';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-messages-demo',
|
||||
standalone: true,
|
||||
imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule],
|
||||
template:`
|
||||
@@ -50,7 +51,7 @@ import { FormsModule } from '@angular/forms';
|
||||
`,
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesDoc {
|
||||
export class MessagesDemo {
|
||||
|
||||
msgs = [];
|
||||
|
||||
@@ -13,6 +13,7 @@ import { ButtonModule } from 'primeng/button';
|
||||
import { OverlayBadgeModule } from 'primeng/overlaybadge';
|
||||
|
||||
@Component({
|
||||
selector: 'app-misc-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ProgressBarModule, BadgeModule, AvatarModule, ScrollPanelModule, TagModule, ChipModule, ButtonModule, SkeletonModule, AvatarGroupModule, ScrollTopModule, OverlayBadgeModule],
|
||||
template: `
|
||||
@@ -91,16 +92,22 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">ScrollTop</div>
|
||||
<p-scrollpanel [style]="{ width: '250px', height: '200px' }">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet
|
||||
consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus
|
||||
orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut
|
||||
etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
</p-scrollpanel>
|
||||
<div class="font-semibold text-xl mb-4">Skeleton</div>
|
||||
<div class="rounded-border border border-surface p-6">
|
||||
<div class="flex mb-4">
|
||||
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
|
||||
<div>
|
||||
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton height=".5rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<p-skeleton width="100%" height="150px"></p-skeleton>
|
||||
<div class="flex justify-between mt-4">
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
@@ -160,30 +167,11 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
|
||||
<p-chip label="Xuxue Feng" image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Skeleton</div>
|
||||
<div class="rounded-border border border-surface p-6">
|
||||
<div class="flex mb-4">
|
||||
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
|
||||
<div>
|
||||
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton height=".5rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<p-skeleton width="100%" height="150px"></p-skeleton>
|
||||
<div class="flex justify-between mt-4">
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class MiscDoc {
|
||||
export class MiscDemo {
|
||||
value = 0;
|
||||
|
||||
interval: any;
|
||||
@@ -10,9 +10,10 @@ import { InputTextModule } from 'primeng/inputtext';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { Product, ProductService } from '../../service/demo/product.service';
|
||||
import { Product, ProductService } from '../service/product.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-overlay-demo',
|
||||
standalone: true,
|
||||
imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule],
|
||||
template: ` <div class="flex flex-col md:flex-row gap-8">
|
||||
@@ -134,7 +135,7 @@ import { Product, ProductService } from '../../service/demo/product.service';
|
||||
</div>`,
|
||||
providers: [ConfirmationService, MessageService, ProductService]
|
||||
})
|
||||
export class OverlayDoc implements OnInit {
|
||||
export class OverlayDemo implements OnInit {
|
||||
images: any[] = [];
|
||||
|
||||
display: boolean = false;
|
||||
@@ -18,6 +18,7 @@ import { IconFieldModule } from 'primeng/iconfield';
|
||||
import { InputIconModule } from 'primeng/inputicon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-panels-demo',
|
||||
standalone:true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
@@ -212,7 +213,7 @@ import { InputIconModule } from 'primeng/inputicon';
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class PanelsDoc {
|
||||
export class PanelsDemo {
|
||||
items: MenuItem[] = [
|
||||
{
|
||||
label: 'Save',
|
||||
@@ -16,14 +16,15 @@ import { RippleModule } from 'primeng/ripple';
|
||||
import { InputIconModule } from 'primeng/inputicon';
|
||||
import { IconFieldModule } from 'primeng/iconfield';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { Customer, CustomerService, Representative } from '../../service/demo/customer.service';
|
||||
import { Product, ProductService } from '../../service/demo/product.service';
|
||||
import { Customer, CustomerService, Representative } from '../service/customer.service';
|
||||
import { Product, ProductService } from '../service/product.service';
|
||||
|
||||
interface expandedRows {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-table-demo',
|
||||
standalone: true,
|
||||
imports: [TableModule, MultiSelectModule,SelectModule, InputIconModule, TagModule, InputTextModule, SliderModule, ProgressBarModule, ToggleButtonModule, ToastModule, CommonModule, FormsModule, ButtonModule, RatingModule, RippleModule, IconFieldModule],
|
||||
template: `
|
||||
@@ -399,7 +400,7 @@ interface expandedRows {
|
||||
}`,
|
||||
providers: [ConfirmationService, MessageService, CustomerService, ProductService],
|
||||
})
|
||||
export class TableDoc implements OnInit {
|
||||
export class TableDemo implements OnInit {
|
||||
|
||||
customers1: Customer[] = [];
|
||||
|
||||
@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
|
||||
@Component({
|
||||
selector: 'app-timeline-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TimelineModule, ButtonModule, CardModule],
|
||||
template: ` <div class="grid grid-cols-12 gap-8">
|
||||
@@ -101,7 +102,7 @@ import { ButtonModule } from 'primeng/button';
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
export class TimelineDoc {
|
||||
export class TimelineDemo {
|
||||
events1: any[] = [];
|
||||
|
||||
events2: any[] = [];
|
||||
@@ -4,9 +4,10 @@ import {TreeModule} from "primeng/tree";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {TreeTableModule} from "primeng/treetable";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import { NodeService } from '../../service/demo/node.service';
|
||||
import { NodeService } from '../service/node.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tree-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, TreeModule, TreeTableModule],
|
||||
template: `
|
||||
@@ -39,7 +40,7 @@ import { NodeService } from '../../service/demo/node.service';
|
||||
`,
|
||||
providers: [NodeService]
|
||||
})
|
||||
export class TreeDoc implements OnInit {
|
||||
export class TreeDemo implements OnInit {
|
||||
treeValue: TreeNode[] = [];
|
||||
|
||||
treeTableValue: TreeNode[] = [];
|
||||
@@ -1,35 +1,35 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { ButtonDoc } from './buttondoc';
|
||||
import { ChartDoc } from './chartdoc';
|
||||
import { FileDoc } from './filedoc';
|
||||
import { FormLayoutDoc } from './formlayoutdoc';
|
||||
import { InputDoc } from './inputdoc';
|
||||
import { ListDoc } from './listdoc';
|
||||
import { MediaDoc } from './mediadoc';
|
||||
import { MessagesDoc } from './messagesdoc';
|
||||
import { MiscDoc } from './miscdoc';
|
||||
import { PanelsDoc } from './panelsdoc';
|
||||
import { TimelineDoc } from './timelinedoc';
|
||||
import { TableDoc } from './tabledoc';
|
||||
import { OverlayDoc } from './overlaydoc';
|
||||
import { TreeDoc } from './treedoc';
|
||||
import { MenuDoc } from './menudoc';
|
||||
import { ButtonDemo } from './buttondemo';
|
||||
import { ChartDemo } from './chartdemo';
|
||||
import { FileDemo } from './filedemo';
|
||||
import { FormLayoutDemo } from './formlayoutdemo';
|
||||
import { InputDemo } from './inputdemo';
|
||||
import { ListDemo } from './listdemo';
|
||||
import { MediaDemo } from './mediademo';
|
||||
import { MessagesDemo } from './messagesdemo';
|
||||
import { MiscDemo } from './miscdemo';
|
||||
import { PanelsDemo } from './panelsdemo';
|
||||
import { TimelineDemo } from './timelinedemo';
|
||||
import { TableDemo } from './tabledemo';
|
||||
import { OverlayDemo } from './overlaydemo';
|
||||
import { TreeDemo } from './treedemo';
|
||||
import { MenuDemo } from './menudemo';
|
||||
|
||||
export default [
|
||||
{ path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDoc},
|
||||
{ path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDoc },
|
||||
{ path: 'file', data: { breadcrumb: 'File' }, component: FileDoc },
|
||||
{ path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDoc },
|
||||
{ path: 'input', data: { breadcrumb: 'Input' }, component: InputDoc },
|
||||
{ path: 'list', data: { breadcrumb: 'List' }, component: ListDoc },
|
||||
{ path: 'media', data: { breadcrumb: 'Media' }, component: MediaDoc },
|
||||
{ path: 'message', data: { breadcrumb: 'Message' }, component: MessagesDoc },
|
||||
{ path: 'misc', data: { breadcrumb: 'Misc' }, component: MiscDoc },
|
||||
{ path: 'panel', data: { breadcrumb: 'Panel' }, component: PanelsDoc },
|
||||
{ path: 'timeline', data: { breadcrumb: 'Timeline' }, component: TimelineDoc },
|
||||
{ path: 'table', data: { breadcrumb: 'Table' }, component: TableDoc },
|
||||
{ path: 'overlay', data: { breadcrumb: 'Overlay' }, component: OverlayDoc },
|
||||
{ path: 'tree', data: { breadcrumb: 'Tree' }, component: TreeDoc },
|
||||
{ path: 'menu', data: { breadcrumb: 'Menu' }, component: MenuDoc },
|
||||
{ path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo},
|
||||
{ path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDemo },
|
||||
{ path: 'file', data: { breadcrumb: 'File' }, component: FileDemo },
|
||||
{ path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDemo },
|
||||
{ path: 'input', data: { breadcrumb: 'Input' }, component: InputDemo },
|
||||
{ path: 'list', data: { breadcrumb: 'List' }, component: ListDemo },
|
||||
{ path: 'media', data: { breadcrumb: 'Media' }, component: MediaDemo },
|
||||
{ path: 'message', data: { breadcrumb: 'Message' }, component: MessagesDemo },
|
||||
{ path: 'misc', data: { breadcrumb: 'Misc' }, component: MiscDemo },
|
||||
{ path: 'panel', data: { breadcrumb: 'Panel' }, component: PanelsDemo },
|
||||
{ path: 'timeline', data: { breadcrumb: 'Timeline' }, component: TimelineDemo },
|
||||
{ path: 'table', data: { breadcrumb: 'Table' }, component: TableDemo },
|
||||
{ path: 'overlay', data: { breadcrumb: 'Overlay' }, component: OverlayDemo },
|
||||
{ path: 'tree', data: { breadcrumb: 'Tree' }, component: TreeDemo },
|
||||
{ path: 'menu', data: { breadcrumb: 'Menu' }, component: MenuDemo },
|
||||
{ path: '**', redirectTo: '/notfound' }
|
||||
] as Routes;
|
||||
@@ -1,6 +0,0 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { Dashboard } from './dashboard';
|
||||
|
||||
export default [
|
||||
{ path: '', component: Dashboard}
|
||||
] as Routes;
|
||||
Reference in New Issue
Block a user