primefaces / primevue

Next Generation Vue UI Component Library

PrimeVue MonoRepo

PrimeVue is a rich set of open source UI Components for Vue. See PrimeVue homepage for live showcase and documentation.

Packages

Name	Version
primevue
@primevue/core
@primevue/icons
@primevue/themes
@primevue/nuxt-module
@primevue/auto-import-resolver
@primevue/metadata

Contributors

primevue's Issues

New Component: TreeTable

Use Typescript to develop PrimeVue?

Hi,
This is a great initiative and will help Vue community a lot. As we understand Vue 3 will itself be written in Typescript.
As this is a new project, is their any specific reason for not using Typescript for building components?

Button's secondary background color is too bright

It feels like the secondary buttons are too bright. Maybe it is just my monitor. I nearly can see the background. The secondary buttons look like just labels. Some of the users might think they are not buttons.
Any thoughts?

Bellow are bootstrap buttons where the secondary one looks much darker:

https://getbootstrap.com/docs/4.0/components/buttons/

This is #ccc comparing to the original version which looks better for me:

Dependency was not found

This dependency was not found:

• -!../../../node_modules/@vue/cli-service/node_modules/css-loader/index.js??ref--6-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!../../components/listbox/Listbox.css in ./node_modules/@vue/cli-service/node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./src/assets/styles/primevue.css

To install it, you can run: npm install --save -!../../../node_modules/@vue/cli-service/node_modules/css-loader/index.js??ref--6-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!../../components/listbox/Listbox.css

These relative modules were not found:

• ./components/listbox/Listbox in ./src/main.js
• ./views/listbox/ListboxDemo.vue in ./src/router.js

Wrong date with "yy.mm.dd" date format

Typing date with dateFormat="yy.mm.dd" gives wrong date, in day section automatically inserts leading zero and cannot be typed e.q. "23" to day, it forces "02" when "2" is pressed. And without specifying dateFormat in the component it gives date in default format, however it's set in "hu" locale.

Component:
Calendar v-model="myDate" :showIcon="true" :locale="hu" :showOnFocus="false" dateFormat="yy.mm.dd"

function returns "hu" data:
return {
firstDayOfWeek: 1,
dayNames: ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"],
dayNamesShort: ["Vas", "Hét", "Ke", "Sze", "Csü", "Pén", "Szo"],
dayNamesMin: ["Vas", "Hét", "Ke", "Sze", "Csü", "Pén", "Szo"],
monthNames: [ "Január","Február","Március","Április","Május","Június","Július","Augusztus","Szeptember","Október","November","December" ],
monthNamesShort: [ "Jan", "Feb", "Már", "Ápr", "Máj", "Jún","Júl", "Aug", "Szep", "Okt", "Nov", "Dec" ],
today: 'Ma',
clear: 'Törlés',
dateFormat: 'yy.mm.dd',
weekHeader: 'Wk'
}

New Component: Tree

Time does not stop spinning in Calendar

Hi!

When I click in the up/down arrow, keep holding the button and release it out of the calendar, then:

• The spinner doesn't stop incrementing
• The calendar popover is closed

Reimplement Accordion with Templating

Similar to #51 instead of JSX

Remove empty spaces with Lint

To avoid unnecessary diffs in version control

New Component: PickList

DataTable sortField cannot be synced

Based on the documentation: https://www.primefaces.org/primevue/#/datatable
The field sortField is not working properly:

InputMask pressing enter

InputMask gives error when pressing enter. Keydown event doesn't work, I can use only keyup to check if user pressed enter.

Vue warn]: Error in v-on handler: "TypeError: $vm.onBlur is not a function"
found in

---> at node_modules/primevue/components/inputmask/InputMask.vue
at src/components/TesztComp/SearchPanel.vue
at src/components/TesztComp/TesztComp.vue

at src/App.vue

MultiSelect demo seems not working

I tried on chrome and firefox
The window doesn't appear under the input text

http://localhost:8081/#/multiselect

Duplicate key issue in menu component

Dropdown click icon gives error on Firefox

https://forum.primefaces.org/viewtopic.php?f=110&t=59635

New Component: ProgressSpinner

Reset DataTable page after sort

After sorting, paginator should reset itself.

Reimplement TabView with Templating

I get an error when trying to import the TabView component:

You may need an additional loader to handle the result of these loaders.

This is because of the use of JSX for this component, commit is here: b3036ec

Is it a requirement we must include https://github.com/vuejs/jsx in order to build this project? Can we refactor the JSX back to Vue template format? It's not clear to me why it had to be changed.

Resizable Columns for DataTable

Datatable not working in the typescript environment.

Hi, i am evaluating the primvue components in the typescript environment, when I tried the primevue datatable component it is not working, please check the repository. for more information

https://github.com/nsksaisaravana/PrimeVue-Quickstart

New Component: Inplace

Calendar today button throws an error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'emit' of undefined"

New Component: Carousel

Transpile ObjectUtils.js when installing from npm

Hi, this is not really an issue but a proposal to avoid an error:

ERROR  Failed to compile with 1 errors

error  in ./node_modules/primevue/components/utils/ObjectUtils.js

