Vue Overlays
Vue Overlays (Portal, Modal, Popover) based on React-Overlays and React Material-UI 1.X
Work in progress
TODO
- Two installation types: 1) automatic Vue.use() that installs all components 2) manual installation of every component on user side
- Good transitions support
- Fix hackish Portal beforeDestroy cleanup
- Refactor/improve sitauation around zIndex/'mui-fixed'/scrollbars/hidden overflow
- Make ModalManager scoped the same way as in MUI version
- Good SRR support
- Good way to customize styling/classes of VO components
- Passing DOM attributes like aria-* to VO components
- Sinking props into lower level components (e.g. Popover props => Modal props)
- Modal: keepMounted
- Modal: BackdropComponent
- Modal: children props role
- Modal: tabIndex prop make it work similar as in React version render
- Backdrop: custom backdrop rendering (slot?)
Examples
Basic
<body>
<div id="app">
<p>Elapsed seconds today: {{daySeconds}}</p>
<button type="button" @click="popoverOpen=true" ref="popoverAnchor">
Open Popover
</button>
<Popover
:popover-style="{boxShadow: '0 2px 5px 0 rgba(0,0,0,.2)', borderRadius:'5px'}"
v-if="popoverOpen"
@close="popoverOpen=false"
:anchor-el="$refs.popoverAnchor"
:transform-origin="{vertical: 'top', horizontal: 'left'}"
:anchor-origin="{vertical: 'top', horizontal: 'right'}"
>
<div style="background:white;width:400px;padding:5px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);">
<p>I'm content of the popover. </p>
<p>Elapsed seconds today: {{daySeconds}}</p>
<button type="button" @click="popoverOpen=false">
Hide Popover
</button>
</div>
</Popover>
</div>
<!-- Vue -->
<script src="../deps/vue-2.5.16.js"></script>
<!-- Library -->
<script src="../deps/library/index.js"></script>
<!-- Script -->
<script>
Vue.component('Portal', window.vo.Portal);
Vue.component('Backdrop', window.vo.Backdrop);
Vue.component('Modal', window.vo.Modal);
Vue.component('Popover', window.vo.Popover);
var app = new Vue({
el: '#app',
data: function(){
return {
popoverOpen: false,
daySeconds: 0,
}
},
created: function(){
this.setDaySeconds();
},
mounted: function(){
this.daySecondsInterval();
},
methods: {
setDaySeconds: function(){
var dt = new Date();
var secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
this.daySeconds = secs;
},
daySecondsInterval: function(){
setInterval(function () {
this.setDaySeconds();
}.bind(this), 1000);
},
},
});
</script>
</body>
Some content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consectetur perferendis, pariatur rerum praesentium maiores inventore debitis aperiam eaque dicta eligendi molestiae enim veritatis officia repellendus obcaecati non commodi nisi!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consectetur perferendis, pariatur rerum praesentium maiores inventore debitis aperiam eaque dicta eligendi molestiae enim veritatis officia repellendus obcaecati non commodi nisi!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consectetur perferendis, pariatur rerum praesentium maiores inventore debitis aperiam eaque dicta eligendi molestiae enim veritatis officia repellendus obcaecati non commodi nisi!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consectetur perferendis, pariatur rerum praesentium maiores inventore debitis aperiam eaque dicta eligendi molestiae enim veritatis officia repellendus obcaecati non commodi nisi!
Code...
var app = new Vue({
el: '#app',
data: function(){
return {
popoverOpen: false,
daySeconds: 0,
}
},
created: function(){
this.setDaySeconds();
},
mounted: function(){
this.daySecondsInterval();
},
methods: {
setDaySeconds: function(){
var dt = new Date();
var secs = dt.getSeconds() + (60 * dt.getMinutes()) + (60 * 60 * dt.getHours());
this.daySeconds = secs;
},
daySecondsInterval: function(){
setInterval(function () {
this.setDaySeconds();
}.bind(this), 1000);
},
},
});