diff --git a/exports/ripple.d.ts b/exports/ripple.d.ts new file mode 100644 index 000000000..38fa5699a --- /dev/null +++ b/exports/ripple.d.ts @@ -0,0 +1 @@ +export * from './components/ripple/Ripple'; \ No newline at end of file diff --git a/exports/ripple.js b/exports/ripple.js new file mode 100644 index 000000000..937220c4d --- /dev/null +++ b/exports/ripple.js @@ -0,0 +1,2 @@ +'use strict'; +module.exports = require('./components/ripple/Ripple.js'); \ No newline at end of file diff --git a/src/AppMenu.vue b/src/AppMenu.vue index 0ae343ffc..1ff2dc0ba 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -236,6 +236,7 @@ Inplace ProgressBar ProgressSpinner + Ripple Terminal diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css index 986a67488..ac544b3a0 100644 --- a/src/assets/styles/primevue.css +++ b/src/assets/styles/primevue.css @@ -6,4 +6,5 @@ @import '../../components/inputtext/InputText.css'; @import '../../components/password/Password.css'; @import '../../components/radiobutton/RadioButton.css'; +@import '../../components/ripple/Ripple.css'; @import '../../components/tooltip/Tooltip.css'; \ No newline at end of file diff --git a/src/components/common/Common.css b/src/components/common/Common.css index aa1ad570a..59b1008eb 100755 --- a/src/components/common/Common.css +++ b/src/components/common/Common.css @@ -151,27 +151,4 @@ button { position: absolute; width: 1px; word-wrap: normal !important; -} - -.p-ink { - display: block; - position: absolute; - background: rgba(255, 255, 255, 0.5); - border-radius: 100%; - transform: scale(0); -} - -.p-ink-active { - animation: ripple 0.4s linear; -} - -.p-ripple-disabled .p-ink { - display: none !important; -} - -@keyframes ripple { - 100% { - opacity: 0; - transform: scale(2.5); - } } \ No newline at end of file diff --git a/src/components/ripple/Ripple.css b/src/components/ripple/Ripple.css new file mode 100644 index 000000000..d56db658e --- /dev/null +++ b/src/components/ripple/Ripple.css @@ -0,0 +1,27 @@ +.p-ripple { + overflow: hidden; + position: relative; +} + +.p-ink { + display: block; + position: absolute; + background: rgba(255, 255, 255, 0.5); + border-radius: 100%; + transform: scale(0); +} + +.p-ink-active { + animation: ripple 0.4s linear; +} + +.p-ripple-disabled .p-ink { + display: none !important; +} + +@keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } +} \ No newline at end of file diff --git a/src/components/ripple/Ripple.d.ts b/src/components/ripple/Ripple.d.ts new file mode 100644 index 000000000..61bb3266c --- /dev/null +++ b/src/components/ripple/Ripple.d.ts @@ -0,0 +1,3 @@ +import Directive from 'vue'; + +export declare interface Ripple extends Directive {} diff --git a/src/main.js b/src/main.js index 2efaf014e..bbdcd1651 100644 --- a/src/main.js +++ b/src/main.js @@ -52,6 +52,7 @@ import ProgressSpinner from './components/progressspinner/ProgressSpinner'; import Rating from './components/rating/Rating'; import RadioButton from './components/radiobutton/RadioButton'; import Row from './components/row/Row'; +import Ripple from './components/ripple/Ripple'; import ScrollPanel from './components/scrollpanel/ScrollPanel'; import SelectButton from './components/selectbutton/SelectButton'; import Slider from './components/slider/Slider'; @@ -90,6 +91,7 @@ import Vuelidate from 'vuelidate'; Vue.use(Vuelidate); Vue.use(ToastService); Vue.directive('tooltip', Tooltip); +Vue.directive('ripple', Ripple); Vue.prototype.$appState = Vue.observable({inputStyle: 'outlined', darkTheme: false}); Vue.prototype.$primevue = Vue.observable({ripple: true}); diff --git a/src/router.js b/src/router.js index cfedca667..1743d9db0 100755 --- a/src/router.js +++ b/src/router.js @@ -290,7 +290,12 @@ export default new Router({ path: '/dialog', name: 'dialog', component: () => import('./views/dialog/DialogDemo.vue') - }, + }, + { + path: '/display', + name: 'display', + component: () => import('./views/display/DisplayDemo.vue') + }, { path: '/dropdown', name: 'dropdown', @@ -366,6 +371,16 @@ export default new Router({ name: 'listbox', component: () => import('./views/listbox/ListboxDemo.vue') }, + { + path: '/flexbox', + name: 'flexbox', + component: () => import('./views/flexbox/FlexBoxDemo.vue') + }, + { + path: '/floatlabel', + name: 'floatlabel', + component: () => import('./views/floatlabel/FloatLabelDemo.vue') + }, { path: '/megamenu', name: 'megamenu', @@ -456,6 +471,11 @@ export default new Router({ name: 'rating', component: () => import('./views/rating/RatingDemo.vue') }, + { + path: '/ripple', + name: 'ripple', + component: () => import('./views/ripple/RippleDemo.vue') + }, { path: '/scrollpanel', name: 'scrollpanel', @@ -481,26 +501,6 @@ export default new Router({ name: 'spacing', component: () => import('./views/spacing/SpacingDemo.vue') }, - { - path: '/display', - name: 'display', - component: () => import('./views/display/DisplayDemo.vue') - }, - { - path: '/flexbox', - name: 'flexbox', - component: () => import('./views/flexbox/FlexBoxDemo.vue') - }, - { - path: '/floatlabel', - name: 'floatlabel', - component: () => import('./views/floatlabel/FloatLabelDemo.vue') - }, - { - path: '/text', - name: 'text', - component: () => import('./views/text/TextDemo.vue') - }, { path: '/splitbutton', name: 'splitbutton', @@ -525,11 +525,6 @@ export default new Router({ path: '/steps/confirmation', component: () => import('./views/steps/ConfirmationDemo.vue') }] - }, - { - path: '/textarea', - name: 'textarea', - component: () => import('./views/textarea/TextareaDemo.vue') }, { path: '/tabmenu', @@ -560,6 +555,16 @@ export default new Router({ name: 'tabview', component: () => import('./views/tabview/TabViewDemo.vue') }, + { + path: '/text', + name: 'text', + component: () => import('./views/text/TextDemo.vue') + }, + { + path: '/textarea', + name: 'textarea', + component: () => import('./views/textarea/TextareaDemo.vue') + }, { path: '/terminal', name: 'terminal', diff --git a/src/views/ripple/RippleDemo.vue b/src/views/ripple/RippleDemo.vue new file mode 100644 index 000000000..6309d6adb --- /dev/null +++ b/src/views/ripple/RippleDemo.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue new file mode 100644 index 000000000..459746336 --- /dev/null +++ b/src/views/ripple/RippleDoc.vue @@ -0,0 +1,146 @@ + \ No newline at end of file diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue index 2b2fee19b..8b5389e8c 100755 --- a/src/views/tooltip/TooltipDoc.vue +++ b/src/views/tooltip/TooltipDoc.vue @@ -13,7 +13,7 @@ Vue.directive('tooltip', Tooltip);

Tooltip can also be configured locally using the directives property of your component.

directives: { - tooltip: Tooltip + 'tooltip': Tooltip }