Refactor #5553 - For Calendar
tugcekucukoglu
parent
8acf3b8391
commit
1b13aaa9d9
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -68,10 +68,6 @@ export default {
|
|||
type: String,
|
||||
default: 'date'
|
||||
},
|
||||
touchUI: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
monthNavigator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
else ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
|
||||
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) {
|
||||
this.enableModality();
|
||||
} else if (this.overlay) {
|
||||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue