vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Rename transition

pull/358/head
cagataycivici 2020-06-27 17:31:52 +03:00
parent be037b9a27
commit 312175c891
10 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/AppTopBar.vue
View File

@ -10,7 +10,7 @@
<li><router-link to="/setup">Get Started</router-link></li>
<li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 0)">Themes</a>
<transition name="p-input-overlay" @enter="onMenuEnter">
<transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 0">
<li class="topbar-submenu-header">THEMING</li>
<li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
@ -63,7 +63,7 @@
</li>
<li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 1)">Templates</a>
<transition name="p-input-overlay" @enter="onMenuEnter">
<transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 1">
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
<li><a href="https://www.primefaces.org/sigma-vue"><img src="./assets/images/layouts/themeswitcher-sigma.png" alt="Sigma" /><span>Sigma</span></a></li>
@ -81,7 +81,7 @@
</li>
<li class="topbar-submenu topbar-resources-submenu">
<a tabindex="0" @click="toggleMenu($event, 2)">Resources</a>
<transition name="p-input-overlay" @enter="onMenuEnter">
<transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 2">
<li><router-link to="/support"><span>Support</span></router-link></li>
<li><a href="https://forum.primefaces.org/viewforum.php?f=110"><span>Forum</span></a></li>

2
src/components/autocomplete/AutoComplete.vue
View File

@ -13,7 +13,7 @@
</ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
<Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<ul :id="listId" class="p-autocomplete-items" role="listbox">
<li v-for="(item, i) of suggestions" class="p-autocomplete-item" :key="i" @click="selectItem($event, item)" role="option" v-ripple>

2
src/components/calendar/Calendar.vue
View File

@ -2,7 +2,7 @@
<span :class="containerClass">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
<template v-if="!timeOnly">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">

2
src/components/colorpicker/ColorPicker.vue
View File

@ -2,7 +2,7 @@
<div :class="containerClass">
<input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
@click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="picker" :class="pickerClass" v-if="inline ? true : overlayVisible">
<div class="p-colorpicker-content">
<div ref="colorSelector" class="p-colorpicker-color-selector" @mousedown="onColorMousedown">

14
src/components/common/Common.css
View File

@ -90,38 +90,38 @@ button {
}
/* Non vue overlay animations */
.p-input-overlay {
.p-connected-overlay {
opacity: 0;
transform: scaleY(0.8);
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}
.p-input-overlay-visible {
.p-connected-overlay-visible {
opacity: 1;
transform: scaleY(1);
}
.p-input-overlay-hidden {
.p-connected-overlay-hidden {
opacity: 0;
transform: scaleY(1);
transition: opacity .1s linear;
}
/* Vue based overlay animations */
.p-input-overlay-enter {
.p-connected-overlay-enter {
opacity: 0;
transform: scaleY(0.8);
}
.p-input-overlay-leave-to {
.p-connected-overlay-leave-to {
opacity: 0;
}
.p-input-overlay-enter-active {
.p-connected-overlay-enter-active {
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}
.p-input-overlay-leave-active {
.p-connected-overlay-leave-active {
transition: opacity .1s linear;
}

2
src/components/dropdown/Dropdown.vue
View File

@ -15,7 +15,7 @@
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
</div>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
<div class="p-dropdown-header" v-if="filter">
<div class="p-dropdown-filter-container">

2
src/components/menu/Menu.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="p-input-overlay" @enter="onEnter" @leave="onLeave">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div ref="container" :class="containerClass" v-if="popup ? visible : true">
<ul class="p-menu-list p-reset" role="menu">
<template v-for="(item, i) of model">

2
src/components/multiselect/MultiSelect.vue
View File

@ -14,7 +14,7 @@
<div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
</div>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible">
<div class="p-multiselect-header">
<div class="p-checkbox" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">

12
src/components/password/Password.vue
View File

@ -63,7 +63,7 @@ export default {
},
createPanel() {
this.panel = document.createElement('div');
this.panel.className = 'p-password-panel p-component p-password-panel-overlay p-input-overlay';
this.panel.className = 'p-password-panel p-component p-password-panel-overlay p-connected-overlay';
this.meter = document.createElement('div');
this.meter.className = 'p-password-meter';
this.info = document.createElement('div');
@ -92,8 +92,8 @@ export default {
vm.panel.style.zIndex = String(DomHandler.generateZIndex());
vm.panel.style.display = 'block';
setTimeout(() => {
DomHandler.addClass(this.panel, 'p-input-overlay-visible');
DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 1);
DomHandler.absolutePosition(this.panel, this.$refs.input);
}
@ -102,12 +102,12 @@ export default {
},
blur: event => {
if (this.panel) {
DomHandler.addClass(this.panel, 'p-input-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-input-overlay-visible');
DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
setTimeout(() => {
vm.panel.style.display = 'none';
DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 150);
}

2
src/components/tieredmenu/TieredMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="p-input-overlay" @enter="onEnter" @leave="onLeave">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div ref="container" :class="containerClass" v-if="popup ? visible : true">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
</div>