Refactor #5553 - For Calendar

api-generator/components/calendar.js

@@ -83,12 +83,6 @@ const CalendarProps = [
         default: 'date',
         description: 'Type of view to display, valid valids are "date" for datepicker and "month" for month picker.'
     },
-    {
-        name: 'touchUI',
-        type: 'boolean',
-        default: 'false',
-        description: 'When enabled, calendar overlay is displayed as optimized for touch devices.'
-    },
     {
         name: 'monthNavigator',
         type: 'boolean',

components/lib/calendar/BaseCalendar.vue

@@ -68,10 +68,6 @@ export default {
             type: String,
             default: 'date'
         },
-        touchUI: {
-            type: Boolean,
-            default: false
-        },
         monthNavigator: {
             type: Boolean,
             default: false

components/lib/calendar/Calendar.d.ts

@@ -581,11 +581,6 @@ export interface CalendarProps {
      * @defaultValue date
      */
     view?: 'date' | 'month' | 'year' | undefined;
-    /**
-     * When enabled, calendar overlay is displayed as optimized for touch devices.
-     * @defaultValue false
-     */
-    touchUI?: boolean | undefined;
     /**
      * Whether the month should be rendered as a dropdown instead of text.
      *

components/lib/calendar/Calendar.vue

@@ -551,12 +551,10 @@ export default {
     timePickerChange: false,
     scrollHandler: null,
     outsideClickListener: null,
-    maskClickListener: null,
     resizeListener: null,
     matchMediaListener: null,
     overlay: null,
     input: null,
-    mask: null,
     previousButton: null,
     nextButton: null,
     timePickerTimer: null,
@@ -589,7 +587,6 @@ export default {
             this.updateCurrentMetaData();
 
             if (!this.typeUpdate && !this.inline && this.input) {
-                // this.input.value = this.formatValue(newValue);
                 this.input.value = this.inputFieldValue;
             }
 
@@ -645,7 +642,6 @@ export default {
                 this.initFocusableCell();
             }
         } else {
-            // this.input.value = this.formatValue(this.modelValue);
             this.input.value = this.inputFieldValue;
         }
     },
@@ -667,10 +663,6 @@ export default {
             clearTimeout(this.timePickerTimer);
         }
 
-        if (this.mask) {
-            this.destroyMask();
-        }
-
         this.destroyResponsiveStyleElement();
 
         this.unbindOutsideClickListener();
@@ -870,13 +862,12 @@ export default {
         },
         onOverlayEnter(el) {
             el.setAttribute(this.attributeSelector, '');
-            const styles = this.touchUI ? { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } : !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+            const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
 
             DomHandler.addStyles(el, styles);
 
             if (this.autoZIndex) {
-                if (this.touchUI) ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
+                ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
-                else ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
             }
 
             this.alignOverlay();
@@ -899,10 +890,6 @@ export default {
             this.unbindResizeListener();
             this.$emit('hide');
 
-            if (this.mask) {
-                this.disableModality();
-            }
-
             this.overlay = null;
         },
         onPrevButtonClick(event) {
@@ -1088,9 +1075,7 @@ export default {
             return (this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target))) || (this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target)));
         },
         alignOverlay() {
-            if (this.touchUI) {
+            if (this.overlay) {
-                this.enableModality();
-            } else if (this.overlay) {
                 if (this.appendTo === 'self' || this.inline) {
                     DomHandler.relativePosition(this.overlay, this.$el);
                 } else {
@@ -1716,60 +1701,6 @@ export default {
 
             setTimeout(this.updateFocus, 0);
         },
-        enableModality() {
-            if (!this.mask) {
-                let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter';
-
-                this.mask = DomHandler.createElement('div', {
-                    class: !this.isUnstyled && styleClass,
-                    'p-bind': this.ptm('datepickermask')
-                });
-                this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
-
-                this.maskClickListener = () => {
-                    this.overlayVisible = false;
-                };
-
-                this.mask.addEventListener('click', this.maskClickListener);
-
-                document.body.appendChild(this.mask);
-                DomHandler.blockBodyScroll();
-            }
-        },
-        disableModality() {
-            if (this.mask) {
-                if (this.isUnstyled) {
-                    this.destroyMask();
-                } else {
-                    DomHandler.addClass(this.mask, 'p-component-overlay-leave');
-                    this.mask.addEventListener('animationend', () => {
-                        this.destroyMask();
-                    });
-                }
-            }
-        },
-        destroyMask() {
-            this.mask.removeEventListener('click', this.maskClickListener);
-            this.maskClickListener = null;
-            document.body.removeChild(this.mask);
-            this.mask = null;
-
-            let bodyChildren = document.body.children;
-            let hasBlockerMasks;
-
-            for (let i = 0; i < bodyChildren.length; i++) {
-                let bodyChild = bodyChildren[i];
-
-                if (DomHandler.isAttributeEquals(bodyChild, 'data-pc-section', 'datepickermask')) {
-                    hasBlockerMasks = true;
-                    break;
-                }
-            }
-
-            if (!hasBlockerMasks) {
-                DomHandler.unblockBodyScroll();
-            }
-        },
         updateCurrentMetaData() {
             const viewDate = this.viewDate;
 

doc/calendar/TouchUIDoc.vue

@@ -1,54 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>touchUI</i> is enabled, overlay is displayed as optimized for touch devices.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Calendar v-model="date" touchUI />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<Calendar v-model="date" touchUI />
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar v-model="date" touchUI />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar v-model="date" touchUI />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

pages/calendar/index.vue

@@ -30,7 +30,6 @@ import MultipleDoc from '@/doc/calendar/MultipleDoc.vue';
 import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc.vue';
 import RangeDoc from '@/doc/calendar/RangeDoc.vue';
 import TimeDoc from '@/doc/calendar/TimeDoc.vue';
-import TouchUIDoc from '@/doc/calendar/TouchUIDoc.vue';
 import YearPickerDoc from '@/doc/calendar/YearPickerDoc.vue';
 import PTComponent from '@/doc/calendar/pt/index.vue';
 import ThemingDoc from '@/doc/calendar/theming/index.vue';
@@ -109,11 +108,6 @@ export default {
                     label: 'Date Template',
                     component: DateTemplateDoc
                 },
-                {
-                    id: 'touchui',
-                    label: 'Touch UI',
-                    component: TouchUIDoc
-                },
                 {
                     id: 'inline',
                     label: 'Inline',