Giter Site home page Giter Site logo

community's Introduction

Maven Actions Status CI Actions Status Integration Tests Sonar License: MIT Discord Chat Stackoverflow Prime Discussions

PrimeFaces Hero

PrimeFaces

This is an overview page, please visit PrimeFaces.org for more information.

PrimeFaces Logo

Overview


PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more. Here are some of the users who notified us or subscribed to a PrimeFaces Support Service.

Community <> LTS <> Pro


This is the open source code and issue tracker of the PrimeFaces master (a.k.a. community version).
Please check the following link for informations about Long Term Support (LTS) and PRO

What does that mean?

  • PrimeFaces is developed by PrimeTek and the open source community.
  • The most contributers here on GitHub are working on PrimeFaces in their spare time.
  • PrimeTek pushes fixes and new features from their closed source LTS and Pro repositories to the community edition.
  • We, the community on GitHub, only provide support for issues, which are reproducable with the current major release or SNAPSHOT.
  • We are NOT able to port bugfixes to elite releases. This is up to PrimeTek and can e.g. be triggered with PrimeFaces PRO.

Versions


Version JSF version Java version Binary Source Documentation
14.0.x JSF23 - JSF40 Java JAR Sources 14.0.4 Documentation
13.0.x JSF20 - JSF40 Java JAR Sources 13.0.10 Documentation
12.0.x JSF20 - JSF40 Java JAR Sources 12.0.0 Documentation
Archive
Version JSF version Java version Binary Source Documentation
11.0.0 2.0 - 4.0 8 - ? primefaces-11.0.0.jar primefaces-11.0.0-sources.jar 11.0.0 Documentation
10.0.0 2.0 - 3.0 8 - ? primefaces-10.0.0.jar primefaces-10.0.0-sources.jar 10.0.0 Documentation
8.0 2.0 - 2.3 8 - ? primefaces-8.0.jar primefaces-8.0-sources.jar 8.0 Documentation
7.0 2.0 - 2.3 7 - ? primefaces-7.0.jar primefaces-7.0-sources.jar 7.0 Documentation
6.2 2.0 - 2.3 6 - ? primefaces-6.2.jar primefaces-6.2-sources.jar 6.2 Documentation
6.1 2.0 - 2.3 5 - ? primefaces-6.1.jar primefaces-6.1-sources.jar 6.1 Documentation
6.0 2.0 - 2.2 5 - ? primefaces-6.0.jar primefaces-6.0-sources.jar 6.0 Documentation
5.3 2.0 - 2.2 5 - ? primefaces-5.3.jar primefaces-5.3-sources.jar 5.3 Documentation
5.2 2.0 - 2.2 5 - ? primefaces-5.2.jar primefaces-5.2-sources.jar 5.2 Documentation
5.1 2.0 - 2.2 5 - ? primefaces-5.1.jar primefaces-5.1-sources.jar 5.1 Documentation

For a full list of the available downloads, please visit the download page.

Maven


Release
<!-- Java EE / javax.* / JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.4</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 4.0+  -->	
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.4</version>
    <classifier>jakarta</classifier>
</dependency>
SNAPSHOT
<!-- Java EE / javax.* / JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>15.0.0-SNAPSHOT</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 4.0+  -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>15.0.0-SNAPSHOT</version>
    <classifier>jakarta</classifier>
</dependency>

<repositories>
  <repository>
    <id>sonatype-snapshots</id>
    <name>Sonatype Snapshot Repository</name>
    <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    <releases>
        <enabled>false</enabled>
    </releases>
    <snapshots>
        <enabled>true</enabled>
    </snapshots>
  </repository>
</repositories>

Tag Library


The VDL documentation for the PrimeFaces tag libary can be found here: https://primefaces.github.io/primefaces/vdldoc/

Usage


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="jakarta.faces.html"
	xmlns:f="jakarta.faces.core"
	xmlns:pt="jakarta.faces.passthrough"
	xmlns:jsf="jakarta.faces"
	xmlns:ui="jakarta.faces.facelets"
	xmlns:p="primefaces">

	<h:head>

	</h:head>

	<h:body>

		<p:spinner />

	</h:body>
