primevue 3.25.0 → 3.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/README.md +60 -178
  2. package/api/Api.d.ts +284 -284
  3. package/badge/Badge.d.ts +1 -1
  4. package/button/Button.d.ts +1 -1
  5. package/calendar/Calendar.vue +1 -1
  6. package/calendar/calendar.cjs.js +1 -1
  7. package/calendar/calendar.cjs.min.js +1 -1
  8. package/calendar/calendar.esm.js +1 -1
  9. package/calendar/calendar.esm.min.js +1 -1
  10. package/calendar/calendar.js +1 -1
  11. package/calendar/calendar.min.js +1 -1
  12. package/config/config.cjs.js +1 -1
  13. package/config/config.cjs.min.js +1 -1
  14. package/config/config.esm.js +1 -1
  15. package/config/config.esm.min.js +1 -1
  16. package/config/config.js +1 -1
  17. package/config/config.min.js +1 -1
  18. package/confirmdialog/ConfirmDialog.d.ts +5 -0
  19. package/confirmdialog/ConfirmDialog.vue +17 -1
  20. package/confirmdialog/confirmdialog.cjs.js +7 -2
  21. package/confirmdialog/confirmdialog.cjs.min.js +1 -1
  22. package/confirmdialog/confirmdialog.esm.js +7 -2
  23. package/confirmdialog/confirmdialog.esm.min.js +1 -1
  24. package/confirmdialog/confirmdialog.js +7 -2
  25. package/confirmdialog/confirmdialog.min.js +1 -1
  26. package/core/core.js +6 -5
  27. package/core/core.min.js +3 -3
  28. package/datatable/DataTable.d.ts +2 -2
  29. package/datatable/DataTable.vue +3 -1
  30. package/datatable/TableBody.vue +17 -5
  31. package/datatable/datatable.cjs.js +18 -15
  32. package/datatable/datatable.cjs.min.js +1 -1
  33. package/datatable/datatable.esm.js +18 -15
  34. package/datatable/datatable.esm.min.js +1 -1
  35. package/datatable/datatable.js +18 -15
  36. package/datatable/datatable.min.js +1 -1
  37. package/dropdown/Dropdown.d.ts +1 -1
  38. package/dropdown/Dropdown.vue +4 -3
  39. package/dropdown/dropdown.cjs.js +4 -3
  40. package/dropdown/dropdown.cjs.min.js +1 -1
  41. package/dropdown/dropdown.esm.js +4 -3
  42. package/dropdown/dropdown.esm.min.js +1 -1
  43. package/dropdown/dropdown.js +4 -3
  44. package/dropdown/dropdown.min.js +1 -1
  45. package/image/Image.d.ts +25 -0
  46. package/image/Image.vue +24 -6
  47. package/image/image.cjs.js +51 -41
  48. package/image/image.cjs.min.js +1 -1
  49. package/image/image.esm.js +51 -41
  50. package/image/image.esm.min.js +1 -1
  51. package/image/image.js +51 -41
  52. package/image/image.min.js +1 -1
  53. package/inlinemessage/InlineMessage.d.ts +1 -1
  54. package/inplace/Inplace.vue +5 -1
  55. package/inplace/inplace.cjs.js +10 -2
  56. package/inplace/inplace.cjs.min.js +1 -1
  57. package/inplace/inplace.esm.js +10 -3
  58. package/inplace/inplace.esm.min.js +1 -1
  59. package/inplace/inplace.js +11 -4
  60. package/inplace/inplace.min.js +1 -1
  61. package/listbox/Listbox.d.ts +1 -1
  62. package/message/Message.d.ts +1 -1
  63. package/multiselect/MultiSelect.d.ts +1 -1
  64. package/multiselect/MultiSelect.vue +3 -2
  65. package/multiselect/multiselect.cjs.js +3 -2
  66. package/multiselect/multiselect.cjs.min.js +1 -1
  67. package/multiselect/multiselect.esm.js +3 -2
  68. package/multiselect/multiselect.esm.min.js +1 -1
  69. package/multiselect/multiselect.js +3 -2
  70. package/multiselect/multiselect.min.js +1 -1
  71. package/package.json +1 -1
  72. package/panel/Panel.d.ts +2 -2
  73. package/slider/Slider.vue +3 -14
  74. package/slider/slider.cjs.js +3 -14
  75. package/slider/slider.cjs.min.js +1 -1
  76. package/slider/slider.esm.js +3 -14
  77. package/slider/slider.esm.min.js +1 -1
  78. package/slider/slider.js +3 -14
  79. package/slider/slider.min.js +1 -1
  80. package/splitbutton/SplitButton.d.ts +1 -1
  81. package/splitbutton/SplitButton.vue +4 -2
  82. package/splitbutton/splitbutton.cjs.js +6 -4
  83. package/splitbutton/splitbutton.cjs.min.js +1 -1
  84. package/splitbutton/splitbutton.esm.js +6 -4
  85. package/splitbutton/splitbutton.esm.min.js +1 -1
  86. package/splitbutton/splitbutton.js +6 -4
  87. package/splitbutton/splitbutton.min.js +1 -1
  88. package/splitter/Splitter.vue +2 -11
  89. package/splitter/splitter.cjs.js +1 -2
  90. package/splitter/splitter.cjs.min.js +1 -1
  91. package/splitter/splitter.esm.js +1 -2
  92. package/splitter/splitter.esm.min.js +1 -1
  93. package/splitter/splitter.js +1 -2
  94. package/splitter/splitter.min.js +1 -1
  95. package/tag/Tag.d.ts +1 -1
  96. package/toast/Toast.d.ts +1 -2
  97. package/treetable/TreeTable.d.ts +2 -2
  98. package/treetable/TreeTable.vue +3 -3
  99. package/treetable/treetable.cjs.js +3 -3
  100. package/treetable/treetable.cjs.min.js +1 -1
  101. package/treetable/treetable.esm.js +3 -3
  102. package/treetable/treetable.esm.min.js +1 -1
  103. package/treetable/treetable.js +3 -3
  104. package/treetable/treetable.min.js +1 -1
  105. package/tristatecheckbox/TriStateCheckbox.vue +1 -1
  106. package/tristatecheckbox/tristatecheckbox.cjs.js +1 -1
  107. package/tristatecheckbox/tristatecheckbox.cjs.min.js +1 -1
  108. package/tristatecheckbox/tristatecheckbox.esm.js +1 -1
  109. package/tristatecheckbox/tristatecheckbox.esm.min.js +1 -1
  110. package/tristatecheckbox/tristatecheckbox.js +1 -1
  111. package/tristatecheckbox/tristatecheckbox.min.js +1 -1
  112. package/vetur-attributes.json +8 -0
  113. package/vetur-tags.json +4 -2
  114. package/virtualscroller/VirtualScroller.vue +1 -1
  115. package/virtualscroller/virtualscroller.cjs.js +1 -1
  116. package/virtualscroller/virtualscroller.cjs.min.js +1 -1
  117. package/virtualscroller/virtualscroller.esm.js +1 -1
  118. package/virtualscroller/virtualscroller.esm.min.js +1 -1
  119. package/virtualscroller/virtualscroller.js +1 -1
  120. package/virtualscroller/virtualscroller.min.js +1 -1
  121. package/web-types.json +47 -2
