primevue 3.16.2 → 3.17.0

package/deferredcontent/deferredcontent.esm.js

@@ -6,14 +6,12 @@ var script = {
     data() {
         return {
             loaded: false
-        }
+        };
     },
     mounted() {
         if (!this.loaded) {
-            if (this.shouldLoad())
-                this.load();
-            else
-                this.bindScrollListener();
+            if (this.shouldLoad()) this.load();
+            else this.bindScrollListener();
         }
     },
     beforeUnmount() {
@@ -39,13 +37,12 @@ var script = {
         shouldLoad() {
             if (this.loaded) {
                 return false;
-            }
-            else {
+            } else {
                 const rect = this.$refs.container.getBoundingClientRect();
                 const docElement = document.documentElement;
                 const winHeight = docElement.clientHeight;
 
-                return (winHeight >= rect.top);
+                return winHeight >= rect.top;
             }
         },
         load(event) {

package/deferredcontent/deferredcontent.js

@@ -8,14 +8,12 @@ this.primevue.deferredcontent = (function (vue) {
         data() {
             return {
                 loaded: false
-            }
+            };
         },
         mounted() {
             if (!this.loaded) {
-                if (this.shouldLoad())
-                    this.load();
-                else
-                    this.bindScrollListener();
+                if (this.shouldLoad()) this.load();
+                else this.bindScrollListener();
             }
         },
         beforeUnmount() {
@@ -41,13 +39,12 @@ this.primevue.deferredcontent = (function (vue) {
             shouldLoad() {
                 if (this.loaded) {
                     return false;
-                }
-                else {
+                } else {
                     const rect = this.$refs.container.getBoundingClientRect();
                     const docElement = document.documentElement;
                     const winHeight = docElement.clientHeight;
 
-                    return (winHeight >= rect.top);
+                    return winHeight >= rect.top;
                 }
             },
             load(event) {

package/dialog/Dialog.d.ts

@@ -158,37 +158,37 @@ export declare type DialogEmits = {
     /**
      * Callback to invoke when dialog is hidden.
      */
-    'hide': () => void;
+    hide: () => void;
     /**
      * Callback to invoke after dialog is hidden.
-    */
+     */
     'after-hide': () => void;
     /**
      * Callback to invoke when dialog is shown.
      */
-    'show': () => void;
+    show: () => void;
     /**
      * Fired when a dialog gets maximized.
      * @param {event} event - Browser event.
      */
-    'maximize': (event: Event) => void;
+    maximize: (event: Event) => void;
     /**
      * Fired when a dialog gets unmaximized.
      * @param {event} event - Browser event.
      */
-    'unmaximize': (event: Event) => void;
+    unmaximize: (event: Event) => void;
     /**
      * Fired when a dialog drag completes.
      * @param {event} event - Browser event.
      */
-    'dragend': (event: Event) => void;
-}
+    dragend: (event: Event) => void;
+};
 
-declare class Dialog extends ClassComponent<DialogProps, DialogSlots, DialogEmits> { }
+declare class Dialog extends ClassComponent<DialogProps, DialogSlots, DialogEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Dialog: GlobalComponentConstructor<Dialog>
+        Dialog: GlobalComponentConstructor<Dialog>;
     }
 }
 
@@ -198,7 +198,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Dialog](https://www.primefaces.org/primevue/showcase/#/dialog)
+ * - [Dialog](https://www.primefaces.org/primevue/dialog)
  *
  */
 export default Dialog;

package/dialog/Dialog.vue

@@ -1,17 +1,17 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
-                    <div class="p-dialog-header" v-if="showHeader" @mousedown="initDrag">
+                <div v-if="visible" :ref="containerRef" :class="dialogClass" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
+                    <div v-if="showHeader" class="p-dialog-header" @mousedown="initDrag">
                         <slot name="header">
-                            <span :id="ariaLabelledById" class="p-dialog-title" v-if="header">{{header}}</span>
+                            <span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span>
                         </slot>
                         <div class="p-dialog-header-icons">
-                            <button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
+                            <button v-if="maximizable" v-ripple class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" tabindex="-1">
                                 <span :class="maximizeIconClass"></span>
                             </button>
-                            <button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" v-ripple>
+                            <button v-if="closable" v-ripple class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" :aria-label="ariaCloseLabel" type="button">
                                 <span class="p-dialog-header-close-icon pi pi-times"></span>
                             </button>
                         </div>
@@ -19,8 +19,8 @@
                     <div :class="contentStyleClass" :style="contentStyle">
                         <slot></slot>
                     </div>
-                    <div class="p-dialog-footer" v-if="footer || $slots.footer">
-                        <slot name="footer">{{footer}}</slot>
+                    <div v-if="footer || $slots.footer" class="p-dialog-footer">
+                        <slot name="footer">{{ footer }}</slot>
                     </div>
                 </div>
             </transition>
@@ -30,14 +30,14 @@
 
 <script>
 import { computed } from 'vue';
-import { UniqueComponentId,DomHandler,ZIndexUtils } from 'primevue/utils';
+import { UniqueComponentId, DomHandler, ZIndexUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 import Portal from 'primevue/portal';
 
 export default {
     name: 'Dialog',
     inheritAttrs: false,
-    emits: ['update:visible','show','hide', 'after-hide', 'maximize','unmaximize','dragend'],
+    emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
     props: {
         header: null,
         footer: null,
@@ -105,13 +105,13 @@ export default {
     provide() {
         return {
             dialogRef: computed(() => this._instance)
-        }
+        };
     },
     data() {
         return {
             containerVisible: this.visible,
             maximized: false
-        }
+        };
     },
     documentKeydownListener: null,
     container: null,
@@ -135,6 +135,7 @@ export default {
         if (this.mask && this.autoZIndex) {
             ZIndexUtils.clear(this.mask);
         }
+
         this.container = null;
         this.mask = null;
     },
@@ -172,6 +173,7 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.clear(this.mask);
             }
+
             this.containerVisible = false;
             this.unbindDocumentState();
             this.unbindGlobalListeners();
@@ -184,6 +186,7 @@ export default {
         },
         focus() {
             let focusTarget = this.container.querySelector('[autofocus]');
+
             if (focusTarget) {
                 focusTarget.focus();
             }
@@ -192,17 +195,14 @@ export default {
             if (this.maximized) {
                 this.maximized = false;
                 this.$emit('unmaximize', event);
-            }
-            else {
+            } else {
                 this.maximized = true;
                 this.$emit('maximize', event);
             }
 
             if (!this.modal) {
-                if (this.maximized)
-                    DomHandler.addClass(document.body, 'p-overflow-hidden');
-                else
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                if (this.maximized) DomHandler.addClass(document.body, 'p-overflow-hidden');
+                else DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
         enableDocumentSettings() {
@@ -219,23 +219,19 @@ export default {
             if (event.which === 9) {
                 event.preventDefault();
                 let focusableElements = DomHandler.getFocusableElements(this.container);
+
                 if (focusableElements && focusableElements.length > 0) {
                     if (!document.activeElement) {
                         focusableElements[0].focus();
-                    }
-                    else {
+                    } else {
                         let focusedIndex = focusableElements.indexOf(document.activeElement);
+
                         if (event.shiftKey) {
-                            if (focusedIndex == -1 || focusedIndex === 0)
-                                focusableElements[focusableElements.length - 1].focus();
-                            else
-                                focusableElements[focusedIndex - 1].focus();
-                        }
-                        else {
-                            if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
-                                focusableElements[0].focus();
-                            else
-                                focusableElements[focusedIndex + 1].focus();
+                            if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
+                            else focusableElements[focusedIndex - 1].focus();
+                        } else {
+                            if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
+                            else focusableElements[focusedIndex + 1].focus();
                         }
                     }
                 }
@@ -257,7 +253,7 @@ export default {
         },
         getPositionClass() {
             const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-            const pos = positions.find(item => item === this.position);
+            const pos = positions.find((item) => item === this.position);
 
             return pos ? `p-dialog-${pos}` : '';
         },
@@ -268,12 +264,13 @@ export default {
             this.mask = el;
         },
         createStyle() {
-			if (!this.styleElement) {
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
+
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
@@ -281,12 +278,12 @@ export default {
                                 width: ${this.breakpoints[breakpoint]} !important;
                             }
                         }
-                    `
+                    `;
                 }
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -337,24 +334,24 @@ export default {
                     this.container.style.position = 'fixed';
 
                     if (this.keepInViewport) {
-                        if (leftPos >= this.minX && (leftPos + width) < viewport.width) {
+                        if (leftPos >= this.minX && leftPos + width < viewport.width) {
                             this.lastPageX = event.pageX;
                             this.container.style.left = leftPos + 'px';
                         }
 
-                        if (topPos >= this.minY && (topPos + height) < viewport.height) {
+                        if (topPos >= this.minY && topPos + height < viewport.height) {
                             this.lastPageY = event.pageY;
                             this.container.style.top = topPos + 'px';
                         }
-                    }
-                    else {
+                    } else {
                         this.lastPageX = event.pageX;
                         this.container.style.left = leftPos + 'px';
                         this.lastPageY = event.pageY;
                         this.container.style.top = topPos + 'px';
                     }
                 }
-            }
+            };
+
             window.document.addEventListener('mousemove', this.documentDragListener);
         },
         unbindDocumentDragListener() {
@@ -372,6 +369,7 @@ export default {
                     this.$emit('dragend', event);
                 }
             };
+
             window.document.addEventListener('mouseup', this.documentDragEndListener);
         },
         unbindDocumentDragEndListener() {
@@ -383,21 +381,27 @@ export default {
     },
     computed: {
         maskClass() {
-            return ['p-dialog-mask', {'p-component-overlay p-component-overlay-enter': this.modal}, this.getPositionClass()];
+            return ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': this.modal }, this.getPositionClass()];
         },
         dialogClass() {
-            return ['p-dialog p-component', {
-                'p-dialog-rtl': this.rtl,
-                'p-dialog-maximized': this.maximizable && this.maximized,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-dialog p-component',
+                {
+                    'p-dialog-rtl': this.rtl,
+                    'p-dialog-maximized': this.maximizable && this.maximized,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         },
         maximizeIconClass() {
-            return ['p-dialog-header-maximize-icon pi', {
-                'pi-window-maximize': !this.maximized,
-                'pi-window-minimize': this.maximized
-            }];
+            return [
+                'p-dialog-header-maximize-icon pi',
+                {
+                    'pi-window-maximize': !this.maximized,
+                    'pi-window-minimize': this.maximized
+                }
+            ];
         },
         ariaId() {
             return UniqueComponentId();
@@ -413,12 +417,12 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
-}
+};
 </script>
 <style>
 .p-dialog-mask {
@@ -484,7 +488,7 @@ export default {
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 .p-dialog-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .p-dialog-enter-from,
 .p-dialog-leave-to {
@@ -501,7 +505,7 @@ export default {
 .p-dialog-topright .p-dialog,
 .p-dialog-bottomleft .p-dialog,
 .p-dialog-bottomright .p-dialog {
-    margin: .75rem;
+    margin: 0.75rem;
     transform: translate3d(0px, 0px, 0px);
 }
 .p-dialog-top .p-dialog-enter-active,
@@ -520,7 +524,7 @@ export default {
 .p-dialog-bottomleft .p-dialog-leave-active,
 .p-dialog-bottomright .p-dialog-enter-active,
 .p-dialog-bottomright .p-dialog-leave-active {
-    transition: all .3s ease-out;
+    transition: all 0.3s ease-out;
 }
 .p-dialog-top .p-dialog-enter-from,
 .p-dialog-top .p-dialog-leave-to {