</html>

Demo


Please refer to the showcase in order to see the full usage of the components. Sources of PrimeFaces showcase are available within module primefaces-showcase.

Contribution


Visit the contribution page for detailed information.

Release Instructions


  • Run mvn versions:set -DgenerateBackupPoms=false -DnewVersion=14.0.4 to update all modules versions
  • Commit and push the changes to GitHub
  • In GitHub create a new Release titled 14.0.4 to tag this release
  • Run mvn clean deploy -Prelease to push to Maven Central
  • Rename Milestone in GitHub Issues and close it
  • Create a new Milestone

License


Licensed under the MIT License.

community's People

Contributors

cagataycivici avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

community's Issues

Markdown Documentation for GPT Implementations

Description

If we look at amazing projects like builder.io's Frontend component builder it would be nice to have the PrimeVue (and others) and PrimeFlex Documentation as pure markdown. So that it can be used to fine tune LLMs or make automatic prompts based on the original Documentation stored in a vector Database.
Are there plans to provide the Documentation not only via the Website?

Describe the solution you would like

Markdown Documentation

Additional context

No response

Problem with Calendar component in Web component

Discussed in https://github.com/orgs/primefaces/discussions/1464

Originally posted by pearl1488 March 19, 2024
I've encountered an issue with an Angular component, specifically the p-calendar, which I've converted into a web component using Angular elements. The problem arises when selecting a date from the picker or navigating to the next month, as the popup closes unexpectedly without properly binding the selected data. This issue is isolated to the Angular web component.

Could you help me to resolve the issue?

image
image
image

Galleria fullscreen with thumbnails

Discussed in https://github.com/orgs/primefaces/discussions/1158

Originally posted by BAZDemkivDev February 9, 2024
Hi, I have some trouble with the Galleria component that has fullscreen property enabled with thumbnails.
Screenshot:
Знімок екрана 2024-02-09 о 11 14 48
The thumbnails have overflow auto, visible scrolls and the photos in the thumbnails are very close to each other and have weird width.
Also, when navigating via thumbnail navigation, the items sometimes disappear, as seen on these screenshots:
Знімок екрана 2024-02-09 о 11 15 05
Знімок екрана 2024-02-09 о 11 15 24
I expected it to be more like the original without the fullscreen property:
Знімок екрана 2024-02-09 о 11 15 47
When discussing this with other developers, most of them said that older versions of PrimeVue didn't have this problem, but I couldn't find a working version of the component in older versions. Right now I'm using version 3.48.1, the previous versions that I've tried are: 3.47.0, 3.46.0 and 3.45.0.
The screenshots provided are all from PrimeVue documentation: https://primevue.org/galleria/#fullscreenwiththumbnail
Looking forward to your reply!

No ability to add custom submenu icon in menubar

Discussed in https://github.com/orgs/primefaces/discussions/738

Originally posted by AlexanderLevchenko December 20, 2023
Hi, colleagues!
Since primeng v16.2 we faced with a problem:
we have no ability to add custom submenu icon in menubar

image

This is because you are trying to get submenuIconTemplate from menubar, but appropriate viewChild for menubar is menubarViewChild
image

image

I believe, submenuIconTemplate should be retrieved from menubarViewChild instead of menubar in the template

This is not reproducible in v16.0.2
Could you please help on this?
Thank you in advance!

DataTable: Arial-label issues

Discussed in https://github.com/orgs/primefaces/discussions/1240

Originally posted by xaxoxavi February 20, 2024
Some elements (buttons or form elements) generated by the DataTable component do not have an 'aria-label' attribute.
Here is the list of the ones I spotted:

Same issue resolved in primereact

(1) The filter button generated by property filterDisplay='menu
(2) The paginator dropdown menu to select the number of rows to display. This element generates a 'p-hidden-accessible' div with an input element (with role="textbox") in it, but this input has no aria-label attribute. It also generates a 'p-dropdown-trigger' div with the role 'button' and this div has no aria-label attribute
(3) The radio buttons and checkboxes generated in selection mode

