npm - primevue - Versions diffs - 3.11.1 → 3.12.0 - Mend

primevue 3.11.1 → 3.12.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.

Files changed (141) hide show

package/README.md +256 -2
package/calendar/Calendar.d.ts +15 -0
package/calendar/Calendar.vue +15 -10
package/calendar/calendar.cjs.js +15 -10
package/calendar/calendar.cjs.min.js +1 -1
package/calendar/calendar.esm.js +15 -10
package/calendar/calendar.esm.min.js +1 -1
package/calendar/calendar.js +15 -10
package/calendar/calendar.min.js +1 -1
package/column/Column.d.ts +4 -0
package/column/Column.vue +6 -2
package/column/column.cjs.js +6 -2
package/column/column.cjs.min.js +1 -1
package/column/column.esm.js +6 -2
package/column/column.esm.min.js +1 -1
package/column/column.js +6 -2
package/column/column.min.js +1 -1
package/confirmationoptions/ConfirmationOptions.d.ts +4 -0
package/core/core.js +37 -22
package/core/core.min.js +2 -2
package/datatable/DataTable.vue +1 -1
package/datatable/datatable.cjs.js +1 -1
package/datatable/datatable.cjs.min.js +1 -1
package/datatable/datatable.esm.js +1 -1
package/datatable/datatable.esm.min.js +1 -1
package/datatable/datatable.js +1 -1
package/datatable/datatable.min.js +1 -1
package/dropdown/Dropdown.vue +13 -9
package/dropdown/dropdown.cjs.js +14 -9
package/dropdown/dropdown.cjs.min.js +1 -1
package/dropdown/dropdown.esm.js +14 -9
package/dropdown/dropdown.esm.min.js +1 -1
package/dropdown/dropdown.js +14 -9
package/dropdown/dropdown.min.js +1 -1
package/knob/Knob.vue +1 -1
package/knob/knob.cjs.js +1 -1
package/knob/knob.cjs.min.js +1 -1
package/knob/knob.esm.js +1 -1
package/knob/knob.esm.min.js +1 -1
package/knob/knob.js +1 -1
package/knob/knob.min.js +1 -1
package/multiselect/MultiSelect.vue +13 -9
package/multiselect/multiselect.cjs.js +14 -8
package/multiselect/multiselect.cjs.min.js +1 -1
package/multiselect/multiselect.esm.js +14 -8
package/multiselect/multiselect.esm.min.js +1 -1
package/multiselect/multiselect.js +14 -8
package/multiselect/multiselect.min.js +1 -1
package/orderlist/OrderList.d.ts +4 -0
package/orderlist/OrderList.vue +10 -1
package/orderlist/orderlist.cjs.js +17 -9
package/orderlist/orderlist.cjs.min.js +1 -1
package/orderlist/orderlist.esm.js +17 -9
package/orderlist/orderlist.esm.min.js +1 -1
package/orderlist/orderlist.js +17 -9
package/orderlist/orderlist.min.js +1 -1
package/organizationchart/OrganizationChart.d.ts +1 -1
package/package.json +1 -1
package/picklist/PickList.d.ts +5 -1
package/picklist/PickList.vue +10 -1
package/picklist/picklist.cjs.js +25 -17
package/picklist/picklist.cjs.min.js +1 -1
package/picklist/picklist.esm.js +25 -17
package/picklist/picklist.esm.min.js +1 -1
package/picklist/picklist.js +25 -17
package/picklist/picklist.min.js +1 -1
package/resources/themes/arya-blue/theme.css +12 -0
package/resources/themes/arya-green/theme.css +12 -0
package/resources/themes/arya-orange/theme.css +12 -0
package/resources/themes/arya-purple/theme.css +12 -0
package/resources/themes/bootstrap4-dark-blue/theme.css +16 -0
package/resources/themes/bootstrap4-dark-purple/theme.css +16 -0
package/resources/themes/bootstrap4-light-blue/theme.css +16 -0
package/resources/themes/bootstrap4-light-purple/theme.css +16 -0
package/resources/themes/fluent-light/theme.css +12 -0
package/resources/themes/lara-dark-blue/theme.css +12 -9
package/resources/themes/lara-dark-indigo/theme.css +12 -9
package/resources/themes/lara-dark-purple/theme.css +12 -9
package/resources/themes/lara-dark-teal/theme.css +12 -9
package/resources/themes/lara-light-blue/theme.css +12 -9
package/resources/themes/lara-light-indigo/theme.css +12 -9
package/resources/themes/lara-light-purple/theme.css +12 -9
package/resources/themes/lara-light-teal/theme.css +12 -9
package/resources/themes/luna-amber/theme.css +12 -0
package/resources/themes/luna-blue/theme.css +12 -0
package/resources/themes/luna-green/theme.css +12 -0
package/resources/themes/luna-pink/theme.css +12 -0
package/resources/themes/md-dark-deeppurple/theme.css +12 -0
package/resources/themes/md-dark-indigo/theme.css +12 -0
package/resources/themes/md-light-deeppurple/theme.css +12 -0
package/resources/themes/md-light-indigo/theme.css +12 -0
package/resources/themes/mdc-dark-deeppurple/theme.css +12 -0
package/resources/themes/mdc-dark-indigo/theme.css +12 -0
package/resources/themes/mdc-light-deeppurple/theme.css +12 -0
package/resources/themes/mdc-light-indigo/theme.css +12 -0
package/resources/themes/nova/theme.css +12 -0
package/resources/themes/nova-accent/theme.css +12 -0
package/resources/themes/nova-alt/theme.css +12 -0
package/resources/themes/nova-vue/theme.css +12 -0
package/resources/themes/rhea/theme.css +12 -0
package/resources/themes/saga-blue/theme.css +12 -0
package/resources/themes/saga-green/theme.css +12 -0
package/resources/themes/saga-orange/theme.css +12 -0
package/resources/themes/saga-purple/theme.css +12 -0
package/resources/themes/tailwind-light/theme.css +12 -0
package/resources/themes/vela-blue/theme.css +12 -0
package/resources/themes/vela-green/theme.css +12 -0
package/resources/themes/vela-orange/theme.css +12 -0
package/resources/themes/vela-purple/theme.css +12 -0
package/splitter/Splitter.vue +1 -1
package/splitter/splitter.cjs.js +1 -1
package/splitter/splitter.cjs.min.js +1 -1
package/splitter/splitter.esm.js +1 -1
package/splitter/splitter.esm.min.js +1 -1
package/splitter/splitter.js +1 -1
package/splitter/splitter.min.js +1 -1
package/tabview/TabView.vue +1 -1
package/tabview/tabview.cjs.js +1 -1
package/tabview/tabview.cjs.min.js +1 -1
package/tabview/tabview.esm.js +1 -1
package/tabview/tabview.esm.min.js +1 -1
package/tabview/tabview.js +1 -1
package/tabview/tabview.min.js +1 -1
package/treetable/FooterCell.vue +1 -1
package/treetable/TreeTable.d.ts +1 -1
package/treetable/treetable.cjs.js +1 -1
package/treetable/treetable.cjs.min.js +1 -1
package/treetable/treetable.esm.js +1 -1
package/treetable/treetable.esm.min.js +1 -1
package/treetable/treetable.js +1 -1
package/treetable/treetable.min.js +1 -1
package/vetur-attributes.json +12 -0
package/vetur-tags.json +5 -2
package/virtualscroller/VirtualScroller.vue +23 -13
package/virtualscroller/virtualscroller.cjs.js +23 -13
package/virtualscroller/virtualscroller.cjs.min.js +1 -1
package/virtualscroller/virtualscroller.esm.js +23 -13
package/virtualscroller/virtualscroller.esm.min.js +1 -1
package/virtualscroller/virtualscroller.js +23 -13
package/virtualscroller/virtualscroller.min.js +1 -1
package/web-types.json +76 -7