package/README.md CHANGED
@@ -11,149 +11,97 @@ PrimeVue is a rich set of open source UI Components for Vue. See [PrimeVue homep
11
11
 
12
12
  ## Download
13
13
 
14
- PrimeVue is available at npm, if you have an existing application run the following command to download it to your project.
14
+ PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
15
15
 
16
16
  ````
17
- npm install primevue --save
18
- npm install primeicons --save
19
- ````
17
+ // with npm
18
+ npm install primevue primeicons
20
19
 
21
- or
20
+ // with yarn
21
+ yarn add primevue primeicons
22
+ ````
22
23
 
23
- ```
24
- yarn add primevue
25
- yarn add primeicons
26
- ```
24
+ ## Plugin
27
25
 
28
- Next step is setting up PrimeVue configuration.
26
+ PrimeVue plugin is required to be installed with the **use** function to set up the default [configuration](https://primevue.org/theming).
29
27
 
30
28
  ```javascript
31
29
  import {createApp} from 'vue';
32
- import App from './App.vue';
33
30
  import PrimeVue from 'primevue/config';
34
31
  const app = createApp(App);
35
32
 
36
33
  app.use(PrimeVue);
37
34
  ```
38
35
 
39
- ## Import
36
+ ## Styles
37
+
38
+ Theme, core and icons are the necessary css files of the components, visit the [Themes](https://primevue.org/theming) section for the complete list of available themes to choose from.
40
39
 
41
- ### Module
42
40
 
43
41
  ```javascript
44
- import {createApp} from 'vue';
45
- import App from './App.vue';
46
- import PrimeVue from 'primevue/config';
47
- import Dialog from 'primevue/dialog';
48
- const app = createApp(App);
42
+ // theme
43
+ import 'primevue/resources/themes/lara-light-blue/theme.css';
49
44
 
50
- app.use(PrimeVue);
45
+ // core
46
+ import 'primevue/resources/primevue.min.css';
51
47
 
52
- app.component('Dialog', Dialog);
48
+ // icons
49
+ import 'primeicons/primeicons.css';
53
50
  ```
54
51
 
55
- Finally you'll be able to utilize the component in your application. See the Styles section to apply styling.
52
+ Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
56
53
 
57
- ```vue
58
- <Dialog></Dialog>
54
+ ```
55
+ body {
56
+ font-family: (--font-family);
57
+ }
59
58
  ```
60
59
 
61
- ### CDN
62
60
 
63
- ```javascript
64
- <script src="https://unpkg.com/primevue/core/core.min.js"></script>
65
- <script src="https://unpkg.com/primevue/multiselect/multiselect.min.js"></script>
66
- ```
67
61
 
68
- ## Single File Components
62
+ ## Usage
69
63
 
70
- SFC files are available in the npm distribution and if you'd like to use SFCs directly, add ***/sfc*** as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files in your local build instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.
64
+ Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
71
65
 
72
66
  ```javascript
73
- import Dialog from 'primevue/dialog/sfc';
67
+ import Button from "primevue/button"
68
+
69
+ const app = createApp(App);
70
+ app.component('Button', Button);
74
71
  ```
75
72
 
76
- ## Script Tag
77
73
 
78
- Other alternative is utilizing the components directly within the browser with the ***iife*** build. Note that PrimeVue does not provide a ***umd*** build.
74
+ ## Prop Cases
79
75
 
80
- ```javascript
81
- <html>
82
- <head>
83
- <meta charset="utf-8">
84
- <title>PrimeVue Demo</title>
85
- <link href="https://unpkg.com/primevue/resources/themes/lara-light-blue/theme.css" rel="stylesheet">
86
- <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
87
- <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
88
-
89
- <script src="https://unpkg.com/vue@next"></script>
90
- <script src="https://unpkg.com/primevue/core/core.min.js"></script>
91
- <script src="https://unpkg.com/primevue/slider/slider.min.js"></script>
92
- </head>
93
-
94
- <body>
95
- <div id="app">
96
- <p-slider v-model="val"></p-slider>
97
- <h6>{{val}}</h6>
98
- </div>
99
-
100
- <script>
101
- const {createApp, ref} = Vue;
102
-
103
- const App = {
104
- setup() {
105
- const val = ref(null);
106
-
107
- return {
108
- val
109
- };
110
- },
111
- components: {
112
- 'p-slider': primevue.slider
113
- }
114
- };
115
-
116
- createApp(App).use(primevue.config.default).mount("#app");
117
- </script>
118
- </body>
119
- </html>
120
- ```
76
+ Component prop names are described as camel case throughout the documentation however kebap-case is also fully supported. Events on the other hand should always be kebap-case.
121
77
 
122
- ## Styles
78
+ ```vue
79
+ <Dialog :showHeader="false"></Dialog>
123
80
 
124
- The css dependencies are as follows, note that you may change the theme with another one of your choice.
81
+ <!-- can be written as -->
125
82
 
126
- ```css
127
- primevue/resources/themes/lara-light-blue/theme.css //theme
128
- primevue/resources/primevue.min.css //core css
129
- primeicons/primeicons.css //icons
83
+ <Dialog :show-header="false"></Dialog>
130
84
  ```
131
85
 
132
- If you are using a bundler such as webpack with a css loader you may also import them to your main application component.
133
-
134
- ```javascript
135
- import 'primevue/resources/themes/lara-light-blue/theme.css';
136
- import 'primevue/resources/primevue.min.css';
137
- import 'primeicons/primeicons.css';
138
- ```
139
86
 
140
87
  ## Nuxt Integration
141
88
 
142
- Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.
89
+ PrimeVue can easily be used with Nuxt 3 using a custom plugin.
143
90
 
144
91
  **nuxt.config.js**
145
92
 
146
93
  Open the nuxt configuration file and add the css dependencies.
147
94
 
148
95
  ```javascript
149
- import { defineNuxtConfig } from 'nuxt3';
150
-
151
96
  export default defineNuxtConfig({
152
97
  css: [
153
- 'primevue/resources/themes/lara-light-blue/theme.css',
154
- 'primevue/resources/primevue.css',
155
- 'primeicons/primeicons.css'
156
- ]
98
+ "primevue/resources/themes/lara-light-blue/theme.css",
99
+ "primevue/resources/primevue.css",
100
+ "primeicons/primeicons.css"
101
+ ],
102
+ build: {
103
+ transpile: ["primevue"]
104
+ }
157
105
  })
158
106
  ```
159
107
 
@@ -173,95 +121,29 @@ export default defineNuxtPlugin((nuxtApp) => {
173
121
  });
174
122
  ```
175
123
 
176
- ## Configuration
177
-
178
- ### Dependencies
179
-
180
- PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.
181
-
182
- In addition, components require PrimeIcons library for icons.
183
-
184
- ```javascript
185
- dependencies: {
186
- "vue": "^3.0.0",
187
- "primeicons": "^6.0.0"
188
- }
189
- ```
190
-
191
- ## Prop Cases
192
-
193
- Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.
194
-
195
- ```vue
196
- <Dialog :showHeader="false"></Dialog>
197
-
198
- <!-- can be written as -->
199
-
200
- <Dialog :show-header="false"></Dialog>
201
- ```
202
-
203
- ## Ripple
204
-
205
- Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.
206
-
207
- ```javascript
208
- import {createApp} from 'vue';
209
- import PrimeVue from 'primevue/config';
210
- const app = createApp(App);
211
-
212
- app.use(PrimeVue, {ripple: true});
213
- ```
214
-
215
- ## Outlined vs Filled Input Styles
216
-
217
- Input fields come in two styles, default is ***outlined*** with borders around the field whereas ***filled*** alternative adds a background color to the field. Applying *p-input-filled* to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeVue configuration as well.
218
-
219
- ```javascript
220
- import {createApp} from 'vue';
221
- import PrimeVue from 'primevue/config';
222
- const app = createApp(App);
223
-
224
- app.use(PrimeVue, {inputStyle: 'filled'});
225
- ```
226
-
227
- ## ZIndex Layering
228
-
229
- ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the ***zIndex*** property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
230
-
231
- ```javascript
232
- import {createApp} from 'vue';
233
- import PrimeVue from 'primevue/config';
234
- const app = createApp(App);
235
-
236
- app.use(PrimeVue, {
237
- zIndex: {
238
- modal: 1100, //dialog, sidebar
239
- overlay: 1000, //dropdown, overlaypanel
240
- menu: 1000, //overlay menus
241
- tooltip: 1100 //tooltip
242
- }
243
- });
244
- ```
245
-
246
- ## Locale
247
-
248
- PrimeVue provides a Locale API to support i18n and l7n, visit the [Locale](https://primevue.org/configuration/#locale) documentation for more information.
249
-
250
- ## Quickstart with Vue CLI
251
-
252
- An [example application](https://github.com/primefaces/primevue-quickstart) based on Vue CLI is available at github.
253
-
254
- ## Quickstart with Vite
124
+ ## Example
255
125
 
256
- A [starter application](https://github.com/primefaces/primevue-quickstart-vite) is also provided for Vite users.
126
+ We've created various samples for the popular options in the Vue ecosystem. Visit the [primevue-examples](https://github.com/primefaces/primevue-examples) repository for the samples.
257
127
 
258
- ## Quickstart with Nuxt
128
+ ### Vite
129
+ <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart">
130
+ <img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="vite" width="112" height="112">
131
+ </a>
259
132
 
260
- A [sample application](https://github.com/primefaces/primevue-quickstart-nuxt3) is created for Nuxt 3 users.
133
+ ### Nuxt
134
+ <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt3-quickstart">
135
+ <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="nuxt" width="112" height="112">
136
+ </a>
261
137
 
262
- ## Quickstart with TypeScript
138
+ ### Vue-CLI
139
+ <a href="https://github.com/primefaces/primevue-quickstart">
140
+ <img src="https://primefaces.org/cdn/primevue/images/logos/vue.svg" alt="vue-cli" width="112" height="112">
141
+ </a>
263
142
 
264
- Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample [typescript-primevue](https://github.com/primefaces/primevue-typescript-quickstart) application with Vue CLI is available as at github.
143
+ ### Astro
144
+ <a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart">
145
+ <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="astro" width="112" height="112">
146
+ </a>
265
147
 
266
148
  ## Contributors
267
149