(1)
image
(2)
image
(3.1)
image
(3.2)
image

Migrating 8 > 13: encoding issue with p:autoComplete

Hi, not sure if I should open a new issue. But I just tried PF 13.0.8 and the issue below still happens.

Thanks

Discussed in https://github.com/orgs/primefaces/discussions/1398

Originally posted by luccotta March 10, 2024
Hello,

after migrating from 8 to 10, the @FacesConverter I use for my p:autoComplete is receiving a value with encoding issues.

In getAsString I return "Português" but getAsObject is receiving "Português" when I select it in the p:autoComplete

Any idea why?

I'm using Tomcat 7, Java 11, Chrome

Thanks

Feature: "not-in" mode for filter function accessed by component reference [DataTable]

Discussed in https://github.com/orgs/primefaces/discussions/571

Originally posted by dnyaneshwar2023 November 28, 2023
Hello folks 👋 ,

Do you guys think we should also have "not-in"/"notIn" mode for the filter function that is used from the component reference for the DataTable?

https://primereact.org/datatable/#api.DataTable.methods
image

I was using it in one of my projects and I was hoping this mode to have since there can be use case where I have use case to avoid some items. (That could be achieved through providing all items except that we want to avoid in "in" mode but that seems hacky when I don't have the whole list of data)

I am happy to contribute on it if it's needed.

Freya PrimeVue does not compile SCSS

Discussed in https://github.com/orgs/primefaces/discussions/1150

Originally posted by petrbouda February 8, 2024
Hi,

I bought Freya PrimeVue today and did

npm install
npm run dev

And it look like scss files are not compiled.

Screenshot from 2024-02-08 16-58-00

npm run build says
/layout/styles/theme/theme-light/teal/theme.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming (370) node_modules/@fullcalendar/interaction/index.js^C

and generates to dist:

`
── index.html
└── layout
├── images
│   ├── [email protected]
│   └── avatar-m-1.jpg
└── styles
├── preloading
│   ├── preloading.css
│   └── preloading.scss
└── theme
├── extensions
│   └── _fullcalendar.scss
├── theme-base
│   ├── _colors.scss
│   ├── _common.scss
│   ├── components
│   │   ├── button
│   │   │   ├── _button.scss
│   │   │   ├── _speeddial.scss
│   │   │   └── _splitbutton.scss
│   │   ├── data
│   │   │   ├── _carousel.scss
│   │   │   ├── _datatable.scss
│   │   │   ├── _dataview.scss
│   │   │   ├── _filter.scss
│   │   │   ├── _orderlist.scss
│   │   │   ├── _organizationchart.scss
│   │   │   ├── _paginator.scss
│   │   │   ├── _picklist.scss
│   │   │   ├── _timeline.scss
│   │   │   ├── _tree.scss
│   │   │   └── _treetable.scss
│   │   ├── file
│   │   │   └── _fileupload.scss
│   │   ├── input
│   │   │   ├── _autocomplete.scss
│   │   │   ├── _calendar.scss
│   │   │   ├── _cascadeselect.scss
│   │   │   ├── _checkbox.scss
│   │   │   ├── _chips.scss
│   │   │   ├── _colorpicker.scss
│   │   │   ├── _dropdown.scss
│   │   │   ├── _editor.scss
│   │   │   ├── _inputgroup.scss
│   │   │   ├── _inputnumber.scss
│   │   │   ├── _inputswitch.scss
│   │   │   ├── _inputtext.scss
│   │   │   ├── _listbox.scss
│   │   │   ├── _multiselect.scss
│   │   │   ├── _password.scss
│   │   │   ├── _radiobutton.scss
│   │   │   ├── _rating.scss
│   │   │   ├── _selectbutton.scss
│   │   │   ├── _slider.scss
│   │   │   ├── _togglebutton.scss
│   │   │   └── _treeselect.scss
│   │   ├── menu
│   │   │   ├── _breadcrumb.scss
│   │   │   ├── _contextmenu.scss
│   │   │   ├── _dock.scss
│   │   │   ├── _megamenu.scss
│   │   │   ├── _menubar.scss
│   │   │   ├── _menu.scss
│   │   │   ├── _panelmenu.scss
│   │   │   ├── _steps.scss
│   │   │   ├── _tabmenu.scss
│   │   │   └── _tieredmenu.scss
│   │   ├── messages
│   │   │   ├── _inlinemessage.scss
│   │   │   ├── _message.scss
│   │   │   └── _toast.scss
│   │   ├── misc
│   │   │   ├── _avatar.scss
│   │   │   ├── _badge.scss
│   │   │   ├── _blockui.scss
│   │   │   ├── _chip.scss
│   │   │   ├── _inplace.scss
│   │   │   ├── _progressbar.scss
│   │   │   ├── _progressspinner.scss
│   │   │   ├── _scrolltop.scss
│   │   │   ├── _skeleton.scss
│   │   │   ├── _tag.scss
│   │   │   └── _terminal.scss
│   │   ├── multimedia
│   │   │   ├── _galleria.scss
│   │   │   └── _image.scss
│   │   ├── overlay
│   │   │   ├── _confirmpopup.scss
│   │   │   ├── _dialog.scss
│   │   │   ├── _overlaypanel.scss
│   │   │   ├── _sidebar.scss
│   │   │   └── _tooltip.scss
│   │   └── panel
│   │   ├── _accordion.scss
│   │   ├── _card.scss
│   │   ├── _divider.scss
│   │   ├── _fieldset.scss
│   │   ├── _panel.scss
│   │   ├── _scrollpanel.scss
│   │   ├── _splitter.scss
│   │   ├── _tabview.scss
│   │   └── _toolbar.scss
│   ├── _components.scss
│   └── _mixins.scss
├── theme-dark
│   ├── avocado
│   │   └── theme.scss
│   ├── blue
│   │   └── theme.scss
│   ├── _extensions.scss
│   ├── green
│   │   └── theme.scss
│   ├── indigo
│   │   └── theme.scss
│   ├── orange
│   │   └── theme.scss
│   ├── purple
│   │   └── theme.scss
│   ├── red
│   │   └── theme.scss
│   ├── teal
│   │   └── theme.scss
│   ├── turquoise
│   │   └── theme.scss
│   ├── _variables.scss
│   └── yellow
│   └── theme.scss
└── theme-light
├── avocado
│   └── theme.scss
├── blue
│   └── theme.scss
├── _extensions.scss
├── green
│   └── theme.scss
├── indigo
│   └── theme.scss
├── orange
│   └── theme.scss
├── purple
│   └── theme.scss
├── red
│   └── theme.scss
├── teal
│   └── theme.scss
├── turquoise
│   └── theme.scss
├── _variables.scss
└── yellow
└── theme.scss

`

Cursor does not allow you to select items in a P-Dropdown in v17.3.3

Discussed in https://github.com/orgs/primefaces/discussions/969

Originally posted by hepple January 20, 2024
I have the below, as well as many other examples, where in v16 the cursor would allow you to select an item. This has stopped working in v17+

<div class="col-4"> <span class="p-float-label"> <p-dropdown formControlName="newGovernorSalutationId" [options]="siSalutations" id="newGovernorSalutationId" [filter]="true" filterBy="label" optionLabel="label" optionValue="value" appendTo="body"></p-dropdown> <label for="newGovernorSalutationId">Salutation</label> </span> </div>

Empty value ("") for option in Dropdown components makes selected option label blank

Discussed in https://github.com/orgs/primefaces/discussions/1639

Version: 4.0.0 beta

Originally posted by ethernidee April 10, 2024
Given options [{ value: '', label: "Private" }, { value: "123", label: "Public" } ] for Dropdown component.

<Dropdown
  ...
  option-label="label"
  option-value="value"
</Dropdown>

dropdown

Anytime user selects option with empty value, the value label is rendered as empty text, which is invalid. Opening dropdowns show valid option label in the list, but selected option caption will always be blank.

Rendering issues with PrimeNG Ultima 17 update

Discussed in https://github.com/orgs/primefaces/discussions/792

Originally posted by admin-nexgen December 30, 2023
There are a couple of issues with the styling in the latest update.

The mega menu text colors are hard-coded to red in the dark theme _variables.scss file.

New update

$menuitemTextColor:red !default;

Should be

$menuitemTextColor:$textColor !default;

Also the table demo rating icons are too big compared to the previous release

Screenshot 2023-12-30 161215

Screenshot 2023-12-30 161303

The blog demo text and images are not appearing as well

image

There might be other issues, these are just the ones that I found so far.

Picklist Drag&Drop Multiple Selection

Discussed in https://github.com/orgs/primefaces/discussions/1691

Originally posted by Mnaaz April 17, 2024
The picklist currently allows the selection of multiple items via setting [metaKeySelection]="true". However, when having set [dragdrop]="true" it would be nice to be able to move the multiple selection via drag&drop from source to target list and vice versa. This is currently not possible. Only the item that was selected first is moved.
This behaviour is also not consistent with being able to transfer multiple selection via the arrow buttons.
It would be great if this enhancement would be added and to have some documentation on how to achieve this via workaround until the feature is available.

deprecated virtualScrollBody property in PrimeNG 14

Discussed in https://github.com/orgs/primefaces/discussions/817

Originally posted by Sayali77 January 3, 2024
my PrimeNG 13 application, I was utilizing the virtualScrollBody property of the Table component to access the scroll viewport bounds using the following code:

const scrollViewportBounds = this.table.virtualScrollBody.elementRef.nativeElement.getBoundingClientRect();

this gives the current scroll location
However, after upgrading to PrimeNG 14, I've discovered that the virtualScrollBody property is now deprecated, and I'm unable to find a direct replacement.
Could you please advise on the recommended approach to access the scroll viewport bounds in PrimeNG 14, particularly for virtual scrolling scenarios?
Is there an alternative property or method that I should be using instead of virtualScrollBody?

optionValue of p-dropdown is not properly working

Discussed in https://github.com/orgs/primefaces/discussions/421

Originally posted by BrayanDevM November 8, 2023

The issue

The optionValue of the component is not working correctly. I performed a version migration from PrimeNG 15 to 16.7.2, and immediately the dropdowns that receive an object but have their value and label specified stopped working. They are displayed correctly, but when selecting an option, the dropdown remains empty, and in the HTML, the value "empty" appears.

image

Code

form = this.fb.nonNullable.group({
  identificationTypeId: [1, [Validators.required]],
  identification: ['', [Validators.required, Validators.pattern(/^[0-9]*$/)]]
});

identificationTypeList = [
  { id: 1, shortName: 'CC', description: 'Cedula de ciudadania' },
  { id: 2, shortName: 'CE', description: 'Cedula de extranjeria' }
];
<p-dropdown
  optionValue="id"
  optionLabel="description"
  formControlName="identificationTypeId"
  [options]="identificationList"
></p-dropdown>

This is a testcase showing the problem:

https://stackblitz.com/edit/rxgqkz?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.ts

Need help in fixing Exporter after migrating from primefaces 7 to 8

Getting the following errors after upgrading the primefaces version cant find a solution to fix those issues please help.
ERROR MESSAGE
/////The type Exporter cannot be the superclass of CustomPdfWriter; a superclass must be a class//////
public class CustomPdfWriter extends Exporter {
///Logic

	@Override
	**ERROR MESSAGE**
	/////The method export(FacesContext, DataTable, String, boolean, boolean, String, MethodExpression, MethodExpression, ExporterOptions, MethodExpression) of type AnalysisReportPdfWriter must override or implement a supertype method//////
	public void export(FacesContext facesContext, DataTable table, String filename,
			boolean pageOnly, boolean selectionOnly, String encodingType,
			MethodExpression preProcessor, MethodExpression postProcessor, ExporterOptions argument1, MethodExpression argument2) throws IOException{
			////Logic
			}
					**ERROR MESSAGE**
			//////ColumnType cannot be resolved to a variable
			    	addColumnFacets(table, pdfTable, ColumnType.HEADER);

Changing Theme fails on Vue 3 PrimeVue

Discussed in https://github.com/orgs/primefaces/discussions/1022

Originally posted by Aleroms January 25, 2024
Hello,
I've tried to the best of my abilities to follow the documentation on switching themes but have not had success. When I inspect the page, I view changes in the head, specifically the link element, where it does reflect changes. My href attribute changes from <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css"> to <link id="theme-link" rel="stylesheet" href="/themes/lara-dark-green/theme.css">, however, the actual theme does not change.

I have created a test app with just this implemented in my repo changeTheme_PrimeVue as well as a live site example.

Here are the steps I took to create this below.

how to replicate:
create vue app npm init vue@latest
install primevue npm install primevue
in main.js
register plugin and import theme
import 'primevue/resources/themes/lara-light-green/theme.css'
import "primevue/resources/themes/lara-dark-green/theme.css";
copy themes from PrimeVue resources/themes folder into public/themes
place link in index.html <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css"/>
copy and paste code from App.vue into App.vue
run dev npm run dev

PanelMenu Component: Add header/icon template

As far as I know, and after looking for a solution, it seems there's no template available for the header of the PanelMenu.

My goal is to use a custom icon, as describe here https://primeng.org/customicons#svg
But this doesn't seem possible with the PanelMenu component.

The only template available is submenuicon, but it affects the arrow, not the icon.

The issue #13789 pointed out that there's an item template available for all menu item and has been closed, but for PanelMenu it affects only the submenu, not the first level menu.

Is there something I missed? If I didn't, would it be possible to add this feature? Thanks.

inputNumber doesn't accept entering a number with a leading decimal point like ".5"

Discussed in https://github.com/orgs/primefaces/discussions/525

Originally posted by iMarti November 22, 2023*
When using an inputNumber control, typing a number starting with a decimal point, like ".5" instead of "0.5" is not possible. The effect is that the entered number is only "5".

You can see the effect yourself in the third box named "Min-Max Fraction Digits" on PrimeNG documentation page here https://primeng.org/inputnumber. It is visible in any North American locale that uses a dot as a decimal point.

Actually, this is a common need supported by the standard <input type="number"> element.

*Edited to add more details.

Prevent accordion tab change based on a condition

Discussed in https://github.com/orgs/primefaces/discussions/917

Originally posted by thomasesh January 12, 2024
We use the accordion component to configure our settings and each tab has a separate group of settings and a submit button to save the changes on the tab. Primeng version 15.3.0.

I am implementing a feature that will pop up a confirmation dialog if the user tries to switch from or close a tab on which they have unsubmitted changes on the tab.

To do this, I use a templated header for the tab with click handler surrounding it to that will prompt before switching if there is a change on the tab. If the prompt is answered no, then the change will not occur.

This works except that the icon in the tab header is not covered by the click handler. So clicking on the icon will always change the tab regardless and not prompt.

I have a solution if I change the accordion code to take as input a "canToggle()" method, which will be used by the accordion tab to determine if toggling the tab is allowed or not. I can create a PR for this change but before I do, I want to make sure I am not missing some way to do this without changing the existing primeng accordion component.

Is there a way to do this using the existing primeng accordion component?

How to use PrimeVue blocks with PrimeVue unstyled tailwind lara preset

Discussed in https://github.com/orgs/primefaces/discussions/1343

Originally posted by sumant4ssm March 3, 2024
I am planning to purchase PrimeVue blocks, but I am am confused with the free code snippet. I looked at the sign-in block

<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
   <div class="text-center mb-5">
       <img src="/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
       <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
       <span class="text-600 font-medium line-height-3">Don't have an account?</span>
       <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
   </div>

   <div>
       <label for="email1" class="block text-900 font-medium mb-2">Email</label>
       <InputText id="email1" type="text" placeholder="Email address" class="w-full mb-3" />

       <label for="password1" class="block text-900 font-medium mb-2">Password</label>
       <InputText id="password1" type="password" placeholder="Password" class="w-full mb-3" />

       <div class="flex align-items-center justify-content-between mb-6">
           <div class="flex align-items-center">
               <Checkbox id="rememberme1" :binary="true" v-model="checked1" class="mr-2"></Checkbox>
               <label for="rememberme1">Remember me</label>
           </div>
           <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
       </div>

       <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
   </div>
</div>

My setup includes - PrimeVue unstyled with lara presets, and these classes don't exist in this preset. How to use these with my current setup? Is there a video which explains?

Virtual Scroll Jumping Backwards

Discussed in https://github.com/orgs/primefaces/discussions/353

Originally posted by msixfour October 31, 2023
if we have a textarea next to a dropdown and pass [autoresize]=true to it, the virtual scroll doesn't work correctly.
Code to reproduce:

<div class="card flex justify-content-center">
  <textarea pInputTextarea rows="1" [autoResize]="true"></textarea>
  <p-dropdown
    [options]="items"
    [(ngModel)]="selectedItem"
    placeholder="Select Item"
    [virtualScroll]="true"
    [virtualScrollItemSize]="38"
  ></p-dropdown>
</div>
constructor() {
    this.items = [];
    for (let i = 0; i < 50; i++) {
      this.items.push({ label: 'Item ' + i, value: 'Item ' + i });
    }
  }

@cetincakiroglu
codesandbox example: https://codesandbox.io/s/primeng-dropdown-virtualscroll-demo-forked-8tn6m7?file=/src/app/demo/dropdown-virtualscroll-demo.html

Creation of some source of a migration guide

Discussed in https://github.com/orgs/primefaces/discussions/1203

Originally posted by reacts99 February 15, 2024
I like the migration guide that you guys have on primefaces documentation, and is something real useful. I know people with older version of primereact in there projects because they encounter problems when migrating to the latest one and cause there is not some documentation they can follow up to debug there flow when migrating they just give up. And newer version of primereact have really cool features that are just getting missed for those folks.

Multiselect's onChange event is not fired on Select all/Unselect all or range selection

I believe this is a bug. It was introduced in version 16.8.0. You can see it in the diff between version 16.7.2 and 16.8.0 in the src/app/components/multiselect/multiselect.ts. Also, the breaking change is not listed in the release notes for 16.8.0. Yes, you can look at the full change log but a breaking change should be called out and should be in a major version bump instead of a minor version bump.

v16.7.2 shows the updateModel and onChange functions fire every time.

v16.8.0 checks for this.selectAll to be explicitly null for updateModel to fire. And the call to onChanged was removed.

v17.1.0 updated the this.selectAll check to be less strict

In master, there are 2 place onChanged is called: onOptionsSelect and removeOption

updateModel is called in 6 places: onOptionsSelect, onOptionSelectRange, onKeydown, onToggleAll, clear, and removeOption

Should the onChange event be fired in all 6 cases where updateModel is called? The onSelectAllChange and clear events give hooks for those 2 cases but onOptionSelectRange and onKeydown don't provide events. I could, of course, tap into the control value accessor and use the forms system to watch the changes but then I'm forced to wrap each multselect in a form.

Originally posted by edvard-mit January 4, 2024
Hi team, with 17.3.0 version p-multiSelect neither onChange neither onSelectAllChange event fired on Select All/ Unselect All action.
Stackblitz
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" (onChange)="onChanged()" (onSelectAllChange)="onAllChanged()"></p-multiSelect>

Is it a bug or feature?

Additional oddity

In the SlackBlitz reproducer below, setting the Input property selectAll to true causes the select all checkbox to always be checked and the onSelectAllChange event fires. Setting the Input property selectAll to false causes the select all checkbox to always be unchecked and the onSelectAllChange event fires. Setting the Input property selectAll to null causes the select all checkbox to be toggled and the onSelectAllChange event does not fire.

Environment

Windows 10, Edge Version 121.0.2277.106 (Official build) (64-bit)

Reproducer

https://stackblitz.com/edit/pqrhxe-2vxseb?file=src%2Fapp%2Fdemo%2Fmulti-select-basic-demo.html

Angular version

16.2.12, 17.2

PrimeNG version

16..8.0 and later

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

Bind an onChange to a multiselect. Checking select all/ unselect all does not fire onChange

Expected behavior

Select all and unselect call onChange

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.