Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/primefaces/primeng
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Sep 25, 2023
2 parents 33c4bb5 + 5c17ea9 commit dbcd53a
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 117 deletions.
73 changes: 32 additions & 41 deletions src/app/showcase/doc/orderlist/basicdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,19 @@ import { ProductService } from '../../service/productservice';
<app-docsectiontext [title]="title" [id]="id">
<p>OrderList is used as a controlled input with <i>value</i> properties. Content of a list item needs to be defined with the <i>pTemplate</i> property that receives an object in the list as parameter.</p>
</app-docsectiontext>
<div class="card flex justify-content-center">
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
<div class="card xl:flex xl:justify-content-center">
<p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>
Expand Down Expand Up @@ -61,42 +58,36 @@ export class BasicDoc implements OnInit {

code: Code = {
basic: `
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
<p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>`,

html: `
<div class="card flex justify-content-center">
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
<div class="card xl:flex xl:justify-content-center">
<p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>
Expand Down
67 changes: 29 additions & 38 deletions src/app/showcase/doc/orderlist/dragdropdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,19 @@ import { ProductService } from '../../service/productservice';
<app-docsectiontext [title]="title" [id]="id">
<p>Items can be reordered using drag and drop by enabling <i>dragdrop</i> property.</p>
</app-docsectiontext>
<div class="card flex justify-content-center">
<div class="card xl:flex xl:justify-content-center">
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>
Expand Down Expand Up @@ -63,40 +60,34 @@ export class DragDropDoc implements OnInit {
basic: `
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>`,

html: `
<div class="card flex justify-content-center">
<div class="card xl:flex xl:justify-content-center">
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>
Expand Down
67 changes: 29 additions & 38 deletions src/app/showcase/doc/orderlist/filterdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,19 @@ import { ProductService } from '../../service/productservice';
<app-docsectiontext [title]="title" [id]="id">
<p>Filter value is checked against the property of an object configured with the <i>filterBy</i> property</p>
</app-docsectiontext>
<div class="card flex justify-content-center">
<div class="card xl:flex xl:justify-content-center">
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>
Expand Down Expand Up @@ -63,40 +60,34 @@ export class FilterDoc implements OnInit {
basic: `
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>`,

html: `
<div class="card flex justify-content-center">
<div class="card xl:flex xl:justify-content-center">
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
<ng-template let-product pTemplate="item">
<div class="flex align-items-center p-2 w-full flex-wrap">
<div class="w-full text-center lg:w-auto lg:text-left">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
</div>
<div class="flex-1">
<h5 class="mb-2">{{ product.name }}</h5>
<i class="pi pi-tag vertical-align-middle mr-2"></i>
<span class="vertical-align-middle line-height-1">{{ product.category }}</span>
</div>
<div class="flex flex-column align-items-end">
<h6 class="mb-2">{{ '$ ' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ product.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ product.category }}</span>
</div>
</div>
<span class="font-bold text-900">{{ '$' + product.price }}</span>
</div>
</ng-template>
</p-orderList>
Expand Down

1 comment on commit dbcd53a

@vercel
Copy link

@vercel vercel bot commented on dbcd53a Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test.vercel.app
primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app

Please sign in to comment.