Module parse failed: Unexpected token (134:29)
You may need an appropriate loader to handle this file type.
|     }
| 
>     static filterConstraints = {
| 
|         startsWith(value, filter) {
....

This is caused by babel-loader that by default ignores node_modules folder, so this file is not transpiled. This error doesn't affect every component but those that are dependent of this file.

I think in the README file there could be an advice about adding to the vue.config.js file of the project:

module.exports = {
    [...,]
    transpileDependencies: [
        "primevue"
    ]
}

to get this file transpiled by the vue cli. Source: https://cli.vuejs.org/config/#transpiledependencies

Thank you and regards.

New Component: DeferredContent

input Editor acts weird

input Editor elements in the provided sample acts quite weird. In chrome when you type it's got written backwards. In firefox it's got written vertically.

New Component: DataTable

Implement a DataTable with the initial features;

Static and Dynamic Columns
Templating
Single Column and Multiple Columns Sorting
Pagination
Lazy Loading for Large Datasets
Filtering
Selection
Column Toggler
Responsive
CSV Export

Menu and OverlayPanel target position miscalculated

Menu and OverlayPanel should listen currentTarget instead of target for correct positioning.

Auto z-index layering for Toast

Toast messages currently are displayed behind other content, they should be on top automatically.

DataView paginator is always displayed

It should only be displayed when enabled, also the optional property alwaysShowPaginator is ignored.

Maybe a general issue

Methods that run after the component is destroyed fail due to non-safe access to refs ($refs?.x) (they become undefined when destroying), maybe it's worth taking a look. I had this problem with the Dropdown.vue

MultiSelect filter cannot be turned off

:filter="false" has no effect.

New Component: InputMask

Dropdown search character problem

Screen pictures

New Component: OrganizationChart

Listbox demo error

npm run serve is produces the following error

 ERROR  Failed to compile with 3 errors                                                                                                                                                                         9:56:15 AM

This dependency was not found:

* -!../../../node_modules/css-loader/index.js??ref--6-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!../../components/listbox/Listbox.css in ./node_modules/css-loader??ref--6-oneOf-3-1!./
node_modules/postcss-loader/src??ref--6-oneOf-3-2!./src/assets/styles/primevue.css

To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js??ref--6-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-3-2!../../components/listbox/Listbox.css


These relative modules were not found:

* ./components/listbox/Listbox in ./src/main.js
* ./views/listbox/ListboxDemo.vue in ./src/router.js

main.js import Listbox from './components/listbox/Listbox'; name is wrong Listbox b letter must be capital

Dropdown ignores false or 0 values

The methods getSelectedOption and getSelectedOptionIndex ignore the value 0.

Cannot find module './components/column/Column'

Hi Guys,

I am trying to start a new project with primevue but I encountered an issue with Column component.
When I compile typescript it says Cannot find module './components/column/Column' in node_modules/primevue/column.d.ts:1:15
Is that something wrong with my dependency setup or it is an issue with primevue itself?
Any other primevue components are fine. I am using target: es5 and module esNext. PrimeVue version is 1.0.0-beta.7.

Very appreciate.

Calendar clear button does not reset the input field

When triggering the clear button, the model is reset, but not the input value.

Dataview paginator gets out of sync

Cannot delete date from calendar once it's selected

https://forum.primefaces.org/viewtopic.php?f=110&t=59739

Calendar.vue: when the value is updated, the component partially updates itself

When the model is updated outside of the component, the input text isn't synchronized, only the calendar widget.

New Component: OrderList

MultiSelect.vue: error on onToggleAll and bad default placeholder

When triggering the onToggleAll, the function isn't applying the getOptionValue to the items, which cause different outcomes than when selecting all by hand.
Also, when there's no placeholder it defaults to p-multiselect.

TreeTable highlights unsorted columns

Accordion and TabView create empty tabs

Please see forum topic; https://forum.primefaces.org/viewtopic.php?f=110&t=59780

MultiSelect not showing selected items

Got an array of LookupVm class which has an id and a name properties. Binding everything together seems not working. Selected items not shown on the MultiSelect. Please see the code bellow:

<template>
...
<div class="p-col-12 p-md-4">
    <label for="roles">Role</label>
</div>
<div class="p-col-12 p-md-8">
    <MultiSelect id="roles" v-model="selectedRoles" optionLabel="name" :options="roleList" />
</div>
...
</template>
<script lang="ts">
	import Vue from "vue";
	import { UserService, LookupVm } from "@/services/index";

	export default Vue.extend({
		data() {
			return {
				selectedRoles: new Array<LookupVm>(),
				roleList: new Array<LookupVm>(),
			}
		},
		mounted() {
			this.loadRoleList();
		},
		methods: {
			loadRoleList() {
				UserService.getRolesLookup().then((result) => { this.roleList = result; })
			}
		},
	});
</script>

Screens:

TreeTable single sort broken

An error is thrown and functionality is broken.

Column component registration fails with Typescript

Following the basic example of your documentation, DataTable does not work.

I report the console log error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option...

Dependencies

• Vue 2.6.10
• core-js 2.6.5
• primevue-1.0.0-beta6

Convert emptyMessage to a template for DataView

Instead of a String prop, empty should be a slot with support for custom content.