package/README.md CHANGED Viewed

@@ -5,6 +5,260 @@
 [![PrimeVue Hero](https://user-images.githubusercontent.com/686247/138925407-2a7e916d-c674-4fb5-b721-1dd41a8eeebc.jpg)](https://www.primefaces.org/primevue)
-### Website
+# PrimeVue
-Visit the [PrimeVue Website](https://www.primefaces.org/primevue/) for general information, demos and documentation.
+PrimeVue is a rich set of open source UI Components for Vue. See [PrimeVue homepage](https://www.primefaces.org/primevue/) for live showcase and documentation.
+## Download
+PrimeVue is available at npm, if you have an existing application run the following command to download it to your project.
+````
+npm install primevue@^3 --save
+npm install primeicons --save
+````
+or
+```
+yarn add primevue
+yarn add primeicons
+```
+Next step is setting up PrimeVue configuration.
+```javascript
+import {createApp} from 'vue';
+import App from './App.vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+app.use(PrimeVue);
+```
+## Import
+### Module
+```javascript
+import {createApp} from 'vue';
+import App from './App.vue';
+import PrimeVue from 'primevue/config';
+import Dialog from 'primevue/dialog';
+const app = createApp(App);
+app.use(PrimeVue);
+app.component('Dialog', Dialog);
+```
+Finally you'll be able to utilize the component in your application. See the Styles section to apply styling.
+```
+<Dialog></Dialog>
+```
+### CDN
+```javascript
+<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>/script>
+<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"></script>
+```
+## Single File Components
+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.
+```javascript
+import Dialog from 'primevue/dialog/sfc';
+```
+## Script Tag
+Other alternative is utilizing the components directly within the browser with the ***iife*** build. Note that PrimeVue does not provide a ***umd*** build.
+```javascript
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>PrimeVue Demo</title>
+        <link href="https://unpkg.com/primevue/resources/themes/lara-light-indigo/theme.css" rel="stylesheet">
+        <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
+        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
+        <script src="https://unpkg.com/vue@next"></script>
+        <script src="https://unpkg.com/primevue^3/core/core.min.js"></script>
+        <script src="https://unpkg.com/primevue^3/slider/slider.min.js"></script>
+    </head>
+    <body>
+        <div id="app">
+            <p-slider v-model="val"></p-slider>
+            <h6>{{val}}</h6>
+        </div>
+        <script>
+            const {createApp, ref} = Vue;
+            const App = {
+                setup() {
+                    const val = ref(null);
+                    return {
+                        val
+                    };
+                },
+                components: {
+                    'p-slider': primevue.slider
+                }
+            };
+            createApp(App).use(primevue.config.default).mount("#app");
+        </script>
+    </body>
+</html>
+```
+## Styles
+The css dependencies are as follows, note that you may change the theme with another one of your choice.
+```
+primevue/resources/themes/saga-blue/theme.css       //theme
+primevue/resources/primevue.min.css                 //core css
+primeicons/primeicons.css                           //icons
+```
+If you are using a bundler such as webpack with a css loader you may also import them to your main application component.
+```javascript
+import 'primevue/resources/themes/lara-light-indigo/theme.css';
+import 'primevue/resources/primevue.min.css';
+import 'primeicons/primeicons.css';
+```
+## Nuxt Integration
+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.
+**nuxt.config.js**
+Open the nuxt configuration file and add the css dependencies.
+```javascript
+import { defineNuxtConfig } from 'nuxt3';
+export default defineNuxtConfig({
+    css: [
+        'primevue/resources/themes/saga-blue/theme.css',
+        'primevue/resources/primevue.css',
+        'primeicons/primeicons.css'
+    ]
+})
+```
+**primevue.js**
+Create a file like **primevue.js** under the plugins directory for the configuration.
+```javascript
+import { defineNuxtPlugin } from "#app";
+import PrimeVue from "primevue/config";
+import Button from "primevue/button";
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(PrimeVue, {ripple: true});
+    nuxtApp.vueApp.component('Button', Button);
+    //other components that you need
+});
+```
+## Configuration
+### Dependencies
+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.
+In addition, components require PrimeIcons library for icons.
+```javascript
+dependencies: {
+    "vue": "^3.0.0",
+    "primeicons": "^5.0.0"
+}
+```
+## Prop Cases
+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.
+```
+<Dialog :showHeader="false"></Dialog>
+<!-- can be written as -->
+<Dialog :show-header="false"></Dialog>
+```
+## Ripple
+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.
+```
+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+app.use(PrimeVue, {ripple: true});
+```
+## Outlined vs Filled Input Styles
+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.
+```javascript
+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+app.use(PrimeVue, {inputStyle: 'filled'});
+```
+## ZIndex Layering
+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.
+```javascript
+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+app.use(PrimeVue, {
+    zIndex: {
+        modal: 1100,        //dialog, sidebar
+        overlay: 1000,      //dropdown, overlaypanel
+        menu: 1000,         //overlay menus
+        tooltip: 1100       //tooltip
+    }
+});
+```
+## Locale
+PrimeVue provides a Locale API to support i18n and l7n, visit the [Locale](https://www.primefaces.org/primevue/showcase/#/locale) documentation for more information.
+## Quickstart with Vue CLI
+An [example application](https://github.com/primefaces/primevue-quickstart) based on Vue CLI is available at github.
+## Quickstart with Vite
+A [starter application](https://github.com/primefaces/primevue-quickstart-vite) is also provided for Vite users.
+## Quickstart with Nuxt
+A [sample application](https://github.com/primefaces/primevue-quickstart-nuxt3) is created for Nuxt 3 users.
+## Quickstart with TypeScript
+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.

package/calendar/Calendar.d.ts CHANGED Viewed

@@ -276,6 +276,11 @@ export declare type CalendarEmits = {
      * @param {CalendarValueType} value - New value.
      */
     'update:modelValue': (value: CalendarValueType) => void;
+    /**
+     * Callback to invoke when input field is being typed.
+     * @param {Event} event - Browser event
+     */
+    'input': (event: Event) => void;
     /**
      * Callback to invoke when a date is selected.
      * @param {Date} value - Selected value.
@@ -309,6 +314,16 @@ export declare type CalendarEmits = {
      * @param {CalendarYearChangeEvent} event - Custom year change event.
      */
     'year-change': (event: CalendarYearChangeEvent) => void;
+    /**
+     * Callback to invoke on focus of input field.
+     * @param {Event} event - Focus event
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke on blur of input field.
+     * @param {Event} event - Blur event
+     */
+    'blur': (event: Event) => void;
 }
 declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> { }

package/calendar/Calendar.vue CHANGED Viewed

@@ -77,7 +77,7 @@
                             </span>
                         </div>
                     </template>
-                    <div class="p-timepicker" v-if="showTime||timeOnly">
+                    <div class="p-timepicker" v-if="(showTime||timeOnly) && currentView === 'date'">
                         <div class="p-hour-picker">
                             <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 0, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" v-ripple
                                 @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 0, 1)" @keydown.space="onTimePickerElementMouseDown($event, 0, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" @keyup.space="onTimePickerElementMouseUp($event)" type="button">
@@ -150,7 +150,7 @@ import Ripple from 'primevue/ripple';
 export default {
     name: 'Calendar',
     inheritAttrs: false,
-    emits: ['show', 'hide', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click'],
+    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur'],
     props: {
         modelValue: null,
         selectionMode: {
@@ -355,7 +355,7 @@ export default {
         }
         if (this.mask) {
-           this.destroyMask();
+            this.destroyMask();
         }
         this.destroyResponsiveStyleElement();
@@ -1237,9 +1237,9 @@ export default {
                         return false;
                     }
                     if (this.maxDate.getMinutes() === minute) {
-                      if (this.maxDate.getSeconds() < second) {
-                          return false;
-                      }
+                        if (this.maxDate.getSeconds() < second) {
+                            return false;
+                        }
                     }
                 }
             }
@@ -2140,7 +2140,7 @@ export default {
             }
         },
         onContainerButtonKeydown(event) {
-             switch (event.which) {
+            switch (event.which) {
                 //tab
                 case 9:
                     this.trapFocus(event);
@@ -2155,7 +2155,7 @@ export default {
                 default:
                     //Noop
                 break;
-             }
+            }
         },
         onInput(event) {
             try {
@@ -2171,16 +2171,21 @@ export default {
             catch(err) {
                 /* NoOp */
             }
+            this.$emit('input', event);
         },
-        onFocus() {
+        onFocus(event) {
             if (this.showOnFocus && this.isEnabled()) {
                 this.overlayVisible = true;
             }
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
             this.input.value = this.formatValue(this.modelValue);
+            this.$emit('blur', event);
         },
         onKeyDown() {
             if (event.keyCode === 40 && this.overlay) {

package/calendar/calendar.cjs.js CHANGED Viewed

@@ -15,7 +15,7 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 var script = {
     name: 'Calendar',
     inheritAttrs: false,
-    emits: ['show', 'hide', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click'],
+    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur'],
     props: {
         modelValue: null,
         selectionMode: {
@@ -220,7 +220,7 @@ var script = {
         }
         if (this.mask) {
-           this.destroyMask();
+            this.destroyMask();
         }
         this.destroyResponsiveStyleElement();
@@ -1102,9 +1102,9 @@ var script = {
                         return false;
                     }
                     if (this.maxDate.getMinutes() === minute) {
-                      if (this.maxDate.getSeconds() < second) {
-                          return false;
-                      }
+                        if (this.maxDate.getSeconds() < second) {
+                            return false;
+                        }
                     }
                 }
             }
@@ -1993,7 +1993,7 @@ var script = {
             }
         },
         onContainerButtonKeydown(event) {
-             switch (event.which) {
+            switch (event.which) {
                 //tab
                 case 9:
                     this.trapFocus(event);
@@ -2004,7 +2004,7 @@ var script = {
                     this.overlayVisible = false;
                     event.preventDefault();
                 break;
-             }
+            }
         },
         onInput(event) {
             try {
@@ -2020,16 +2020,21 @@ var script = {
             catch(err) {
                 /* NoOp */
             }
+            this.$emit('input', event);
         },
-        onFocus() {
+        onFocus(event) {
             if (this.showOnFocus && this.isEnabled()) {
                 this.overlayVisible = true;
             }
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
             this.input.value = this.formatValue(this.modelValue);
+            this.$emit('blur', event);
         },
         onKeyDown() {
             if (event.keyCode === 40 && this.overlay) {
@@ -2634,7 +2639,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         : vue.createCommentVNode("", true)
                     ], 64))
                   : vue.createCommentVNode("", true),
-                ($props.showTime||$props.timeOnly)
+                (($props.showTime||$props.timeOnly) && $data.currentView === 'date')
                   ? (vue.openBlock(), vue.createBlock("div", _hoisted_15, [
                       vue.createVNode("div", _hoisted_16, [
                         vue.withDirectives(vue.createVNode("button", {