You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.4 KiB
89 lines
2.4 KiB
<app-sidebar>
|
|
<div class={ getClasses() }>
|
|
<div class="sidebar__inner">
|
|
|
|
<!-- header -->
|
|
<div class="bar">
|
|
<div class="bar__main">
|
|
<slot name="title" />
|
|
</div>
|
|
<div class="bar__end">
|
|
<button class="button button--transparent" type="button" onclick={ (event) => { handleClose(event) } }>
|
|
<svg class="icon fill-text-contrast" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- body -->
|
|
<div class="sidebar__body">
|
|
<slot name="form" data={ state.data } />
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div class="sidebar__footer">
|
|
<button class="button m-bottom-0" type="submit" form="app-users-form">
|
|
Save
|
|
<svg class="icon fill-success p-left-3" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-check"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="button m-bottom-0" type="submit" form="app-users-form" close>
|
|
Save and Close
|
|
<svg class="icon fill-success p-left-3" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-arrow-right"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
import observable from '@riotjs/observable'
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
state: {
|
|
isOpen: false
|
|
},
|
|
|
|
onMounted()
|
|
{
|
|
observable(this.root)
|
|
|
|
this.root.on('open', () => {
|
|
this.state.isOpen = true
|
|
this.update()
|
|
})
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
getClasses()
|
|
{
|
|
let classes = [
|
|
'sidebar'
|
|
]
|
|
|
|
if (this.state.isOpen === true) {
|
|
classes.push('sidebar--open')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</app-sidebar> |