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><router-link to="/setup">Get Started</router-link></li>
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 0)">Themes</a> <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"> <ul v-show="activeMenuIndex === 0">
<li class="topbar-submenu-header">THEMING</li> <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> <li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
@ -63,7 +63,7 @@
</li> </li>
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 1)">Templates</a> <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"> <ul v-show="activeMenuIndex === 1">
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li> <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> <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>
<li class="topbar-submenu topbar-resources-submenu"> <li class="topbar-submenu topbar-resources-submenu">
<a tabindex="0" @click="toggleMenu($event, 2)">Resources</a> <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"> <ul v-show="activeMenuIndex === 2">
<li><router-link to="/support"><span>Support</span></router-link></li> <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> <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> </ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i> <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"/> <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"> <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"> <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> <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"> <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" /> <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"/> <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"> <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
<template v-if="!timeOnly"> <template v-if="!timeOnly">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year"> <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"> <div :class="containerClass">
<input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" <input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
@click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/> @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 ref="picker" :class="pickerClass" v-if="inline ? true : overlayVisible">
<div class="p-colorpicker-content"> <div class="p-colorpicker-content">
<div ref="colorSelector" class="p-colorpicker-color-selector" @mousedown="onColorMousedown"> <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 */ /* Non vue overlay animations */
.p-input-overlay { .p-connected-overlay {
opacity: 0; opacity: 0;
transform: scaleY(0.8); transform: scaleY(0.8);
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); 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; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
.p-input-overlay-hidden { .p-connected-overlay-hidden {
opacity: 0; opacity: 0;
transform: scaleY(1); transform: scaleY(1);
transition: opacity .1s linear; transition: opacity .1s linear;
} }
/* Vue based overlay animations */ /* Vue based overlay animations */
.p-input-overlay-enter { .p-connected-overlay-enter {
opacity: 0; opacity: 0;
transform: scaleY(0.8); transform: scaleY(0.8);
} }
.p-input-overlay-leave-to { .p-connected-overlay-leave-to {
opacity: 0; 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); 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; 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"> <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down"></span> <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
</div> </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 ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
<div class="p-dropdown-header" v-if="filter"> <div class="p-dropdown-header" v-if="filter">
<div class="p-dropdown-filter-container"> <div class="p-dropdown-filter-container">

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

@ -1,5 +1,5 @@
<template> <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"> <div ref="container" :class="containerClass" v-if="popup ? visible : true">
<ul class="p-menu-list p-reset" role="menu"> <ul class="p-menu-list p-reset" role="menu">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">

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

@ -14,7 +14,7 @@
<div class="p-multiselect-trigger"> <div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span> <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
</div> </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 ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible">
<div class="p-multiselect-header"> <div class="p-multiselect-header">
<div class="p-checkbox" @click="onToggleAll" role="checkbox" :aria-checked="allSelected"> <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() { createPanel() {
this.panel = document.createElement('div'); 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 = document.createElement('div');
this.meter.className = 'p-password-meter'; this.meter.className = 'p-password-meter';
this.info = document.createElement('div'); this.info = document.createElement('div');
@ -92,8 +92,8 @@ export default {
vm.panel.style.zIndex = String(DomHandler.generateZIndex()); vm.panel.style.zIndex = String(DomHandler.generateZIndex());
vm.panel.style.display = 'block'; vm.panel.style.display = 'block';
setTimeout(() => { setTimeout(() => {
DomHandler.addClass(this.panel, 'p-input-overlay-visible'); DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
DomHandler.removeClass(this.panel, 'p-input-overlay-hidden'); DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 1); }, 1);
DomHandler.absolutePosition(this.panel, this.$refs.input); DomHandler.absolutePosition(this.panel, this.$refs.input);
} }
@ -102,12 +102,12 @@ export default {
}, },
blur: event => { blur: event => {
if (this.panel) { if (this.panel) {
DomHandler.addClass(this.panel, 'p-input-overlay-hidden'); DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-input-overlay-visible'); DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
setTimeout(() => { setTimeout(() => {
vm.panel.style.display = 'none'; vm.panel.style.display = 'none';
DomHandler.removeClass(this.panel, 'p-input-overlay-hidden'); DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
}, 150); }, 150);
} }

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

@ -1,5 +1,5 @@
<template> <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"> <div ref="container" :class="containerClass" v-if="popup ? visible : true">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/> <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
</div> </div>