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

Add ripple

pull/358/head
cagataycivici 2020-06-27 12:36:55 +03:00
parent 10a8e47d0c
commit c547b037fd
28 changed files with 185 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppMenu.vue
View File

@ -53,7 +53,6 @@
<div class="menu-category">Data</div>
<div class="menu-items">
<router-link to="/carousel">Carousel</router-link>
<router-link to="/datatable" v-slot="{ href, route, navigate, isActive }">
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
@ -198,6 +197,7 @@
<div class="menu-category">Media</div>
<div class="menu-items">
<router-link to="/carousel">Carousel</router-link>
<router-link to="/galleria" v-slot="{ href, route, navigate, isActive }">
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>

10
src/components/carousel/Carousel.vue
View File

@ -5,7 +5,7 @@
</div>
<div :class="contentClasses">
<div :class="containerClasses">
<button :class="['p-carousel-prev p-link', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward" type="button">
<button :class="['p-carousel-prev p-link', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
<span :class="['p-carousel-prev-icon pi', {'pi-chevron-left': !isVertical(),'pi-chevron-up': isVertical()}]"></span>
</button>
@ -36,7 +36,7 @@
</div>
</div>
<button :class="['p-carousel-next p-link', {'p-disabled': forwardIsDisabled}]" :disabled="forwardIsDisabled" @click="navForward" type="button">
<button :class="['p-carousel-next p-link', {'p-disabled': forwardIsDisabled}]" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
<span :class="['p-carousel-prev-icon pi', {'pi-chevron-right': !isVertical(),'pi-chevron-down': isVertical()}]"></span>
</button>
</div>
@ -55,6 +55,7 @@
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -490,6 +491,9 @@ export default {
indicatorsContentClasses() {
return ['p-carousel-indicators p-reset', this.indicatorsContentClass];
},
},
directives: {
'ripple': Ripple
},
name: "Carousel"
}
@ -515,6 +519,8 @@ export default {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-carousel-container {

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

@ -175,13 +175,6 @@ button {
display: none !important;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;

2
src/components/contextmenu/ContextMenu.vue
View File

@ -231,6 +231,8 @@ export default {
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-contextmenu .p-menuitem-text {

8
src/components/contextmenu/ContextMenuSub.vue
View File

@ -4,11 +4,11 @@
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
:aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -25,6 +25,7 @@
<script>
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
name: 'sub-menu',
@ -125,6 +126,9 @@ export default {
containerClass() {
return {'p-submenu-list': !this.root};
}
},
directives: {
'ripple': Ripple
}
}
</script>

9
src/components/fileupload/FileUpload.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-fileupload p-component" v-if="isAdvanced">
<div class="p-fileupload-buttonbar">
<span icon="pi pi-plus" :class="advancedChooseButtonClass">
<span icon="pi pi-plus" :class="advancedChooseButtonClass" v-ripple>
<input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur"
:multiple="multiple" :accept="accept" :disabled="disabled" />
<span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
@ -31,7 +31,7 @@
</div>
</div>
</div>
<span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
<span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic" v-ripple>
<span :class="basicChooseButtonIconClass"></span>
<span class="p-button-text">{{basicChooseButtonLabel}}</span>
<input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
@ -43,6 +43,7 @@ import Button from '../button/Button';
import ProgressBar from '../progressbar/ProgressBar';
import Message from '../message/Message';
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -343,6 +344,9 @@ export default {
'FileUploadProgressBar': ProgressBar,
'FileUploadMessage': Message
},
directives: {
'ripple': Ripple
}
}
</script>
@ -380,6 +384,7 @@ export default {
filter: alpha(opacity=0);
direction: ltr;
cursor: pointer;
display: none;
}
.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {

4
src/components/galleria/Galleria.vue
View File

@ -215,6 +215,7 @@ export default {
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.p-galleria-item-prev {
@ -274,6 +275,8 @@ export default {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-galleria-thumbnail-prev span,
@ -435,6 +438,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.p-galleria-mask .p-galleria-item-nav {

6
src/components/galleria/GalleriaContent.vue
View File

@ -1,6 +1,6 @@
<template>
<div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
<button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
<button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')" v-ripple>
<span class="p-galleria-close-icon pi pi-times"></span>
</button>
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
@ -28,6 +28,7 @@ import UniqueComponentId from '../utils/UniqueComponentId';
import GalleriaItem from './GalleriaItem';
import GalleriaThumbnails from './GalleriaThumbnails';
import GalleriaItemSlot from './GalleriaItemSlot';
import Ripple from '../ripple/Ripple';
export default {
inheritAttrs: false,
@ -97,6 +98,9 @@ export default {
'GalleriaItem': GalleriaItem,
'GalleriaThumbnails': GalleriaThumbnails,
'GalleriaItemSlot': GalleriaItemSlot
},
directives: {
'ripple': Ripple
}
}
</script>

8
src/components/galleria/GalleriaItem.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="p-galleria-item-wrapper">
<div class="p-galleria-item-container">
<button v-if="showItemNavigators" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
<button v-if="showItemNavigators" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-ripple>
<span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-galleria-item">
<GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
</div>
<button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
<button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
<span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
</button>
<div class="p-galleria-caption" v-if="templates['caption']">
@ -27,6 +27,7 @@
<script>
import GalleriaItemSlot from './GalleriaItemSlot';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -153,6 +154,9 @@ export default {
},
components: {
'GalleriaItemSlot': GalleriaItemSlot
},
directives: {
'ripple': Ripple
}
};
</script>

8
src/components/galleria/GalleriaThumbnails.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-galleria-thumbnail-wrapper">
<div class="p-galleria-thumbnail-container">
<button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
<button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-ripple>
<span :class="navBackwardIconClass"></span>
</button>
<div class="p-galleria-thumbnail-items-container" :style="{'height': isVertical ? contentHeight : ''}">
@ -18,7 +18,7 @@
</div>
</div>
</div>
<button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
<button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
<span :class="navForwardIconClass"></span>
</button>
</div>
@ -28,6 +28,7 @@
<script>
import GalleriaItemSlot from './GalleriaItemSlot';
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -406,6 +407,9 @@ export default {
},
components: {
'GalleriaItemSlot': GalleriaItemSlot
},
directives: {
'ripple': Ripple
}
}
</script>

12
src/components/megamenu/MegaMenu.vue
View File

@ -5,7 +5,7 @@
<li v-if="visible(category)" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
@mouseenter="onCategoryMouseEnter($event, category)" role="none">
<a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'">
role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'" v-ripple>
<span v-if="category.icon" :class="getCategoryIcon(category)"></span>
<span class="p-menuitem-text">{{category.label}}</span>
<span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
@ -17,11 +17,11 @@
<li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
<template v-for="(item, i) of submenu.items">
<li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem" v-ripple>
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
@ -44,6 +44,7 @@
<script>
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
props: {
@ -294,6 +295,9 @@ export default {
vertical() {
return this.orientation === 'vertical';
}
},
directives: {
'ripple': Ripple
}
}
</script>
@ -318,6 +322,8 @@ export default {
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-megamenu .p-menuitem-text {

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

@ -195,6 +195,8 @@ export default {
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menu .p-menuitem-text {

9
src/components/menu/Menuitem.vue
View File

@ -1,10 +1,10 @@
<template>
<li :class="containerClass" role="none" :style="item.style" v-if="visible()">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url" :class="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'">
<a v-else :href="item.url" :class="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
@ -12,6 +12,8 @@
</template>
<script>
import Ripple from '../ripple/Ripple';
export default {
props: {
item: null
@ -34,6 +36,9 @@ export default {
linkClass() {
return ['p-menuitem-link', {'p-disabled': this.item.disabled}];
}
},
directives: {
'ripple': Ripple
}
}
</script>

2
src/components/menubar/Menubar.vue
View File

@ -90,6 +90,8 @@ export default {
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menubar .p-menuitem-text {

8
src/components/menubar/MenubarSub.vue
View File

@ -3,13 +3,13 @@
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)"
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
@ -24,6 +24,7 @@
<script>
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
name: 'sub-menu',
@ -274,6 +275,9 @@ export default {
containerClass() {
return {'p-submenu-list': !this.root, 'p-menubar-root-list': this.root};
}
},
directives: {
'ripple': Ripple
}
}
</script>

6
src/components/message/Message.vue
View File

@ -6,7 +6,7 @@
<div class="p-message-text">
<slot></slot>
</div>
<button class="p-message-close p-link" @click="visible = false" v-if="closable" type="button">
<button class="p-message-close p-link" @click="visible = false" v-if="closable" type="button" v-ripple>
<i class="p-message-close-icon pi pi-times"></i>
</button>
</div>
@ -76,7 +76,9 @@ export default {
}
.p-message-close.p-link {
margin-left: auto
margin-left: auto;
overflow: hidden;
position: relative;
}
.p-message-enter {

12
src/components/paginator/FirstPageLink.vue
View File

@ -1,16 +1,22 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button">
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-double-left"></span>
</button>
</template>
<script>
export default {
import Ripple from '../ripple/Ripple';
export default {
computed: {
containerClass() {
return ['p-paginator-first p-paginator-element p-link', {
'p-disabled': this.$attrs.disabled
}];
}
},
directives: {
'ripple': Ripple
}
}
}
</script>

13
src/components/paginator/LastPageLink.vue
View File

@ -1,17 +1,22 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button">
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-double-right"></span>
</button>
</template>
<script>
export default {
<script>
import Ripple from '../ripple/Ripple';
export default {
computed: {
containerClass() {
return ['p-paginator-last p-paginator-element p-link', {
'p-disabled': this.$attrs.disabled
}];
}
},
directives: {
'ripple': Ripple
}
}
}
</script>

12
src/components/paginator/NextPageLink.vue
View File

@ -1,16 +1,22 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button">
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-right"></span>
</button>
</template>
<script>
export default {
import Ripple from '../ripple/Ripple';
export default {
computed: {
containerClass() {
return ['p-paginator-next p-paginator-element p-link', {
'p-disabled': this.$attrs.disabled
}];
}
},
directives: {
'ripple': Ripple
}
}
}
</script>

11
src/components/paginator/PageLinks.vue
View File

@ -1,11 +1,13 @@
<template>
<span class="p-paginator-pages">
<button v-for="pageLink of value" :key="pageLink" :class="['p-paginator-page p-paginator-element p-link', {'p-highlight': ((pageLink - 1) === page)}]" type="button"
@click="onPageLinkClick($event, pageLink)">{{pageLink}}</button>
@click="onPageLinkClick($event, pageLink)" v-ripple>{{pageLink}}</button>
</span>
</template>
<script>
export default {
import Ripple from '../ripple/Ripple';
export default {
inheritAttrs: false,
props: {
value: Array,
@ -18,6 +20,9 @@
value: pageLink
});
}
},
directives: {
'ripple': Ripple
}
}
}
</script>

2
src/components/paginator/Paginator.vue
View File

@ -226,6 +226,8 @@ export default {
justify-content: center;
line-height: 1;
user-select: none;
overflow: hidden;
position: relative;
}
.p-paginator-element:focus {

12
src/components/paginator/PrevPageLink.vue
View File

@ -1,16 +1,22 @@
<template>
<button :class="containerClass" v-on="$listeners" type="button">
<button :class="containerClass" v-on="$listeners" type="button" v-ripple>
<span class="p-paginator-icon pi pi-angle-left"></span>
</button>
</template>
<script>
export default {
import Ripple from '../ripple/Ripple';
export default {
computed: {
containerClass() {
return ['p-paginator-prev p-paginator-element p-link', {
'p-disabled': this.$attrs.disabled
}];
}
},
directives: {
'ripple': Ripple
}
}
}
</script>

1
src/components/sidebar/Sidebar.vue
View File

@ -159,7 +159,6 @@ export default {
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-sidebar-mask {

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

@ -179,6 +179,8 @@ export default {
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-tieredmenu .p-menuitem-text {

8
src/components/tieredmenu/TieredMenuSub.vue
View File

@ -3,13 +3,13 @@
<template v-for="(item, i) of model">
<li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)" role="none">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)"
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@ -24,6 +24,7 @@
<script>
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
export default {
name: 'sub-menu',
@ -219,6 +220,9 @@ export default {
containerClass() {
return {'p-submenu-list': !this.root};
}
},
directives: {
'ripple': Ripple
}
}
</script>

2
src/components/toast/Toast.vue
View File

@ -132,6 +132,8 @@ export default {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-toast-icon-close.p-link {

7
src/components/toast/ToastMessage.vue
View File

@ -6,7 +6,7 @@
<span class="p-toast-title">{{message.summary}}</span>
<div class="p-toast-detail">{{message.detail}}</div>
</div>
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button">
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button" v-ripple>
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
</div>
@ -14,6 +14,8 @@
</template>
<script>
import Ripple from '../ripple/Ripple';
export default {
props: {
message: null
@ -55,6 +57,9 @@ export default {
'pi-check': this.message.severity === 'success'
}];
}
},
directives: {
'ripple': Ripple
}
}
</script>

4
src/views/dialog/DialogDemo.vue
View File

@ -160,4 +160,8 @@ export default {
margin: .5em .5em .5em 0;
width: 140px;
}
p {
margin: 0;
}
</style>