synced/primeng
1
0
Fork 0
mirror of https://github.com/primefaces/primeng.git synced 2025-03-14 10:07:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update theming documentation

Browse Source
This commit is contained in:
Çetin
2025-03-12 16:36:53 +03:00
parent 33b099064e
commit 8cc432ba26
7 changed files with 1197 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -38,7 +38,8 @@
background-color: transparent;
border: 0 none;
display: block;
padding: 0 2rem 1rem 2rem;
padding-block: 0 1rem;
padding-inline: 2rem;
text-align: center;
color: var(--text-color);
font-size: 1rem;
@ -111,7 +112,7 @@
align-items: center;
scroll-margin-top: 6.5rem;
> a {
>a {
color: var(--primary-text-color);
opacity: 0.7;
margin-inline-start: 1rem;
@ -122,7 +123,7 @@
@include focus-visible();
}
> .doc-section-label-badge {
>.doc-section-label-badge {
margin-inline-start: 0.5rem;
}
@ -131,7 +132,7 @@
}
&:hover {
> a {
>a {
display: block;
&:hover {
@ -142,7 +143,7 @@
}
.doc-section-description {
> p {
>p {
font-size: 1.125rem;
i {
@ -184,7 +185,7 @@
overflow-x: hidden;
align-self: flex-start;
> .navbar-item {
>.navbar-item {
.navbar-item-content {
border-inline-start: 1px solid var(--border-color);
padding-inline-start: .25rem;
@ -197,7 +198,7 @@
}
.navbar-item {
> .navbar-item-content {
>.navbar-item-content {
display: flex;
button {
@ -229,7 +230,7 @@
}
&.active-navbar-item {
> .navbar-item-content {
>.navbar-item-content {
border-color: var(--primary-text-color);
button {
@ -281,7 +282,7 @@
right: .75rem;
gap: .5rem;
display: none;
background: rgba(255,255,255,.05);
background: rgba(255, 255, 255, .05);
border-radius: 10px;
padding: 2px;
backdrop-filter: blur(6px);
@ -298,7 +299,7 @@
cursor: pointer;
&:hover {
background-color: rgba(255,255,255,.1);
background-color: rgba(255, 255, 255, .1);
color: var(--code-button-text-color);
}
@ -327,7 +328,8 @@
th {
border-bottom: 1px solid var(--border-color);
padding: .75rem 1rem;
padding-block: .75rem;
padding-inline: 1rem;
text-align: start;
text-transform: capitalize;
}
@ -338,7 +340,8 @@
}
td {
padding: .75rem 1rem;
padding-block: .75rem;
padding-inline: 1rem;
border-bottom: 1px solid var(--border-color);
white-space: pre-line;
line-height: 1.5;
@ -368,14 +371,15 @@
}
.doc-option-name,
> i:not(.pi) {
i:not(.pi) {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative;
scroll-margin-top: 6.5rem;
background-color: var(--mark-background);
color: var(--mark-text);
border-radius: 6px;
padding: 2px 6px;
padding-block: 2px;
padding-inline: 6px;
font-weight: 600;
font-style: normal;
white-space: nowrap;
@ -404,7 +408,8 @@
}
.doc-option-default,
.doc-option-returnType {
.doc-option-return-type,
.doc-option-css-variable {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 400;
font-style: normal;
@ -412,13 +417,18 @@
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding: 2px 6px;
padding-block: 2px;
padding-inline: 6px;
max-width: min-content;
border-color: var(--border-color);
background-color: var(--card-background);
color: var(--text-secondary-color);
}
.doc-option-css-variable {
white-space: nowrap;
}
.doc-option-parameter-name {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
@ -434,3 +444,73 @@
}
}
}
.doc-ptviewerwrapper {
display: flex;
flex-direction: row;
padding: 0 !important;
.doc-ptviewer {
display: flex;
align-items: center;
justify-content: center;
border-color: var(--border-color);
border-width: 0 1px 0 0;
padding: 1rem;
width: 75%;
}
.doc-ptoptions {
display: flex;
flex-direction: column;
gap: .5rem;
padding: .5rem;
width: 25%;
max-height: 720px;
overflow-y: auto;
.doc-ptoption {
display: flex;
flex-direction: column;
padding: .5rem;
&:hover {
background-color: var(--hover-background);
}
.doc-ptoption-text:hover {
cursor: default;
}
}
}
}
.doc-preset-table {
border-collapse: collapse;
width: 100%;
min-width: 640px;
margin-bottom: 1.5rem;
th {
border-bottom: 1px solid var(--border-color);
padding-block: .75rem;
padding-inline: 1rem;
text-align: start;
text-transform: capitalize;
}
td {
padding-block: .75rem;
padding-inline: 1rem;
border-bottom: 1px solid var(--border-color);
white-space: pre-line;
line-height: 1.5;
scroll-margin-top: 6.5rem;
&:first-child {
color: var(--primary-text-color);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 600;
}
}
}

2
apps/showcase/components/doc/app.doc.component.ts
View File

@ -33,7 +33,7 @@ import { AppDocService } from './app.doc.service';
}
@if (themeDocs) {
<app-docthemingsection [header]="header" [docs]="themeDocs" class="doc-tabpanel" [ngStyle]="{ display: docService.activeTab() === 2 ? 'flex' : 'none' }" />
<app-docthemingsection [header]="header" [docs]="themeDocs" [componentName]="themeDocs" class="doc-tabpanel" [ngStyle]="{ display: docService.activeTab() === 2 ? 'flex' : 'none' }" />
}
</div>
</div>`,

17
apps/showcase/components/doc/app.doc.module.ts
View File

@ -16,11 +16,24 @@ import { RouterModule } from '@angular/router';
import { AppDocThemingSectionComponent } from './app.docthemingsection.component';
import { AppDocFeaturesSection } from './app.docfeaturessection.component';
import { AppDocService } from './app.doc.service';
import { AppDocStyledPresetComponent } from '@/components/doc/app.docstyledpreset.component';
@NgModule({
imports: [CommonModule, FormsModule, ButtonModule, InputTextModule, TooltipModule, AppCodeModule, RouterModule],
exports: [AppDocSectionTextComponent, AppDocApiSection, AppDocFeaturesSection, AppDocSectionNavComponent, AppDocSectionsComponent, AppDevelopmentSection, AppDoc, AppDocApiTable, AppDocThemingSectionComponent],
declarations: [AppDocFeaturesSection, AppDocSectionTextComponent, AppDocApiSection, AppDocSectionNavComponent, AppDocSectionsComponent, AppDevelopmentSection, AppDoc, AppDocApiTable, AppDocThemingSectionComponent],
exports: [
AppDocSectionTextComponent,
AppDocStyledPresetComponent,
CommonModule,
AppDocApiSection,
AppDocFeaturesSection,
AppDocSectionNavComponent,
AppDocSectionsComponent,
AppDevelopmentSection,
AppDoc,
AppDocApiTable,
AppDocThemingSectionComponent
],
declarations: [AppDocFeaturesSection, AppDocApiSection, AppDocStyledPresetComponent, AppDocSectionNavComponent, AppDocSectionsComponent, AppDocSectionTextComponent, AppDevelopmentSection, AppDoc, AppDocApiTable, AppDocThemingSectionComponent],
providers: [AppDocService]
})
export class AppDocModule {}

14
apps/showcase/components/doc/app.docapitable.component.ts
View File

@ -18,7 +18,7 @@ import { Router } from '@angular/router';
<table class="doc-table">
<thead>
<tr>
<th *ngFor="let key of getKeys(data[0])">
<th *ngFor="let key of getKeys(data[0])" [style]="{ 'min-width': key === 'variable' && '30rem' }">
<ng-container *ngIf="key !== 'readonly' && key !== 'optional' && key !== 'deprecated'">
{{ key }}
</ng-container>
@ -71,17 +71,21 @@ import { Router } from '@angular/router';
<span>null</span>
</ng-template>
</ng-container>
<span
<div
[ngClass]="{
'doc-option-dark': isDarkMode && entry[0] === 'default',
'doc-option-light': !isDarkMode && entry[0] === 'default',
'doc-option-default': entry[0] === 'default',
'doc-option-description': entry[0] === 'description'
'doc-option-description': entry[0] === 'description',
'doc-option-return-type': entry[0] === 'variable',
'min-w-full': entry[0] === 'variable'
}"
style="display: inline"
*ngIf="entry[0] !== 'name' && entry[0] !== 'type' && entry[0] !== 'parameters'"
[id]="id + '.' + entry[0]"
>{{ entry[1] }}
</span>
>
{{ entry[1] }}
</div>
</ng-container>
</td>
</tr>

56
apps/showcase/components/doc/app.docstyledpreset.component.ts Normal file
View File

@ -0,0 +1,56 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-docstyledpreset',
standalone: false,
template: `<app-docsectiontext>
<p>PrimeNG offers various preset options that allow you to customize the component's styling to match your application's design system. Below you'll find links to the implementation and type definitions for each preset.</p>
<div class="doc-tablewrapper mt-4">
<table class="doc-preset-table">
<thead>
<tr>
<th *ngFor="let header of headers">
<ng-container *ngIf="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
{{ header }}
</ng-container>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let preset of presets">
<td [class]="'doc-option-preset-name-{{preset.toLowerCase()}}'">{{ preset }}</td>
<td [class]="'doc-option-preset-implementation-{{preset.toLowerCase()}}'">
<a
href="https://github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/{{ preset.toLowerCase() }}/{{ data }}/index.ts"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
>
<span class="text-surface-900 dark:text-surface-50 font-medium">{{ preset }}</span>
<i class="pi pi-external-link !text-xs text-surface-900 dark:text-surface-50"></i>
</a>
</td>
<td [class]="'doc-option-preset-type-{{preset.toLowerCase()}}'">
<a
href="https://github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/{{ preset.toLowerCase() }}/{{ data }}/index.d.ts"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
>
<span class="text-surface-900 dark:text-surface-50 font-medium">{{ preset }}</span>
<i class="pi pi-external-link !text-xs text-surface-900 dark:text-surface-50"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</app-docsectiontext>`
})
export class AppDocStyledPresetComponent {
@Input() data: string;
headers: string[] = ['Preset', 'Implementation', 'Types'];
presets: string[] = ['Aura', 'Lara', 'Nora', 'Material'];
}

3
apps/showcase/components/doc/app.docthemingsection.component.ts
View File

@ -17,6 +17,7 @@ import ThemeDoc from '@/doc/apidoc/themedoc.json';
@if (tokensDoc()) {
<app-docapitable [id]="header + 'DesignTokens'" [label]="header + ' Design Tokens'" description="List of design tokens used in a preset." [data]="tokensDoc().tokens" />
}
<app-docstyledpreset [data]="componentName.toLowerCase()"></app-docstyledpreset>
</div>
<app-docsection-nav [docs]="navItems()" />
`,
@ -27,6 +28,8 @@ export class AppDocThemingSectionComponent {
@Input() docs: string;
@Input() componentName: string;
tokensDoc = signal<any>([]);
classDoc = signal<any>([]);

1692
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff