primevue 3.25.0 → 3.26.0
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.
- package/README.md +60 -178
- package/api/Api.d.ts +4 -12
- package/confirmdialog/ConfirmDialog.d.ts +5 -0
- package/confirmdialog/ConfirmDialog.vue +17 -1
- package/confirmdialog/confirmdialog.cjs.js +7 -2
- package/confirmdialog/confirmdialog.cjs.min.js +1 -1
- package/confirmdialog/confirmdialog.esm.js +7 -2
- package/confirmdialog/confirmdialog.esm.min.js +1 -1
- package/confirmdialog/confirmdialog.js +7 -2
- package/confirmdialog/confirmdialog.min.js +1 -1
- package/core/core.js +1 -1
- package/core/core.min.js +1 -1
- package/dropdown/Dropdown.vue +1 -1
- package/dropdown/dropdown.cjs.js +1 -1
- package/dropdown/dropdown.cjs.min.js +1 -1
- package/dropdown/dropdown.esm.js +1 -1
- package/dropdown/dropdown.esm.min.js +1 -1
- package/dropdown/dropdown.js +1 -1
- package/dropdown/dropdown.min.js +1 -1
- package/inplace/Inplace.vue +5 -1
- package/inplace/inplace.cjs.js +10 -2
- package/inplace/inplace.cjs.min.js +1 -1
- package/inplace/inplace.esm.js +10 -3
- package/inplace/inplace.esm.min.js +1 -1
- package/inplace/inplace.js +11 -4
- package/inplace/inplace.min.js +1 -1
- package/package.json +1 -1
- package/panel/Panel.d.ts +2 -2
- package/slider/Slider.vue +3 -14
- package/slider/slider.cjs.js +3 -14
- package/slider/slider.cjs.min.js +1 -1
- package/slider/slider.esm.js +3 -14
- package/slider/slider.esm.min.js +1 -1
- package/slider/slider.js +3 -14
- package/slider/slider.min.js +1 -1
- package/splitbutton/SplitButton.vue +4 -2
- package/splitbutton/splitbutton.cjs.js +6 -4
- package/splitbutton/splitbutton.cjs.min.js +1 -1
- package/splitbutton/splitbutton.esm.js +6 -4
- package/splitbutton/splitbutton.esm.min.js +1 -1
- package/splitbutton/splitbutton.js +6 -4
- package/splitbutton/splitbutton.min.js +1 -1
- package/toast/Toast.d.ts +0 -1
- package/treetable/TreeTable.vue +3 -3
- package/treetable/treetable.cjs.js +3 -3
- package/treetable/treetable.cjs.min.js +1 -1
- package/treetable/treetable.esm.js +3 -3
- package/treetable/treetable.esm.min.js +1 -1
- package/treetable/treetable.js +3 -3
- package/treetable/treetable.min.js +1 -1
- package/tristatecheckbox/TriStateCheckbox.vue +1 -1
- package/tristatecheckbox/tristatecheckbox.cjs.js +1 -1
- package/tristatecheckbox/tristatecheckbox.cjs.min.js +1 -1
- package/tristatecheckbox/tristatecheckbox.esm.js +1 -1
- package/tristatecheckbox/tristatecheckbox.esm.min.js +1 -1
- package/tristatecheckbox/tristatecheckbox.js +1 -1
- package/tristatecheckbox/tristatecheckbox.min.js +1 -1
- package/vetur-attributes.json +4 -0
- package/vetur-tags.json +2 -1
- package/web-types.json +11 -1
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
|
|
14
|
+
PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
|
|
15
15
|
|
|
16
16
|
````
|
|
17
|
-
|
|
18
|
-
npm install primeicons
|
|
19
|
-
````
|
|
17
|
+
// with npm
|
|
18
|
+
npm install primevue primeicons
|
|
20
19
|
|
|
21
|
-
|
|
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
|
-
|
|
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
|
-
##
|
|
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
|
-
|
|
45
|
-
import
|
|
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
|
-
|
|
45
|
+
// core
|
|
46
|
+
import 'primevue/resources/primevue.min.css';
|
|
51
47
|
|
|
52
|
-
|
|
48
|
+
// icons
|
|
49
|
+
import 'primeicons/primeicons.css';
|
|
53
50
|
```
|
|
54
51
|
|
|
55
|
-
|
|
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
|
-
```
|
|
58
|
-
|
|
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
|
-
##
|
|
62
|
+
## Usage
|
|
69
63
|
|
|
70
|
-
|
|
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
|
|
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
|
-
|
|
74
|
+
## Prop Cases
|
|
79
75
|
|
|
80
|
-
|
|
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
|
-
|
|
78
|
+
```vue
|
|
79
|
+
<Dialog :showHeader="false"></Dialog>
|
|
123
80
|
|
|
124
|
-
|
|
81
|
+
<!-- can be written as -->
|
|
125
82
|
|
|
126
|
-
|
|
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
|
-
|
|
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
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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
|
-
##
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
package/api/Api.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Filter
|
|
2
|
-
export enum
|
|
2
|
+
export const enum FilterMatchMode {
|
|
3
3
|
STARTS_WITH = 'startsWith',
|
|
4
4
|
CONTAINS = 'contains',
|
|
5
5
|
NOT_CONTAINS = 'notContains',
|
|
@@ -18,15 +18,11 @@ export enum FilterMatchModeOptions {
|
|
|
18
18
|
DATE_AFTER = 'dateAfter'
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export
|
|
22
|
-
|
|
23
|
-
export enum FilterOperatorOptions {
|
|
21
|
+
export const enum FilterOperator {
|
|
24
22
|
AND = 'and',
|
|
25
23
|
OR = 'or'
|
|
26
24
|
}
|
|
27
25
|
|
|
28
|
-
export declare const FilterOperator: FilterOperatorOptions;
|
|
29
|
-
|
|
30
26
|
export declare namespace FilterService {
|
|
31
27
|
export function filter(value: any, fields: string[], filterValue: any, filterMatchMode: string, filterLocale?: string): any[];
|
|
32
28
|
export interface filters {
|
|
@@ -51,7 +47,7 @@ export declare namespace FilterService {
|
|
|
51
47
|
}
|
|
52
48
|
|
|
53
49
|
// Icons
|
|
54
|
-
export enum
|
|
50
|
+
export const enum PrimeIcons {
|
|
55
51
|
ALIGN_CENTER = 'pi pi-align-center',
|
|
56
52
|
ALIGN_JUSTIFY = 'pi pi-align-justify',
|
|
57
53
|
ALIGN_LEFT = 'pi pi-align-left',
|
|
@@ -312,14 +308,10 @@ export enum PrimeIconsOptions {
|
|
|
312
308
|
YOUTUBE = 'pi pi-youtube'
|
|
313
309
|
}
|
|
314
310
|
|
|
315
|
-
export declare const PrimeIcons: PrimeIconsOptions;
|
|
316
|
-
|
|
317
311
|
// Severity
|
|
318
|
-
export enum
|
|
312
|
+
export const enum ToastSeverity {
|
|
319
313
|
SUCCESS = 'success',
|
|
320
314
|
INFO = 'info',
|
|
321
315
|
WARN = 'warn',
|
|
322
316
|
ERROR = 'error'
|
|
323
317
|
}
|
|
324
|
-
|
|
325
|
-
export declare const ToastSeverity: ToastSeverityOptions;
|
|
@@ -46,6 +46,11 @@ export interface ConfirmDialogProps {
|
|
|
46
46
|
* @see ConfirmDialogBreakpoints
|
|
47
47
|
*/
|
|
48
48
|
breakpoints?: ConfirmDialogBreakpoints;
|
|
49
|
+
/**
|
|
50
|
+
* Enables dragging to change the position using header.
|
|
51
|
+
* @defaultValue true
|
|
52
|
+
*/
|
|
53
|
+
draggable?: boolean | undefined;
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
/**
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<CDialog
|
|
2
|
+
<CDialog
|
|
3
|
+
v-model:visible="visible"
|
|
4
|
+
role="alertdialog"
|
|
5
|
+
class="p-confirm-dialog"
|
|
6
|
+
:modal="true"
|
|
7
|
+
:header="header"
|
|
8
|
+
:blockScroll="blockScroll"
|
|
9
|
+
:position="position"
|
|
10
|
+
:breakpoints="breakpoints"
|
|
11
|
+
:closeOnEscape="closeOnEscape"
|
|
12
|
+
:draggable="draggable"
|
|
13
|
+
@update:visible="onHide"
|
|
14
|
+
>
|
|
3
15
|
<template v-if="!$slots.message">
|
|
4
16
|
<i v-if="confirmation.icon" :class="iconClass" />
|
|
5
17
|
<span class="p-confirm-dialog-message">{{ message }}</span>
|
|
@@ -24,6 +36,10 @@ export default {
|
|
|
24
36
|
breakpoints: {
|
|
25
37
|
type: Object,
|
|
26
38
|
default: null
|
|
39
|
+
},
|
|
40
|
+
draggable: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: true
|
|
27
43
|
}
|
|
28
44
|
},
|
|
29
45
|
confirmListener: null,
|
|
@@ -18,6 +18,10 @@ var script = {
|
|
|
18
18
|
breakpoints: {
|
|
19
19
|
type: Object,
|
|
20
20
|
default: null
|
|
21
|
+
},
|
|
22
|
+
draggable: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: true
|
|
21
25
|
}
|
|
22
26
|
},
|
|
23
27
|
confirmListener: null,
|
|
@@ -149,7 +153,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
149
153
|
blockScroll: $options.blockScroll,
|
|
150
154
|
position: $options.position,
|
|
151
155
|
breakpoints: $props.breakpoints,
|
|
152
|
-
closeOnEscape: $options.closeOnEscape
|
|
156
|
+
closeOnEscape: $options.closeOnEscape,
|
|
157
|
+
draggable: $props.draggable
|
|
153
158
|
}, {
|
|
154
159
|
footer: vue.withCtx(() => [
|
|
155
160
|
vue.createVNode(_component_CDButton, {
|
|
@@ -184,7 +189,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
184
189
|
}, null, 8, ["message"]))
|
|
185
190
|
]),
|
|
186
191
|
_: 1
|
|
187
|
-
}, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "onUpdate:visible"]))
|
|
192
|
+
}, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
|
|
188
193
|
}
|
|
189
194
|
|
|
190
195
|
script.render = render;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("primevue/button"),o=require("primevue/confirmationeventbus"),i=require("primevue/dialog"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),s=n(o),
|
|
1
|
+
"use strict";var e=require("primevue/button"),o=require("primevue/confirmationeventbus"),i=require("primevue/dialog"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),s=n(o),a={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},s.default.on("confirm",this.confirmListener),s.default.on("close",this.closeListener)},beforeUnmount(){s.default.off("confirm",this.confirmListener),s.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:n(i).default,CDButton:c.default}};const r={class:"p-confirm-dialog-message"};a.render=function(e,o,i,n,c,s){const a=t.resolveComponent("CDButton"),l=t.resolveComponent("CDialog");return t.openBlock(),t.createBlock(l,{visible:c.visible,"onUpdate:visible":[o[2]||(o[2]=e=>c.visible=e),s.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:s.header,blockScroll:s.blockScroll,position:s.position,breakpoints:i.breakpoints,closeOnEscape:s.closeOnEscape,draggable:i.draggable},{footer:t.withCtx((()=>[t.createVNode(a,{label:s.rejectLabel,icon:s.rejectIcon,class:t.normalizeClass(s.rejectClass),onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject},null,8,["label","icon","class","autofocus"]),t.createVNode(a,{label:s.acceptLabel,icon:s.acceptIcon,class:t.normalizeClass(s.acceptClass),onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept},null,8,["label","icon","class","autofocus"])])),default:t.withCtx((()=>[e.$slots.message?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[c.confirmation.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(s.iconClass)},null,2)):t.createCommentVNode("",!0),t.createElementVNode("span",r,t.toDisplayString(s.message),1)],64))])),_:1},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])},module.exports=a;
|
|
@@ -10,6 +10,10 @@ var script = {
|
|
|
10
10
|
breakpoints: {
|
|
11
11
|
type: Object,
|
|
12
12
|
default: null
|
|
13
|
+
},
|
|
14
|
+
draggable: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: true
|
|
13
17
|
}
|
|
14
18
|
},
|
|
15
19
|
confirmListener: null,
|
|
@@ -141,7 +145,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
141
145
|
blockScroll: $options.blockScroll,
|
|
142
146
|
position: $options.position,
|
|
143
147
|
breakpoints: $props.breakpoints,
|
|
144
|
-
closeOnEscape: $options.closeOnEscape
|
|
148
|
+
closeOnEscape: $options.closeOnEscape,
|
|
149
|
+
draggable: $props.draggable
|
|
145
150
|
}, {
|
|
146
151
|
footer: withCtx(() => [
|
|
147
152
|
createVNode(_component_CDButton, {
|
|
@@ -176,7 +181,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
176
181
|
}, null, 8, ["message"]))
|
|
177
182
|
]),
|
|
178
183
|
_: 1
|
|
179
|
-
}, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "onUpdate:visible"]))
|
|
184
|
+
}, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
|
|
180
185
|
}
|
|
181
186
|
|
|
182
187
|
script.render = render;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i from"primevue/button";import o from"primevue/confirmationeventbus";import t from"primevue/dialog";import{resolveComponent as e,openBlock as n,createBlock as c,withCtx as s,createVNode as r,normalizeClass as a,createElementBlock as l,Fragment as m,createCommentVNode as u,createElementVNode as f,toDisplayString as
|
|
1
|
+
import i from"primevue/button";import o from"primevue/confirmationeventbus";import t from"primevue/dialog";import{resolveComponent as e,openBlock as n,createBlock as c,withCtx as s,createVNode as r,normalizeClass as a,createElementBlock as l,Fragment as m,createCommentVNode as u,createElementVNode as f,toDisplayString as p,resolveDynamicComponent as h}from"vue";var b={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=i=>{i&&i.group===this.group&&(this.confirmation=i,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},o.on("confirm",this.confirmListener),o.on("close",this.closeListener)},beforeUnmount(){o.off("confirm",this.confirmListener),o.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:t,CDButton:i}};const d={class:"p-confirm-dialog-message"};b.render=function(i,o,t,b,g,v){const j=e("CDButton"),C=e("CDialog");return n(),c(C,{visible:g.visible,"onUpdate:visible":[o[2]||(o[2]=i=>g.visible=i),v.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:v.header,blockScroll:v.blockScroll,position:v.position,breakpoints:t.breakpoints,closeOnEscape:v.closeOnEscape,draggable:t.draggable},{footer:s((()=>[r(j,{label:v.rejectLabel,icon:v.rejectIcon,class:a(v.rejectClass),onClick:o[0]||(o[0]=i=>v.reject()),autofocus:v.autoFocusReject},null,8,["label","icon","class","autofocus"]),r(j,{label:v.acceptLabel,icon:v.acceptIcon,class:a(v.acceptClass),onClick:o[1]||(o[1]=i=>v.accept()),autofocus:v.autoFocusAccept},null,8,["label","icon","class","autofocus"])])),default:s((()=>[i.$slots.message?(n(),c(h(i.$slots.message),{key:1,message:g.confirmation},null,8,["message"])):(n(),l(m,{key:0},[g.confirmation.icon?(n(),l("i",{key:0,class:a(v.iconClass)},null,2)):u("",!0),f("span",d,p(v.message),1)],64))])),_:1},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])};export{b as default};
|
|
@@ -15,6 +15,10 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
|
|
|
15
15
|
breakpoints: {
|
|
16
16
|
type: Object,
|
|
17
17
|
default: null
|
|
18
|
+
},
|
|
19
|
+
draggable: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: true
|
|
18
22
|
}
|
|
19
23
|
},
|
|
20
24
|
confirmListener: null,
|
|
@@ -146,7 +150,8 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
|
|
|
146
150
|
blockScroll: $options.blockScroll,
|
|
147
151
|
position: $options.position,
|
|
148
152
|
breakpoints: $props.breakpoints,
|
|
149
|
-
closeOnEscape: $options.closeOnEscape
|
|
153
|
+
closeOnEscape: $options.closeOnEscape,
|
|
154
|
+
draggable: $props.draggable
|
|
150
155
|
}, {
|
|
151
156
|
footer: vue.withCtx(() => [
|
|
152
157
|
vue.createVNode(_component_CDButton, {
|
|
@@ -181,7 +186,7 @@ this.primevue.confirmdialog = (function (Button, ConfirmationEventBus, Dialog, v
|
|
|
181
186
|
}, null, 8, ["message"]))
|
|
182
187
|
]),
|
|
183
188
|
_: 1
|
|
184
|
-
}, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "onUpdate:visible"]))
|
|
189
|
+
}, 8, ["visible", "header", "blockScroll", "position", "breakpoints", "closeOnEscape", "draggable", "onUpdate:visible"]))
|
|
185
190
|
}
|
|
186
191
|
|
|
187
192
|
script.render = render;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
this.primevue=this.primevue||{},this.primevue.confirmdialog=function(e,o,i,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),s=n(o),a={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},s.default.on("confirm",this.confirmListener),s.default.on("close",this.closeListener)},beforeUnmount(){s.default.off("confirm",this.confirmListener),s.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:n(i).default,CDButton:c.default}};const
|
|
1
|
+
this.primevue=this.primevue||{},this.primevue.confirmdialog=function(e,o,i,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),s=n(o),a={name:"ConfirmDialog",props:{group:String,breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0}},confirmListener:null,closeListener:null,data:()=>({visible:!1,confirmation:null}),mounted(){this.confirmListener=e=>{e&&e.group===this.group&&(this.confirmation=e,this.confirmation.onShow&&this.confirmation.onShow(),this.visible=!0)},this.closeListener=()=>{this.visible=!1,this.confirmation=null},s.default.on("confirm",this.confirmListener),s.default.on("close",this.closeListener)},beforeUnmount(){s.default.off("confirm",this.confirmListener),s.default.off("close",this.closeListener)},methods:{accept(){this.confirmation.accept&&this.confirmation.accept(),this.visible=!1},reject(){this.confirmation.reject&&this.confirmation.reject(),this.visible=!1},onHide(){this.confirmation.onHide&&this.confirmation.onHide(),this.visible=!1}},computed:{header(){return this.confirmation?this.confirmation.header:null},message(){return this.confirmation?this.confirmation.message:null},blockScroll(){return!this.confirmation||this.confirmation.blockScroll},position(){return this.confirmation?this.confirmation.position:null},iconClass(){return["p-confirm-dialog-icon",this.confirmation?this.confirmation.icon:null]},acceptLabel(){return this.confirmation?this.confirmation.acceptLabel||this.$primevue.config.locale.accept:null},rejectLabel(){return this.confirmation?this.confirmation.rejectLabel||this.$primevue.config.locale.reject:null},acceptIcon(){return this.confirmation?this.confirmation.acceptIcon:null},rejectIcon(){return this.confirmation?this.confirmation.rejectIcon:null},acceptClass(){return["p-confirm-dialog-accept",this.confirmation?this.confirmation.acceptClass:null]},rejectClass(){return["p-confirm-dialog-reject",this.confirmation?this.confirmation.rejectClass||"p-button-text":null]},autoFocusAccept(){return void 0===this.confirmation.defaultFocus||"accept"===this.confirmation.defaultFocus},autoFocusReject(){return"reject"===this.confirmation.defaultFocus},closeOnEscape(){return!this.confirmation||this.confirmation.closeOnEscape}},components:{CDialog:n(i).default,CDButton:c.default}};const l={class:"p-confirm-dialog-message"};return a.render=function(e,o,i,n,c,s){const a=t.resolveComponent("CDButton"),r=t.resolveComponent("CDialog");return t.openBlock(),t.createBlock(r,{visible:c.visible,"onUpdate:visible":[o[2]||(o[2]=e=>c.visible=e),s.onHide],role:"alertdialog",class:"p-confirm-dialog",modal:!0,header:s.header,blockScroll:s.blockScroll,position:s.position,breakpoints:i.breakpoints,closeOnEscape:s.closeOnEscape,draggable:i.draggable},{footer:t.withCtx((()=>[t.createVNode(a,{label:s.rejectLabel,icon:s.rejectIcon,class:t.normalizeClass(s.rejectClass),onClick:o[0]||(o[0]=e=>s.reject()),autofocus:s.autoFocusReject},null,8,["label","icon","class","autofocus"]),t.createVNode(a,{label:s.acceptLabel,icon:s.acceptIcon,class:t.normalizeClass(s.acceptClass),onClick:o[1]||(o[1]=e=>s.accept()),autofocus:s.autoFocusAccept},null,8,["label","icon","class","autofocus"])])),default:t.withCtx((()=>[e.$slots.message?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.message),{key:1,message:c.confirmation},null,8,["message"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[c.confirmation.icon?(t.openBlock(),t.createElementBlock("i",{key:0,class:t.normalizeClass(s.iconClass)},null,2)):t.createCommentVNode("",!0),t.createElementVNode("span",l,t.toDisplayString(s.message),1)],64))])),_:1},8,["visible","header","blockScroll","position","breakpoints","closeOnEscape","draggable","onUpdate:visible"])},a}(primevue.button,primevue.confirmationeventbus,primevue.dialog,Vue);
|
package/core/core.js
CHANGED
|
@@ -5729,7 +5729,7 @@ this.primevue.dropdown = (function (api, OverlayEventBus, Portal, Ripple, utils,
|
|
|
5729
5729
|
return this.isValidOption(option) && this.isSelected(option);
|
|
5730
5730
|
},
|
|
5731
5731
|
isSelected(option) {
|
|
5732
|
-
return utils.ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
|
|
5732
|
+
return this.isValidOption(option) && utils.ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
|
|
5733
5733
|
},
|
|
5734
5734
|
findFirstOptionIndex() {
|
|
5735
5735
|
return this.visibleOptions.findIndex((option) => this.isValidOption(option));
|